A. Pendahuluan

Sekarang, bikin aplikasi web harus cepat dan main, salah cara natapnya pakai framework PHP kayak Laravel. Kalau buat kasus Sistem Informasi Sekolah, kalauda mulai dari instalasi project Laravel dulu, lalu konfigurasi database biar sistemnya bisa nyambung dengan oke. Keamanan dan siapa yang bisa akses juga penting banget, jadi perlu fitur user authentication yang Laravel udah siapin otomatis lewat package laravel/ui.

Biar pengguna nyaman, antarmuka aplikasi perlu diatur pakai sistem templating atau layouting. Di praktikum ini, pakai template SB Admin 2 yang berbasis Bootstrap buat bikin halaman login, dashboard, sampai menu navigasi kayak sidebar dan topbar yang global.

Bukan cuma tampilan, fungsionalitas utamanya juga dibangun lewat modul manajemen user yang lengkap, termasuk operasi CRUD (buat, baca, update, hapus) data pengguna. Pakai arsitektur Controller Resource biar pengelolaannya lebih rapi dan terstruktur.

B. Tujuan

Tujuan dari praktikum ini adalah:

1. Bisa bikin project Laravel baru dari koneksi MySQL ke database biar jalan dengan pas.
2. Bisa instal dan pakai fitur user authentication yang udah ada di Laravel lewat package laravel/ui plus framework Bootstrap.
3. Paham cara ubah struktur tabel di database pakai migration, plus bikin data admin awal pakai database seeder.
4. Bisa pasang sistem templating atau layouting global yang modular di aplikasi pakai template SB Admin 2.
5. Jago bikin fitur Manajemen Users yang punya semua fungsi CRUD (Create, Read, Update, Delete) dengan pakai Controller Resource.

C. Langkah-langkah

1. Bikin Project Laravel Baru

Nama projectnya: Laravel-sisfo
Di workspace, buka terminal/cmd dan masukkan perintah ini:

Kalau udah jadi, jalankan project dengan:

2. Setup Database

Buka file .env, lalu isi bagian konfigurasi database seperti ini sesuaikan dengan MySQL masing-masing

3. Pasang Fitur User Authentication

Di praktik ini, pakai fitur authentication bawaan Laravel.

a) Install Package laravel/ui

Di terminal/cmd, ketik:

Kalau sukses, bakal muncul pesan seperti di gambar.

b) Aktifkan Fitur Auth dengan Bootstrap

Ketik perintah:

Kalau berhasil, akan muncul konfirmasi seperti gambar.

c) Install & Compile Asset

Jalankan:

Perintah ini bakal install dan compile semua asset yang dibutuhkan buat authentication. Halaman kayak login, register, dan forgot password bakal muncul otomatis, beserta controller authnya juga.

Terus view untuk auth juga bakal di-generate, kayak di gambar.

d) Jalankan Migration

Ketik:

Laravel bakal bikin tabel migration buat authentication. Kalau belum ada database, Laravel bakal tanya dulu mau bikin atau nggak. Kalau migration sukses, muncul seperti di gambar.

Sekarang aplikasi sisfo udah punya fitur authentication bawaan dari Laravel.

e) Halaman Login

Buka browser, akses:
http://127.0.0.1:8000/login
Bakal muncul halaman login seperti gambar.

f) Halaman Register

Akses:
http://127.0.0.1:8000/register
Halaman register bakal muncul seperti gambar.

g) Coba Register & Login

Lakukan registrasi dulu, lalu login. Kalau berhasil, muncul seperti di gambar.

Kesimpulan Singkat
Fitur authentication Laravel bakal otomatis generate:
- Controller
- Model
- View
- Route
Semua view udah pakai Bootstrap, jadi lebih gampang bikin fitur auth tanpa perlu bikin dari nol.

h) Modifikasi Tabel users

Authentication Laravel otomatis bikin tabel users yang isi info data user. Struktur tabelnya seperti ini:

Dari struktur itu, perlu tambah field baru yaitu, username, level, status.

Buat migration buat tambah field:

Buka folder database/migrations/, lalu buka file yang namanya berakhir dengan costum_table_users.php.

Isi dengan kode seperti ini:

Jalankan code php artisan migrate
Kalau sukses, struktur tabel users udah berubah sesuai kebutuhan.

i) Seeding User (Buat Akun Admin)

Setelah tabel users udah dimodifikasi, bikin user admin lewat seeder. Buat seeder bernama AdminSeeder:

File AdminSeeder.php bakal otomatis muncul di database/seeders. Buka file itu, lalu isi seperti ini

Jalankan seeder php artisan db:seed --class=AdminSeeder
Kalau sukses, muncul seperti gambar.

Sekarang kamu bisa login ke aplikasi pakai akun admin yang baru dibuat.

4. Templating / Layouting

Authentication Laravel udah otomatis generate tampilan dashboard aplikasi. Langkah selanjutnya, kita konfiguser tampilannya sesuai template yang kita pilih. Di studi kasus ini, kita pakai template SB Admin 2 yang berbasis Bootstrap.

Cara pasangnya:

• Download template di link ini: https://startbootstrap.com/theme/sb-admin-2
• Extract file yang udah didownload
• Bikin folder baru di public project Laravel, namanya sbadmin
• Copy semua asset template SB Admin 2 ke folder sbadmin tersebut

a) Halaman Login Aplikasi

Buka file app.blade.php di folder views/layouts, lalu ganti dengan kode di bawah ini

Kode ini adalah struktur halaman login buat aplikasi web Laravel yang pakai template SB Admin 2. Fungsinya buat menampilkan kotak formulir di tengah layar yang minta pengguna masukkan email dan password guna masuk ke sistem. Tampilannya udah diatur dengan latar gradasi dan layout responsif. Selain itu, kode ini udah terintegrasi dengan sistem keamanan dan validasi bawaan Laravel, jadi bakal otomatis muncul pesan error kalau email atau password yang dimasukkan salah/kosong.

Tampilan loginnya bakal berubah kayak di gambar bawah ini.

b) Halaman Global (Layout Utama)

Buat layout global yang bakal jadi layout utama aplikasi. View-view lain bakal ambil resource dari sini. Karena app.blade.php udah dipakai buat halaman login, kita perlu bikin layout baru. Bikin file bernama main.blade.php di folder views/layouts, lalu isi dengan kode berikut

Kode ini adalah template utama buat halaman dashboard aplikasi web Laravel dengan antarmuka SB Admin 2. Template ini jadi kerangka halaman utuh yang otomatis mengatur, Sidebar, Topbar, Footer, Popup konfirmasi logout Dan juga memuat semua CSS + JavaScript yang diperlukan.

Dengan perintah @yield, template ini menyediakan ruang kosong biar halaman lain gampang menyisipkan judul dan konten utama tanpa perlu bikin ulang struktur HTML dari nol setiap kali.

c) Sidebar

Bikin file sidebar.blade.php di folder layouts, isi dengan kode berikut

Kode ini bikin menu sidebar interaktif. Struktur visualnya dari atas ke bawah:
- Logo/Merek > nama aplikasi + ikon wajah tersenyum
- Garis pembatas
- Link ke halaman utama + ikon speedometer
- Tombol di bawah > buat melipat/melebarkan sidebar biar tampilan bisa lebih luas atau lebih padat

d) Topbar

Bikin file topbar.blade.php di folder layouts, isi dengan kode berikut:
Kode ini bikin menu topbar yang punya 2 fitur utama

1. Tombol 3 garis di kiri > buat muncul/sembunyikan sidebar di perangkat layar kecil (smartphone)
2. Info akun di kanan atas > pakai sistem Laravel buat otomatis detect dan tampilin nama + foto profil pengguna yang sedang login

Kalau bagian profil diklik, bakal muncul dropdown menu yang isi:
- Profile
- Settings
- Logout (dengan popup konfirmasi)

e) Cara Pakai Layout main.blade.php

Contoh, kita pakai view home.blade.php. Buka file itu, isi dengan kode berikut:

Untuk pakai layout main, gunakan:
@extends('layouts.main')

Biar seluruh tampilan main.blade.php muncul di view home.

Buat judul di layout main:
@section('judul', 'Dashboard')

Buat konten:
@section('content')
<!-- isi konten di sini -->
@endsection

Kalau konfigurasi layout berhasil, tampilannya kayak di gambar berikut.

5. Manajemen Users

Sekarang kita bikin fitur Manajemen Users dengan fungsi CRUD lengkap (Create, Read, Update, Delete). Kita akan pakai Controller Resource. Di terminal/CMD, ketik:

Kalau dilihat dari php artisan route:list, route jadi kayak di gambar bawah ini.

File UserController Resource
Ini kerangka dasar buat operasi CRUD

File UserController yang dibuat dengan opsi --resource merupakan kerangka dasar buat mengelol operasi CRUD (Create, Read, Update, Delete). Setiap fungsi yang awalnya masih kosong udah diplot buat tugas spesifik, jadi programmer nggak perlu bikin pondasi utamanya dari nol. Fungsi index bertugas tampilin daftar seluruh data pengguna, sedangkan create buat memunculkan formulir tambah data baru. Setelah form diisi, fungsi store akan menyimpan data baru ke database. Kalau mau lihat detail satu pengguna secara spesifik, pakai fungsi show. Untuk mengubah data, fungsi edit bakal memunculkan formulir ubah data, lalu update buat memproses dan menyimpan perubahan tersebut. Terakhir, fungsi destroy bertugas menghapus data pengguna. Programmer cuma perlu mengisi instruksi detail di dalam kurung kurawal masing-masing fungsi tanpa harus merakit struktur dasarnya

a) Create Users

Route buat tampilin form tambah user: /users/create. Buka UserController, edit action create:

Maksud dari codingan diatas yaitu untuk menampilkan view create di folder user.

Bikin folder user di views, lalu tambah file create.blade.php, isi kode berikut:

Tambahkan CSS + JS Select2 ke main.blade.php:

Nanti, select box bakal otomatis jadi Select2 yang rapi dan bisa dicari.

Selanjutnya Edit user/create.blade.php buat form input

Tampilan form input user jadi kayak gambar bawah ini.

Selanjutnya buka action store di UserController, isi kode

Form create user pakai method POST yang dikirim ke action store lewat route users.store. Di action store, isi form ditangkap pakai $request->get('nama_input'), lalu disimpan ke tabel users dengan instantiate model User ($user = new \App\Models\User), assign nilai sesuai nama field, dan simpan ke database pakai $user->save(). Kalau data berhasil disimpan, redirect ke route users.index dengan bawa session status. Kalau sukses, redirect ke users.index dengan bawa session status.

b) READ / LIST USERS

Setelah fungsi create beres, langkah selanjutnya adalah tampilin data user. Buat menampilkan data user, kita pakai method GET lewat URL http://localhost/users, yang route ini menuju ke action index di UserController. Buka action index itu, lalu edit kode programnya sesuai yang ada di bawah ini.

Selanjutnya bikin file bernama index.blade.php di folder views/user danisinya dengan kode program berikut.

Di awal konten, sistem bakal cek dan tampilin notifikasi hijau kalau ada aksi sebelumnya yang sukses. Ensuite, kode ini bikin tabel yang punya perulangan otomatis buat ambil semua data user dari database, lalu tampilin satu-satu per baris ke kolom yang tersedia.

Nama, Username, dan Email, plus ada satu kolom lagi yang bakal dipakai buat taro tombol kayak edit atau hapus. Karena pakai datatables, tambah file CSS datatables di bagian <head> main.blade.php, dan file JS datatables di bagian bawah main.blade.php (sebelum tutup </body>).

setelah selesai semua tampilan list user jadi kayak di gambar bawah ini.

c) UPDATE USERS

Buat proses update data user, pertama-tama bikin tombol action yang mengarah ke route users/{user}/edit (bukan users/edit/{user}/edit—itu kurang tepat) menuju action edit di UserController buat tampilin form, dan route itu pakai method PUT. Bikin tombol edit di tampilan list user, buka file user/index.blade.php, lalu di kolom [action] ganti dengan kode berikut ini.

Kalau tombol edit diklik, bakal muncul URL kayak http://localhost/users/{user}/edit, di mana {user} adalah ID user yang diklik.

Terus, buka action edit di UserController dan isi dengan kode program berikut.

Kode ini ambil data user berdasarkan ID yang didapat, simpan di variabel $user, lalu kirim ke view user.edit. Bikin view di folder user/edit.blade.php dan isi dengan kode program berikut.

Kode ini tampilin formulir buat update data pengguna. Form ini pakai layout utama aplikasi dan udah otomatis isi info user saat ini seperti Nama, Email, Username, plus daftar pilihan Level (hak akses) yang bisa pilih ganda dan udah termark sesuai data sebelumnya. Form ini juga punya token keamanan Laravel + method PUT biar sistem tau ini buat ganti data lama. Kalau tombol Simpan diklik, semua perubahan langsung dikirim buat diperbarui ke database. Tombol Batal juga ada buat stop proses dan balik ke halaman daftar user.

Tampilan form edit user jadi kayak gambar berikut ini.

Terus, buka action update di UserController dan isi dengan kode program berikut ini.

Sekarang kita coba ubah data user seperti di gambar bawah ini.

Setelah nama user diganti, klik Simpan. Kalau berhasil, bakal redirect ke halaman users + muncul alert success seperti gambar berikut.

d) Delete User

Tambahkan tombol atau link buat hapus user di list user. Buka file user/index.blade.php, lalu tambahkan kode program berikut di bawah link edit.

Terus, buka action destroy di UserController dan isi dengan kode program berikut ini.

Kalau tombol hapus diklik, bakal muncul popup dialog peringatan yang tanya apakah data mau dihapus, kayak di gambar bawah ini.

Kalau kita klik OK, data bakal dihapus. Kalau data berhasil dihapus, bakal muncul pesan seperti gambar berikut.

e) Menambahkan menu user

Buka file Layouts/sidebar.blade.php, lalu tambahkan kode program yang disediakan.

Setelah itu, menu Users akan muncul di aplikasi seperti yang ditunjukkan pada gambar berikut.

D. Kesimpulan

Dari praktikum yang sudah dilakukan, terlihat bahwa framework Laravel sangat membantu dan mempercepat proses pembuatan aplikasi Sistem Informasi Sekolah. Laravel memiliki fitur authentication bawaan yang bisa secara otomatis membuat controller, model, view, dan route, sehingga pengembang tidak harus membangun sistem login dan registrasi dari nol. Selain itu, Laravel juga memudahkan pengubahan struktur tabel bawaan lewat perintah migration dan bisa mengisi data pengguna awal secara otomatis dengan fitur seeder.

Di sisi backend, integrasi tampilan juga berjalan efisien grâcepada sistem templating menggunakan engine Blade. Template SB Admin 2 yang dikombinasikan dengan pembagian komponen layout (seperti sidebar, topbar, dan konten utama) membuat kode tampilan lebih rapi, terpusat, dan mudah dikelola. Dengan memanfaatkan Controller Resource, pembuatan modul Manajemen Users (CRUD) menjadi lebih ringkas dan terstruktur karena pemetaan route serta metode operasi data sudah diatur secara otomatis oleh Laravel.