Pendahuluan
Mengintip dokumentasi Laravel, ternyata sudah memasuki versi 9 dan penulis sama sekali belum mencicipi fitur baru yang di tawarkannya. Usut punya usut, ada sebuah TallKit yang sangat berguna untuk mempercepat proses development. Ah, rasanya jadi terlalu mudah untuk membuat sebuah aplikasi.
Dilansir dari official site-nya, Filament meng-klaim dirinya sebagai elegan Tallkit untuk Laravel artisans. Sebuah fitur magic dari Laravel bernama artisan diubah menjadi sekumpulan tools untuk mempercepat proses pembuat aplikasi. Menarik!.
Baca Juga: Import With Relationships Using Laravel-Excel
Install Laravel 9 & Filament
Sebelum melakukan instalasi Laravel 9, pastikan Anda telah memenuhi minimum PHP version dan module lainnya. Kemudian buka command line, dan jalankan perintah
composer create-project laravel/laravel filament
Buat sebuah database baru bernama filament dan sesuaikan informasi database di dalam file .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=filament
DB_USERNAME=root
DB_PASSWORD=toor
Saatnya untuk meng-install sebuah package bernama Filament, buka command line dan jalankan command
composer require filament/filament:"^2.0"
Publish juga config-nya agar nantinya bisa kita sesuaikan dengan kebutuhan
php artisan vendor:publish --tag=filament-config
Generate table dari migration yang sudah tersedia secara default dengan command
php artisan migrate
Sampai pada tahap ini, dashboard kita sudah bisa diakses dengan url: http://localhost:8000/admin/login.
Tugas berikutnya adalah membuat user untuk masuk ke dalam dashboard. Jalankan command dan ikuti instruksi yang disediakan.
php artisan make:filament-user
Manage Products
Filament menawarkan sebuah fitur resources, dimana kita bisa membuat CRUD dengan 1 command. Fitur ini adalah fitur magic dengan menggunakan Livewire component yang dapat di-custom sesuai kebutuhan.
Create Products Table
Buat table products yang akan digunakan sebagai referensi untuk membuat fitur manage products. Dari command line, jalankan
php artisan make:model Product -m
Buka file migration yang baru saja di-generate dan modifikasi menjadi
<?php
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('products', function (Blueprint $table) {
$table->id();
$table->string('code');
$table->string('name');
$table->string('image');
$table->integer('price');
$table->integer('stock');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
};
Buka file app/Models/Product.php dan modifikasi menjadi
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $guarded = [];
}
Filament Resources
Tiba saatnya untuk men-generate resources dari Filament, buka command line dan jalankan
php artisan make:filament-resource Product
Note: Perintah di atas akan membuat resources untuk Product model.
Hasil dari generate di atas akan membuat beberapa file, diantaranya:
-- ProductResources.php
-- ProductResource
-- Pages
-- CreateProduct.php
-- EditProduct.php
-- ListProduct.php
Reload admin page Anda, maka menu navigasi product pada sidebar juga telah tersedia. Jika Anda ingin mengganti nama menu yang telah tersedia, buka file ProductResources.php dan tambahkan code
protected static ?string $navigationLabel = 'Manage Product';
Product Seeder
Fokus utama kita adalah memastikan apakah fitur untuk menampilkan list product berfungsi atau tidak. Maka kita akan membuat list data product secara dummy menggunakan seeder. Dari command line, jalankan
php artisan make:seeder ProductSeeder
Buka file database/seeders/ProductSeeder.php dan modifikasi menjadi
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\Product;
class ProductSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
Product::create([
'code' => 'BA001',
'name' => 'Beras Pulen',
'image' => 'beras.png',
'price' => 12500,
'stock' => 50
]);
Product::create([
'code' => 'AC002',
'name' => 'Air Mineral',
'image' => 'air.png',
'price' => 5000,
'stock' => 25
]);
}
}
Note: Tambahkan 2 buah file bernama air.png dan beras.png ke dalam folder storage/app/public dan jalankan command php artisan storage:link.
Eksekusi seeder di atas dengan command php artisan db:seed --class=ProductSeeder.
Table Lists
Filament menampilkan baris data sesuai jumlah data yang tersedia di-database. Tapi, data tersebut tidak ditampilkan secara spesifik sesuai yang diinginkan. Buka file app/Filament/Resources/ProductResources.php dan modifikasi method table menjadi
public static function table(Table $table): Table
{
return $table
->columns([
//FUNGSI INI AKAN MENAMPILKAN FIELD GAMBAR DENGAN REFERENSI KE DISK PUBLIC
//SILAHKAN CEK config/filesystem.php UNTUK MELIHAT DIRECTORY DARI KEY PUBLIC
//SECARA DEFAULT ADALAH STORAGE -> APP > PUBLIC
Tables\Columns\ImageColumn::make('image')->disk('public'),
Tables\Columns\TextColumn::make('code'),
Tables\Columns\TextColumn::make('name'),
Tables\Columns\TextColumn::make('price')->money($symbol = 'idr', $decimalSeparator = '.', $thousandsSeparator = ',', $decimals = 2),
Tables\Columns\TextColumn::make('stock'),
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make(),
])
->bulkActions([
Tables\Actions\DeleteBulkAction::make(),
]);
}
Insert Products
Fitur resources telah menyediakan seluruh fitur dari CRUD, sehingga tugas kita hanya melengkapi form input-nya saja sesuai kebutuhan. Buka file app/Filament/Resources/ProductResource.php dan modifikasi method form menjadi
public static function form(Form $form): Form
{
return $form
->schema([
Card::make()->schema([
Forms\Components\TextInput::make(name: 'code')->required()->unique(table: Product::class),
Forms\Components\TextInput::make(name: 'name')->required(),
Forms\Components\TextInput::make(name: 'price')->required(),
Forms\Components\TextInput::make(name: 'stock')->required(),
Forms\Components\FileUpload::make('image')->disk('public')->required()
]),
]);
}
Penjelasan: required() dan unique() adalah fitur validation. Value dari name adalah nama kolom/field dari table products. disk('public') adalah fungsi untuk memberitahu lokasi spesifik file upload akan disimpan.
Comments