Cara Bikin Dashboard Steps dengan Filament Wizard dan Laravel

Membuat dashboard admin yang menarik adalah langkah penting dalam menciptakan pengalaman pengguna yang baik dalam menggunakan website. Dashboard yang dirancang dengan baik akan memudahkan pengguna untuk berinteraksi, memahami data, dan mengelola konten di dalam aplikasi.

Tidak hanya estetika, dashboard yang user-friendly juga memberikan navigasi yang jelas, fitur yang terorganisir, dan tata letak yang intuitif. Pengalaman pengguna yang positif dalam mengakses dashboard dapat meningkatkan kepercayaan dan kepuasan terhadap aplikasi, serta memperkuat loyalitas pengguna.

Laravel dan Filament: Kombinasi Tepat untuk Dashboard

Laravel adalah salah satu framework web development yang populer di kalangan developer karena performa, fleksibilitas, dan kemudahan penggunaannya. Laravel memungkinkan developer membangun aplikasi web dengan struktur yang rapi dan teratur, serta mendukung berbagai fitur untuk mempermudah proses development.

Filament adalah library berbasis Laravel yang dirancang khusus untuk membuat dashboard dan halaman admin secara cepat dan efisien. Dengan Filament, proses membuat dashboard menjadi jauh lebih mudah karena library ini menyediakan komponen-komponen antarmuka yang siap pakai dan dapat dikustomisasi.

Bagi para developer, Filament adalah solusi tepat untuk menghemat waktu tanpa harus memulai dari awal, sementara tetap mempertahankan kualitas tampilan dan performa aplikasi.

Kelebihan Filament Wizard dalam Dashboard Steps

Salah satu fitur menarik dari Filament adalah Wizard. Filament Wizard memungkinkan developer untuk membuat form dengan alur bertahap atau langkah-langkah yang terstruktur. Fitur ini sangat berguna ketika ingin mengelola input data yang kompleks namun mudah dipahami oleh pengguna.

Wizard ini juga memberikan visualisasi proses yang tersegmentasi, sehingga pengguna dapat mengikuti proses dengan lebih mudah. Dengan menggunakan Wizard dari Filament, developer dapat membangun dashboard steps yang memandu pengguna melalui beberapa tahapan input data dengan alur yang jelas dan interaktif.

Membuat Proyek Website Home Service dengan Laravel dan Composer

Pertama, pastikan Composer telah terinstal di komputer Anda. Composer adalah manajer dependency PHP yang akan membantu menginstal Laravel dan semua dependensinya.

Buka terminal dan buat proyek Laravel baru dengan menggunakan perintah berikut:

composer create-project --prefer-dist laravel/laravel home-service

Setelah proses instalasi selesai, masuk ke direktori proyek baru tersebut:

cd home-service

Selanjutnya, pastikan Laravel berjalan dengan benar. Jalankan server development Laravel dengan perintah:

php artisan serve

Akses aplikasi di browser dengan membuka URL http://localhost:8000. Jika muncul halaman welcome dari Laravel, proyek Anda telah berhasil dibuat.

Mengatur File .env untuk Database MySQL pada Proyek Laravel

Untuk menghubungkan proyek Laravel dengan MySQL, buka file .env di root proyek Anda. Cari bagian konfigurasi database, dan sesuaikan nilai-nilai berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=username_mysql
DB_PASSWORD=password_mysql

Pastikan nilai DB_DATABASE, DB_USERNAME, dan DB_PASSWORD sesuai dengan database yang Anda buat di MySQL.

Misalnya, jika Anda memiliki database bernama home_service_db, konfigurasi .env akan terlihat seperti ini:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=home_service_db
DB_USERNAME=root
DB_PASSWORD=12345

Setelah selesai mengatur konfigurasi, jalankan migrasi untuk memastikan Laravel terhubung dengan database dan membuat tabel sesuai dengan file migrasi:

php artisan migrate

Jika berhasil, maka tabel akan dibuat di database, dan proyek Laravel Anda siap menggunakan MySQL sebagai basis datanya.

Membuat File Model dan Migration untuk Table Category, Home Services, dan Booking Transaction

Untuk membuat tabel di Laravel, kita perlu membuat file model dan migration. Berikut adalah langkah-langkahnya untuk tabel Category, HomeService, dan BookingTransaction.

Membuat Model dan Migration untuk Tabel Category

Buka terminal di direktori proyek Laravel Anda. Buat model dan migration untuk tabel Category dengan perintah:

php artisan make:model Category -m

Perintah di atas akan membuat model Category dan file migration di database/migrations. Selanjutnya, buka file migration yang baru dibuat (biasanya memiliki nama yang mirip dengan xxxx_xx_xx_xxxxxx_create_categories_table.php).

Di dalam file migration Category, tambahkan kolom-kolom yang diperlukan. Misalnya:

Schema::create('categories', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('description')->nullable();
    $table->timestamps();
});

Simpan file ini, kemudian jalankan perintah migrasi untuk membuat tabel categories:

php artisan migrate

Membuat Model dan Migration untuk Tabel HomeService

Selanjutnya, buat model dan migration untuk tabel HomeService dengan perintah berikut:

php artisan make:model HomeService -m

Buka file migration untuk HomeService di folder database/migrations. Tambahkan kolom-kolom yang diperlukan. Contoh kode untuk struktur tabel HomeService:

Schema::create('home_services', function (Blueprint $table) {
    $table->id();
    $table->foreignId('category_id')->constrained('categories')->onDelete('cascade');
    $table->string('service_name');
    $table->text('service_description')->nullable();
    $table->decimal('price', 8, 2);
    $table->timestamps();
});

Di sini, category_id akan menjadi foreign key yang menghubungkan setiap layanan dengan kategori tertentu. Pastikan category_id dihubungkan ke tabel categories dan diberi fitur cascading delete.

Setelah selesai, jalankan perintah migrasi:

php artisan migrate

Membuat Model dan Migration untuk Tabel BookingTransaction

Buat model dan migration untuk tabel BookingTransaction dengan perintah berikut:

php artisan make:model BookingTransaction -m

Buka file migration untuk BookingTransaction yang baru saja dibuat. Tambahkan kolom-kolom sesuai dengan kebutuhan aplikasi. Contoh kode untuk struktur tabel BookingTransaction:

Schema::create('booking_transactions', function (Blueprint $table) {
    $table->id();
    $table->foreignId('home_service_id')->constrained('home_services')->onDelete('cascade');
    $table->string('customer_name');
    $table->string('customer_phone');
    $table->date('booking_date');
    $table->string('status')->default('pending');
    $table->timestamps();
});

Dalam tabel ini, home_service_id adalah foreign key yang menghubungkan setiap transaksi dengan layanan tertentu. Kolom status dapat digunakan untuk mencatat status pemesanan, misalnya pending, confirmed, atau completed.

Jalankan migrasi setelah menyimpan file:

php artisan migrate

Cara Mengatur File Model untuk Fillable dan Relationship pada Model Category, HomeService, dan BookingTransaction

Pada langkah ini, kita akan menambahkan atribut fillable pada setiap model agar kolom-kolomnya dapat diisi massal (mass assignment) serta mengatur relasi antar model. Berikut penjelasannya untuk masing-masing model.

Mengatur Model Category

Buka file Category.php di dalam folder app/Models. Tambahkan properti fillable untuk kolom-kolom yang bisa diisi dan atur relasi dengan model HomeService. Berikut contoh kode lengkapnya:

namespace App\\\\Models;

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

class Category extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'description'];

    public function homeServices()
    {
        return $this->hasMany(HomeService::class);
    }
}

Pada model Category:

• Properti fillable memungkinkan kolom name dan description untuk diisi secara massal.
• Method homeServices() mendefinisikan relasi hasMany dengan model HomeService, yang artinya satu kategori dapat memiliki banyak layanan.

Mengatur Model HomeService

Buka file HomeService.php di dalam folder app/Models. Tambahkan properti fillable untuk kolom-kolom yang bisa diisi dan atur relasi dengan model Category serta BookingTransaction. Berikut contoh kode lengkapnya:

namespace App\\\\Models;

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

class HomeService extends Model
{
    use HasFactory;

    protected $fillable = ['category_id', 'service_name', 'service_description', 'price'];

    public function category()
    {
        return $this->belongsTo(Category::class);
    }

    public function bookingTransactions()
    {
        return $this->hasMany(BookingTransaction::class);
    }
}

Pada model HomeService:

• Properti fillable memungkinkan kolom category_id, service_name, service_description, dan price untuk diisi secara massal.
• Method category() mendefinisikan relasi belongsTo dengan model Category, yang menunjukkan bahwa setiap layanan home service terkait dengan satu kategori.
• Method bookingTransactions() mendefinisikan relasi hasMany dengan model BookingTransaction, yang artinya satu layanan dapat memiliki banyak transaksi booking.

Mengatur Model BookingTransaction

Buka file BookingTransaction.php di dalam folder app/Models. Tambahkan properti fillable untuk kolom-kolom yang bisa diisi dan atur relasi dengan model HomeService. Berikut contoh kode lengkapnya:

namespace App\\\\Models;

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

class BookingTransaction extends Model
{
    use HasFactory;

    protected $fillable = ['home_service_id', 'customer_name', 'customer_phone', 'booking_date', 'status'];

    public function homeService()
    {
        return $this->belongsTo(HomeService::class);
    }
}

Pada model BookingTransaction:

• Properti fillable memungkinkan kolom home_service_id, customer_name, customer_phone, booking_date, dan status untuk diisi secara massal.
• Method homeService() mendefinisikan relasi belongsTo dengan model HomeService, yang menunjukkan bahwa setiap transaksi booking terkait dengan satu layanan home service.

Ringkasan Relasi Antar Model

• Category memiliki relasi hasMany ke HomeService.
• HomeService memiliki relasi belongsTo ke Category dan hasMany ke BookingTransaction.
• BookingTransaction memiliki relasi belongsTo ke HomeService.

Dengan demikian, relasi antar model telah diatur, dan kolom-kolom yang diperlukan telah ditambahkan ke properti fillable.

Cara Menginstall Package Filament 3 dan Membuat Akun Super Admin

Langkah 1: Menginstall Package Filament 3

Pastikan proyek Laravel Anda sudah siap. Buka terminal di direktori proyek Laravel Anda, lalu install Filament versi 3 menggunakan Composer:

composer require filament/filament:"^3.0"

Perintah ini akan menginstal Filament versi 3 dan semua dependensinya pada proyek Laravel Anda.

Langkah 2: Memasang Filament dan Menyiapkan Konfigurasi

Setelah instalasi selesai, jalankan perintah berikut untuk mempublikasi aset dan konfigurasi default dari Filament:

php artisan vendor:publish --tag=filament-config

File konfigurasi ini berada di config/filament.php dan dapat Anda sesuaikan dengan kebutuhan proyek, seperti pengaturan URL dashboard, middleware, dan tema.

Langkah 3: Membuat Akun Super Admin dengan Perintah php artisan make:filament-user

Untuk mengakses dashboard Filament, Anda perlu membuat akun super admin yang memiliki akses penuh. Filament menyediakan perintah Artisan untuk membuat pengguna ini dengan cepat.

Jalankan perintah berikut di terminal:

php artisan make:filament-user

Perintah ini akan meminta Anda mengisi informasi akun untuk super admin. Masukkan data yang diminta sebagai berikut:

• Name: Masukkan nama untuk akun super admin, misalnya "Super Admin".
• Email: Masukkan email yang akan digunakan untuk login ke dashboard Filament, misalnya "[email protected]".
• Password: Masukkan password yang aman untuk akun super admin.
• Is Super Admin: Ketik yes untuk memberikan hak akses super admin.

Contoh input:

Name: Super Admin
Email: [email protected]
Password: password123
Is Super Admin (yes/no): yes

Setelah Anda mengisi semua data, akun super admin akan dibuat. Anda bisa menggunakannya untuk login ke dashboard Filament.

Langkah 4: Mengakses Dashboard Filament

Setelah akun super admin berhasil dibuat, Anda dapat mengakses dashboard Filament melalui URL default http://localhost/admin. Gunakan email dan password yang telah Anda buat untuk masuk.

Akun super admin kini memiliki akses penuh untuk mengelola semua fitur yang ada di dashboard Filament.

Cara Membuat Resource untuk CRUD Data Category, Home Service, dan Booking Transaction Menggunakan Filament

Filament menyediakan command yang mempermudah pembuatan resource CRUD secara otomatis. Berikut adalah langkah-langkahnya untuk membuat resource CRUD pada data Category, HomeService, dan BookingTransaction.

Langkah 1: Membuat Resource CRUD untuk Data Category

Buka terminal di direktori proyek Laravel Anda. Buat resource CRUD untuk data Category menggunakan perintah berikut:

php artisan make:filament-resource Category

Filament akan membuat file resource di dalam folder app/Filament/Resources/CategoryResource.php. Buka file tersebut untuk melihat pengaturan CRUD yang telah dihasilkan otomatis oleh Filament.

Di dalam CategoryResource.php, Anda dapat menyesuaikan form dan tabel untuk CRUD data Category. Berikut contoh penyesuaian di dalam method form dan table:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('name')
                ->required()
                ->label('Category Name'),
            Textarea::make('description')
                ->label('Description')
                ->nullable(),
        ]);
}

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('name')->label('Category Name'),
            TextColumn::make('description')->label('Description'),
            TextColumn::make('created_at')->dateTime(),
        ])
        ->filters([
            //
        ]);
}

Langkah 2: Membuat Resource CRUD untuk Data Home Service

Lanjutkan dengan membuat resource untuk HomeService menggunakan perintah berikut di terminal:

php artisan make:filament-resource HomeService

Filament akan membuat resource baru di app/Filament/Resources/HomeServiceResource.php. Buka file ini untuk mengonfigurasi form dan tabel CRUD untuk HomeService.

Berikut adalah contoh pengaturan method form dan table di dalam file HomeServiceResource.php:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Select::make('category_id')
                ->relationship('category', 'name')
                ->required()
                ->label('Category'),
            TextInput::make('service_name')
                ->required()
                ->label('Service Name'),
            Textarea::make('service_description')
                ->label('Service Description')
                ->nullable(),
            TextInput::make('price')
                ->numeric()
                ->required()
                ->label('Price'),
        ]);
}

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('category.name')->label('Category'),
            TextColumn::make('service_name')->label('Service Name'),
            TextColumn::make('price')->label('Price')->money('USD', true),
            TextColumn::make('created_at')->dateTime(),
        ])
        ->filters([
            //
        ]);
}

Cara Membuat Resource untuk Booking Transaction dan Menggunakan Component Wizard di Filament

Filament menyediakan cara mudah untuk membuat resource CRUD dengan tampilan bertahap (wizard) agar data yang kompleks bisa diinput dalam beberapa langkah. Berikut adalah panduan langkah demi langkah untuk membuat resource CRUD pada BookingTransaction dengan komponen Wizard untuk input data baru.

Langkah 1: Membuat Resource BookingTransaction

Buka terminal di direktori proyek Laravel Anda. Buat resource untuk BookingTransaction dengan perintah berikut:

php artisan make:filament-resource BookingTransaction

Filament akan menghasilkan file resource baru bernama BookingTransactionResource.php di dalam folder app/Filament/Resources. Buka file tersebut untuk mengatur form dengan komponen Wizard.

Langkah 2: Menggunakan Component Wizard untuk Input Data Baru

Pada file BookingTransactionResource.php, kita akan memodifikasi method form agar menggunakan komponen Wizard. Wizard ini akan membagi proses input data BookingTransaction menjadi beberapa langkah yang terstruktur.

Contoh kode untuk membuat form Wizard:

use Filament\\\\Forms\\\\Components\\\\Wizard;
use Filament\\\\Forms\\\\Components\\\\Wizard\\\\Step;
use Filament\\\\Forms\\\\Components\\\\TextInput;
use Filament\\\\Forms\\\\Components\\\\DatePicker;
use Filament\\\\Forms\\\\Components\\\\Select;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Wizard::make([
                Step::make('Customer Information')
                    ->schema([
                        TextInput::make('customer_name')
                            ->required()
                            ->label('Customer Name'),
                        TextInput::make('customer_phone')
                            ->required()
                            ->label('Customer Phone'),
                    ]),

                Step::make('Service Selection')
                    ->schema([
                        Select::make('home_service_id')
                            ->relationship('homeService', 'service_name')
                            ->required()
                            ->label('Select Home Service'),
                        DatePicker::make('booking_date')
                            ->required()
                            ->label('Booking Date'),
                    ]),

                Step::make('Booking Status')
                    ->schema([
                        Select::make('status')
                            ->options([
                                'pending' => 'Pending',
                                'confirmed' => 'Confirmed',
                                'completed' => 'Completed',
                            ])
                            ->default('pending')
                            ->required()
                            ->label('Status'),
                    ]),
            ])
        ]);
}

Pada kode di atas:

• Wizard::make([]) digunakan untuk membungkus form dalam format bertahap (wizard).
• Step::make('Customer Information') membuat langkah pertama, di mana informasi pelanggan seperti customer_name dan customer_phone diinput.
• Step::make('Service Selection') membuat langkah kedua, di mana pengguna memilih layanan home service dan tanggal booking.
• Step::make('Booking Status') membuat langkah ketiga, di mana pengguna memilih status pemesanan (status).

Dengan cara ini, proses input data untuk BookingTransaction dibagi menjadi beberapa tahap, sehingga lebih mudah dipahami dan diikuti oleh pengguna.

Langkah 3: Mengakses dan Menguji Form Wizard di Dashboard Filament

Setelah form wizard untuk BookingTransaction diatur, jalankan server Laravel:

php artisan serve

Kemudian buka URL http://localhost/admin di browser dan login dengan akun admin. Cari menu BookingTransaction dan coba tambahkan data baru. Anda akan melihat form bertahap yang dibuat menggunakan komponen Wizard, yang memandu pengguna dalam mengisi data BookingTransaction selangkah demi selangkah.

Dengan Wizard ini, input data yang kompleks dapat diatur dengan rapi, sehingga meningkatkan pengalaman pengguna dalam menggunakan dashboard Filament.

Penutup

Membangun fitur CRUD dan mengelola data dengan komponen seperti Filament Wizard sangat membantu dalam menciptakan aplikasi yang interaktif dan mudah digunakan. Dengan menggunakan Laravel dan Filament, programmer dapat membuat dashboard yang rapi, efisien, dan mendukung pengalaman pengguna yang lebih baik.

Namun, untuk benar-benar menguasai teknik-teknik seperti ini, belajar bersama mentor yang berpengalaman sangat direkomendasikan. Di BuildWithAngga, Anda bisa belajar bersama para expert yang siap membantu Anda memahami konsep-konsep penting dalam web development.

Dengan mengikuti kelas di BuildWithAngga, Anda akan mendapatkan akses selamanya ke materi kursus, konsultasi langsung dengan mentor, serta kesempatan membangun portfolio menarik yang dapat meningkatkan peluang Anda dalam dunia kerja.

Jadi, jangan ragu untuk bergabung dan memperdalam kemampuan programming Anda di BuildWithAngga!