Laprak — Sistem Informasi (SISFO) dengan Laravel & SB Admin 2

ITujuan Praktikum

Setelah menyelesaikan praktikum ini, mahasiswa diharapkan mampu:

Membangun aplikasi web sistem informasi (SISFO) berbasis Laravel dengan arsitektur MVC (Model-View-Controller) secara lengkap.
Mengonfigurasi environment database dan menjalankan Migration untuk membuat skema tabel secara otomatis.
Mengintegrasikan sistem autentikasi (login, logout) menggunakan paket Laravel UI dengan scaffolding Bootstrap.
Melakukan kustomisasi tabel users dengan menambahkan kolom username, level, dan status melalui migration tambahan.
Membuat Seeder untuk mengisi data akun admin awal ke dalam database secara otomatis.
Mengintegrasikan template dashboard SB Admin 2 sebagai tampilan antarmuka aplikasi SISFO.
Membangun fitur manajemen pengguna (CRUD Users) lengkap dengan validasi form, DataTables, dan Select2.

IIDasar Teori

Konfigurasi Environment (.env): File .env menyimpan seluruh konfigurasi sensitif aplikasi seperti kredensial database, agar terpisah dari kode utama dan tidak ikut di-commit ke repository.

Migration: Fitur version control untuk skema database di Laravel. Setiap perubahan struktur tabel didefinisikan dalam file PHP, sehingga skema dapat direproduksi secara konsisten di berbagai mesin pengembang.

Seeding: Proses pengisian data awal (default/dummy) ke dalam tabel database secara otomatis menggunakan kelas Seeder, sangat berguna untuk data admin, konfigurasi, atau data uji coba.

Laravel UI: Paket resmi Laravel untuk men-generate scaffold autentikasi (login, register, reset password) beserta aset frontend Bootstrap, sehingga mempercepat setup sistem login.

Model (Eloquent ORM): Representasi berorientasi objek dari sebuah tabel database. Melalui Eloquent, operasi seperti menyimpan, mengambil, memperbarui, dan menghapus data dilakukan tanpa menulis SQL mentah.

Resource Controller: Tipe controller Laravel yang secara otomatis menyediakan tujuh method standar CRUD (index, create, store, show, edit, update, destroy) yang terhubung dengan satu baris deklarasi Route::resource.

Blade Template Engine: Sistem template bawaan Laravel yang mendukung inheritance layout (@extends, @section, @yield, @include) untuk membangun antarmuka yang modular dan reusable.

SB Admin 2: Template dashboard Bootstrap gratis yang menyediakan komponen UI siap pakai seperti sidebar, topbar, DataTables, Select2, dan berbagai widget administrasi.

IIIAlat dan Bahan

Laptop / Komputer dengan sistem operasi Windows
Laragon (Local Development Environment: Apache, MySQL, PHP)
Visual Studio Code (Code Editor)
Web Browser (Google Chrome / Mozilla Firefox)
Composer (PHP Dependency Manager)
Node.js & NPM Package Manager
phpMyAdmin (Database Manager via Browser)
Template SB Admin 2 (dari startbootstrap.com)

IVLangkah Kerja: Setup Awal Project & Database

Bagian ini mencakup pembuatan project Laravel baru, konfigurasi database, serta instalasi sistem autentikasi dasar.

1Jalankan Laragon dan Buka Terminal

Pastikan Laragon sudah berjalan dengan Apache dan MySQL aktif (indikator hijau), kemudian buka terminal Laragon untuk memulai pengerjaan project.

Aksi: Buka Laragon → Start All → Buka Terminal

Gambar 1 – Laragon berjalan dengan Apache dan MySQL aktif berwarna hijau

2Buat Project Laravel Baru

Membuat project Laravel baru bernama laravel-sisfo menggunakan perintah Composer dari dalam folder www Laragon.

Aksi: Jalankan Perintah di Terminal Laragon

bash

cd C:\laragon\www
laravel new laravel-sisfo

Gambar 2 – Proses pembuatan project Laravel baru bernama laravel-sisfo berhasil

3Buat Database di phpMyAdmin

Membuat database baru bernama laravel_sisfo melalui antarmuka phpMyAdmin yang dapat diakses lewat browser.

Aksi: Buka Browser → http://localhost/phpmyadmin → New → Buat Database

Gambar 3 – Database laravel_sisfo berhasil dibuat di phpMyAdmin

4Konfigurasi File .env

Membuka file .env di VS Code dan mengatur kredensial koneksi database agar Laravel dapat terhubung ke database laravel_sisfo yang baru dibuat.

Aksi: Edit File C:\laragon\www\laravel-sisfo\.env

Gambar 4 – Konfigurasi kredensial database pada file .env berhasil diatur

5Masuk ke Folder Project dan Jalankan Migration Awal

Masuk ke direktori project, lalu jalankan migration pertama untuk membuat tabel-tabel default Laravel (users, password_reset_tokens, dll.) ke database.

Aksi: Jalankan Perintah di Terminal

bash

cd C:\laragon\www\laravel-sisfo
php artisan migrate

Gambar 5 – Migration awal berhasil membuat tabel-tabel default Laravel di database

6Install Paket Laravel UI

Menginstall paket laravel/ui yang menyediakan scaffold autentikasi siap pakai untuk Laravel, termasuk controller login, register, dan view-nya.

Aksi: Jalankan Perintah Composer

bash

composer require laravel/ui

Gambar 6 – Paket laravel/ui berhasil diinstall melalui Composer

7Generate Scaffold Autentikasi Bootstrap

Menjalankan perintah generator untuk membuat file autentikasi lengkap berbasis Bootstrap. Jika ada pertanyaan replace, jawab yes.

Aksi: Jalankan Artisan UI Bootstrap Auth

bash

php artisan ui bootstrap --auth

Gambar 7 – Scaffold autentikasi Bootstrap berhasil di-generate oleh Artisan

8Install dan Compile Asset Frontend

Menginstall dependensi Node.js, lalu mengompilasi aset CSS dan JavaScript menggunakan Vite. Tunggu hingga muncul tanda VITE ready, lalu tekan Ctrl+C untuk menghentikan proses dev server.

Aksi: Jalankan NPM Install dan NPM Run Dev

bash

npm install
npm run dev

Gambar 8 – Proses instalasi dependensi npm dan kompilasi aset Vite berhasil

9Jalankan Migration Ulang

Setelah install Laravel UI, jalankan kembali php artisan migrate untuk memastikan semua tabel yang dibutuhkan autentikasi sudah terbuat.

Aksi: Jalankan Artisan Migrate

bash

php artisan migrate

Gambar 9 – Migration ulang berhasil memastikan semua tabel autentikasi tersedia

VLangkah Kerja: Kustomisasi Tabel Users & Seeder Admin

Bagian ini mencakup penambahan kolom kustom pada tabel users, pembaruan Model User, serta pembuatan seeder untuk akun admin.

10Buat File Migration Custom Tabel Users

Membuat file migration baru untuk menambahkan kolom username, level, dan status ke tabel users yang sudah ada.

Aksi: Jalankan Artisan Make Migration

bash

php artisan make:migration custom_table_users

Gambar 10 – File migration kustom tabel users berhasil dibuat oleh Artisan

11Isi Method up() dan down() pada File Migration

Membuka file migration yang baru dibuat di folder database/migrations/, lalu mengisi method up() dan down() untuk mendefinisikan kolom tambahan.

Aksi: Edit File database/migrations/xxxx_custom_table_users.php

Gambar 11 – Method up() dan down() pada file migration custom users berhasil diisi

12Jalankan Migration untuk Kolom Tambahan

Mengeksekusi migration agar kolom username, level, dan status benar-benar ditambahkan ke tabel users di database MySQL.

Aksi: Jalankan Artisan Migrate

bash

php artisan migrate

Gambar 12 – Kolom username, level, dan status berhasil ditambahkan ke tabel users

13Update Model User

Membuka file app/Models/User.php dan mendaftarkan kolom baru (username, level, status) ke dalam property fillable Model.

Aksi: Edit File app/Models/User.php

Gambar 13 – Model User berhasil diperbarui dengan kolom username, level, dan status

14Buat File AdminSeeder

Membuat file seeder khusus bernama AdminSeeder untuk mengisi data akun admin pertama ke dalam database secara otomatis.

Aksi: Jalankan Artisan Make Seeder

bash

php artisan make:seeder AdminSeeder

Gambar 14 – File AdminSeeder.php berhasil dibuat di folder database/seeders

15Isi Data Admin pada File AdminSeeder

Membuka file database/seeders/AdminSeeder.php dan mendefinisikan data akun admin default sistem.

Aksi: Edit File database/seeders/AdminSeeder.php

Gambar 15 – Data akun admin berhasil didefinisikan dalam file AdminSeeder.php

16Jalankan AdminSeeder

Mengeksekusi seeder untuk memasukkan data akun admin ke dalam database. Hasil yang diharapkan adalah munculnya pesan sukses di terminal.

Aksi: Jalankan Artisan db:seed

bash

php artisan db:seed --class=AdminSeeder

Harus muncul pesan konfirmasi seed data sukses di terminal.

Gambar 16 – Pesan konfirmasi muncul, akun admin berhasil disimpan ke database

VILangkah Kerja: Instalasi Template SB Admin 2 & Layout

Bagian ini mencakup pemasangan template SB Admin 2 ke folder public dan pembuatan seluruh file layout Blade untuk tampilan aplikasi.

17Download dan Pasang Template SB Admin 2

Mengunduh template SB Admin 2 dari situs resmi, mengekstrak file ZIP, lalu menyalin seluruh isi folder hasil ekstrak ke dalam folder public/sbadmin/ di dalam project Laravel.

Aksi: Download dari startbootstrap.com → Ekstrak → Copy ke public/sbadmin/

Yang dicopy adalah isi folder hasil ekstrak (css, js, vendor, img), bukan folder luarnya. Pastikan struktur folder internalnya sudah sesuai.

Gambar 17 – Struktur folder public/sbadmin/ yang benar dengan folder css, js, vendor, dan img

18Edit Layout Login — app.blade.php

Mengganti isi file resources/views/layouts/app.blade.php dengan halaman login bergaya template dashboard SB Admin 2.

Aksi: Edit File resources/views/layouts/app.blade.php

Gambar 18 – File app.blade.php berhasil diubah menjadi tampilan halaman login SB Admin 2

19Buat Layout Utama — main.blade.php

Membuat file baru resources/views/layouts/main.blade.php sebagai layout master aplikasi yang menyertakan kerangka utama halaman admin dashboard.

Aksi: Buat File Baru resources/views/layouts/main.blade.php

Gambar 19 – File main.blade.php sebagai layout master aplikasi berhasil dibuat

20Buat Komponen Sidebar — sidebar.blade.php

Membuat file baru resources/views/layouts/sidebar.blade.php yang berisi menu navigasi utama seperti Dashboard dan Manajemen Users.

Aksi: Buat File Baru resources/views/layouts/sidebar.blade.php

Gambar 20 – Komponen sidebar dengan menu Dashboard dan Users berhasil dibuat

21Buat Komponen Topbar — topbar.blade.php

Membuat file baru resources/views/layouts/topbar.blade.php yang berisi navbar atas, profil nama user, dan opsi menu Logout.

Aksi: Buat File Baru resources/views/layouts/topbar.blade.php

Gambar 21 – Komponen topbar dengan nama user dan dropdown logout berhasil dibuat

22Edit Halaman Dashboard — home.blade.php

Mengganti file resources/views/home.blade.php agar extends ke layout master baru dan menampilkan kartu selamat datang user.

Aksi: Edit File resources/views/home.blade.php

Gambar 22 – Halaman dashboard berhasil diperbarui dengan layout main dan kartu sambutan

VIILangkah Kerja: Controller, Route, dan View CRUD Users

Bagian ini mencakup pembuatan UserController beserta logika CRUD lengkap, konfigurasi routing, serta pembuatan file view manajemen pengguna.

23Buat Resource Controller untuk Users

Membuat file controller bernama UserController dengan boilerplate method CRUD standar menggunakan flag resource.

Aksi: Jalankan Artisan Make Controller

bash

php artisan make:controller UserController --resource

Gambar 23 – File UserController.php dengan boilerplate method CRUD berhasil dibuat

24Isi Logika Lengkap UserController

Membuka file app/Http/Controllers/UserController.php dan menerapkan logika lengkap penanganan operasi Create, Read, Update, dan Delete data user.

Aksi: Edit File app/Http/Controllers/UserController.php

Gambar 24 – Logika CRUD lengkap dengan validasi berhasil diisi di UserController.php

25Konfigurasi Routing — routes/web.php

Mengubah file routes/web.php untuk mendaftarkan rute autentikasi bawaan serta rute resource manajemen user yang dilindungi middleware keamanan.

Aksi: Edit File routes/web.php

Gambar 25 – Routing autentikasi dan resource users berhasil dikonfigurasi di web.php

26Buat Folder dan View user/index.blade.php

Membuat folder user di dalam views, lalu membuat file index.blade.php untuk menampilkan tabel data daftar semua user sistem.

Aksi: Buat Folder resources/views/user/ → Buat File index.blade.php

Gambar 26 – View index daftar users dengan DataTables dan tombol aksi berhasil dibuat

27Buat View user/create.blade.php

Membuat file form input create.blade.php yang digunakan untuk proses penambahan pengguna baru ke dalam database.

Aksi: Buat File Baru resources/views/user/create.blade.php

Gambar 27 – Form tambah user baru dengan Select2 multiple level berhasil dibuat

28Buat View user/edit.blade.php

Membuat file komponen form edit.blade.php untuk memfasilitasi proses pembaruan data lama milik user.

Aksi: Buat File Baru resources/views/user/edit.blade.php

Gambar 28 – Form edit user dengan data lama terisi otomatis dan password opsional berhasil dibuat

VIIILangkah Kerja: Jalankan dan Uji Aplikasi

Bagian ini adalah langkah terakhir: menjalankan server development dan menguji semua fungsionalitas aplikasi SISFO di browser.

29Jalankan Server Development Laravel

Menjalankan server bawaan Laravel agar aplikasi dapat diakses melalui browser di alamat port lokal eksekusi.

Aksi: Jalankan Artisan Serve

bash

php artisan serve

Biarkan terminal ini tetap terbuka selama pengujian aplikasi di web browser.

Gambar 29 – Server development Laravel berhasil berjalan di port 8000

30Uji Halaman Login

Membuka browser ke alamat lokal server dan melakukan login sistem menggunakan kredensial akun administrator dari seeder data awal.

Aksi: Buka Browser → Login dengan Akun Admin

Gambar 30 – Halaman login SISFO bergaya SB Admin 2 berhasil tampil di browser

31Uji Halaman Dashboard Setelah Login

Setelah autentikasi berhasil, pastikan halaman langsung dialihkan ke dashboard utama dengan menampilkan nama user login secara dinamis.

Aksi: Verifikasi Tampilan Dashboard

Gambar 31 – Dashboard SISFO berhasil tampil dengan sidebar, topbar, dan kartu selamat datang

32Uji Halaman Daftar Users

Menguji tampilan halaman indeks data user. Memastikan data termuat di dalam library tabel pencarian dan pagination dengan benar.

Aksi: Klik Menu Users di Sidebar

Gambar 32 – Halaman daftar users dengan DataTables berhasil menampilkan data pengguna

33Uji Form Tambah User Baru

Mengklik tombol tambah data, mengisi field isian form, lalu menekan simpan untuk memverifikasi fungsionalitas insert data baru ke database.

Aksi: Klik Tambah User → Isi Form → Simpan

Gambar 33 – Form tambah user baru dengan Select2 level berhasil tampil dan berfungsi

Gambar 34 – Notifikasi sukses muncul dan data user baru berhasil ditambahkan ke tabel

34Uji Form Edit User

Menguji fitur edit dengan mengubah data pengguna lama, menyimpan form, dan memeriksa apakah data pada tabel telah terupdate.

Aksi: Klik Edit → Ubah Data → Simpan

Gambar 35 – Form edit user dengan data lama terisi otomatis berhasil tampil dan berfungsi

Gambar 36 – Notifikasi sukses muncul dan data user berhasil diperbarui di tabel

35Uji Fungsi Hapus User

Memicu fungsi hapus pada salah satu baris user, menyetujui alert dialog konfirmasi, lalu memastikan data baris tersebut hilang dari tabel.

Aksi: Klik Hapus → Konfirmasi → Verifikasi Data Terhapus

Gambar 37 – Dialog konfirmasi penghapusan muncul sebelum data user dihapus

Gambar 38 – Notifikasi sukses muncul dan data user berhasil dihapus dari tabel

36Uji Fungsi Logout

Mengklik opsi logout melalui menu navigasi, menyetujui modal konfirmasi keluar, dan memastikan session dihancurkan lalu halaman kembali ke login.

Aksi: Klik Nama User → Logout → Konfirmasi Modal

Gambar 39 – Modal konfirmasi logout muncul sebelum sesi pengguna diakhiri

Gambar 40 – Pengguna berhasil logout dan diarahkan kembali ke halaman login

IXHasil & Pembahasan

Melalui serangkaian tahapan praktikum ini, pembangunan aplikasi Sistem Informasi (SISFO) berbasis Laravel dengan arsitektur MVC berhasil diselesaikan secara penuh. Berikut ringkasan hasil yang dicapai:

Konfigurasi Environment & Database: Koneksi antara Laravel dan MySQL lokal berhasil dibangun melalui pengaturan file .env. Seluruh tabel default berhasil dibuat lewat migration awal.
Sistem Autentikasi: Fitur login dan logout berhasil berjalan menggunakan scaffold dari paket laravel/ui. Halaman login berhasil ditampilkan dengan template SB Admin 2 yang terintegrasi.
Kustomisasi Tabel Users: Kolom username, level, dan status berhasil ditambahkan ke tabel users melalui migration tambahan tanpa perlu mengubah tabel secara manual di phpMyAdmin.
Seeder Admin: Data akun admin berhasil dimasukkan ke database secara otomatis menggunakan AdminSeeder, sehingga aplikasi siap digunakan tanpa perlu membuat akun secara manual.
Template SB Admin 2: Tampilan dashboard profesional berhasil diintegrasikan dengan layout modular Blade (main, sidebar, topbar) yang reusable di seluruh halaman aplikasi.
Fungsionalitas CRUD Users: Pengujian di browser membuktikan semua operasi manajemen pengguna (tambah, lihat, edit, hapus) berjalan lancar dengan validasi form yang aman, tampilan DataTables yang responsif, dan Select2 untuk pemilihan level pengguna.

XKesimpulan

Berdasarkan seluruh tahapan praktikum yang telah dilaksanakan, diperoleh beberapa poin kesimpulan penting:

Pola arsitektur Model-View-Controller (MVC) pada Laravel mempermudah pengembangan aplikasi dengan memisahkan lapisan database (Model), tampilan antarmuka (View), dan logika pemrosesan (Controller) secara terstruktur.
Fitur Migration memungkinkan pengelolaan skema database secara bertahap dan terdokumentasi, termasuk penambahan kolom baru tanpa mengganggu data yang sudah ada.
Penggunaan Seeder mempercepat proses pengisian data awal seperti akun admin, sehingga aplikasi langsung siap diuji tanpa perlu input manual melalui antarmuka database.
Integrasi Laravel UI dengan Bootstrap secara signifikan mempercepat pembangunan sistem autentikasi yang lengkap dan aman.
Penggunaan Resource Controller dan Route::resource menyederhanakan pendefinisian tujuh endpoint RESTful sekaligus dalam satu baris kode, meningkatkan produktivitas pengembangan.
Template SB Admin 2 yang diintegrasikan dengan Blade Layout menunjukkan bahwa pemisahan komponen UI (sidebar, topbar) ke file terpisah meningkatkan keterbacaan dan kemudahan pemeliharaan kode.

Lihat Repository GitHub

Laprak — Sistem Informasi (SISFO): Auth, Migration, Seeder, CRUD Users, SB Admin 2