Laravel 12 Bootstrap Auth Scaffolding Tutorial -

Pada artikel ini, saya akan membahas cara menginstal scaffolding autentikasi Bootstrap di aplikasi Laravel 12.

Laravel memiliki paket UI yang memudahkan dalam mengatur scaffolding autentikasi. Dengan Laravel UI, kita dapat dengan mudah menambahkan fitur autentikasi seperti login, pendaftaran, reset kata sandi, verifikasi email, dan konfirmasi kata sandi menggunakan Bootstrap, React, atau Vue.

Dalam panduan ini, saya akan menjelaskan langkah-langkah sederhana untuk menginstal Bootstrap 5 serta membuat scaffolding autentikasi dengan Bootstrap 5 di Laravel 12.

Mari kita simak langkah-langkahnya berikut ini!

Install Laravel 12

Langkah ini sebenarnya tidak wajib. Namun, jika Anda belum membuat aplikasi Laravel, Anda dapat menjalankan perintah berikut:

laravel new example-app

Install Laravel UI

Mari jalankan perintah berikut untuk menginstal paket Laravel UI:

composer require laravel/ui

Selanjutnya, Anda perlu menginstal paket Laravel UI untuk membuat scaffolding autentikasi menggunakan Bootstrap 5. Jadi, jalankan perintah berikut:


php artisan ui bootstrap
  
OR
  
php artisan ui bootstrap --auth

Sekarang, jalankan perintah berikut untuk menginstal npm:

npm install && npm run dev

Perintah ini akan menghasilkan file CSS dan JS dalam bentuk minified.

Selanjutnya, jalankan perintah migrasi berikut:

php artisan migrate

Run Laravel App:

Semua langkah yang diperlukan telah selesai. Sekarang, jalankan perintah di bawah ini dan tekan Enter untuk menjalankan aplikasi Laravel:

php artisan serve

Sekarang, buka browser web Anda, masukkan URL yang diberikan, dan lihat hasil output aplikasinya.

http://localhost:8000/

Home Page:

Login Page:

Register Page:

Dashboard Page:

Anda dapat menggunakan Bootstrap 5 dalam file Blade Anda seperti contoh berikut:


<!doctype html>
<html>
<head>
    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <h1>This is example from brilliansolution.com</h1>
</body>
</html>

Sekian tutorial singkat dari brilliansolution. Akan banyak lagi tutorial sederhana yang menyenangkan. Ikuti terus brilliansolution.com.