Eksplorasi Membuat Website Menggunakan Laravel dan Filament PHP Studi Kasus Sistem Informasi Pelanggan Sederhana

Introduction

Hola Rekan-Rekan semua, kembali lagi Kita akan melanjutkan eksplorasi penggunaan framework Laravel dan Filament PHP dalam membuat sistem informasi berbasis web. Studi kasus yang akan Kita gunakan agak sedikit berbeda dari seri tutorial sebelumnya, yaitu manajemen pelanggan dengan memanfaatkan fitur yang ada di Laravel dan filament PHP.

Tujuan eksplorasi

Pada eksplorasi kali ini Kita akan menggunakan pendekatan Information System (IS) Constituante untuk mendefinisikan kapabilitas sistem informasi yang akan dibuat.

Tabel 1. Mendefinisikan kapabilitas sistem informasi dengan IS Constituante

Database Schema

Sebelum Kita melanjutkan ke panduan langkah demi langkah, berikut database schema menggunakan entity relation diagram (erd) dari studi kasus sistem informasi yang akan dibangun.

Struktur ERD dari studi kasus sistem informasi yang akan dibangun

#1 Instalasi Proyek Laravel dan Filament PHP

Langkah pertama : yang harus Kita lakukan yaitu membuat proyek Laravel dan instalasi Filament PHP. Untuk panduan lebih detail dapat mengakses artikel sebelumnya, yaitu melalui tautan berikut : Instalasi Website: Laravel & Filament .
Pada studi kasus kali ini saya menamakan proyek laravel dengan nama : sipelangganv01 dan panel menggunakan nama dashboard (Anda bebas memberikan nama apapun pada bagian ini).

Gambar 1. Tampilan panel setelah terinstall di proyek Laravel

---

#2 Membuat Model dan Migrasi Menggunakan Indoregion Package

Langkah pertama : Kita dapat membuat model dan migration untuk mengelola data provinces, regencies, districts, dan villages dengan memanfaatkan package berupa azishapidin/indoregion: Package Laravel wilayah Indonesia | Data Provinsi, Kabupaten/Kota, Kecamatan dan Kelurahan/Desa seluruh Indonesia. sehingga Kita dapat menghemat waktu. Dengan menggunakan command prompt (CMD) jalankan perintah composer require azishapidin/indoregion

Gambar 2 Menjalankan perintah instalasi package berupa indoregion

Langkah kedua : jalankan perintah php artisan indoregion:publish maka indoregion akan menyalin:

• Files migration dari /packages/azishapidin/indoregion/src/database/migrations ke /database/migrations

• Files seeder dari /packages/azishapidin/indoregion/src/database/seeds ke /database/seeds

• Files model dari /packages/azishapidin/indoregion/src/database/models ke /app/Models

Gambar 3 Menjalankan perintah publish dari package indoregion

Langkah ketiga : Jalankan perintah tambahan berupa composer dump-autoload untuk memperbarui file autoload.php setelah mengubah konfigurasi autoload.

Gambar 4 Menjalankan perintah dump autoload

Langkah keempat : Jalankan perintah php artisan migrate untuk melakukan migrasi (pembuatan) table dari bawaan package indoregion berupa tabel provinces, regencies,districts, dan villages ke dalam database MySQL.

Gambar 5 Menjalankan perintah migrasi (pembutan) tabel ke database MySQL

Langkah kelima: Jalankan perintah php artisan db:seed --class=IndoRegionSeeder untuk mengimpor data dari masing-masing tabel provinces, regencies, districts, dan villages. Maka Kita telah selesain membuat model dan migration dari tabel provinces, regencies, districts, dan villages menggunakan package indoregion.

Gambar 6 Menjalankan perintah impor data ke dalam tabel provinces, regencies, districts, dan villages

---

#3 Membuat Model dan Migrasi Tabel customers

Langkah pertama : Kita perlu membuat model dan migration untuk mengelola data Customer dengan perintah CLI berupa php artisan make:model Customer -m.

Gambar 7 Membuat model dan migrasi tabel customers

Langkah kedua : Kita dapat membuka folder proyek meggunakan aplikasi code editor berupa vs code dengan menjalakan perintah code . di command prompt (cmd).

Gambar 8 Menjalankan perintah untuk membuka folder proyek Laravel menggunakan code editor

Setelah beberapa saat, maka folder proyek Laravel akan terbuka menggunakan aplikasi vs code apabila laptop sudah menginstall aplikasi vs code seperti gambar 9.

Gambar 9 Tampilan proyek Laravel saat dibuka menggunakan aplikasi vs code

Langkah ketiga : buka file migrasi tabel customers yang berada di folder database » migrations » 2025_02_23_075403_create_customers_table.php

Gambar 10 Membuka file migrasi tabel customers

Langkah keempat : Menambahkan sintax sesuai dengan desain database untuk entitas tabel customers seperti di bawah ini, setelah selesai jangan lupa di simpan atau klik ctrl + s.

<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('address');
            $table->char('province_id', 2);
            $table->char('regency_id', 4);
            $table->char('district_id', 7);
            $table->char('village_id', 10);
            $table->boolean('is_member');
            $table->integer('total_points');
            $table->integer('total_payments');
            $table->softDeletes();
            $table->timestamps();

            // Menambahkan Foreign key
            $table->foreign('province_id')
                ->references('id')
                ->on('provinces')
                ->onUpdate('cascade')->onDelete('cascade');
            $table->foreign('regency_id')
                ->references('id')
                ->on('regencies')
                ->onUpdate('cascade')->onDelete('cascade');
            $table->foreign('district_id')
                ->references('id')
                ->on('districts')
                ->onUpdate('cascade')->onDelete('cascade');
            $table->foreign('village_id')
                ->references('id')
                ->on('villages')
                ->onUpdate('cascade')->onDelete('cascade');
        });
    }

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

Langkah kelima : buka terminal (command prompt) yang ada di vs code dengan menekan kedua tombol secara bersamaan yaitu ctrl + `(berada di samping tombol angka 1) secara default maka bagian bawah akan membuka bagian terminal seperti gambar 11.

Gambar 11 Tampilan bagian Terminal saat di aktifkan

Langkah keenam : Jalankan perintah php artisan migrate untuk menyimpan susunan entitas tabel customers ke dalam database MySQL.

Gambar 12 Menjalankan perintah migrate untuk menyimpan susunan entitas tabel ke db MySQL

Langkah ketujuh : Selanjutnya buka file model Customer yang berada di folder app » Models » Customer.php

Gambar 13 Membuka file model Customer.php

Langkah kedelapan : Menambahkan sintax untuk mendefinisikan tabel, entitas tabel yang dapat diisi agar form yang akan dibuat untuk menyimpan dan memperbarui data nantinya dapat berjalan dengan baik, serta mendefinisikan relationship terhadap tabel lainnya yang berhubungan seperti di bawah ini.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Customer extends Model
{
    //Mendefinisikan fitur factory dan softdeletes
    use HasFactory, SoftDeletes;

    //mendefinisikan tabel dari model Customer
    protected $table = 'customers';

    //mendefinisikan kolom-kolom yang dapat diisi oleh form nantinya dengan menentukan entitas yang tidak dapat diisi dengan variabel "guarded"
    protected $guarded = ['id'];

    //mendefinisikan relasi belongsTo antara model Customer dengan model Province
    public function province()
    {
        return $this->belongsTo(Province::class, 'province_id', 'id');
    }

    //mendefinisikan relasi belongsTo antara model Customer dengan model Province
    public function regency()
    {
        return $this->belongsTo(Regency::class, 'regency_id', 'id');
    }

    //mendefinisikan relasi belongsTo antara model Customer dengan model Province
    public function district()
    {
        return $this->belongsTo(District::class, 'district_id', 'id');
    }

    //mendefinisikan relasi belongsTo antara model Customer dengan model Province
    public function village()
    {
        return $this->belongsTo(Village::class, 'village_id', 'id');
    }
}

Maka Model dan Migrasidari Tabel customers selesai dibuat.

---

#4 Membuat Modul atau Fitur Customers Menggunakan Filament PHP

Langkah pertama : Buka terminal (command prompt) dari vs code, jalankan perintah php artisan make:filament-resource Customer --generate --view dengan maksud untuk membuat fitur CRUD untuk modul Customers dengan otomatis dibuatkan susunan form input datanya --generate dan dibuatkan halaman view (secara default bawaan filament berupa modal pop up) untuk melihat detail dari masing-masing data customer nantinya --view.

Gambar 14 Menjalankan perintah membuat Customer Resource di Filament PHP

Langkah kedua : Jalankan perintah php artisan optimize di terminal (command prompt) vs code untuk merefresh cache proyek Laravel.

Gambar 15 Menjalankan perintah untuk merefresh cache proyek Laravel

Langkah ketiga : Buka file web.php yang berada di folder routes » web.php

Gambar 16 Membuka file web.php

Langkah keempat : perbarui sintax seperti berikut ini.

<?php

use Illuminate\Support\Facades\Route;

// Route::get('/', function () {
//     return view('welcome');
// });

Route::get('/', function () {
    return redirect('dashboard/login');
});

Langkah kelima : Buka terminal (command prompt) di vs code, lalu klik new terminal » jalankan perintah php artisan serve untuk menjalankan proyek Laravel menggunakan server local (Modul Apache di xampp harus sudah di start) agar dapat diakses melalui web browser.

Gambar 17 Perintah untuk menjalankan proyek Laravel di server local

Langkah keenam : Buka proyek Laravel melalui link http://127.0.0.1:8000 sesuai dengan alamat server yang telah dibuat oleh Laravel.

Gambar 17 Membuka tautan untuk melihat proyek Laravel saat dijalankan di server local melalui web browser

Langkah ketujuh : Lakukan login dengan akun yang telah dibuat pada saat instalasi filament.

Gambar 18 Tampilan login pada proyek Laravel dan Filament PHP

Langkah kedelapan : Buka menu Customers dengan mengkiknya

Gambar 19 Mengakses menu Customers

Apabila telah muncul seperti gambar 20 maka fitur atau modul Customers Data telah berhasil dibuat.

Gambar 20 Tampilan fitur atau modul Customers Data telah berhasi dibuat.

Langkah kesembilan : Kita bisa membuka fitur create data dengan menekan tombol (button) New Customer yang berada di pojok kanan atas.

Gambar 21 Tombol (action) untuk membuka halaman customer create data

Maka fitur input form telah selesai dibuat otomatis oleh Filament PHP seprti pada gambar 22 sesuai dengan perintah CLI yang telah di jalankan pada langkah pertama dan juga berurutan sesuai dengan entitas yang dibuat pada saat membuat migration.

Gambar 22 Susunan form field pada halaman create data pada modul atau fitur Customer

Langkah kesembilan : Kita perlu memperbaiki form field untuk bagian province_id, regency_id, district_id, dan village_id agar tidak berupa input text ber tipe data string atau varchar, melainkan dirubah menjadi input field berupa Select agar dapat memilih dari data yang telah tersedia dari masing-masing tabel provinces, regencies, districts, dan villages dengan memanfaatkan fungsi relationship yang telah dibuat pada model Customer, sehingga Kita dapat memanfaatkan foreign Id dari 4 sumber tabel tersebut dengan memperbaiki sintax pada CustomerResource.php yang berada di folder app » filament » Resources » CustomerResource.php seperti berikut ini.

Gambar 23 Susunan sintax awal untuk 4 input field

Maka diperbarui menjadi seperti berikut ini :

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\CustomerResource\Pages;
use App\Filament\Resources\CustomerResource\RelationManagers;
use App\Models\Customer;
use App\Models\District;
use App\Models\Regency;
use App\Models\Village;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Forms\Get;
use Filament\Forms\Set;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class CustomerResource extends Resource
{
    protected static ?string $model = Customer::class;

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

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('address')
                    ->required()
                    ->maxLength(255),
                //Perbaikan susunan sintax untuk field province_id, regency_id, district_id, dan village_id
                Forms\Components\Select::make('province_id')
                    ->label('Province')
                    ->relationship('province', 'name')
                    ->searchable()
                    ->preload()
                    ->live()
                    ->afterStateUpdated(function (Set $set) {
                        $set('regency_id', null);
                        $set('district_id', null);
                        $set('village_id', null);
                    })
                    ->required(),
                Forms\Components\Select::make('regency_id')
                    ->label('Regency')
                    ->live()
                    ->options(fn(Get $get) => Regency::where('province_id', $get('province_id'))->pluck('name', 'id'))
                    ->searchable()
                    ->preload()
                    ->afterStateUpdated(function (Set $set) {
                        $set('district_id', null);
                        $set('village_id', null);
                    })
                    ->required(),
                Forms\Components\Select::make('district_id')
                    ->label('District')
                    ->live()
                    ->options(fn(Get $get) => District::where('regency_id', $get('regency_id'))->pluck('name', 'id'))
                    ->searchable()
                    ->preload()
                    ->afterStateUpdated(function (Set $set) {
                        $set('village_id', null);
                    })
                    ->required(),
                Forms\Components\Select::make('village_id')
                    ->label('Village')
                    ->live()
                    ->options(fn(Get $get) => Village::where('district_id', $get('district_id'))->pluck('name', 'id'))
                    ->searchable()
                    ->preload()
                    ->required(),
                Forms\Components\Toggle::make('is_member')
                    ->required(),
                Forms\Components\TextInput::make('total_points')
                    ->required()
                    ->numeric(),
                Forms\Components\TextInput::make('total_payments')
                    ->required()
                    ->numeric(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->searchable(),
                Tables\Columns\TextColumn::make('address')
                    ->searchable(),
                Tables\Columns\TextColumn::make('province_id')
                    ->searchable(),
                Tables\Columns\TextColumn::make('regency_id')
                    ->searchable(),
                Tables\Columns\TextColumn::make('district_id')
                    ->searchable(),
                Tables\Columns\TextColumn::make('village_id')
                    ->searchable(),
                Tables\Columns\IconColumn::make('is_member')
                    ->boolean(),
                Tables\Columns\TextColumn::make('total_points')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('total_payments')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('deleted_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\ViewAction::make(),
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListCustomers::route('/'),
            'create' => Pages\CreateCustomer::route('/create'),
            'view' => Pages\ViewCustomer::route('/{record}'),
            'edit' => Pages\EditCustomer::route('/{record}/edit'),
        ];
    }
}

Dari susunan sintax di atas Kita dapat mengenal istilah baru yaitu :
- get : untuk mengambil nilai (value) dari field atau entitas lainnya.
- set : untuk menetapkan nilai (value) dari field tertentu dengan nilai tertentu.
Jangan lupa untuk mengimport fungsi dengan
use Filament\Forms\Get; dan use Filament\Forms\Set; di bagian awal sebelum digunakan.

Langkah kesepuluh : Lakukan pengujian dengan membuat satu data dengan mengakses tautan http://127.0.0.1/dashboard/customers/create Lalu klik tombol create apabila telah terisi data seperti gambar 24.

Gambar 24 Proses mengisi Form input untuk menguji apakah fungsi create telah berjalan dengan baik

Maka secara otomatis pada bagian halaman http:127.0.01/dashboard/customers akan menampilkan list data seperti gambar 25 yang menandakan proses create data ke database berhasil.

Gambar 25 Tampilan lists data customers yang telah dibuat.

Langkah kesebelas : Terlihat pada gambar 25 untuk tabel yang memuat data province_id, regency_id, district_id, dan village_id berupa angka id atau foreign key, maka Kita dapat memperbarui data yang akan ditampilkan berupa entitas name bukan id, serta menambahkan button delete data dengan memperbaiki sintax di CustomerResource.php seperti berikut ini :

public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->searchable(),
                Tables\Columns\TextColumn::make('address')
                    ->searchable(),
                //Perbaikan susunan sintax untuk menampilkan field province_id, regency_id, district_id, dan village_id berupa atribute name menggunakan relationship yang telah dibuat di model Customer
                Tables\Columns\TextColumn::make('province.name')
                    ->label('Province')
                    ->searchable(),
                Tables\Columns\TextColumn::make('regency.name')
                    ->label('Regency')
                    ->searchable(),
                Tables\Columns\TextColumn::make('district.name')
                    ->label('District')
                    ->searchable(),
                Tables\Columns\TextColumn::make('village.name')
                    ->label('Village')
                    ->searchable(),
                Tables\Columns\IconColumn::make('is_member')
                    ->boolean(),
                Tables\Columns\TextColumn::make('total_points')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('total_payments')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('deleted_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\ViewAction::make(),
                Tables\Actions\EditAction::make(),

                //Menambahkan button untuk menghapus data,
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

Maka tampilan di halaman Lists Data Customer menjadi seperti gambar 26.

Gambar 26 Tampilan Lists Data Customer yang telah diperbarui sintax nya

Langkah Keduabelas : Kita dapat melanjutkan untuk melakukan uji coba untuk update data dengan skenario memperbarui lokasi province → DI Yogyakarta, Regency → Sleman, District → Depok, Village → Catur Tunggal, dan Address → Jl. Tambak Bayan seperti pada gambar 27.

Gambar 27 Proses uji coba update data

Apabila muncul seperti gambar 28, maka proses update data telah berhasil dilakukan.

Gambar 28. Tampilan setelah data berhasil di update

Langkah Ketigabelas : Uji coba terakhir yaitu menghapus data dengan menekan tombol delete pada setiap item list data customers, seperti gambar 29.

Gambar 29 Tombol untuk hapus data

Apabil muncul seperti tampilan pada gambar 30, maka data berhasil dihapus.

Gambar 30 Proses berhasil menghapus data

Langkah keempatbelas : Mengecek data yang telah dihapus apakah masih tersedia di tabel customers atau tidak dengan mengakses localhost / 127.0.0.1 | phpMyAdmin 5.2.1 kemudian buka nama proyek laravel yang sedang dibuat. Untuk saya bernama sipelangganv01 » customers. Apabila masih tersedia data yang tadi dihapus. Akan tetapi pada kolom deleted_at terisi dengan format datetime saat Kita melakukan hapus data, maka sistem softdeletes telah berhasil dijalankan, seperti pada gambar 31.

Gambar 31 Tampilan tabel customers pada database sipelangganv01 yang berada di MySQL

Dengan demikian proses pembuatan fitur atau modul customers telah berhasil dibuat.

---

#6 Memanfaatkan Fitur Seeder dan Factory

Dalam tahap pengembangan atau implementasi, perlu Kita melakukan pengujian dari sistem yang telah dibuat. Dengan memanfaatkan fitur Seeder dan Factory yang disediakan Laravel, Kita dapat membuat dummy data dari fitur atau modul yang sedang dibuat, sehingga memudahkan Kita sebagai developer dalam mengevaluasi status terkini dari hasil proses pengembangan atau implementasi koding yang sedang dilakukan sesuai dengan kriteria fitur atau modul yang sedang dikembangkan.

Langkah-langkah yang dapat dilakukan yaitu sebagai berikut :
Langkah pertama : Buka terminal (command prompt) pada vs code lalu jalankan perintah php artisan make:factory CustomerFactory

Gambar 32 Menjalankan perintah untuk membuat fitur factory di Laravel

Langkah kedua : Buka file CustomerFactory.php yang berada di folder database » factories » CustomerFactory.php Lalu tambahkan sintax seperti berikut ini :

<?php

namespace Database\Factories;

use App\Models\District;
use App\Models\Village;
use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Customer>
 */
class CustomerFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {

        //Mengambil data regency_id untuk daerah DI Yogyakarta secara random
        $regencyId = fake()->randomElement(['3401', '3402', '3403', '3404', '3471']);
        //Mengambil data district_id berdasarkan nilai $regency_id secara random
        $districtId = fake()->randomElement(District::where('regency_id', $regencyId)->pluck('id')->toArray());

        return [
            'name' => fake()->name,
            'address' => fake()->address,
            'province_id' => 34, //Yaitu DI Yogyakarta
            'regency_id' => $regencyId,
            'district_id' => $districtId,
            //Mengambil data village_id berdasarkan nilai $district_id secara random
            'village_id' => fake()->randomElement(Village::where('district_id', $districtId)->pluck('id')->toArray()),
            'is_member' => fake()->randomElement([0, 1]),
            'total_points' => fake()->numberBetween(30, 550),
            'total_payments' => fake()->numberBetween(350000, 5500000),
        ];
    }
}

Langkah ketiga : Daftarkan file CustomerFactory.php ke dalam file DatabaseSeeder.php dengan sintax seperti dibawah ini.

<?php

namespace Database\Seeders;

use App\Models\Customer;
use App\Models\User;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        // User::factory(10)->create();

        // User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);

        //Mendaftarkan file factory CustomerFactory.php dengan dummy data sebanyak 5 pelanggan.
        Customer::factory(5)->create();
    }
}

Langkah keempat : Jalankan perintah php artisan db:seed melalui terminal (command prompt) yang ada di vs code untuk menjalankan factory.

Lakukan refresh pada halaman http://127.0.0.1:8000/dashboard/customers. Apabila tampilan kolom tabel untuk province, regency, district, dan village terisi, maka artinya data dummy berhasil dibuat seperti pada gambar 33.

Gambar 33 Tampilan halaman List data customer setelah dibuat dummy data

---

#7 Membuat fitur Statistik Sederhana

Kita dapat memperkaya tampilan dashboard untuk menampilkkan statistik dan chart untuk memberikan kemudahan kepada Stakeholder dalam menggunakan untuk memenuhi fungsi Management Information System, yang dapat berupa:
a. Total Payment → Jumlah Pembayaran yang telah dilakukan oleh Seluruh Pelanggan (Satuan Rp).
b. Total Transaction → Jumlah Transaksi yang telah dilakukan oleh Seluruh Pelanggan (Satuan Qty).
c. Total Point → Jumlah Point tertinggi yang diperoleh para pelanggan atau customers.

Langkah pertama : Buka terminal (command prompt) di vs code lalu jalankan perintah berikut ini :
php artisan make:filament-widget StatsOverview --stats-overview → klik enter → masukkan lokasi halaman untuk menampilkan stats overview dari item a, b, dan c di atas pada kali ini Kita dapat menempatkan di lokasi halaman dashboard.

Gambar 34 Proses pembuatan widget StatsOverview

Langkah kedua : Buka file StatsOverview.php yang berada di folder app » Filament » Widgets » StatsOverview.php. Lalu tambahkan sintax seperti berikut ini :

<?php

namespace App\Filament\Widgets;

use App\Models\Customer;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            // Menampilkan total payment dalam Rp
            Stat::make('Total Payments', 'Rp ' . number_format(Customer::sum('total_payments'), 0, ',', '.')),
            // Menampilkan jumlah transaksi dalam 
            Stat::make('Total Transaction', Customer::count('total_payments') . ' Transaction'),
            // Menampilkan total point tertinggi
            Stat::make('Higher Point', Customer::max('total_points') . ' Points'),

        ];
    }
}

Apabila telah berhasil, maka tampilan dashboard akan berubah seperti gambar 35.

Gambar 35 Tampilan halaman Dashboard yang memuat stats overview

d. Pie Chart (Grouping by Status Member Pelanggan) → Untuk melihat prosentase antara pelanggan berstatus member aktif dengan tidak lebih dominan yang mana.

Langkah pertama : Jalankan perintah php artisan make:filament-widget IsMemberChart --chart di Terminal (command prompt) vs code.

Langkah kedua : Buka file IsMemberChart.php yang ada di folder app » Filament » Widgets » IsMemberChart.php dan tambahkan sintax seperti berikut :

<?php

namespace App\Filament\Widgets;

use App\Models\Customer;
use Filament\Widgets\ChartWidget;

class IsMemberChart extends ChartWidget
{
    protected static ?string $heading = 'Is Member Status Chart';
    protected static ?int $sort = 4;


    protected function getData(): array
    {
        //Menghitung jumlah member yang aktif
        $activeCount = Customer::where('is_member', true)->count() / Customer::count() * 100;
        //Menghitung jumlah member yang tidak aktif
        $inactiveCount = Customer::where('is_member', false)->count() / Customer::count() * 100;

        return [
            'labels' => ['Active Members in %', 'Inactive Members in %'],
            'datasets' => [
                [
                    'data' => [$activeCount, $inactiveCount],
                    'backgroundColor' => ['#36A2EB', '#FF6384'], // Warna untuk masing-masing bagian
                ],
            ],
        ];
    }

    protected function getType(): string
    {
        return 'doughnut';
    }

    protected function getOptions(): array
    {
        return [
            'responsive' => true,
            'plugins' => [
                'legend' => [
                    'display' => true,
                ],
                'tooltip' => [
                    'enabled' => true,
                ],
            ],
            'scales' => [
                'x' => [
                    'display' => false, // Menyembunyikan sumbu X
                ],
                'y' => [
                    'display' => false, // Menyembunyikan sumbu Y
                ],
            ],
        ];
    }
}

Apabila telah muncul seperti pada gambar 36, maka doughnut chart telah berhasil dibuat.

Gambar 36 Tampilan doughnut chart dari visualisasi data

e. Bar Chart (Untuk Menampilkan data history dari 5 total points tertinggi berdasarkan kecamatan) sehingga dapat memperoleh insight dari perilaku pelanggan / customers.

Langkah pertama : jalankan perintah php artisan make:filament-widget TotalPointChart --chart di Terminal (command prompt) vs code

Langkah kedua : Buka file TotalPointChart.php yang ada di folder app » Filament » Widgets » TotalPointChart.php dan tambahkan sintax seperti berikut :

<?php

namespace App\Filament\Widgets;

use App\Models\Customer;
use Filament\Widgets\ChartWidget;
use Illuminate\Support\Facades\DB;

class TotalPointChart extends ChartWidget
{
    protected static ?string $heading = 'Top 5 Total Points by District';
    protected static ?int $sort = 5;

    protected function getData(): array
    {
        $data = Customer::with('district')
            ->select('district_id', DB::raw('AVG(total_points) as items'))
            ->groupBy('district_id')
            ->orderByDesc('items')
            ->take(5)
            ->get();

        $labels = $data->map(function ($customer) {
            return $customer->district->name; // Mengambil nama kecamatan
        });

        return [
            'labels' => $labels,
            'datasets' => [
                [
                    'label' => 'Total Points',
                    'data' => $data->pluck('items')->toArray(),
                    'backgroundColor' => 'rgba(75, 192, 192, 0.2)',
                    'borderColor' => 'rgba(75, 192, 192, 1)',
                    'borderWidth' => 1,
                ],
            ],
        ];
    }

    protected function getType(): string
    {
        return 'bar';
    }
}

Apabila telah muncul seperti pada gambar 37, maka bar chart telah berhasil dibuat.

Gambar 37 Tampilan bar chart dari visualisasi data

---

Demikian proses eksplorasi pembuatan website menggunakan Laravel dan Filament PHP studi kasus sistem informasi pelanggan sederhana. Semoga dapat memberikan gambaran dalam memanfaatkan Laravel dan filament PHP dalam pembuatan website sesuai dengan kebutuhan.

Mohon maaf apabila ada banyak kekurangan. Terima Kasih atas perhatian yang telah diberikan.

Salam Hormat,
Muhammad Arief Ardyansyah