Laravel 12 Nuxt UI #4 Rancangan Model dan Migrasi

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 36 kali

Rating: 5.00 ⭐

... 07 November 2025, 08:14

Sebelum kita mulai membangun fitur CRUD di Laravel, hal pertama yang perlu disiapkan adalah model dan migrasi. Model berfungsi sebagai representasi data dalam bentuk objek PHP yang terhubung langsung dengan tabel di basis data. Dengan model, kita dapat melakukan berbagai operasi seperti menambah, mengubah, menghapus, dan mengambil data tanpa harus menulis query SQL secara manual.

Sementara itu, migrasi berperan sebagai peta struktur basis data. Melalui migrasi, kita dapat mendefinisikan struktur tabel — seperti nama kolom, tipe data, dan relasinya — secara terprogram dan dapat dilacak dalam versi tertentu. Dengan demikian, pengelolaan perubahan struktur database menjadi lebih mudah dan konsisten, terutama saat bekerja dalam tim.

Pada studi kasus kali ini, kita akan membuat sistem pencatatan keuangan sederhana yang bertujuan untuk mencatat pemasukan dan pengeluaran harian.

Langkah pertama, silakan buat model baru bernama FinanceRecord beserta file migrasinya dengan perintah berikut:

php artisan make:model FinanceRecord -m

Perintah di atas akan menghasilkan dua file baru, yaitu:

  1. File model FinanceRecord.php di folder app/Models, dan
  2. File migrasi di folder database/migrations, yang akan digunakan untuk mendefinisikan struktur tabel finance_records.

Konfigurasi Migrasi

Setelah model dan file migrasi berhasil dibuat, langkah berikutnya adalah mengonfigurasi struktur tabel yang akan digunakan untuk menyimpan data keuangan. Silakan buka file migrasi yang terletak di folder:

database/migrations/2025_11_08_023352_create_finance_records_table.php

Kemudian ubah isinya menjadi seperti berikut:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Jalankan migrasi.
     */
    public function up(): void
    {
        Schema::create('finance_records', function (Blueprint $table) {
            $table->id();
            $table->date('date')->index()->comment('Tanggal pencatatan');
            $table->decimal('income', 15, 2)->default(0)->comment('Jumlah pemasukan');
            $table->decimal('expense', 15, 2)->default(0)->comment('Jumlah pengeluaran');
            $table->timestamps();
        });
    }

    /**
     * Batalkan migrasi.
     */
    public function down(): void
    {
        Schema::dropIfExists('finance_records');
    }
};

Berikut penjelasan struktur tabel finance_records dalam bentuk tabel yang sistematis dan mudah dipahami:

Nama Kolom Jenis Data Penjelasan
id bigIncrements (auto) Primary key tabel. Nilai ini bertambah otomatis setiap kali data baru ditambahkan.
date date Menyimpan tanggal pencatatan transaksi keuangan. Kolom ini juga diberi index untuk mempercepat pencarian data berdasarkan tanggal.
income decimal(15, 2) Menyimpan jumlah pemasukan (uang masuk) dengan format angka desimal — maksimal 15 digit dan 2 angka di belakang koma. Nilai default adalah 0.
expense decimal(15, 2) Menyimpan jumlah pengeluaran (uang keluar) dengan format desimal yang sama seperti income. Nilai default juga 0.
created_at timestamp (otomatis) Mencatat waktu ketika data pertama kali dibuat (dibangkitkan otomatis oleh Laravel).
updated_at timestamp (otomatis) Mencatat waktu terakhir kali data diperbarui.

Dengan struktur di atas, tabel finance_records dirancang untuk mendukung pencatatan keuangan harian secara sederhana namun tetap terukur — mencakup dua komponen utama yaitu pemasukan dan pengeluaran, disertai informasi tanggal dan waktu pembuatannya.


Konfigurasi Model

Setelah migrasi selesai dibuat, langkah berikutnya adalah mengonfigurasi model agar dapat berinteraksi langsung dengan tabel finance_records di database.

Silakan buka file FinanceRecord.php yang terdapat di folder app/Models, lalu ubah isinya menjadi seperti berikut:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class FinanceRecord extends Model
{
    use HasFactory;

    protected $table = 'finance_records';

    protected $fillable = [
        'date',
        'income',
        'expense',
    ];

    /**
     * Accessor for net balance of the day.
     */
    protected $casts = [
        'date' => 'date', 
    ];

    public function getNetAttribute(): float
    {
        return $this->income - $this->expense;
    }
}

Penjelasan Kode Model

Properti / Metode Jenis / Tipe Penjelasan
use HasFactory; Trait Mengaktifkan fitur factory Laravel, berguna untuk pembuatan data dummy saat pengujian (testing atau seeding).
protected $table = 'finance_records'; Properti Menentukan nama tabel yang digunakan oleh model ini. Secara default Laravel akan menebak nama tabel dari nama model, tetapi di sini kita menetapkannya secara eksplisit untuk memastikan konsistensi.
protected $fillable Array Daftar kolom yang boleh diisi secara massal (mass assignment). Dalam kasus ini: dateincome, dan expense.
protected $casts Array Mengubah tipe data kolom tertentu secara otomatis. Di sini kolom date dikonversi menjadi instance objek Carbon, sehingga memudahkan manipulasi tanggal di sisi kode.
public function getNetAttribute() Accessor (method) Mendefinisikan atribut tambahan bernama net yang secara otomatis menghitung selisih antara pemasukan dan pengeluaran (income - expense). Dengan accessor ini, kita bisa langsung memanggil $record->net di Blade atau controller.

Dengan konfigurasi ini, model FinanceRecord siap digunakan untuk berbagai operasi seperti:

  • Menyimpan data keuangan baru (FinanceRecord::create([...]))
  • Mengambil seluruh catatan (FinanceRecord::all())
  • Menghitung saldo bersih harian melalui accessor $record->net.

Model ini menjadi inti logika bisnis dalam sistem pencatatan keuangan sederhana yang kita bangun. Pada materi berikutnya, kita akan membuat sebuah controller yang berfungsi sebagai pengendali alur logika aplikasi. Controller ini berperan untuk mengatur bagaimana data ditampilkandikeloladitambahkandiperbarui, dan dihapus dari sistem.

Dengan kata lain, controller menjadi penghubung antara model (yang berisi data dan logika bisnis) dengan view (yang menampilkan data kepada pengguna).

Daftar eBook