PRAKTIKUM 2 — FRAMEWORK LARAVEL

Laravel UI Bootstrap,
Authentication & Templating

Laporan resmi praktikum — Implementasi sistem autentikasi bawaan Laravel menggunakan package laravel/ui, integrasi template SB Admin 2, dan manajemen pengguna dengan operasi CRUD lengkap.

2026 Laravel 9 Bootstrap 4 — SB Admin 2 Auth Scaffolding

Pendahuluan & Tujuan

Pendahuluan

Melanjutkan praktikum sebelumnya, praktikum ini membahas integrasi fitur autentikasi ke dalam proyek Laravel menggunakan package laravel/ui. Package ini secara otomatis men-generate controller, model, view, dan route yang diperlukan untuk proses login, registrasi, dan pengelolaan sesi pengguna.

Selain autentikasi, praktikum ini juga mencakup penerapan template admin berbasis Bootstrap yaitu SB Admin 2 dari StartBootstrap, serta implementasi fitur manajemen pengguna dengan pola Resource Controller yang menyediakan operasi CRUD (Create, Read, Update, Delete) secara terstruktur.

Tujuan Praktikum

Menginstalasi dan mengkonfigurasi package laravel/ui untuk autentikasi bawaan Laravel.
Mengunduh dan mengintegrasikan template Bootstrap SB Admin 2 ke dalam proyek Laravel.
Memahami konsep layouting dengan Blade Template Engine menggunakan @extends, @yield, dan @include.
Mengimplementasikan Resource Controller untuk manajemen pengguna (CRUD).
Melakukan kustomisasi tabel users dan seeding data menggunakan Artisan.

Lingkungan Pengembangan

Tools & Teknologi

XAMPP (Apache & MySQL)

PHP 8.x

Composer 2.x

Bootstrap 4 (SB Admin 2)

VS Code

MySQL / phpMyAdmin

Node.js & npm

Template SB Admin 2 diunduh dari startbootstrap.com/theme/sb-admin-2 kemudian di-extract dan disalin ke folder public/sbadmin/ pada proyek Laravel.

Metodologi & Implementasi

Konfigurasi Database

Sebelum menjalankan autentikasi, database harus dikonfigurasi terlebih dahulu melalui file .env di root proyek Laravel. Buka file tersebut dan sesuaikan nilai berikut:

// .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_sisfo
DB_USERNAME=root
DB_PASSWORD=

Pastikan database laravel_sisfo telah dibuat di phpMyAdmin sebelum menjalankan migrasi, atau biarkan Laravel membuatnya secara otomatis saat migrasi pertama dijalankan.

Instalasi Package Laravel/UI & Autentikasi

Package laravel/ui menyediakan scaffolding antarmuka pengguna untuk autentikasi. Instal melalui Composer, lalu jalankan perintah artisan untuk men-generate scaffold autentikasi berbasis Bootstrap:

// Terminal — Install package

composer require laravel/ui

// Terminal — Generate auth scaffolding dengan Bootstrap

php artisan ui bootstrap --auth

Output yang diharapkan:
INFO Authentication scaffolding generated successfully.
INFO Bootstrap scaffolding installed successfully.
WARN Please run [npm install && npm run dev] to compile your fresh scaffolding.

Selanjutnya compile aset front-end menggunakan npm:

npm install && npm run dev

Setelah scaffolding berhasil, Laravel secara otomatis men-generate file-file berikut:

Controllers yang di-generate

app/Http/Controllers/Auth/ ├── ConfirmPasswordController.php ├── ForgotPasswordController.php ├── LoginController.php ├── RegisterController.php ├── ResetPasswordController.php └── VerificationController.php app/Http/Controllers/ ├── Controller.php └── HomeController.php

Views yang di-generate

resources/views/ ├── auth/ │ ├── passwords/ │ │ ├── confirm.blade.php │ │ ├── email.blade.php │ │ └── reset.blade.php │ ├── login.blade.php │ ├── register.blade.php │ └── verify.blade.php └── layouts/ ├── app.blade.php └── home.blade.php

Migrasi Database & Kustomisasi Tabel Users

Jalankan migrasi untuk membuat tabel-tabel autentikasi secara otomatis. Jika database belum ada, Laravel akan memberikan konfirmasi pembuatannya:

php artisan migrate

Tabel yang dibuat: users, password_resets, failed_jobs, personal_access_tokens.

Struktur Awal Tabel Users

#	Name	Type
1	id	bigint(20)
2	name	varchar(255)
3	email	varchar(255)
4	email_verified_at	timestamp
5	password	varchar(255)
6	remember_token	varchar(100)
7	created_at	timestamp
8	updated_at	timestamp

Untuk kebutuhan aplikasi, perlu ditambahkan field username, level, dan status. Buat migration baru:

php artisan make:migration costum_table_users

Buka file migrasi yang baru dibuat di database/migrations/ dan isi dengan kode berikut:

// database/migrations/..._costum_table_users.php

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string("username")->unique();
            $table->string("level");
            $table->enum("status", ["ACTIVE", "INACTIVE"]);
        });
    }

    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn("username");
            $table->dropColumn("level");
            $table->dropColumn("status");
        });
    }
};

php artisan migrate

Struktur Tabel Users Setelah Kustomisasi

#	Name	Type
1–8	... (field bawaan)	—
9	username	varchar(255) UNIQUE
10	level	varchar(255)
11	status	enum('ACTIVE','INACTIVE')

Seeding User Admin

Buat seeder untuk mengisi data admin awal menggunakan Artisan:

php artisan make:seeder AdminSeeder

Buka file database/seeders/AdminSeeder.php dan isi dengan kode berikut:

// database/seeders/AdminSeeder.php

<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;

class AdminSeeder extends Seeder
{
    public function run()
    {
        $admin = new \App\Models\User;
        $admin->username  = "admin";
        $admin->name      = "Admin Aplikasi";
        $admin->email     = "admin@sisfo.com";
        $admin->level     = json_encode(["ADMIN"]);
        $admin->password  = \Hash::make("12345678");
        $admin->save();

        $this->command->info("User Admin berhasil ditambahkan");
    }
}

php artisan db:seed --class=AdminSeeder

Output: INFO Seeding database. → User Admin berhasil ditambahkan

Halaman Login Bawaan Laravel Akses via http://127.0.0.1:8000/login

Halaman Register Bawaan LaravelAkses via http://127.0.0.1:8000/register

Halaman Dashboard Setelah LoginMenampilkan "selamat datang"

Templating dengan SB Admin 2

Unduh template SB Admin 2 dari startbootstrap.com/theme/sb-admin-2, kemudian extract. Salin seluruh isi folder asset ke dalam public/sbadmin/ pada proyek Laravel.

Struktur folder yang diperlukan: public/sbadmin/css/, public/sbadmin/js/, public/sbadmin/vendor/, public/sbadmin/img/

Halaman Login dengan SB Admin 2

Ganti isi resources/views/layouts/app.blade.php dengan template login SB Admin 2. Perhatikan penggunaan helper asset() untuk memanggil file statis:

// resources/views/layouts/app.blade.php (halaman login)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sisfo - Login</title>
    <link href="{{asset('sbadmin/vendor/fontawesome-free/css/all.min.css')}}"
          rel="stylesheet" type="text/css">
    <link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-6 col-md-9">
                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <div class="col-lg-12 text-center">
                            <div class="p-5">
                                <h1 class="h4 text-gray-900 mb-4">Halaman Login</h1>
                                <form class="user" method="POST" action="{{ route('login') }}">
                                    @csrf
                                    <!-- Input email & password -->
                                    <input type="email" name="email" class="form-control form-control-user" />
                                    <input type="password" name="password" class="form-control form-control-user" />
                                    <button type="submit" class="btn btn-primary btn-user btn-block">Login</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script>
    <script src="{{asset('sbadmin/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
    <script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script>
</body>
</html>

Layout Global — main.blade.php

Buat file baru resources/views/layouts/main.blade.php sebagai layout utama aplikasi. Layout ini menggunakan @include untuk memanggil sidebar dan topbar, serta @yield untuk menyuntikkan konten dari view lain:

// resources/views/layouts/main.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sisfo - @yield('judul')</title>
    <link href="{{asset('sbadmin/vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet">
    <link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="{{asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.css')}}" rel="stylesheet">
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
    @include("layouts.sidebar")       {{-- Sidebar kiri --}}
    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            @include('layouts.topbar') {{-- Navbar atas --}}
            <div class="container-fluid">
                <h1 class="h3 mb-4 text-gray-800">@yield("judul")</h1>
                @yield("konten")       {{-- Konten halaman --}}
            </div>
        </div>
        <footer class="sticky-footer bg-white">
            <span>Copyright &copy; Sisfo</span>
        </footer>
    </div>
</div>
<!-- Scripts -->
<script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('sbadmin/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('sbadmin/vendor/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</body>
</html>

Sidebar & Topbar

Buat dua file partial di resources/views/layouts/:

// resources/views/layouts/sidebar.blade.php

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
        <div class="sidebar-brand-icon rotate-n-15">
            <i class="fas fa-laugh-wink"></i>
        </div>
        <div class="sidebar-brand-text mx-3">Sisfo</div>
    </a>
    <hr class="sidebar-divider my-0">
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ route('users.index') }}">
            <i class="fas fa-fw fa-users"></i>
            <span>Users</span>
        </a>
    </li>
    <hr class="sidebar-divider d-none d-md-block">
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>
</ul>

// resources/views/layouts/topbar.blade.php

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown no-arrow">
            @if (\Auth::user())
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown"
               role="button" data-toggle="dropdown">
                <span class="mr-2 d-none d-lg-inline text-gray-600 small">
                    {{ Auth::user()->name }}
                </span>
                <img class="img-profile rounded-circle"
                     src="{{ asset('sbadmin/img/undraw_profile.svg') }}">
            </a>
            @endif
            <div class="dropdown-menu dropdown-menu-right shadow">
                <a class="dropdown-item" href="#" data-toggle="modal"
                   data-target="#logoutModal">
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2"></i> Logout
                </a>
            </div>
        </li>
    </ul>
</nav>

Cara Penggunaan Layout

Untuk menggunakan layout main.blade.php pada view lain, gunakan sintaks @extends dan @section:

// resources/views/home.blade.php

@extends('layouts.main')

@section("judul") Dashboard @endsection

@section('konten')
    <p>Selamat datang di Dashboard Sisfo.</p>
@endsection

Halaman Login dengan SB Admin 2Background biru gradient khas SB Admin 2

Tampilan Dashboard dengan LayoutSidebar, Topbar, dan area konten terpadu

Manajemen Users — Resource Controller (CRUD)

Buat Resource Controller untuk manajemen pengguna. Resource Controller menyediakan 7 method secara otomatis (index, create, store, show, edit, update, destroy):

php artisan make:controller UserController --resource

Tambahkan route resource di routes/web.php:

// routes/web.php

use App\Http\Controllers\UserController;

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

Pemetaan Route Resource

Method	URI	Action	Route Name
GET	/users	index	users.index
POST	/users	store	users.store
GET	/users/create	create	users.create
GET	/users/{user}	show	users.show
PUT/PATCH	/users/{user}	update	users.update
DELETE	/users/{user}	destroy	users.destroy
GET	/users/{user}/edit	edit	users.edit

CREATE — Tambah User Baru

// app/Http/Controllers/UserController.php — method create & store

public function create()
{
    return view('user.create');
}

public function store(Request $request)
{
    $user           = new \App\Models\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();

    return redirect()->route('users.index')->with('status', 'User baru berhasil ditambahkan');
}

View form tambah user di resources/views/user/create.blade.php menggunakan layout main dan Select2 untuk pemilihan level:

// resources/views/user/create.blade.php (ringkasan)

@extends('layouts.main')
@section("judul") Create User @endsection
@section('konten')
<div class="card shadow mb-4">
    <div class="card-body">
        <form method="POST" action="{{ route('users.store') }}">
            @csrf
            <!-- Input: Nama, Email, Username, Password -->
            <input type="text"     name="nama"     class="form-control">
            <input type="email"    name="email"    class="form-control">
            <input type="text"     name="username" class="form-control">
            <input type="password" name="password" class="form-control">
            <!-- Select2 untuk Level (multiple) -->
            <select class="form-control select2-multiple" name="level[]" multiple>
                <option value="ADMIN">ADMIN</option>
                <option value="GURU">GURU</option>
                <option value="STAFF">STAFF</option>
            </select>
            <button type="submit" class="btn btn-primary">Simpan</button>
        </form>
    </div>
</div>
@endsection

READ — Daftar Users

// UserController.php — method index

public function index()
{
    $users = \App\Models\User::all();
    return view('user.index', ['users' => $users]);
}

View list menggunakan DataTables untuk pencarian dan paginasi otomatis:

// resources/views/user/index.blade.php (ringkasan)

@extends('layouts.main')
@section("judul") Users @endsection
@section('konten')
@if(session('status'))
    <div class="alert alert-success">{{ session('status') }}</div>
@endif
<p>
    <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">Tambah User</a>
</p>
<table class="table table-bordered" id="dataTable">
    <thead>
        <tr><th>Name</th><th>Username</th><th>Email</th><th>Action</th></tr>
    </thead>
    <tbody>
        @foreach($users as $user)
        <tr>
            <td>{{ $user->name }}</td>
            <td>{{ $user->username }}</td>
            <td>{{ $user->email }}</td>
            <td>
                <a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-success">Edit</a>
                <!-- Tombol Hapus -->
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
@endsection

UPDATE — Edit User

// UserController.php — method edit & update

public function edit($id)
{
    $user = \App\Models\User::findOrFail($id);
    return view('user.edit', ['user' => $user]);
}

public function update(Request $request, $id)
{
    $user        = \App\Models\User::findOrFail($id);
    $user->name  = $request->get('nama');
    $user->level = json_encode($request->get('level'));
    $user->save();

    return redirect()->route('users.index')->with('status', 'User berhasil diubah');
}

Karena HTML form hanya mendukung method GET dan POST, pengiriman data UPDATE menggunakan method spoofing dengan menambahkan <input type="hidden" name="_method" value="PUT"> di dalam form.

DELETE — Hapus User

// UserController.php — method destroy

public function destroy($id)
{
    $user = \App\Models\User::findOrFail($id);
    $user->delete();

    return redirect()->route('users.index')->with('status', 'User berhasil dihapus');
}

Tombol hapus menggunakan konfirmasi JavaScript dan method spoofing DELETE:

<form onsubmit="return confirm('Hapus data user ?')" class="d-inline"
      action="{{route('users.destroy', [$user->id])}}" method="POST">
    @csrf
    <input type="hidden" name="_method" value="DELETE">
    <input type="submit" value="Hapus" class="btn btn-danger btn-sm">
</form>

Hasil pengujian — Seluruh operasi CRUD berhasil diimplementasikan: penambahan user baru, tampilan daftar dengan DataTables, edit data, dan penghapusan dengan konfirmasi dialog. Flash session status menampilkan notifikasi keberhasilan pada setiap operasi.

Form Tambah User BaruDengan Select2 untuk pemilihan level

Tabel Daftar User dengan DataTablesFitur search & pagination otomatis

Form Edit UserData existing ter-populate otomatis

Dialog Konfirmasi PenghapusanPop-up browser confirm sebelum delete

Kesimpulan

Ringkasan Praktikum

Praktikum ini telah berhasil mendemonstrasikan beberapa konsep penting dalam pengembangan aplikasi web menggunakan Laravel:

Package laravel/ui mempercepat pembuatan sistem autentikasi dengan men-generate controller, model, view, dan route secara otomatis, termasuk halaman login, register, dan forgot password.
Blade Template Engine memungkinkan pemisahan tampilan yang bersih melalui mekanisme @extends, @yield, @section, dan @include, sehingga perubahan layout global cukup dilakukan di satu file.
Integrasi template SB Admin 2 menunjukkan fleksibilitas Laravel dalam mengadopsi template HTML/CSS pihak ketiga melalui mekanisme asset() helper.
Resource Controller menyederhanakan implementasi CRUD dengan memetakan 7 route secara konvensional, mencerminkan prinsip RESTful API dalam aplikasi web.
Fitur Migration dan Seeding pada Laravel memudahkan pengelolaan skema database secara terstruktur dan reproducible.