Tutorial Laravel 12 Livewire dan Tailwind CSS #3 Model dan Migration Pada Laravel 12 Livewire

Pelajari cara membangun aplikasi web modern dengan Laravel 12, Livewire, dan Tailwind CSS. Tutorial ini membahas langkah demi langkah mulai dari instalasi hingga implementasi fitur interaktif tanpa JavaScript. Cocok untuk pemula maupun developer yang ingin meningkatkan skill dalam membangun UI dinamis dan reaktif dengan Livewire serta styling cepat menggunakan Tailwind CSS.

✅ Telah dilihat 840 kali

Rating: 5.00 ⭐

... 18 July 2025, 15:31

Membuat Model dan Migrasi di Laravel 12 dengan Livewire

Baik teman-teman, sekarang kita masuk ke salah satu bagian paling mendasar dan penting dalam pengembangan aplikasi Laravel, yaitu membuat fitur CRUD — singkatan dari Create, Read, Update, dan Delete.

Di bagian ini kita akan menggunakan kombinasi teknologi modern, yaitu:

  • Laravel 12 sebagai framework utama,
  • Livewire untuk komponen frontend yang interaktif tanpa perlu menulis JavaScript,
  • Tailwind CSS untuk styling,
  • serta Flux UI, sebuah pustaka komponen siap pakai berbasis Tailwind yang akan mempercepat kita dalam membangun antarmuka pengguna yang elegan.

Apa Tujuannya?

Langkah awal dari proses CRUD adalah menyiapkan struktur data, yaitu membuat:

  • Model, yang merepresentasikan data dan logikanya di dalam aplikasi;
  • dan Migrasi, yaitu skrip untuk membuat tabel di dalam database.

Dalam studi kasus ini, kita akan membuat data Catatan — bisa diartikan sebagai semacam entri atau postingan pendek yang berisi judul dan isi.


Cara Membuat Model dan Migrasi

Buka terminal kamu dan jalankan perintah berikut:

php artisan make:model Catatan -m

Apa yang dilakukan perintah ini?

  • make:model Catatan → akan membuat sebuah model bernama Catatan.php.
  • Opsi -m → akan langsung membuatkan file migrasi untuk tabel catatans.

Hasilnya Apa?

Jika berhasil, terminal akan menampilkan pesan seperti ini:

INFO  Model [C:\Users\LENOVO\Pictures\laravel12-livewire\app\Models\Catatan.php] created successfully.

INFO  Migration [C:\Users\LENOVO\Pictures\laravel12-livewire\database\migrations/2025_07_19_030252_create_catatans_table.php] created successfully.

Artinya:

  • Model Catatan.php sekarang ada di folder app/Models.
  • File migrasi create_catatans_table.php berada di database/migrations.

Konfigurasi File Migrasi

Sekarang, buka file migrasi yang baru dibuat tadi. File tersebut biasanya dinamai sesuai timestamp, misalnya: 2025_07_19_030252_create_catatans_table.php

Ubah isi file tersebut menjadi seperti berikut:

<?php

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

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('catatans', function (Blueprint $table) {
            $table->id();
            $table->string('judul');
            $table->text('isi');
            $table->timestamps();
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('catatans');
    }
};

Penjelasan singkat:

  • Kita buat tabel bernama catatans.
  • Tabel ini memiliki kolom: idjudul (teks pendek), isi (teks panjang), dan timestamps (otomatis menambah created_at dan updated_at).

Konfigurasi Model Catatan

Sekarang, buka file Catatan.php di app/Models/ dan ubah isinya seperti ini:

<?php

namespace App\Models;

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

class Catatan extends Model
{
    use HasFactory;

    protected $table = 'catatans';

    protected $fillable = [
        'judul',
        'isi',
    ];
}

Catatan penting:

  • use HasFactory: memungkinkan kita menggunakan factory untuk testing dan seeding data.
  • protected $table: mendefinisikan nama tabel secara eksplisit (meskipun sebenarnya bisa diabaikan jika sesuai konvensi).
  • protected $fillable: menentukan field apa saja yang boleh diisi secara massal (pakai create() atau update()).

Jalankan Migrasi

Kalau semuanya sudah siap, kita jalankan perintah berikut untuk membuat tabel di database:

php artisan migrate

Jika berhasil, akan muncul output seperti ini:

INFO  Running migrations.

  2025_07_19_030252_create_catatans_table .................................................. DONE

Dan di database kamu, sekarang ada tabel catatans seperti berikut:

Tampilan Tabel Catatans


Kesimpulan

Sampai di sini, kita sudah berhasil:

  • Membuat model Catatan.
  • Membuat file migrasi untuk tabel catatans.
  • Mengonfigurasi kolom yang dibutuhkan.
  • Menjalankan migrasi untuk menciptakan tabel tersebut di database.

Selanjutnya, di materi berikutnya, kita akan belajar membuat komponen Livewire untuk menampilkan dan mengelola data catatans ini di tampilan web.

🔥 Flash Sale


📜 Table Of Contents


📌 Daftar Episode


Daftar eBook