Praktikum 9

Laravel UI Bootstrap dan Templating
untuk Aplikasi User Management

Dokumentasi Praktikum 9 menampilkan implementasi Laravel UI Bootstrap dan integrasi SB Admin 2 untuk membuat sistem autentikasi, user management, dan templating layout yang konsisten.

View Github Back to Projects
Laravel UI Bootstrap

Ringkasan Praktikum 9

Praktikum ini memfokuskan pada penggunaan Laravel UI Bootstrap untuk autentikasi dan templating SB Admin 2, disertai user CRUD, DataTables, Select2, dan dokumentasi halaman aplikasi.

Laravel Authentication

Menggunakan Laravel UI untuk membuat login, register, dan reset password.

SB Admin 2

Integrasi layout admin profesional dengan sidebar, topbar, dan konten dashboard.

CRUD User

Implementasi resource controller, DataTables, dan form create/edit.

1. Membuat Project Laravel Sisfo

Langkah pertama adalah membuat project Laravel baru dengan Composer. Perintah ini membuat struktur proyek lengkap dengan folder app, routes, dan dependensi Laravel. 

composer create-project laravel/laravel laravel-sisfo

Setelah proses selesai, aplikasi dijalankan dengan server bawaan Laravel untuk memastikan environment berfungsi.

php artisan serve
Hasil

Aplikasi Laravel berhasil dijalankan di http://127.0.0.1:8000 dan siap untuk konfigurasi selanjutnya.

2. Konfigurasi Database

Konfigurasi database di file .env diperlukan agar Laravel dapat terhubung ke MySQL untuk menyimpan data pengguna, sesi, dan tabel aplikasi. Pengaturan ini menentukan driver, host, port, nama database, serta kredensial akses.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-sisfo
DB_USERNAME=root
DB_PASSWORD=

Setelah konfigurasi berhasil, Laravel menggunakan informasi tersebut untuk membangun koneksi database saat menjalankan migration dan query Eloquent.

Tujuan
  • Menghubungkan aplikasi Laravel ke MySQL
  • Mengaktifkan migration dan seeding
  • Menggunakan environment terpisah untuk development

3. Laravel Authentication

Laravel UI Bootstrap menawarkan autentikasi siap pakai dengan layout Bootstrap yang mudah dikembangkan.

Install Laravel UI

composer require laravel/ui

Package ini menambahkan generator frontend untuk Bootstrap, Vue, dan React pada Laravel.

Generate Bootstrap Authentication

php artisan ui bootstrap --auth

Perintah ini membuat route, controller, view, dan asset Bootstrap untuk halaman login, register, dan password reset.

Install Dependency Frontend

npm install
npm run dev

Build asset frontend Laravel menggunakan NPM dan Vite, sehingga tampilan Bootstrap dapat aktif di aplikasi.

Migration Authentication

php artisan migrate

Perintah ini membuat tabel users, password_resets, personal_access_tokens, dan tabel pendukung autentikasi.

Hasil Otomatis Laravel Authentication

  • Login
  • Register
  • Forgot Password
  • Authentication Route
  • Authentication Controller
  • Authentication View

Laravel membuat struktur autentikasi lengkap sehingga pengembang dapat langsung fokus pada integrasi UI dan fungsi aplikasi.

4. Pengujian Authentication

Setelah proses build selesai, halaman autentikasi diuji untuk memastikan login, register, dan dashboard berjalan sesuai harapan.

  • Halaman Login: Form login Bootstrap dengan validasi bawaan Laravel.
  • Halaman Register: Form pendaftaran pengguna baru dengan koneksi ke tabel users.
  • Dashboard Setelah Login: Halaman beranda yang hanya dapat diakses oleh pengguna terautentikasi.

Implementasi authentication bawaan Laravel memastikan sesi user aman, redirect otomatis, dan middleware auth bekerja dengan benar.

Hasil

Halaman autentikasi berjalan dengan baik dan dashboard tampil setelah pengguna login.

5. Custom Table Users

Untuk kebutuhan aplikasi, tabel users dikembangkan dengan field tambahan agar setiap akun memiliki informasi username, level, dan status.

php artisan make:migration costum_table_users

Di file migration, ditambahkan field baru berikut:

$table->string('username')->unique();
$table->string('level');
$table->enum('status',['ACTIVE','INACTIVE']);

Perubahan ini membuat struktur tabel users menjadi lebih lengkap untuk kebutuhan manajemen user di dashboard admin.

Penjelasan
  • username: Identitas login unik selain email.
  • level: Role pengguna (ADMIN, GURU, STAFF).
  • status: Status akun aktif atau nonaktif.

6. Seeder Admin

Akun admin default dibuat melalui seeder agar administrator dapat langsung masuk tanpa membuat pengguna manual.

php artisan make:seeder AdminSeeder

Seeder ini berisi data akun admin dengan email, username, password terenkripsi, level, dan status aktif.

php artisan db:seed --class=AdminSeeder

Setelah seeding dijalankan, akun admin default dapat digunakan untuk login melalui halaman autentikasi.

Hasil Seeder

Data admin tersimpan di tabel users dan dapat digunakan sebagai akun utama aplikasi.

7. Integrasi Template SB Admin 2

Template SB Admin 2 dipakai untuk menghadirkan tampilan dashboard admin dengan sidebar, topbar, dan layout yang konsisten.

Langkah Integrasi

  • Download template SB Admin 2
  • Buat folder public/sbadmin
  • Salin seluruh asset template (CSS, JS, dan vendor)

Konsep Templating

Laravel Blade digunakan untuk mengelola layout dengan directive:

@extends('layouts.main')
@include('layouts.sidebar')
@yield('content')
@section('title', 'Dashboard')
app.blade.php

Layout untuk halaman login.

main.blade.php

Layout utama aplikasi dashboard.

sidebar.blade.php

Navigasi dashboard untuk menu user management.

topbar.blade.php

Menampilkan user menu dan tombol logout.

home.blade.php

Halaman dashboard utama menggunakan @extends('layouts.main') dan menyajikan ringkasan informasi user serta navigasi CRUD.

8. User Management CRUD

User management dibangun dengan controller resource Laravel untuk menyediakan operasi create, read, update, dan delete.

Membuat Resource Controller

php artisan make:controller UserController --resource

Controller resource otomatis menyertakan method CRUD standar.

Routing Resource

Route::resource('users', UserController::class);

Route ini memetakan URL ke method index, create, store, edit, update, dan destroy.

Fungsi Method Controller

  • index: Menampilkan daftar user.
  • create: Menampilkan form tambah user.
  • store: Menyimpan user baru ke database.
  • edit: Menampilkan form edit data user.
  • update: Memperbarui data user.
  • destroy: Menghapus user.

9. Create User

Halaman create user menghadirkan form lengkap untuk nama, email, username, password, dan level pengguna.

Field pada create.blade.php mencakup:

  • Nama
  • Email
  • Username
  • Password
  • Level
Select2 Multiple

Level pengguna menggunakan plugin Select2 untuk tampilan yang modern dan mudah digunakan.

$('.select2-multiple').select2({
    placeholder: 'Pilih',
    allowClear: true
});

Pilihan level meliputi ADMIN, GURU, dan STAFF.

10. Store User

Proses penyimpanan user menggunakan model User dengan hash password dan penyimpanan level dalam format JSON agar data multi-role dapat dikelola.

$user = new User;
$user->name = $request->get('nama');
$user->username = $request->get('username');
$user->email = $request->get('email');
$user->password = Hash::make($request->get('password'));
$user->level = json_encode($request->get('level'));
$user->save();
Penjelasan

Penyimpanan password menggunakan hashing meningkatkan keamanan, sementara json_encode memungkinkan level multi-value jika diperlukan.

11. Read / List User

Method index() mengambil seluruh data user dan menampilkannya dalam tabel yang mudah dibaca.

public function index()
{
    $users = User::all();
    return view('users.index', compact('users'));
}

Pada index.blade.php, tabel menampilkan kolom nama, username, email, dan action untuk edit atau hapus.

Kolom Tabel
  • Name
  • Username
  • Email
  • Action

12. DataTables

DataTables meningkatkan pengalaman manajemen data dengan pagination, pencarian, dan sorting otomatis di tabel user.

dataTables.bootstrap4.min.css
jquery.dataTables.min.js
dataTables.bootstrap4.min.js
Keuntungan
  • Memudahkan pencarian data
  • Mengatur pagination otomatis
  • Mendukung sorting kolom

13. Edit User

Tombol edit pada tabel user mengarahkan ke halaman edit dengan data lama sudah terisi di form. Hal ini memudahkan administrator memperbarui akun.

route('users.edit', $user->id)

Pada method edit(), user dicari menggunakan ID dan ditampilkan pada view edit.

$user = User::findOrFail($id);
edit.blade.php

Form menampilkan nilai lama sehingga administrator dapat mengubah data tanpa mengetik ulang semua field.

14. Update User

Metode update() digunakan untuk menyimpan perubahan data user. Biasanya route update menggunakan method PUT agar sesuai konvensi RESTful.

Proses update memvalidasi input, kemudian memperbarui field pengguna di database.

Proses Update
  • Ambil data user berdasarkan ID
  • Validasi input
  • Update atribut user
  • Simpan perubahan ke database

15. Delete User

Tombol delete menghapus user dari tabel dan membersihkan akun yang tidak lagi diperlukan.

$user->delete();

Metode destroy() dipanggil oleh route delete untuk menghapus record user secara permanen.

Penjelasan

Penghapusan user umumnya disertai konfirmasi agar tidak terjadi penghapusan tak sengaja.

16. Kesimpulan

Praktikum 9 memperkuat kemampuan Laravel dalam membuat autentikasi, migrasi custom user, seeder admin, integrasi template SB Admin 2, serta implementasi CRUD user yang responsif.

Dengan fitur DataTables dan Select2, halaman manajemen user menjadi lebih interaktif, sedangkan konsep Blade templating memudahkan pengelolaan layout dashboard.

Poin Utama
  • Authentication Laravel UI
  • Migration Custom User
  • Seeder Admin
  • SB Admin 2
  • Blade Templating
  • CRUD User
  • DataTables & Select2

Dokumentasi Hasil

Berikut gambar placeholder dokumentasi untuk implementasi halaman autentikasi, dashboard, CRUD user, dan layout SB Admin 2.

Login page screenshot
Login Page
Register page screenshot
Register Page
Dashboard page screenshot
Dashboard Page
Custom users table screenshot
Custom Users Table
Admin seeder screenshot
Admin Seeder
SB Admin login screenshot
SB Admin Login
Main layout screenshot
Main Layout
Sidebar layout screenshot
Sidebar Layout
Topbar layout screenshot
Topbar Layout
Users index screenshot
Users Index
Users create screenshot
Users Create
Users edit screenshot
Users Edit
Users datatables screenshot
Users DataTables

Karimah Irsyadiyah

Mahasiswa Informatika, Universitas Andalas

Profil Profesional

Dokumentasi ini menampilkan implementasi Laravel UI, templating SB Admin 2, dan user CRUD yang konsisten dengan rangkaian portfolio Laravel sebelumnya.

GitHub Instagram LinkedIn WhatsApp Repo Praktikum 9