Belajar Laravel Part 7: Authentication — Sistem Login dengan Laravel Breeze

Aplikasi catatan kita masih bisa diakses siapa saja — siapapun bisa menambah, edit, atau hapus catatan. Saatnya menambahkan sistem autentikasi: hanya user yang sudah login yang bisa menggunakan aplikasi.

Laravel menyediakan package Breeze yang menginstall sistem login dan register secara lengkap dalam hitungan menit — tanpa perlu menulis kode auth dari nol.

📋 Progress Belajarmu

• ① Install dan setup Laravel Breeze
• ② Coba fitur register dan login
• ③ Proteksi route dengan middleware auth
• ④ Tampilkan nama user yang login di navbar
• ⑤ Kaitkan catatan dengan user yang membuatnya

① Install Laravel Breeze

composer require laravel/breeze --dev

php artisan breeze:install blade

npm install
npm run dev

Jalankan migration untuk tabel users:

php artisan migrate

Buka http://localhost:8000/register — form registrasi sudah tersedia! Coba daftar akun baru dan login.

② Proteksi Route dengan Middleware

Buka routes/web.php dan bungkus semua route catatan dengan middleware auth:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CatatanController;

// Route yang memerlukan login
Route::middleware('auth')->group(function () {
    Route::get('/catatan',           [CatatanController::class, 'index']);
    Route::get('/catatan/create',    [CatatanController::class, 'create']);
    Route::post('/catatan',          [CatatanController::class, 'store']);
    Route::get('/catatan/{id}',      [CatatanController::class, 'show']);
    Route::get('/catatan/{id}/edit', [CatatanController::class, 'edit']);
    Route::put('/catatan/{id}',      [CatatanController::class, 'update']);
    Route::delete('/catatan/{id}',   [CatatanController::class, 'destroy']);
});

Sekarang coba buka /catatan tanpa login — Laravel otomatis redirect ke halaman login!

③ Tampilkan Info User di Navbar

Update resources/views/layouts/app.blade.php untuk menampilkan nama user dan tombol logout:

<nav class="bg-teal-700 text-white px-6 py-4 flex items-center justify-between">
    <a href="/catatan" class="font-bold text-lg">📝 Catatanku</a>

    <div class="flex items-center gap-4">
        @auth
            <span class="text-sm text-teal-200">Halo, {{ Auth::user()->name }}!</span>
            <a href="/catatan/create"
               class="bg-white text-teal-700 font-semibold px-4 py-1.5 rounded-lg text-sm">
                + Baru
            </a>
            <form action="/logout" method="POST">
                @csrf
                <button class="text-sm text-teal-200 hover:text-white">Logout</button>
            </form>
        @else
            <a href="/login" class="text-sm text-teal-200 hover:text-white">Login</a>
            <a href="/register" class="bg-white text-teal-700 px-4 py-1.5 rounded-lg text-sm font-semibold">
                Daftar
            </a>
        @endauth
    </div>
</nav>

④ Kaitkan Catatan dengan User

Tambahkan kolom user_id ke tabel catatan. Buat migration baru:

php artisan make:migration add_user_id_to_catatan_table

public function up(): void
{
    Schema::table('catatan', function (Blueprint $table) {
        $table->foreignId('user_id')->nullable()->constrained()->onDelete('cascade');
    });
}

php artisan migrate

Update method store di CatatanController untuk menyimpan user_id:

public function store(Request $request)
{
    $validated = $request->validate([
        'judul' => 'required|min:3|max:255',
        'isi'   => 'required|min:10',
    ]);

    Catatan::create([
        'judul'   => $validated['judul'],
        'isi'     => $validated['isi'],
        'penting' => $request->has('penting'),
        'user_id' => Auth::id(),  // simpan ID user yang sedang login
    ]);

    return redirect('/catatan')->with('sukses', 'Catatan berhasil ditambahkan!');
}

Update method index agar hanya menampilkan catatan milik user yang login:

public function index()
{
    $catatan = Catatan::where('user_id', Auth::id())->latest()->get();
    return view('catatan.index', compact('catatan'));
}

Directive Blade untuk Autentikasi

Langkah Selanjutnya

Aplikasi catatan kamu sekarang sudah punya sistem login yang proper! Di Part 8 — Deploy ke VPS — bagian terakhir dari seri ini — kita akan upload project ke server sungguhan agar bisa diakses dari internet.