Laravel 12 Nuxt UI #5 Membuat Controller

Belajar cara membangun aplikasi fullstack modern menggunakan Laravel 12, Inertia.js, Nuxt UI, dan Tailwind CSS. Tutorial ini membahas langkah demi langkah mulai dari instalasi, konfigurasi, hingga integrasi Laravel dengan Nuxt tanpa perlu membuat REST API. Cocok untuk pemula yang ingin memahami konsep fullstack Laravel dengan tampilan modern dan reaktif.

✅ Telah dilihat 33 kali

Rating: 5.00 ⭐

... 07 November 2025, 08:14

Setelah kita menyiapkan model dan migrasi, tahap selanjutnya adalah membuat controller. Controller berfungsi sebagai pengendali alur logika aplikasi, yaitu bagian yang mengatur bagaimana data ditampilkanditambahkandiperbarui, dan dihapus dari sistem.

Secara sederhana, controller menjadi jembatan antara model dan view, memastikan data dari database dapat dikelola dan ditampilkan kepada pengguna dengan benar.


Membuat Controller

Untuk membuat controller baru, jalankan perintah berikut di terminal:

php artisan make:controller FinanceRecordController

Apabila perintah tersebut berhasil dijalankan, Laravel akan membuat sebuah file baru dengan nama FinanceRecordController.php yang terletak di dalam folder:

app/Http/Controllers/

Selanjutnya, buka file tersebut dan ubah isinya menjadi seperti contoh di bawah ini:

<?php

namespace App\Http\Controllers;

use App\Models\FinanceRecord;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;
use Inertia\Inertia;
use Inertia\Response;

use function to_route;

class FinanceRecordController extends Controller
{
    /**
     * Menampilkan daftar catatan keuangan (dengan pencarian sederhana berdasarkan tanggal)
     */
    public function index(Request $request): Response
    {
        $searchDate = $request->get('date');

        $records = FinanceRecord::query()
            ->when(
                $searchDate,
                fn($q) => $q->whereDate('date', $searchDate)
            )
            ->latest('date')
            ->get()
            ->map(fn($record) => [
                'id' => $record->id,
                'date' => $record->date->format('Y-m-d'),
                'date_display' => $record->date->format('d M Y'),
                'income' => number_format($record->income, 2),
                'expense' => number_format($record->expense, 2),
                'net' => number_format($record->net, 2),
            ]);

        return Inertia::render('finance-records/Index', [
            'records' => $records,
            'filters' => ['date' => $searchDate],
        ]);
    }


    /**
     * Menyimpan catatan keuangan baru
     */
    public function store(Request $request): RedirectResponse
    {
        $validated = $request->validate([
            'date' => ['required', 'date'],
            'income' => ['required', 'numeric', 'min:0'],
            'expense' => ['required', 'numeric', 'min:0'],
        ]);

        FinanceRecord::create($validated);

        return to_route('finance-records.index')->with('status', 'Catatan keuangan berhasil ditambahkan.');
    }
    /**
     * Menampilkan detail satu catatan keuangan (untuk form edit)
     */
    public function show(FinanceRecord $financeRecord): Response
    {
        return Inertia::render('finance-records/Edit', [
            'record' => [
                'id' => $financeRecord->id,
                // Format ISO 8601 (dipahami <input type="date">)
                'date' => $financeRecord->date
                    ? $financeRecord->date->format('Y-m-d')
                    : now()->format('Y-m-d'),
                'income' => (float) $financeRecord->income,
                'expense' => (float) $financeRecord->expense,
            ],
        ]);
    }


    /**
     * Memperbarui data catatan keuangan yang sudah ada
     */
    public function update(Request $request, FinanceRecord $financeRecord): RedirectResponse
    {
        $validated = $request->validate([
            'date' => ['required', 'date'],
            'income' => ['required', 'numeric', 'min:0'],
            'expense' => ['required', 'numeric', 'min:0'],
        ]);

        $financeRecord->update($validated);

        return back()->with('status', 'Catatan keuangan berhasil diperbarui.');
    }

    /**
     * Menghapus catatan keuangan
     */
    public function destroy(FinanceRecord $financeRecord): RedirectResponse
    {
        $financeRecord->delete();

        return back()->with('status', 'Catatan keuangan berhasil dihapus.');
    }
}


Penjelasan Controller

Controller ini berfungsi sebagai pengendali utama alur data antara model FinanceRecord dan tampilan (view) yang menggunakan Inertia.js. Di dalamnya terdapat lima metode utama yang masing-masing memiliki peran tersendiri dalam proses CRUD (Create, Read, Update, Delete). yakni:

1. index(Request $request): Response

Fungsi: Menampilkan daftar seluruh catatan keuangan.

Penjelasan Langkah Kerja:

  • Menerima permintaan dari pengguna, termasuk parameter pencarian date jika diisi.
  • Melakukan query ke tabel finance_records menggunakan model FinanceRecord.
    • Jika parameter date ada, maka query akan difilter berdasarkan tanggal tersebut.
    • Data diurutkan dari yang terbaru (latest('date')).
  • Data yang diambil kemudian diformat agar siap ditampilkan di antarmuka, seperti:
    • Format tanggal (Y-m-d dan d M Y),
    • Format angka pemasukan, pengeluaran, dan selisih (number_format).
  • Mengembalikan tampilan (Inertia::render) menuju halaman finance-records/Index, lengkap dengan data records dan filter yang digunakan.

Fungsi ini menangani proses read atau retrieve data, yaitu menampilkan daftar catatan keuangan dengan fitur pencarian berdasarkan tanggal.


2. store(Request $request): RedirectResponse

Fungsi: Menyimpan catatan keuangan baru ke dalam database.

Penjelasan Langkah Kerja:

  • Melakukan validasi data yang dikirim dari form agar:
    • date harus diisi dan bertipe tanggal,
    • income dan expense harus berupa angka dan tidak boleh bernilai negatif.
  • Setelah data valid, data disimpan ke tabel finance_records menggunakan FinanceRecord::create($validated).
  • Setelah proses penyimpanan selesai, sistem melakukan redirect ke halaman daftar (finance-records.index) dengan pesan sukses.

Fungsi ini bertugas menangani proses create data keuangan baru dengan validasi input yang ketat.


3. show(FinanceRecord $financeRecord): Response

Fungsi: Menampilkan satu data catatan keuangan berdasarkan ID, biasanya untuk proses edit.

Penjelasan Langkah Kerja:

  • Menerima satu objek FinanceRecord berdasarkan ID yang dikirim dari route.
  • Menyiapkan data dalam format yang mudah dibaca oleh form edit:
    • Format tanggal diubah menjadi Y-m-d agar sesuai dengan elemen HTML <input type="date">.
    • Nilai income dan expense dikonversi menjadi tipe float.
  • Mengembalikan tampilan finance-records/Edit melalui Inertia dengan data record.

Fungsi ini digunakan untuk menampilkan detail satu catatan keuangan agar dapat diedit oleh pengguna.


4. update(Request $request, FinanceRecord $financeRecord): RedirectResponse

Fungsi: Memperbarui data keuangan yang sudah ada di database.

Penjelasan Langkah Kerja:

  • Melakukan validasi input dengan aturan yang sama seperti pada fungsi store.
  • Jika validasi berhasil, maka data pada objek $financeRecord akan diperbarui menggunakan $financeRecord->update($validated).
  • Setelah berhasil diperbarui, sistem kembali ke halaman sebelumnya dengan pesan notifikasi bahwa data telah diperbarui.

Fungsi ini menangani proses update, yaitu mengubah data catatan keuangan yang sudah tersimpan.


5. destroy(FinanceRecord $financeRecord): RedirectResponse

Fungsi: Menghapus data keuangan dari database.

Penjelasan Langkah Kerja:

  • Menerima satu objek FinanceRecord berdasarkan ID.
  • Menghapus data tersebut dengan perintah $financeRecord->delete().
  • Mengembalikan respon redirect ke halaman sebelumnya beserta pesan sukses.

Fungsi ini menangani proses delete (penghapusan) data dari tabel finance_records.

Dengan demikian, FinanceRecordController telah mengimplementasikan seluruh fungsi CRUD secara lengkap dan efisien, sekaligus menunjukkan praktik penulisan kode yang rapi dan sesuai standar Laravel modern menggunakan Inertia.js sebagai lapisan tampilan.

Pada materi berikutnya, kita akan melakukan konfigurasi rute (route) agar controller yang telah dibuat dapat terdefinisikan dan dapat diakses melalui URL. Dengan mendefinisikan rute, kita memberi tahu Laravel ke mana permintaan (request) dari pengguna harus diarahkan — apakah untuk menampilkan data, menambah catatan baru, memperbarui, atau menghapus data.

Daftar eBook