Filament UI Framework: Panduan Membuat Panel Admin Laravel

Pakai Filament itu bikin hidup kamu pas bikin panel admin di Laravel jadi jauh lebih gampang. Kamu nggak perlu lagi capek-capek bikin form, tabel, atau aksi dari nol.

Intinya, kamu tetap bisa pakai PHP biasa, tapi hasilnya langsung jadi antarmuka yang keren dan fungsional. Karena alurnya tetap kerasa "Laravel banget", proses bikin aplikasi kamu jadi jauh lebih cepet deh!

Persiapan membangun aplikasi dengan Filament Framework

Filament Framework adalah framework UI open-source untuk Laravel. Filament memakai pendekatan Server-Driven UI atau SDUI, sehingga form, tabel, aksi, halaman, dan komponen lain dapat didefinisikan melalui class serta objek konfigurasi PHP.

Filament Framework adalah framework Server-Driven UI untuk Laravel yang membantu developer membuat panel admin dan aplikasi berbasis form menggunakan PHP, Livewire, Alpine.js, dan Tailwind CSS.

Pada pendekatan ini, server mengendalikan struktur dan perilaku utama antarmuka. Livewire menangani interaksi reaktif, Alpine.js membantu perilaku ringan di browser, sedangkan Tailwind CSS menjadi bagian dari sistem desainnya.

Filament bukan CMS siap pakai. Framework ini memberi komponen untuk membangun aplikasi sesuai model data dan aturan bisnis milikmu. Produk akhirnya bisa berupa panel admin, portal pelanggan, dashboard internal, CRM, sistem inventaris, atau aplikasi operasional lain.

Pastikan kamu tidak tertukar dengan Filament UI di domain filament.ai. Produk tersebut adalah frontend framework dan style guide lain. Pembahasan ini khusus untuk FilamentPHP, proyek Laravel yang tersedia melalui dokumentasi resmi Filament.

Kebutuhan dasar

Siapkan lingkungan pengembangan Laravel yang sehat sebelum memasang Filament:

• PHP sesuai persyaratan versi Filament yang dipilih

• Composer

• Laravel

• Database seperti SQLite, MySQL, MariaDB, atau PostgreSQL

• Node.js dan npm jika proyek membutuhkan kompilasi aset

• Git

• Terminal

• Editor kode

• Pemahaman dasar Eloquent, migration, validation, dan authorization

Gunakan versi PHP serta Laravel yang didukung oleh dokumentasi pada saat pemasangan. Jangan menyalin perintah dari tutorial lama tanpa memeriksa versi karena struktur package dan API Filament dapat berubah.

Jalankan pemeriksaan awal:

php -v
composer --version
php artisan --version
git --version

Pastikan aplikasi Laravel berjalan sebelum Filament ditambahkan:

php artisan serve

Buka alamat lokal yang ditampilkan oleh terminal. Perbaiki error Laravel, koneksi database, atau permission terlebih dahulu agar masalah tersebut tidak keliru dianggap sebagai masalah Filament.

Pilih proyek latihan yang kecil

Contoh dalam panduan ini memakai sistem inventaris sederhana dengan entitas Product. Setiap produk memiliki nama, SKU, harga, stok, status aktif, dan deskripsi.

Struktur kecil ini cukup untuk mempelajari:

• Migration

• Model Eloquent

• Resource Filament

• Form

• Table

• Search dan filter

• Action

• Validation

• Authorization

• Widget dashboard

• Pengujian

Hindari memulai dari aplikasi produksi yang memiliki puluhan model. Proyek latihan membuat hubungan antara database, model, dan antarmuka Filament lebih mudah dipahami.

Kenali komponen utama Filament

Filament terdiri atas beberapa package yang dapat dipakai bersama atau terpisah:

Kamu tidak perlu menguasai semuanya sebelum mulai. Fokus pertama adalah hubungan antara model Eloquent, resource, form, dan table.

Step 1: Buat proyek Laravel dan siapkan database

Mulai dengan proyek Laravel baru agar dependensi mudah dilacak. Gunakan perintah pembuatan proyek yang direkomendasikan oleh versi Laravel saat ini.

composer create-project laravel/laravel inventory-app
cd inventory-app

Buat repository Git sejak awal:

git init
git add .
git commit -m "Membuat proyek Laravel"

Untuk latihan lokal, SQLite dapat mengurangi konfigurasi. Buat file database jika belum tersedia:

touch database/database.sqlite

Pada Windows PowerShell, gunakan:

New-Item database/database.sqlite -ItemType File

Atur .env:

DB_CONNECTION=sqlite

Pada instalasi Laravel tertentu, konfigurasi SQLite sudah tersedia secara default. Pastikan nilai DB_DATABASE tidak menunjuk ke lokasi yang salah.

Jalankan migration bawaan:

php artisan migrate

Jika memakai MySQL atau PostgreSQL, isi host, port, nama database, nama pengguna, dan kata sandi di .env. Jangan memasukkan kredensial produksi ke proyek latihan.

Periksa koneksi dengan:

php artisan migrate:status

Buat commit setelah database dasar siap:

git add .
git commit -m "Menyiapkan database aplikasi"

Database bukan sekadar tempat penyimpanan. Struktur kolom, index, constraint, dan relation akan menentukan bagaimana resource Filament bekerja.

Step 2: Pasang Filament dan buat panel admin

Periksa versi stabil pada dokumentasi resmi sebelum memasang package. Dokumentasi Filament saat ini menampilkan jalur versi yang aktif, sementara banyak artikel lama masih menggunakan sintaks versi 3 atau 4.

Contoh pola pemasangan:

composer require filament/filament:"^5.0" -W
php artisan filament:install --panels

Jika dokumentasi resmi menunjukkan versi berbeda, gunakan versi tersebut. Flag -W mengizinkan Composer memperbarui dependensi terkait ketika diperlukan.

Perintah instalasi panel biasanya membuat provider seperti:

app/Providers/Filament/AdminPanelProvider.php

Provider tersebut mengatur panel, termasuk:

• ID panel

• Path

• Warna

• Autentikasi

• Navigasi

• Resource discovery

• Page discovery

• Widget discovery

• Middleware

Buka provider dan kenali konfigurasi dasarnya. Bentuknya dapat berbeda antarversi, tetapi tujuan utamanya tetap sama.

Contoh bagian penting:

return $panel
    ->default()
    ->id('admin')
    ->path('admin')
    ->login();

Nilai path('admin') berarti panel dapat diakses melalui /admin. Jangan menganggap path yang sulit ditebak sebagai pengganti authorization.

Buat pengguna admin pertama:

php artisan make:filament-user

Isi nama, alamat email, dan kata sandi ketika diminta. Jalankan server:

php artisan serve

Buka:

http://127.0.0.1:8000/admin

Masuk dengan akun yang baru dibuat. Jika halaman login tampil dan dashboard dapat dibuka, panel dasar sudah bekerja.

Pahami Server-Driven UI

Pada aplikasi frontend tradisional, developer sering membuat API, state management, form, validasi, dan komponen JavaScript secara terpisah. Filament memusatkan banyak kebutuhan tersebut pada konfigurasi PHP.

Misalnya, sebuah input nama dapat memiliki label, aturan wajib, panjang maksimum, dan bantuan visual dalam satu definisi:

TextInput::make('name')
    ->label('Nama produk')
    ->required()
    ->maxLength(255);

Livewire menghubungkan konfigurasi tersebut dengan interaksi browser. Kamu tetap perlu memahami HTTP, database, keamanan, dan lifecycle Livewire, tetapi tidak harus menulis JavaScript untuk setiap interaksi umum.

Simpan hasil instalasi:

git add .
git commit -m "Memasang Filament dan panel admin"

Step 3: Buat model, migration, dan data uji

Buat model Product beserta migration dan factory:

php artisan make:model Product -mf

Perintah tersebut menghasilkan file seperti:

app/Models/Product.php
database/factories/ProductFactory.php
database/migrations/..._create_products_table.php

Buka migration produk:

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

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('sku')->unique();
            $table->text('description')->nullable();
            $table->decimal('price', 12, 2);
            $table->unsignedInteger('stock')->default(0);
            $table->boolean('is_active')->default(true);
            $table->timestamps();

            $table->index(['is_active', 'created_at']);
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

Jalankan migration:

php artisan migrate

Atur model agar data dari form dapat disimpan secara aman:

namespace App\Models;

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

class Product extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
        'sku',
        'description',
        'price',
        'stock',
        'is_active',
    ];

    protected function casts(): array
    {
        return [
            'price' => 'decimal:2',
            'stock' => 'integer',
            'is_active' => 'boolean',
        ];
    }
}

$fillable bukan pengganti authorization. Properti ini membantu mengendalikan mass assignment, sedangkan izin pengguna tetap perlu ditentukan melalui policy.

Buat factory agar table tidak diuji dengan database kosong:

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

class ProductFactory extends Factory
{
    public function definition(): array
    {
        return [
            'name' => fake()->words(3, true),
            'sku' => fake()->unique()->bothify('SKU-####-??'),
            'description' => fake()->optional()->paragraph(),
            'price' => fake()->randomFloat(2, 10, 5000),
            'stock' => fake()->numberBetween(0, 250),
            'is_active' => fake()->boolean(85),
        ];
    }
}

Isi data melalui Tinker:

php artisan tinker

\App\Models\Product::factory()->count(50)->create();

Data uji membantu memeriksa pagination, pencarian, sorting, filter, dan tampilan nilai kosong. Tambahkan variasi stok nol, deskripsi kosong, nama panjang, dan produk nonaktif.

Step 4: Bangun resource CRUD pertama

Resource menghubungkan model Eloquent dengan halaman pengelolaan Filament. Buat resource Product menggunakan generator versi yang terpasang:

php artisan make:filament-resource Product

Beberapa versi mendukung opsi untuk menghasilkan konfigurasi berdasarkan kolom database:

php artisan make:filament-resource Product --generate

Tinjau file yang dibuat. Jangan menerima hasil generator tanpa membaca kodenya.

Struktur resource dapat terlihat seperti:

app/Filament/Resources/Products/ProductResource.php
app/Filament/Resources/Products/Pages/CreateProduct.php
app/Filament/Resources/Products/Pages/EditProduct.php
app/Filament/Resources/Products/Pages/ListProducts.php

Pada versi lain, file dapat berada langsung di app/Filament/Resources. Ikuti struktur generator karena Filament dapat mengubah organisasi file antarversi.

Resource biasanya menentukan:

• Model yang dikelola

• Label navigasi

• Ikon

• Form

• Table

• Relation manager

• Halaman resource

• Query dasar

• Aturan akses

Pastikan model mengarah ke Product:

protected static ?string $model = Product::class;

Tambahkan pengelompokan navigasi jika aplikasi memiliki banyak resource:

protected static string|\UnitEnum|null $navigationGroup = 'Inventaris';

Tipe properti dapat berubah antarversi. Jika editor menampilkan error, gunakan signature dari resource yang dibuat generator dan cocokkan dengan repository resmi Filament.

Susun form produk

Definisikan field berdasarkan kebutuhan bisnis, bukan hanya jenis kolom database.

Contoh schema form:

use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;

public static function form(Schema $schema): Schema
{
    return $schema
        ->components([
            Section::make('Informasi produk')
                ->schema([
                    TextInput::make('name')
                        ->label('Nama')
                        ->required()
                        ->maxLength(255),

                    TextInput::make('sku')
                        ->label('SKU')
                        ->required()
                        ->maxLength(100)
                        ->unique(ignoreRecord: true),

                    Textarea::make('description')
                        ->label('Deskripsi')
                        ->rows(5)
                        ->columnSpanFull(),
                ])
                ->columns(2),

            Section::make('Penjualan dan stok')
                ->schema([
                    TextInput::make('price')
                        ->label('Harga')
                        ->required()
                        ->numeric()
                        ->minValue(0)
                        ->prefix('Rp'),

                    TextInput::make('stock')
                        ->label('Stok')
                        ->required()
                        ->integer()
                        ->minValue(0),

                    Toggle::make('is_active')
                        ->label('Aktif')
                        ->default(true),
                ])
                ->columns(2),
        ]);
}

Jika versi Filament memakai method atau namespace berbeda, pertahankan maksud field lalu sesuaikan dengan dokumentasi versi aktif. Jangan mencampur signature resource versi lama dengan package terbaru.

Validasi antarmuka membantu pengguna, tetapi aturan penting sebaiknya tetap dilindungi oleh database dan domain logic. Kolom SKU, misalnya, memiliki unique index agar duplikasi tetap ditolak di luar Filament.

Buka /admin/products, lalu buat dan edit beberapa produk. Periksa pesan validasi, format nilai, serta perilaku ketika SKU duplikat dimasukkan.

Step 5: Buat tabel yang mudah dicari dan dipakai

Tabel Filament mendukung search, sorting, filtering, pagination, action, dan bulk action. Fitur tersebut berguna, tetapi terlalu banyak kolom dapat membuat panel sulit dibaca.

Mulai dengan informasi yang benar-benar membantu keputusan:

use Filament\Actions\BulkActionGroup;
use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Filters\TernaryFilter;
use Filament\Tables\Table;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('name')
                ->label('Nama')
                ->searchable()
                ->sortable()
                ->limit(40),

            TextColumn::make('sku')
                ->label('SKU')
                ->searchable()
                ->copyable(),

            TextColumn::make('price')
                ->label('Harga')
                ->money('IDR')
                ->sortable(),

            TextColumn::make('stock')
                ->label('Stok')
                ->numeric()
                ->sortable(),

            IconColumn::make('is_active')
                ->label('Aktif')
                ->boolean(),

            TextColumn::make('created_at')
                ->label('Dibuat')
                ->dateTime('d M Y H:i')
                ->sortable()
                ->toggleable(isToggledHiddenByDefault: true),
        ])
        ->filters([
            TernaryFilter::make('is_active')
                ->label('Status aktif'),
        ])
        ->recordActions([
            EditAction::make(),
        ])
        ->toolbarActions([
            BulkActionGroup::make([
                DeleteBulkAction::make(),
            ]),
        ]);
}

Nama method untuk record action atau bulk action dapat berbeda menurut versi. Gunakan autocomplete editor dan resource hasil generator sebagai acuan.

Tambahkan filter stok

Filter perlu menjawab kebutuhan nyata. Untuk inventaris, pengguna mungkin ingin melihat produk habis atau stok rendah.

Contoh filter query:

use Filament\Tables\Filters\Filter;
use Illuminate\Database\Eloquent\Builder;

Filter::make('out_of_stock')
    ->label('Stok habis')
    ->query(fn (Builder $query): Builder => $query->where('stock', 0));

Tambahkan filter stok rendah:

Filter::make('low_stock')
    ->label('Stok rendah')
    ->query(
        fn (Builder $query): Builder =>
            $query->whereBetween('stock', [1, 10])
    );

Pastikan filter sering dipakai dan memiliki definisi yang jelas. Istilah “stok rendah” sebaiknya berasal dari aturan bisnis, bukan angka acak yang tersembunyi di resource.

Hindari query N+1

Ketika resource mulai menampilkan relation, setiap baris dapat memicu query tambahan. Gunakan eager loading jika diperlukan.

Misalnya, Product memiliki Category:

public function category()
{
    return $this->belongsTo(Category::class);
}

Kolom relation:

TextColumn::make('category.name')
    ->label('Kategori')
    ->searchable()
    ->sortable();

Pantau jumlah query dan gunakan eager loading sesuai kebutuhan. Jangan memuat semua relation pada setiap halaman jika hanya satu tampilan yang memerlukannya.

Step 6: Tambahkan action dan notifikasi yang aman

Action menggabungkan tombol, modal, form, serta operasi server. Contohnya, admin dapat menonaktifkan produk tanpa membuka halaman edit.

use Filament\Actions\Action;
use Filament\Notifications\Notification;

Action::make('deactivate')
    ->label('Nonaktifkan')
    ->requiresConfirmation()
    ->visible(fn (Product $record): bool => $record->is_active)
    ->action(function (Product $record): void {
        $record->update(['is_active' => false]);

        Notification::make()
            ->title('Produk dinonaktifkan')
            ->success()
            ->send();
    });

Konfirmasi membantu mencegah klik tidak sengaja. Namun, konfirmasi bukan authorization.

Pastikan pengguna memiliki izin:

->authorize(fn (Product $record): bool =>
    auth()->user()->can('update', $record)
)

Signature authorization action dapat berbeda antarversi. Alternatif yang lebih konsisten adalah menggunakan Laravel Policy karena Filament dapat membaca izin model melalui mekanisme Laravel.

Buat policy:

php artisan make:policy ProductPolicy --model=Product

Contoh aturan:

namespace App\Policies;

use App\Models\Product;
use App\Models\User;

class ProductPolicy
{
    public function viewAny(User $user): bool
    {
        return $user->is_admin;
    }

    public function view(User $user, Product $product): bool
    {
        return $user->is_admin;
    }

    public function create(User $user): bool
    {
        return $user->is_admin;
    }

    public function update(User $user, Product $product): bool
    {
        return $user->is_admin;
    }

    public function delete(User $user, Product $product): bool
    {
        return $user->is_admin;
    }

    public function deleteAny(User $user): bool
    {
        return $user->is_admin;
    }
}

Kolom is_admin hanyalah contoh sederhana. Pada aplikasi nyata, gunakan role dan permission yang sesuai kebutuhan.

Bulk action membutuhkan perhatian tambahan karena dapat memengaruhi banyak record. Tampilkan jumlah data, minta konfirmasi, gunakan transaction jika tepat, dan catat operasi penting.

Untuk pekerjaan berat, kirim job ke queue:

Action::make('recalculate')
    ->label('Hitung ulang')
    ->requiresConfirmation()
    ->action(function (Product $record): void {
        RecalculateProductMetrics::dispatch($record->id);
    });

Jangan memproses ribuan record dalam request Livewire. Pengguna dapat mengalami timeout, sementara database tertinggal dalam kondisi setengah selesai.

Step 7: Buat dashboard dan widget yang berguna

Dashboard bukan tempat menampilkan semua angka. Pilih metrik yang membantu pengguna mengambil tindakan.

Untuk inventaris, tiga nilai awal yang berguna adalah:

• Total produk aktif

• Produk dengan stok rendah

• Produk yang kehabisan stok

Buat widget melalui generator:

php artisan make:filament-widget ProductStats

Pilih tipe statistik jika generator menawarkan pilihan. Contoh widget:

namespace App\Filament\Widgets;

use App\Models\Product;
use Filament\Widgets\StatsOverviewWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class ProductStats extends StatsOverviewWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make(
                'Produk aktif',
                Product::query()->where('is_active', true)->count()
            ),

            Stat::make(
                'Stok rendah',
                Product::query()
                    ->whereBetween('stock', [1, 10])
                    ->count()
            )
                ->color('warning'),

            Stat::make(
                'Stok habis',
                Product::query()->where('stock', 0)->count()
            )
                ->color('danger'),
        ];
    }
}

Daftarkan widget melalui mekanisme discovery atau konfigurasi panel yang digunakan versi Filament milikmu. Setelah muncul, periksa query setiap widget.

Statistik dashboard dapat menjadi mahal pada tabel besar. Pertimbangkan:

• Index database

• Cache

• Query teragregasi

• Materialized view

• Pembaruan asinkron

• Rentang tanggal default

• Pembatasan berdasarkan tenant

Contoh cache singkat:

use Illuminate\Support\Facades\Cache;

$count = Cache::remember(
    'dashboard.active_products',
    now()->addMinutes(5),
    fn () => Product::query()
        ->where('is_active', true)
        ->count()
);

Cache menimbulkan data yang sedikit terlambat. Tentukan apakah keterlambatan lima menit dapat diterima oleh pengguna.

Jangan menampilkan data lintas tenant dalam satu query. Jika aplikasi bersifat multi-tenant, scoping harus diterapkan pada model, resource, widget, global search, action, export, dan relation.

Step 8: Uji, optimalkan, dan siapkan produksi

Antarmuka yang terlihat benar belum tentu aman atau stabil. Uji operasi utama sebelum aplikasi dipakai.

Filament menyediakan utilitas pengujian yang dapat dipadukan dengan Pest atau PHPUnit. Detail helper berubah antarversi, jadi gunakan bagian testing pada dokumentasi resmi.

Minimal, uji:

1. Pengguna berizin dapat membuka resource.

2. Pengguna tanpa izin ditolak.

3. Produk dapat dibuat dengan data valid.

4. Data tidak valid menampilkan error.

5. SKU duplikat ditolak.

6. Produk dapat dicari.

7. Filter status bekerja.

8. Produk dapat diedit.

9. Penghapusan mematuhi policy.

10. Action khusus hanya tersedia pada kondisi tepat.

Pengujian model dan database tetap diperlukan. Jangan hanya menguji komponen visual.

Contoh unit aturan stok:

it('does not allow negative stock', function () {
    $product = Product::factory()->make([
        'stock' => -1,
    ]);

    expect($product->stock)->toBeLessThan(0);
});

Contoh tersebut justru menunjukkan bahwa cast model saja tidak mencegah nilai negatif. Perlindungan perlu ditempatkan pada validation, service atau domain rule, dan database bila database mendukung constraint yang sesuai.

Siapkan konfigurasi produksi

Sebelum deployment:

php artisan optimize
php artisan migrate --force
php artisan storage:link

Jalankan queue worker jika aplikasi memakai job. Atur scheduler bila ada proses terjadwal.

Periksa variabel produksi:

APP_ENV=production
APP_DEBUG=false

Jangan menaruh kata sandi, token, atau key di repository. Gunakan secret manager milik platform deployment.

Tambahkan HTTPS, backup database, monitoring error, log terstruktur, dan pembatasan akses panel. Jika panel hanya untuk staf internal, pertimbangkan VPN, identity-aware proxy, atau allowlist jaringan sebagai lapisan tambahan.

Pantau performa Livewire

Server-Driven UI berarti banyak interaksi melibatkan server. Query yang lambat, komponen terlalu besar, dan state berlebihan dapat terasa langsung oleh pengguna.

Periksa:

• Waktu respons Livewire

• Jumlah query

• Ukuran payload

• Pagination

• Eager loading

• Cache

• Index

• Operasi file

• Job sinkron

• Memory usage

Gunakan pagination pada table besar. Jangan memuat ribuan record hanya untuk menyediakan pilihan select.

Untuk relation dengan banyak data, gunakan pencarian dinamis:

Select::make('category_id')
    ->relationship('category', 'name')
    ->searchable()
    ->preload(false);

Sesuaikan method berdasarkan versi. Intinya adalah menghindari pemuatan seluruh dataset tanpa kebutuhan.

Kesalahan umum saat memakai Filament Framework

Mencampur dokumentasi dari versi berbeda

Tutorial lama dapat memakai namespace, signature resource, action, atau struktur folder yang sudah berubah. Kode terlihat masuk akal tetapi gagal karena package yang terpasang memakai API baru.

Perbaikan: pilih versi dokumentasi yang sama dengan composer.lock. Periksa versi melalui:

composer show filament/filament

Gunakan generator dari versi terpasang, lalu edit hasilnya. Hindari menyalin satu resource dari beberapa tutorial yang membahas versi berbeda.

Ketika melakukan upgrade, baca panduan upgrade dan jalankan test. Jangan mengganti constraint Composer lalu menganggap semua plugin tetap kompatibel.

Menganggap Filament otomatis mengamankan panel

Halaman login hanya membuktikan bahwa pengguna memiliki akun. Login tidak menentukan record mana yang boleh dilihat, diedit, dihapus, diekspor, atau diproses.

Perbaikan: gunakan Laravel Policy, scoping query, permission, dan pembatasan tenant. Uji akses dengan beberapa jenis akun.

Periksa semua jalur tindakan:

• Resource

• Relation manager

• Widget

• Global search

• Action

• Bulk action

• Export

• Custom page

• API

• Job queue

Menyembunyikan tombol tidak cukup. Operasi server harus tetap memeriksa izin.

Menaruh seluruh logika bisnis di resource

Closure dalam action terasa praktis untuk operasi kecil. Jika semua aturan bisnis diletakkan di resource, kode sulit dipakai ulang dari API, command, job, atau aplikasi lain.

Perbaikan: pindahkan proses inti ke service, action class, atau domain layer. Resource bertugas menerima input, memanggil proses, dan menampilkan hasil.

Contoh:

Action::make('deactivate')
    ->action(function (Product $record): void {
        app(DeactivateProduct::class)->handle(
            product: $record,
            actor: auth()->user(),
        );
    });

Dengan pola tersebut, proses dapat diuji tanpa membuka komponen Filament. Audit log, event, transaction, dan aturan bisnis juga lebih mudah dipusatkan.

Membuat table terlalu padat

Semua kolom database tidak harus tampil pada daftar. Table dengan banyak kolom menjadi sulit dibaca, terutama pada layar kecil.

Perbaikan: tampilkan identitas record, status, nilai utama, dan action yang sering dipakai. Sembunyikan detail lain melalui kolom opsional, halaman view, infolist, atau modal.

Gunakan label yang dipahami pengguna. Nama kolom internal seperti is_active, tenant_id, atau processed_at tidak selalu cocok ditampilkan apa adanya.

Hindari terlalu banyak badge dan warna. Warna sebaiknya membantu membedakan status, bukan sekadar menghias.

Mengabaikan performa relation dan filter

Kolom relation, filter, widget, serta select dapat menghasilkan query besar. Masalah sering tidak terlihat ketika database hanya berisi sepuluh record.

Perbaikan: isi database uji dengan volume yang mendekati penggunaan nyata. Pantau query, tambahkan index, gunakan eager loading, dan hindari preload pada pilihan yang sangat besar.

Uji table dengan:

• Sepuluh record

• Seribu record

• Seratus ribu record

• Relation kosong

• Relation dalam jumlah besar

• Nama panjang

• Nilai null

• Pengguna dari tenant berbeda

Jangan mengoptimalkan berdasarkan dugaan. Ukur query dan waktu respons sebelum serta sesudah perubahan.

Memasang plugin tanpa meninjau kualitasnya

Ekosistem Filament memiliki banyak plugin komunitas. Plugin dapat mempercepat pekerjaan, tetapi kualitas, keamanan, dukungan versi, dan pemeliharaannya berbeda.

Perbaikan: periksa source code, lisensi, release terakhir, issue, dependensi, dan kompatibilitas. Uji plugin pada branch terpisah.

Tanyakan:

• Apakah plugin mendukung versi Filament saat ini?

• Apakah package masih dirawat?

• Apakah migration dapat dibatalkan?

• Apakah plugin mengakses file atau jaringan?

• Apakah izin pengguna diperiksa?

• Apakah ada test?

• Bisakah fitur dibuat sederhana tanpa dependensi baru?

Hapus plugin yang tidak lagi dipakai. Setiap dependensi menambah permukaan upgrade dan keamanan.

Mengandalkan validasi form saja

Data dapat masuk melalui seeder, API, command, import, job, atau query langsung. Validasi pada komponen Filament tidak melindungi semua jalur.

Perbaikan: gunakan beberapa lapisan sesuai risiko:

• Validation pada form

• Form Request untuk endpoint

• Domain rule

• Cast model

• Policy

• Unique index

• Foreign key

• Check constraint

• Transaction

Aturan penting seperti SKU unik perlu dilindungi database. Pesan validasi tetap diperlukan agar pengguna mendapat respons yang jelas sebelum constraint gagal.

Menjalankan pekerjaan berat dalam action sinkron

Import besar, pembuatan laporan, sinkronisasi API, dan pengolahan gambar dapat melebihi waktu request. Pengguna mungkin mengklik ulang karena tidak melihat kemajuan.

Perbaikan: validasi input, simpan permintaan pekerjaan, lalu kirim job ke queue. Tampilkan notifikasi ketika proses selesai.

Pastikan job aman dijalankan ulang. Gunakan idempotency, lock, atau status proses agar duplikasi tidak merusak data.

Catat siapa yang memulai pekerjaan, kapan proses dimulai, dan apa hasilnya. Operasi penting harus dapat diaudit.

Mengubah tema sebelum alur utama stabil

Filament menyediakan tampilan yang konsisten dan dapat disesuaikan. Mengganti banyak CSS atau view terlalu awal membuat upgrade lebih sulit.

Perbaikan: selesaikan model, permission, form, table, dan alur kerja terlebih dahulu. Setelah kebutuhan visual jelas, buat theme tipis dengan semantic class atau token yang didukung.

Hindari menyalin seluruh view package hanya untuk mengubah jarak atau warna. Override besar mudah tertinggal ketika markup inti berubah.

Uji dark mode, responsive layout, keyboard navigation, focus state, dan kontras. Tampilan menarik tidak boleh mengurangi aksesibilitas.

Menggunakan SQLite produksi tanpa menilai pola beban

SQLite sangat nyaman untuk pengembangan dan aplikasi kecil. Namun, beban dengan banyak penulisan bersamaan dapat memerlukan database server.

Perbaikan: pilih database berdasarkan pola penggunaan, bukan kebiasaan lokal. Uji concurrency, backup, restore, dan proses deployment.

MySQL dan PostgreSQL bukan otomatis lebih baik untuk semua kasus. Kebutuhan transaksi, skala, operasi, dan kemampuan tim tetap perlu dipertimbangkan.

Tidak menyiapkan jalur upgrade

Aplikasi Filament menggabungkan Laravel, Livewire, package Filament, plugin, theme, dan kode internal. Upgrade besar dapat menyentuh beberapa lapisan sekaligus.

Perbaikan: simpan test, gunakan version constraint yang jelas, dan upgrade pada branch khusus. Baca changelog serta panduan migrasi sebelum mengubah versi.

Urutan aman biasanya:

1. Backup database.

2. Buat branch upgrade.

3. Perbarui dependensi yang disyaratkan.

4. Jalankan alat upgrade resmi jika tersedia.

5. Perbaiki deprecation.

6. Jalankan test.

7. Uji panel secara manual.

8. Periksa plugin dan theme.

9. Deploy ke staging.

10. Siapkan rollback.

Jangan menghapus migration lama atau mengedit riwayat produksi hanya agar upgrade terlihat bersih.

Setelah panel dasar berjalan, lanjutkan dengan satu alur kerja yang benar-benar dipakai. Pilih operasi kecil seperti membuat produk, mengubah stok, atau menonaktifkan item, lalu pastikan form, authorization, notifikasi, audit, dan test bekerja sebagai satu kesatuan.

Hindari menambahkan chart, plugin, dan custom theme hanya untuk membuat dashboard terlihat lengkap. Nilai Filament muncul ketika komponen siap pakainya mendukung aturan bisnis dengan kode yang tetap mudah dibaca.

Gunakan dokumentasi Laravel untuk memahami model, policy, queue, cache, dan testing yang berada di bawah Filament. Semakin kuat dasar Laravel, semakin mudah kamu membedakan masalah framework, aplikasi, dan database.

Langkah berikutnya hanya satu: buat proyek Laravel kecil dengan model Product, pasang versi Filament yang tercantum pada dokumentasi resmi, lalu selesaikan satu resource sampai create, search, edit, authorization, dan test benar-benar bekerja.

Tetapkan standar resource untuk menjaga konsistensi

Setelah resource pertama bekerja, buat aturan sederhana sebelum jumlah resource bertambah. Tanpa standar, setiap developer dapat memakai label, filter, action, warna status, dan pola authorization yang berbeda.

Mulai dari konvensi penamaan. Nama class mengikuti model, sedangkan label antarmuka memakai istilah yang dipahami pengguna.

Contoh standar:

Hindari label teknis seperti product_status_code jika pengguna mengenalnya sebagai “Status produk”. Nama database dan teks antarmuka tidak harus sama.

Tentukan pola field yang dipakai berulang. Input uang, nomor telepon, tanggal, status, dan file sebaiknya memiliki format serta validasi yang konsisten.

Jika banyak resource memakai komponen serupa, ekstrak konfigurasi ke class yang dapat digunakan ulang. Jangan menyalin blok puluhan baris lalu memperbaikinya satu per satu.

Contoh class pembuat field harga:

namespace App\Filament\Fields;

use Filament\Forms\Components\TextInput;

class PriceField
{
    public static function make(string $name = 'price'): TextInput
    {
        return TextInput::make($name)
            ->label('Harga')
            ->required()
            ->numeric()
            ->minValue(0)
            ->prefix('Rp');
    }
}

Resource dapat memakainya seperti ini:

PriceField::make()

Ekstraksi hanya berguna jika perilakunya memang sama. Jangan membuat abstraksi umum untuk dua field yang kebetulan terlihat mirip tetapi memiliki aturan bisnis berbeda.

Standarkan pula status visual. Warna merah sebaiknya selalu menunjukkan kondisi berbahaya, gagal, atau memerlukan tindakan. Jangan memakai warna yang sama untuk status aktif pada satu resource dan status ditolak pada resource lain.

Buat peta status:

enum ProductStatus: string
{
    case Draft = 'draft';
    case Active = 'active';
    case Archived = 'archived';

    public function label(): string
    {
        return match ($this) {
            self::Draft => 'Draf',
            self::Active => 'Aktif',
            self::Archived => 'Diarsipkan',
        };
    }

    public function color(): string
    {
        return match ($this) {
            self::Draft => 'gray',
            self::Active => 'success',
            self::Archived => 'warning',
        };
    }
}

Enum mengurangi string yang tersebar di form, table, filter, dan action. Perubahan label juga dapat dilakukan pada satu tempat.

Periksa dokumentasi resmi Filament sebelum membuat komponen abstraksi internal. Filament mungkin sudah menyediakan interface, contract, atau pola konfigurasi yang lebih sesuai.

Buat alur review untuk perubahan panel

Panel admin sering memiliki akses lebih besar daripada antarmuka pelanggan. Perubahan kecil pada query atau action dapat membuka data sensitif atau memproses record yang salah.

Setiap pull request yang menyentuh Filament perlu menjawab beberapa pertanyaan:

• Siapa yang dapat melihat resource?

• Record mana yang dapat diakses?

• Apakah query dibatasi tenant?

• Apakah action memerlukan konfirmasi?

• Apakah operasi dapat dibatalkan?

• Apakah perubahan tercatat?

• Apakah data sensitif muncul pada table?

• Apakah export mematuhi izin?

• Apakah bulk action aman?

• Apakah test mencakup pengguna tanpa izin?

Tinjau schema form dan table bersama migration. Field yang tidak terlihat pada form masih dapat tersimpan melalui kode lain, sedangkan kolom database baru dapat memerlukan cast, index, policy, atau aturan serialisasi.

Gunakan diff yang sempit. Hindari menggabungkan upgrade Filament, perubahan theme, migration besar, dan fitur bisnis dalam satu pull request. Pemisahan membuat penyebab error lebih mudah ditemukan.

Untuk action yang mengubah banyak data, minta reviewer memeriksa transaction dan kegagalan parsial. Jika record ketiga gagal, tentukan apakah dua record pertama harus tetap berubah atau seluruh operasi dibatalkan.

Tambahkan audit untuk operasi sensitif:

activity()
    ->performedOn($product)
    ->causedBy(auth()->user())
    ->withProperties([
        'old_status' => $oldStatus,
        'new_status' => $product->status,
    ])
    ->log('Status produk diubah');

Contoh tersebut memerlukan package atau sistem audit yang sesuai. Pilih implementasi yang mendukung kebutuhan retensi, pencarian, dan keamanan proyek.

Jangan menyimpan kata sandi, token, atau isi file sensitif dalam audit log. Log juga termasuk data yang perlu dibatasi aksesnya.

Uji pengalaman pengguna pada kondisi nyata

Komponen bawaan memberi dasar yang rapi, tetapi susunan form tetap dapat membingungkan. Libatkan pengguna yang benar-benar mengelola data.

Berikan tugas konkret:

1. Temukan produk dengan stok habis.

2. Ubah harga satu produk.

3. Nonaktifkan produk yang tidak dijual.

4. Perbaiki SKU yang salah.

5. Cari perubahan yang dibuat kemarin.

Amati bagian yang membuat pengguna berhenti. Jangan langsung menjelaskan cara kerjanya karena kebingungan tersebut merupakan data pengujian.

Catat:

• Waktu menyelesaikan tugas

• Salah klik

• Filter yang sulit ditemukan

• Label yang tidak dipahami

• Informasi yang kurang

• Informasi yang berlebihan

• Action yang terasa berisiko

• Pesan error yang tidak membantu

Perbaiki alur dengan perubahan kecil. Susun ulang field, tambahkan helper text, ubah label, atau pindahkan action berbahaya ke menu yang tidak mudah diklik.

Uji form pada koneksi lambat. Interaksi Livewire melibatkan request server, sehingga loading state dan pencegahan klik ganda perlu bekerja dengan baik. Pelajari lifecycle serta perilaku request melalui dokumentasi resmi Livewire.

Periksa penggunaan keyboard. Pengguna harus dapat berpindah field, membuka pilihan, menutup modal, dan melihat fokus dengan jelas.

Uji layar kecil meskipun panel paling sering dibuka melalui desktop. Staf dapat memakai tablet atau laptop dengan area kerja sempit.

Siapkan checklist sebelum menambah resource berikutnya

Gunakan checklist yang sama setiap kali resource baru dibuat:

• Model memiliki cast dan relation yang tepat.

• Migration memiliki index serta constraint yang diperlukan.

• Factory menghasilkan data normal dan edge case.

• Resource memakai label yang dipahami pengguna.

• Form memuat field yang benar-benar diperlukan.

• Table tidak menampilkan data sensitif.

• Search hanya diterapkan pada kolom yang relevan.

• Filter memiliki kebutuhan operasional yang jelas.

• Policy mencakup view, create, update, delete, dan bulk operation.

• Query dibatasi tenant jika diperlukan.

• Action berbahaya meminta konfirmasi.

• Pekerjaan berat dikirim ke queue.

• Notifikasi menjelaskan hasil tanpa membuka data sensitif.

• Query relation diperiksa untuk masalah N+1.

• Empty state membantu pengguna mengambil tindakan.

• Validation diuji dengan input tidak valid.

• Pengguna tanpa izin mendapat penolakan.

• Audit tersedia untuk perubahan penting.

• Tampilan diuji pada desktop dan layar kecil.

• Test otomatis lulus pada pipeline.

• Dokumentasi internal menyebut pemilik resource.

Kesimpulan

Filament Framework mempercepat pembuatan panel admin dengan menyatukan resource, form, table, action, notifikasi, dan widget dalam pola kerja Laravel. Keunggulan utamanya bukan hanya jumlah komponen siap pakai, tetapi kemampuan mengubah aturan bisnis menjadi antarmuka reaktif melalui PHP.

Aplikasi yang siap dipakai tetap membutuhkan model data yang rapi, policy yang ketat, query efisien, pengujian, audit, serta alur kerja yang mudah dipahami pengguna. Pelajari dokumentasi resmi Filament, lalu terapkan setiap fitur sesuai versi yang terpasang daripada mencampur contoh dari rilis berbeda.

Pilih satu proses nyata, bangun resource terkecil yang dapat menyelesaikannya, dan uji bersama pengguna sebelum menambah fitur lain. Panel yang sederhana, aman, dan konsisten akan memberi nilai lebih besar daripada dashboard ramai yang tidak mendukung pekerjaan sehari-hari.

Referensi

FilamentPHP. (2026). Build Laravel apps and admin panels fast.

FilamentPHP. (2026). Filament Documentation.

GitHub. (2026). FilamentPHP/Filament: A powerful open-source UI framework for Laravel.

Blog. (2026). Filament: The Ultimate Laravel UI Framework for Admin Panels and Apps.

GitHub. (2026). Filament.

Laravel Filament. (2026). What Is Filament?

Medium. (2026). Complete Guide to Laravel Filament Admin Panel: From Zero to Production-Ready Dashboard.

Docs. (2026). What Is Filament?

DeepWiki. (2026). Filament Framework Overview.

UI. (2026). Filament UI.

Filament Apps. (2026). Filament v4 Is Coming: Here Are Some Things You Need to Know.