Tutorial Laravel: Membuat Sistem Pengaduan Masyarakat (Tahap 5: Dashboard Admin & User + Logout Navigasi)
Setelah fitur login dan proteksi middleware siap pada Tahap 4, langkah selanjutnya adalah membuat tampilan Dashboard Admin dan Dashboard User (Masyarakat) yang dilengkapi dengan sistem navigasi Logout.
📋 Ringkasan Tahap 5
- Tujuan: Membangun halaman antarmuka (view) dashboard untuk masing-masing hak akses pengguna (Admin & User) serta menguji proteksi middleware.
- Fitur Utama: Integrasi ucapan selamat datang dinamis, tombol Logout aman dengan token CSRF, dan pemisahan area akses.
- Estimasi Waktu: 4 – 6 Menit.
🛠️ Langkah-Langkah Eksekusi
1. Membuat Halaman Dashboard Admin (admin/dashboard.blade.php)
Buat folder baru bernama admin di dalam folder resources/views/, lalu buat file dashboard.blade.php:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Admin - Sistem Pengaduan</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar Admin -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Admin Portal</a>
<div class="d-flex align-items-center text-white">
<span class="me-3">Halo, <strong>{{ Auth::user()->name }}</strong></span>
<!-- Form Logout -->
<form action="{{ route('logout') }}" method="POST">
@csrf
<button type="submit" class="btn btn-danger btn-sm">Logout</button>
</form>
</div>
</div>
</nav>
<!-- Konten Main Admin -->
<div class="container mt-4">
<div class="p-5 bg-light rounded-3 border">
<h1 class="display-6">Selamat Datang di Dashboard Admin!</h1>
<p class="lead">Halaman ini khusus diakses oleh pengguna dengan role <strong>Admin</strong>.</p>
<hr class="my-4">
<p>Pada tahap selanjutnya, seluruh daftar laporan masuk dari masyarakat akan dikelola dari halaman ini.</p>
</div>
</div>
</body>
</html>2. Membuat Halaman Dashboard User (user/dashboard.blade.php)
Buat folder baru bernama user di dalam folder resources/views/, lalu buat file dashboard.blade.php:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Masyarakat - Layanan Pengaduan</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar User -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Layanan Pengaduan</a>
<div class="d-flex align-items-center text-white">
<span class="me-3">Halo, <strong>{{ Auth::user()->name }}</strong></span>
<!-- Form Logout -->
<form action="{{ route('logout') }}" method="POST">
@csrf
<button type="submit" class="btn btn-warning btn-sm">Logout</button>
</form>
</div>
</div>
</nav>
<!-- Konten Main User -->
<div class="container mt-4">
<div class="p-5 bg-light rounded-3 border">
<h1 class="display-6">Selamat Datang, {{ Auth::user()->name }}!</h1>
<p class="lead">Halaman ini khusus diakses oleh pengguna dengan role <strong>User (Masyarakat)</strong>.</p>
<hr class="my-4">
<p>Pada tahap selanjutnya, kita akan menambahkan form pembuatan laporan pengaduan baru di halaman ini.</p>
</div>
</div>
</body>
</html>3. Pengujian Alur & Pembatasan Akses (Middleware Test)
Untuk memastikan seluruh alur autentikasi bekerja sesuai skenario, jalankan server local:
php artisan serveLakukan pengujian langkah demi langkah di browser:
- Akses halaman login:
[http://127.0.0.1:8000/login](http://127.0.0.1:8000/login) - Uji Login Admin: Gunakan email
admin@gmail.comdan passwordpassword123.- Hasil: Berhasil masuk ke halaman
/admin/dashboard.
- Hasil: Berhasil masuk ke halaman
- Uji Proteksi Satpam (Middleware): Saat posisi login sebagai Admin, coba ketik manual URL User di address bar browser:
[http://127.0.0.1:8000/user/dashboard](http://127.0.0.1:8000/user/dashboard).- Hasil: Sistem otomatis memblokir akses dan menampilkan pesan error 403 Forbidden / Unauthorized.
- Klik tombol Logout di navbar, lalu coba login menggunakan akun User (
user@gmail.com/password123).
