Belajar Laravel Batch 3: Controller dan Form, Mengatur Logika dan Interaksi Pengguna

Belajar Laravel Batch 3: Controller dan Form, Mengatur Logika dan Interaksi Pengguna

Halo, PahamITian! Selamat datang kembali di petualangan Laravel kita! Setelah di Batch 1 kita berkenalan dengan Laravel dan di Batch 2 kita "mempercantik" tampilan dengan Blade serta "menata jalan" dengan Routing, sekarang saatnya kita "menambahkan otak" ke aplikasi kita. Yup, kita akan belajar tentang Controller dan bagaimana Form di Blade bekerja untuk berinteraksi dengan pengguna.

Di batch ini, kita akan mengubah aplikasi sederhana kita menjadi lebih "pintar" dan interaktif. Siap? Yuk, kita mulai!

1. Apa Itu Controller?

Bayangkan sebuah restoran. Routing adalah daftar menu yang menunjukkan "jalan" ke hidangan tertentu. View (Blade) adalah piring dan penyajian hidangan itu sendiri. Nah, Controller ini adalah koki atau manajer dapur di restoran tersebut.

Controller adalah kelas PHP yang bertanggung jawab untuk menangani logika aplikasi. Daripada menumpuk semua logika di dalam closure route (seperti yang kita lakukan di Batch 1 dan 2), Controller memungkinkan kita untuk mengelompokkan logika yang berhubungan menjadi satu tempat yang rapi dan terstruktur.

Kenapa kita butuh Controller?
* Kerapian: Kode lebih terorganisir, mudah dibaca, dan mudah dikelola.
* Reusabilitas: Logika yang sama bisa dipanggil dari beberapa route.
* Maintainability: Lebih mudah mencari dan memperbaiki bug.
* Testability: Lebih mudah diuji secara otomatis.

2. Membuat Controller Pertama Kita

Laravel menyediakan perintah Artisan yang sangat membantu untuk membuat file-file boilerplate (file dasar) secara otomatis. Untuk membuat Controller, kita bisa menggunakan perintah berikut di terminal:

php artisan make:controller ArticleController

Setelah menjalankan perintah ini, Laravel akan membuat file ArticleController.php di dalam folder app/Http/Controllers. Isi file tersebut akan terlihat seperti ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ArticleController extends Controller
{
    //
}

Secara default, Controller akan meng-extend Illuminate\Routing\Controller (atau App\Http\Controllers\Controller yang meng-extend base Controller Laravel). Ini memberikan Controller kita beberapa fitur dasar yang berguna.

3. Memindahkan Logika dari Route ke Controller

Di Batch 2, kita membuat route seperti ini:

// web.php
Route::get('/artikel', function () {
    $articles = [
        ['title' => 'Belajar Laravel Dasar', 'slug' => 'belajar-laravel-dasar'],
        ['title' => 'Routing di Laravel', 'slug' => 'routing-di-laravel'],
    ];
    return view('articles.index', compact('articles'));
})->name('articles.index');

Sekarang, kita akan pindahkan logika function() ini ke dalam ArticleController.

Pertama, tambahkan sebuah method di ArticleController kita. Biasanya, method untuk menampilkan daftar resource disebut index.

// app/Http/Controllers/ArticleController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ArticleController extends Controller
{
    public function index()
    {
        $articles = [
            ['title' => 'Belajar Laravel Dasar', 'slug' => 'belajar-laravel-dasar'],
            ['title' => 'Routing di Laravel', 'slug' => 'routing-di-laravel'],
        ];
        return view('articles.index', compact('articles'));
    }
}

Kemudian, kita ubah definisi route kita di routes/web.php untuk "menunjuk" ke method index di ArticleController:

// routes/web.php
use App\Http\Controllers\ArticleController; // Penting: import Controller kita

// ... route-route lainnya

Route::get('/artikel', [ArticleController::class, 'index'])->name('articles.index');

Penjelasan:
* use App\Http\Controllers\ArticleController;: Baris ini memberitahu PHP bahwa kita akan menggunakan kelas ArticleController yang berada di namespace App\Http\Controllers.
* [ArticleController::class, 'index']: Ini adalah sintaks Laravel untuk menunjuk ke method index di dalam kelas ArticleController. Ketika route /artikel diakses dengan metode GET, Laravel akan memanggil method index di ArticleController.

Sekarang, logika untuk menampilkan daftar artikel sudah rapi di dalam Controller!

4. Mengenal Form di Blade

Form adalah cara utama pengguna berinteraksi dengan aplikasi web kita, misalnya untuk login, registrasi, atau menambahkan data. Di Laravel, kita membuat form seperti HTML biasa, namun dengan beberapa "bumbu" Blade yang sangat membantu.

Mari kita buat form sederhana untuk menambahkan artikel. Buat file resources/views/articles/create.blade.php:

<!-- resources/views/articles/create.blade.php -->
@extends('layouts.app') {{-- Misal kita punya layout dasar --}}

@section('content')
    <h1>Tambah Artikel Baru</h1>

    <form action="/artikel" method="POST">
        <label for="title">Judul Artikel:</label><br>
        <input type="text" id="title" name="title"><br><br>

        <label for="content">Isi Artikel:</label><br>
        <textarea id="content" name="content" rows="5"></textarea><br><br>

        <button type="submit">Simpan Artikel</button>
    </form>
@endsection

Penting: Perhatikan atribut action dan method pada tag <form>.
* action="/artikel": Ini adalah URL tempat data form akan dikirim.
* method="POST": Ini menentukan metode HTTP yang akan digunakan saat mengirim data form.

5. Pentingnya CSRF Protection

Jika kamu mencoba submit form di atas, kemungkinan besar kamu akan mendapatkan error 419 | PAGE EXPIRED. Jangan panik, PahamITian! Ini adalah fitur keamanan bawaan Laravel yang disebut CSRF Protection.

Apa itu CSRF?
CSRF singkatan dari Cross-Site Request Forgery. Ini adalah jenis serangan di mana penyerang mencoba "memaksa" browser pengguna untuk mengirimkan permintaan yang tidak diinginkan ke situs web yang sedang di-login oleh pengguna. Misalnya, penyerang bisa membuat halaman palsu yang secara otomatis mengirimkan permintaan "hapus akun" ke bank kamu jika kamu sedang login di bank tersebut.

Laravel secara otomatis melindungi aplikasi kita dari serangan CSRF. Untuk itu, setiap form POST, PUT, PATCH, atau DELETE yang dikirim dari aplikasi kita wajib menyertakan token CSRF.

Bagaimana cara menambahkannya?
Sangat mudah! Cukup tambahkan directive @csrf di dalam tag <form> kamu:

<form action="/artikel" method="POST">
    @csrf {{-- Ini dia "penjaga" form kita --}}

    <label for="title">Judul Artikel:</label><br>
    <input type="text" id="title" name="title"><br><br>

    <label for="content">Isi Artikel:</label><br>
    <textarea id="content" name="content" rows="5"></textarea><br><br>

    <button type="submit">Simpan Artikel</button>
</form>

Directive @csrf akan menghasilkan input hidden dengan nama _token dan nilai token CSRF yang unik. Laravel akan memverifikasi token ini saat form disubmit. Jika tidak ada atau tidak valid, permintaan akan ditolak.

6. Mengambil Input dari Request

Setelah form disubmit, data yang dikirim oleh pengguna akan tersedia di dalam objek Request Laravel. Kita bisa mengaksesnya di Controller kita.

Pertama, kita perlu membuat route POST untuk menerima data dari form. Tambahkan ini di routes/web.php:

// routes/web.php
// ...
Route::get('/artikel/create', [ArticleController::class, 'create'])->name('articles.create');
Route::post('/artikel', [ArticleController::class, 'store'])->name('articles.store');

Kemudian, kita tambahkan method create (untuk menampilkan form) dan store (untuk menyimpan data) di ArticleController:

// app/Http/Controllers/ArticleController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request; // Penting: import kelas Request

class ArticleController extends Controller
{
    // ... method index()

    public function create()
    {
        return view('articles.create');
    }

    public function store(Request $request) // Laravel akan "menyuntikkan" objek Request secara otomatis
    {
        // Mengambil semua input dari form
        $allInput = $request->all();
        // dd($allInput); // Gunakan dd() untuk "dump and die" dan melihat isinya

        // Mengambil input spesifik
        $title = $request->input('title'); // Atau $request->title
        $content = $request->input('content'); // Atau $request->content

        // Contoh: tampilkan data yang diterima (sementara)
        return "Artikel dengan judul '" . $title . "' dan isi '" . $content . "' berhasil diterima!";
    }
}

Penjelasan:
* public function store(Request $request): Laravel secara otomatis akan menyuntikkan (inject) instance dari kelas Illuminate\Http\Request ke dalam method store. Objek $request ini berisi semua data yang dikirim dari form, header, dan informasi request lainnya.
* $request->all(): Mengambil semua input dari form sebagai array asosiatif.
* $request->input('nama_field') atau $request->nama_field: Mengambil nilai dari input dengan nama nama_field.
* dd($allInput): Ini adalah fungsi helper Laravel yang sangat berguna untuk debugging. dd singkatan dari "dump and die", yang akan menampilkan isi variabel dan menghentikan eksekusi script. Cobalah ini untuk melihat data yang masuk.

7. Redirect dan Flash Message

Setelah pengguna berhasil submit form, biasanya kita tidak ingin hanya menampilkan teks "Berhasil diterima!". Kita ingin mengarahkan mereka kembali ke halaman lain (misalnya daftar artikel) dan memberikan notifikasi bahwa operasi mereka berhasil. Di sinilah Redirect dan Flash Message berperan.

Redirect

Laravel menyediakan beberapa cara untuk melakukan redirect:

• redirect()->back(): Mengarahkan pengguna kembali ke halaman sebelumnya.
• redirect()->route('nama.route'): Mengarahkan pengguna ke route yang memiliki nama tertentu.
• redirect('/url-lain'): Mengarahkan ke URL spesifik.

Mari kita ubah method store kita:

// app/Http/Controllers/ArticleController.php
// ...
    public function store(Request $request)
    {
        $title = $request->title;
        $content = $request->content;

        // ... (logika penyimpanan ke database akan ada di batch berikutnya)

        // Setelah "menyimpan" artikel, kita redirect ke halaman daftar artikel
        return redirect()->route('articles.index');
    }
// ...

Sekarang, setelah form disubmit, kamu akan langsung diarahkan ke halaman /artikel.

Flash Message

Redirect saja tidak cukup. Pengguna perlu tahu apakah operasi mereka berhasil atau gagal. Flash Message adalah pesan yang disimpan di session untuk satu kali request saja, lalu otomatis dihapus setelah request berikutnya. Ini sempurna untuk notifikasi.

Kita bisa menambahkan flash message saat melakukan redirect menggunakan method with():

// app/Http/Controllers/ArticleController.php
// ...
    public function store(Request $request)
    {
        $title = $request->title;
        $content = $request->content;

        // ... (logika penyimpanan ke database)

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

Di sini, kita menyimpan pesan 'Artikel berhasil ditambahkan!' dengan key 'success' ke dalam session.

Untuk menampilkan flash message ini di Blade (misalnya di articles/index.blade.php atau di layouts/app.blade.php), kita bisa mengecek apakah session memiliki key tersebut:

<!-- resources/views/layouts/app.blade.php atau articles/index.blade.php -->

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

Sekarang, setelah kamu submit form dan di-redirect, pesan "Artikel berhasil ditambahkan!" akan muncul di halaman daftar artikel!

Ringkasan Singkat Batch 3

Di Batch 3 ini, kita telah belajar bagaimana Controller menjadi "otak" aplikasi kita, memisahkan logika dari route untuk kerapian dan kemudahan pengelolaan. Kita juga memahami cara membuat form interaktif di Blade, pentingnya token CSRF untuk keamanan, bagaimana mengambil input dari pengguna, serta cara menggunakan redirect dan flash message untuk memberikan pengalaman pengguna yang lebih baik setelah interaksi form.

Latihan Praktik: Membuat Form Tambah Artikel Sementara Tanpa Database

Mari kita praktikkan semua yang sudah dipelajari di batch ini:

1. Buat Controller: Jika belum, buat ArticleController menggunakan php artisan make:controller ArticleController.
2. Tambahkan Method create: Di ArticleController, buat method create() yang akan me-return view untuk form tambah artikel.
3. Buat View create.blade.php: Buat file resources/views/articles/create.blade.php. Isi dengan form HTML untuk judul dan isi artikel. Jangan lupa @csrf!
4. Tambahkan Method store: Di ArticleController, buat method store(Request $request). Di dalamnya, ambil input title dan content dari $request.
5. Ubah store untuk Redirect: Setelah mengambil input, ubah method store agar me-redirect ke halaman articles.index (atau halaman lain yang kamu inginkan) dan sertakan flash message success.
6. Tambahkan Route: Di routes/web.php, tambahkan dua route:
7. Tampilkan Flash Message: Di resources/views/articles/index.blade.php (atau di layout utama kamu), tambahkan kode untuk menampilkan flash message success.
8. Uji Coba: Akses /artikel/create di browser, isi form, dan submit. Pastikan kamu di-redirect dan melihat flash message.

Pertanyaan Cek Pemahaman

Jawab pertanyaan berikut untuk mengecek pemahamanmu:

1. Apa perbedaan utama antara menaruh logika di closure route dan di Controller?
2. Mengapa setiap form POST di Laravel wajib menyertakan @csrf?
3. Bagaimana cara mengambil semua data input dari form di Controller?
4. Kapan kita sebaiknya menggunakan redirect()->back() dan kapan redirect()->route()?
5. Apa itu flash message dan bagaimana cara menampilkannya di Blade?

Kesalahan Umum Pemula

• Lupa @csrf: Ini adalah kesalahan paling umum yang menyebabkan error 419 | PAGE EXPIRED. Selalu ingat untuk menambahkannya di setiap form POST, PUT, PATCH, DELETE.
• Lupa use Illuminate\Http\Request;: Jika kamu menggunakan Request $request di parameter method Controller, pastikan kamu sudah mengimpor kelas Request di bagian atas file Controller.
• Lupa use App\Http\Controllers\NamaController;: Saat mendefinisikan route yang menunjuk ke Controller, pastikan kamu sudah mengimpor Controller tersebut di routes/web.php.
• Salah Method HTTP: Menggunakan method="GET" di form untuk operasi yang seharusnya POST (misalnya menyimpan data).
• Tidak menampilkan flash message: Setelah redirect dengan flash message, lupa menambahkan kode di Blade untuk menampilkannya, sehingga pesan tidak terlihat oleh pengguna.

Persiapan untuk Batch Berikutnya

Selamat, PahamITian! Kamu sudah bisa membuat form dan mengelola input pengguna dengan Controller. Ini adalah langkah besar menuju aplikasi yang interaktif.

Di Batch 4, kita akan melangkah lebih jauh dan mulai "menyimpan" data yang kita terima dari form ke dalam database! Kita akan belajar tentang Migration untuk membuat tabel, dan Model Eloquent untuk berinteraksi dengan data. Ini akan menjadi pondasi untuk membuat fitur CRUD (Create, Read, Update, Delete) yang sesungguhnya.

Tetap semangat dan sampai jumpa di Batch 4!