Laravel 12 CRUD #11: Memasang Sistem Login dengan Laravel Breeze

Laravel 12 CRUD
#11 Memasang Sistem Login dengan Laravel Breeze

🚪 Halaman login, register, dan logout dalam sekejap!
🔑 Agar aplikasi kita aman, kita perlu sistem login! Saat ini semua orang bisa mengakses halaman CRUD siswa. Seharusnya hanya pengguna yang sudah login yang boleh menambah, mengedit, atau menghapus data.
Laravel punya paket resmi bernama Breeze yang bisa membuat halaman login, register, dan logout dengan cepat. Yuk kita pasang! 🚀

Langkah 1: Install Laravel Breeze

1 Buka terminal/CMD di folder proyek siswaapp. Jalankan perintah berikut untuk menginstal Breeze:

composer require laravel/breeze --dev

Perintah ini akan mengunduh paket Breeze ke dalam proyek. Tunggu hingga proses selesai (beberapa detik).

💡 --dev artinya paket ini hanya untuk pengembangan. Tapi untuk belajar tidak masalah.

Langkah 2: Jalankan Installasi Breeze

2 Setelah Breeze terinstall, kita jalankan perintah untuk membuat semua file yang dibutuhkan (controller, view, rute, dll):

php artisan breeze:install blade

Pilih opsi blade (karena kita menggunakan Blade template, bukan Livewire atau React). Tekan Enter.

Selanjutnya akan ditanya apakah ingin menginstall dark mode? Pilih no (atau yes jika suka, tapi kita pilih no agar lebih sederhana).

Perintah ini akan membuat:

  • ✅ Controller untuk login, register, dan profil
  • ✅ View untuk halaman login, register, dashboard
  • ✅ Rute otentikasi di routes/auth.php
  • ✅ Komponen Blade untuk layout

Langkah 3: Jalankan Migration (Buat Tabel Users)

3 Breeze membutuhkan tabel users untuk menyimpan akun. Laravel sebenarnya sudah memiliki migration untuk tabel users sejak awal. Jalankan perintah:

php artisan migrate

Jika sebelumnya kita sudah pernah menjalankan migrate untuk tabel siswa, sekarang akan ditambahkan tabel users, password_reset_tokens, dan sessions.

🎉 Selamat! Tabel users sudah siap. Sekarang kita bisa mendaftar akun baru dan login.

Langkah 4: Uji Coba Halaman Login dan Register

4 Jalankan server Laravel:

php artisan serve

Buka browser dan akses:

  • http://localhost:8000/login → halaman login
  • http://localhost:8000/register → halaman daftar akun
  • http://localhost:8000/dashboard → halaman setelah login

Coba daftar akun baru dengan mengisi nama, email, password. Setelah daftar, kamu akan otomatis login dan diarahkan ke halaman dashboard.

📌 Tips: Saat register, password minimal 8 karakter. Breeze sudah menangani validasi secara otomatis.

Langkah 5: Melihat Menu Logout

5 Setelah login, di pojok kanan atas halaman dashboard akan ada menu dropdown dengan nama pengguna. Klik dan pilih Logout untuk keluar.

Sekarang coba akses lagi http://localhost:8000/siswa. Halaman daftar siswa masih bisa diakses oleh siapa saja. Di artikel berikutnya kita akan melindungi halaman CRUD agar hanya pengguna yang login yang bisa mengaksesnya. 🔒

🎯 Breeze sudah terpasang! Dengan beberapa perintah, kita punya sistem autentikasi lengkap. Sangat cepat dan mudah, bukan?

Struktur File yang Ditambahkan Breeze

📂 Breeze menambahkan beberapa file penting:

  • app/Http/Controllers/Auth/ → controller untuk login, register, dll.
  • resources/views/auth/ → file blade untuk login, register, forgot-password, dll.
  • resources/views/layouts/ → layout utama aplikasi (app.blade.php, guest.blade.php).
  • routes/auth.php → semua rute autentikasi (sudah otomatis dipanggil oleh routes/web.php).

Kamu bisa melihat dan memodifikasi file-file ini nanti jika ingin mengubah tampilan atau logika.

Ringkasan Langkah

  • ✅ Install Breeze: composer require laravel/breeze --dev
  • ✅ Install komponen Blade: php artisan breeze:install blade
  • ✅ Jalankan migration: php artisan migrate
  • ✅ Uji coba: buka /login dan /register
  • ✅ Buat akun dan login, coba logout

📌 Catatan: Breeze menggunakan Laravel Fortify di balik layar. Semua sudah diatur dengan aman dan siap pakai.

(Link akan aktif saat artikel sebelumnya dan selanjutnya terbit)

📘 Laravel 12 CRUD untuk Sekolah Dasar • #11 Memasang Sistem Login dengan Laravel Breeze • 🔐 Login siap!
Lebih baru Lebih lama

نموذج الاتصال