1. Tujuan Praktikum

Tujuan dari praktikum ini adalah agar mahasiswa mampu membuat project Laravel baru untuk studi kasus aplikasi Sisfo dan melakukan konfigurasi koneksi database melalui file .env. Mahasiswa juga diharapkan mampu menerapkan fitur autentikasi bawaan Laravel menggunakan package laravel/ui dengan tampilan Bootstrap, melakukan kustomisasi struktur tabel users melalui migration tambahan, serta menggunakan fitur seeding untuk membuat data pengguna admin secara otomatis.

Selain itu, mahasiswa diharapkan mampu mengintegrasikan template admin pihak ketiga (SB Admin 2) ke dalam aplikasi Laravel menggunakan konsep Blade Layout (@extends, @yield, @section, dan @include), serta mampu membangun fitur manajemen data pengguna secara lengkap (Create, Read, Update, Delete) menggunakan Resource Controller dan Resource Route.

2. Hasil & Pembahasan

Pada praktikum ini dilakukan beberapa tahapan utama, dimulai dari pembuatan project Laravel baru, konfigurasi database, instalasi scaffolding autentikasi menggunakan laravel/ui, kustomisasi tabel users beserta seeding data admin, integrasi template SB Admin 2 sebagai tampilan utama aplikasi, hingga pembuatan modul manajemen users secara CRUD lengkap beserta penambahan menu navigasinya.

2.1 Pembuatan Project Laravel "Laravel-sisfo"

Langkah pertama adalah membuat project Laravel baru dengan nama laravel-sisfo. Terdapat dua cara yang dapat digunakan, yaitu melalui Laravel Installer global atau menggunakan Composer. Pada cara pertama, package installer dipasang secara global dengan perintah composer global require "laravel/installer", kemudian project dibuat dengan perintah laravel new laravel-sisfo di dalam folder htdocs. Cara kedua dapat dilakukan langsung tanpa installer global menggunakan perintah composer create-project laravel/laravel=^9.0 laravel-sisfo --prefer-dist.

Setelah proses instalasi selesai, project dijalankan menggunakan perintah php artisan serve sehingga aplikasi dapat diakses melalui browser pada alamat http://127.0.0.1:8000 dan menampilkan halaman selamat datang (welcome page) bawaan Laravel sebagai indikasi bahwa instalasi berhasil dilakukan.

// Tampilan halaman utama Laravel setelah project laravel-sisfo berhasil dibuat

2.2 Konfigurasi Database

Konfigurasi koneksi database dilakukan pada file .env yang terletak di root project. Database yang digunakan adalah MySQL melalui XAMPP dengan nama database laravel_sisfo. Beberapa variabel yang diatur antara lain DB_CONNECTION=mysql, DB_HOST=127.0.0.1, DB_PORT=3306, DB_DATABASE=laravel_sisfo, DB_USERNAME=root, dan DB_PASSWORD dikosongkan sesuai konfigurasi default MySQL pada XAMPP.

// Konfigurasi koneksi database laravel_sisfo pada file .env

2.3 Instalasi Laravel UI & Scaffolding Autentikasi Bootstrap

Fitur autentikasi pada studi kasus ini menggunakan fitur autentikasi bawaan Laravel melalui package laravel/ui. Package ini dipasang dengan menjalankan perintah composer require laravel/ui pada terminal. Setelah package terpasang, scaffolding autentikasi berbasis Bootstrap dibuat dengan menjalankan perintah php artisan ui bootstrap --auth.

Perintah tersebut secara otomatis men-generate seluruh komponen autentikasi pada folder app/Http/Controllers/Auth beserta view pada folder resources/views/auth dan layout app.blade.php. Beberapa controller yang dihasilkan antara lain:

• LoginController.php — menangani proses autentikasi login pengguna.
• RegisterController.php — menangani proses pendaftaran akun baru.
• ForgotPasswordController.php dan ResetPasswordController.php — menangani permintaan dan proses reset password.
• VerificationController.php — menangani verifikasi email pengguna.

Tahap selanjutnya adalah menjalankan perintah npm install && npm run dev untuk menginstall dan melakukan compile terhadap seluruh asset front-end yang dibutuhkan oleh tampilan autentikasi.

// Hasil composer require laravel/ui dan php artisan ui bootstrap --auth

2.4 Migration Awal & Pengujian Halaman Login/Register

Setelah scaffolding autentikasi terpasang, tabel-tabel yang dibutuhkan untuk proses autentikasi dibuat dengan menjalankan perintah php artisan migrate. Apabila database laravel_sisfo belum tersedia, Laravel akan menampilkan konfirmasi untuk membuatkan database tersebut secara otomatis. Migration ini membentuk tabel users, password_resets, failed_jobs, dan personal_access_tokens.

Setelah migration berhasil, halaman login dapat diakses melalui URL http://127.0.0.1:8000/login dan halaman register melalui http://127.0.0.1:8000/register, keduanya menggunakan tampilan Bootstrap bawaan hasil scaffolding. Setelah melakukan registrasi dan login, pengguna diarahkan ke halaman dashboard yang menampilkan pesan "You are logged in!" sebagai tanda bahwa proses autentikasi berjalan dengan baik.

// Halaman login, register, dan dashboard bawaan hasil scaffolding laravel/ui

2.5 Custom Migration Tabel Users

Secara default, tabel users hasil autentikasi Laravel hanya memiliki kolom id, name, email, email_verified_at, password, remember_token, created_at, dan updated_at. Untuk kebutuhan aplikasi Sisfo, struktur tabel ini perlu ditambah. Penambahan kolom pada tabel yang sudah ada dilakukan melalui migration tambahan menggunakan perintah php artisan make:migration costum_table_users.

Pada method up() file migration tersebut, digunakan Schema::table('users', ...) untuk menambahkan tiga kolom baru:

• username — string, unik, digunakan sebagai identitas login alternatif selain email.
• level — string yang menyimpan data peran pengguna (dalam format JSON), misalnya ADMIN, GURU, atau STAFF.
• status — enum dengan pilihan ACTIVE dan INACTIVE untuk menandai status aktif tidaknya akun.

Method down() diisi dengan perintah dropColumn untuk masing-masing kolom tersebut sebagai mekanisme rollback. Setelah file migration disimpan, perintah php artisan migrate dijalankan kembali sehingga struktur tabel users bertambah menjadi 11 kolom.

// Struktur tabel users setelah ditambahkan kolom username, level, dan status

2.6 Seeding Data User Admin

Setelah struktur tabel users disesuaikan, langkah selanjutnya adalah membuat data pengguna awal berupa akun admin menggunakan fitur seeding. Seeder dibuat dengan perintah php artisan make:seeder AdminSeeder yang menghasilkan file AdminSeeder.php pada folder database/seeders. Pada method run(), dibuat instance baru dari model \App\Models\User dengan mengisi atribut username bernilai "admin", name bernilai "Admin Aplikasi", email bernilai "admin@sisfo.com", level diisi dengan json_encode(["ADMIN"]), dan password di-hash menggunakan Hash::make("12345678").

Seeder dijalankan menggunakan perintah php artisan db:seed --class=AdminSeeder. Setelah proses seeding berhasil, akun admin dapat digunakan untuk login ke aplikasi menggunakan email admin@sisfo.com dan password 12345678, sehingga pada halaman dashboard akan tampil nama "Admin Aplikasi" pada bagian kanan atas.

// Hasil seeding AdminSeeder dan login berhasil menggunakan akun admin

2.7 Integrasi Template SB Admin 2 pada Halaman Login

Tahap selanjutnya adalah mengganti tampilan aplikasi menggunakan template admin SB Admin 2 berbasis Bootstrap. Template diunduh dari startbootstrap.com/theme/sb-admin-2, kemudian seluruh asset hasil ekstraksi disalin ke dalam folder baru public/sbadmin agar dapat diakses melalui helper asset().

File resources/views/layouts/app.blade.php yang sebelumnya digunakan untuk halaman login bawaan, diubah strukturnya mengikuti tampilan SB Admin 2. Pada bagian head ditambahkan referensi ke sbadmin/vendor/fontawesomefree/css/all.min.css, font Nunito dari Google Fonts, dan stylesheet utama sbadmin/css/sb-admin-2.min.css. Pada bagian body digunakan class bg-gradient-primary dengan kartu (card) berisi form login yang tetap mempertahankan struktur @csrf, route('login'), serta validasi @error dari Laravel.

// Halaman login setelah diintegrasikan dengan template SB Admin 2

2.8 Layout Global, Sidebar, dan Topbar

Karena app.blade.php sudah dikhususkan untuk halaman login, dibuat file layout baru bernama main.blade.php pada folder resources/views/layouts yang menjadi layout utama seluruh halaman aplikasi setelah pengguna login. Layout ini memuat struktur #wrapper dan #content-wrapper dari SB Admin 2, serta menggunakan @include('layouts.sidebar') dan @include('layouts.topbar') untuk memecah komponen sidebar dan topbar menjadi file tersendiri. Judul halaman ditampilkan melalui @yield('judul') dan konten utama melalui @yield('konten').

File sidebar.blade.php berisi menu navigasi dengan brand aplikasi "SISFO" beserta menu Dashboard, sedangkan topbar.blade.php menampilkan nama pengguna yang sedang login melalui Auth::user()->name beserta dropdown menu Profile, Settings, dan Logout. Tombol Logout terhubung dengan modal konfirmasi berisi form POST menuju route logout. Sebagai contoh penerapan, file home.blade.php diubah menjadi @extends('layouts.main') dengan @section('judul') bernilai "Dashboard" dan @section('konten') menampilkan teks dashboard.

// Tampilan dashboard menggunakan layout main.blade.php beserta sidebar dan topbar SB Admin 2

2.9 Resource Controller & Routing Manajemen Users

Fitur manajemen pengguna dibangun menggunakan konsep CRUD secara penuh, sehingga controller dibuat dalam bentuk Resource Controller melalui perintah php artisan make:controller UserController --resource. Perintah ini menghasilkan satu file controller berisi tujuh method standar yang siap diisi logikanya. Selanjutnya, pada file routes/web.php ditambahkan baris use App\Http\Controllers\UserController; dan didaftarkan satu baris route resource yaitu Route::resource('users', UserController::class).

Satu baris route resource tersebut secara otomatis memetakan tujuh route berbeda, yang dapat diverifikasi melalui perintah php artisan route:list. Berikut adalah ketujuh method pada Resource Controller beserta HTTP verb dan fungsinya:

2.10 CRUD Users — Create (Tambah Data User)

Pada method create(), controller mengembalikan view('user.create') yang berisi form input data user. Form ini dibangun dengan @extends('layouts.main') dan terdiri dari input nama, email, username, password, serta dropdown level[] yang bersifat multiple menggunakan library Select2 dengan pilihan ADMIN, GURU, dan STAFF. Library Select2 ditambahkan melalui CDN beserta script inisialisasi pada layout main.blade.php agar dapat digunakan pada seluruh halaman.

Form dikirim menggunakan method POST menuju route users.store. Pada method store(Request $request), dibuat instance baru model User, kemudian setiap field diisi dari $request->get(): name, username, dan email diisi langsung, password diisi menggunakan Hash::make(), sedangkan level yang berupa array diubah menjadi string JSON melalui json_encode() sebelum disimpan dengan $user->save(). Setelah berhasil, pengguna diarahkan kembali ke users.index dengan membawa pesan session status.

// Form Create User dengan input nama, email, username, password, dan level (Select2)

2.11 CRUD Users — Read (Menampilkan Daftar User)

Pada method index(), seluruh data user diambil menggunakan User::all() dan dikirimkan ke view users.index. View ini menampilkan data dalam bentuk tabel dengan kolom Name, Username, Email, dan Action menggunakan perulangan @foreach($users as $user). Apabila terdapat session status (misalnya setelah menambah, mengubah, atau menghapus data), akan ditampilkan notifikasi alert alert-success pada bagian atas tabel.

Tabel data dilengkapi dengan plugin DataTables agar mendukung fitur pencarian dan pagination, dengan menambahkan file dataTables.bootstrap4.min.css pada bagian head serta jquery.dataTables.min.js, dataTables.bootstrap4.min.js, dan datatables-demo.js pada bagian akhir layout main.blade.php. Pada bagian atas tabel ditambahkan tombol "Tambah User" yang mengarah ke route users.create untuk membuka form penambahan data baru.

// Daftar data users menggunakan DataTables beserta tombol Tambah User

2.12 CRUD Users — Update (Edit Data User)

Proses update dimulai dengan menambahkan tombol Edit pada kolom Action di users.index yang mengarah ke route('users.edit', $user->id). Pada method edit($id), data user diambil menggunakan User::findOrFail($id) dan dikirim ke view user.edit. View ini menampilkan form yang sudah terisi (pre-filled) dengan data user terpilih, termasuk dropdown level[] yang menampilkan opsi terpilih menggunakan kombinasi in_array() dan json_decode($user->level).

Form edit menggunakan method POST dengan input tersembunyi _method bernilai PUT menuju route users.update. Pada method update(Request $request, $id), data user dicari kembali dengan findOrFail($id), kemudian field name dan level (di-encode ulang ke JSON) diperbarui dan disimpan dengan save(). Setelah berhasil, pengguna diarahkan kembali ke users.index dengan pesan session "User berhasil diubah".

// Form Edit User beserta notifikasi setelah data berhasil diubah

2.13 CRUD Users — Delete (Hapus Data User)

Tombol Hapus ditambahkan pada kolom Action di users.index dalam bentuk form dengan atribut onsubmit="return confirm('Hapus data user ?')" agar memunculkan dialog konfirmasi sebelum data benar-benar dihapus. Form ini menggunakan method POST dengan input tersembunyi _method bernilai DELETE menuju route users.destroy, disertai token @csrf.

Pada method destroy($id), data user dicari menggunakan findOrFail($id) kemudian dihapus dari database melalui $user->delete(). Setelah proses berhasil, pengguna diarahkan kembali ke users.index dengan pesan session "User berhasil dihapus", sehingga data yang dihapus tidak lagi muncul pada tabel daftar user.

// Dialog konfirmasi hapus dan notifikasi setelah data user berhasil dihapus

2.14 Menambahkan Menu Users pada Sidebar

Sebagai langkah terakhir, menu navigasi untuk fitur manajemen users ditambahkan pada file layouts/sidebar.blade.php. Sebuah item navigasi baru ditambahkan dengan href="{{ route('users.index') }}", ikon fas fa-users, dan label "Users". Dengan demikian, menu Users tampil di bawah menu Dashboard pada sidebar SB Admin 2 dan dapat digunakan untuk mengakses halaman daftar pengguna secara langsung dari navigasi utama aplikasi.

// Sidebar SISFO menampilkan menu Dashboard dan Users setelah konfigurasi selesai

3. Kesimpulan

Berdasarkan praktikum yang telah dilakukan, package laravel/ui beserta perintah php artisan ui bootstrap --auth sangat mempermudah pembuatan sistem autentikasi lengkap, karena seluruh controller, view, dan route terkait login, register, dan reset password dibuat secara otomatis. Fitur migration tidak hanya digunakan untuk membuat tabel baru, tetapi juga dapat digunakan untuk memodifikasi struktur tabel yang sudah ada melalui Schema::table(), sebagaimana diterapkan pada penambahan kolom username, level, dan status pada tabel users.

Fitur seeding terbukti efektif untuk menyediakan data awal berupa akun admin yang konsisten dan dapat direproduksi pada setiap instalasi ulang aplikasi. Penerapan Blade Layout melalui @extends, @yield, @section, dan @include memungkinkan template eksternal seperti SB Admin 2 diintegrasikan secara rapi, dengan pemisahan antara layout untuk halaman autentikasi (app.blade.php) dan layout utama aplikasi (main.blade.php) yang memuat sidebar dan topbar.

Penggunaan Resource Controller bersama Route::resource() sangat mempercepat pengembangan fitur CRUD karena tujuh route standar (index, create, store, show, edit, update, destroy) dapat didefinisikan hanya dalam satu baris kode. Secara keseluruhan, kombinasi autentikasi, kustomisasi tabel users dengan kolom level, tampilan SB Admin 2, dan modul manajemen users hasil praktikum ini menjadi fondasi arsitektur aplikasi Sisfo yang siap dikembangkan lebih lanjut dengan modul-modul lain seperti data siswa, guru, dan kelas.