Laravel Spatie and Breeze

🎯 Tujuan:

Membuat sistem login dengan Laravel Breeze dan menambahkan fitur role-permission menggunakan Spatie.

🛠️ Langkah-langkah :

1. Install Laravel Project

laravel new auth-role-project
cd auth-role-project

Atau kalau pakai Composer:

// CUMA NAMA DOANG

composer create-project laravel/laravel auth-role-project

🚶‍♂️ 2. Masuk ke Direktori Project

cd namaproject

2. Install Laravel Breeze

composer require laravel/breeze --dev
php artisan breeze:install
// Secara default, ini akan menginstal stack Blade + Tailwind CSS.
// Kalau kamu ingin stack lain seperti React, Vue, atau API, kamu bisa menambahkan flag:
php artisan breeze:install vue
npm install && npm run dev
php artisan migrate

Breeze akan membuat sistem login/register otomatis + migrasi database.

3. Jalankan Project

php artisan serve

Buka di browser: [http://127.0.0.1:8000](http://127.0.0.1:8000)

4. Install Spatie Permission

composer require spatie/laravel-permission

Lalu publish dan migrasi:

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

Ini akan membuat file konfigurasi di config/permission.php.

Migrasi Tabel Role & Permission

php artisan migrate

Ini akan membuat tabel:

• roles
• permissions
• model_has_roles
• model_has_permissions
• role_has_permissions

5. Setup Model User

Edit file app/Models/User.php, tambahkan HasRoles seperti gambar dibawah:

use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;
}

6. Buat Seeder Role dan User

php artisan make:seeder RolePermissionSeeder
php artisan make:Seeder UserSeeder

Isi database/seeders/RolePermissionSeeder. php seperti ini:

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

class RolePermissionSeeder extends Seeder
{
    public function run(): void
    {

        // Role permission seputar admin
        Permission::create(['name' => 'tambah-user']);
        Permission::create(['name' => 'update-user']);
        Permission::create(['name' => 'lihat-user']);
        Permission::create(['name' => 'hapus-user']);

        // Role permission seputar user
        Permission::create(['name' => 'tambah-tulisan']);
        Permission::create(['name' => 'update-tulisan']);
        Permission::create(['name' => 'lihat-tulisan']);
        Permission::create(['name' => 'hapus-tulisan']);

        // Role seputar CRUD
        Role::create(['name'=>'admin']);
        Role::create(['name'=>'penulis']);

        // Buat role admin memiliki semua permission
        $roleAdmin = Role::findByName('admin');
        $roleAdmin->syncPermissions(Permission::all());

        // Buat role Pemulis menggunakan permission Penulis
        $rolePenulis = Role::findByName('penulis');
        $rolePenulis->syncPermissions(['tambah-tulisan', 'update-tulisan', 'lihat-tulisan', 'hapus-tulisan']);    }
}

isi dari \database\seeders\UserSeeder.php

<?php
namespace Database\Seeders;

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

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        // akun untuk admin
        $admin = User::create([
            'name' => 'admin',
            'email'=> 'admin@gmail.com',
            'password' => bcrypt('12345678')
        ]);

        $admin->assignRole('admin');

        // akun untuk penulis
        $penulis = User::create([
            'name' => 'penulis',
            'email'=> 'penulis@gmail.com',
            'password' => bcrypt('12345678')
        ]);

        $penulis->assignRole('penulis');
    }
}

setelah selesai menambahkan kode diatas lanjut step berikutnya dengan memasukan command berikut untuk memasukan data ke dalam database.

Untuk memasukan permission:

php artisan db:seed --class=RolePermissionSeeder

Untuk memasukan user:

php artisan db:seed --class=UserSeeder

🔒 7. Proteksi Route Berdasarkan Role

📌 Tujuan:

Kita ingin mengatur siapa yang boleh mengakses halaman tertentu, berdasarkan peran (role) user, seperti admin atau user.

🧠 Analogi Sederhana:

Bayangkan kamu bikin sebuah situs web, isinya ada:

• Halaman untuk admin
• Halaman untuk user biasa

Tapi kamu tidak mau semua orang bisa buka halaman admin. Harus dilindungi!

🧾 Penjelasan Kode (Langkah demi Langkah)

use Illuminate\Support\Facades\Route;

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

👉 Ini adalah halaman utama (beranda). Semua orang boleh buka, tanpa login, tanpa role.

Route::middleware(['auth', 'role:admin'])->group(function () {
    Route::get('/admin', function () {
        return 'Halo Admin!';
    });
});

🛡 Penjelasan:

• middleware(['auth', 'role:admin']):
• auth: Hanya pengguna yang sudah login yang bisa lanjut.
• role:admin: Tapi tidak cukup hanya login — harus punya role admin.

👉 Jadi:

• Kalau belum login → tidak bisa buka /admin
• Kalau sudah login tapi bukan admin → tetap ditolak (dapat error 403)
• Kalau sudah login dan punya role admin → baru bisa lihat “Halo Admin!”

Route::middleware(['auth', 'role:user'])->group(function () {
    Route::get('/user', function () {
        return 'Halo User!';
    });
});

🛡 Sama dengan sebelumnya, tapi ini untuk user biasa (role user).

💡 Middleware Itu Apa Sih?

Middleware itu kayak satpam di pintu masuk halaman. Dia akan cek dulu, misalnya:

• Sudah login belum?
• Punya role yang sesuai nggak?

Kalau semua syarat lolos → baru boleh masuk ke halaman.

👥 Role dari Mana?

Role ditentukan saat kamu:

• Menambahkan role ke user lewat seeder
• Atau menggunakan package seperti spatie/laravel-permission

Misal kamu assign role di seeder seperti ini:

$user = User::find(1);
$user->assignRole('admin');

🔄 Ringkasan Cepat

URLSyarat AksesPesan Ditampilkan/Semua orang boleh bukaWelcome page/adminHarus login + role admin"Halo Admin!"/userHarus login + role user"Halo User!"

8. Testing

Login dengan:

• admin@example.com (password: password)
• user@example.com (password: password)

Coba buka /admin dan /user, dan lihat hasilnya.

✅ Penutup

Sekarang kamu sudah punya:

• Login + Register dengan Breeze
• Role & Permission dengan Spatie
• Proteksi halaman berdasarkan role