Tutorial Codeigniter Part 15 – Halaman Dashboard

codeigniter-kcdev
Advertisements

Tutorial ini merupakan seri penutup setelah kita menyelesaikan 14 bagian sebelumnya. Di tutorial ini kita akan membuat sebuah halaman rangkuman atau disebut juga sebagai halaman dashboard. Seperti yang sebelumnya kace sudah janjikan di awal, halaman dashboard yang akan kita buat adalah seperti berikut:

kcdev-dashboard
Dashboard Aplikasi Alumni

Seperti gambar diatas, kita akan membuat 2 buah widget yang masing-masing akan menampilkan event terdekat dan lowongan kerja terbaru yang kita buat pada modul sebelumnya. Jadi siapkah kau tuk jatuh cinta lagi siapkan dulu file project kita dan mari memulai dengan ucapan Bismillahirrahmanirrahim.

1. Memperbarui Controller Dashboard

Pada controller dashboard, kita menambahkan 2 baris baru di dalam function __construct() untuk memanggil model event dan model loker. Kemudian pada function index() kita melakukan query untuk mengambil data event dan loker yang lebih besar dari tanggal hari ini atau data yang belum berakhir.

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Dashboard extends MY_Controller 
{
  public function __construct()
  {
    parent::__construct();

    // Cek apakah user sudah login
    $this->cekLogin();

    // Load model
    $this->load->model('model_events');
    $this->load->model('model_loker');
  }

  public function index()
  {
    // Ambil data event dari database berdasarkan 
    // tanggal berakhir <= tanggal hari ini
    $event = $this->model_events->get_where(array(
      'tanggal_berakhir >=' => date('Y-m-d')
    ))->row();

    // Ambil data loker dari database berdasarkan 
    // tanggal berakhir <= tanggal hari ini
    $loker = $this->model_loker->get_where(array(
      'tanggal_berakhir >=' => date('Y-m-d')
    ))->row();
    
    // Data untuk page index
    $data['event'] = $event;
    $data['loker'] = $loker;
    $data['pageTitle'] = 'Dashboard';
    $data['pageContent'] = $this->load->view('dashboard/content', $data, true);

    // Jalankan view template/layout
    $this->load->view('template/layout', $data);
  }
}

2. Memperbarui View Dashboard

Advertisements

Selanjutnya pada file application/views/dashboard/content.php kita menambahkan dua buah widget yang akan menampilkan data hasil query kita pada controller tadi. Disini akan di cek kembali, apakah data event dan loker tidak kosong. Jika data atau hasil query nya kosong, maka kita akan menampilkan karakter “-“.

<div class="row">
    <div class="col s12 m6">
        <div class="card blue">
            <div class="card-content white-text">
                <p class="card-title">Event Berikutnya</p>
                <div class="row dashboard-row">
                    <div class="col s2">
                        <i class="large material-icons">event</i>
                    </div>
                    <div class="col s10">
                        <h4 class="dashboard-title">
                            <?php echo ($event) ? $event->nama : '-'; ?>
                        </h4>
                        <h6 class="dashboard-title">
                            <?php echo ($event) ? date_format(date_create($event->tanggal_berakhir), 'd F Y') : '-'; ?>
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col s12 m6">
        <div class="card red darken-1">
            <div class="card-content white-text x">
                <p class="card-title">Lowongan Kerja Terbaru</p>
                <div class="row dashboard-row">
                    <div class="col s2">
                        <i class="large material-icons">work</i>
                    </div>
                    <div class="col s10">
                        <h4 class="dashboard-title">
                            <?php echo ($loker) ? $loker->nama_perusahaan : '-'; ?>
                        </h4>
                        <h6 class="dashboard-title">
                            <?php echo ($loker) ? date_format(date_create($loker->tanggal_berakhir), 'd F Y') : '-'; ?>
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Setelah berhasil melakukan 2 step di atas, langkah berikutnya adalah menjalankan hasil jerih payah kita. Jika kodingan kita tidak ada yang salah, maka dashboard aplikasi alumni kita akan tampil seperti di bawah.

Halaman dashboard dengan data event dan loker
Halaman dashboard tanpa data event dan loker
Advertisements

Selesai sudah project aplikasi alumni codeigniter kita. Jika dirasa bermanfaat silahkan di share. Jangan lupa untuk mengunduh semua file tutorial ini bisa lewat sini. Sekian dan terima kasih wassalamualaikum.

“Belajarlah kalian semua atas ilmu yang kalian inginkan, maka demi Allah tidak akan diberikan pahala kalian sebab mengumpulkan ilmu sehingga kamu mengamalkannya” (HR. Abu Hasan).

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

2 Replies to “Tutorial Codeigniter Part 15 – Halaman Dashboard

  1. Terima kasih banyak bang ini sangat bermanfaat sekali! saya doakan semoga dimudahkan rezeki nya ya bang 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *