M
Mr Sugiarto
Developer
16 Sep 2026 3 min read

Sampai sekarang siapa saja bisa membuat, mengubah, atau menghapus post — tidak ideal untuk blog sungguhan. Sebelum kita batasi akses itu, kita perlu sistem login dulu. Karena project ini pakai Bootstrap murni (bukan Livewire/Tailwind), kita pakai Laravel UI — paket resmi Laravel untuk auth scaffolding klasik.

Screenshot: Halaman login hasil scaffolding Laravel UI dengan styling Bootstrap. Halaman login hasil scaffolding Laravel UI dengan styling Bootstrap.

Kenapa Laravel UI, bukan Breeze?

Breeze modern secara default mengarah ke Tailwind + Alpine atau Livewire. Karena project kita konsisten pakai Bootstrap 5 dan MVC tradisional sejak episode 1, Laravel UI adalah pilihan yang lebih pas — dia generate view Blade dengan class Bootstrap langsung, tanpa perlu convert styling manual.

Instalasi

composer require laravel/ui
php artisan ui bootstrap --auth

Perintah kedua men-generate:

  • app/Http/Controllers/Auth/* — controller untuk login, register, reset password, dll
  • resources/views/auth/* — view login, register, forgot password
  • app/Http/Controllers/HomeController.php — controller halaman setelah login
  • Route Auth::routes() dan /home otomatis ditambahkan ke routes/web.php

Build asset frontend

npm install && npm run build

Laravel UI menambahkan resources/sass/app.scss yang meng-import Bootstrap lewat SCSS. Build ini perlu dijalankan supaya asset ter-compile — meski di project kita, halaman utama tetap pakai Bootstrap dari CDN untuk kesederhanaan.

Menghubungkan navbar dengan status login

<div class="navbar-nav">
    @guest
        <a class="nav-link" href="{{ route('login') }}">Login</a>
        <a class="nav-link" href="{{ route('register') }}">Register</a>
    @else
        <a class="nav-link" href="{{ route('home') }}">{{ Auth::user()->name }}</a>
        <a class="nav-link" href="{{ route('logout') }}"
            onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
            Logout
        </a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
            @csrf
        </form>
    @endguest
</div>
  • @guest ... @else ... @endguest — directive blade untuk cek status login: tampilkan link Login/Register kalau belum login, atau nama user + Logout kalau sudah
  • Logout pakai form tersembunyi, bukan link langsung, karena logout di Laravel adalah request POST (best practice yang sama seperti alasan delete di episode 13)

Mencoba alur register → login → logout

  1. Buka /register, isi nama, email, password
  2. Setelah submit, otomatis login dan redirect ke /home
  3. Navbar berubah menampilkan nama user dan tombol Logout
  4. Klik Logout → kembali ke status guest, navbar tampil Login/Register lagi

Testing

curl -o /dev/null -w "%{http_code}\n" http://laravel13-blog-dasar.test/login
curl -o /dev/null -w "%{http_code}\n" http://laravel13-blog-dasar.test/register

Keduanya harus mengembalikan 200.

Selanjutnya

Login sudah bisa dilakukan, tapi belum ada efeknya — user manapun (login atau tidak) masih bisa create/edit/delete post. Episode berikutnya kita tutup celah ini dengan middleware auth.

M
Mr Sugiarto

Developer

Bagian dari Series: Laravel 13 Dasar — Belajar Fundamental Lewat Blog Sederhana
Lihat Series Lengkap