📘 Laporan Praktikum Laravel UI, Bootstrap, dan Templating

📖 Pendahuluan

Laravel menyediakan fitur authentication scaffolding melalui package laravel/ui yang memudahkan pembuatan sistem login, register, dan reset password. Pada praktikum ini, diterapkan fitur authentication Laravel dengan tampilan menggunakan Bootstrap. Selain itu, dilakukan customisasi tabel users dengan menambahkan kolom username, level, dan status. Seluruh tampilan antarmuka (UI) diubah menggunakan template SB Admin 2 (berbasis Bootstrap) untuk memberikan tampilan dashboard yang lebih profesional. Terakhir, dibangun fitur Manajemen Users dengan operasi CRUD (Create, Read, Update, Delete) menggunakan Laravel Resource Controller dan Eloquent ORM.

Praktikum ini mencakup:

• Instalasi Laravel dan konfigurasi database.
• Instalasi laravel/ui dan pembangkitan authentication (bootstrap).
• Migrasi tabel default dan custom table users (menambah field username, level, status).
• Pembuatan seeder untuk user admin.
• Penggantian tampilan login dan layout utama dengan template SB Admin 2.
• Pembuatan resource controller UserController untuk manajemen users (CRUD) lengkap dengan view menggunakan layout yang telah dibuat.

🎯 Tujuan Praktikum

1. Memahami instalasi dan penggunaan Laravel UI untuk authentication.
2. Mampu melakukan migrasi database dan menambah kolom pada tabel users.
3. Membuat seeder untuk mengisi data awal (admin).
4. Mengintegrasikan template SB Admin 2 (Bootstrap) ke dalam Laravel, mengubah halaman login dan dashboard.
5. Membuat layout global (main, sidebar, topbar) menggunakan Blade template engine.
6. Membangun fitur CRUD users (tambah, lihat, edit, hapus) dengan validasi dan session flash message.

🛠️ Lingkungan Pengembangan (Tools)

📌 1. Membuat Project Laravel

Project Laravel dibuat dengan nama laravel-sisfo menggunakan Composer (Laravel versi 13). Perintah yang dijalankan:

composer create-project laravel/laravel laravel-sisfo --prefer-dist

Gambar 1: Proses pembuatan project Laravel berhasil, terlihat versi Laravel v13.8.0.

Tampilan awal Laravel setelah server dijalankan (php artisan serve) dapat dilihat pada gambar berikut.

Gambar 2: Halaman welcome Laravel v13.13.0 (tampilan default).

📌 2. Konfigurasi Database

File .env diisi dengan konfigurasi database MySQL (XAMPP). Database yang digunakan bernama laravel_sisfo.

Gambar 3: Setting DB_CONNECTION=mysql, DB_HOST=127.0.0.1, DB_PORT=3306, DB_DATABASE=laravel_sisfo, DB_USERNAME=root, DB_PASSWORD kosong.

📌 3. Install Package Laravel UI

Package laravel/ui digunakan untuk membangkitkan authentication scaffolding. Perintah:

composer require laravel/ui

Gambar 4: Proses instalasi laravel/ui berhasil (ditandai DONE).

📌 4. Generate Authentication dengan Bootstrap

Menjalankan perintah berikut untuk membuat authentication dengan tampilan Bootstrap:

php artisan ui bootstrap --auth

Gambar 5: Scaffolding authentication berhasil digenerate. Perintah ini juga membuat controller, view (login, register, forgot password, dashboard) dan route auth.

📌 5. Install & Compile Asset dengan NPM

Untuk mengkompilasi asset CSS dan JS (termasuk Bootstrap), dijalankan perintah:

npm install && npm run dev

Gambar 6: Proses installasi package npm dan kompilasi Vite berhasil. Asset siap digunakan.

📌 6. Menjalankan Migrasi

Migrasi default Laravel (tabel users, password_resets, failed_jobs, dll) dijalankan dengan:

php artisan migrate

Gambar 7: Migrasi berhasil, tabel users dan lainnya terbuat di database.

📌 7. Customisasi Tabel Users (Menambah Field)

Kebutuhan aplikasi memerlukan kolom tambahan: username, level, status. Dibuat migration baru:

php artisan make:migration costum_table_users

Gambar 8: Migration dengan nama 2026_06_03_082258_costum_table_users.php berhasil dibuat.

Isi migration (method up()) ditulis untuk menambah kolom ke tabel users:

Schema::table('users', function (Blueprint $table) {
    $table->string("username")->unique();
    $table->string("level");
    $table->enum("status", ["ACTIVE", "INACTIVE"]);
});

Kemudian menjalankan migrasi:

php artisan migrate

Gambar 9: Migrasi berhasil, kolom username, level, status ditambahkan ke tabel users.

📌 8. Membuat Seeder untuk User Admin

Dibuat seeder AdminSeeder untuk mengisi akun admin awal. Perintah:

php artisan make:seeder AdminSeeder

Kemudian diisi dengan kode:

$admin = new \App\Models\User;
$admin->name = "Admin Sisfo";
$admin->username = "admin";
$admin->email = "admin@sisfo.com";
$admin->level = json_encode(["ADMIN"]);
$admin->status = "ACTIVE";
$admin->password = \Hash::make("12345678");
$admin->save();

Jalankan seeder:

php artisan db:seed --class=AdminSeeder

Gambar 10: User Admin berhasil ditambahkan.

Setelah seeder, tampilan dashboard awal (setelah login) masih menggunakan tampilan bawaan Laravel.

Gambar 11: Halaman dashboard default setelah login (tampilan masih polos).

📌 9. Templating / Layouting dengan SB Admin 2

Template SB Admin 2 (Start Bootstrap) diunduh dari link, diekstrak dan folder asset (css, js, vendor, img) diletakkan ke public/sbadmin.

9.1 Halaman Login

File resources/views/layouts/app.blade.php (default untuk login) diubah menjadi template SB Admin 2 untuk halaman login. Hasilnya tampilan login menjadi lebih modern.

Gambar 12: Halaman login dengan template SB Admin 2 (perhatikan gambar dari PDF, namun setelah modifikasi tampilan login sesuai dengan asset sbadmin).

9.2 Layout Global (main.blade.php)

Dibuat file resources/views/layouts/main.blade.php yang berisi struktur global (sidebar, topbar, content). Menggunakan @include('layouts.sidebar') dan @include('layouts.topbar') serta @yield('judul') dan @yield('konten').

Sidebar dan topbar disesuaikan dengan menu yang ada (Dashboard, Users). Topbar menampilkan nama user yang login dan tombol logout.

Setelah layout diterapkan, halaman dashboard berubah menjadi lebih rapi.

Gambar 13: Dashboard setelah menggunakan template SB Admin 2, menampilkan card statistic (Total User, Admin, Guru, Staff) dan copyright.

📌 10. Manajemen Users (CRUD)

Dibuat controller resource UserController:

php artisan make:controller UserController --resource

Routing ditambahkan di routes/web.php:

use App\Http\Controllers\UserController;
Route::resource('users', UserController::class);

10.1 Create User (Tambah)

View create.blade.php dibuat dengan form input nama, email, username, password, level (multiple select). Method store menyimpan data ke tabel users dengan level di-encode JSON. Setelah berhasil, redirect ke index dengan flash message.

Gambar 14: Halaman daftar user setelah beberapa data ditambahkan (tampilan menggunakan DataTable sederhana).

Gambar 15: Alert "User berhasil ditambahkan" setelah menambah user baru.

Gambar 16: Tabel user menampilkan nama, username, email, level, status, aksi (edit, hapus).

10.2 Edit User

Tombol edit mengarah ke route users/{id}/edit. Form edit sudah terisi data user, termasuk pilihan level. Method update menyimpan perubahan.

Gambar 17: Form edit user dengan data yang sudah ada (misal mengubah nama lengkap).

10.3 Delete User

Tombol hapus menggunakan konfirmasi JavaScript (alert) dan method DELETE. Setelah dihapus, muncul pesan sukses.

Gambar 18: Konfirmasi penghapusan user dan notifikasi "User berhasil dihapus".

📋 Rangkuman Perintah Artisan yang Digunakan

✅ Kesimpulan

Praktikum ini berhasil menerapkan sistem authentication pada Laravel menggunakan package laravel/ui dengan tampilan Bootstrap. Customisasi tabel users (penambahan kolom username, level, status) dapat dilakukan melalui migration. Seluruh tampilan antarmuka diubah menggunakan template SB Admin 2 yang memberikan tampilan dashboard profesional. Fitur manajemen users (CRUD) lengkap dengan resource controller, validasi, dan session flash message telah berfungsi dengan baik. Dengan demikian, pemahaman tentang Laravel authentication, templating Blade, dan operasi CRUD pada database semakin mantap.

Laporan ini melampirkan bukti dokumentasi setiap langkah berupa screenshot terminal dan tampilan web.

📸 Galeri Dokumentasi Praktikum (Folder lprk9)

Gambar 1: Create project

Gambar 2: Tampilan awal

Gambar 3: Konfigurasi .env

Gambar 4: Install laravel/ui

Gambar 5: php artisan ui bootstrap --auth

Gambar 6: npm install && npm run dev

Gambar 7: php artisan migrate

Gambar 8: Halaman login SB Admin 2

Gambar 9: Halaman register

Gambar 10: Register terisi

Gambar 11: Dashboard default

Gambar 12: Make migration costum_table_users

Gambar 13: Migrate success

Gambar 14: Seeder Admin

Gambar 15: Dashboard setelah templating

Gambar 16: Halaman manajemen user

Gambar 17: Alert tambah user berhasil

Gambar 18: List user dengan data

Gambar 19: Konfirmasi hapus user

Gambar 20: Form edit user

Catatan: Seluruh gambar disimpan dalam folder lprk9 sesuai permintaan.