Tutorial Multi Login Filament Admin dan Breeze Customer Website Ecommerce

Membangun website dengan fitur backend atau admin memerlukan sebuah dashboard untuk mengelola konten. Laravel menyediakan dua package yang sangat membantu dalam hal ini, yaitu Filament dan Breeze.

Apa Itu Filament?

Filament adalah package Laravel yang memudahkan pembuatan dashboard admin, mirip seperti kotak perkakas lengkap untuk membangun CMS (Content Management System) pada website. Dengan Filament, kita tidak perlu membuat fitur admin dari nol. Package ini sudah menyediakan fitur siap pakai seperti CRUD, manajemen pengguna, dan pengelolaan konten.

Bayangkan membangun rumah dengan kontraktor yang sudah menyediakan bahan bangunan, peralatan, dan pekerja ahli. Filament mempersingkat waktu dan tenaga, sehingga kita bisa fokus pada pengembangan fitur lainnya.

Keunggulan Filament:

• User Interface Modern: Tampilan yang menarik dan user-friendly memudahkan admin dalam mengelola konten.
• Mudah Diintegrasikan: Filament bisa digabungkan dengan package lain yang diperlukan dalam proyek.
• Customizable: Kita bisa menyesuaikan fitur dan tampilan dashboard sesuai kebutuhan.

Apa Itu Breeze?

Breeze adalah package Laravel untuk membangun fitur login dan register dengan mudah. Jika Filament adalah kontraktor untuk membangun rumah, Breeze seperti paket starter yang menyediakan pintu dan kunci untuk rumah tersebut. Breeze fokus pada fitur autentikasi dasar seperti login, register, dan verifikasi pengguna.

Keunggulan Breeze:

• Sederhana dan Mudah Digunakan: Cocok untuk proyek yang memerlukan fitur autentikasi dasar.
• Terintegrasi dengan Laravel: Breeze bekerja mulus dengan fitur Laravel lainnya.
• Starter Template: Breeze menyediakan template dasar untuk halaman login dan register, memudahkan kita memulai tanpa membuat semuanya dari awal.

Mengapa Memilih Filament dan Breeze?

Menggunakan Filament dan Breeze ibarat memilih alat yang tepat untuk pekerjaan tertentu. Filament membantu membangun CMS dengan cepat tanpa banyak detail teknis, sedangkan Breeze menyediakan fitur login dan register yang aman dan mudah. Dengan dua package ini, kita bisa menghemat waktu dan fokus pada fitur utama website tanpa perlu membuat semuanya dari nol.

Latihan Membuat Dua Dashboard Berbeda dengan Filament dan Breeze

Kali ini kita akan melakukan latihan menggunakan dua package Laravel yang sangat membantu, yaitu Filament dan Breeze, untuk membuat dua dashboard yang berbeda. Dashboard pertama akan kita buat untuk admin menggunakan Filament. Dashboard ini akan digunakan oleh admin untuk mengelola konten website, seperti menambah, mengedit, atau menghapus data dengan lebih mudah.

Sementara itu, dashboard kedua akan kita buat untuk customer menggunakan Breeze. Dashboard ini akan fokus pada fitur-fitur yang berhubungan dengan pengguna biasa, seperti login, registrasi, dan manajemen profil. Dengan Breeze, kita bisa menyediakan halaman-halaman sederhana yang mudah digunakan oleh customer.

Dengan menggunakan dua package ini, kita bisa membedakan antara hak akses dan tampilan untuk admin dan customer. Ini akan membantu kita mengelola website dengan lebih baik dan memberikan pengalaman pengguna yang optimal bagi kedua tipe pengguna tersebut.

Tutorial Membuat Proyek Sewa Barang dengan Laravel 11

Pada tutorial ini, kita akan membuat proyek sewa barang menggunakan Laravel 11. Kita akan memulai dari tahap instalasi hingga membuat fitur-fitur penting seperti manajemen barang, pelanggan, dan transaksi sewa. Selain itu, kita juga akan mengintegrasikan package Filament untuk dashboard admin dan Breeze untuk fitur autentikasi customer.

1) Membuat Proyek Laravel 11

Pertama-tama, kita perlu membuat proyek Laravel 11. Pastikan Anda sudah menginstal Composer dan PHP di sistem Anda.

composer create-project laravel/laravel sewa-barang "11.*"

Setelah proyek selesai diunduh, masuk ke folder proyek dengan perintah berikut:

cd sewa-barang

2) Menyiapkan Database

Buat database baru di MySQL, misalnya dengan nama sewa_barang. Kemudian, buka file .env di proyek Laravel dan sesuaikan konfigurasi database seperti berikut:

DB_DATABASE=sewa_barang
DB_USERNAME=root
DB_PASSWORD=

Jangan lupa untuk menjalankan migrasi awal untuk membuat tabel-tabel bawaan Laravel:

php artisan migrate

3) Membuat Model dan Migration

Kita akan membuat model dan migration untuk entitas yang diperlukan, seperti Barang, Pelanggan, dan TransaksiSewa.

php artisan make:model Barang -m
php artisan make:model Pelanggan -m
php artisan make:model TransaksiSewa -m

Kemudian, buka file migrasi di folder database/migrations dan tambahkan struktur tabelnya.

Barang Migration:

Schema::create('barangs', function (Blueprint $table) {
    $table->id();
    $table->string('nama');
    $table->text('deskripsi');
    $table->integer('stok');
    $table->decimal('harga_sewa', 10, 2);
    $table->timestamps();
});

Pelanggan Migration:

Schema::create('pelanggans', function (Blueprint $table) {
    $table->id();
    $table->string('nama');
    $table->string('email')->unique();
    $table->string('telepon');
    $table->text('alamat');
    $table->timestamps();
});

TransaksiSewa Migration:

Schema::create('transaksi_sewas', function (Blueprint $table) {
    $table->id();
    $table->foreignId('barang_id')->constrained('barangs');
    $table->foreignId('pelanggan_id')->constrained('pelanggans');
    $table->date('tanggal_mulai');
    $table->date('tanggal_selesai');
    $table->decimal('total_harga', 10, 2);
    $table->timestamps();
});

Jalankan migrasi untuk membuat tabel-tabel tersebut:

php artisan migrate

4) Membuat Relasi Antar Model

Selanjutnya, tambahkan relasi antar model. Buka file model Barang, Pelanggan, dan TransaksiSewa yang berada di folder app/Models.

Barang Model:

public function transaksiSewa()
{
    return $this->hasMany(TransaksiSewa::class);
}

Pelanggan Model:

public function transaksiSewa()
{
    return $this->hasMany(TransaksiSewa::class);
}

TransaksiSewa Model:

public function barang()
{
    return $this->belongsTo(Barang::class);
}

public function pelanggan()
{
    return $this->belongsTo(Pelanggan::class);
}

Menginstall Package Filament dan Breeze

1) Menginstall Filament

Filament digunakan untuk membuat dashboard admin. Instalasi Filament sangat mudah dan bisa dilakukan dengan langkah berikut:

Jalankan perintah berikut untuk menginstal Filament:

composer require filament/filament

Setelah instalasi selesai, jalankan perintah berikut untuk mempublikasikan aset dan konfigurasi Filament:

php artisan filament:install

Buat user admin untuk login ke dashboard Filament:

php artisan make:filament-user

Ikuti instruksi yang muncul untuk membuat akun admin.

2) Menginstall Breeze

Breeze digunakan untuk fitur autentikasi seperti login dan register untuk customer.

Jalankan perintah berikut untuk menginstal Breeze:

composer require laravel/breeze --dev

Jalankan perintah untuk menginstal scaffolding Breeze:

php artisan breeze:install

Pilih Blade atau React sesuai kebutuhan tampilan autentikasi Anda, lalu jalankan perintah:

npm install && npm run dev

Jalankan migrasi untuk membuat tabel pengguna:

php artisan migrate

Dengan instalasi Filament dan Breeze, kita bisa memiliki dua dashboard yang berbeda: satu untuk admin dengan Filament dan satu untuk customer dengan Breeze. Selanjutnya, kita bisa mengembangkan fitur-fitur lebih lanjut seperti manajemen barang dan transaksi sewa.

Membuat Akun Super Admin dan Resource di Filament

Dalam proyek Laravel yang menggunakan Filament untuk dashboard admin, kita bisa dengan mudah membuat akun super admin dan resource yang dibutuhkan untuk mengelola data. Berikut adalah langkah-langkah membuat akun super admin menggunakan command Artisan, serta cara membuat resource seperti barang, pelanggan, dan transaksi.

Membuat Akun Super Admin dengan Command Artisan

Pastikan Filament sudah terinstal di proyek Laravel Anda. Jika belum, Anda bisa menginstalnya dengan perintah berikut:

composer require filament/filament

Untuk membuat akun super admin, jalankan command Artisan berikut:

php artisan make:filament-user

Anda akan diminta memasukkan beberapa informasi seperti nama, email, dan password. Masukkan informasi yang sesuai.

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

Dengan memilih yes saat ditanya apakah akun tersebut adalah super admin, Anda memberikan hak akses penuh pada akun tersebut. Akun super admin ini dapat login ke dashboard Filament menggunakan email dan password yang sudah ditentukan.

Membuat Resource di Filament

Untuk mengelola data dari dashboard admin, kita bisa membuat resource di Filament. Resource ini memungkinkan kita untuk membuat fitur CRUD (Create, Read, Update, Delete) secara otomatis untuk model tertentu.

Untuk membuat resource Barang, jalankan command berikut:

php artisan make:filament-resource Barang

Ini akan menghasilkan resource lengkap dengan file form dan table di folder app/Filament/Resources/BarangResource. Anda bisa menyesuaikan field di form dan table sesuai dengan struktur tabel Barang.

Selanjutnya, untuk membuat resource Pelanggan, jalankan command:

php artisan make:filament-resource Pelanggan

Resource ini memungkinkan Anda untuk mengelola data pelanggan langsung dari dashboard. File resource akan dihasilkan di folder app/Filament/Resources/PelangganResource, dan Anda bisa menyesuaikan field dan validasi yang diperlukan.

Terakhir, buat resource untuk TransaksiSewa dengan perintah:

php artisan make:filament-resource TransaksiSewa

Dengan resource ini, admin dapat mengelola transaksi sewa barang. File resource akan berada di folder app/Filament/Resources/TransaksiSewaResource. Anda dapat menambahkan validasi khusus atau menyesuaikan tampilan form sesuai dengan kebutuhan bisnis.

Mengatur Form dan Table pada Resource Barang di Filament

Dalam resource Barang, kita bisa mengatur tampilan form dan table agar sesuai dengan kebutuhan pengelolaan data barang. Pengaturan ini meliputi penambahan field, validasi, dan tampilan table yang lebih informatif. Berikut ini adalah cara mengatur form dan table pada file BarangResource.php.

Mengatur Form pada Resource Barang

Buka file BarangResource.php yang berada di folder app/Filament/Resources/BarangResource.

Pada method form(), tambahkan field-field yang diperlukan. Misalnya, kita ingin menambahkan field nama, deskripsi, stok, dan harga_sewa. Berikut contoh konfigurasinya:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('nama')
                ->required()
                ->label('Nama Barang'),
            Textarea::make('deskripsi')
                ->required()
                ->label('Deskripsi Barang'),
            NumberInput::make('stok')
                ->required()
                ->label('Stok Barang')
                ->min(1),
            TextInput::make('harga_sewa')
                ->required()
                ->label('Harga Sewa')
                ->numeric(),
        ]);
}

Penjelasan:

• TextInput::make('nama') membuat input teks untuk nama barang dengan validasi required.
• Textarea::make('deskripsi') membuat area teks untuk deskripsi barang.
• NumberInput::make('stok') membuat input angka untuk stok barang dengan minimum nilai 1.
• TextInput::make('harga_sewa') membuat input teks untuk harga sewa yang diharuskan numerik.

Anda juga bisa menambahkan validasi tambahan atau logika khusus pada field dengan chaining method seperti minLength(), maxLength(), atau regex() sesuai kebutuhan.

Mengatur Table pada Resource Barang

Pada method table(), tambahkan kolom-kolom yang ingin ditampilkan di table. Berikut ini adalah contoh pengaturan table:

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('id')
                ->label('ID')
                ->sortable(),
            TextColumn::make('nama')
                ->label('Nama Barang')
                ->sortable()
                ->searchable(),
            TextColumn::make('stok')
                ->label('Stok')
                ->sortable(),
            TextColumn::make('harga_sewa')
                ->label('Harga Sewa')
                ->money('idr', true),
            TextColumn::make('created_at')
                ->label('Tanggal Dibuat')
                ->dateTime('d-M-Y H:i'),
        ])
        ->filters([
            // Tambahkan filter jika diperlukan
        ])
        ->actions([
            Tables\\\\Actions\\\\EditAction::make(),
            Tables\\\\Actions\\\\DeleteAction::make(),
        ])
        ->bulkActions([
            Tables\\\\Actions\\\\DeleteBulkAction::make(),
        ]);
}

Penjelasan:

• TextColumn::make('id') menampilkan kolom ID dengan opsi sortable.
• TextColumn::make('nama') menampilkan nama barang yang bisa diurutkan dan dicari.
• TextColumn::make('stok') menampilkan stok barang.
• TextColumn::make('harga_sewa') menampilkan harga sewa dengan format mata uang Rupiah.
• TextColumn::make('created_at') menampilkan tanggal pembuatan dalam format d-M-Y H:i.

Anda bisa menambahkan filter untuk memudahkan pencarian data spesifik dengan menambahkan konfigurasi pada >filters([]).

Tambahkan aksi seperti edit dan delete untuk memudahkan pengelolaan data langsung dari table dengan konfigurasi pada >actions([]).

Mengatur Form dan Table pada Resource Pelanggan

Untuk mengelola data pelanggan dengan lebih efektif di dashboard admin, kita perlu mengatur form dan table pada resource Pelanggan. Berikut langkah-langkahnya:

Mengatur Form pada Resource Pelanggan

Buka file PelangganResource.php yang berada di folder app/Filament/Resources/PelangganResource.

Pada method form(), tambahkan field-field yang diperlukan untuk input data pelanggan seperti nama, email, telepon, dan alamat. Berikut contoh konfigurasinya:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('nama')
                ->required()
                ->label('Nama Lengkap'),
            TextInput::make('email')
                ->required()
                ->email()
                ->label('Email'),
            TextInput::make('telepon')
                ->required()
                ->label('Nomor Telepon'),
            Textarea::make('alamat')
                ->required()
                ->label('Alamat Lengkap'),
        ]);
}

Penjelasan:

• TextInput::make('nama') membuat input teks untuk nama lengkap pelanggan dengan validasi required.
• TextInput::make('email') membuat input teks untuk email dengan validasi required dan format email.
• TextInput::make('telepon') membuat input teks untuk nomor telepon yang juga diharuskan.
• Textarea::make('alamat') membuat area teks untuk alamat lengkap pelanggan.

Sesuaikan field dan validasi sesuai kebutuhan, misalnya menambahkan validasi unik untuk email agar tidak ada data duplikat.

Mengatur Table pada Resource Pelanggan

Pada method table(), tambahkan kolom-kolom yang ingin ditampilkan di table, seperti id, nama, email, telepon, dan alamat. Berikut ini adalah contoh pengaturan table:

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('id')
                ->label('ID')
                ->sortable(),
            TextColumn::make('nama')
                ->label('Nama Pelanggan')
                ->sortable()
                ->searchable(),
            TextColumn::make('email')
                ->label('Email')
                ->sortable()
                ->searchable(),
            TextColumn::make('telepon')
                ->label('Telepon')
                ->sortable(),
            TextColumn::make('alamat')
                ->label('Alamat')
                ->wrap(),
            TextColumn::make('created_at')
                ->label('Tanggal Bergabung')
                ->dateTime('d-M-Y H:i'),
        ])
        ->filters([
            // Tambahkan filter jika diperlukan
        ])
        ->actions([
            Tables\\\\Actions\\\\EditAction::make(),
            Tables\\\\Actions\\\\DeleteAction::make(),
        ])
        ->bulkActions([
            Tables\\\\Actions\\\\DeleteBulkAction::make(),
        ]);
}

Penjelasan:

• TextColumn::make('id') menampilkan ID pelanggan dengan opsi sortable.
• TextColumn::make('nama') dan TextColumn::make('email') bisa diurutkan dan dicari, memudahkan pencarian data spesifik.
• TextColumn::make('telepon') dan TextColumn::make('alamat') menampilkan data nomor telepon dan alamat pelanggan.
• TextColumn::make('created_at') menampilkan tanggal pelanggan bergabung dengan format d-M-Y H:i.

Anda dapat menambahkan filter atau aksi lainnya sesuai dengan kebutuhan untuk memudahkan pengelolaan data pelanggan langsung dari table.

Mengatur Form dan Table pada Resource TransaksiSewa

Resource TransaksiSewa digunakan untuk mengelola data transaksi penyewaan barang. Berikut cara mengatur form dan table pada resource ini.

Mengatur Form pada Resource TransaksiSewa

Buka file TransaksiSewaResource.php yang berada di folder app/Filament/Resources/TransaksiSewaResource.

Pada method form(), tambahkan field-field yang diperlukan untuk input data transaksi sewa, seperti barang_id, pelanggan_id, tanggal_mulai, tanggal_selesai, dan total_harga. Berikut contoh konfigurasinya:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Select::make('barang_id')
                ->relationship('barang', 'nama')
                ->required()
                ->label('Barang yang Disewa'),
            Select::make('pelanggan_id')
                ->relationship('pelanggan', 'nama')
                ->required()
                ->label('Nama Pelanggan'),
            DatePicker::make('tanggal_mulai')
                ->required()
                ->label('Tanggal Mulai Sewa'),
            DatePicker::make('tanggal_selesai')
                ->required()
                ->label('Tanggal Selesai Sewa'),
            TextInput::make('total_harga')
                ->required()
                ->numeric()
                ->label('Total Harga Sewa'),
        ]);
}

Penjelasan:

• Select::make('barang_id') membuat dropdown untuk memilih barang yang disewa berdasarkan relasi dengan model Barang.
• Select::make('pelanggan_id') membuat dropdown untuk memilih pelanggan berdasarkan relasi dengan model Pelanggan.
• DatePicker::make('tanggal_mulai') dan DatePicker::make('tanggal_selesai') digunakan untuk memilih tanggal mulai dan selesai penyewaan.
• TextInput::make('total_harga') membuat input teks untuk total harga sewa dengan format numerik.

Pastikan relasi barang dan pelanggan sudah didefinisikan pada model TransaksiSewa agar data bisa ditampilkan dengan benar di dropdown.

Mengatur Table pada Resource TransaksiSewa

Pada method table(), tambahkan kolom-kolom yang ingin ditampilkan di table seperti id, barang.nama, pelanggan.nama, tanggal_mulai, tanggal_selesai, dan total_harga. Berikut ini adalah contoh pengaturan table:

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('id')
                ->label('ID')
                ->sortable(),
            TextColumn::make('barang.nama')
                ->label('Barang')
                ->sortable()
                ->searchable(),
            TextColumn::make('pelanggan.nama')
                ->label('Pelanggan')
                ->sortable()
                ->searchable(),
            TextColumn::make('tanggal_mulai')
                ->label('Tanggal Mulai')
                ->dateTime('d-M-Y'),
            TextColumn::make('tanggal_selesai')
                ->label('Tanggal Selesai')
                ->dateTime('d-M-Y'),
            TextColumn::make('total_harga')
                ->label('Total Harga')
                ->money('idr', true),
        ])
        ->filters([
            // Tambahkan filter jika diperlukan
        ])
        ->actions([
            Tables\\\\Actions\\\\EditAction::make(),
            Tables\\\\Actions\\\\DeleteAction::make(),
        ])
        ->bulkActions([
            Tables\\\\Actions\\\\DeleteBulkAction::make(),
        ]);
}

Penjelasan:

• TextColumn::make('id') menampilkan ID transaksi.
• TextColumn::make('barang.nama') dan TextColumn::make('pelanggan.nama') menampilkan nama barang dan nama pelanggan yang terhubung dengan relasi barang dan pelanggan.
• TextColumn::make('tanggal_mulai') dan TextColumn::make('tanggal_selesai') menampilkan tanggal mulai dan selesai penyewaan.
• TextColumn::make('total_harga') menampilkan total harga sewa dengan format mata uang Rupiah.

Anda bisa menambahkan filter tambahan untuk memudahkan pencarian data transaksi berdasarkan tanggal atau pelanggan.

Membuat Halaman Barang dan Transaksi untuk Customer Menggunakan Breeze

Setelah customer berhasil mendaftar dan login menggunakan Breeze, kita perlu menyediakan halaman khusus untuk menampilkan data barang yang tersedia serta riwayat transaksi penyewaan mereka. Berikut adalah langkah-langkah lengkap untuk membuat halaman Barang dan Transaksi yang dapat diakses oleh customer.

Mengatur Rute dan Controller

Pertama, buat dua controller baru untuk mengelola halaman barang dan transaksi:

php artisan make:controller Customer/BarangController
php artisan make:controller Customer/TransaksiController

Dua controller ini akan menangani logika untuk menampilkan barang dan transaksi kepada customer.

Pada file BarangController.php, tambahkan method index() untuk menampilkan daftar barang:

namespace App\\\\Http\\\\Controllers\\\\Customer;

use App\\\\Http\\\\Controllers\\\\Controller;
use App\\\\Models\\\\Barang;

class BarangController extends Controller
{
    public function index()
    {
        $barangs = Barang::all(); // Mengambil semua data barang
        return view('customer.barang.index', compact('barangs'));
    }
}

Selanjutnya, pada file TransaksiController.php, tambahkan method index() untuk menampilkan riwayat transaksi customer:

namespace App\\\\Http\\\\Controllers\\\\Customer;

use App\\\\Http\\\\Controllers\\\\Controller;
use App\\\\Models\\\\TransaksiSewa;
use Illuminate\\\\Support\\\\Facades\\\\Auth;

class TransaksiController extends Controller
{
    public function index()
    {
        $transaksis = TransaksiSewa::where('pelanggan_id', Auth::id())->get(); // Mengambil transaksi berdasarkan ID customer
        return view('customer.transaksi.index', compact('transaksis'));
    }
}

Pada method ini, kita menggunakan Auth::id() untuk mengambil ID customer yang sedang login.

Selanjutnya, buat rute di file web.php untuk mengakses halaman barang dan transaksi:

Route::middleware(['auth'])->group(function () {
    Route::get('/barang', [App\\\\Http\\\\Controllers\\\\Customer\\\\BarangController::class, 'index'])->name('customer.barang.index');
    Route::get('/transaksi', [App\\\\Http\\\\Controllers\\\\Customer\\\\TransaksiController::class, 'index'])->name('customer.transaksi.index');
});

Pastikan rute ini dilindungi oleh middleware auth agar hanya customer yang sudah login yang bisa mengaksesnya.

Membuat View untuk Halaman Barang

Buat folder barang di dalam folder resources/views/customer dan buat file index.blade.php di dalamnya. File ini akan menampilkan daftar barang yang tersedia untuk disewa.

Pada file index.blade.php, tambahkan kode berikut untuk menampilkan daftar barang:

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Daftar Barang</h1>
        <div class="row">
            @foreach($barangs as $barang)
                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">{{ $barang->nama }}</h5>
                            <p class="card-text">{{ $barang->deskripsi }}</p>
                            <p class="card-text">Stok: {{ $barang->stok }}</p>
                            <p class="card-text">Harga Sewa: Rp{{ number_format($barang->harga_sewa, 0, ',', '.') }}</p>
                            <a href="#" class="btn btn-primary">Sewa Sekarang</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection

Penjelasan:

• Menggunakan @foreach($barangs as $barang) untuk menampilkan daftar barang dalam bentuk kartu.
• Setiap barang akan memiliki informasi seperti nama, deskripsi, stok, dan harga sewa.

Membuat View untuk Halaman Transaksi

Buat folder transaksi di dalam folder resources/views/customer dan buat file index.blade.php di dalamnya. File ini akan menampilkan riwayat transaksi penyewaan barang oleh customer.

Pada file index.blade.php, tambahkan kode berikut untuk menampilkan daftar transaksi:

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Riwayat Transaksi</h1>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Barang</th>
                    <th>Tanggal Mulai</th>
                    <th>Tanggal Selesai</th>
                    <th>Total Harga</th>
                </tr>
            </thead>
            <tbody>
                @foreach($transaksis as $transaksi)
                    <tr>
                        <td>{{ $transaksi->id }}</td>
                        <td>{{ $transaksi->barang->nama }}</td>
                        <td>{{ $transaksi->tanggal_mulai->format('d-m-Y') }}</td>
                        <td>{{ $transaksi->tanggal_selesai->format('d-m-Y') }}</td>
                        <td>Rp{{ number_format($transaksi->total_harga, 0, ',', '.') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

Penjelasan:

• Menampilkan data transaksi dalam bentuk tabel dengan kolom seperti ID transaksi, nama barang, tanggal mulai dan selesai sewa, serta total harga.
• Menggunakan relasi barang->nama untuk menampilkan nama barang yang disewa pada setiap transaksi.

Membuat Fitur Penyewaan Barang oleh Customer

Untuk memungkinkan customer menyewa barang, kita perlu menambahkan beberapa fitur, termasuk form pemesanan, logika penyewaan, dan penyimpanan transaksi ke dalam database. Berikut adalah langkah-langkah lengkap untuk membuat fitur ini.

Menambahkan Rute dan Controller untuk Proses Penyewaan

Buat method baru sewa() di dalam BarangController untuk menampilkan form penyewaan barang:

public function sewa($id)
{
    $barang = Barang::findOrFail($id); // Mengambil data barang berdasarkan ID
    return view('customer.barang.sewa', compact('barang'));
}

Buat method storeSewa() di dalam BarangController untuk menyimpan data transaksi penyewaan:

public function storeSewa(Request $request, $id)
{
    $request->validate([
        'tanggal_mulai' => 'required|date',
        'tanggal_selesai' => 'required|date|after:tanggal_mulai',
    ]);

    $barang = Barang::findOrFail($id);

    // Hitung total harga sewa
    $total_harga = $barang->harga_sewa * $request->input('lama_sewa');

    // Simpan transaksi sewa
    TransaksiSewa::create([
        'barang_id' => $barang->id,
        'pelanggan_id' => Auth::id(),
        'tanggal_mulai' => $request->input('tanggal_mulai'),
        'tanggal_selesai' => $request->input('tanggal_selesai'),
        'total_harga' => $total_harga,
    ]);

    // Kurangi stok barang
    $barang->stok -= 1;
    $barang->save();

    return redirect()->route('customer.transaksi.index')->with('success', 'Barang berhasil disewa!');
}

Penjelasan:

• storeSewa() memvalidasi input dari form, menghitung total harga sewa, menyimpan data transaksi ke tabel transaksi_sewa, dan mengurangi stok barang.

Tambahkan rute baru di web.php untuk proses penyewaan barang:

Route::middleware(['auth'])->group(function () {
    Route::get('/barang/{id}/sewa', [App\\\\Http\\\\Controllers\\\\Customer\\\\BarangController::class, 'sewa'])->name('customer.barang.sewa');
    Route::post('/barang/{id}/sewa', [App\\\\Http\\\\Controllers\\\\Customer\\\\BarangController::class, 'storeSewa'])->name('customer.barang.storeSewa');
});

Penjelasan:

• Rute get digunakan untuk menampilkan form penyewaan.
• Rute post digunakan untuk menyimpan data penyewaan setelah customer mengisi form.

Membuat View untuk Form Penyewaan Barang

Buat file sewa.blade.php di dalam folder resources/views/customer/barang. File ini akan berfungsi sebagai form untuk penyewaan barang.

Tambahkan kode berikut pada file sewa.blade.php:

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Sewa Barang: {{ $barang->nama }}</h1>
        <form method="POST" action="{{ route('customer.barang.storeSewa', $barang->id) }}">
            @csrf
            <div class="mb-3">
                <label for="tanggal_mulai" class="form-label">Tanggal Mulai Sewa</label>
                <input type="date" class="form-control" id="tanggal_mulai" name="tanggal_mulai" required>
            </div>
            <div class="mb-3">
                <label for="tanggal_selesai" class="form-label">Tanggal Selesai Sewa</label>
                <input type="date" class="form-control" id="tanggal_selesai" name="tanggal_selesai" required>
            </div>
            <button type="submit" class="btn btn-primary">Sewa Sekarang</button>
        </form>
    </div>
@endsection

Penjelasan:

• Form ini memungkinkan customer untuk memasukkan tanggal mulai dan tanggal selesai sewa.
• Aksi form mengarah ke method storeSewa() yang akan memproses data penyewaan.

Menampilkan Data Penyewaan pada Halaman Transaksi

Pada file TransaksiController.php, pastikan data barang yang disewa juga ditampilkan pada view index.blade.php di halaman transaksi:

public function index()
{
    $transaksis = TransaksiSewa::with('barang') // Menambahkan relasi barang
        ->where('pelanggan_id', Auth::id())
        ->get();
    return view('customer.transaksi.index', compact('transaksis'));
}

Tambahkan data barang di tabel transaksi di view index.blade.php:

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Riwayat Transaksi</h1>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Barang</th>
                    <th>Tanggal Mulai</th>
                    <th>Tanggal Selesai</th>
                    <th>Total Harga</th>
                </tr>
            </thead>
            <tbody>
                @foreach($transaksis as $transaksi)
                    <tr>
                        <td>{{ $transaksi->id }}</td>
                        <td>{{ $transaksi->barang->nama }}</td>
                        <td>{{ $transaksi->tanggal_mulai->format('d-m-Y') }}</td>
                        <td>{{ $transaksi->tanggal_selesai->format('d-m-Y') }}</td>
                        <td>Rp{{ number_format($transaksi->total_harga, 0, ',', '.') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

Penjelasan:

• Data barang yang disewa ditampilkan menggunakan relasi barang->nama.
• Semua transaksi disusun berdasarkan ID, nama barang, tanggal mulai, tanggal selesai, dan total harga.

Cara Admin Mengkonfirmasi Transaksi dari Customer melalui Halaman Admin Filament

Untuk mengelola dan mengkonfirmasi transaksi dari customer, admin dapat menggunakan halaman admin yang sudah disiapkan menggunakan Filament. Berikut adalah langkah-langkah yang perlu dilakukan untuk menambahkan fitur konfirmasi transaksi pada dashboard admin Filament.

Menambahkan Status Konfirmasi pada Tabel TransaksiSewa

Tambahkan kolom status pada tabel transaksi_sewas untuk menyimpan status konfirmasi transaksi. Buka file migrasi untuk transaksi_sewas atau buat migrasi baru untuk menambahkan kolom ini:

php artisan make:migration add_status_to_transaksi_sewas_table --table=transaksi_sewas

Pada file migrasi yang baru dibuat, tambahkan kolom status:

Schema::table('transaksi_sewas', function (Blueprint $table) {
    $table->string('status')->default('pending'); // Default status adalah 'pending'
});

Jalankan migrasi:

php artisan migrate

Dengan penambahan kolom ini, setiap transaksi yang masuk akan memiliki status pending secara default.

Mengubah Resource TransaksiSewa di Filament

Buka file TransaksiSewaResource.php yang ada di app/Filament/Resources/TransaksiSewaResource.

Pada bagian form, tambahkan field status sebagai dropdown agar admin bisa memilih status konfirmasi:

Select::make('status')
    ->options([
        'pending' => 'Pending',
        'confirmed' => 'Confirmed',
        'rejected' => 'Rejected',
    ])
    ->label('Status Konfirmasi')
    ->required(),

Pada bagian table, tambahkan kolom status agar admin bisa melihat status transaksi secara langsung:

TextColumn::make('status')
    ->label('Status')
    ->sortable(),

Dengan perubahan ini, admin bisa melihat dan mengubah status transaksi langsung dari halaman daftar transaksi di Filament.

Menambahkan Aksi Kustom untuk Konfirmasi Transaksi

Untuk memudahkan admin mengkonfirmasi transaksi, tambahkan aksi kustom di bagian table() pada file TransaksiSewaResource.php:

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('id')->label('ID'),
            TextColumn::make('barang.nama')->label('Barang'),
            TextColumn::make('pelanggan.nama')->label('Pelanggan'),
            TextColumn::make('tanggal_mulai')->label('Tanggal Mulai')->dateTime('d-M-Y'),
            TextColumn::make('tanggal_selesai')->label('Tanggal Selesai')->dateTime('d-M-Y'),
            TextColumn::make('total_harga')->label('Total Harga')->money('idr', true),
            TextColumn::make('status')->label('Status')->sortable(),
        ])
        ->actions([
            Tables\\\\Actions\\\\EditAction::make(),
            Tables\\\\Actions\\\\DeleteAction::make(),
            Action::make('confirm')
                ->label('Konfirmasi')
                ->action(function ($record) {
                    $record->status = 'confirmed';
                    $record->save();
                    Notification::make()
                        ->title('Transaksi dikonfirmasi!')
                        ->success()
                        ->send();
                })
                ->visible(fn ($record) => $record->status === 'pending'), // Hanya tampil jika status pending
            Action::make('reject')
                ->label('Tolak')
                ->action(function ($record) {
                    $record->status = 'rejected';
                    $record->save();
                    Notification::make()
                        ->title('Transaksi ditolak!')
                        ->danger()
                        ->send();
                })
                ->visible(fn ($record) => $record->status === 'pending'), // Hanya tampil jika status pending
        ]);
}

Penjelasan:

• Aksi confirm dan reject ditambahkan untuk memudahkan admin mengubah status transaksi menjadi confirmed atau rejected.
• Aksi ini hanya akan terlihat jika status transaksi masih pending.

Menggunakan Halaman Admin untuk Konfirmasi

Setelah melakukan konfigurasi di atas, admin dapat masuk ke dashboard Filament, kemudian memilih menu Transaksi Sewa. Di sana, admin akan melihat daftar transaksi dengan opsi untuk mengedit, menghapus, atau mengkonfirmasi transaksi.

Untuk mengkonfirmasi, admin cukup mengklik tombol Konfirmasi pada transaksi yang statusnya masih pending. Setelah itu, status transaksi akan berubah menjadi confirmed, dan customer akan mengetahui bahwa transaksi mereka telah dikonfirmasi.

Dengan cara ini, admin dapat dengan mudah mengelola dan mengkonfirmasi transaksi penyewaan barang langsung dari halaman admin Filament tanpa perlu masuk ke database secara manual.

Penutup

Laravel adalah framework PHP yang sangat cocok dipelajari, terutama bagi yang ingin mengembangkan aplikasi web dengan cepat dan efisien. Dengan fitur-fitur modern yang dimilikinya, Laravel tidak hanya memudahkan pengembangan proyek skala kecil hingga besar, tetapi juga tetap relevan dan populer untuk beberapa tahun ke depan.

Bagi Anda yang sedang mencari platform belajar Laravel yang komprehensif, BuildWithAngga adalah tempat yang tepat. Bersama para mentor expert dan berpengalaman, Anda bisa mempelajari Laravel dari dasar hingga tingkat lanjutan. Belajar di BuildWithAngga memberikan Anda akses seumur hidup ke semua kelas dan materi, sehingga Anda bisa belajar kapan saja dan di mana saja.

Tidak hanya itu, jika Anda menemui kendala dalam proses belajar atau mengerjakan proyek seperti skripsi, Anda bisa bertanya langsung kepada mentor. Dengan demikian, Anda akan lebih produktif dan proyek skripsi Anda menjadi lebih menarik serta memiliki nilai lebih. Ayo, belajar Laravel sekarang di BuildWithAngga dan raih pengalaman belajar yang menyenangkan bersama para mentor terbaik!