Kali ini kita akan belajar membuat halaman admin dan Content Management System (CMS) untuk website order coffee di sebuah cafe shop dengan menggunakan Laravel 10 dan Filament. Tujuan dari latihan ini adalah memberikan kemampuan bagi pemilik cafe untuk mengelola menu, harga, dan berbagai konten lainnya secara mandiri, tanpa perlu pengetahuan mendalam tentang coding.
Halaman admin yang akan kita buat ini nantinya berfungsi sebagai pusat kendali untuk segala aktivitas manajemen konten di website, seperti menambah atau menghapus menu coffee, membuat promo spesial, serta memperbarui informasi yang tampil di website secara real-time.
Laravel 10 dan Filament: Kombinasi Tepat untuk Dashboard dan CMS
Menggunakan Laravel 10 dan Filament merupakan pilihan yang tepat dalam membangun dashboard serta CMS yang aman, cepat, dan mudah dimaintenance. Laravel 10, sebagai framework PHP yang sudah terkenal dengan keamanannya, akan memberikan fondasi yang kuat untuk website Anda. Di sisi lain, Filament memungkinkan Anda membuat dashboard admin yang interaktif dan mudah digunakan dengan antarmuka yang sederhana namun fungsional.
Jika diibaratkan, Laravel 10 adalah fondasi yang kokoh, sementara Filament adalah alat yang memudahkan Anda untuk membangun struktur di atasnya, seperti merancang tampilan dan fungsi admin dengan mudah. Kombinasi ini tidak hanya memudahkan dari segi pengembangan, tetapi juga dalam hal maintenance dan perbaikan di masa depan.
Dengan Filament, pemilik cafe shop dapat melakukan perubahan pada konten website kapan saja tanpa perlu repot menghubungi developer. Inilah yang membuat Laravel 10 dan Filament sangat cocok untuk membangun CMS yang handal, efisien, dan aman dalam mengelola informasi di website.
Cara Membuat Projek Laravel 10 Menggunakan Composer dan Mengatur File .env MySQL
Untuk memulai projek dengan Laravel 10, kita perlu menggunakan Composer, yaitu dependency manager untuk PHP yang memudahkan kita dalam mengelola paket-paket yang dibutuhkan oleh Laravel.
Selain itu, kita juga harus mengonfigurasi koneksi database MySQL di file .env agar aplikasi Laravel dapat terhubung dengan database. Berikut adalah langkah-langkah dan contoh lengkap untuk membuat projek Laravel 10 beserta pengaturan MySQL.
1. Instalasi Laravel 10 Menggunakan Composer
Langkah pertama adalah membuka terminal atau command prompt, kemudian menjalankan perintah Composer untuk membuat projek Laravel 10.
composer create-project --prefer-dist laravel/laravel order-coffee "10.*"
Perintah ini akan mengunduh dan menginstall Laravel versi 10 ke dalam folder bernama order-coffee. Anda bisa mengganti nama folder tersebut sesuai dengan kebutuhan projek Anda.
Setelah instalasi selesai, masuk ke direktori projek:
cd order-coffee
Kemudian, jalankan server lokal Laravel dengan perintah berikut:
php artisan serve
Server Laravel akan berjalan pada http://localhost:8000 atau alamat yang ditampilkan pada terminal Anda. Sekarang, aplikasi Laravel sudah terpasang dan bisa diakses melalui browser.
2. Mengatur Koneksi Database MySQL di File .env
Setelah berhasil membuat projek Laravel 10, langkah selanjutnya adalah mengatur koneksi ke database MySQL. Laravel menyimpan pengaturan koneksi ini di file .env yang terletak di root direktori projek.
Buka file .env dengan teks editor dan cari bagian berikut:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=root
DB_PASSWORD=
Penjelasan setiap variabel di atas:
DB_CONNECTION: Jenis database yang digunakan, dalam hal inimysql.DB_HOST: Host dari database, biasanya127.0.0.1ataulocalhost.DB_PORT: Port yang digunakan oleh MySQL, secara default adalah3306.DB_DATABASE: Nama database yang ingin Anda gunakan. Buat database baru di MySQL dengan nama ini.DB_USERNAME: Username untuk mengakses MySQL, biasanyarootuntuk lokal.DB_PASSWORD: Password MySQL untukrootatau sesuai dengan yang telah Anda atur.
Contoh jika Anda membuat database bernama order_coffee, username root, dan tanpa password, maka pengaturan .env akan terlihat seperti ini:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=order_coffee
DB_USERNAME=root
DB_PASSWORD=
Jangan lupa untuk menyimpan file .env setelah mengeditnya.
3. Menjalankan Migrasi Database
Setelah konfigurasi database selesai, langkah selanjutnya adalah menjalankan migrasi untuk membuat tabel-tabel dasar di database. Laravel menyediakan beberapa tabel bawaan yang berguna, seperti tabel users, yang dapat kita buat dengan perintah berikut:
php artisan migrate
Jika koneksi ke database berhasil, tabel-tabel akan dibuat di database order_coffee.
Sekarang, Laravel sudah terhubung dengan MySQL dan siap digunakan untuk membuat fitur-fitur lainnya dalam projek order coffee. Anda sudah berhasil membuat projek Laravel 10 dengan konfigurasi MySQL menggunakan Composer dan file .env.
Untuk mempelajari lebih lanjut tentang cara mengelola database dan tabel dengan Laravel, Anda bisa mengunjungi dokumentasi resmi Laravel.
Cara Membuat File Migration dan Model Beserta Fillable dan Relationship untuk Table Categories, Coffees, Cafes, Transactions
Dalam projek kelas seperti order coffee, kita membutuhkan beberapa tabel untuk menyimpan data yang diperlukan. Tabel-tabel tersebut bisa diwakili oleh beberapa model dan relasi di Laravel, seperti categories, coffees, cafes, dan transactions. Berikut ini adalah cara membuat file migration dan model untuk masing-masing tabel, serta mengatur fillable dan relationship antara tabel-tabel tersebut.
1. Membuat Migration untuk Tabel Categories
Untuk membuat file migration dan model untuk tabel categories, gunakan perintah berikut di terminal:
php artisan make:model Category -m
Perintah ini akan membuat model Category beserta file migration untuk tabel categories. Buka file migration di database/migrations/, kemudian tambahkan kolom-kolom yang diperlukan untuk tabel categories:
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
Pada model Category, tambahkan properti fillable untuk menentukan field yang dapat diisi:
class Category extends Model
{
protected $fillable = ['name'];
public function coffees()
{
return $this->hasMany(Coffee::class);
}
}
Relasi hasMany digunakan karena satu kategori bisa memiliki banyak coffee.
2. Membuat Migration untuk Tabel Coffees
Buat model dan migration untuk tabel coffees dengan perintah berikut:
php artisan make:model Coffee -m
Setelah itu, buka file migration untuk coffees dan tambahkan kolom-kolom yang diperlukan:
public function up()
{
Schema::create('coffees', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->decimal('price', 8, 2);
$table->unsignedBigInteger('category_id');
$table->timestamps();
$table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
});
}
Pada model Coffee, tambahkan properti fillable dan buat relasi belongsTo untuk menghubungkan coffee dengan category:
class Coffee extends Model
{
protected $fillable = ['name', 'price', 'category_id'];
public function category()
{
return $this->belongsTo(Category::class);
}
public function cafes()
{
return $this->belongsToMany(Cafe::class);
}
}
Relasi belongsToMany di sini digunakan karena satu coffee bisa dijual di banyak cafe.
3. Membuat Migration untuk Tabel Cafes
Buat model dan migration untuk tabel cafes dengan perintah berikut:
php artisan make:model Cafe -m
Edit file migration untuk cafes dan tambahkan kolom-kolom yang dibutuhkan:
public function up()
{
Schema::create('cafes', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('location');
$table->timestamps();
});
}
Pada model Cafe, tambahkan properti fillable dan buat relasi belongsToMany untuk menghubungkan cafe dengan coffee:
class Cafe extends Model
{
protected $fillable = ['name', 'location'];
public function coffees()
{
return $this->belongsToMany(Coffee::class);
}
public function transactions()
{
return $this->hasMany(Transaction::class);
}
}
Satu cafe bisa melakukan banyak transaksi, sehingga relasi hasMany digunakan untuk tabel transactions.
4. Membuat Migration untuk Tabel Transactions
Buat model dan migration untuk transactions dengan perintah berikut:
php artisan make:model Transaction -m
Edit file migration untuk transactions dengan menambahkan kolom-kolom yang dibutuhkan:
public function up()
{
Schema::create('transactions', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('cafe_id');
$table->unsignedBigInteger('coffee_id');
$table->integer('quantity');
$table->decimal('total_price', 8, 2);
$table->timestamps();
$table->foreign('cafe_id')->references('id')->on('cafes')->onDelete('cascade');
$table->foreign('coffee_id')->references('id')->on('coffees')->onDelete('cascade');
});
}
Pada model Transaction, tambahkan properti fillable dan buat relasi belongsTo untuk menghubungkan transaksi dengan coffee dan cafe:
class Transaction extends Model
{
protected $fillable = ['cafe_id', 'coffee_id', 'quantity', 'total_price'];
public function cafe()
{
return $this->belongsTo(Cafe::class);
}
public function coffee()
{
return $this->belongsTo(Coffee::class);
}
}
Cara Menginstall Package Filament dan Membuat Akun Admin
Filament adalah package yang memudahkan kita dalam membuat halaman admin yang lengkap dengan fitur CRUD untuk projek Laravel. Dengan Filament, kita bisa membuat dashboard admin dengan cepat dan mudah. Berikut adalah cara menginstall Filament dan membuat akun admin.
Menginstall Filament di Laravel 10
Langkah pertama untuk memulai adalah dengan menginstall Filament. Pastikan Anda sudah berada di root direktori projek Laravel. Jalankan perintah berikut di terminal untuk menginstall package Filament:
composer require filament/filament
Setelah proses instalasi selesai, kita bisa menjalankan beberapa perintah tambahan untuk memastikan bahwa Filament terpasang dengan benar dan siap digunakan.
Mengatur Filament dengan Artisan
Setelah menginstall Filament, Anda perlu menjalankan perintah berikut untuk mengatur konfigurasi dasar dari Filament. Perintah ini akan membuat beberapa file dasar yang diperlukan untuk dashboard admin Filament.
php artisan filament:install
Perintah ini akan mempersiapkan segala kebutuhan Filament dalam projek Anda, seperti file konfigurasi dan rute untuk dashboard admin.
Membuat Akun Admin
Untuk bisa masuk ke halaman admin, kita perlu membuat akun admin terlebih dahulu. Filament mendukung pembuatan user dengan role admin. Anda bisa menggunakan Artisan untuk membuat user baru dengan role admin. Jalankan perintah berikut untuk membuat admin:
php artisan make:filament-user
Setelah menjalankan perintah ini, Anda akan diminta untuk mengisi beberapa informasi seperti nama, email, password, dan apakah user tersebut merupakan super admin. Isi informasi tersebut sesuai kebutuhan. Jika akun berhasil dibuat, Anda akan melihat pesan konfirmasi di terminal.
Contoh Kode Pengaturan User Admin
Setelah akun admin berhasil dibuat, Anda dapat mengakses dashboard admin Filament melalui URL berikut:
<http://localhost:8000/admin>
Pastikan Anda sudah menjalankan server Laravel dengan php artisan serve, dan gunakan akun admin yang baru saja dibuat untuk login ke dashboard tersebut. Akun admin yang telah Anda buat memiliki hak akses penuh untuk mengelola data di halaman dashboard.
Cara Membuat Resource untuk CRUD Seluruh Table yang Sudah Dibuat Menggunakan Filament
Dalam sebuah projek, kita dapat memanfaatkan Filament untuk membuat CRUD (Create, Read, Update, Delete) secara otomatis pada seluruh tabel yang sudah kita buat sebelumnya, seperti categories, coffees, cafes, dan transactions. Dengan menggunakan resource di Filament, kita bisa mengelola data dalam tabel tersebut melalui halaman admin yang sudah terintegrasi dengan dashboard. Berikut adalah cara membuat resource untuk masing-masing tabel.
Menggunakan Artisan untuk Membuat Resource
Untuk membuat resource CRUD di Filament, Anda bisa menggunakan perintah Artisan. Misalnya, untuk membuat resource untuk tabel categories, jalankan perintah berikut di terminal:
php artisan make:filament-resource Category
Perintah ini akan membuat resource yang mencakup fitur CRUD untuk tabel categories, termasuk tampilan antarmuka untuk membuat, mengedit, menghapus, dan melihat data kategori. Lakukan hal yang sama untuk tabel coffees, cafes, dan transactions dengan menyesuaikan nama modelnya:
php artisan make:filament-resource Coffee
php artisan make:filament-resource Cafe
php artisan make:filament-resource Transaction
Contoh Koding Resource untuk Categories
Setelah perintah di atas dijalankan, Filament akan otomatis membuat file resource di direktori app/Filament/Resources/CategoryResource.php. Buka file tersebut dan Anda akan menemukan struktur dasar dari resource. Berikut adalah contoh implementasi dasar resource untuk Category:
namespace App\\\\Filament\\\\Resources;
use App\\\\Filament\\\\Resources\\\\CategoryResource\\\\Pages;
use App\\\\Models\\\\Category;
use Filament\\\\Resources\\\\Resource;
use Filament\\\\Resources\\\\Table;
use Filament\\\\Resources\\\\Form;
use Filament\\\\Forms;
use Filament\\\\Tables;
class CategoryResource extends Resource
{
protected static string $model = Category::class;
public static function form(Form $form): Form
{
return $form
->schema([
Forms\\\\Components\\\\TextInput::make('name')
->required(),
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
Tables\\\\Columns\\\\TextColumn::make('name'),
Tables\\\\Columns\\\\TextColumn::make('created_at')
->dateTime(),
])
->filters([]);
}
public static function getPages(): array
{
return [
'index' => Pages\\\\ListCategories::route('/'),
'create' => Pages\\\\CreateCategory::route('/create'),
'edit' => Pages\\\\EditCategory::route('/{record}/edit'),
];
}
}
Bagian form() digunakan untuk mendefinisikan input apa saja yang dibutuhkan saat membuat atau mengedit data kategori, sedangkan bagian table() digunakan untuk menampilkan kolom-kolom apa yang akan muncul di halaman daftar kategori.
Contoh Koding Resource untuk Coffees
Untuk tabel coffees, resource akan diatur serupa dengan categories, namun dengan penambahan field seperti price dan relasi ke categories. Berikut adalah contoh resource Coffee:
namespace App\\\\Filament\\\\Resources;
use App\\\\Filament\\\\Resources\\\\CoffeeResource\\\\Pages;
use App\\\\Models\\\\Coffee;
use Filament\\\\Resources\\\\Resource;
use Filament\\\\Resources\\\\Table;
use Filament\\\\Resources\\\\Form;
use Filament\\\\Forms;
use Filament\\\\Tables;
class CoffeeResource extends Resource
{
protected static string $model = Coffee::class;
public static function form(Form $form): Form
{
return $form
->schema([
Forms\\\\Components\\\\TextInput::make('name')
->required(),
Forms\\\\Components\\\\TextInput::make('price')
->numeric()
->required(),
Forms\\\\Components\\\\Select::make('category_id')
->relationship('category', 'name')
->required(),
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
Tables\\\\Columns\\\\TextColumn::make('name'),
Tables\\\\Columns\\\\TextColumn::make('price')->money('USD'),
Tables\\\\Columns\\\\TextColumn::make('category.name'),
Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(),
]);
}
public static function getPages(): array
{
return [
'index' => Pages\\\\ListCoffees::route('/'),
'create' => Pages\\\\CreateCoffee::route('/create'),
'edit' => Pages\\\\EditCoffee::route('/{record}/edit'),
];
}
}
Dalam resource ini, Anda dapat melihat field tambahan untuk harga (price) serta dropdown yang menampilkan kategori (category_id) menggunakan relasi dari model Category.
Menambahkan Resource untuk Cafes dan Transactions
Langkah yang sama dapat diterapkan pada tabel cafes dan transactions. Pada CafeResource, Anda bisa menambahkan field seperti name dan location. Sedangkan di TransactionResource, tambahkan input untuk cafe_id, coffee_id, quantity, dan total_price. Berikut adalah contoh singkat untuk TransactionResource:
namespace App\\\\Filament\\\\Resources;
use App\\\\Filament\\\\Resources\\\\TransactionResource\\\\Pages;
use App\\\\Models\\\\Transaction;
use Filament\\\\Resources\\\\Resource;
use Filament\\\\Resources\\\\Table;
use Filament\\\\Resources\\\\Form;
use Filament\\\\Forms;
use Filament\\\\Tables;
class TransactionResource extends Resource
{
protected static string $model = Transaction::class;
public static function form(Form $form): Form
{
return $form
->schema([
Forms\\\\Components\\\\Select::make('cafe_id')
->relationship('cafe', 'name')
->required(),
Forms\\\\Components\\\\Select::make('coffee_id')
->relationship('coffee', 'name')
->required(),
Forms\\\\Components\\\\TextInput::make('quantity')
->numeric()
->required(),
Forms\\\\Components\\\\TextInput::make('total_price')
->numeric()
->required(),
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
Tables\\\\Columns\\\\TextColumn::make('cafe.name'),
Tables\\\\Columns\\\\TextColumn::make('coffee.name'),
Tables\\\\Columns\\\\TextColumn::make('quantity'),
Tables\\\\Columns\\\\TextColumn::make('total_price')->money('USD'),
Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(),
]);
}
public static function getPages(): array
{
return [
'index' => Pages\\\\ListTransactions::route('/'),
'create' => Pages\\\\CreateTransaction::route('/create'),
'edit' => Pages\\\\EditTransaction::route('/{record}/edit'),
];
}
}
Dengan resource ini, Anda dapat melakukan CRUD untuk semua transaksi yang terjadi di cafe, termasuk mencatat coffee yang dipesan, jumlah, dan total harga.
Cara Membuat Export Button pada Tabel Transactions di Filament
Untuk menambahkan fitur Export Button pada tabel Transactions yang sudah dibuat sebelumnya di Filament, kita akan memanfaatkan custom action di resource Filament. Fitur ini memungkinkan pengguna untuk mengekspor seluruh data dari tabel transactions ke format seperti CSV atau Excel.
Berikut adalah cara membuat Export Button pada tabel Transactions beserta contoh koding lengkapnya.
Langkah 1: Menambahkan Custom Action untuk Export
Buka file TransactionResource.php yang berada di direktori app/Filament/Resources/TransactionResource.php. Di dalam metode table(), kita bisa menambahkan custom action untuk melakukan export data.
Berikut adalah contoh implementasi custom action:
namespace App\\\\Filament\\\\Resources;
use App\\\\Filament\\\\Resources\\\\TransactionResource\\\\Pages;
use App\\\\Models\\\\Transaction;
use Filament\\\\Resources\\\\Resource;
use Filament\\\\Resources\\\\Table;
use Filament\\\\Resources\\\\Form;
use Filament\\\\Forms;
use Filament\\\\Tables;
use Filament\\\\Tables\\\\Actions\\\\Action;
use Illuminate\\\\Database\\\\Eloquent\\\\Builder;
use Maatwebsite\\\\Excel\\\\Facades\\\\Excel;
use App\\\\Exports\\\\TransactionsExport;
class TransactionResource extends Resource
{
protected static string $model = Transaction::class;
public static function form(Form $form): Form
{
return $form
->schema([
Forms\\\\Components\\\\Select::make('cafe_id')
->relationship('cafe', 'name')
->required(),
Forms\\\\Components\\\\Select::make('coffee_id')
->relationship('coffee', 'name')
->required(),
Forms\\\\Components\\\\TextInput::make('quantity')
->numeric()
->required(),
Forms\\\\Components\\\\TextInput::make('total_price')
->numeric()
->required(),
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
Tables\\\\Columns\\\\TextColumn::make('cafe.name'),
Tables\\\\Columns\\\\TextColumn::make('coffee.name'),
Tables\\\\Columns\\\\TextColumn::make('quantity'),
Tables\\\\Columns\\\\TextColumn::make('total_price')->money('USD'),
Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(),
])
->actions([
Action::make('export')
->label('Export Transactions')
->action(function () {
return Excel::download(new TransactionsExport, 'transactions.xlsx');
}),
]);
}
public static function getPages(): array
{
return [
'index' => Pages\\\\ListTransactions::route('/'),
'create' => Pages\\\\CreateTransaction::route('/create'),
'edit' => Pages\\\\EditTransaction::route('/{record}/edit'),
];
}
}
Pada contoh di atas, kita membuat custom Action bernama export yang akan menampilkan tombol Export Transactions di halaman daftar Transactions. Ketika tombol tersebut diklik, data akan diekspor dalam format Excel dengan menggunakan Maatwebsite Excel.
Langkah 2: Membuat TransactionsExport Class
Untuk melakukan export ke format Excel, kita perlu membuat sebuah class yang menghandle proses export. Gunakan perintah berikut di terminal untuk membuat class export:
php artisan make:export TransactionsExport --model=Transaction
Class export ini akan dibuat di direktori app/Exports/TransactionsExport.php. Edit file tersebut dan tambahkan kode berikut untuk mengekspor seluruh data dari tabel transactions:
namespace App\\\\Exports;
use App\\\\Models\\\\Transaction;
use Maatwebsite\\\\Excel\\\\Concerns\\\\FromCollection;
class TransactionsExport implements FromCollection
{
/**
* Return a collection of data to be exported.
*/
public function collection()
{
return Transaction::all();
}
}
Class ini mengambil semua data dari tabel transactions dan mengekspornya sebagai file Excel.
Langkah 3: Menginstall Maatwebsite Excel
Jika Anda belum menginstall package Maatwebsite Excel, Anda bisa menginstallnya dengan perintah berikut:
composer require maatwebsite/excel
Setelah menginstall package ini, Laravel sudah siap untuk mengekspor data ke berbagai format file, seperti Excel atau CSV.
Langkah 4: Menguji Export Button
Setelah semua konfigurasi diatur, jalankan aplikasi Laravel Anda, buka halaman Transactions di dashboard Filament, dan Anda akan melihat tombol Export Transactions. Ketika tombol tersebut diklik, file transactions.xlsx akan diunduh, berisi seluruh data dari tabel transactions.
Dengan cara ini, Anda berhasil menambahkan fitur Export Button di halaman Transactions menggunakan Filament dan Maatwebsite Excel.
Penutup
Dengan mengikuti langkah-langkah di atas, Anda sekarang dapat dengan mudah menambahkan fitur Export Button pada tabel Transactions menggunakan Filament dan Maatwebsite Excel di Laravel. Fitur ini memungkinkan admin untuk mengekspor seluruh data transaksi dalam format Excel, yang sangat berguna untuk keperluan laporan atau analisis lebih lanjut.
Menambah fitur seperti ini bukan hanya memudahkan proses pengelolaan data, tetapi juga menunjukkan betapa fleksibelnya Laravel dan Filament dalam mengembangkan sistem admin yang kuat dan efisien.
Jika Anda ingin lebih mendalami Laravel dan Filament serta meningkatkan keterampilan web development Anda, Anda bisa belajar bersama mentor expert di Buildwithangga. Anda akan mendapatkan banyak manfaat seperti portfolio siap kerja, akses materi selamanya, serta bimbingan private yang akan membantu Anda siap menghadapi tantangan di dunia kerja.
Bergabunglah dan maksimalkan potensi Anda dengan dukungan mentor yang berpengalaman!
.png)
