Belajar Laravel Batch 7: Authentication Dasar - Mengamankan Aplikasi dengan Login dan Register

Halo, PahamITian! Selamat datang kembali di petualangan Laravel kita. Di batch sebelumnya, kita sudah jago mengelola data dengan CRUD. Tapi, bagaimana kalau kita ingin membatasi siapa saja yang bisa mengakses atau mengubah data tersebut? Nah, di Batch 7 ini, kita akan belajar tentang Authentication Dasar di Laravel, yaitu proses untuk mengenali siapa pengguna aplikasi kita.

Bayangkan aplikasi kita seperti sebuah rumah. Tidak semua orang boleh masuk ke semua ruangan, kan? Ada pintu depan untuk tamu, tapi ada juga kamar pribadi yang hanya bisa diakses oleh penghuni rumah. Authentication inilah "kunci" yang memastikan hanya penghuni rumah (pengguna yang sudah login) yang bisa masuk ke kamar pribadinya (halaman atau fitur tertentu).

Laravel membuat proses authentication ini jadi super mudah, bahkan untuk pemula sekalipun. Yuk, kita mulai!

1. Konsep Login dan Register: Siapa Kamu?

Sebelum masuk ke kode, mari pahami dulu konsep dasar Authentication (otentikasi) dan Authorization (otorisasi):

• Authentication: Proses memverifikasi identitas pengguna. Ini seperti menunjukkan KTP atau kartu identitas saat masuk ke suatu tempat. Contohnya: login dengan username/email dan password.
• Authorization: Proses menentukan hak akses pengguna setelah identitasnya terverifikasi. Ini seperti petugas keamanan yang setelah melihat KTP kamu, memutuskan kamu boleh masuk ke area mana saja. Contohnya: user A bisa mengedit artikelnya sendiri, tapi tidak bisa mengedit artikel user B.

Di batch ini, kita akan fokus pada Authentication, dengan sedikit sentuhan Authorization sederhana.

Laravel menyediakan sistem authentication yang lengkap dan siap pakai. Kamu tidak perlu pusing memikirkan enkripsi password, session, atau token. Hebatnya lagi, Laravel punya "starter kits" yang bisa langsung kamu pasang untuk mendapatkan fitur login, register, reset password, dan dashboard dasar dalam hitungan menit. Salah satunya adalah Laravel Breeze.

2. Menginstal Laravel Breeze: Authentication Instan!

Untuk mempermudah dan mempercepat, kita akan menggunakan Laravel Breeze. Ini adalah paket resmi dari Laravel yang menyediakan scaffolding (kerangka) untuk sistem authentication dasar. Jadi, kamu tidak perlu membuat semua halaman login dan register dari nol.

Langkah-langkah Instalasi Breeze:

1. Buka Terminal/CMD di root folder project Laravel kamu.
2. Instal Laravel Breeze:

1. Jalankan Instalasi Breeze:

Lalu, saat ditanya Would you like to install dark mode support?, kamu bisa pilih no (ketik n lalu Enter) untuk kesederhanaan.

Terakhir, Would you like to run npm install && npm run dev? pilih yes (ketik y lalu Enter). Ini akan menginstal dependensi frontend dan mengkompilasi aset CSS/JS.

Penting: Jika npm install atau npm run dev gagal, pastikan kamu sudah menginstal Node.js dan npm di komputermu. Jika belum, instal dulu dari nodejs.org.

1. Jalankan Migrasi Database:

1. Jalankan Server Pengembangan:

Sekarang, coba buka browser dan akses http://127.0.0.1:8000/register atau http://127.0.0.1:8000/login. Kamu akan melihat halaman register dan login yang sudah jadi! Keren, kan?

3. Memahami Struktur Authentication Breeze

Setelah instalasi Breeze, ada beberapa file dan folder baru yang penting untuk kamu ketahui:

• app/Models/User.php: Ini adalah model Eloquent untuk tabel users. Laravel secara default sudah menyediakan model ini. Kamu bisa menambahkan relasi atau method lain di sini.
• routes/auth.php: File ini berisi semua route yang berkaitan dengan authentication (login, register, logout, reset password). Breeze akan menambahkan route-route ini secara otomatis.
• app/Http/Controllers/Auth/: Folder ini berisi controller-controller yang menangani logika authentication, seperti RegisteredUserController untuk proses register, AuthenticatedSessionController untuk login/logout, dll.
• resources/views/auth/: Folder ini berisi tampilan Blade untuk halaman login, register, forgot password, dll.
• resources/views/layouts/guest.blade.php & resources/views/layouts/app.blade.php: Ini adalah layout Blade yang digunakan oleh halaman authentication (guest.blade.php) dan halaman setelah login (app.blade.php).
• app/Http/Middleware/Authenticate.php: Middleware ini bertanggung jawab untuk mengarahkan pengguna ke halaman login jika mereka mencoba mengakses route yang memerlukan otentikasi tetapi belum login.

4. Middleware auth: Penjaga Gerbang Aplikasi

Middleware auth adalah penjaga gerbang utama di Laravel. Fungsinya adalah untuk memastikan bahwa hanya pengguna yang sudah login yang bisa mengakses route atau grup route tertentu.

Cara Menggunakan Middleware auth:

Kamu bisa menerapkan middleware auth di routes/web.php atau di dalam constructor Controller.

Contoh di routes/web.php:

// routes/web.php
use Illuminate\Support\Facades\Route;

// Route yang bisa diakses siapa saja
Route::get('/', function () {
    return view('welcome');
});

// Grup route yang hanya bisa diakses setelah login
Route::middleware(['auth'])->group(function () {
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');

    // Di sini kamu bisa menambahkan route lain yang hanya untuk user terotentikasi
    // Contoh: Route untuk membuat artikel baru
    Route::get('/posts/create', [PostController::class, 'create'])->name('posts.create');
    Route::post('/posts', [PostController::class, 'store'])->name('posts.store');
});

// Route yang dibuat oleh Breeze untuk authentication
require __DIR__.'/auth.php';

Dalam contoh di atas, route /dashboard, /posts/create, dan /posts (POST) hanya bisa diakses jika pengguna sudah login. Jika belum, Laravel akan otomatis mengarahkan mereka ke halaman login.

5. Proteksi Dashboard: Halaman Khusus Pengguna Login

Setelah menginstal Breeze, kamu akan punya halaman /dashboard. Secara default, halaman ini sudah diproteksi oleh middleware auth karena berada di dalam grup route yang menggunakan middleware tersebut.

Coba:

1. Buka http://127.0.0.1:8000/dashboard tanpa login. Kamu akan diarahkan ke halaman login.
2. Register akun baru atau login dengan akun yang sudah ada.
3. Setelah login, kamu akan otomatis diarahkan ke /dashboard.

Kamu bisa mengubah tampilan dashboard.blade.php di resources/views/dashboard.blade.php sesuai keinginanmu.

6. Menghubungkan Post dengan User Login (Relasi User dan Post)

Di Batch 4 dan 5, kita sudah membuat CRUD artikel. Sekarang, bagaimana caranya agar setiap artikel "dimiliki" oleh seorang user? Kita perlu membuat relasi antara tabel users dan posts.

Langkah-langkah:

1. Tambahkan Kolom user_id ke Tabel posts:

    php artisan make:migration add_user_id_to_posts_table --table=posts
    

Buka file migration yang baru dibuat (biasanya di database/migrations/). Edit method up() dan down() seperti ini:

    // database/migrations/YYYY_MM_DD_HHMMSS_add_user_id_to_posts_table.php
    use Illuminate\Database\Migrations\Migration;
    use Illuminate\Database\Schema\Blueprint;
    use Illuminate\Support\Facades\Schema;

    return new class extends Migration
    {
        public function up(): void
        {
            Schema::table('posts', function (Blueprint $table) {
                $table->foreignId('user_id')->constrained()->onDelete('cascade');
            });
        }

        public function down(): void
        {
            Schema::table('posts', function (Blueprint $table) {
                $table->dropForeign(['user_id']);
                $table->dropColumn('user_id');
            });
        }
    };
    

• foreignId('user_id'): Membuat kolom user_id dengan tipe BIGINT UNSIGNED.

Setelah itu, jalankan migration:

    php artisan migrate
    

1. Definisikan Relasi di Model User dan Post:

Di app/Models/User.php:
Tambahkan method posts():

    // app/Models/User.php
    public function posts()
    {
        return $this->hasMany(Post::class);
    }
    

Di app/Models/Post.php:
Tambahkan method user():

    // app/Models/Post.php
    public function user()
    {
        return $this->belongsTo(User::class);
    }
    

1. Menyimpan user_id Saat Membuat Post:

Edit method store() di app/Http/Controllers/PostController.php:

    // app/Http/Controllers/PostController.php
    public function store(Request $request)
    {
        $validated = $request->validate([
            'title' => 'required|max:255',
            'content' => 'required',
        ]);

        // Ambil ID user yang sedang login
        $validated['user_id'] = auth()->user()->id;

        Post::create($validated);

        return redirect()->route('posts.index')->with('success', 'Artikel berhasil ditambahkan!');
    }
    

7. Authorization Sederhana: Hanya Pemilik yang Bisa Mengedit/Menghapus

Untuk authorization dasar, kita bisa menggunakan kondisi sederhana di controller atau Blade untuk memastikan hanya pemilik artikel yang bisa memodifikasinya.

Contoh di edit() dan update() method di app/Http/Controllers/PostController.php:

// app/Http/Controllers/PostController.php
public function edit(Post $post)
{
    // Pastikan hanya pemilik post yang bisa mengedit
    if (auth()->user()->id !== $post->user_id) {
        abort(403, 'Anda tidak memiliki izin untuk mengedit artikel ini.');
    }
    return view('posts.edit', compact('post'));
}

public function update(Request $request, Post $post)
{
    // Pastikan hanya pemilik post yang bisa mengupdate
    if (auth()->user()->id !== $post->user_id) {
        abort(403, 'Anda tidak memiliki izin untuk mengupdate artikel ini.');
    }

    $validated = $request->validate([
        'title' => 'required|max:255',
        'content' => 'required',
    ]);

    $post->update($validated);

    return redirect()->route('posts.index')->with('success', 'Artikel berhasil diperbarui!');
}

public function destroy(Post $post)
{
    // Pastikan hanya pemilik post yang bisa menghapus
    if (auth()->user()->id !== $post->user_id) {
        abort(403, 'Anda tidak memiliki izin untuk menghapus artikel ini.');
    }

    $post->delete();

    return redirect()->route('posts.index')->with('success', 'Artikel berhasil dihapus!');
}

• abort(403, 'Pesan'): Ini akan menghentikan eksekusi dan menampilkan halaman error 403 (Forbidden) dengan pesan yang kamu berikan.

Contoh di Blade (resources/views/posts/index.blade.php) untuk menyembunyikan tombol edit/delete:

{{-- resources/views/posts/index.blade.php --}}

@auth {{-- Hanya tampil jika user sudah login --}}
    @if (auth()->user()->id === $post->user_id) {{-- Hanya jika user adalah pemilik post --}}
        <a href="{{ route('posts.edit', $post->id) }}" class="btn btn-warning">Edit</a>
        <form action="{{ route('posts.destroy', $post->id) }}" method="POST" style="display:inline-block;">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger" onclick="return confirm('Yakin ingin menghapus artikel ini?')">Hapus</button>
        </form>
    @endif
@endauth

• @auth ... @endauth: Directive Blade ini akan menampilkan konten di dalamnya hanya jika ada user yang sedang login.
• auth()->user()->id === $post->user_id: Membandingkan ID user yang login dengan user_id dari artikel.

Ringkasan Singkat Batch 7:

Di Batch 7 ini, PahamITian sudah belajar:

• Konsep dasar Authentication (otentikasi) dan Authorization (otorisasi).
• Cara cepat menginstal sistem login dan register menggunakan Laravel Breeze.
• Memahami struktur file dan folder yang berkaitan dengan authentication.
• Fungsi dan cara menggunakan middleware auth untuk melindungi route.
• Bagaimana membuat relasi User dengan Post (hasMany dan belongsTo).
• Cara menyimpan user_id secara otomatis saat membuat artikel.
• Implementasi authorization sederhana untuk memastikan hanya pemilik yang bisa memodifikasi artikel.

Latihan Praktik Batch 7:

Sekarang giliran kamu untuk mempraktikkan apa yang sudah dipelajari. Tujuan latihan ini adalah: Hanya user yang sudah login yang bisa membuat artikel.

1. Pastikan Laravel Breeze sudah terinstal dan migration add_user_id_to_posts_table sudah dijalankan.
2. Modifikasi resources/views/posts/index.blade.php:
3. Proteksi Route posts.create dan posts.store:
4. Uji Coba:

Pertanyaan Cek Pemahaman:

1. Apa perbedaan utama antara Authentication dan Authorization?
2. Bagaimana cara menginstal Laravel Breeze dan apa saja yang dihasilkan setelah instalasi?
3. Apa fungsi dari middleware auth dan bagaimana cara menerapkannya pada sekelompok route?
4. Jika kita ingin setiap artikel "dimiliki" oleh seorang user, kolom apa yang perlu ditambahkan di tabel posts dan bagaimana relasinya di Eloquent?
5. Bagaimana cara mendapatkan id dari user yang sedang login di Controller?
6. Bagaimana cara membuat tombol "Buat Artikel" hanya muncul jika user sudah login di Blade?

Kesalahan Umum Pemula:

• Lupa menjalankan php artisan migrate setelah menambahkan user_id: Kolom user_id tidak akan ada di tabel posts, menyebabkan error saat menyimpan data.
• Lupa menambahkan user_id ke $fillable di Model Post: Jika kamu menggunakan Post::create($validated) dan user_id tidak ada di $fillable, maka user_id tidak akan tersimpan. (Solusi: tambahkan 'user_id' ke array $fillable di app/Models/Post.php).
• Tidak menginstal Node.js/npm sebelum breeze:install: npm install dan npm run dev akan gagal. Pastikan Node.js dan npm terinstal.
• Mencoba mengakses auth()->user() tanpa login: Ini akan menyebabkan error karena user() akan mengembalikan null. Selalu pastikan user sudah login (misalnya dengan @auth di Blade atau middleware auth di route/controller) sebelum mencoba mengakses auth()->user().

Persiapan untuk Batch Berikutnya:

Di Batch 8, kita akan belajar tentang Upload File dan Storage. Ini akan sangat berguna untuk menambahkan fitur seperti "featured image" untuk artikel kita. Pastikan project kamu di Batch 7 ini sudah berjalan dengan baik, terutama bagian authentication dan relasi user-post, karena kita akan melanjutkan dari sana.

Sampai jumpa di batch selanjutnya, PahamITian! Tetap semangat ngodingnya!