Membuat Dashboard SIPUS dengan CodeIgniter 4 dan Bootstrap 5

MWI – Kita lanjut ke modul Dashboard SIPUS. Setelah modul Kategori dan Buku, Dashboard menjadi halaman utama yang menampilkan ringkasan data perpustakaan agar admin maupun petugas bisa melihat kondisi sistem dengan cepat.

Untuk tahap awal, kita buat Dashboard sederhana menggunakan CodeIgniter 4.7.5, Bootstrap 5, dan database yang sudah kita gunakan untuk aplikasi SIPUS.

1. Fitur Dashboard

Dashboard akan menampilkan empat kartu informasi:

1. Total Buku – jumlah seluruh data buku.
2. Total Kategori – jumlah kategori buku.
3. Total Anggota – jumlah anggota perpustakaan.
4. Total Peminjaman – jumlah transaksi peminjaman.

Di bawah kartu informasi, kita tambahkan bagian sambutan dan menu akses cepat menuju modul Buku, Kategori, dan Peminjaman.

2. Struktur file

Buat file berikut:

app/
├── Controllers/
│   └── Dashboard.php
├── Views/
│   └── dashboard/
│       └── index.php
└── Config/
    └── Routes.php

3. Membuat Dashboard Controller

Buat file app/Controllers/Dashboard.php.

Controller ini mengambil jumlah data dari masing-masing tabel, kemudian mengirimkannya ke halaman Dashboard.

<?php

namespace App\Controllers;

class Dashboard extends BaseController
{
    public function index()
    {
        $db = db_connect();

        // Menghitung jumlah seluruh buku
        $totalBooks = $db->table('books')
            ->countAllResults();

        // Menghitung jumlah kategori
        $totalCategories = $db->table('categories')
            ->countAllResults();

        // Menghitung jumlah anggota
        $totalMembers = $db->table('members')
            ->countAllResults();

        // Menghitung jumlah transaksi peminjaman
        $totalLoans = $db->table('loans')
            ->countAllResults();

        return view('dashboard/index', [
            'totalBooks'      => $totalBooks,
            'totalCategories' => $totalCategories,
            'totalMembers'    => $totalMembers,
            'totalLoans'      => $totalLoans,
        ]);
    }
}

Penjelasan:

• db_connect() menghubungkan controller dengan database.
• table('books') memilih tabel buku.
• countAllResults() menghitung jumlah seluruh baris dalam tabel.
• return view() menampilkan halaman Dashboard sekaligus mengirimkan hasil perhitungan.

Catatan: kode ini mengasumsikan tabel members dan loans sudah tersedia. Jika kedua modul tersebut belum kita buat, kita bisa menyesuaikan sementara agar Dashboard tetap dapat kita buka.

4. Membuat halaman Dashboard

Buat file app/Views/dashboard/index.php.

Halaman ini menggunakan layout utama SIPUS yang sudah kita siapkan sebelumnya.

<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>

<div class="container-fluid">

    <!-- Judul Dashboard -->
    <div class="mb-4">
        <h3 class="fw-bold">Dashboard SIPUS</h3>
        <p class="text-muted">
            Selamat datang di Sistem Informasi Perpustakaan Sekolah.
        </p>
    </div>

    <!-- Kartu Ringkasan -->
    <div class="row g-3">

        <div class="col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted mb-2">Total Buku</div>
                    <h2 class="fw-bold text-primary">
                        <?= number_format($totalBooks) ?>
                    </h2>
                    <a href="<?= site_url('books') ?>"
                       class="small text-decoration-none">
                        Lihat Data Buku
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted mb-2">Total Kategori</div>
                    <h2 class="fw-bold text-success">
                        <?= number_format($totalCategories) ?>
                    </h2>
                    <a href="<?= site_url('categories') ?>"
                       class="small text-decoration-none">
                        Lihat Kategori
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted mb-2">Total Anggota</div>
                    <h2 class="fw-bold text-warning">
                        <?= number_format($totalMembers) ?>
                    </h2>
                    <span class="small text-muted">
                        Data anggota perpustakaan
                    </span>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted mb-2">Total Peminjaman</div>
                    <h2 class="fw-bold text-danger">
                        <?= number_format($totalLoans) ?>
                    </h2>
                    <span class="small text-muted">
                        Seluruh transaksi peminjaman
                    </span>
                </div>
            </div>
        </div>

    </div>

    <!-- Menu Akses Cepat -->
    <div class="card border-0 shadow-sm mt-4">
        <div class="card-body">
            <h5 class="fw-bold mb-3">Akses Cepat</h5>

            <div class="d-flex flex-wrap gap-2">
                <a href="<?= site_url('books') ?>"
                   class="btn btn-primary">
                    Data Buku
                </a>

                <a href="<?= site_url('categories') ?>"
                   class="btn btn-success">
                    Data Kategori
                </a>

                <a href="<?= site_url('members') ?>"
                   class="btn btn-warning">
                    Data Anggota
                </a>

                <a href="<?= site_url('loans') ?>"
                   class="btn btn-danger">
                    Data Peminjaman
                </a>
            </div>
        </div>
    </div>

</div>

<?= $this->endSection() ?>

5. Menambahkan Routes

Buka app/Config/Routes.php, kemudian tambahkan route Dashboard:

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

Jika Dashboard ingin menjadi halaman pertama ketika pengguna membuka aplikasi, ubah route utama:

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

Pastikan route lama untuk halaman Home tidak lagi digunakan sebagai route / jika memang ingin menggantinya.

6. Menguji Dashboard

Jalankan aplikasi:

php spark serve

Kemudian buka:

http://localhost:8080/dashboard

Jika route / sudah diarahkan ke Dashboard, buka:

http://localhost:8080/

Target tahap ini

Dashboard menampilkan empat jumlah data dan tautan akses cepat. Angka pada kartu akan mengikuti isi database, sehingga nilainya berubah ketika data bertambah atau berkurang.

7. Catatan sebelum melanjutkan

Ada dua hal yang perlu kita perhatikan:

• Menu Anggota dan Peminjaman pada Dashboard baru bisa kita gunakan setelah route dan modul tersebut tersedia.
• Kode di atas menghitung semua transaksi peminjaman, bukan hanya peminjaman yang masih aktif. Nanti kita bisa menambahkan statistik peminjaman aktif, terlambat, dan sudah peminjam kembalikan setelah struktur tabel transaksi selesai.

Urutan pengembangan berikutnya: selesaikan Dashboard, lanjutkan CRUD Anggota, kemudian modul Peminjaman dan Pengembalian. (ms)