Membuat Controller pada Laravel 12 dengan Inertia, React JS, dan Tailwind CSS

Sebelumnya, kita sudah membahas bagaimana cara mengkonfigurasi handle Inertia request, yang fungsinya sebagai jembatan antara Laravel dan React melalui Inertia. Nah, di tahap ini kita akan melanjutkan ke bagian penting berikutnya, yaitu membuat controller. Controller bisa dibilang adalah otak dari aplikasi kita. Semua logika bisnis—mulai dari menampilkan data, menyimpan data baru, mengedit, hingga menghapus—akan dikelola di sini. Kalau frontend adalah wajah dari aplikasi, maka controller adalah dalangnya.

Langkah Membuat Controller

Untuk membuat controller baru di Laravel, kita cukup jalankan perintah Artisan berikut di terminal:

php artisan make:controller ProductController

Perintah ini akan secara otomatis membuatkan file controller baru bernama ProductController.php di folder app/Http/Controllers.

Jika berhasil, akan muncul notifikasi seperti ini:

INFO  Controller [C:\Users\LENOVO\Pictures\LARAVEL\laravel-react-starter-kit\app\Http\Controllers\ProductController.php] created successfully.

Artinya, proses pembuatan controller sudah selesai dan file-nya siap untuk kita isi dengan logika yang kita butuhkan. Silakan buka, kemudian ubah menjadi seperti berikut ini:

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;

class ProductController extends Controller
{
    public function index(): Response
    {
        $products = Product::all();

        return Inertia::render('Products/Index', [
            'products' => $products
        ]);
    }

    public function create(): Response
    {
        return Inertia::render('Products/Create');
    }

    public function store(Request $request)
    {
        $validated = $request->validate($this->rules());

        Product::create($validated);

        return redirect()
            ->route('products.index')
            ->with('message', 'Product created successfully.');
    }

    public function edit(Product $product): Response
    {
        return Inertia::render('Products/Edit', [
            'product' => $product
        ]);
    }

    public function update(Request $request, Product $product)
    {
        $validated = $request->validate($this->rules());

        $product->update($validated);

        return redirect()
            ->route('products.index')
            ->with('message', 'Product updated successfully.');
    }

    public function destroy(Product $product)
    {
        $product->delete();

        return redirect()
            ->route('products.index')
            ->with('message', 'Product deleted successfully.');
    }
    protected function rules(): array
    {
        return [
            'name' => 'required|string|max:255',
            'price' => 'required|numeric',
            'description' => 'nullable|string',
        ];
    }
}

1. index()

public function index(): Response
{
    $products = Product::all();

    return Inertia::render('Products/Index', [
        'products' => $products
    ]);
}

Method ini bertugas untuk menampilkan semua data produk. Kita ambil semua data dari database menggunakan Product::all(), lalu kita kirim datanya ke komponen React bernama Products/Index menggunakan Inertia::render.

2. create()

public function create(): Response
{
    return Inertia::render('Products/Create');
}

Bagian ini menampilkan form untuk membuat produk baru. Tidak ada data yang dikirim karena hanya render tampilan form kosong di komponen React Products/Create.

3. store()

public function store(Request $request)
{
    $validated = $request->validate($this->rules());

    Product::create($validated);

    return redirect()
        ->route('products.index')
        ->with('message', 'Product created successfully.');
}

Setelah form dikirim, data masuk ke method ini. Di sini:

• Kita validasi data pakai $request->validate(...).
• Kalau lolos, kita simpan ke database dengan Product::create(...).
• Terakhir, redirect ke halaman index dengan flash message.

4. edit()

public function edit(Product $product): Response
{
    return Inertia::render('Products/Edit', [
        'product' => $product
    ]);
}

Method ini menampilkan form edit, tapi kali ini datanya sudah diisi dengan data produk yang mau diedit. Jadi, kita tinggal lempar data product ke komponen Products/Edit.

5. update()

public function update(Request $request, Product $product)
{
    $validated = $request->validate($this->rules());

    $product->update($validated);

    return redirect()
        ->route('products.index')
        ->with('message', 'Product updated successfully.');
}

Ini mirip seperti store(), bedanya adalah kita meng-update data yang sudah ada. Setelah validasi, data langsung di-update ke produk yang bersangkutan.

6. destroy()

public function destroy(Product $product)
{
    $product->delete();

    return redirect()
        ->route('products.index')
        ->with('message', 'Product deleted successfully.');
}

Bagian ini untuk menghapus produk. Setelah itu, kita kembali ke halaman daftar produk sambil mengirim pesan sukses.

7. rules()

protected function rules(): array
{
    return [
        'name' => 'required|string|max:255',
        'price' => 'required|numeric',
        'description' => 'nullable|string',
    ];
}

Supaya tidak nulis validasi berulang di store() dan update(), kita buat helper rules() untuk mendefinisikan aturan validasi. Praktis dan DRY (Don't Repeat Yourself).

Kesimpulan

Sampai di tahap ini, kita sudah berhasil membuat sebuah controller lengkap untuk mengelola produk dengan Laravel 12, dan tentu saja sudah terintegrasi dengan Inertia.js dan React.

Controller ProductController ini sudah mencakup seluruh proses CRUD:

• Menampilkan daftar produk,
• Menyediakan form tambah produk,
• Menyimpan data baru ke database,
• Menyediakan form edit data,
• Menyimpan perubahan (update),
• Dan juga menghapus produk dari database.

Semua proses ini kita bungkus rapi dalam metode-metode yang komunikasinya langsung terhubung ke komponen React menggunakan Inertia. Jadi walaupun kita tetap menggunakan Laravel sebagai backend, pengalaman pengguna tetap seperti menggunakan aplikasi SPA yang responsif dan cepat.

Apa Selanjutnya?

Nah, karena controller-nya sudah siap, tugas berikutnya adalah membuat file-file tampilan (pages) di sisi React. Di sinilah nanti kita akan bangun tampilan untuk:

• Melihat semua produk (Index),
• Menambah produk (Create),
• Mengedit produk (Edit).

Jadi di materi berikutnya, kita akan bangun React pages yang sesuai dengan controller ini agar frontend dan backend bisa saling terhubung dengan baik. Yuk, kita lanjut ke tahap berikutnya.