Laporan Praktikum Pemrograman Web: Laravel UI Bootstrap, Templating, dan Manajemen Users (CRUD)

A. Membuat Project dan Konfigurasi Database

Langkah pertama adalah membuat project Laravel baru. Terdapat dua cara yang bisa digunakan, yaitu menggunakan Laravel Global Installer atau menggunakan Composer. Pada praktikum ini digunakan Composer. Setelah project berhasil dibuat, langkah berikutnya adalah membuka file .env dan mengisi konfigurasi database agar Laravel dapat terhubung ke database MySQL lokal. Database yang digunakan pada studi kasus ini diberi nama laravel_sisfo.

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

Klik untuk upload screenshot

Tampilan konfigurasi file .env pada editor

Gambar 2.1: Konfigurasi file .env untuk koneksi database

B. Instalasi Package Laravel/UI dan Scaffolding Autentikasi

Untuk membuat fitur autentikasi secara otomatis, Laravel menyediakan paket bernama laravel/ui. Paket ini perlu diinstal terlebih dahulu menggunakan Composer. Setelah paket berhasil diinstal, perintah php artisan ui bootstrap --auth dijalankan untuk membuat scaffolding autentikasi lengkap berbasis Bootstrap. Perintah ini secara otomatis akan menghasilkan halaman login, register, forgot password, beserta controller dan route yang diperlukan. Langkah terakhir adalah menjalankan npm install && npm run dev untuk mengompilasi file aset (CSS dan JavaScript) yang dibutuhkan.

# Langkah 1: Install package laravel/ui
composer require laravel/ui

# Langkah 2: Generate scaffolding autentikasi dengan Bootstrap
php artisan ui bootstrap --auth

# Langkah 3: Install dan compile asset (CSS & JS)
npm install && npm run dev

Klik untuk upload screenshot

Hasil instalasi composer require laravel/ui

Gambar 2.2: Proses instalasi laravel/ui berhasil

Klik untuk upload screenshot

Output perintah php artisan ui bootstrap --auth

Gambar 2.3: Scaffolding autentikasi berhasil digenerate

C. Menjalankan Migration

Setelah scaffolding autentikasi berhasil, langkah berikutnya adalah menjalankan perintah php artisan migrate agar Laravel membuat tabel-tabel yang dibutuhkan di database secara otomatis. Tabel yang akan dibuat antara lain adalah tabel users, password_resets, failed_jobs, dan personal_access_tokens. Jika database belum tersedia, Laravel akan meminta konfirmasi untuk membuatkannya terlebih dahulu.

php artisan migrate

Klik untuk upload screenshot

Hasil perintah php artisan migrate

Gambar 2.4: Proses migration berhasil, tabel berhasil dibuat di database

D. Kustomisasi Tabel Users (Custom Migration)

Tabel users yang dihasilkan secara default oleh Laravel hanya memiliki kolom dasar seperti name, email, dan password. Pada studi kasus Sisfo, dibutuhkan tiga kolom tambahan yaitu username (unik), level (untuk peran pengguna), dan status (dengan pilihan ACTIVE atau INACTIVE). Untuk menambahkan kolom-kolom ini, dibuat sebuah migration baru menggunakan perintah artisan, kemudian file migration yang terbentuk diisi dengan kode penambahan kolom pada tabel users.

php artisan make:migration costum_table_users

Setelah file migration terbuat di folder database/migrations/, buka file tersebut dan isi method up() dengan kode berikut untuk menambahkan ketiga kolom baru ke tabel users. Method down() diisi dengan kode untuk menghapus kolom tersebut apabila migration di-rollback.

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

Klik untuk upload screenshot

Struktur tabel users setelah custom migration

Gambar 2.5: Struktur tabel users setelah ditambahkan kolom username, level, dan status

E. Seeding: Membuat Akun Admin Awal

Setelah struktur tabel sesuai kebutuhan, langkah berikutnya adalah membuat data akun admin secara otomatis menggunakan fitur Seeding. Seeder dibuat dengan perintah artisan, kemudian file AdminSeeder.php yang terbentuk diisi dengan kode untuk membuat satu akun admin. Password disimpan dalam bentuk hash menggunakan Hash::make() agar aman. Level disimpan dalam format JSON karena satu user dapat memiliki lebih dari satu level. Setelah seeder siap, dijalankan dengan perintah php artisan db:seed.

php artisan make:seeder AdminSeeder

<?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->status   = 'ACTIVE';
        $admin->password = \Hash::make('12345678');
        $admin->save();

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

php artisan db:seed --class=AdminSeeder

Klik untuk upload screenshot

Hasil perintah db:seed --class=AdminSeeder

Gambar 2.6: Seeding berhasil, user Admin berhasil ditambahkan

Klik untuk upload screenshot

Tampilan dashboard setelah login menggunakan akun admin

Gambar 2.7: Berhasil login menggunakan akun admin yang baru dibuat

F. Templating: Membuat Layout Global dengan SB Admin 2

Pada tahap ini dilakukan konfigurasi tampilan aplikasi menggunakan template SB Admin 2 yang diunduh dari situs resminya. Seluruh file aset template (CSS, JS, font, dan gambar) disalin ke folder public/sbadmin pada project Laravel. Terdapat tiga layout utama yang dibuat, yaitu app.blade.php khusus untuk halaman login, dan main.blade.php sebagai layout utama yang menyertakan komponen sidebar.blade.php dan topbar.blade.php. Konsep @yield dan @section digunakan agar setiap halaman cukup mengisi bagian judul dan konten saja tanpa mengulang keseluruhan struktur HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sisfo - @yield('judul')</title>
    <link href="{{ asset('sbadmin/css/sb-admin-2.min.css') }}" rel="stylesheet">
</head>
<body id="page-top">
    <div id="wrapper">
        @include('layouts.sidebar')
        <div id="content-wrapper">
            @include('layouts.topbar')
            <div class="container-fluid">
                <h1 class="h3 mb-4">@yield('judul')</h1>
                @yield('konten')
            </div>
        </div>
    </div>
    <script src="{{ asset('sbadmin/js/sb-admin-2.min.js') }}"></script>
</body>
</html>

Untuk menggunakan layout tersebut pada sebuah halaman, cukup tambahkan direktif @extends dan @section di bagian atas file Blade. Sebagai contoh, halaman dashboard hanya perlu menuliskan kode berikut tanpa harus mengulang seluruh struktur HTML:

@extends('layouts.main')

@section('judul') Dashboard @endsection

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

Klik untuk upload screenshot

Tampilan halaman login dengan template SB Admin 2

Gambar 2.8: Halaman login setelah menggunakan template SB Admin 2

Klik untuk upload screenshot

Tampilan dashboard dengan sidebar dan topbar

Gambar 2.9: Tampilan dashboard menggunakan layout main.blade.php

G. Manajemen Users: Resource Controller dan Routing

Untuk fitur manajemen pengguna, digunakan Resource Controller yang secara otomatis menyediakan tujuh method standar CRUD (index, create, store, show, edit, update, destroy). Controller dibuat menggunakan perintah artisan dengan flag --resource, kemudian route resource didaftarkan pada file routes/web.php. Dengan satu baris Route::resource(), Laravel otomatis mendaftarkan semua jalur URL yang diperlukan untuk operasi CRUD.

php artisan make:controller UserController --resource

use App\Http\Controllers\UserController;

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

Klik untuk upload screenshot

Hasil php artisan route:list untuk route users

Gambar 2.10: Pemetaan route resource users menggunakan php artisan route:list

H. Create User (Tambah Data)

Fitur tambah user diimplementasikan pada method create() dan store() di UserController. Method create() bertugas menampilkan form isian, sedangkan store() menangani proses penyimpanan data yang dikirim dari form tersebut. Form menggunakan elemen select dengan library Select2 agar pemilihan level (ADMIN, GURU, STAFF) dapat dilakukan secara multi-pilihan. Password disimpan dalam kondisi ter-hash, dan level disimpan dalam format JSON untuk mendukung satu user dengan banyak level.

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

Klik untuk upload screenshot

Tampilan form Create User di browser

Gambar 2.11: Tampilan form Create User dengan field Nama, Email, Username, Password, dan Level

I. Read / List Users (Tampilkan Data)

Fitur menampilkan daftar seluruh pengguna diimplementasikan pada method index(). Data diambil dari model User menggunakan ::all(), kemudian dikirimkan ke view users/index.blade.php sebagai variabel. Pada tampilan, data ditampilkan dalam bentuk tabel menggunakan library DataTables agar mendukung fitur pencarian, pengurutan, dan pagination secara otomatis. Sebuah tombol "Tambah User" juga ditampilkan untuk mengarahkan ke halaman form create.

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

@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>[tombol action]</td>
        </tr>
        @endforeach
    </tbody>
</table>
@endsection

Klik untuk upload screenshot

Tampilan halaman list Users di browser

Gambar 2.12: Tampilan daftar users menggunakan DataTables

J. Update User (Edit Data)

Fitur edit data pengguna diimplementasikan melalui method edit() dan update(). Tombol Edit pada setiap baris tabel list user diarahkan ke URL users/{id}/edit. Method edit() mengambil data user berdasarkan ID menggunakan findOrFail() lalu mengirimkannya ke view form edit. Form edit menampilkan data yang sudah ada sehingga pengguna cukup mengubah bagian yang diperlukan. Karena HTML tidak mendukung method PUT secara langsung, digunakan input hidden dengan name="_method" bernilai PUT. Method update() kemudian menyimpan perubahan ke database.

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

Klik untuk upload screenshot

Tampilan form Edit User

Gambar 2.13: Tampilan form Edit User dengan data yang sudah terisi

Klik untuk upload screenshot

Halaman users setelah data berhasil diubah

Gambar 2.14: Alert sukses muncul setelah data user berhasil diubah

K. Delete User (Hapus Data)

Fitur hapus data diimplementasikan melalui method destroy(). Tombol Hapus pada tabel list user menggunakan sebuah form HTML dengan method POST dan input hidden bernilai DELETE agar Laravel mengenalinya sebagai request DELETE. Sebelum data dihapus, ditampilkan dialog konfirmasi menggunakan atribut onsubmit pada form. Jika pengguna mengonfirmasi, method destroy() akan mengambil data berdasarkan ID, menghapusnya, lalu mengarahkan kembali ke halaman daftar users disertai pesan sukses.

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

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

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

Klik untuk upload screenshot

Dialog konfirmasi hapus data muncul

Gambar 2.15: Pop-up konfirmasi sebelum data user dihapus

Klik untuk upload screenshot

Halaman users setelah data berhasil dihapus

Gambar 2.16: Alert sukses muncul setelah data user berhasil dihapus

L. Menambahkan Menu Users pada Sidebar

Agar menu Users dapat diakses dari sidebar navigasi, ditambahkan sebuah item menu baru pada file layouts/sidebar.blade.php. Item menu ini berisi ikon dan teks "Users" yang mengarah ke route users.index. Dengan penambahan ini, pengguna dapat langsung berpindah ke halaman manajemen users melalui sidebar tanpa harus mengetik URL secara manual.

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

Klik untuk upload screenshot

Tampilan sidebar dengan menu Users sudah muncul

Gambar 2.17: Menu Users berhasil muncul pada sidebar navigasi