Membuat Crud Sederhana menggunakan Laravel Filament

Berikut adalah tutorial pembuatan aplikasi CRUD sederhana dengan dua parameter (nama dan email) menggunakan Laravel dan Filament. Filament adalah alat yang memudahkan pembuatan panel admin dan CRUD dalam aplikasi Laravel.

Prasyarat

Pastikan kamu telah menginstal Laravel. kamu dapat membuat proyek baru dengan perintah berikut:

composer create-project laravel/laravel crud-app

Filament memerlukan Laravel versi 8 atau lebih baru.

Langkah 1: Instalasi Filament

Pertama, kita perlu menambahkan paket Filament ke dalam proyek Laravel. Jalankan perintah berikut:

composer require filament/filament

Setelah instalasi, kamu bisa mengatur Filament dengan menjalankan perintah berikut:

php artisan make:filament-user

Perintah ini akan membuat user admin Filament pertama yang dapat digunakan untuk mengakses dashboard.

Langkah 2: Buat Model dan Migration

Kita akan membuat model dan migration untuk menyimpan data nama dan email. Jalankan perintah berikut untuk membuat model dan migration:

php artisan make:model Contact -m

Edit file migration di `database/migrations` yang baru saja dibuat, sesuaikan dengan struktur tabel yang diinginkan:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
};

Jalankan migration untuk membuat tabel di database:

php artisan migrate

Langkah 3: Buat Filament Resource

Filament Resource akan secara otomatis membuatkan interface CRUD untuk model kita. Jalankan perintah berikut untuk membuat resource:

php artisan make:filament-resource Contact

Perintah ini akan menghasilkan beberapa file, termasuk ContactResource.php, ContactResourceForm.php, dan ContactResourceTable.php di dalam direktori app/Filament/Resources.

Langkah 4: Konfigurasi Filament Resource

Edit file ContactResource.php untuk menentukan halaman dan cara tampilannya. Filament sudah menyediakan template dasar untuk form dan tabel.

namespace App\Filament\Resources;

use App\Filament\Resources\ContactResource\Pages;
use App\Filament\Resources\ContactResource\RelationManagers;
use App\Models\Contact;
use Filament\Forms;
use Filament\Resources\Form;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;
use Filament\Tables\Columns\TextColumn;
use Filament\Forms\Components\TextInput;

class ContactResource extends Resource
{
    protected static ?string $model = Contact::class;

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

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

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name'),
                TextColumn::make('email'),
                TextColumn::make('created_at')->dateTime(),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make(),
            ]);
    }

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

Langkah 5: Mengakses Panel Admin Filament

Filament secara otomatis akan menambahkan resource ini ke dalam navigasi admin. Jalankan server Laravel:

php artisan serve

Akses panel admin dengan mengunjungi URL:

http://localhost:8000/admin

Login menggunakan credential yang telah dibuat saat menjalankan make:filament-user.

Langkah 6: Menambahkan Kontak

Setelah masuk ke dashboard Filament, kamu akan melihat menu `Contacts` di navigasi. Klik menu tersebut, lalu kamu dapat menambahkan, mengedit, atau menghapus kontak dengan form yang telah dibuat.

Dengan mengikuti langkah-langkah ini, kamu telah berhasil membuat aplikasi CRUD sederhana menggunakan Laravel dan Filament. Filament sangat memudahkan pembuatan panel admin dan pengelolaan data dengan cepat dan efisien. kamu bisa melanjutkan dengan menambahkan lebih banyak fitur sesuai kebutuhan aplikasi kamu. Selamat mencoba!