Cara Install Filament di Laravel: Panduan Lengkap untuk Pemula

Filament merupakan framework antarmuka berbasis Laravel yang dapat digunakan untuk membuat admin panel, dashboard, form, tabel, dan fitur CRUD dengan lebih cepat.

Dengan Filament, pengembang tidak perlu membuat seluruh tampilan dashboard dari awal. Banyak komponen seperti form input, tabel data, filter, pencarian, notifikasi, dan halaman pengelolaan data sudah tersedia dan dapat dikonfigurasi menggunakan PHP.

Pada panduan ini, kita akan mempelajari cara memasang Filament 5 pada project Laravel sampai dashboard admin berhasil dibuka.

Apa Itu Filament?

Filament adalah framework Server-Driven UI yang dibangun untuk Laravel. Filament menggunakan beberapa teknologi utama, yaitu:

• Laravel
• Livewire
• Alpine.js
• Tailwind CSS

Filament sangat cocok digunakan untuk membuat:

• Admin panel
• Dashboard aplikasi
• Sistem pengelolaan pengguna
• Sistem pengelolaan produk
• Sistem artikel atau blog
• Aplikasi inventaris
• Sistem laporan
• CRUD data
• Aplikasi internal perusahaan

Salah satu keunggulan Filament adalah proses pembuatan halaman pengelolaan data dapat dilakukan dengan cepat tanpa harus menulis banyak kode frontend.

Persyaratan Filament 5

Sebelum melakukan instalasi, pastikan perangkat dan project Laravel memenuhi persyaratan berikut:

• PHP versi 8.2 atau lebih baru
• Laravel versi 11.28 atau lebih baru
• Composer
• Database seperti MySQL, MariaDB, PostgreSQL, atau SQLite
• Node.js dan NPM apabila diperlukan untuk pengelolaan aset frontend
• Tailwind CSS versi 4.1 atau lebih baru

Untuk melihat versi PHP yang digunakan, jalankan:

php -v

Untuk melihat versi Composer, jalankan:

composer --version

Untuk melihat versi Laravel pada project, jalankan:

php artisan --version

Pastikan semua perintah tersebut dapat dijalankan tanpa menampilkan pesan error.

Langkah 1: Membuat Project Laravel

Apabila Anda belum mempunyai project Laravel, buat project baru menggunakan Composer:

composer create-project laravel/laravel belajar-filament

Setelah proses pembuatan selesai, masuk ke folder project:

cd belajar-filament

Apabila project Laravel sudah tersedia, Anda cukup membuka terminal pada direktori utama project tersebut.

Direktori utama Laravel biasanya memiliki file dan folder seperti berikut:

app
bootstrap
config
database
public
resources
routes
storage
vendor
artisan
composer.json
.env

Langkah 2: Mengatur Database Laravel

Buka file .env, kemudian sesuaikan konfigurasi database.

Contoh konfigurasi MySQL:

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

Pastikan database dengan nama belajar_filament sudah dibuat di MySQL.

Setelah konfigurasi selesai, jalankan migrasi:

php artisan migrate

Apabila proses berhasil, Laravel akan membuat tabel-tabel bawaan di dalam database.

Langkah 3: Memasang Filament

Jalankan perintah berikut pada direktori project Laravel:

composer require filament/filament:"^5.0"

Setelah package berhasil dipasang, jalankan installer panel Filament:

php artisan filament:install --panels

Perintah tersebut akan membuat panel admin beserta file konfigurasi:

app/Providers/Filament/AdminPanelProvider.php

File AdminPanelProvider.php digunakan untuk mengatur panel Filament, seperti:

• Alamat panel admin
• Nama panel
• Warna utama
• Logo
• Halaman login
• Resource
• Widget
• Middleware
• Navigasi dashboard

Catatan untuk Windows PowerShell

Pada Windows PowerShell, karakter ^ terkadang tidak terbaca dengan benar sebagai bagian dari versi package.

Apabila perintah instalasi sebelumnya mengalami masalah, gunakan:

composer require filament/filament:"~5.0"

Kemudian lanjutkan dengan:

php artisan filament:install --panels

Langkah 4: Membuat Akun Administrator

Setelah Filament berhasil dipasang, buat akun administrator menggunakan perintah berikut:

php artisan make:filament-user

Terminal akan meminta beberapa informasi, seperti:

Name:
Email address:
Password:

Contoh data:

Name: Administrator
Email address: admin@example.com
Password: password-rahasia

Gunakan alamat email dan password yang aman, terutama ketika aplikasi akan dipasang pada server produksi.

Password yang diketik di terminal mungkin tidak terlihat. Hal tersebut normal dan merupakan fitur keamanan terminal.

Langkah 5: Menjalankan Project Laravel

Jalankan development server Laravel:

php artisan serve

Apabila berhasil, terminal akan menampilkan alamat seperti:

http://127.0.0.1:8000

Buka halaman panel admin melalui browser:

http://127.0.0.1:8000/admin

Masukkan email dan password akun administrator yang sebelumnya telah dibuat.

Setelah login berhasil, dashboard Filament akan ditampilkan.

Langkah 6: Mengubah Nama Panel

Konfigurasi panel dapat ditemukan pada file:

app/Providers/Filament/AdminPanelProvider.php

Cari bagian konfigurasi panel yang kurang lebih berbentuk seperti berikut:

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        ->login();
}

Tambahkan brandName() untuk mengubah nama aplikasi:

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        ->brandName('Dashboard Website')
        ->login();
}

Setelah disimpan, nama tersebut akan ditampilkan pada halaman panel Filament.

Langkah 7: Mengubah Alamat Panel Admin

Secara default, panel dapat diakses melalui alamat:

/admin

Untuk mengganti alamat tersebut, ubah bagian berikut:

->path('admin')

Contohnya menjadi:

->path('dashboard')

Setelah diubah, panel dapat diakses melalui:

http://127.0.0.1:8000/dashboard

Gunakan alamat yang mudah diingat oleh administrator, tetapi tidak terlalu mudah ditebak oleh pengguna umum.

Langkah 8: Membuat Resource Pertama

Resource digunakan untuk membuat halaman CRUD, yaitu halaman untuk menambahkan, menampilkan, mengubah, dan menghapus data.

Sebagai contoh, buat model Product beserta migration:

php artisan make:model Product -m

Buka file migration produk di folder:

database/migrations

Tambahkan beberapa kolom:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->decimal('price', 15, 2);
    $table->text('description')->nullable();
    $table->timestamps();
});

Jalankan migration:

php artisan migrate

Setelah itu, buat Filament Resource:

php artisan make:filament-resource Product

Filament akan membuat halaman pengelolaan produk yang dapat ditampilkan pada navigasi dashboard.

Melalui resource tersebut, Anda dapat mengatur:

• Kolom tabel
• Form tambah data
• Form edit data
• Pencarian
• Filter
• Pengurutan
• Aksi hapus
• Bulk action
• Validasi input

Mengatasi Panel Filament Tidak Bisa Dibuka

Apabila halaman /admin tidak dapat dibuka, lakukan beberapa pemeriksaan berikut.

1. Pastikan Server Laravel Berjalan

Jalankan:

php artisan serve

Kemudian buka kembali:

http://127.0.0.1:8000/admin

2. Bersihkan Cache Laravel

Jalankan:

php artisan optimize:clear

Setelah itu, restart server Laravel.

3. Periksa Panel Provider

Pastikan file berikut tersedia:

app/Providers/Filament/AdminPanelProvider.php

Periksa juga apakah provider tersebut terdaftar di:

bootstrap/providers.php

Contohnya:

return [
    App\Providers\AppServiceProvider::class,
    App\Providers\Filament\AdminPanelProvider::class,
];

4. Jalankan Migrasi Database

Apabila muncul error mengenai tabel yang tidak ditemukan, jalankan:

php artisan migrate

5. Periksa Konfigurasi File .env

Pastikan nama database, username, password, host, dan port database sudah benar.

Setelah mengubah .env, jalankan:

php artisan config:clear

Perintah Penting Filament

Berikut beberapa perintah yang sering digunakan:

Membuat akun pengguna Filament:

php artisan make:filament-user

Membuat resource:

php artisan make:filament-resource Product

Membuat halaman khusus:

php artisan make:filament-page Settings

Membuat widget:

php artisan make:filament-widget StatistikPenjualan

Membuat panel tambahan:

php artisan make:filament-panel customer

Membersihkan cache Laravel:

php artisan optimize:clear

Menjalankan server lokal:

php artisan serve

Kesimpulan

Filament membantu proses pembuatan admin panel Laravel menjadi lebih cepat dan terstruktur. Hanya dengan memasang package, menjalankan installer panel, dan membuat akun administrator, sebuah dashboard admin sudah dapat digunakan.

Urutan singkat instalasi Filament adalah:

1. Pastikan versi PHP dan Laravel memenuhi persyaratan.
2. Atur koneksi database melalui file .env.
3. Jalankan migrasi Laravel.
4. Pasang package Filament melalui Composer.
5. Jalankan installer panel.
6. Buat akun administrator.
7. Jalankan server Laravel.
8. Buka halaman /admin.
9. Mulai membuat resource sesuai kebutuhan aplikasi.

Setelah instalasi berhasil, Anda dapat melanjutkan pengembangan dengan membuat resource untuk artikel, produk, pengguna, transaksi, kategori, atau data lainnya.