Laravel E-Learning Part 2: Setup Laravel 12 dengan Filament Admin Panel

Rebuild Laravel E-Learning

Part 1: Pengenalan & Mengapa Saya Upgrade

Part 2: Setup Laravel 12 + Filament

Part 3: Desain Skema Database

Part 4: Autentikasi & Role User

Part 5: Membangun Sistem Ujian

Part 6: Fitur Real-Time

Part 7: Strategi Testing

Part 8: Deployment

Artikel ini tersedia dalam Bahasa Inggris

🇬🇧 Read in English

10 Maret 2026

🇮🇩 Bahasa Indonesia

Laravel E-Learning Part 2: Setup Laravel 12 dengan Filament Admin Panel

Panduan langkah demi langkah untuk setup project Laravel 12 baru dengan Filament 3 untuk membangun admin panel e-learning modern.

2 min read

Prasyarat

Sebelum memulai, pastikan kamu punya:

PHP 8.2 atau lebih tinggi
Composer 2.x
Node.js 18+ dan npm
MySQL 8 atau PostgreSQL 15+
Code editor (VS Code direkomendasikan)

Step 1: Buat Project Laravel 12 Baru

composer create-project laravel/laravel elearning-app
cd elearning-app

Laravel 12 hadir dengan struktur minimal. Mari verifikasi instalasinya:

php artisan --version
# Laravel Framework 11.x.x

Step 2: Konfigurasi Database

Update file .env kamu:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=elearning_db
DB_USERNAME=root
DB_PASSWORD=password_kamu

Buat database:

mysql -u root -p -e "CREATE DATABASE elearning_db;"

Step 3: Install Filament 3

Filament adalah bintang utama admin panel kita. Install:

composer require filament/filament:"^3.2"

Jalankan instalasi Filament:

php artisan filament:install --panels

Ketika diminta, terima default. Ini akan membuat:

app/Providers/Filament/AdminPanelProvider.php
Admin panel di /admin

Step 4: Buat User Admin

php artisan make:filament-user

Masukkan detail kamu:

Name: Admin
Email: [email protected]
Password: password

Step 5: Konfigurasi Panel Filament

Buka app/Providers/Filament/AdminPanelProvider.php:

<?php

namespace App\Providers\Filament;

use Filament\Http\Middleware\Authenticate;
use Filament\Http\Middleware\DisableBladeIconComponents;
use Filament\Http\Middleware\DispatchServingFilamentEvent;
use Filament\Pages;
use Filament\Panel;
use Filament\PanelProvider;
use Filament\Support\Colors\Color;
use Filament\Widgets;
use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
use Illuminate\Cookie\Middleware\EncryptCookies;
use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken;
use Illuminate\Routing\Middleware\SubstituteBindings;
use Illuminate\Session\Middleware\AuthenticateSession;
use Illuminate\Session\Middleware\StartSession;
use Illuminate\View\Middleware\ShareErrorsFromSession;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => Color::Blue,
                'danger' => Color::Rose,
                'success' => Color::Emerald,
            ])
            ->brandName('E-Learning Admin')
            ->favicon(asset('favicon.ico'))
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
            ])
            ->middleware([
                EncryptCookies::class,
                AddQueuedCookiesToResponse::class,
                StartSession::class,
                AuthenticateSession::class,
                ShareErrorsFromSession::class,
                VerifyCsrfToken::class,
                SubstituteBindings::class,
                DisableBladeIconComponents::class,
                DispatchServingFilamentEvent::class,
            ])
            ->authMiddleware([
                Authenticate::class,
            ]);
    }
}

Step 6: Install Package Tambahan

Untuk aplikasi e-learning kita, dibutuhkan beberapa package tambahan:

# Spatie permissions untuk manajemen role
composer require spatie/laravel-permission

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

# Jalankan migrasi
php artisan migrate

Step 7: Setup Frontend Assets

Install dan build:

npm install
npm run build

Step 8: Test Setup Kamu

Jalankan development server:

php artisan serve

Kunjungi http://localhost:8000/admin dan login dengan kredensial admin kamu.

Kamu akan melihat dashboard Filament yang indah!

Struktur Project Sejauh Ini

Path	Deskripsi
`app/Filament/Resources/`	CRUD resources akan ditempatkan di sini
`app/Filament/Pages/`	Halaman custom
`app/Filament/Widgets/`	Widget dashboard
`app/Models/User.php`	Model User
`app/Providers/Filament/AdminPanelProvider.php`	Konfigurasi admin panel
`database/migrations/`	Migrasi database
`.env`	Konfigurasi environment

Ringkasan

Di part ini, kita sudah:

✅ Membuat project Laravel 12 baru
✅ Menginstall dan mengkonfigurasi Filament 3
✅ Setup koneksi database
✅ Membuat user admin
✅ Mengkustomisasi branding admin panel
✅ Menginstall Spatie Permission untuk roles

Selanjutnya

Di Part 3, kita akan mendesain skema database untuk platform e-learning, termasuk:

Users (Admin, Guru, Siswa)
Mata Pelajaran dan Kursus
Ujian dan Soal
Hasil Siswa

Lanjut ke Part 3: Desain Skema Database →