Tutorial CRUD Role Permission dengan Laravel 11, Spatie, dan Filament Projek Toko Baju Online

Pada artikel ini, kita akan belajar bagaimana membangun CRUD (Create, Read, Update, Delete) untuk data role dan permission dalam sebuah projek website toko baju online. Dalam dunia web development, pengelolaan role dan permission sangat penting karena dapat meningkatkan pengalaman pengguna (user experience) sekaligus menjaga keamanan data yang ada di dalam sebuah website.

Pentingnya Role dan Permission

Setiap pengguna di dalam sebuah website memiliki peran dan hak akses yang berbeda-beda. Dengan membagi peran (role) dan hak akses (permission), kita dapat memastikan bahwa hanya pengguna dengan otorisasi tertentu yang dapat mengakses fitur-fitur sensitif. Hal ini dapat mencegah terjadinya kesalahan atau penyalahgunaan data.

Bayangkan sebuah toko baju online sebagai sebuah toko fisik. Kasir mungkin memiliki akses untuk melihat dan memproses transaksi, tapi tidak dapat mengubah harga produk secara langsung—itu adalah tugas dari manajer toko. Role dan permission seperti ini menjaga efisiensi dan keamanan operasional website.

10 Fitur Unggulan Website Toko Baju Online dengan Role dan Permission

Sebuah website toko baju online yang baik harus memiliki fitur yang mendukung kelancaran operasional bisnis sekaligus memberikan pengalaman terbaik bagi pengguna. Berikut adalah 10 fitur unggulan yang harus dimiliki beserta contoh role dan permission yang tepat untuk tiap fitur.

  1. Manajemen Produk
    • Role: Admin, Manajer Produk
    • Permission: Admin dan manajer produk dapat menambahkan, mengedit, dan menghapus produk. Pengguna biasa hanya bisa melihat produk tanpa akses untuk mengubah data.
    • Analogi: Seperti menampilkan etalase toko fisik, hanya pemilik toko dan staf tertentu yang boleh mengubah produk yang ada di etalase.
  2. Manajemen Transaksi
    • Role: Kasir, Admin
    • Permission: Kasir dapat memproses transaksi pembelian, namun tidak dapat mengedit data produk atau diskon. Admin memiliki akses penuh terhadap semua transaksi.
    • Analogi: Di sebuah toko fisik, hanya kasir yang bisa memproses pembayaran, tetapi mereka tidak bisa memutuskan harga produk.
  3. Manajemen Pengguna
    • Role: Admin, HR
    • Permission: Admin dapat mengelola semua pengguna di sistem (tambah, edit, hapus), sementara HR mungkin hanya dapat melihat atau mengelola profil karyawan.
    • Analogi: Di perusahaan fisik, hanya HR yang bisa mengelola data karyawan, tetapi mungkin tidak semua staf memiliki akses untuk melihat data pribadi mereka.
  4. Pengelolaan Diskon dan Kupon
    • Role: Manajer Marketing, Admin
    • Permission: Hanya manajer marketing dan admin yang dapat membuat, mengedit, dan menghapus diskon atau kupon. Pengguna biasa hanya bisa menggunakan kupon saat berbelanja.
    • Analogi: Hanya departemen pemasaran yang boleh mengatur promosi di toko, sementara pelanggan hanya bisa memanfaatkan promosi yang tersedia.
  5. Laporan Penjualan
    • Role: Admin, Manajer Keuangan
    • Permission: Admin dan manajer keuangan bisa mengakses laporan penjualan dan analitik, sementara kasir mungkin hanya dapat melihat ringkasan penjualan hariannya.
    • Analogi: Dalam sebuah toko, manajer keuangan memiliki akses penuh untuk melihat semua transaksi, sementara kasir hanya dapat melihat transaksi mereka sendiri.
  6. Pengaturan Website
    • Role: Admin
    • Permission: Hanya admin yang dapat mengubah pengaturan global website, seperti tampilan, struktur, dan fitur.
    • Analogi: Sama seperti dalam toko fisik, hanya pemilik toko yang berhak untuk merombak desain atau layout toko.
  7. Manajemen Inventaris
    • Role: Manajer Inventaris, Admin
    • Permission: Manajer inventaris bertanggung jawab untuk menambah atau menghapus stok produk. Kasir tidak memiliki akses ke bagian ini.
    • Analogi: Hanya staf gudang yang dapat mengelola stok di gudang, sementara kasir hanya memproses produk yang tersedia.
  8. Manajemen Pengiriman
    • Role: Admin, Kurir
    • Permission: Admin dapat mengatur semua data pengiriman dan kurir dapat memperbarui status pengiriman. Pengguna biasa hanya dapat melacak status pengiriman mereka.
    • Analogi: Kurir di toko fisik bertugas mengantarkan barang dan memperbarui status pengiriman, tetapi mereka tidak bisa mengubah informasi pesanan.
  9. Manajemen Testimoni dan Review
    • Role: Admin, Pengguna
    • Permission: Pengguna dapat memberikan review, tetapi hanya admin yang bisa menghapus atau menanggapi review yang melanggar aturan.
    • Analogi: Di dunia nyata, pelanggan dapat memberikan testimoni, tetapi hanya staf yang bertugas yang bisa menghapus atau menanggapi feedback pelanggan.
  10. Newsletter dan Promosi
    • Role: Manajer Marketing, Admin
    • Permission: Manajer marketing dan admin dapat mengirimkan newsletter atau promosi kepada pelanggan. Pengguna hanya dapat berlangganan atau berhenti berlangganan.
    • Analogi: Sama seperti di toko fisik, hanya staf pemasaran yang boleh membuat dan mengirim promosi kepada pelanggan.

Dengan memahami pembagian role dan permission, kita dapat menciptakan sebuah sistem yang tidak hanya aman, tetapi juga memberikan pengalaman yang lancar dan terstruktur kepada pengguna.

Tutorial CRUD Role Permission dengan Laravel 11, Spatie, dan Filament

Di tutorial ini, kita akan membahas langkah-langkah untuk membuat CRUD (Create, Read, Update, Delete) data role dan permission di Laravel 11 menggunakan package Spatie dan Filament. Kita juga akan membuat user admin, file seeder, dan resource untuk mengelola data melalui admin panel Filament.

1. Cara Membuat Proyek Laravel 11 Baru dengan Composer

Langkah pertama adalah membuat proyek Laravel 11 baru dengan Composer. Berikut caranya:

Buat Proyek Laravel 11:

Jalankan perintah berikut di terminal untuk membuat proyek Laravel 11 baru:

composer create-project laravel/laravel toko-baju "11.*"

Setelah selesai, pindah ke direktori proyek:

cd toko-baju

Instalasi Spatie Permission:

Instal package Spatie Permission untuk mengelola role dan permission:

composer require spatie/laravel-permission

Setelah itu, jalankan perintah berikut untuk mempublikasikan file konfigurasi Spatie:

php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider"

Lanjutkan dengan menjalankan migrasi untuk membuat tabel role dan permission di database:

php artisan migrate

Instalasi Filament:

Instal package Filament untuk membuat admin panel:

composer require filament/filament

Setelah terinstal, buat user admin menggunakan command artisan Filament:

php artisan make:filament-user

2. Cara Membuat Akun Admin dengan Command Artisan Filament

Setelah instalasi selesai, kita dapat membuat user admin untuk mengelola role dan permission di panel admin Filament dengan menggunakan perintah berikut:

php artisan make:filament-user

Setelah menjalankan perintah ini, Anda akan diminta untuk mengisi informasi seperti nama, email, dan password untuk user admin. Jika Anda ingin memberikan akses penuh, pilih "yes" saat diminta:

Is this user a super-admin? (yes/no) [no]: yes

Dengan ini, user admin yang dibuat akan memiliki akses penuh ke seluruh fitur admin panel Filament, termasuk pengelolaan data role dan permission.

3. Cara Membuat File Seeder untuk Role dan Permission

Setelah membuat user admin, langkah selanjutnya adalah menambahkan data role dan permission ke dalam database. Ini dapat dilakukan dengan membuat file seeder. Berikut adalah langkah-langkahnya:

Buat file seeder menggunakan perintah berikut:

php artisan make:seeder RolePermissionSeeder

Buka file RolePermissionSeeder.php yang berada di direktori database/seeders dan tambahkan kode berikut:

use Illuminate\\\\Database\\\\Seeder;
use Spatie\\\\Permission\\\\Models\\\\Role;
use Spatie\\\\Permission\\\\Models\\\\Permission;

class RolePermissionSeeder extends Seeder
{
    public function run()
    {
        // Buat permissions
        $permissions = ['view products', 'edit products', 'delete products', 'view orders', 'manage users'];

        foreach ($permissions as $permission) {
            Permission::create(['name' => $permission]);
        }

        // Buat role dan assign permissions
        $adminRole = Role::create(['name' => 'admin']);
        $adminRole->givePermissionTo($permissions);

        $managerRole = Role::create(['name' => 'manager']);
        $managerRole->givePermissionTo(['view products', 'edit products']);

        $userRole = Role::create(['name' => 'user']);
        $userRole->givePermissionTo(['view products']);
    }
}

Jalankan seeder ini untuk memasukkan data role dan permission ke database:

php artisan db:seed --class=RolePermissionSeeder

4. Cara Membuat Filament Resource untuk Mengelola Role dan Permission

Langkah selanjutnya adalah membuat resource di Filament untuk mengelola data role dan permission melalui admin panel.

Buat Resource Role:

Jalankan perintah berikut untuk membuat resource Role:

php artisan make:filament-resource Role

Ini akan membuat beberapa file di dalam direktori app/Filament/Resources/RoleResource.php.

Buat Resource Permission:

Jalankan perintah yang sama untuk membuat resource Permission:

php artisan make:filament-resource Permission

Setelah resource ini dibuat, Anda bisa menyesuaikan pengaturan CRUD yang ada di file RoleResource.php dan PermissionResource.php.

5. Cara Mengatur Form dan Table pada File Resource Filament

Untuk mengatur form dan table dalam resource Filament, kita perlu mengedit file resource yang sudah dibuat. Berikut contoh pengaturan form dan table untuk mengelola Role dan Permission:

Mengatur Form di RoleResource:

Form ini digunakan untuk menambahkan atau mengedit data role. Buka file RoleResource.php dan tambahkan kode berikut di dalam metode form():

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('name')
                ->required()
                ->label('Role Name'),

            MultiSelect::make('permissions')
                ->relationship('permissions', 'name')
                ->label('Permissions')
        ]);
}

Di sini, kita menggunakan input TextInput untuk nama role dan MultiSelect untuk memilih permission yang terkait dengan role tersebut.

Mengatur Table di RoleResource:

Table digunakan untuk menampilkan data role yang ada di database. Tambahkan kode berikut di dalam metode table():

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('name')->label('Role Name'),
            TagsColumn::make('permissions.name')->label('Permissions'),
        ])
        ->filters([
            // Anda bisa menambahkan filter di sini
        ]);
}

Pada table ini, kita menampilkan kolom name untuk role dan permissions.name untuk menampilkan permission yang dimiliki oleh role tersebut.

Cara Mengimplementasikan Role dan Permission pada Navigation dan Routing di web.php dengan Laravel 11, Spatie, dan Filament

Setelah kita mengatur role dan permission dengan Spatie dan Filament, langkah penting berikutnya adalah mengimplementasikan logika role dan permission ini dalam navigation (navigasi) dan routing pada file web.php. Ini memastikan bahwa hanya pengguna yang memiliki hak akses tertentu yang dapat melihat dan mengakses fitur tertentu pada website toko baju online kita.

1. Mengimplementasikan Role dan Permission pada Routing di web.php

Salah satu cara untuk membatasi akses berdasarkan role atau permission adalah dengan menggunakan middleware. Spatie Permission menyediakan middleware yang memudahkan kita dalam mengatur akses ini. Middleware ini bisa digunakan di file web.php untuk mengatur hak akses pada setiap route.

Berikut adalah langkah-langkah untuk mengimplementasikan middleware Spatie di routing:

a. Middleware untuk Role

Untuk membatasi akses berdasarkan role, kita bisa menggunakan middleware role. Misalnya, hanya pengguna dengan role 'admin' yang bisa mengakses halaman manajemen pengguna:

use Illuminate\\\\Support\\\\Facades\\\\Route;

Route::middleware(['role:admin'])->group(function () {
    Route::get('/manage-users', [UserController::class, 'index'])->name('manage.users');
});

Pada contoh ini:

  • Kita menggunakan middleware role:admin untuk memastikan bahwa hanya pengguna dengan role admin yang dapat mengakses route /manage-users.
  • Jika pengguna tanpa role 'admin' mencoba mengakses route ini, mereka akan diarahkan ke halaman 403 (forbidden).

b. Middleware untuk Permission

Jika Anda ingin lebih spesifik dan membatasi akses berdasarkan permission, gunakan middleware permission. Contoh berikut menunjukkan cara membatasi akses ke halaman pengelolaan produk hanya bagi pengguna yang memiliki permission edit products:

Route::middleware(['permission:edit products'])->group(function () {
    Route::get('/manage-products', [ProductController::class, 'index'])->name('manage.products');
});

Di sini:

  • Middleware permission:edit products hanya mengizinkan pengguna yang memiliki permission untuk mengedit produk mengakses route /manage-products.

c. Menggabungkan Middleware Role dan Permission

Anda juga bisa menggabungkan role dan permission pada satu route. Misalnya, hanya pengguna dengan role admin yang memiliki permission manage users yang bisa mengakses halaman manajemen pengguna:

Route::middleware(['role:admin', 'permission:manage users'])->group(function () {
    Route::get('/admin/users', [AdminController::class, 'index'])->name('admin.users');
});

Pada contoh ini:

  • Pengguna harus memiliki role admin dan permission manage users untuk bisa mengakses halaman /admin/users.

2. Mengimplementasikan Role dan Permission pada Navigasi

Selain di routing, kita juga harus mengatur navigasi di frontend, agar pengguna hanya melihat link atau menu yang sesuai dengan role dan permission mereka. Kita bisa menggunakan helper dari Spatie untuk memeriksa apakah pengguna saat ini memiliki role atau permission tertentu.

Berikut adalah beberapa contoh cara implementasinya di Blade template:

a. Menampilkan Menu Berdasarkan Role

Untuk menampilkan menu atau link hanya untuk pengguna dengan role tertentu, Anda bisa menggunakan direktif Blade berikut:

@role('admin')
    <li><a href="{{ route('manage.users') }}">Manage Users</a></li>
@endrole

Kode di atas akan memastikan bahwa link "Manage Users" hanya akan ditampilkan jika pengguna memiliki role admin.

b. Menampilkan Menu Berdasarkan Permission

Jika Anda ingin menampilkan menu atau link berdasarkan permission, gunakan direktif Blade @can yang disediakan oleh Laravel:

@can('edit products')
    <li><a href="{{ route('manage.products') }}">Manage Products</a></li>
@endcan

Link "Manage Products" hanya akan ditampilkan jika pengguna memiliki permission edit products.

c. Menampilkan Menu untuk Multiple Role

Jika Anda ingin menampilkan menu atau link untuk beberapa role sekaligus, Anda bisa menggunakan kombinasi logika @role dan @endrole:

@role('admin|manager')
    <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
@endrole

Pada contoh ini, link "Dashboard" akan ditampilkan jika pengguna memiliki role admin atau manager.

3. Contoh Lengkap Implementasi di web.php

Berikut adalah contoh lengkap implementasi role dan permission pada routing di file web.php:

use Illuminate\\\\Support\\\\Facades\\\\Route;
use App\\\\Http\\\\Controllers\\\\UserController;
use App\\\\Http\\\\Controllers\\\\ProductController;
use App\\\\Http\\\\Controllers\\\\AdminController;

// Route untuk pengguna dengan role admin
Route::middleware(['role:admin'])->group(function () {
    Route::get('/admin/dashboard', [AdminController::class, 'index'])->name('admin.dashboard');
    Route::get('/admin/users', [AdminController::class, 'manageUsers'])->name('admin.users');
});

// Route untuk manajemen produk dengan permission 'edit products'
Route::middleware(['permission:edit products'])->group(function () {
    Route::get('/manage-products', [ProductController::class, 'index'])->name('manage.products');
});

// Route untuk mengelola pengguna hanya untuk admin dengan permission 'manage users'
Route::middleware(['role:admin', 'permission:manage users'])->group(function () {
    Route::get('/manage-users', [UserController::class, 'index'])->name('manage.users');
});

Dalam contoh ini:

  • Route /admin/dashboard dan /admin/users hanya dapat diakses oleh pengguna dengan role admin.
  • Route /manage-products hanya dapat diakses oleh pengguna dengan permission edit products.
  • Route /manage-users memerlukan role admin dan permission manage users.

Sebagai salah satu framework PHP paling populer, Laravel terus mengalami perkembangan dengan banyak update menarik yang semakin memudahkan developer dalam membangun aplikasi web yang handal dan scalable. Fitur-fitur seperti Spatie Permission, Filament, dan lainnya membuat pengelolaan hak akses menjadi lebih mudah dan efisien.

Dengan komunitas yang besar dan dukungan dokumentasi yang kuat, Laravel akan terus menjadi pilihan utama bagi banyak pengembang di seluruh dunia.

Untuk mendapatkan lebih banyak pembelajaran dan studi kasus menarik, pastikan untuk memantau terus website BuildWithAngga. Mereka sering meng-update kelas gratis dengan studi kasus yang relevan, disertai mentor berpengalaman yang siap membantu Anda.

Dengan akses kelas seumur hidup, Anda dapat belajar kapan saja dan memperdalam skill web development Anda. Jangan lewatkan kesempatan ini untuk meningkatkan kemampuan coding Anda dengan panduan yang terstruktur dan komunitas yang mendukung!