Membuat Project menggunakan FilamentPHP v3.x

Pendahuluan

FilamentPHP adalah 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

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

🛠️ 1. Membuat Project Laravel Baru

Mari mulai dengan membuat proyek Laravel dari awal. Pastikan Composer sudah terpasang dengan benar.

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

Kemudian, jalankan server development Laravel:

php artisan serve

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

Selain itu, Anda juga dapat mengatur file .env untuk menyesuaikan konfigurasi database agar proyek 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

🔌 2. Instalasi FilamentPHP

Jika Anda sedang meng-upgrade dari Filament v2, silakan tinjau panduan upgrade terlebih dahulu.

Untuk menginstal Filament Panel Builder, jalankan perintah berikut dalam direktori proyek Laravel Anda:

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 Anda mengalami error saat mengakses panel admin, pastikan bahwa service provider telah terdaftar di bootstrap/providers.php (untuk Laravel 11 ke atas) atau config/app.php (untuk Laravel 10 ke bawah). Jika tidak, tambahkan secara manual.

Setelah itu, buat pengguna pertama untuk mengakses panel admin:

php artisan make:filament-user

Ikuti instruksi untuk membuat akun admin. Pastikan Anda mengingat kredensial yang digunakan.

🎨 3. Konfigurasi dan Akses Panel Admin

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

Jika ingin mengubah path default admin, ubah dalam method panel() di AdminPanelProvider:

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

Setelah itu, 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 yang telah dibuat sebelumnya

Jika berhasil login, Anda akan melihat dashboard Filament yang sudah siap digunakan! 🎉

🏗️ 4. Membuat Resource CRUD

Filament memungkinkan kita membuat CRUD dengan mudah. Contoh: membuat panel manajemen Product.

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

Setelah itu, edit file app/Filament/Resources/ProductResource.php untuk menyesuaikan tampilan dan fungsionalitas. Secara default, Filament akan membuat form dan tabel sederhana yang siap digunakan.

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'),
    ]);
}

Terakhir, migrasikan database dan jalankan ulang server:

php artisan migrate
php artisan serve

Sekarang, coba buka /dashboard/products di browser. Anda akan melihat interface CRUD untuk Product yang sudah berfungsi! 🚀

🎨 5. Menyesuaikan Tampilan Filament

Filament menyediakan berbagai opsi kustomisasi tampilan melalui theme.css. Anda dapat menambahkan file CSS khusus di dalam resources/css/app.css:

:root {
    --primary-color: [[4CAF50]];
}

Kemudian, pastikan file tersebut dimuat dalam Filament dengan menyesuaikan AdminPanelProvider:

public function panel(Panel $panel): Panel
{
    return $panel
        ->theme(mix('css/app.css'));
}

Jalankan ulang server untuk melihat perubahan.