Membuat Project menggunakan FilamentPHP v3.x

FilamentPHP merupakan admin panel berbasis Laravel yang memudahkan pembuatan aplikasi untuk user back-office (seperti admin, manager, operator, dll) dengan lebih cepat, terstruktur, dan elegan. Dengan FilamentPHP, developer tidak perlu membuat dashboard administrasi dari nol.

☐ Persiapan: pastikan PHP, Composer, dan MySQL sudah terinstall
☐ Membuat project Laravel baru, karena FilamentPHP berbasis Laravel
☐ Instalasi FilamentPHP:
☐ Mengkonfigurasi FilamentPHP
☐ Latihan membuat resource CRUD

1. Persiapan

Sebelum memulai, pastikan kamu sudah install:

• PHP ≥ 8.1
• Composer
• Database (kita akan pakai MySQL, walaupun PostgreSQL atau SQLite juga bisa)

Untuk mengecek apakah sistem kamu sudah memenuhi prasyarat:

# Cek versi PHP
php -v

# Cek versi Composer
composer -V

# Cek versi Node.js dan NPM
node -v
npm -v

2. Membuat Project Laravel Baru

Buat project Laravel baru.

composer create-project laravel/laravel my-filament-app
cd my-filament-app

Edit file .env untuk mengatur konfigurasi database agar project berjalan lancar:

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

Setelah mengedit .env, jalankan migrasi database agar tabel-tabel default Laravel terbuat:

php artisan migrate

Kemudian, jalankan server development Laravel:

php artisan serve

Akses http://127.0.0.1:8000 untuk memastikan Laravel sudah berjalan dengan benar.

3. Instalasi FilamentPHP

Jalankan perintah berikut dalam direktori project Laravel kamu:

composer require filament/filament:"^3.2" -W

Kemudian, jalankan perintah berikut untuk menginstal Filament dan membuat panel admin:

php artisan filament:install --panels

Perintah ini akan membuat dan mendaftarkan service provider baru bernama app/Providers/Filament/AdminPanelProvider.php.

Jika kamu mengalami error saat mengakses panel admin, pastikan bahwa service provider sudah terdaftar di bootstrap/providers.php (untuk Laravel 11 ke atas) atau di config/app.php (untuk Laravel 10 ke bawah). Jika belum, tambahkan secara manual.

Setelah itu, buat user untuk mengakses panel admin:

php artisan make:filament-user

Ikuti instruksi untuk membuat akun admin. Pastikan kamu ingat kredensial yang dibuat.

4. Konfigurasi Panel Admin

Secara default, Filament menyediakan panel admin yang dapat dikonfigurasi melalui PanelProvider yang terletak di app/Providers/Filament/AdminPanelProvider.php.

Jika ingin mengubah konfigurasi, misalnya merubah path default admin menjadi (misalnya) dashboard, lakukan perubahan dalam method panel() di AdminPanelProvider:

public function panel(Panel $panel): Panel
{
    return $panel
        ->path('dashboard');
}

Banyak konfigurasi lainnya yang bisa diatur dalam metode panel() seperti di atas.

Setelah merubah path, panel admin bisa diakses melalui http://127.0.0.1:8000/dashboard.

1. Jalankan server jika belum aktif: php artisan serve
2. Buka browser dan kunjungi http://127.0.0.1:8000/dashboard
3. Masuk dengan akun user yang sudah dibuat

Setelah berhasil login, kamu akan melihat dashboard Filament yang siap dikembangkan!

5. Membuat Resource CRUD

Filament memungkinkan kita membuat resource CRUD dengan lebih mudah. Misalnya: untuk membuat panel manajemen untuk Product.

php artisan make:filament-resource Product --panel=AdminPanel

Secara default, Filament akan membuat form dan tabel sederhana yang siap digunakan.
Nantinya kamu bisa edit file app/Filament/Resources/ProductResource.php sesuai keperluan untuk menyesuaikan tampilan dan fungsionalitas CRUD.

Untuk menambahkan kolom baru di form, modifikasi metode form():

public static function form(Form $form): Form
{
    return $form->schema([
        TextInput::make('name')
            ->required()
            ->label('Nama Produk'),
        TextInput::make('price')
            ->numeric()
            ->required()
            ->label('Harga'),
    ]);
}

Kemudian migrasikan database dan jalankan ulang server:

php artisan migrate
php artisan serve

Setelah selesai, coba akses /dashboard/products di browser. Seharusnya, kamu akan melihat tampilan panel manajemen untuk Product sederhana yang sudah berfungsi!