Tutorial Laravel 12 Untuk Pemula : Autentikasi Login Laravel UI + Bootstrap

Autentikasi Login Laravel UI + Bootstrap (Scaffolding Auth)

Pada postingan ini, kamu akan menambahkan fitur Login dan Register menggunakan scaffolding Laravel UI + Bootstrap. Metode ini cocok untuk pemula karena Laravel akan otomatis membuat halaman login/register beserta route dan file pendukungnya.

Target akhir: Halaman /login dan /register muncul, pengguna berhasil login, lalu diarahkan ke halaman aset (/assets), serta CRUD aset hanya bisa diakses setelah login.

1) Persiapan

Pastikan kamu sudah berada di folder proyek Laravel.
Pastikan Node.js dan NPM sudah terinstall (karena Bootstrap membutuhkan build frontend).

Cek versi Node dan NPM (opsional):

node -v
npm -v

2) Install Laravel UI

Jalankan perintah berikut untuk menginstall package laravel/ui:

composer require laravel/ui

Tunggu sampai proses instalasi selesai tanpa error.

3) Generate Scaffolding Bootstrap + Auth

Setelah Laravel UI terpasang, generate halaman autentikasi (login & register) dengan perintah:

php artisan ui bootstrap --auth

Perintah ini akan menambahkan file view, route autentikasi, dan kebutuhan dasar login/register.

4) Install Dependency Frontend

Karena kita menggunakan Bootstrap, kita harus menginstall dependency frontend:

npm install

5) Build Asset (Compile CSS/JS)

Setelah dependency terinstall, lakukan build agar tampilan Bootstrap bisa digunakan:

Untuk development (paling sering dipakai saat belajar):

npm run dev

Untuk production (opsional):

npm run build

6) Jalankan Migration (Jika Tabel Users Belum Ada)

php artisan migrate

Jika berhasil, tabel bawaan Laravel (termasuk users) akan dibuat.

7) Cek Halaman Login dan Register

Jalankan server Laravel (jika belum berjalan):

php artisan serve

Buka link berikut di browser:

Jika kedua halaman muncul, berarti scaffolding berhasil.

8) Membuat Akun Admin (Pilih Salah Satu)

Opsi A — Membuat Admin lewat Tinker

Jalankan tinker:

php artisan tinker

Lalu ketik perintah berikut (contoh akun admin):

use App\Models\User;

User::create([
  'name' => 'Admin',
  'email' => 'admin@school.test',
  'password' => bcrypt('12345678')
]);

Keluar dari tinker dengan:

exit

Email: admin@school.test
Password: 12345678

Opsi B — Membuat Admin lewat Seeder

Buat seeder:

php artisan make:seeder AdminUserSeeder

Buka file database/seeders/AdminUserSeeder.php, isi seperti berikut:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\User;
use Illuminate\Support\Facades\Hash;

class AdminUserSeeder extends Seeder
{
    public function run(): void
    {
        User::updateOrCreate(
            ['email' => 'admin@school.test'],
            [
                'name' => 'Admin',
                'password' => Hash::make('12345678')
            ]
        );
    }
}

Jalankan seeder:

php artisan db:seed --class=AdminUserSeeder

9) Terapkan Middleware `auth` pada Route Aset

Agar CRUD aset wajib login, buka routes/web.php dan bungkus route assets dengan middleware auth:

use App\Http\Controllers\AssetController;

Route::middleware(['auth'])->group(function () {
    Route::resource('assets', AssetController::class);
});

Uji: Jika belum login lalu membuka /assets, harus diarahkan ke /login.

10) Ubah Redirect Setelah Login ke Halaman Aset

Secara default, setelah login biasanya diarahkan ke /home. Kita ubah agar setelah login masuk ke /assets.

Buka file:

app/Providers/RouteServiceProvider.php

Cari baris:

public const HOME = '/home';

Ubah menjadi:

public const HOME = '/assets';

Simpan, lalu coba login ulang.

11) Ketentuan Minimal (Checklist)

Halaman /login dan /register muncul.
Setelah login, pengguna diarahkan ke /assets.
Akses CRUD aset wajib login (middleware auth).
Menu CRUD hanya terlihat untuk user yang sudah login (opsional, tapi disarankan).

12) Output yang Harus Dikumpulkan

Akun admin bisa login dan mengakses halaman aset.
Screenshot halaman Login.
Screenshot halaman Assets setelah login.

Penutup

Dengan menyelesaikan kegiatan ini, kamu sudah berhasil membuat fitur autentikasi login menggunakan Laravel UI + Bootstrap.

Selamat mencoba 🚀

Herry Prasetyo