untung99.homes: Aplikasi Kasir Laravel 9 1 Install Filament Manage Products

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

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

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

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

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