Home » PHP Framework » Laravel Filament » Laravel Filament: Panduan Membuat Admin Panel Modern dengan Cepat dan Mudah

Laravel Filament: Panduan Membuat Admin Panel Modern dengan Cepat dan Mudah

Laravel Filament adalah sebuah admin panel yang dibangun di atas fondasi Laravel dan Livewire, dirancang untuk memudahkan developer dalam membuat antarmuka administratif. Bayangkan kamu bisa membangun panel admin dengan fitur lengkap, dari manajemen data (CRUD) sampai kustomisasi formulir, hanya dengan menulis kode yang minimal. Ini jelas jadi kabar baik buat kamu yang sering berurusan dengan proyek pengembangan web.

Filament menjadi pilihan favorit banyak developer Laravel karena beberapa alasan kuat. Selain kemudahan penggunaannya, performa yang ringan, dan fleksibilitas yang tinggi, Filament juga didukung oleh ekosistem plugin yang terus berkembang. Jadi, apapun kebutuhan admin panel kamu, kemungkinan besar sudah ada plugin yang siap membantu.

Artikel ini akan menjadi panduan lengkap untuk kamu yang ingin menyelami Laravel Filament. Kita akan bahas dari pengertian dasar, keunggulan, fitur-fitur penting, cara instalasi, hingga tips dan trik untuk menggunakannya secara optimal. Siap untuk membuat admin panel impianmu dengan cepat? Mari kita mulai!

Table of Contents

1. Mengenal Laravel Filament: Apa, Siapa, dan Mengapa Populer?

Kita mulai dengan pertanyaan dasar: apa itu Laravel Filament? Sederhananya, Laravel Filament adalah sebuah toolkit atau kerangka kerja yang memudahkan kita untuk membangun panel admin, dashboard, atau aplikasi manajemen data lainnya menggunakan Laravel. Filament memanfaatkan Livewire, sebuah full-stack framework untuk Laravel yang memungkinkan kita membangun antarmuka dinamis menggunakan PHP, tanpa perlu banyak menulis JavaScript.

Siapa yang cocok menggunakan Laravel Filament? Filament sangat cocok untuk para developer Laravel, baik pemula maupun yang sudah berpengalaman. Jika kamu sering membangun aplikasi yang membutuhkan panel admin untuk mengelola data, seperti aplikasi e-commerce, blog, atau sistem manajemen konten (CMS) kustom, Filament akan sangat mempermudah pekerjaanmu. Desainer web yang ingin menawarkan solusi cepat kepada klien juga akan menemukan admin panel Laravel Filament sangat membantu.

Kenapa Filament populer di kalangan developer Laravel? Popularitas Filament tidak lepas dari filosofi desainnya yang berfokus pada kecepatan pengembangan dan kemudahan penggunaan. Kamu tidak perlu lagi membuat form dan table dari nol. Dengan beberapa baris kode, Filament bisa menggenerasi antarmuka yang fungsional dan estetis secara otomatis. Ini sangat menghemat waktu dan tenaga, memungkinkan kita fokus pada logika bisnis utama aplikasi.

2. Keunggulan Utama Laravel Filament: Mengapa Unggul dari Panel Admin Lain?

Di tengah banyaknya pilihan admin panel untuk Laravel, Filament berhasil menonjol berkat beberapa keunggulannya yang signifikan. Mari kita lihat apa saja yang membuat Laravel Filament begitu menarik.

Ringan dan Antarmuka Modern dengan Laravel Filament

Filament dibangun dengan filosofi modern, menggunakan Tailwind CSS untuk antarmuka yang bersih dan responsif. Ini membuat admin panel yang kamu bangun terlihat modern dan profesional di berbagai ukuran layar. Selain itu, karena dibangun di atas Livewire, Filament sangat ringan dan cepat. Interaksi di dalam panel admin terasa instan, tanpa reload halaman yang mengganggu.

Ekosistem Plugin dan Ekstensi Luas untuk Laravel Filament

Salah satu kekuatan terbesar Filament adalah ekosistem plugin dan ekstensi yang luas. Jika ada fitur khusus yang kamu butuhkan, kemungkinan besar sudah ada plugin yang bisa diinstal dengan mudah. Mulai dari integrasi dengan library permission seperti Spatie, grafik dan chart, notifikasi, hingga editor teks kaya, semuanya tersedia. Ini mengurangi kebutuhan untuk menulis kode kustom dari nol, mempercepat proses pengembangan secara drastis. Kamu bisa menemukan berbagai plugin di halaman dokumentasi Filament atau di GitHub.

Integrasi Mulus Laravel Filament dengan Framework Laravel

Filament dirancang khusus untuk bekerja seamlessly dengan Laravel. Kamu bisa memanfaatkan semua fitur Laravel yang sudah kamu kenal dan cintai, seperti Eloquent ORM, routing, dan middleware. Ini membuat proses belajar Filament lebih cepat bagi developer Laravel, karena konsep yang digunakan sudah familiar. Migrasi proyek Laravel yang sudah ada ke Laravel Filament juga relatif mudah.

Dukungan Komunitas dan Dokumentasi Lengkap Laravel Filament

Filament memiliki komunitas yang aktif dan dokumentasi yang sangat lengkap. Jika kamu menemukan kendala atau butuh bantuan, kamu bisa mencari solusinya di dokumentasi resmi, forum, atau grup komunitas. Developer utama Filament juga sangat responsif terhadap isu dan feedback. Dukungan yang kuat ini memastikan bahwa kamu tidak akan merasa sendirian saat menggunakan admin panel modern ini.

3. Fitur Kunci Laravel Filament: Membangun Panel Admin Lebih Cepat

Filament menawarkan segudang fitur yang akan membuat pengembangan admin panel kamu jadi jauh lebih mudah dan menyenangkan. Mari kita bedah beberapa fitur inti yang jadi daya tarik utama Laravel Filament.

Panel Admin Otomatis dengan Laravel Filament

Bayangkan, kamu hanya perlu mendefinisikan model Eloquent, dan Filament bisa otomatis membuatkan panel admin lengkap dengan menu navigasi, dashboard, dan halaman CRUD dasar untuk model tersebut. Ini adalah fitur yang sangat menghemat waktu, terutama di awal proyek.

Manajemen Sumber Daya (CRUD) di Laravel Filament

Resource management adalah inti dari Filament. Dengan Filament, kamu bisa dengan cepat membuat halaman untuk melakukan operasi Create (membuat), Read (membaca), Update (memperbarui), dan Delete (menghapus) data. Setiap model Eloquent di Laravel bisa menjadi sebuah resource di Filament, yang kemudian akan memiliki halaman sendiri untuk mengelola datanya.

Form Builder & Table Builder di Laravel Filament

Filament menyediakan Form Builder dan Table Builder yang sangat powerful. Dengan Form Builder, kamu bisa membuat formulir input yang kompleks dengan berbagai jenis field (teks, angka, tanggal, dropdown, upload file, dll.) hanya dengan sintaks PHP yang elegan. Demikian pula, Table Builder memungkinkan kamu untuk menampilkan data dalam bentuk tabel yang interaktif, lengkap dengan fitur pencarian, filter, dan pagination.

Dukungan Relasi, Filter, dan Pencarian di Laravel Filament

Filament memahami pentingnya relasi antar data. Kamu bisa dengan mudah menampilkan dan mengelola data yang memiliki relasi (seperti BelongsTo, HasMany, MorphMany) langsung dari halaman resource utama. Selain itu, fitur filter dan search juga tersedia secara out-of-the-box, memungkinkan pengguna untuk dengan cepat menemukan data yang mereka cari. Kamu bisa mendefinisikan field mana saja yang bisa dicari atau difilter.

Manajemen Role & Permission dengan Laravel Filament

Keamanan adalah prioritas. Filament menyediakan integrasi yang mulus dengan Laravel Spatie Permissions, salah satu paket manajemen role dan permission paling populer di Laravel. Kamu bisa mengontrol siapa saja yang bisa mengakses resource tertentu, melihat field tertentu, atau melakukan operasi CRUD. Filament juga memiliki sistem otorisasi bawaan yang sederhana jika kamu tidak membutuhkan Spatie.

4. Cara Instalasi Laravel Filament: Panduan Langkah Demi Langkah

Menginstal Laravel Filament itu gampang banget. Ikuti langkah-langkah di bawah ini untuk memulai proyek Filament pertamamu.

Prasyarat Sistem untuk Instalasi Laravel Filament

Sebelum memulai instalasi, pastikan sistem kamu memenuhi prasyarat berikut:

  • PHP: Versi 8.1 atau yang lebih baru.
  • Composer: Tool manajemen dependensi PHP.
  • Laravel: Versi 9 atau yang lebih baru.
  • Database: Kamu bisa pakai MySQL, PostgreSQL, SQLite, atau SQL Server.

Instalasi Laravel Filament via Composer

Pertama, pastikan kamu sudah memiliki proyek Laravel yang berjalan. Jika belum, kamu bisa membuatnya dengan perintah:

composer create-project laravel/laravel nama-proyek-mu
cd nama-proyek-mu

Setelah itu, instal Filament menggunakan Composer:

composer require filament/filament:"^3.0"

Kemudian, jalankan perintah instalasi Filament:

php artisan filament:install --panels

Perintah di atas akan menginstal Filament dan juga package filament/panels yang berfungsi untuk membuat admin panel.

Konfigurasi Awal dan Login Admin di Laravel Filament

Setelah instalasi selesai, kamu perlu membuat user admin pertama. Filament menyediakan command khusus untuk ini:

php artisan make:filament-user

Kamu akan diminta untuk memasukkan nama, alamat email, dan password untuk user admin. Setelah user admin berhasil dibuat, kamu bisa mengakses panel admin di URL /admin (atau /nama-panel-mu jika kamu mengubah konfigurasi).

Misalnya, jika aplikasi Laravel kamu berjalan di http://localhost, maka panel admin kamu bisa diakses di http://localhost/admin. Masuk dengan kredensial user yang baru saja kamu buat, dan voila! Kamu sudah punya admin panel Laravel Filament yang siap pakai.

5. Membuat Resource CRUD dengan Laravel Filament: Contoh Praktis

Sekarang kita akan belajar bagaimana cara membuat resource CRUD (Create, Read, Update, Delete) di Filament. Ini adalah fitur paling fundamental yang akan sering kamu gunakan.

Generate Resource (Post, Product, dll) di Laravel Filament

Misalnya, kita ingin membuat manajemen data untuk post blog. Langkah pertama adalah membuat model Eloquent dan migrasinya (jika belum ada).

php artisan make:model Post -m

Kemudian, di file migrasi, definisikan kolom-kolom untuk tabel posts.

// database/migrations/xxxx_xx_xx_create_posts_table.php
public function up(): void
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

Jalankan migrasi:

php artisan migrate

Setelah itu, kita bisa menggunakan command Filament untuk membuat resource yang terhubung dengan model Post:

php artisan make:filament-resource Post

Perintah ini akan membuat beberapa file di dalam folder app/Filament/Resources/PostResource:

  • PostResource.php: File utama resource yang mendefinisikan form dan table.
  • PostResource/Pages/ListPosts.php: Halaman untuk menampilkan daftar post.
  • PostResource/Pages/CreatePost.php: Halaman untuk membuat post baru.
  • PostResource/Pages/EditPost.php: Halaman untuk mengedit post.

Kustomisasi Form dan Table di Laravel Filament

Buka file app/Filament/Resources/PostResource.php. Di sini, kamu akan menemukan metode form() dan table() yang perlu kita kustomisasi.

Untuk metode form(), kita bisa menambahkan field untuk title dan content:

// app/Filament/Resources/PostResource.php

use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\RichEditor;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('title')
                ->required()
                ->maxLength(255),
            RichEditor::make('content')
                ->required(),
        ]);
}

Dan untuk metode table(), kita bisa menampilkan kolom title dan created_at:

// app/Filament/Resources/PostResource.php

use Filament\Tables\Columns\TextColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('title')
                ->searchable()
                ->sortable(),
            TextColumn::make('created_at')
                ->dateTime()
                ->sortable()
                ->toggleable(isToggledHiddenByDefault: true),
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
            Tables\Actions\DeleteAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}

Sekarang, jika kamu membuka panel admin, akan ada menu “Posts” di sidebar. Klik menu tersebut, dan kamu akan melihat halaman untuk mengelola post, lengkap dengan fitur buat, baca, edit, dan hapus.

Validasi dan Relasi Antar Model di Laravel Filament

Validasi input di Filament dilakukan secara otomatis jika kamu menambahkan aturan validasi di field Formulir (seperti .required() atau .maxLength()). Kamu juga bisa menambahkan aturan validasi Laravel kustom jika diperlukan.

Untuk relasi antar model, misalnya sebuah post memiliki user sebagai penulisnya (BelongsTo), kamu bisa menambahkan field Select di form untuk memilih user dan menampilkan nama user di table.

Contoh penambahan relasi user_id di form:

// app/Filament/Resources/PostResource.php

use Filament\Forms\Components\Select;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Select::make('user_id')
                ->relationship('user', 'name') // 'user' adalah nama relasi di model Post, 'name' adalah kolom yang ditampilkan
                ->required(),
            TextInput::make('title')
                ->required()
                ->maxLength(255),
            RichEditor::make('content')
                ->required(),
        ]);
}

Dan menampilkan nama user di table:

// app/Filament/Resources/PostResource.php

use Filament\Tables\Columns\TextColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('user.name') // Mengambil nama dari relasi user
                ->sortable()
                ->searchable(),
            TextColumn::make('title')
                ->searchable()
                ->sortable(),
            TextColumn::make('created_at')
                ->dateTime()
                ->sortable()
                ->toggleable(isToggledHiddenByDefault: true),
        ]);
}

Pastikan kamu sudah mendefinisikan relasi user() di model Post dan posts() di model User kamu.

6. Mengelola Relasi dan Komponen Khusus di Laravel Filament

Filament sangat fleksibel dalam menampilkan data, termasuk data dengan relasi dan komponen kustom. Ini memperkaya kemampuan admin panel Laravel Filament kamu.

Berbagai Tipe Relasi: BelongsTo, HasMany, Polymorphic

BelongsTo

Digunakan saat suatu model milik model lain, seperti Post yang dimiliki oleh User.

Form (Select):

Select::make('user_id')
    ->relationship('user', 'name')

Table (TextColumn):

TextColumn::make('user.name')

HasMany

Digunakan saat suatu model memiliki banyak entitas lain, seperti Post punya banyak Comment.

Opsi 1: Repeater di Form

use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\TextInput;

Repeater::make('comments')
    ->schema([
        TextInput::make('author')->required(),
        TextInput::make('body')->required(),
    ])
    ->relationship() // Menyimpan langsung ke relasi comments
    ->collapsible()
    ->itemLabel(fn (array $state): ?string => $state['author'] ?? null),

Opsi 2: HasMany Relation Manager
Tambahkan ke resource:

public static function getRelations(): array
{
    return [
        Relations\CommentsRelationManager::class,
    ];
}

Generate relation manager:

php artisan make:filament-relation-manager PostResource comments author,body

Polymorphic

Filament juga mendukung relasi polimorfik seperti comments, likes, atau tags yang bisa dimiliki oleh berbagai model.

Misalnya, jika Comment bisa dimiliki oleh Post atau Video, maka gunakan kombinasi field commentable_type dan commentable_id.

Di dalam Filament, kamu tetap bisa gunakan ->relationship() di Repeater atau Relation Manager, dengan tetap mengandalkan relasi Eloquent morphMany() atau morphTo().

Komponen Kustom: Tombol, Badge, Formatter di Laravel Filament

Tombol (Custom Action)

Tambahkan aksi khusus pada setiap baris di tabel menggunakan Tables\Actions\Action.

Tables\Actions\Action::make('markAsPublished')
    ->label('Terbitkan')
    ->icon('heroicon-o-check-circle')
    ->color('success')
    ->action(function (Post $record) {
        $record->update(['published' => true]);

        Notification::make()
            ->title('Post berhasil diterbitkan!')
            ->success()
            ->send();
    }),

Badge (Penanda Status Visual)

Gunakan BadgeColumn untuk menampilkan nilai status dengan warna berbeda sesuai kondisinya.

BadgeColumn::make('status')
    ->colors([
        'danger' => 'draft',
        'warning' => 'pending',
        'success' => 'published',
    ]),

Formatter (Format Teks dan Angka)

Gunakan formatter bawaan atau closure untuk menampilkan data agar lebih mudah dibaca.

TextColumn::make('price')
    ->money('IDR') // Format mata uang
    ->sortable(),

TextColumn::make('created_at')
    ->dateTime('d M Y H:i') // Format tanggal
    ->sortable(),

7. Autentikasi dan Manajemen Role di Laravel Filament: Aspek Keamanan Penting

Keamanan adalah hal krusial dalam setiap aplikasi, dan Filament menyediakan cara mudah untuk mengelola autentikasi dan manajemen role pengguna.

Integrasi Laravel Filament dengan Laravel Breeze / Fortify

Filament memanfaatkan sistem autentikasi Laravel yang sudah ada. Jika kamu menggunakan Laravel Breeze atau Fortify untuk autentikasi di aplikasi utama, Filament akan bekerja dengan mulus. Kamu tidak perlu mengkonfigurasi ulang sistem login khusus untuk admin panel, karena Filament akan menggunakan guard web Laravel secara default.

Mengelola Role dan Permission dengan Spatie di Laravel Filament

Seperti yang sudah disinggung sebelumnya, integrasi Filament dengan paket Spatie Laravel Permission adalah kombinasi yang powerful. Kamu bisa mendefinisikan role (misalnya ‘Admin’, ‘Editor’, ‘Viewer’) dan memberikan permission spesifik (misalnya ‘create post’, ‘edit post’, ‘delete post’) kepada role tersebut.

Untuk mengintegrasikan Spatie dengan Filament, kamu perlu menginstal paketnya terlebih dahulu:

composer require spatie/laravel-permission

Kemudian, publish migrasinya dan jalankan:

php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider" --tag="permission-migrations"
php artisan migrate

Tambahkan HasRoles trait ke model User kamu:

// app/Models/User.php

use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasFactory, Notifiable, HasRoles;
    // ...
}

Setelah itu, kamu bisa menggunakan middleware can di Filament resource atau halaman kustom untuk membatasi akses berdasarkan permission atau role. Filament juga memiliki package filament/spatie-permissions yang menyediakan resource untuk mengelola role dan permission langsung dari panel admin.

Instalasi plugin Spatie untuk Filament:

composer require filament/spatie-permissions

Menyesuaikan Akses Menu dan Resource di Laravel Filament

Dengan Spatie, kamu bisa secara granular mengontrol apa saja yang bisa dilihat dan diakses oleh pengguna berdasarkan role mereka. Misalnya, kamu bisa menyembunyikan menu “Users” untuk editor atau hanya mengizinkan editor untuk melihat post mereka sendiri.

Ini dilakukan dengan menambahkan method canAccess() pada resource atau navigation item di Filament.

Contoh di resource:

// app/Filament/Resources/UserResource.php

public static function canAccess(): bool
{
    return auth()->user()->hasRole('admin');
}

Contoh di navigation item (misalnya di App/Providers/Filament/AdminPanelProvider.php):

// app/Providers/Filament/AdminPanelProvider.php

use Filament\Navigation\NavigationItem;

// ...
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->navigationItems([
            NavigationItem::make('Analytics')
                ->url('https://analytics.google.com')
                ->icon('heroicon-o-chart-pie')
                ->group('Reports')
                ->hidden(fn (): bool => !auth()->user()->can('view analytics')), // Sembunyikan jika user tidak punya permission
        ]);
}

8. Plugin dan Ekosistem Laravel Filament: Perluas Fungsionalitas Admin Panel

Salah satu alasan utama kenapa Filament sangat powerful adalah karena ekosistem plugin-nya yang luas dan terus berkembang. Plugin ini memungkinkan kamu menambahkan fungsionalitas ekstra tanpa perlu menulis banyak kode, menjadikan admin panel Laravel kamu semakin kaya fitur.

Plugin Populer untuk Laravel Filament: Spatie Permissions, Charts, Notifications

Berikut beberapa plugin populer yang sering digunakan bersama Filament:

  • Filament Spatie Permissions: Sudah kita bahas sebelumnya, plugin ini menyediakan resource untuk mengelola role dan permission dari Spatie langsung di panel admin Filament. Sangat direkomendasikan untuk manajemen akses.
  • Filament Charts: Memungkinkan kamu menampilkan berbagai jenis chart (garis, batang, pie) di dashboard atau halaman Filament lainnya. Sangat berguna untuk visualisasi data dan laporan.
  • Filament Notifications: Menyediakan sistem notifikasi yang cantik dan mudah digunakan. Kamu bisa mengirim notifikasi ke user admin (misalnya, saat ada data baru masuk atau proses tertentu selesai) yang akan muncul sebagai toast di sudut layar.
  • Filament Shield: Alternatif untuk Spatie Permission jika kamu membutuhkan solusi keamanan yang lebih terintegrasi langsung dengan Filament.
  • Filament Sitemaps: Membantu kamu membuat sitemap XML untuk SEO secara otomatis dari resource kamu.

Ini hanya sebagian kecil dari banyaknya plugin yang tersedia. Komunitas Filament sangat aktif dalam membuat dan memelihara plugin, jadi selalu ada kemungkinan menemukan solusi siap pakai untuk kebutuhanmu.

Cara Instalasi dan Implementasi Plugin Laravel Filament

Instalasi plugin Filament umumnya sangat mudah, biasanya hanya dengan satu perintah Composer. Misalnya, untuk menginstal Filament Charts:

composer require filament/charts

Setelah instalasi, kamu biasanya perlu mengintegrasikan plugin tersebut ke dalam resource atau dashboard kamu. Instruksi implementasi spesifik selalu ada di dokumentasi masing-masing plugin.

Misalnya, untuk menggunakan Filament Charts, kamu mungkin akan membuat widget baru:

php artisan make:filament-widget PostChart --chart

Dan kemudian menyesuaikan logika chart di file widget yang dihasilkan (app/Filament/Widgets/PostChart.php). Setelah itu, tambahkan widget tersebut ke dashboard atau halaman lain.

// app/Filament/Pages/Dashboard.php atau app/Filament/Resources/PostResource/Pages/ListPosts.php
protected function getHeaderWidgets(): array
{
    return [
        PostChart::class,
    ];
}

9. Best Practice dan Tips Skalabilitas Laravel Filament untuk Proyek Besar

Menggunakan Filament untuk proyek kecil itu mudah, tapi bagaimana jika proyek kamu makin besar dan kompleks? Berikut beberapa best practice dan tips skalabilitas agar Laravel Filament tetap efisien dan mudah dikelola.

Struktur Folder Ideal untuk Laravel Filament

Untuk proyek yang besar, membiarkan semua resource, page, dan widget berada dalam satu folder bisa jadi berantakan. Pertimbangkan untuk mengatur struktur folder di dalam app/Filament berdasarkan domain atau modul aplikasi kamu.

Contoh:

  • app/Filament/Shop/Resources/ProductResource.php
  • app/Filament/Blog/Resources/PostResource.php
  • app/Filament/Shop/Widgets/SalesChart.php

Kamu bisa mendaftarkan resource dan widget dari berbagai lokasi di AdminPanelProvider kamu.

Penulisan Resource yang Bersih dan Reusable di Laravel Filament

Jaga agar resource kamu tetap bersih dan tidak terlalu panjang. Jika ada bagian form atau table yang sering digunakan kembali (misalnya field created_at atau updated_at), pertimbangkan untuk membuatnya menjadi trait atau fungsi helper terpisah.

Contoh trait untuk kolom umum:

// app/Filament/Traits/HasTimestampsColumns.php

use Filament\Tables\Columns\TextColumn;

trait HasTimestampsColumns
{
    public static function getTimestampsColumns(): array
    {
        return [
            TextColumn::make('created_at')
                ->dateTime()
                ->sortable()
                ->toggleable(isToggledHiddenByDefault: true),
            TextColumn::make('updated_at')
                ->dateTime()
                ->sortable()
                ->toggleable(isToggledHiddenByDefault: true),
        ];
    }
}

Kemudian di resource:

// app/Filament/Resources/PostResource.php

use App\Filament\Traits\HasTimestampsColumns;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            // ... kolom lainnya
            ...self::getTimestampsColumns(),
        ]);
}

Optimasi Performa Laravel Filament di Proyek Besar

Hindari N+1 Query

Gunakan eager loading pada query utama resource saat menampilkan data relasi di tabel.

// app/Filament/Resources/PostResource.php

public static function getEloquentQuery(): Builder
{
    return parent::getEloquentQuery()
        ->with('user'); // Hindari N+1 dengan eager loading
}

Paginate Data

Filament sudah melakukan pagination otomatis. Pastikan jumlah per halaman tidak terlalu besar, misalnya 10–25 item.

protected static ?int $itemsPerPage = 20;

Indeks Database

Pastikan kolom yang sering dipakai untuk pencarian, filter, atau sorting sudah memiliki indeks.

$table->string('title')->index();
$table->timestamp('published_at')->index();

Caching

Gunakan cache untuk data statis atau jarang berubah seperti dropdown, settings, dan metadata.

$categories = Cache::remember('categories_dropdown', 3600, function () {
    return Category::pluck('name', 'id')->toArray();
});

Hindari Kolom Berat di Table

Jangan tampilkan kolom yang berisi teks panjang, HTML, atau relasi kompleks langsung di tabel. Gunakan summary atau arahkan ke halaman detail.

Optimalkan Filter & Scope

Pastikan custom filter tidak memicu join atau subquery berat. Gunakan scope lokal atau global jika memungkinkan untuk efisiensi query.

10. Studi Kasus: Membangun Admin Panel Produk dengan Laravel Filament dalam 1 Hari

Mari kita terapkan semua yang sudah kita pelajari dalam sebuah studi kasus nyata: membangun admin panel untuk mengelola produk di toko online dalam waktu satu hari menggunakan Laravel Filament.

Gambaran Studi Kasus Nyata

Bayangkan kamu memiliki sebuah toko online sederhana dan perlu panel admin untuk:

  • Mengelola daftar produk (nama, deskripsi, harga, stok, gambar).
  • Mengelola kategori produk.
  • Melihat daftar pesanan.

Langkah-langkah Cepat Membangun Admin Panel dengan Laravel Filament

1. Siapkan Proyek Laravel

Mulai dengan membuat proyek Laravel baru atau gunakan proyek yang sudah ada.

laravel new toko-online
cd toko-online

2. Instal Laravel Filament

Pasang package Filament Admin Panel:

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

3. Buat Model dan Migrasi

Kita akan membuat tiga entitas dasar: Product, Category, dan Order.

php artisan make:model Product -m
php artisan make:model Category -m
php artisan make:model Order -m

Edit migrasi sesuai kebutuhan:

products table

$table->string('name');
$table->text('description')->nullable();
$table->decimal('price', 10, 2);
$table->integer('stock');
$table->foreignId('category_id')->constrained()->cascadeOnDelete();
$table->string('image')->nullable();

categories table

$table->string('name');

orders table

$table->decimal('total_amount', 10, 2);
$table->enum('status', ['pending', 'completed', 'cancelled']);

Lalu jalankan:

php artisan migrate

4. Buat Resource dengan Filament

Generate resource Filament otomatis:

php artisan make:filament-resource Product
php artisan make:filament-resource Category
php artisan make:filament-resource Order

5. Kustomisasi Form dan Table per Resource

ProductResource

Form

TextInput::make('name'),
RichEditor::make('description'),
TextInput::make('price')->numeric(),
TextInput::make('stock')->numeric(),
Select::make('category_id')->relationship('category', 'name'),
FileUpload::make('image'),

Table

ImageColumn::make('image'),
TextColumn::make('name'),
TextColumn::make('category.name'),
TextColumn::make('price')->money('IDR'),
TextColumn::make('stock'),

CategoryResource

Form

TextInput::make('name'),

Table

TextColumn::make('name'),

OrderResource

Form

TextInput::make('total_amount')->numeric(),
Select::make('status')->options([
    'pending' => 'Pending',
    'completed' => 'Completed',
    'cancelled' => 'Cancelled',
]),

Table

TextColumn::make('total_amount')->money('IDR'),
BadgeColumn::make('status'),

6. Tambahkan Relasi Antar Model

Product.php

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

Category.php

public function products()
{
    return $this->hasMany(Product::class);
}

7. (Opsional) Manajemen Role dan Permission

Jika perlu, tambahkan manajemen user menggunakan Spatie Permissions dan plugin Filament:

composer require spatie/laravel-permission
php artisan vendor:publish --tag="permission-migrations"
php artisan migrate

Lalu install plugin Filament:

composer require filament/spatie-laravel-permission-plugin

Hasil Akhir dan Insight Pengembangan dengan Laravel Filament

Dalam waktu kurang dari satu hari, kamu sudah bisa memiliki panel admin fungsional untuk mengelola produk, kategori, dan pesanan. Ini adalah demonstrasi nyata betapa cepatnya pengembangan dengan Laravel Filament.

Insight Pengembangan:

  • Kecepatan Luar Biasa: Bagian yang paling memakan waktu adalah mendefinisikan skema form dan table, yang jauh lebih cepat daripada membangunnya dari nol.
  • Kustomisasi Mudah: Jika ada kebutuhan khusus, seperti validasi kompleks atau field kustom, Filament menyediakannya dengan mudah.
  • Skalabilitas Awal: Struktur resource yang rapi memungkinkan penambahan fitur di kemudian hari tanpa banyak refactoring.

11. Kesimpulan: Mengoptimalkan Pengembangan dengan Laravel Filament

Laravel Filament adalah sebuah game-changer dalam pengembangan admin panel untuk Laravel. Kita sudah melihat bagaimana Filament, dengan fondasi Livewire dan arsitektur modernnya, memungkinkan kamu membangun antarmuka administratif yang fungsional, cantik, dan berperforma tinggi dengan kecepatan yang luar biasa.

Ringkasan Kelebihan Laravel Filament

Filament menonjol berkat kecepatan pengembangannya, ekosistem plugin yang kaya, integrasi yang mulus dengan Laravel, dan komunitas yang aktif. Fitur-fitur seperti Form Builder dan Table Builder yang powerful, resource CRUD otomatis, serta dukungan untuk relasi dan manajemen role, membuat pekerjaan developer menjadi jauh lebih mudah dan efisien.

Rekomendasi Penggunaan Laravel Filament

Kami sangat merekomendasikan Laravel Filament untuk:

  • Proyek baru: Jika kamu memulai proyek Laravel baru yang membutuhkan panel admin, Filament adalah pilihan yang sangat solid.
  • Migrasi panel admin lama: Jika kamu punya panel admin lama yang susah di-maintain atau ingin di-upgrade tampilannya, Filament bisa jadi solusi efektif.
  • Aplikasi internal: Untuk membangun aplikasi manajemen data atau dashboard internal perusahaan, Filament sangat cepat dan efisien.

Arah Pengembangan Selanjutnya Laravel Filament

Filament terus berkembang dengan cepat, dengan update dan fitur baru yang sering dirilis. Tim pengembangnya sangat responsif terhadap feedback komunitas, sehingga kita bisa berharap akan ada lebih banyak improvement dan fungsionalitas yang inovatif di masa depan. Tetaplah mengikuti perkembangan Filament, karena tools ini akan terus membuat hidup para developer Laravel menjadi lebih mudah dan produktif.

FAQ Seputar Laravel Filament

Bisakah Laravel Filament dipakai bareng Inertia atau Livewire?

Filament dibangun di atas Livewire, tapi tidak dirancang untuk digabung dengan Inertia dalam panel admin yang sama.

Apakah Laravel Filament bisa di-custom sepenuhnya?

Bisa. Kamu bisa ubah tema, tambah field dan widget kustom, hingga override seluruh tampilan.

Apakah Filament hanya untuk admin panel?

Ya. Fokus utamanya adalah membangun dashboard backend yang rapi, bukan untuk frontend publik.

Apakah bisa multi-user dengan role berbeda?

Bisa. Gunakan plugin Spatie Permission untuk manajemen role, permission, dan akses panel.

Apakah Filament bisa digunakan tanpa Livewire?

Tidak bisa. Livewire adalah fondasi utama yang digunakan untuk interaktivitasnya.

Apakah kompatibel dengan Laravel terbaru?

Ya. Versi Filament terbaru biasanya cepat menyesuaikan dengan rilis Laravel terbaru.

Apakah bisa digunakan dalam proyek multi bahasa?

Bisa. Filament mendukung translasi dan lokalitas dengan Laravel Localization.

Apakah bisa integrasi dengan API eksternal?

Bisa. Kamu bisa panggil API dari resource, form, atau widget sesuai kebutuhan.

Leave a Comment