Tujuan: Di bagian sebelumnya, kita telah berhasil menyiapkan "kerangka" aplikasi. Anda mungkin bertanya, "Apa gunanya melakukan semua ini jika hasilnya sama saja?" Manfaat sesungguhnya dari Blade Templating akan kita buktikan sekarang, saat kita mulai membuat halaman dashboard fungsional dengan sangat cepat dan terstruktur menggunakan pola MVC.

Langkah 1: Membuat Controller & Rute untuk Dashboard

Pertama, kita siapkan "otak" dan "jalan" untuk halaman dashboard kita.

1. Buat DashboardController: Buka terminal di VS Code (Ctrl + ~) dan jalankan perintah Artisan berikut:
    

   php artisan make:controller DashboardController

   
   
    
2. Perintah ini akan membuat file baru di app/Http/Controllers/DashboardController.php.
3. Atur Rute di web.php:
   • Buka file routes/web.php.
   • Di bagian paling atas, "impor" DashboardController yang baru kita buat.
      

     use App\Http\Controllers\DashboardController;

     
     
      
   • Tambahkan rute baru untuk halaman dashboard dan beri nama dashboard.
      

     Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');

     
     
      
   • Terakhir, ubah rute utama (/) agar otomatis mengarahkan (redirect) ke rute dashboard. Ganti kode rute / yang lama dengan ini:
      

     Route::get('/', function () {
         return redirect()->route('dashboard');
     
     });

     
     
      

Langkah 2: Mengisi Logika di DashboardController

Sekarang kita isi DashboardController untuk mengambil data dari database dan mengirimkannya ke tampilan.

1. Buka file app/Http/Controllers/DashboardController.php.
2. Impor Model yang akan kita gunakan di bagian atas file, di bawah use Illuminate\Http\Request;:
    

   use App\Models\Item;
   use App\Models\Loan;
   use App\Models\User;

   
   
    

3. Isi seluruh kelas DashboardController dengan kode di bawah ini:
    

   <?php
   
   
   namespace App\Http\Controllers;
   
   
   
   use App\Models\Item;
   
   use App\Models\Loan;
   
   use App\Models\User;
   
   use Illuminate\Http\Request;
   
   
   
   class DashboardController extends Controller
   
   {
   
       // Variabel untuk data umum
   
       protected $title = 'Dashboard';
   
       protected $menu = 'dashboard';
   
       protected $directory = 'admin.dashboard';
   
   
   
       public function index()
   
       {
   
           // Menyiapkan array untuk dikirim ke view
   
           $data['title'] = $this->title;
   
           $data['menu'] = $this->menu;
   
   
   
           // Mengambil data dari database
   
           $data['total_siswa'] = User::where('role', 'Siswa')->count();
   
           $data['total_item'] = Item::count();
   
           $data['total_loan'] = Loan::where('status', 'Dipinjam')->count();
   
   
   
           // Me-return view beserta data
   
           return view($this->directory . '.index', $data);
   
       }
   
   }

   

Penjelasan Singkat:

• Variabel protected di atas kita siapkan untuk menyimpan informasi umum halaman agar rapi.
• Mengapa Fungsi index()yang dibuat?, karena dari routing dashboard yang kita buat sebelumnya itu kita memberitahukan pada Laravel bahwa “ketika ada yang mengakses url /dashboard arahkan ke DashboardController di Fungsi index”, coba deh lihat lagi gimana code routing dashboard tadi.
• Fungsi index() ini kita siapkan untuk mengambil data total siswa, total barang, dan total peminjaman dari database menggunakan Model, lalu "mengoper" semua data tersebut ke file view dalam bentuk variabel $data agar bisa ditampilkan hasil datanya nanti ke Halaman Dashboard.
   

Langkah 3: Menyiapkan dan Mengisi Tampilan (View) Dashboard

Data sudah siap, sekarang kita buat tampilannya.

1. Di dalam resources/views/admin/, buat folder baru bernama dashboard.
   
   
    
2. Di dalam folder dashboard tersebut, buat file baru bernama index.blade.php.
   
   
    
3. Isi file index.blade.php dengan kode berikut. Perhatikan bagaimana kita menggunakan @extends dan @section dalam penerapan blade templeting yang sudah kita buat sebelumnya.
    

   @extends('admin.layouts.app')
   
   
   {{-- CSS --}}
   
   @section('css')
   
   
   
   @endsection
   
   
   
   {{-- Konten Utama --}}
   
   @section('content')
   
   <div class="row">
   
       {{-- Total Siswa --}}
   
       <div class="col-lg-4">
   
           <div class="card">
   
               <div class="card-body">
   
                   <div class="row align-items-start">
   
                       <div class="col-8">
   
                           <h5 class="card-title mb-9 fw-semibold"> Total Siswa </h5>
   
                           <h4 class="fw-semibold mb-3">{{ $total_siswa }}</h4>
   
                       </div>
   
                       <div class="col-4">
   
                           <div class="d-flex justify-content-end">
   
                               <div
   
                                   class="text-white bg-secondary rounded-circle p-6 d-flex align-items-center justify-content-center">
   
                                   <i class="ti ti-users fs-6"></i>
   
                               </div>
   
                           </div>
   
                       </div>
   
                   </div>
   
               </div>
   
           </div>
   
       </div>
   
   
   
       {{-- Total Item --}}
   
       <div class="col-lg-4">
   
           <div class="card">
   
               <div class="card-body">
   
                   <div class="row align-items-start">
   
                       <div class="col-8">
   
                           <h5 class="card-title mb-9 fw-semibold"> Total Item </h5>
   
                           <h4 class="fw-semibold mb-3">{{ $total_item }}</h4>
   
                       </div>
   
                       <div class="col-4">
   
                           <div class="d-flex justify-content-end">
   
                               <div
   
                                   class="text-white bg-primary rounded-circle p-6 d-flex align-items-center justify-content-center">
   
                                   <i class="ti ti-box fs-6"></i>
   
                               </div>
   
                           </div>
   
                       </div>
   
                   </div>
   
               </div>
   
           </div>
   
       </div>
   
   
   
       {{-- Total Pinjaman --}}
   
       <div class="col-lg-4">
   
           <div class="card">
   
               <div class="card-body">
   
                   <div class="row align-items-start">
   
                       <div class="col-8">
   
                           <h5 class="card-title mb-9 fw-semibold"> Total Pinjaman </h5>
   
                           <h4 class="fw-semibold mb-3">{{ $total_loan }}</h4>
   
                       </div>
   
                       <div class="col-4">
   
                           <div class="d-flex justify-content-end">
   
                               <div
   
                                   class="text-white bg-warning rounded-circle p-6 d-flex align-items-center justify-content-center">
   
                                   <i class="ti ti-alarm fs-6"></i>
   
                               </div>
   
                           </div>
   
                       </div>
   
                   </div>
   
               </div>
   
           </div>
   
       </div>
   
   </div>
   
   @endsection
   
   
   
   {{-- JavaScript --}}
   
   @section('js')
   
   
   
   @endsection

   
    

Penjelasan: Kode di atas adalah potongan HTML dari template-admin (file index.html) yang sudah kita sesuaikan. Perhatikan bagaimana kita menampilkan data yang dikirim dari controller menggunakan {{ $total_siswa }}, {{ $total_item }}, dan {{ $total_loan }}.
 

Langkah 4: Uji Coba Halaman Dashboard Dinamis

1. Pastikan server Anda berjalan (composer run dev).
2. Buka browser dan kunjungi http://127.0.0.1:8000. Anda akan otomatis diarahkan ke halaman /dashboard.
3. Hasil: Anda akan melihat halaman dashboard dengan tiga kartu (card) yang menampilkan jumlah total siswa, total item, dan total peminjaman berdasarkan data yang ada di database Anda saat ini.
   
   

Langkah 5: Membersihkan dan Membuat Sidebar Dinamis

Setelah halaman dashboard kita berfungsi dan menampilkan data, sekarang saatnya merapikan menu navigasi (sidebar) agar sesuai dengan kebutuhan aplikasi SIMINLAB dan membuatnya interaktif. Kita ingin menu yang aktif saat ini memiliki tanda visual (misalnya, warna latar yang berbeda).

1. Buka File Sidebar:
   • Buka file resources/views/admin/layouts/sidebar.blade.php di VS Code.
2. Bersihkan Menu yang Tidak Perlu:
   • Di dalam file tersebut, cari elemen <ul id="sidebarnav">. Saat ini, isinya sangat banyak dengan menu-menu contoh dari template.
     
     
      
   • Hapus semua item di dalam <ul> tersebut kecuali bagian heading "Home" dan item menu "Dashboard". Hasilnya akan terlihat seperti ini:
      

     <ul id="sidebarnav">
     
         <li class="nav-small-cap">
     
             <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
     
             <span class="hide-menu">Home</span>
     
         </li>
     
         <li class="sidebar-item">
     
             <a class="sidebar-link" href="./index.html" aria-expanded="false">
     
                 <span>
     
                     <i class="ti ti-layout-dashboard"></i>
     
                 </span>
     
                 <span class="hide-menu">Dashboard</span>
     
             </a>
     
         </li>
     
     </ul>

     
      
3. Buat Link dan Status Aktif menjadi Dinamis:
   • Sekarang, sesuaikan kode menu dashboard didalam kode <ul id="sidebarnav"> yang sudah bersih tadi dengan kode di bawah ini. Kode ini akan menghubungkan link ke route Laravel kita dan menambahkan logika untuk status "aktif".
      

     <ul id="sidebarnav">
     
         <li class="nav-small-cap">
     
             <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
     
             <span class="hide-menu">Home</span>
     
         </li>
     
         <li class="sidebar-item {{ Request::is('dashboard') ? 'selected' : '' }}">
     
             <a class="sidebar-link {{ Request::is('dashboard') ? 'active' : '' }}" href="{{ route('dashboard') }}" aria-expanded="false">
     
                 <span>
     
                     <i class="ti ti-layout-dashboard"></i>
     
                 </span>
     
                 <span class="hide-menu">Dashboard</span>
     
             </a>
     
         </li>
     
     </ul>

      

Penjelasan Singkat:

• href="{{ route('dashboard') }}": Kita mengubah link statis href="./index.html" menjadi dinamis. Perintah ini akan secara otomatis menghasilkan URL yang benar untuk route yang kita beri nama dashboard di web.php.
• {{ Request::is('dashboard') ? 'selected' : '' }} dan {{ Request::is('dashboard') ? 'active' : '' }}: Ini adalah logika Blade untuk memeriksa kondisi. Artinya: Jika URL yang sedang dibuka adalah /dashboard, maka tambahkan class CSS bernama selected atau active. Jika tidak, jangan tambahkan apa-apa. Ini yang akan membuat menu kita menyala saat aktif.
   

Langkah 6: Menghapus Banner "Upgrade to Pro"

Untuk membuat tampilan sidebar kita sepenuhnya fokus pada navigasi, kita akan menghapus banner promosi bawaan dari template.

1. Masih di file sidebar.blade.php, scroll ke bagian bawah.
2. Cari blok kode yang dimulai dengan <div class="unlimited-access ...">.
   
   
    
3. Hapus seluruh blok div tersebut, mulai dari <div class="unlimited-access ..."> sampai </div> penutupnya.
    

Langkah 7: Verifikasi Hasil Akhir di Browser

1. Simpan file sidebar.blade.php.
2. Kembali ke browser Anda dan refresh halaman dashboard.
3. Hasil yang Diharapkan: Anda akan melihat tiga perubahan besar:
   • Menu sidebar sekarang sangat bersih dan hanya menampilkan link "Dashboard".
   • Menu "Dashboard" tersebut akan memiliki latar belakang yang berbeda (aktif/menyala).
   • Banner "Upgrade to Pro" di bagian bawah sidebar sudah hilang.
     
     
      

Selamat! Anda telah berhasil membangun halaman dinamis pertama Anda dengan menerapkan semua konsep yang telah kita pelajari.