Laravel 12 dan Filament: Membangun Admin Panel Cepat dan Elegan

ZASHA ONLINE BLOG


Laravel 12 dan Filament: Membangun Admin Panel Cepat dan Elegan

Pengenalan Singkat

Laravel adalah framework PHP modern yang mempermudah pembuatan aplikasi web. Filament adalah plugin/widget admin panel yang berjalan di atas Laravel, memungkinkan kamu membuat dashboard admin profesional tanpa perlu menulis banyak kode HTML dan JavaScript.

Jika Laravel adalah mesin mobil, Filament adalah dashboard interaktif yang sudah terpasang rapi di dalam mobil itu.

Sejarah Laravel 12

Dimulai dari Laravel 1 (2011)

Laravel dibuat oleh Taylor Otwell pada tahun 2011 sebagai alternatif yang lebih elegan dari framework PHP yang ada saat itu (seperti CodeIgniter). Versi pertama dirancang dengan filosofi: "ekspresif, elegan, dan berkinerja tinggi".

Evolusi Versi Utama

Versi Tahun Perubahan Besar
Laravel 1–4 2011–2013 Dasar framework, routing, ORM, middleware
Laravel 5 2015 PSR (standar PHP), service container, middleware berbeda
Laravel 5.1–5.8 2015–2019 API routes, broadcasting, queue, notifications
Laravel 6 2019 Semantic Versioning, Vapor, Horizon
Laravel 7–10 2020–2023 Action classes, validation rules, attributes, async tasks
Laravel 11 2024 Streamlined structure, per-file routes, lazy collections
Laravel 12 2024 (late) Performance boost, native types, advanced middleware

Filosofi Laravel yang Tetap

Di setiap versi, Laravel selalu mempertahankan:

  • Eloquent ORM — cara elegan untuk berbicara dengan database
  • Blade templating — pemisahan logic dan tampilan yang jelas
  • Artisan CLI — perintah baris perintah untuk otomasi
  • Service container — dependency injection yang mendalam

Apa Itu Filament?

Sejarah Singkat

Filament dibuat oleh Dan Harrin dan timnya mulai tahun 2020, sebagai jawaban untuk pertanyaan: "Mengapa membuat admin panel dari nol setiap kali, kalau struktur dasarnya selalu sama?"

Awalnya, Filament hanya untuk mengelola tabel database. Kini berkembang menjadi ekosistem lengkap:

  • Admin Panel — dashboard dengan tabel, form, dan charts
  • Tables — komponen tabel yang interaktif
  • Forms — builder form visual
  • Notifications — sistem notifikasi in-app

Kapan Pakai Filament?

Gunakan Filament kalau kamu butuh:

  1. Dashboard admin cepat — tanpa mendesain dari nol
  2. Kelola data dengan tabel interaktif — sort, filter, search, export
  3. Form kompleks — validasi, relasi antar tabel, file upload, otomatis
  4. UI profesional — sudah dilengkapi styling, ikon, responsif mobile
  5. Minimal custom code — fokus bisnis logic, bukan UI

Jangan pakai Filament kalau:

  • Kamu perlu tampilan yang sangat custom (tidak standar)
  • UI harus beda total dari dashboard admin biasa
  • Klien sangat ketat soal branding visual

Cara Kerja Laravel 12 + Filament

1. Instalasi Dasar

# Buat project Laravel 12
composer create-project laravel/laravel myapp

# Masuk folder
cd myapp

# Install Filament
composer require filament/filament

# Publish asset Filament
php artisan filament:install

# Buat admin user
php artisan make:filament-user

2. Model, Migration, dan Database

Sebelum pakai Filament, kamu buat model dan tabel terlebih dulu:

# Buat model dengan migration
php artisan make:model Product -m

# Isi migration di database/migrations

Contoh migration untuk tabel produk:

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

Lalu jalankan:

php artisan migrate

3. Buat Resource Filament

Resource adalah jembatan antara model dan admin panel:

php artisan make:filament-resource Product

Perintah ini membuat folder app/Filament/Resources/ProductResource.php berisi:

  • Table — tampilan list produk (kolom apa saja, filter, action)
  • Form — tampilan form edit/tambah (field apa saja, validasi, relasi)
  • Pages — halaman list, create, edit

4. Isi Resource dengan Logic Bisnis

Contoh: buat kolom nama, harga, stok; tambah filter stok rendah:

// app/Filament/Resources/ProductResource.php

use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Forms;

class ProductResource extends Resource
{
    protected static ?string $model = Product::class;

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                
                Forms\Components\Textarea::make('description')
                    ->nullable(),
                
                Forms\Components\TextInput::make('price')
                    ->numeric()
                    ->required()
                    ->step(0.01),
                
                Forms\Components\TextInput::make('stock')
                    ->numeric()
                    ->required(),
                
                Forms\Components\TextInput::make('sku')
                    ->unique()
                    ->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->sortable(),
                
                Tables\Columns\TextColumn::make('price')
                    ->money('idr'),
                
                Tables\Columns\TextColumn::make('stock')
                    ->sortable()
                    ->color(fn ($state) => $state < 10 ? 'danger' : 'success'),
            ])
            ->filters([
                Tables\Filters\Filter::make('Low Stock')
                    ->query(fn ($query) => $query->where('stock', '<', 10)),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ]);
    }
}

5. Akses Admin Panel

Buka browser, pergi ke:

http://localhost:8000/admin

Login dengan akun yang sudah dibuat → dashboard siap pakai.

Fitur Utama Filament (Versi Terbaru)

1. Admin Panel (Dashboard)

  • Tampil otomatis dari resource yang dibuat
  • Menu navigasi terotomasi
  • Breadcrumb dan sidebar yang rapi
  • Dark mode (toggle otomatis)

2. Builder Form Visual

  • Drag-and-drop field (belum ada, tapi bisa custom)
  • Validasi real-time
  • Dependensi field (field B tampil jika field A diisi)
  • Custom component

Contoh field yang tersedia:

Forms\Components\TextInput::make('name'),
Forms\Components\Select::make('category_id')
    ->relationship('category', 'name'),
Forms\Components\FileUpload::make('image'),
Forms\Components\RichEditor::make('content'),
Forms\Components\DatePicker::make('date'),
Forms\Components\Toggle::make('is_active'),

3. Table dengan Kolom Pintar

  • Sort, filter, search otomatis
  • Aksi bulk (edit banyak sekaligus)
  • Export ke CSV/Excel
  • Custom kolom dan formatasi

4. Authorization (Izin Akses)

Filament terintegrasi dengan Laravel Policy:

// app/Policies/ProductPolicy.php
public function create(User $user): bool
{
    return $user->role === 'admin';
}

public function update(User $user, Product $product): bool
{
    return $user->role === 'admin' || $user->id === $product->created_by;
}

Filament otomatis menyembunyikan tombol edit/delete jika user tidak punya izin.

5. Relasi Antar Model

Kelola relasi HasMany, BelongsToMany dengan mudah:

Forms\Components\Repeater::make('items')
    ->relationship('items')
    ->schema([
        Forms\Components\TextInput::make('name'),
        Forms\Components\TextInput::make('quantity'),
    ]),

Alur Kerja Praktis: Dari Idea Sampai Live

Langkah 1: Rancang Database

Buat ERD (Entity-Relationship Diagram) di kertas atau tool:

  • Tabel apa saja yang dibutuhkan?
  • Kolom apa di setiap tabel?
  • Relasi antar tabel bagaimana?

Langkah 2: Buat Model & Migration

php artisan make:model Order -m
php artisan make:model OrderItem -m

Langkah 3: Definisikan Relasi di Model

// app/Models/Order.php
class Order extends Model
{
    public function items()
    {
        return $this->hasMany(OrderItem::class);
    }
}

Langkah 4: Buat Resource

php artisan make:filament-resource Order
php artisan make:filament-resource OrderItem

Langkah 5: Isi Form & Table Logic

Edit OrderResource.php dan OrderItemResource.php sesuai kebutuhan bisnis.

Langkah 6: Test di Browser

php artisan serve
# Buka http://localhost:8000/admin

Langkah 7: Deploy

Pastikan:

  • Database sudah ter-migrate di server
  • File upload folder punya izin tulis
  • Environment variable diisi benar
  • Cache di-clear sebelum deploy

Keunggulan Laravel 12 + Filament

Aspek Keuntungan
Kecepatan develop Admin panel bisa siap dalam hitungan jam, bukan hari
Konsistensi UI Semua resource pakai tema yang sama, terlihat profesional
Security CSRF protection, SQL injection prevention, policy-based authorization sudah built-in
Mobile-friendly Responsive otomatis, layak di HP
Extensible Bisa tambah custom component, action, atau logic tanpa limit
Community Laravel + Filament punya komunitas besar, dokumentasi lengkap

Keterbatasan & Workaround

1. Filament Cocok untuk CRUD Standar

Kalau admin panel kamu butuh:

  • Real-time chart yang kompleks
  • Custom logic yang tidak standar
  • UI yang sangat unik

Workaround: Bikin halaman terpisah (routes/web.php) untuk dashboard custom, biarkan CRUD data pakai Filament.

2. Performa untuk Dataset Besar

Jika tabel punya 100.000+ baris:

Workaround: Gunakan pagination (default 50 per halaman), lazy load, atau cache hasil query.

3. Customization UI Terbatas

Filament pakai Tailwind CSS + Alpine JS. Kalau kamu perlu style yang tidak bisa dicapai:

Workaround: Override CSS custom, atau pakai Laravel Livewire untuk custom component yang lebih kompleks.

Kesimpulan

Laravel 12 adalah framework PHP yang matang dan elegan. Filament adalah plugin yang mengubah kerja membuat admin panel dari "berbulan-bulan coding" menjadi "hitungan jam setup".

Kombinasi keduanya cocok untuk:

  • Startup yang ingin MVP admin cepat
  • SaaS dengan banyak akses user
  • Internal tool di perusahaan
  • E-commerce dengan manajemen produk kompleks

Gunakan keduanya dengan bijak — tidak setiap proyek butuh Filament, tapi kalau butuh, Filament akan hemat waktu kamu bertahun-tahun.

Referensi

  • Laravel Official: https://laravel.com
  • Filament Admin: https://filamentphp.com
  • Laravel Ecosystem: https://laravel.io

Catatan: Artikel ini ditulis per 10 Juli 2026. Versi terbaru Laravel dan Filament mungkin lebih baru. Cek dokumentasi resmi untuk fitur terbaru.

Tags
Komentar