KAL
Menu

Filament

Panel admin yang cepat dibangun dengan Filament.

Daftar isi

Filament adalah pembangun panel admin untuk aplikasi Laravel, berupa kumpulan komponen full-stack yang mencakup sisi backend dan frontend sekaligus serta mempercepat pembuatan CRUD. Topik ini membahas anatomi panel dan resource Filament, bukti ketergantungannya pada Livewire yang terbaca dari metadata package, serta bentuk kelas resource yang mengelola data catatan. Sebagai peta ekosistem, pembahasan menyajikan metadata dan potongan kode hasil akhir, bukan sesi instalasi yang dijalankan sampai selesai.

Panel, resource, dan posisi di atas Livewire#

Panel adalah area aplikasi yang memiliki layout, navigasi, dan autentikasi sendiri, dan secara default tersedia pada rute /admin. Resource adalah kelas yang mengikat satu model Eloquent dengan dua definisi, yaitu form untuk masukan dan table untuk daftar. Dari kedua definisi tersebut, Filament menyusun halaman daftar, create, edit, dan view yang lengkap dengan validasinya, tanpa controller maupun template Blade yang ditulis sendiri. Satu kelas resource menggantikan berkas-berkas yang biasanya tersebar di app/Http/Controllers dan resources/views.

Posisi package ini pada ekosistem terbaca dari metadata-nya. Perintah berikut dijalankan dari direktori mana pun di luar proyek Composer, dan baris pertama keluarannya adalah pemberitahuan tentang hal itu.

bash 
# membaca metadata package filament tanpa memasangnya
composer show filament/filament v5.11.1 --available
text Keluaran 
No composer.json found in the current directory, showing available packages from packagist.org
name     : filament/filament
descrip. : A collection of full-stack components for accelerated Laravel app development.
keywords : 
versions : v5.11.1
type     : library
license  : MIT License (MIT) (OSI approved) https://spdx.org/licenses/MIT.html#licenseText
homepage : https://github.com/filamentphp/filament
source   : [git] https://github.com/filamentphp/panels.git 63f8ac0b512b0e06da44bc610673b9f84e267752
dist     : [zip] https://api.github.com/repos/filamentphp/panels/zipball/63f8ac0b512b0e06da44bc610673b9f84e267752 63f8ac0b512b0e06da44bc610673b9f84e267752
names    : filament/filament

support
issues : https://github.com/filamentphp/filament/issues
source : https://github.com/filamentphp/filament

autoload
files
psr-4
Filament\ => src

requires
php ^8.2
composer-runtime-api ^2.1
chillerlan/php-qrcode ^5.0
filament/actions self.version
filament/forms self.version
filament/infolists self.version
filament/notifications self.version
filament/schemas self.version
filament/support self.version
filament/tables self.version
filament/widgets self.version
pragmarx/google2fa ^8.0|^9.0
pragmarx/google2fa-qrcode ^3.0|^4.0

Keluaran tersebut memperlihatkan pola meta-package. Bagian requires tidak memuat satu pun implementasi fungsional, melainkan daftar package Filament lain seperti filament/forms, filament/tables, dan filament/widgets yang semuanya dinyatakan self.version. Kendala self.version membuat seluruh komponen selalu terpasang pada nomor rilis yang sama, sehingga memasang satu nama package berarti menerima koleksi lengkapnya dalam satu versi terpadu.

Jejak dependensinya dapat ditelusuri satu lapis lebih dalam pada komponen dasarnya, yaitu filament/support.

bash 
# menelusuri dependensi komponen dasar Filament
composer show filament/support v5.11.1 --available
text Keluaran 
No composer.json found in the current directory, showing available packages from packagist.org
name     : filament/support
descrip. : Core helper methods and foundation code for all Filament packages.
keywords : 
versions : v5.11.1
type     : library
license  : MIT License (MIT) (OSI approved) https://spdx.org/licenses/MIT.html#licenseText
homepage : https://github.com/filamentphp/filament
source   : [git] https://github.com/filamentphp/support.git bc56814c9c68d0337814a3d3c470fa06cc9e1a04
dist     : [zip] https://api.github.com/repos/filamentphp/support/zipball/bc56814c9c68d0337814a3d3c470fa06cc9e1a04 bc56814c9c68d0337814a3d3c470fa06cc9e1a04
names    : filament/support

support
issues : https://github.com/filamentphp/filament/issues
source : https://github.com/filamentphp/filament

autoload
files
psr-4
Filament\Support\ => src

requires
php ^8.2
composer-runtime-api ^2.1
composer/class-map-generator ^1.6
ext-intl *
blade-ui-kit/blade-heroicons ^2.5
danharrin/livewire-rate-limiting ^2.0
illuminate/contracts ^11.28|^12.0|^13.0
kirschbaum-development/eloquent-power-joins ^4.0
league/uri-components ^7.0
livewire/livewire ^4.4.8
nette/php-generator ^4.0
ryangjchandler/blade-capture-directive ^1.0
spatie/invade ^2.0
spatie/laravel-package-tools ^1.9
symfony/html-sanitizer ^7.0|^8.0
symfony/console ^7.0|^8.0

Baris livewire/livewire ^4.4.8 menunjukkan bahwa panel Filament berjalan di atas Livewire. Interaksi pada tabel seperti filter, pencarian, dan paginasi dikirim sebagai request Livewire, sehingga halaman tidak dimuat ulang dan keadaan (state) antarmuka tetap tersimpan di sisi server. Rentang illuminate/contracts ^11.28|^12.0|^13.0 juga menyatakan bahwa versi 5.x dari Filament menuntut Laravel yang relatif baru.

Memasang panel dan membuat resource#

Pemasangan Filament terdiri atas pendaftaran package, pengaktifan panel default, dan pembuatan resource pertama. Blok berikut tidak dieksekusi ulang karena package tidak dipasang pada proyek contoh.

bash 
# tidak-dijalankan
# memasang Filament, menghidupkan panel, lalu membuat resource Note
cd ~/aplikasi-catatan
composer require filament/filament
php artisan filament:install --panels
php artisan make:filament-resource Note --generate

Perintah filament:install --panels membuat AdminPanelProvider yang memuat pengaturan panel, sedangkan make:filament-resource Note --generate menghasilkan kelas resource beserta halaman-halamannya. Opsi --generate mengisi form dan table dengan menduga jenis kolom dari schema database, sehingga kelas yang terbentuk sudah hampir siap dan cukup dirapikan. Kelas NoteResource yang sudah dirapikan untuk model Note tampak seperti berikut.

php NoteResource.php 
// tidak-dijalankan
<?php

namespace App\Filament\Resources;

use App\Filament\Resources\NoteResource\Pages;
use App\Models\Note;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;

class NoteResource extends Resource
{
    protected static ?string $model = Note::class;

    protected static ?string $navigationLabel = 'Catatan';

    public static function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('judul')->required()->maxLength(255),
            Select::make('category_id')
                ->relationship('category', 'nama')
                ->label('Kategori'),
            Textarea::make('isi')->rows(6),
        ]);
    }

    public static function table(Table $table): Table
    {
        return $table->columns([
            TextColumn::make('judul')->searchable()->sortable(),
            TextColumn::make('category.nama')->label('Kategori'),
            TextColumn::make('created_at')->label('Dibuat')->dateTime()->sortable(),
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListNotes::route('/'),
            'create' => Pages\CreateNote::route('/create'),
            'edit' => Pages\EditNote::route('/{record}/edit'),
        ];
    }
}

Definisi form menyatakan tiga masukan, termasuk Select yang mengambil daftar kategori dari relasi category milik model, sedangkan definisi table menyatakan kolom daftar beserta kemampuan pencarian dan pengurutannya. Properti $model mengikat kelas ini dengan model Note, dan metode getPages() menetapkan rute setiap halamannya. Setelah kelas ini ada, pengelolaan data catatan pada panel berjalan lengkap tanpa satu pun controller atau template baru.

Hubungan antar bagian Filament dirangkum pada diagram berikut.

Panel admin (/admin)AdminPanelProviderNoteResourceform + table + halamanFormmasukan CRUDTabledaftar + filterModel Note (Eloquent)relasi ke Categorymemuat resourceterikat pada model
Anatomi panel Filament dari resource hingga database

Batas dan pertimbangan#

Filament menghasilkan panel yang bermanfaat untuk operator internal, pengelolaan konten, dan peralatan administrasi, tetapi bukan pengganti frontend publik. Antarmuka yang dihasilkannya dibentuk oleh komponen yang sama untuk semua aplikasi, sehingga tampilan publik dengan desain khusus tetap menjadi wilayah Blade, Livewire, atau pilihan frontend lain. Penyesuaian pada batas komponen, misalnya mengganti kolom tabel dan menambah filter, tetap mudah dilakukan, sedangkan mengubah seluruh bentuk halamannya berarti keluar dari komponen yang disediakannya.

Otorisasi tetap menjadi urusan Laravel. Policy dan gate yang sudah dimiliki aplikasi dapat diikat ke resource sehingga hak lihat, buat, dan ubah data di panel mengikuti aturan yang sama dengan sisa aplikasi. Terakhir, panel Filament dan API bukan pilihan yang saling meniadakan, karena aplikasi catatan dapat mengelola data melalui panel ini sementara aplikasi yang dihadapkan ke pengguna tetap dilayani oleh API.

Kesalahan umum#

Kesalahan pertama adalah memperlakukan Filament sebagai frontend untuk pengguna akhir. Panel yang dihasilkannya dirancang untuk area terbatas seperti /admin, lengkap dengan autentikasi sendiri, sehingga mengekspos panel yang sama ke publik berarti membuka peralatan administrasi kepada orang yang salah.

Kesalahan kedua adalah menempatkan logika domain ke dalam resource. Definisi form dan table mengelola tampilan dan validasi masukan, sedangkan aturan bisnis, misalnya penghitungan ringkasan atau pengiriman pengingat, tetap ditempatkan pada service atau model agar dapat digunakan bersama API dan perintah Artisan.

Kesalahan ketiga adalah membuat resource tanpa mengikat policy. Tanpa itu, setiap pengguna yang lolos autentikasi panel dapat mengubah seluruh data, dan batas hak akses yang telah dirancang pada aplikasi tidak berlaku di dalam panel.

Ringkasan#

  • Filament adalah koleksi komponen panel admin yang bekerja di atas Livewire, dan filament/filament berperan sebagai meta-package yang menyatukan seluruh komponennya pada satu nomor rilis.
  • Resource mengikat satu model Eloquent dengan definisi form dan table, lalu menghasilkan halaman CRUD lengkap tanpa controller maupun template yang ditulis sendiri.
  • Panel dikelola melalui AdminPanelProvider, sedangkan otorisasi data tetap menggunakan policy dan gate Laravel.
  • Filament cocok untuk area administrasi internal, sedangkan frontend publik dengan desain khusus tetap wilayah pilihan lain.

Referensi#