Laravel Filament - Customizing Forms and Tables

Tutorial Customizing Forms Tables Laravel 11 Fillament V3

Progress

Laravel Filament - Setting Up Resource

Tutorial Models Databases Resource Laravel 11 Fillament V3

Halo teman-teman! Sebelumnya kita sudah belajar tentang instalasi filament V3 laravel 11 di Episode 1. Dan pada tutorial kali ini, kita akan menyelami cara mengatur database, model, dan resource di Filament. Setelah memahami dasar-dasar pemasangan Filament, penting untuk mengonfigurasi backend kita dengan benar agar panel admin dapat berfungsi secara maksimal. Kita akan memulai dengan pengaturan database untuk memastikan data tersimpan dengan rapi, lalu melanjutkan dengan pembuatan model yang akan menjadi representasi dari data kita di aplikasi Laravel.

Selanjutnya, kita akan mengintegrasikan model-model tersebut ke dalam Filament sebagai sumber daya, sehingga kalian bisa mengelola dan memanipulasi data dengan mudah melalui antarmuka admin yang telah kita siapkan. Dengan mengikuti langkah-langkah ini, kalian akan memperoleh pemahaman yang lebih baik tentang bagaimana Filament berfungsi dengan data di aplikasi kalian dan bagaimana memanfaatkan fitur-fiturnya untuk meningkatkan efisiensi pengelolaan data.

Setting up the database and models

Sebelum kita masuk ke pembahasan tentang apa itu Resource, kita harus mempersiapkan database dan models nya terlebih dahulu. Untuk contoh pembelajaran kali ini, kita cukup pakai 2 table yang saling berelasi, yaitu Table Pegawai dan Table Jabatan.

Database Migration

Kita tentukan terlebih dahulu untuk struktur table yang nantinya akan kita buatkan sebuah migration di project laravel kita. Seperti yang sudah saya sampaikan diatas, kita memiliki 2 table yang akan kita buat.

Struktur Table

Untuk struktur Table Pegawais seperti ini :

Name	Type	Length	Not Null	Description
id	int	11	✓	Primary
name	string	255	✓	-
no_pegawai	string	20	✓	Unique
jabatan_id	int	11	✓	Foreign

Dan untuk struktur Table Jabatans seperti ini :

Name	Type	Length	Not Null	Description
id	int	11	✓	Primary
name	string	255	✓	-

Kedua table tersebut saling berelasi, bisa dilihat di Table Pegawais pada field jabatan_id tertulis diketerangannya yaitu Foreign yang artinya, Foreign key jabatan_id dari Table pegawais ke Table jabatans adalah sebuah kolom di tabel pegawai yang digunakan untuk membuat hubungan antara dua tabel dalam sebuah basis data.

Migrations

Kita mempunyai struktur database yang sudah kita rancang, selanjutnya kita implementasikan struktur tersebut kedalam migrations kita, untuk nantinya kita jalankan code migration tersebut dan mengimport table kedalam database yang sudah kita buat. kita buat migrationnya dengan cara buka terminal lalu masukkan code berikut kedalam terminal kalian :

  {{-- Untuk membuat Model Pegawai --}}
 php artisan make:model Pegawai -m

 {{-- Untuk Membuat Model Jabatan --}}
 php artisan make:model Jabatan -m  

Setelah menjalankan code tersebut di terminal, maka kita mempunyai file Model dan Migrations, kalian bisa cek untuk migration di folder database/migrations/nama_file_migration. Buka file migration jabatans, lalu jadikan code nya seperti ini :

  <?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
       Schema::create('jabatans', function (Blueprint $table) {
         $table->id();
         $table->string('name');
         $table->timestamps();
       });
    }

    /**
    * Reverse the migrations.
    */
    public function down(): void
    {
         Schema::dropIfExists('jabatans');
    }
};  

Lalu buka fle migrations pegawais, dan isi seperti ini :

  <?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
       Schema::create('pegawais', function (Blueprint $table) {
         $table->id();
         $table->string('name');
         $table->string('no_pegawai')->unique();
         $table->foreignId('jabatan_id')->constrained('jabatans')->cascadeOnDelete();
         $table->timestamps();
       });
    }

    /**
    * Reverse the migrations.
    */
    public function down(): void
    {
         Schema::dropIfExists('pegawais');
    }
};  

Perhatikan pada bagian field jabatan_id terdapat fungsi ->cascadeOnDelete(); yang artinya, jika id jabatan tersebut di hapus pada table jabatans, maka data pegawais yang terkait pun akan ikut terhapus. Nah setelah kita selesai membuat migration, kita buka terminal lalu jalankan code berikut :

php artisan migrate

Setelah proses migrate berhasil, maka table tersebut akan masuk kedalam database anda.

Models

Setting model pun harus kita lakukan setelah kita berhasil menjalankan migrations diatas. Kita cukup tambahkan protected $fillable dari masing-masing model yang sudah kita buat, dan tambahkan pula belongsTo di Model Pegawai karena table pegawai dan jabatan saling berelasi, agar mempermudah pemanggilan field dari kedua table tersebut. Untuk mengimplementasikan hal tersebut, kalian buka file Modelnya, dan terapkan hal berikut :

{{-- Model Pegawai --}} <?php

namespace App\Models;

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

use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Pegawai extends Model
{
     use HasFactory;

     protected $fillable = [
       'name',
       'no_pegawai',
       'jabatan_id',
     ];

     public function jabatan(): BelongsTo
     {
       return $this->belongsTo(Jabatan::class);
     }
}

Dan ini untuk model jabatan nya :

{{-- Model Pegawai --}} <?php

namespace App\Models;

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

class Jabatan extends Model
{
     use HasFactory;

     protected $fillable = [
       'name',
     ];
}

Kita telah selesai menyiapkan model dari kedua table tersebut. Dan sekarang kita bisa maju ke tahap pembahasan mengenai Resource Filament.

Resource Filament

Filament Resource adalah fitur dalam Laravel Filament yang mempermudah pengelolaan data di panel admin. Resource ini menghubungkan model Laravel dengan antarmuka pengguna yang intuitif, memungkinkan pengguna untuk melakukan operasi CRUD (Create, Read, Update, Delete) secara otomatis. Dengan menggunakan Resource, developer dapat dengan cepat membuat form dan tabel untuk entitas tertentu, serta menambahkan logika bisnis atau kustomisasi tampilan yang diperlukan tanpa menulis terlalu banyak kode manual. Ini membantu mempercepat pengembangan aplikasi dengan fitur yang kaya dan mudah diatur melalui panel admin yang powerful.

Create Resource

Kita ingin membuat 2 Resource yaitu Jabatan dan Pegawai yang nantinya kita bisa setting dari kedua tersebut agar saling berelasi/berkaitan. Kita buka terminal pada Vscode lalu masukkan code berikut :

 {{-- Resource Jabatan --}}
php artisan make:filament-resource Jabatan

 {{-- Resource Pegawai --}}
php artisan make:filament-resource Pegawai

Setelah menjalankan code tersebut di terminal, maka akan muncul file filament yang nantinya kita akan custom interface dan lain-lain di file tersebut. Kalian buka filenya di directory app/Filament/Resource di folder tersebut terdapat file-file Resource yang sudah kita buat. Dan istimewanya Filament disini, cukup kalian menjalankan code tersebut di terminal, maka boom, akan muncul sidebar jabatan dan pegawainya seperti ini :



Tampilan form create data :



Mudah bukan? nantinya kita akan custom tampilan-tampilan lainnya disini seperti penambahan filters, sort by, datatables, dan form masih kosong disini karena kita belum menambahkannya melalui JabatanResource.

Sebagai penutup, kita telah berhasil menambahkan Filament Resource ke dalam project Laravel, yang menjadi fondasi untuk pengelolaan data di panel admin. Meskipun kita belum menambahkan form, filter, atau fitur lain, langkah ini sudah membuka jalan untuk mempermudah pengaturan CRUD di aplikasi kita. Pada episode berikutnya, kita akan membahas lebih lanjut tentang cara menambahkan form, filter, dan berbagai fitur lainnya untuk meningkatkan fungsionalitas resource yang telah kita buat. Jadi, pastikan kalian tetap mengikuti agar tidak ketinggalan langkah-langkah penting berikutnya!.

Laravel Filament - Instalasi

Tutorial Instalasi Laravel 11 Fillament V3

Halo guys! Pada episode kali ini, kita akan mempelajari salah satu fitur istimewa yang ada di Laravel 10+, yaitu FILAMENT. Dalam seri tutorial ini, kita akan membahas bagaimana cara menggunakan Filament untuk membangun antarmuka admin yang modern, dinamis, dan mudah diintegrasikan ke dalam aplikasi Laravel. Mungkin sebagian dari kalian sudah pernah mendengar tentang Filament, tapi untuk yang belum, jangan khawatir! Kita akan mulai dari dasar-dasar sampai ke fitur-fitur lanjutannya. So, siap-siap buat belajar bareng di episode Filament ini!

Filament adalah sebuah library untuk Laravel yang dirancang khusus untuk membangun panel admin dengan cepat dan mudah. Filament menyediakan berbagai komponen siap pakai seperti tabel, form, dan manajemen sumber daya, yang memungkinkan pengembang untuk membuat antarmuka administrasi yang elegan dan fungsional tanpa perlu menulis banyak kode dari awal. Filament juga sangat fleksibel dan dapat disesuaikan sesuai kebutuhan, mendukung fitur seperti manajemen pengguna, otorisasi, dan integrasi dengan berbagai paket Laravel lainnya. Dengan pendekatan modular, Filament membantu mempercepat pengembangan backend dengan tampilan yang modern dan mudah digunakan.

Selain kemudahan penggunaannya, Filament juga didukung oleh ekosistem plugin yang terus berkembang, memungkinkan pengembang untuk memperluas fungsionalitas panel admin tanpa banyak usaha. Filament mendukung pembuatan CRUD (Create, Read, Update, Delete) dengan sangat efisien, dan memiliki komponen visual yang responsif serta dapat diintegrasikan dengan Tailwind CSS. Dengan dokumentasi yang lengkap dan komunitas yang aktif, Filament menjadi pilihan populer bagi pengembang yang ingin membangun dashboard admin yang powerful dan scalable di atas framework Laravel. Kombinasi kemudahan, fleksibilitas, dan estetika menjadikan Filament solusi ideal untuk berbagai proyek Laravel.

Jika kalian tertarik untuk mengeksplorasi lebih lanjut dan mendalami penggunaan Filament di Laravel, sangat disarankan untuk mengunjungi dokumentasi resminya. Dokumentasi Filament sangat lengkap dan mudah diikuti, memberikan panduan mulai dari instalasi dasar hingga konfigurasi lanjutan. Dengan berbagai contoh kasus dan penjelasan mendetail, kalian bisa memaksimalkan potensi Filament dalam membangun panel admin yang sesuai dengan kebutuhan proyek kalian. Jangan ragu untuk mengaksesnya di dokumentasi filament. Oke kita akan masuk kedalam pembahasan instalasinya.

Instalation

Instalasi Laravel sebelum memakai filament, tentunya temen-temen harus install terlebih dahulu laravelnya, kalian bisa instal melalui terminal menggunakan composer dengan cara sebagai berikut:

composer create-project laravel/laravel nama-project

Saat kalian menjalankan code tersebut diterminal kalian, maka otomatis laravel akan terinstal dengan versi 11 atau versi yang paling terbaru. Karena memang di episode kali ini kita akan menggunakan laravel 11 sebagai framework PHP nya. Lalu, saat penginstalan sudah berhasil, kalian setting terlebih dahulu database pada file .env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=belajar-filament
DB_USERNAME=root
DB_PASSWORD=

Laravel 11, akan mensetting DB_CONNECTION=sqlite, dan kita cukup ubah menjadi MySQL karena pada episode ini kita akan menggunakan MySQL sebagai DMBS nya.

Instalasi Filament V3

Kita sudah menginstall Laravel 11, selanjutnya kita akan menginstall library filament kedalam project laravel kita. Temen-temen bisa buka dokumentasi filament nya untuk penjelasan lebih lengkap, disini saya akan menjelaskan secara simple dan to the point hehe. oke, langkah pertama kita buka terminal kita, jika kalian menggunakan Vscode sebagai text editor nya, kalian cukup tekan shortcut CTRL + ` maka akan terbuka terminalnya. lalu kalian instal library filament dengan memasukkan code berikut kedalam terminal:

composer require filament/filament

Jika proses instalasi filament sudah berhasil, kita perlu Migrate terlebih dahulu migration yang sudah ada pada database/migrations dengan cara memasukkan code berikut ke terminal kalian :

php artisan migrate

Jika sudah, langkah selanjutnya kalian bisa menambahkan Filament Panel Builder. apa itu? Filament Panel Builder adalah salah satu fitur inti dari Filament yang memungkinkan pengembang untuk dengan mudah membangun panel admin atau dashboard di aplikasi Laravel mereka. Dengan Panel Builder, pengembang dapat membuat antarmuka pengguna yang kaya fitur tanpa perlu menulis banyak kode manual. Fitur ini mempermudah pembuatan halaman administrasi, mengelola sumber daya seperti model database, serta menyediakan komponen siap pakai untuk CRUD (Create, Read, Update, Delete). Kalian bisa masukkan code berikut kedalam terminal :

php artisan filament:install --panels

Saat kalian menjalankan code tersebut didalam terminal kalian, maka akan muncul 1 bar form di terminal untuk memasukkan name panel yang anda inginkan, disini kita akan mengisi form tersebut dengan isi "admin" lalu tekan enter. Maka filament akan menginstal panel yang kita request.

Saat ini kita sudah mempuyai panel dengan nama "admin", selanjutnya kita perlu membuat akun login nya terlebih dahulu untuk kita pakai sebagai akun admin. Dan biasanya, jika kita tidak menggunakan filament, kita harus membuat Seeder untuk memasukkan data akun user yang sudah di isi kedalam database kita, iya bukan? Tapi, fillament mempermudah itu semua tanpa harus membuat seeder terlebih dahulu. Caranya sangat mudah, kalian cukup masukkan code berikut kedalam terminal kalian :

php artisan make:filament-user

Saat code tersebut dijalankan, maka akan ada 3 bar form yang harus diisi, yaitu name, email dan password. Kalian cukup isi semua formnya sesuai yang kalian inginkan, nantinya akun tersebut akan kalian gunakan sebagai akun login masuk ke dalam dashboard admin.

Jika sudah selesai menambahkan akun loginnya, coba kalian buka project laravel kalian dengan cara ketik code berikut di terminal kalian php artisan serve. lalu buka browser, dan masukkan link berikut http://127.0.0.1:8000/admin maka akan muncul halaman login admin dari filament seperti ini.

Masukkan email dan password yang sudah kalian buat sebelumnya, lalu tekan login. Maka jika email dan password tersebut benar, kalian akan di alihkan ke halaman dashboard admin filament seperti ini.

Kesimpulan

Sebagai kesimpulan, setelah mengikuti langkah-langkah instalasi Filament, instalasi panel, dan penambahan akun user, kita telah berhasil menyiapkan sebuah dashboard admin yang fungsional di aplikasi Laravel. Filament menawarkan solusi yang sangat efisien dan mudah dipahami untuk membangun antarmuka administrasi yang elegan dan modern. Dengan panel yang dapat diatur sesuai kebutuhan dan fitur pengelolaan pengguna yang kuat, Filament menjadi pilihan tepat untuk mempercepat pengembangan proyek Laravel kalian. Semoga tutorial ini membantu, dan jangan ragu untuk mengeksplorasi lebih jauh fitur-fitur canggih yang ditawarkan oleh Filament!

Mungkin untuk EPS 1 - Instalasi Filament kali ini cukup sekian, kita akan melanjutkan sesi pembelajaran berikutnya dipertemuan Episode 2 - Setting up the database, models and resource. Thanks guys, See You!