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

Langkah pertama yang perlu teman-teman lakukan adalah membuka file .env yang terdapat di direktori root project Laravel kita. File ini berisi berbagai konfigurasi lingkungan (environment), termasuk konfigurasi database.

Secara default, Laravel biasanya menggunakan SQLite sebagai driver database-nya. Konfigurasi default tersebut terlihat seperti ini:

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

Nah, karena kita akan menggunakan MySQL sebagai database utama, maka kita perlu mengubah konfigurasi tersebut. Silakan ubah menjadi seperti berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_react_js_starter_kit
DB_USERNAME=root
DB_PASSWORD=

Penjelasannya begini: kita mengganti koneksi database dari sqlite menjadi mysql, karena kita akan menggunakan MySQL untuk pengembangan aplikasi ini. Selain itu, kita juga mengaktifkan (menghapus tKita #) pada konfigurasi DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD agar nilai-nilai tersebut dibaca dan digunakan oleh Laravel. Pastikan nama database, username, dan password disesuaikan dengan pengaturan server MySQL yang teman-teman gunakan.

Membuat Database Baru di PhpMyAdmin

Setelah mengatur konfigurasi .env, selanjutnya kita perlu membuat database-nya terlebih dahulu.

Silakan jalankan XAMPP, kemudian aktifkan service Apache dan MySQL. Setelah itu, buka browser dan akses halaman berikut:

http://localhost/phpmyadmin

Di halaman PhpMyAdmin, buatlah database baru dengan nama:

laravel_react_js_starter_kit

Nama ini harus sama persis dengan yang sudah kita tulis di bagian DB_DATABASE pada file .env.

Dengan begitu, Laravel akan bisa terhubung ke database yang kita siapkan, dan kita bisa mulai menjalankan migrasi dan menyimpan data ke dalamnya.

Pembuatan Model dan Migrasi di Laravel

Setelah konfigurasi database selesai, langkah berikutnya adalah membuat model dan file migrasi untuk entitas yang akan kita kelola, dalam hal ini: Product (produk).

Silakan teman-teman buka terminal (CMD atau Terminal), lalu jalankan perintah berikut:

php artisan make:model Product -m

Perintah ini akan secara otomatis membuat dua file penting:

1. File Model: Terletak di: app/Models/Product.php File ini berfungsi sebagai representasi dari tabel products dalam bentuk object di dalam Laravel. Kita akan memanipulasi data produk melalui model ini.
2. File Migrasi: Terletak di: database/migrations/2025_08_04_072045_create_products_table.php File ini digunakan untuk mendefinisikan struktur tabel products di database MySQL kita.

Modifikasi File Migrasi

Silakan teman-teman buka file migrasi create_products_table.php tersebut, lalu ubah isi metodenya 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('products', function (Blueprint $table) {
            $table->id(); // Kolom primary key (id) otomatis
            $table->string('name'); // Nama produk
            $table->decimal('price', 10, 2); // Harga produk dengan 2 angka di belakang koma
            $table->text('description')->nullable(); // Deskripsi produk, opsional (boleh kosong)
            $table->timestamps(); // Kolom created_at dan updated_at
        });
    }

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

Penjelasan:

• $table->id() secara otomatis akan membuat kolom id sebagai primary key.
• $table->string('name') digunakan untuk menyimpan nama produk.
• $table->decimal('price', 10, 2) menyimpan harga dengan format desimal, misalnya 99999.99.
• $table->text('description')->nullable() menyimpan deskripsi produk dan boleh kosong (nullable).
• $table->timestamps() menambahkan dua kolom: created_at dan updated_at.

Setelah file ini siap, nanti kita bisa jalankan migrasi agar tabel products benar-benar dibuat di database.

Konfigurasi Model Product

Langkah selanjutnya adalah membuka file model Product.php yang terletak di folder app/Models, lalu kita ubah menjadi seperti ini:

<?php

namespace App\Models;

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

class Product extends Model
{
    use HasFactory;

    /**
     * Kolom-kolom yang boleh diisi secara massal.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'price',
        'description',
    ];
}

Penjelasan:

• Model ini mewakili tabel products di database.
• Kita menggunakan trait HasFactory agar bisa membuat data dummy (seeding/testing) dengan factory nantinya.
• Properti $fillable berfungsi untuk mendefinisikan kolom mana saja yang boleh di-isi massal (misalnya saat kita menggunakan Product::create([...])). Ini adalah bagian penting untuk mencegah mass assignment vulnerability.

Menjalankan Migrasi Database

Setelah kita selesai membuat dan mengatur file migrasi untuk tabel products, langkah selanjutnya adalah menjalankan proses migrasi agar struktur tabel tersebut benar-benar dibuat di dalam database MySQL kita.

Silakan buka terminal, pastikan berada di direktori root project Laravel Kita, lalu jalankan perintah berikut:

php artisan migrate

Perintah ini akan menjalankan semua file migrasi yang ada di folder database/migrations, termasuk migrasi bawaan Laravel seperti users, password_reset, jobs, dan tentu saja migrasi products yang baru saja kita buat.

Jika migrasi berhasil, akan muncul notifikasi seperti ini:

INFO  Preparing database.

Creating migration table ............................................................................... 9.39ms DONE

INFO  Running migrations.

0001_01_01_000000_create_users_table .................................................................. 37.19ms DONE
0001_01_01_000001_create_cache_table ................................................................... 5.07ms DONE
0001_01_01_000002_create_jobs_table ................................................................... 31.17ms DONE
2025_08_04_072045_create_products_table ................................................................ 2.81ms DONE

Notifikasi ini menunjukkan bahwa semua struktur tabel berhasil dibuat di dalam database.

Verifikasi di PhpMyAdmin

Untuk memastikan semuanya berjalan dengan baik, silakan buka browser dan akses halaman:

http://localhost/phpmyadmin

Kemudian, pilih database yang sudah kita buat sebelumnya (laravel_react_js_starter_kit). Di sana, Kita akan melihat daftar tabel yang baru dibuat, termasuk tabel products.

Tabel ini berisi kolom-kolom yang sesuai dengan definisi kita di file migrasi, seperti id, name, price, description, created_at, dan updated_at.

Dengan ini, struktur data untuk menyimpan produk sudah siap, dan kita bisa melanjutkan ke tahap selanjutnya. Sampai jumpa.