Cara Membuat Admin Panel dengan Filament: Tutorial Lengkap untuk Pemula

¶Apa Itu Filament ??

Filament adalah kumpulan alat untuk membuat aplikasi stack TALL yang indah dengan cepat, yang dirancang untuk memudahkan pengembangan web. Laravel adalah kerangka kerja web PHP yang populer dan elegan, yang menyediakan fitur-fitur seperti routing, autentikasi, caching, dan banyak lagi.

¶Persiapan Awal

Pastikan Anda sudah memiliki PHP versi 8 atau lebih tinggi, Composer, dan server web yang berjalan di komputer Anda. Pastikan juga Anda sudah memiliki instalasi Laravel yang memadai, setidaknya versi 10.0 ke atas.

¶Membuat Proyek Laravel Baru

Selanjutnya, buat proyek Laravel baru dengan menjalankan perintah berikut di terminal Anda, gantilah "nama-proyek" dengan nama yang Anda inginkan untuk proyek Anda:

composer create-project laravel/laravel nama-proyek --prefer-dist

Setelah itu, masuk ke direktori proyek Anda dengan menjalankan perintah:

cd nama-proyek

¶Instalasi Livewire V3

Kemudian, install Livewire versi 3 dengan menjalankan perintah berikut:

composer require livewire/livewire

¶Instalasi Filament V3

Tambahkan Filament ke proyek Anda dengan menjalankan perintah:

composer require filament/filament:"^3.0-stable" -W

Terakhir, publikasikan aset Filament dengan menjalankan perintah berikut di terminal Anda:

php artisan filament:install --panels

Setelah instalasi selesai, jalankan perintah berikut untuk menerbitkan aset Filament:

php artisan filament:publish

¶Konfigurasi

Di direktori proyek Laravel, ada file bernama .env. Buka file ini. Temukan bagian yang berkaitan dengan database. Biasanya ada beberapa variabel yang perlu Anda atur, seperti DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD.

Buka file .env di editor teks favorit Anda dan ubah nilai-nilai berikut sesuai dengan konfigurasi database Anda. Ubah variabel-variabel tersebut sesuai dengan informasi database yang telah Anda buat sebelumnya. Contohnya:

 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_DATABASE=nama_database
 DB_USERNAME=nama_pengguna_database
 DB_PASSWORD=kata_sandi_database

¶Menjalankan Migrasi

Setelah mengkonfigurasi file .env, buka terminal atau command prompt di direktori proyek Anda. Jalankan perintah berikut untuk menjalankan migrasi dan membuat tabel-tabel yang diperlukan dalam database:

php artisan migrate

Jalankan migrasi database dengan menjalankan perintah

php artisan migrate 

di terminal Anda, yang akan membuat tabel-tabel bawaan Laravel di database Anda. Buat akun admin pertama Anda dengan menjalankan perintah

php artisan filament:user

di terminal Anda, dan ikuti petunjuknya untuk memasukkan email dan kata sandi Anda. Jalankan server pengembangan Laravel dengan menjalankan perintah

php artisan serve

di terminal Anda. Buka browser Anda dan kunjungi alamat http://localhost:8000/admin untuk melihat panel admin Filament.

Login menggunakan akun yang sudah anda buat sebelumnya maka akan tampil halaman dashboard seperti gambar di bawah ini

¶Tampilan CRUD dengan Filament UI

Untuk membuat contoh CRUD (Create, Read, Update, Delete) dengan Filament, Anda perlu melakukan hal-hal berikut: Buat model Eloquent untuk entitas yang ingin Anda kelola di panel admin. Misalnya, jika Anda ingin membuat CRUD untuk artikel blog, Anda bisa membuat model Article dengan menjalankan perintah

php artisan make:model Article -m

di terminal Anda, yang juga akan membuat migrasi database untuk tabel articles.

Edit migrasi database yang dibuat di langkah sebelumnya untuk menentukan kolom-kolom yang dibutuhkan untuk model Anda. Misalnya, jika model Article memiliki atribut title, content, dan author, Anda bisa menambahkan kode berikut ke metode up dari migrasi database:

Schema::create('articles', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('content');
    $table->string('author');
    $table->timestamps();
});

Jalankan migrasi database dengan menjalankan perintah

php artisan migrate

di terminal Anda, yang akan membuat tabel articles di database Anda.

Buat sumber daya Filament untuk model Anda dengan menjalankan perintah

php artisan make:filament-resource ArticleResource

di terminal Anda, yang akan membuat kelas ArticleResource di direktori app/Filament/Resources.

Ini akan membuat beberapa file di direktori app/Filament/Resources:

+-- ArticleResource
|   +-- Pages
|   |   +-- CreateArticle.php
|   |   +-- EditArticle.php
|   |   +-- ListArticles.php

Edit kelas ArticleResource yang dibuat di langkah sebelumnya untuk menentukan bagaimana model Anda ditampilkan dan dikelola di panel admin. Misalnya, jika Anda ingin menampilkan dan mengedit atribut title, content, dan author dari model Article, Anda bisa menambahkan kode berikut ke metode-metode yang sesuai dari kelas ArticleResource:

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\ArticleResource\Pages;
use App\Filament\Resources\ArticleResource\RelationManagers;
use App\Models\Article;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class ArticleResource extends Resource
{
    protected static ?string $model = Article::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('title')
                    ->label('Judul')
                    ->required()
                    ->maxLength(255),
                    Forms\Components\TextInput::make('author')
                    ->label('Penulis')
                    ->required()
                    ->maxLength(255),
                Forms\Components\Textarea::make('content')
                    ->label('Konten')
                    ->required(),

            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('title')->sortable()->searchable(),
                Tables\Columns\TextColumn::make('author')->sortable()->searchable(),
                Tables\Columns\TextColumn::make('content'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ])
            ->emptyStateActions([
                Tables\Actions\CreateAction::make(),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

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

¶Mengizinkan Semua Model Tanpa Batasan di Laravel Untuk Filament

Nah, jadi begini, dalam petunjuk singkat ini, kita akan membahas tentang sesuatu yang disebut "perlindungan masif" di Laravel. Tapi jangan khawatir, kita akan menjelaskannya dengan bahasa yang gampang dimengerti, khususnya buat kamu yang baru belajar.

Jadi, kamu tahu nggak sih, Filament itu suatu bagian dalam Laravel yang membantu kita untuk mengatur data dalam model. Nah, agar Filament bisa bekerja lebih baik, kita perlu melepas "perlindungan" pada model-model kita. Jadi, model-model itu nggak akan terbatas dalam apa yang bisa diubah.

Nah, buat kamu yang baru belajar, ini langkahnya:

Buka file yang namanya AppServiceProvider.php. Biasanya bisa ditemukan di folder app/Providers.

Di dalam file itu, kamu lihat ada baris kode yang seperti ini:

use Illuminate\Database\Eloquent\Model;

public function boot(): void
{
    // Nah, di sini kamu tambahkan baris kode berikut:
    Model::unguard();
}

Nah, langkah itu akan membuat model-model di Laravel nggak lagi terbatas, jadi lebih fleksibel. Tapi ya, ingat juga, kamu tetap harus hati-hati saat ngubah data ya, jangan sembarangan.

¶Jalankan Aplikasi Lagi dan Uji CRUD

Jalankan kembali server development dengan perintah:

php artisan serve

Buka kembali browser Anda dan refresh halaman panel admin Filament. Anda seharusnya melihat menu Artikel di sidebar, yang akan membawa Anda ke halaman CRUD untuk model Article. Dan anda sudah dibuatkan CRUD dengan sangat mudah, untuk membuat yang lain anda dapat melakukan lengkah seperti yang sebelumnya.

Selamat, Anda telah berhasil membuat CRUD dengan Filament dan Laravel! Artikel ini telah memberikan panduan langkah demi langkah yang mudah dipahami untuk menginstal Laravel Filament dan Livewire v3, serta membuat operasi CRUD.

Saya menyarankan Anda untuk menguji aplikasi Anda secara menyeluruh sebelum menggunakannya dalam lingkungan produksi. Dengan menggunakan filament ini, Anda dapat mengembangkan aplikasi web yang interaktif dan efisien dengan lebih mudah. Saya harap tutorial ini bermanfaat untuk Anda. Jika Anda ingin belajar lebih lanjut tentang Laravel anda bisa melihat video series di website ini.