Membuat Dashboard Admin Interaktif dengan CodeIgniter dan Chart.js

Dashboard admin merupakan elemen penting dalam aplikasi web modern karena memungkinkan pengguna untuk memantau data, menganalisis performa, dan mengambil keputusan dengan cepat. Dengan menggabungkan CodeIgniter sebagai backend dan Chart.js sebagai library visualisasi data 🎨, kamu dapat membuat dashboard yang tidak hanya fungsional tetapi juga menarik secara visual.

Pada artikel ini, kita akan membahas langkah demi langkah cara membangun dashboard interaktif menggunakan CodeIgniter dan Chart.js, mulai dari persiapan lingkungan hingga menampilkan grafik dinamis berdasarkan data database.

1. Persiapan Lingkungan

Instalasi CodeIgniter dan Chart.js

Sebelum memulai, pastikan kamu sudah menginstal CodeIgniter 4 dan memiliki server lokal seperti XAMPP atau Laragon. Untuk menginstal CodeIgniter, jalankan perintah berikut:

composer create-project codeigniter4/appstarter ci4-dashboard

Setelah itu, unduh Chart.js dari CDN dengan menambahkan script berikut di bagian bawah file view kamu:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Langkah ini akan memungkinkan integrasi Chart.js untuk menampilkan grafik interaktif di halaman dashboard 📊.

2. Menyiapkan Database

Struktur Data

Buat database bernama ci4_dashboard dan jalankan query berikut di phpMyAdmin:

CREATE TABLE sales (
  id INT AUTO_INCREMENT PRIMARY KEY,
  month VARCHAR(50),
  total_sales INT
);

Masukkan beberapa data dummy untuk keperluan demo:

INSERT INTO sales (month, total_sales) VALUES
('Januari', 250),
('Februari', 400),
('Maret', 350),
('April', 500),
('Mei', 600);

3. Membuat Model untuk Mengambil Data

UserModel untuk Query Database

Buat file baru di app/Models/SalesModel.php:

<?php
namespace App\Models;
use CodeIgniter\Model;

class SalesModel extends Model {
  protected $table = 'sales';
  protected $allowedFields = ['month', 'total_sales'];
}
?>

Model ini akan digunakan untuk mengambil data penjualan dari database yang nantinya akan dikirim ke Chart.js.

4. Membuat Controller Dashboard

Menyiapkan Data untuk Grafik

Buat file app/Controllers/Dashboard.php dan isi dengan kode berikut:

<?php
namespace App\Controllers;
use App\Models\SalesModel;
use CodeIgniter\Controller;

class Dashboard extends Controller {
    public function index() {
        $model = new SalesModel();
        $data['sales'] = $model->findAll();
        echo view('dashboard', $data);
    }
}
?>

Controller ini mengambil data dari tabel sales dan mengirimkannya ke view untuk divisualisasikan.

5. Membuat View Dashboard

Menampilkan Data dengan Chart.js

Buat file app/Views/dashboard.php dengan isi berikut:

<h2>Dashboard Penjualan</h2>
<canvas id="salesChart" width="400" height="200"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');
const salesData = {
  labels: [],
  datasets: [{
    label: 'Total Penjualan',
    data: [],
    backgroundColor: 'rgba(75, 192, 192, 0.4)',
    borderColor: 'rgba(75, 192, 192, 1)',
    borderWidth: 2
  }]
};
new Chart(ctx, {
  type: 'bar',
  data: salesData,
  options: {
    responsive: true,
    plugins: {
      legend: { display: true },
      title: { display: true, text: 'Grafik Penjualan per Bulan' }
    }
  }
});
</script>

Script ini akan menampilkan grafik batang berdasarkan data penjualan yang diambil dari database 💹.

6. Menambahkan Routing

Konfigurasi Routes.php

Buka file app/Config/Routes.php dan tambahkan rute berikut:

$routes->get('/dashboard', 'Dashboard::index');

Sekarang kamu bisa mengakses dashboard dengan membuka URL http://localhost/ci4-dashboard/public/dashboard.

7. Menambahkan Statistik Tambahan

Menampilkan Data Ringkas

Kamu bisa menambahkan data summary seperti total penjualan dan rata-rata dalam bentuk tabel:

Statistik	Nilai
Total Penjualan	2100
Rata-rata per Bulan	420

Elemen ini membantu pengguna memahami data secara cepat tanpa harus membaca grafik 📈.

8. Menambahkan Chart Tambahan

Pie Chart dan Line Chart

Untuk membuat dashboard lebih dinamis, kamu dapat menambahkan grafik jenis lain seperti Pie Chart dan Line Chart menggunakan dataset berbeda.

new Chart(ctx2, {
  type: 'pie',
  data: { labels: ['Produk A', 'Produk B', 'Produk C'], datasets: [{ data: [40, 30, 30] }] },
});

Dengan Chart.js, kamu bisa mengombinasikan berbagai jenis grafik di satu halaman dashboard 🧩.

9. Menambahkan Interaktivitas

Tooltip dan Filter Data

Chart.js mendukung fitur interaktif seperti tooltip, hover, dan event click. Kamu bisa menambahkan filter berdasarkan bulan atau tahun menggunakan elemen <select> di atas grafik untuk mempersempit tampilan data sesuai kebutuhan pengguna 🔍.

10. Mengamankan Dashboard

Gunakan Autentikasi Session

Pastikan hanya user yang login yang dapat mengakses dashboard. Tambahkan pengecekan session di controller:

if (!session()->get('logged_in')) return redirect()->to('/login');

11. Optimasi Performa Dashboard

Gunakan Caching dan Lazy Loading

Untuk mempercepat waktu muat, gunakan caching pada query data dan aktifkan lazy loading untuk grafik besar. Chart.js juga mendukung asynchronous update, sehingga data dapat diperbarui tanpa reload halaman ⚡.

12. FAQ (Pertanyaan Umum)

Apakah Chart.js gratis? Ya, 100% open source.
Bisa menampilkan data real-time? Bisa dengan WebSocket atau AJAX.
Apakah perlu backend khusus? Tidak, cukup gunakan CodeIgniter.
Bagaimana cara ubah warna chart? Gunakan properti backgroundColor.
Bisa tampilkan multi-chart? Bisa dalam satu halaman.
Apakah Chart.js support animasi? Ya, dengan efek transisi bawaan.
Bisa digunakan di mobile? Sangat responsif 📱.
Bisa export chart ke gambar? Ya, gunakan chart.toBase64Image().
Bagaimana mengupdate data otomatis? Gunakan fetch() atau AJAX.
Apakah bisa diintegrasi dengan API? Ya, Chart.js hanya butuh data JSON.
Bisa tambahkan legend custom? Bisa dengan plugin Chart.js.
Bisa tampilkan nilai di atas bar? Bisa pakai plugin chartjs-plugin-datalabels.
Apakah mendukung tema dark mode? Ya, bisa dikustomisasi CSS.

Kesimpulan

Menggunakan kombinasi CodeIgniter 4 dan Chart.js memudahkan pembuatan dashboard admin interaktif yang responsif, cepat, dan mudah di-maintain 💻. Kamu bisa menambahkan fitur lanjutan seperti filter dinamis, update data otomatis, dan autentikasi pengguna untuk meningkatkan profesionalisme sistemmu.