Laporan Praktikum 9 - Ahmad Zahran

I. Pendahuluan

Praktikum ini merupakan studi kasus pengembangan Sistem Informasi Sekolah (Sisfo) berbasis Laravel 9. Dalam studi kasus ini, dibangun sebuah aplikasi web yang dilengkapi dengan fitur autentikasi pengguna, templating antarmuka menggunakan template SB Admin 2, serta fitur manajemen data pengguna (Users) secara lengkap menggunakan CRUD.

Laravel menyediakan package laravel/ui yang memudahkan pembuatan fitur autentikasi (login, register, forgot password) secara otomatis menggunakan scaffolding Bootstrap. Fitur ini meng-generate controller, view, route, dan migration yang diperlukan hanya dengan beberapa perintah artisan.

Setelah autentikasi berhasil dikonfigurasi, tampilan aplikasi disesuaikan menggunakan template SB Admin 2 yang berbasis Bootstrap, sehingga menghasilkan antarmuka yang profesional dengan sidebar navigasi, topbar, dan layout yang responsif.

Alur Studi Kasus:

Buat Project

Konfigurasi DB

Install Laravel/UI

Setup Template

CRUD Users

II. Tujuan Praktikum

Membuat project Laravel baru dan melakukan konfigurasi database.

Mengimplementasikan fitur autentikasi menggunakan package laravel/ui dengan scaffolding Bootstrap.

Melakukan kustomisasi tabel users dengan menambahkan kolom username, level, dan status.

Membuat data admin awal menggunakan fitur Seeder Laravel.

Mengintegrasikan template SB Admin 2 ke dalam aplikasi Laravel sebagai layout global.

Membuat layout modular menggunakan @include untuk komponen sidebar dan topbar.

Mengimplementasikan fitur CRUD (Create, Read, Update, Delete) lengkap untuk manajemen data pengguna.

III. Langkah Kerja

Langkah 1 — Membuat Project Laravel Sisfo

Ada dua cara untuk membuat project Laravel baru:

A. Menggunakan Global Installer Laravel

Buat folder workspace di dalam htdocs, lalu install Laravel installer secara global:

composer global require "laravel/installer"

Kemudian buat project baru:

laravel new laravel-sisfo

B. Menggunakan Composer (cara alternatif)

composer create-project laravel/laravel=^9.0 laravel-sisfo --prefer-dist

Jalankan project:

php artisan serve

Tampilan utama Laravel — Tampilan halaman utama Laravel setelah `php artisan serve`

Langkah 2 — Konfigurasi Database

Konfigurasi File `.env`

Buka file .env pada root project, kemudian isi konfigurasi database berikut:

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

Langkah 3 — User Authentication

User authentication menggunakan fitur bawaan Laravel melalui package laravel/ui.

A. Install Package laravel/ui

composer require laravel/ui

B. Generate Scaffolding Authentication Bootstrap

php artisan ui bootstrap --auth

Perintah ini meng-generate controller auth, view login/register/forgot password, dan route authentication secara otomatis.

Controllers/Auth/ ConfirmPasswordController.php ForgotPasswordController.php LoginController.php RegisterController.php ResetPasswordController.php VerificationController.php views/auth/ login.blade.php register.blade.php verify.blade.php views/layouts/ app.blade.php home.blade.php

C. Install dan Compile Asset

npm install && npm run dev

D. Jalankan Migration

php artisan migrate

Laravel akan membuat tabel-tabel authentication secara otomatis: users, password_resets, failed_jobs, dan personal_access_tokens.

E. Hasil Autentikasi

Setelah instalasi berhasil, akses halaman berikut melalui browser:

🔑 Login — /login

📝 Register — /register

🏠 Dashboard — /home

Custom Tabel Users

Tambah Kolom username, level, status

Tabel users default belum memiliki kolom yang dibutuhkan. Buat migration baru:

php artisan make:migration costum_table_users

Isi file migration dengan kode berikut:

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

Seeding User Admin

Buat AdminSeeder

php artisan make:seeder AdminSeeder

Isi AdminSeeder.php:

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");
}

Jalankan seeder:

php artisan db:seed --class=AdminSeeder

Langkah 4 — Templating dengan SB Admin 2

Template SB Admin 2 digunakan sebagai tampilan utama aplikasi. Download template dari startbootstrap.com, ekstrak, lalu salin seluruh asset ke folder public/sbadmin pada project Laravel.

A. Halaman Login (app.blade.php)

Edit file views/layouts/app.blade.php untuk menggunakan tampilan login SB Admin 2 dengan background gradient biru dan form login yang sudah terintegrasi Bootstrap.

<!-- Asset SB Admin 2 -->
<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">

<body class="bg-gradient-primary">
<!-- Form login menggunakan route('login') -->
<form method="POST" action="{{ route('login') }}">
    @csrf
    <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>

B. Layout Global (main.blade.php)

Buat file views/layouts/main.blade.php sebagai layout utama yang digunakan oleh semua halaman. Layout ini memanggil komponen sidebar dan topbar menggunakan @include.

<!-- Sidebar -->
@include("layouts.sidebar")

<!-- Topbar -->
@include('layouts.topbar')

<!-- Konten Halaman -->
<h1 class="h3 mb-4 text-gray-800">@yield("judul")</h1>
@yield("konten")

C. Sidebar (sidebar.blade.php)

Buat file views/layouts/sidebar.blade.php berisi navigasi kiri dengan menu Dashboard dan tombol collapse sidebar.

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion">
    <a class="sidebar-brand" href="#">
        <div class="sidebar-brand-icon"><i class="fas fa-laugh-wink"></i></div>
        <div class="sidebar-brand-text mx-3">Sisfo</div>
    </a>
    <li class="nav-item">
        <a class="nav-link" href="index.html">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span>
        </a>
    </li>
</ul>

D. Topbar (topbar.blade.php)

Buat file views/layouts/topbar.blade.php berisi navbar atas dengan dropdown informasi pengguna yang sedang login.

<span class="mr-2 d-none d-lg-inline text-gray-600 small">
    {{ Auth::user()->name }}
</span>
<!-- Link Logout via modal -->
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
    Logout
</a>

E. Cara Menggunakan Layout Main

Setiap view yang ingin menggunakan layout main cukup menggunakan @extends:

@extends('layouts.main')

@section("judul") Dashboard @endsection

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

Tampilan Dashboard Sisfo dengan layout SB Admin 2 setelah berhasil login

Langkah 5 — Manajemen Users (CRUD)

Buat UserController Resource & Route

php artisan make:controller UserController --resource

Tambahkan route resource di routes/web.php:

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

CREATE Tambah User

Method create() & store()

Method create() menampilkan form, store() menyimpan data ke database:

// UserController.php
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');
}

Form create menggunakan Select2 untuk input level (multi-select: ADMIN, GURU, STAFF). Tambahkan CDN Select2 ke main.blade.php:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Form Create User dengan input Nama, Email, Username, Password, dan Level

User berhasil ditambahkan — Notifikasi sukses setelah user baru berhasil ditambahkan

READ Daftar Users

Method index()

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

View user/index.blade.php menampilkan data users dalam tabel dengan DataTables. Tambahkan asset DataTables ke main.blade.php:

<link href="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<script src="{{ asset('sbadmin/vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

List Users — Halaman daftar users dengan tombol Edit dan Hapus

UPDATE Edit User

Method edit() & update()

Tombol edit di tabel mengarahkan ke form edit dengan data yang sudah terisi otomatis:

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', [$id])
                     ->with('status', 'User berhasil diubah');
}

Form edit menggunakan method PUT melalui hidden input _method dan opsi level ditandai selected berdasarkan data JSON yang tersimpan:

<option value="ADMIN" {{in_array("ADMIN", json_decode($user->level)) ? "selected" : ""}}>ADMIN</option>

Form Edit User dengan data yang sudah terisi otomatis

User berhasil diupdate — Notifikasi sukses setelah data user berhasil diupdate

DELETE Hapus User

Method destroy()

Tombol hapus menggunakan form dengan konfirmasi JavaScript sebelum menghapus data:

<form onsubmit="return confirm('Hapus data user ?')"
      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>

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

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

Konfirmasi hapus user — Dialog konfirmasi muncul sebelum data user dihapus

Tambahkan Menu Users di Sidebar

Buka layouts/sidebar.blade.php dan tambahkan item menu:

<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>

IV. Kesimpulan

Hasil & Kesimpulan

Package laravel/ui sangat mempermudah pembuatan fitur autentikasi karena meng-generate controller, view, dan route authentication secara otomatis hanya dengan satu perintah artisan.
Custom migration memungkinkan penambahan kolom baru (username, level, status) ke tabel yang sudah ada tanpa perlu membuat ulang tabel dari awal.
Integrasi template SB Admin 2 menghasilkan tampilan aplikasi yang profesional dan responsif dengan memanfaatkan fitur Blade seperti @include, @extends, @yield, dan @section.
Layout modular (main, sidebar, topbar) menerapkan prinsip Don't Repeat Yourself sehingga perubahan pada satu komponen langsung diterapkan ke seluruh halaman yang menggunakannya.
Resource Controller menghasilkan 7 method CRUD secara lengkap dan terstruktur. Penyimpanan level dalam format JSON memungkinkan satu user memiliki lebih dari satu peran (role) sekaligus.
DataTables memberikan fitur pencarian, pengurutan, dan paginasi otomatis pada tabel data user tanpa perlu implementasi manual.

🐙

Source Code & Portofolio

Lihat seluruh project dan laporan praktikum di GitHub

AhmadZahran1011 / portofoliozahran

← Kembali ke Portofolio

Laporan Praktikum Pemrograman Web

Laravel UI · Bootstrap Auth · Templating · Manajemen Users
Studi Kasus: Sistem Informasi Sekolah (Sisfo)

I. Pendahuluan

II. Tujuan Praktikum

III. Langkah Kerja

A. Menggunakan Global Installer Laravel

B. Menggunakan Composer (cara alternatif)

Konfigurasi File `.env`

A. Install Package laravel/ui

B. Generate Scaffolding Authentication Bootstrap

C. Install dan Compile Asset

D. Jalankan Migration

E. Hasil Autentikasi

Tambah Kolom username, level, status

Buat AdminSeeder

A. Halaman Login (app.blade.php)

B. Layout Global (main.blade.php)

C. Sidebar (sidebar.blade.php)

D. Topbar (topbar.blade.php)

E. Cara Menggunakan Layout Main

Buat UserController Resource & Route

Method create() & store()

Method index()

Method edit() & update()

Method destroy()

Tambahkan Menu Users di Sidebar

IV. Kesimpulan

Laporan Praktikum Pemrograman Web

Laravel UI · Bootstrap Auth · Templating · Manajemen Users Studi Kasus: Sistem Informasi Sekolah (Sisfo)

I. Pendahuluan

II. Tujuan Praktikum

III. Langkah Kerja

A. Menggunakan Global Installer Laravel

B. Menggunakan Composer (cara alternatif)

Konfigurasi File .env

A. Install Package laravel/ui

B. Generate Scaffolding Authentication Bootstrap

C. Install dan Compile Asset

D. Jalankan Migration

E. Hasil Autentikasi

Tambah Kolom username, level, status

Buat AdminSeeder

A. Halaman Login (app.blade.php)

B. Layout Global (main.blade.php)

C. Sidebar (sidebar.blade.php)

D. Topbar (topbar.blade.php)

E. Cara Menggunakan Layout Main

Buat UserController Resource & Route

Method create() & store()

Method index()

Method edit() & update()

Method destroy()

Tambahkan Menu Users di Sidebar

IV. Kesimpulan

Laravel UI · Bootstrap Auth · Templating · Manajemen Users
Studi Kasus: Sistem Informasi Sekolah (Sisfo)

Konfigurasi File `.env`