~ We are changing the world with technology. ~

Matt Mullenweg

Aplikasi Kasir Laravel 9 #1: Install Filament & Manage Products

Aplikasi Kasir Laravel 9 #1: Install Filament & Manage Products

1148 Dilihat

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.

 

FullStack Developer, Mobile Developer & Freelancer. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Booking Online Laravel 9 & Livewire #4: Dashboard Admin Page Laravel

Aplikasi Booking Online Laravel 9 & Live...

Klinik memiliki akses penuh dalam mengelola data Pasien, maka melalui artikel ini kita akan membuat 3 buah fitur, yakni: fitur Authentication menggunakan Laravel Jetstream, Kelola data Pasien dan Kelo...

Aplikasi Booking Online Laravel 9 & Livewire #3: Livewire Component & Sistem Antrian Laravel

Aplikasi Booking Online Laravel 9 & Live...

Fitur Janji Temu atau Appointment telah dibuat, berdasarkan data tersebut, kita akan mengolahnya menjadi antrian online. Data akan dikelompokkan dan diurutkan sesuai urutan pasien yang lebih dahulu me...

Aplikasi Booking Online Laravel 9 & Livewire #2: Blade Templating & Appointment Laravel

Aplikasi Booking Online Laravel 9 & Live...

Seri ke-dua dari belajar membuat Aplikasi Booking Online menggunakan Laravel 9 & Livewire adalah bagaimana memadukan Blade templating dan Livewire. Kita juga akan belajar bagaiman setup dengan Livewir...

Komentar