Senin, 18 September 2023

Cara Membuat Admin Panel dengan Filament: Tutorial Lengkap untuk Pemula

Ingin menghemat waktu dan usaha dalam pembuatan Admin Panel ddengan Laravel? Artikel ini akan membahas tutorial Filament yang akan memandu Anda mulai dari nol.

Filament

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.

Jika Anda ingin belajar melalui playlist video Belajar Filament Dari Awal. Atau jika Anda ingin belajar tentang Membuat Kasir dan POS bisa lansung lihat di karteil.

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.

Saya sangat-sangat menyarankan untuk menguji aplikasi Anda dengan teliti sebelum menggunakan Filament v3 dalam produksi.

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:

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

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

Terminal
cd nama-proyek

Instalasi Livewire V3

Kemudian, install Livewire versi 3 dengan menjalankan perintah berikut:

Terminal
composer require livewire/livewire

Instalasi Filament V3

Tambahkan Filament ke proyek Anda dengan menjalankan perintah:

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

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

Terminal
php artisan filament:install --panels

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

Terminal
php artisan filament:publish

Filament memerlukan versi stack PHP 8.1+, Laravel v10.0+ dan Livewire v3.0+

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:

.env
 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:

Terminal
php artisan migrate

Jalankan migrasi database dengan menjalankan perintah

Terminal
php artisan migrate 

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

Terminal
php artisan filament:user

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

Terminal
php artisan serve

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

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

image

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

Terminal
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:

create_articles_table.php
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

Terminal
php artisan migrate

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

Buat sumber daya Filament untuk model Anda dengan menjalankan perintah

Terminal
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:

ArticleResource.php
<?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:

AppServiceProvider.php
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:

Terminal
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.