Proyek Belajar: Aplikasi CRUD dengan Laravel & Filament

Selamat datang di proyek belajar pertama Anda dengan Laravel! Aplikasi ini adalah sebuah sistem CRUD (Create, Read, Update, Delete) sederhana untuk mengelola data "item". Tujuan utama dari proyek ini adalah untuk memahami dasar-dasar framework Laravel dan bagaimana komponen-komponen utamanya bekerja sama.

Dokumentasi ini dibuat khusus untuk Anda, dengan mempertimbangkan latar belakang Anda di PHP, JavaScript, React, dan Next.js, agar proses belajar menjadi lebih intuitif.

Teknologi yang Digunakan

• Laravel 11: Framework utama berbasis PHP.
• Filament 3: Admin panel yang dibuat di atas TALL stack (Tailwind CSS, Alpine.js, Livewire, Laravel) untuk membuat antarmuka CRUD dengan cepat.
• PHP 8.2: Bahasa pemrograman yang mendasari Laravel.
• MySQL: Database untuk menyimpan data.
• Vite: Build tool modern untuk aset frontend (CSS & JS).

---

Panduan Instalasi & Setup

Berikut adalah langkah-langkah untuk menjalankan proyek ini dari awal.

1. Clone Repositori (Jika Anda mulai dari awal)

   git clone [URL_REPOSITORI_ANDA]
   cd crud-app

2. Install Dependensi PHP Gunakan Composer untuk menginstal semua paket PHP yang dibutuhkan oleh Laravel.

   composer install

3. Buat File Environment Salin file .env.example menjadi .env. File ini berisi semua konfigurasi spesifik untuk lingkungan Anda, termasuk koneksi database.

   copy .env.example .env

4. Konfigurasi Database Buka file .env dan sesuaikan variabel berikut dengan pengaturan database Anda:

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

5. Generate Kunci Aplikasi Setiap aplikasi Laravel membutuhkan kunci enkripsi yang unik.

   php artisan key:generate

6. Jalankan Migrasi Database Perintah ini akan membuat semua tabel di database Anda berdasarkan file "migrasi" yang ada di database/migrations.

   php artisan migrate

7. Install Dependensi JavaScript Gunakan NPM untuk menginstal aset frontend.

   npm install

8. Jalankan Server Pengembangan Perintah ini akan menjalankan server pengembangan lokal di http://127.0.0.1:8000.

   php artisan serve

   Anda juga perlu menjalankan Vite untuk kompilasi aset frontend secara real-time. Buka terminal baru dan jalankan:

   npm run dev

9. Akses Aplikasi

   • Aplikasi utama: http://127.0.0.1:8000
   • Admin Panel Filament: http://127.0.0.1:8000/admin

---

Konsep Inti Laravel dalam Proyek Ini

Mari kita bedah bagaimana proyek ini menggunakan fitur-fitur utama Laravel.

1. Arsitektur MVC (Model-View-Controller)

Laravel dibangun di atas pola arsitektur MVC.

• Model: app/Models/items.php

  • Apa itu? Model merepresentasikan sebuah tabel di database Anda. Dalam kasus ini, model items terhubung dengan tabel items. Laravel menyebut ini Eloquent ORM.
  • Hubungan dengan PHP/React: Anggap saja ini seperti sebuah class di PHP yang secara ajaib sudah memiliki metode untuk berinteraksi dengan tabel database (seperti find(), create(), all()). Di dunia React, ini mirip seperti Anda mendefinisikan "shape" atau bentuk dari data yang Anda fetch dari API.
  • Properti $fillable: Ini adalah fitur keamanan untuk mencegah mass-assignment vulnerability. Hanya kolom yang disebutkan di sini yang bisa diisi secara massal (misalnya, saat membuat item baru dari sebuah form).

• View: resources/views/

  • Apa itu? Ini adalah lapisan presentasi, yaitu file-file HTML. Laravel menggunakan templating engine bernama Blade.
  • Dalam Proyek Ini: Kita tidak banyak menyentuh Blade secara langsung karena Filament secara otomatis membuatkan semua tampilan (view) untuk kita. Namun, jika Anda ingin membuat halaman publik, Anda akan membuat file .blade.php di direktori ini.
  • Hubungan dengan React: Blade adalah "React"-nya Laravel, tetapi server-rendered. Sintaks seperti @if, @foreach, dan {{ $variable }} dieksekusi di server untuk menghasilkan HTML. Ini mirip dengan JSX, tetapi untuk PHP.

• Controller: (Digantikan oleh Filament Resource)

  • Apa itu? Controller bertindak sebagai perantara antara Model dan View. Ia menerima request, mengambil data dari Model, dan mengirimkannya ke View.
  • Dalam Proyek Ini: Kita menggunakan Filament Resource (app/Filament/Resources/ItemsResource.php) yang berfungsi seperti "Controller super" untuk operasi CRUD. Ia menangani semua logika untuk menampilkan, membuat, dan mengedit data items.

2. Migrasi Database (database/migrations/)

• Apa itu? Migrasi adalah sistem kontrol versi (seperti Git) untuk skema database Anda. Setiap file di sini merepresentasikan satu perubahan pada database (membuat tabel, menambah kolom, dll).
• Hubungan dengan PHP: Daripada menulis CREATE TABLE manual di SQL, Anda mendefinisikannya dalam bentuk kode PHP. Ini membuat skema database Anda portabel dan mudah dimodifikasi oleh tim.
• Metode up() dan down(): up() berisi perubahan yang ingin Anda terapkan, dan down() berisi cara untuk membatalkan perubahan tersebut.
• Perintah Penting:
  • php artisan migrate: Menjalankan migrasi yang belum dijalankan.
  • php artisan migrate:fresh: Menghapus semua tabel dan menjalankan ulang semua migrasi (berguna saat pengembangan).
  • php artisan make:migration nama_migrasi: Membuat file migrasi baru.

3. Routing (routes/web.php)

• Apa itu? File ini mendefinisikan endpoint atau URL aplikasi Anda dan menghubungkannya ke Controller atau fungsi tertentu.
• Hubungan dengan Next.js/React Router: Ini sangat mirip dengan bagaimana Anda mendefinisikan rute di Next.js (misalnya, di dalam folder pages atau app) atau menggunakan library seperti React Router.
• Dalam Proyek Ini: Rute utama (/) mungkin ada di sini, tetapi semua rute untuk /admin/... diatur secara otomatis oleh Filament.

---

Memahami Filament (Admin Panel)

Filament adalah "game-changer" di proyek ini. Ia adalah kumpulan komponen TALL Stack yang memungkinkan kita membuat antarmuka admin dengan sangat cepat.

File utama yang perlu Anda perhatikan adalah app/Filament/Resources/ItemsResource.php.

• protected static ?string $model = Items::class; Baris ini memberitahu Filament bahwa Resource ini bertanggung jawab untuk mengelola model Items.

• public static function form(Form $form): Form

  • Apa itu? Metode ini mendefinisikan field-field apa saja yang akan muncul di form "Create" dan "Edit".
  • Hubungan dengan React: Ini seperti Anda membangun sebuah form di React. Setiap Forms\Components\... (seperti TextInput, Textarea) adalah sebuah komponen input. Properti seperti ->required(), ->numeric() adalah props yang Anda teruskan ke komponen tersebut.

• public static function table(Table $table): Table

  • Apa itu? Metode ini mendefinisikan kolom-kolom apa saja yang akan ditampilkan di halaman list (tabel).
  • Hubungan dengan React: Mirip dengan mendefinisikan kolom untuk library tabel di React (seperti React Table atau AG Grid). Setiap Tables\Columns\... adalah komponen kolom.

Livewire: "React" untuk Backend Filament berjalan di atas Livewire. Livewire memungkinkan Anda membangun antarmuka dinamis menggunakan PHP, bukan JavaScript. Saat Anda berinteraksi dengan halaman Filament (misalnya, sorting tabel, validasi form), Livewire secara cerdas mengirim request ke server dan hanya me-render ulang bagian halaman yang berubah, mirip seperti cara kerja React.

---

Langkah Belajar Selanjutnya

Setelah memahami proyek ini, berikut adalah beberapa ide untuk memperdalam pemahaman Anda tentang Laravel:

1. Buat Halaman Publik: Buat Controller baru (php artisan make:controller ItemController) dan sebuah View Blade untuk menampilkan semua item kepada pengunjung non-admin.
2. Validasi Lanjutan: Jelajahi aturan validasi Laravel yang lebih kompleks di dalam Filament Resource Anda.
3. Eloquent Relationships:
   • Buat model dan migrasi baru untuk Category.
   • Buat hubungan one-to-many (satu Kategori memiliki banyak Item).
   • Tampilkan pilihan kategori di form item Anda.
4. Autentikasi: Coba instal Laravel Breeze untuk menambahkan sistem login dan registrasi untuk pengguna biasa (bukan admin Filament).
5. Tulis Tes: Pelajari cara menulis tes unit atau fitur untuk memastikan aplikasi Anda bekerja sesuai harapan.

Semoga dokumentasi ini membantu perjalanan belajar Anda! Jangan ragu untuk bereksperimen dan mengubah kode untuk melihat dampaknya. Selamat belajar!