Tujuan: Di bagian ini, kita akan memasang sistem autentikasi penuh menggunakan Laravel Breeze. Kita akan membedah bagaimana Breeze bekerja, mulai dari rute, controller, hingga view, lalu mengintegrasikannya secara sempurna dengan template admin kita, termasuk membuat header menjadi dinamis sesuai status login pengguna.

Langkah 1: Instalasi Laravel Breeze

Langkah pertama adalah menambahkan Laravel Breeze ke dalam proyek kita. Breeze akan secara otomatis membuatkan semua file yang kita butuhkan untuk sistem autentikasi.

1. Download Breeze: Buka terminal di VS Code, pastikan Anda berada di dalam direktori proyek siminlab, lalu jalankan:
    

   composer require laravel/breeze --dev

   
    
2. Install Breeze: Setelah selesai, jalankan perintah instalasi:
    

   php artisan breeze:install

   
    
3. Jawab pertanyaan yang muncul:
   1. Which Breeze stack would you like to install? › Blade
   2. Would you like dark mode support? (yes/no) [no] › No
   3. Which testing framework do you prefer? [Pest] › Pest
      
      
      
      
       
4. Jalankan perintah akhir yang disarankan oleh Breeze untuk aset frontend:
    

   npm install
   npm run build

   
    

Langkah 2: Memahami File & Folder Baru

Setelah instalasi, Breeze menambahkan beberapa file dan folder penting. Perhatikan struktur baru ini:

• routes/auth.php: File baru yang berisi semua rute terkait autentikasi.
• app/Http/Controllers/Auth/: Folder baru yang berisi semua "otak" atau controller autentikasi.
• app/Http/Requests/Auth/: Folder baru berisi file-file validasi untuk form autentikasi.
• resources/views/auth/, layouts/, profile/: Folder-folder baru di dalam views yang berisi tampilan untuk login, register, layout dasar Breeze, dan halaman profil.
  Catatan: Kita bisa menghiraukan folder layouts dan profile bawaan Breeze karena kita sudah memiliki layout sendiri. Biarkan saja folder tersebut, jangan dihapus.

Langkah 3: Penyesuaian dan Pemahaman Rute (Routing)

Instalasi Breeze akan menimpa file routes/web.php kita. Mari kita perbaiki dan pahami alur middleware yang digunakan.

1. Memperbaiki routes/web.php:
   • Buka file routes/web.php. Anda akan melihat isinya berubah total. Mari kita lihat perubahannya.
   • KODE web.php KITA SEBELUM INSTALASI BREEZE:

     <?php
     use Illuminate\Support\Facades\Route;
     
     use App\Http\Controllers\DashboardController;
     
     use App\Http\Controllers\UserController;
     
     
     
     Route::get('/', function () {
     
         return redirect()->route('dashboard');
     
     });
     
     Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
     
     Route::resource('users', UserController::class);

     
      

• KODE web.php SETELAH INSTALASI BREEZE (OTOMATIS):
   

  <?php
  use App\Http\Controllers\ProfileController;
  
  use Illuminate\Support\Facades\Route;
  
  
  
  Route::get('/', function () {
  
      return view('welcome');
  
  });
  
  Route::get('/dashboard', function () {
  
      return view('dashboard');
  
  })->middleware(['auth', 'verified'])->name('dashboard');
  
  // ... rute profile lainnya
  
  require __DIR__.'/auth.php';
  

  
   

• KODE web.php FINAL (SETELAH PENYESUAIAN): Sekarang, ganti seluruh isi web.php dengan kode di bawah ini untuk menggabungkan rute kita dengan sistem autentikasi Breeze.
   

  <?php
  use App\Http\Controllers\DashboardController;
  
  use App\Http\Controllers\UserController;
  
  use Illuminate\Support\Facades\Route;
  
  
  
  Route::get('/', function () {
  
      return redirect()->route('dashboard');
  
  });
  
  
  
  Route::middleware('auth')->group(function () {
  
      Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
  
      Route::resource('users', UserController::class);
  
  });
  
  
  
  require __DIR__.'/auth.php';

  
   

• Penjelasan middleware('auth'): Middleware auth adalah 'satpam' bawaan Laravel untuk memeriksa apakah pengguna sudah login. Jika belum, mereka akan otomatis diarahkan ke halaman login. Di Laravel 12, alias auth ini didaftarkan di bootstrap/app.php melalui metode withMiddleware(), yang secara default merujuk ke konfigurasi inti di vendor\laravel\framework\src\Illuminate\Foundation\Configuration\Middleware.php. 

2. Memahami routes/auth.php dan Middleware guest:
   • Buka file baru routes/auth.php. Anda akan melihat bahwa rute untuk login dan register dibungkus oleh Route::middleware('guest')->group(...).
      

     Route::middleware('guest')->group(function () {
         // ...
     
         Route::get('login', [AuthenticatedSessionController::class, 'create'])
     
                     ->name('login');
     
     
     
         Route::post('login', [AuthenticatedSessionController::class, 'store']);
     
         // ...
     
     });
     

     
      

Penjelasan middleware('guest'): Ini adalah kebalikan dari auth. Middleware ini memastikan rute di dalamnya hanya bisa diakses oleh tamu (pengguna yang belum login). Jika pengguna yang sudah login mencoba membuka halaman /login, mereka akan otomatis diarahkan ke dashboard.

Langkah 4: Kustomisasi Tampilan Halaman Login

Di tahap ini, kita akan fokus membuat halaman login terlihat profesional sesuai template admin kita.

1. Salin Kode HTML Awal: Buka file template public/template-admin/src/html/authentication-login.html, salin semua isinya, lalu tempel ke resources/views/auth/login.blade.php (hapus isi yang lama).
   
   
   
    
2. Sesuaikan Aset dan Judul: Perbaiki semua path aset (CSS, JS, gambar) menggunakan {{ asset(...) }} dan ganti <title> menjadi <title>SIMINLAB - Login</title>.
   
   
    
3. Sesuaikan Form: Ganti seluruh kode di dalam <div class="card-body"> setelah <p class="text-center">...</p> dengan kode form Blade yang fungsional ini:
    

   <form method="POST" action="{{ route('login') }}">
       @csrf
   
       <div class="mb-3">
   
           <label for="email" class="form-label">Email</label>
   
           <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required autofocus>
   
           @error('email')
   
               <div class="invalid-feedback">{{ $message }}</div>
   
           @enderror
   
       </div>
   
       <div class="mb-4">
   
           <label for="password" class="form-label">Password</label>
   
           <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" required>
   
           @error('password')
   
               <div class="invalid-feedback">{{ $message }}</div>
   
           @enderror
   
       </div>
   
       <div class="d-flex align-items-center justify-content-between mb-4">
   
           <div class="form-check">
   
               <input class="form-check-input primary" type="checkbox" name="remember" id="remember_me">
   
               <label class="form-check-label text-dark" for="remember_me">
   
                   Ingat perangkat ini
   
               </label>
   
           </div>
   
       </div>
   
       <button type="submit" class="btn btn-primary w-100 py-8 fs-4 mb-4 rounded-2">Sign In</button>
   
   </form>

   
   
   
    
4. Menambahkan Notifikasi SweetAlert:
   • Di file login.blade.php, scroll ke bagian bawah sebelum tag </body>. Tambahkan script untuk SweetAlert dan logika untuk menampilkan notifikasi dari session.
      

     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
     
     <script>
     
         @if (session('status'))
     
             swal({
     
                 title: 'Berhasil!',
     
                 text: '{{ session('status') }}',
     
                 icon: 'success',
     
             });
     
         @endif
     
     </script>
     
     </body>

     
      

5. Kode Lengkap login.blade.php: Setelah semua penyesuaian, berikut adalah kode lengkap untuk file login.blade.php Anda. Perhatikan pada kode di bagian .card-body, terdapat perubahan direktori image dengan kode awal {{ asset('template-admin/src/assets/images/logos/dark-logo.svg') }} menjadi seperti ini {{ asset('template-admin/src/assets/images/logos/logo.png') }} dan teks pada tag p dengan teks awal Your Social Campaigns menjadi Sistem Inventaris dan Peminjaman Laboratorium.
    

   <!doctype html>
   
   <html lang="en">
   
   <head>
   
       <meta charset="utf-8">
   
       <meta name="viewport" content="width=device-width, initial-scale=1">
   
       <title>SIMINLAB - Login</title>
   
       <link rel="shortcut icon" type="image/png" href="{{ asset('template-admin/src/assets/images/logos/favicon.png') }}" />
   
       <link rel="stylesheet" href="{{ asset('template-admin/src/assets/css/styles.min.css') }}" />
   
   </head>
   
   <body>
   
       <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
   
           data-sidebar-position="fixed" data-header-position="fixed">
   
           <div class="position-relative overflow-hidden radial-gradient min-vh-100 d-flex align-items-center justify-content-center">
   
               <div class="d-flex align-items-center justify-content-center w-100">
   
                   <div class="row justify-content-center w-100">
   
                       <div class="col-md-8 col-lg-6 col-xxl-3">
   
                           <div class="card mb-0">
   
                               <div class="card-body">
   
                                   <a href="#" class="text-nowrap logo-img text-center d-block py-3 w-100">
   
                                       <img src="{{ asset('template-admin/src/assets/images/logos/logo.png') }}" width="180" alt="">
   
                                   </a>
   
                                   <p class="text-center">Sistem Inventaris dan Peminjaman Laboratorium</p>
   
                                   <form method="POST" action="{{ route('login') }}">
   
                                       @csrf
   
                                       <div class="mb-3">
   
                                           <label for="email" class="form-label">Email</label>
   
                                           <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required autofocus>
   
                                           @error('email')
   
                                               <div class="invalid-feedback">{{ $message }}</div>
   
                                           @enderror
   
                                       </div>
   
                                       <div class="mb-4">
   
                                           <label for="password" class="form-label">Password</label>
   
                                           <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" required>
   
                                           @error('password')
   
                                               <div class="invalid-feedback">{{ $message }}</div>
   
                                           @enderror
   
                                       </div>
   
                                       <div class="d-flex align-items-center justify-content-between mb-4">
   
                                           <div class="form-check">
   
                                               <input class="form-check-input primary" type="checkbox" name="remember" id="remember_me">
   
                                               <label class="form-check-label text-dark" for="remember_me">
   
                                                   Ingat perangkat ini
   
                                               </label>
   
                                           </div>
   
                                       </div>
   
                                       <button type="submit" class="btn btn-primary w-100 py-8 fs-4 mb-4 rounded-2">Sign In</button>
   
                                   </form>
   
                               </div>
   
                           </div>
   
                       </div>
   
                   </div>
   
               </div>
   
           </div>
   
       </div>
   
       <script src="{{ asset('template-admin/src/assets/libs/jquery/dist/jquery.min.js') }}"></script>
   
       <script src="{{ asset('template-admin/src/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
   
       <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
   
       <script>
   
           @if (session('status'))
   
               swal({
   
                   title: 'Berhasil!',
   
                   text: '{{ session('status') }}',
   
                   icon: 'success',
   
               });
   
           @endif
   
       </script>
   
   </body>
   
   </html>

   
   
   
   
   
    

Langkah 5: Membedah Logika Autentikasi

Mari kita lihat "mesin" yang sudah dibuatkan Breeze untuk kita.

1. Buka app/Http/Controllers/Auth/AuthenticatedSessionController.php.
   • Fungsi create(): Hanya bertugas menampilkan view auth.login.
   • Fungsi store(): Ini adalah inti proses login. Ia akan memvalidasi data, melakukan proses authenticate(), membuat session baru, dan mengarahkan pengguna ke halaman dashboard jika berhasil. Jika gagal, Laravel akan otomatis mengembalikan pengguna ke halaman login dengan pesan error.
   • Fungsi destroy(): Ini adalah fungsi untuk logout, yang otomatis dibuatkan oleh Breeze.
     
     

Langkah 6: Uji Coba Fitur Login

Saatnya menguji sistem keamanan yang baru kita pasang.

1. Pastikan server berjalan (composer run dev).
   
   
    
2. Tes 1: Mengakses Halaman Terproteksi
   • Buka browser dan coba akses langsung ke http://127.0.0.1:8000/dashboard.
     
     
      
   • Hasil: Anda akan secara otomatis diarahkan ke halaman login. Ini adalah hasil kerja dari middleware auth.
     
     
      
3. Tes 2: Proses Login
   • Di halaman login, masukkan data admin (admin@smkn2-mjk.sch.id) dengan password: admin (pastikan password ini sesuai dengan yang Anda atur di file UserSeeder).
     
     
      
   • Klik tombol Sign In.
   • Hasil: Anda akan berhasil masuk dan diarahkan ke halaman Dashboard.
     
     
      
4. Tes 3: Mengakses Halaman Login Saat Sudah Masuk
   • Selagi Anda masih dalam keadaan login, coba akses lagi halaman login: http://127.0.0.1:8000/login.
     
     
      
   • Hasil: Anda akan langsung dikembalikan ke halaman Dashboard. Ini adalah hasil kerja dari middleware guest.
     
     

Langkah 7: Penyesuaian Header untuk Status Login

Sekarang setelah bisa login, mari kita buat header lebih dinamis.

1. Menampilkan Nama Pengguna:
   • Buka file resources/views/admin/layouts/header.blade.php.
     
     
      
   • Ganti tombol "Download Free" dengan kode ini untuk menampilkan nama pengguna yang sedang login:
      

     <a href="javascript:void(0)" class="btn btn-primary">{{ Auth::user()->name }}</a>

     
     
     
      
2. Menyesuaikan Tombol Logout:
   • Masih di file header.blade.php, cari bagian dropdown profil.
   • Hapus link "My Profile", "My Account", dan "My Task".
     
     
     
      
   • Ubah link "Logout" menjadi sebuah form. Ganti seluruh isi dari <div class="message-body"> menjadi seperti ini:

     <div class="message-body px-3">
         <form method="POST" action="{{ route('logout') }}">
     
             @csrf
     
             <button type="submit" class="btn btn-outline-primary w-100 mt-2 d-block">Logout</button>
     
         </form>
     
     </div>

     
     
     

Langkah 8: Uji Coba Fitur Logout

1. Simpan file header.blade.php dan refresh halaman dashboard di browser.
2. Hasil: Tombol "Download Free" akan berubah menjadi nama Anda ("Admin SIMINLAB").
   
   
    
3. Klik gambar profil Anda, lalu klik tombol Logout.
   
   
    
4. Anda akan berhasil logout dan diarahkan kembali ke halaman login.
   
   
    

Selamat! Anda telah berhasil mengimplementasikan sistem autentikasi penuh (login dan logout) dan mengintegrasikannya dengan sempurna ke dalam template Anda.