Kenalan dengan Filament PHP
Laravel Tutorial PHP #filament #laravel #livewire #admin-panel

Kenalan dengan Filament PHP

A
Abd. Asis
5 min read
Bagikan:

Kita sering menemui situasi ini: proyek Laravel sudah jalan, model dan migrasi sudah dibuat, tapi belum ada antarmuka untuk mengelola data. Membangun CRUD manual — form, tabel, filter, pagination — dari nol membutuhkan waktu yang tidak sedikit, terutama kalau UI-nya harus rapi dan fungsional sejak hari pertama.

Filament hadir sebagai solusi praktis untuk masalah ini. Ini bukan sekadar admin panel generator yang menghasilkan file Blade statis — Filament adalah UI framework berbasis Livewire yang memungkinkan kita mendeskripsikan antarmuka sepenuhnya menggunakan PHP, lalu Filament yang mengurus rendering-nya menjadi UI interaktif tanpa satu baris JavaScript pun.

Apa Itu Filament

Filament adalah Server-Driven UI (SDUI) framework untuk Laravel. Alih-alih menulis template HTML dan JavaScript untuk setiap halaman, kita mendefinisikan struktur UI — kolom tabel, field form, widget dashboard — dalam class PHP. Filament menerjemahkan definisi tersebut menjadi antarmuka yang reaktif, ditenagai oleh Livewire dan Alpine.js di baliknya.

Arsitektur ini disebut TALL stack: Tailwind CSS, Alpine.js, Laravel, dan Livewire. Filament duduk di atas stack ini sebagai lapisan abstraksi yang menyembunyikan kompleksitas wiring antara komponen.

Secara default, Filament menyediakan beberapa paket fungsional:

  • Panel Admin — antarmuka lengkap dengan navigasi, autentikasi, dan manajemen resource
  • Form Builder — 25+ tipe field form dengan validasi terintegrasi
  • Table Builder — tabel data dengan filter, sorting, bulk action, dan paginasi
  • Infolist — tampilan read-only untuk detail record
  • Action Objects — modal, konfirmasi, dan logika aksi yang di-encapsulate
  • Widgets Dashboard — stat card, chart, dan komponen overview

Cara Kerja Filament

Daripada menggenerate file view yang kemudian kita edit, Filament menggunakan pendekatan deklaratif. Sebuah Resource — unit utama di Filament — adalah class PHP yang mendefinisikan bagaimana sebuah model ditampilkan dan dimanipulasi.

Install Filament via Composer:

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

Buat resource untuk model Project:

php artisan make:filament-resource Project --generate

Flag --generate membuat Filament memeriksa kolom-kolom di tabel projects dan mengisi form serta tabel secara otomatis. Hasilnya adalah class seperti ini:

// app/Filament/Resources/ProjectResource.php

class ProjectResource extends Resource
{
    protected static ?string $model = Project::class;
    protected static ?string $navigationIcon = 'heroicon-o-folder';

    public static function form(Form $form): Form
    {
        return $form->schema([
            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255),
            Forms\Components\Textarea::make('description')
                ->columnSpanFull(),
            Forms\Components\Select::make('status')
                ->options(['active' => 'Active', 'archived' => 'Archived']),
            Forms\Components\DatePicker::make('deadline'),
        ]);
    }

    public static function table(Table $table): Table
    {
        return $table->columns([
            Tables\Columns\TextColumn::make('name')->searchable(),
            Tables\Columns\BadgeColumn::make('status'),
            Tables\Columns\TextColumn::make('deadline')->date(),
        ])
        ->filters([
            Tables\Filters\SelectFilter::make('status'),
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
            Tables\Actions\DeleteAction::make(),
        ]);
    }
}

Dengan kode di atas, kita sudah punya halaman index dengan tabel yang bisa dicari dan difilter, halaman create dan edit dengan form yang tervalidasi, serta konfirmasi hapus — semuanya fungsional tanpa satu baris HTML atau JavaScript tambahan.

Kelebihan Filament

Kecepatan development yang signifikan. Membuat CRUD lengkap dengan relasi, filter, dan bulk action bisa selesai dalam hitungan menit. Untuk proyek yang butuh admin panel cepat — misalnya SaaS internal, CRM sederhana, atau back-office aplikasi — Filament sangat menghemat waktu.

Tetap di ekosistem PHP. Tidak perlu berpindah konteks antara PHP dan JavaScript. Semua logika UI, validasi, dan interaksi ditulis dalam PHP. Ini nilai besar bagi tim yang tidak punya frontend specialist.

Ekosistem plugin yang aktif. Ada banyak plugin komunitas: integrasi Spatie Permissions, log viewer, media library, translatable fields, dan lainnya. Filament plugin registry berisi ratusan paket yang bisa langsung digunakan.

Customizable secara bertahap. Filament tidak memaksa kita menggunakan semua fiturnya sekaligus. Bisa mulai dari Panel Admin penuh, atau hanya menggunakan Form Builder dan Table Builder secara standalone di proyek yang sudah ada.

Kekurangan Filament

Kurva belajar Livewire. Karena Filament dibangun di atas Livewire, kita mewarisi semua karakteristiknya — termasuk keterbatasannya. Interaksi JavaScript yang kompleks, integrasi dengan library pihak ketiga, atau animasi yang halus membutuhkan pemahaman mendalam tentang cara Alpine.js dan Livewire bekerja bersama.

Desain yang opinionated. Tampilan default Filament sangat polished, tapi ketika mencoba menyimpang dari layout standar — misalnya sidebar dinamis per role, atau tata letak halaman yang tidak biasa — tingkat kesulitannya naik cukup signifikan. Customization di luar pola bawaan membutuhkan pemahaman tentang view override dan Blade components.

Bukan untuk aplikasi yang dihadapi pengguna akhir. Filament didesain untuk admin panel dan aplikasi internal. Memaksanya menjadi antarmuka produk yang kompleks dengan UX yang sangat custom — onboarding flow, halaman marketing, atau dashboard dengan interaksi kaya — bukan area kekuatannya.

Filament vs Inertia.js: Dua Pendekatan Berbeda

Sebelum membandingkan, penting dipahami bahwa Filament dan Inertia.js bukan kompetitor langsung — keduanya menjawab masalah yang berbeda.

Inertia.js adalah glue layer antara backend Laravel dan frontend modern (React, Vue, atau Svelte). Inertia menggantikan layer view di Laravel: alih-alih merender Blade template, controller mengirim data ke komponen React atau Vue yang merender tampilan di sisi klien. Hasilnya adalah SPA tanpa perlu membangun API REST terpisah.

Perbandingan praktisnya:

AspekFilamentInertia.js
RenderingServer-side (Livewire)Client-side (React/Vue/Svelte)
Bahasa UIPHPJavaScript/TypeScript
Target utamaAdmin panel, back-officeAplikasi frontend-rich
Setup awalCepat, minimal konfigurasiPerlu setup Vite, adapter
CustomizationTerbatas di luar pola bawaanPenuh, kontrol total atas UI
JavaScript dependencyMinimal (Alpine.js)Tinggi (React/Vue + ekosistemnya)
Cocok untukCRUD internal, dashboardSPA, aplikasi dengan UX kompleks

Kapan memilih Filament: proyek butuh admin panel cepat, tim terdiri dari PHP developer, tidak ada kebutuhan UX yang sangat custom, atau ingin memanfaatkan ekosistem Laravel sepenuhnya tanpa belajar JavaScript framework baru.

Kapan memilih Inertia.js: aplikasi yang dihadapi pengguna akhir dengan UX yang kaya, tim punya frontend developer yang familiar dengan React atau Vue, butuh TypeScript end-to-end, atau ada design system sendiri yang tidak bisa dikompromikan.

Keduanya bisa digunakan dalam satu proyek. Pola umum adalah menggunakan Filament untuk admin panel (/admin) dan Inertia.js untuk frontend yang dihadapi pengguna (/app). Keduanya berbagi model dan business logic yang sama.

Kita juga sudah membahas Inertia.js v3 beta dan fitur terbarunya jika ingin memahami lebih dalam arah perkembangan Inertia.

Kesimpulan

Filament PHP menjawab satu kebutuhan yang sangat nyata di dunia Laravel: membangun admin panel dan antarmuka CRUD yang fungsional tanpa menghabiskan waktu di boilerplate. Dengan pendekatan SDUI berbasis Livewire, Filament memungkinkan seluruh alur — dari tabel data hingga form kompleks — dideskripsikan dan dikelola dalam PHP murni. Untuk proyek-proyek yang butuh back-office cepat atau tim yang tidak ingin berurusan dengan JavaScript framework, Filament adalah pilihan yang sulit untuk dilewatkan.

Referensi

  1. 1Filament PHP — Official Documentation: Introduction & Overview
  2. 2Inertia.js — The Modern Monolith
  3. 3Laravel Livewire — Official Documentation
  4. 4How Filament Saved (or Complicated) My Admin Panel: An Honest Review — DEV Community

Tentang Penulis

Abd. Asis

Abd. Asis

Software Developer dan Laravel Programmer dari Madura, Indonesia. Passionate tentang PHP, Laravel, dan teknologi web modern.

Komentar

Artikel Terkait

Artikel lain yang mungkin menarik untuk kamu