Konfigurasi Route pada Laravel 12 dengan Inertia, React JS, dan Tailwind CSS

Apa Itu Rute?

Pada materi kali ini, kita akan belajar bagaimana cara menambahkan rute baru ke dalam proyek Laravel yang menggunakan Inertia dan React JS. Secara sederhana, rute (route) adalah pengatur jalur—rute menentukan ke mana permintaan (request) dari pengguna akan diarahkan. Misalnya, ketika pengguna mengakses URL /products, maka Laravel akan mencari rute yang cocok dan mengeksekusi logic yang sudah kita tentukan di controller.

Fungsi Rute dalam Aplikasi

Rute bukan cuma soal ke mana pengguna akan diarahkan, tapi juga:

• Siapa yang boleh mengakses (melalui middleware atau pembatasan role),
• Method HTTP apa yang digunakan (GET, POST, PUT, DELETE),
• Dan bagaimana data ditransfer dari backend ke frontend (melalui Inertia).

Menambahkan Rute Produk

Setelah kita membuat ProductController dan menyiapkan logika CRUD di dalamnya, sekarang saatnya kita menambahkan rute agar controller tersebut bisa diakses oleh pengguna melalui URL tertentu.

Dalam Laravel, semua rute ditulis di file routes/web.php. Dan untuk membuat rute CRUD dengan cara yang lebih cepat dan efisien, Laravel menyediakan helper bernama Route::resource().

Contoh Penulisan:

use App\Http\Controllers\ProductController;

Route::resource('products', ProductController::class);

Apa yang Terjadi di Balik Route::resource?

Ketika kita menggunakan Route::resource('products', ProductController::class), Laravel akan secara otomatis membuat 7 rute sekaligus yang masing-masing terhubung ke method dalam controller. Berikut ini daftar lengkapnya:

Dengan kata lain, kita tidak perlu lagi menuliskan rute satu per satu. Cukup dengan satu baris Route::resource(...), seluruh rute CRUD langsung tersedia dan bisa digunakan.

Menambahkan Middleware

Karena kita ingin agar hanya user yang sudah login dan terverifikasi yang bisa mengakses rute produk, kita bisa membungkusnya dengan middleware auth dan verified. Hal ini untuk menjaga keamanan aplikasi kita.

Struktur File web.php Saat Ini

Berikut tampilan keseluruhan file routes/web.php setelah kita menambahkan rute produk:

<?php

use App\Http\Controllers\ProductController;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('welcome');
})->name('home');

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('dashboard', function () {
        return Inertia::render('dashboard');
    })->name('dashboard');

    Route::resource('products', ProductController::class);
});

require __DIR__ . '/settings.php';
require __DIR__ . '/auth.php';

Kesimpulan

Dengan penambahan rute ini, aplikasi kita kini sudah siap menangani berbagai permintaan terkait data produk, mulai dari menampilkan, menambah, mengedit, hingga menghapus. Semua itu akan berjalan mulus karena backend (Laravel) dan frontend (React via Inertia) sudah terhubung melalui sistem rute yang terstruktur. Di materi selanjutnya, kita akan mulai membangun komponen React seperti Products/Index, Create, dan Edit yang akan menampilkan data dan mengirim data balik ke controller melalui rute-rute yang sudah kita buat ini. Yuk, lanjut ke tahap berikutnya.