Laprak — Laravel UI Bootstrap dan Templating

I. Tujuan Praktikum

Setelah menyelesaikan praktikum ini, mahasiswa diharapkan mampu:

• Membuat project Laravel baru menggunakan Composer
• Mengimplementasikan fitur authentication menggunakan package laravel/ui dengan Bootstrap
• Melakukan konfigurasi database dan menjalankan migration
• Melakukan custom tabel users dengan menambahkan field tambahan menggunakan Migration
• Menggunakan fitur Seeding untuk membuat data user awal
• Mengintegrasikan template SB Admin 2 sebagai tampilan aplikasi
• Membuat layout global menggunakan Blade Templating Engine dengan direktif @extends, @section, @yield, dan @include
• Mengimplementasikan fitur CRUD untuk manajemen data users menggunakan Resource Controller

II. Dasar Teori

Laravel adalah framework PHP yang menggunakan pola arsitektur MVC (Model-View-Controller). Package laravel/ui menyediakan scaffolding authentication siap pakai yang secara otomatis men-generate controller, model, view, dan route yang dibutuhkan untuk fitur login, register, dan forgot password.

Blade Templating Engine adalah sistem template bawaan Laravel yang memungkinkan pembuatan layout global dengan direktif seperti @extends, @section, @yield, dan @include. Hal ini memudahkan pengelolaan tampilan yang konsisten di seluruh halaman aplikasi.

Migration digunakan untuk membuat dan mengelola struktur database secara terversioning, sedangkan Seeding digunakan untuk mengisi data awal ke database secara otomatis tanpa input manual. Resource Controller adalah controller yang memiliki method CRUD lengkap yang di-generate otomatis oleh Laravel, dikombinasikan dengan Route::resource untuk mendaftarkan semua route CRUD sekaligus.

III. Alat dan Bahan

• Laptop / Komputer
• Laragon (sebagai local development environment)
• Visual Studio Code
• Browser (Google Chrome / Firefox)
• Composer, Node.js, NPM
• Template SB Admin 2 (startbootstrap.com/theme/sb-admin-2)

IV. Langkah - Langkah Praktikum

1Membuat Project Laravel 10

Buka terminal Laragon, masuk ke folder C:\laragon\www, kemudian buat project Laravel 10 menggunakan perintah composer create-project laravel/laravel=^10.0 laravel-sisfo --prefer-dist. Setelah selesai, masuk ke folder project dengan perintah cd laravel-sisfo.

Gambar 1 – Proses pembuatan project Laravel 10

2Konfigurasi Database

Buka file .env pada root project dan sesuaikan konfigurasi database dengan mengisi DB_DATABASE=laravel_sisfo, DB_USERNAME=root, dan DB_PASSWORD= (kosong).

Gambar 2 – Konfigurasi database di file .env

3Install Laravel/UI dan Generate Scaffolding Authentication

Install package laravel/ui menggunakan perintah composer require laravel/ui. Setelah berhasil terinstall, generate scaffolding authentication dengan Bootstrap menggunakan perintah php artisan ui bootstrap --auth. Jika muncul pertanyaan "Do you want to replace it?" ketik yes untuk semua.

Gambar 3a – Hasil install package laravel/ui

Gambar 3b – Generate scaffolding authentication dengan Bootstrap

Perintah tersebut secara otomatis men-generate controller auth, view login/register, dan layout app.blade.php. Selanjutnya install dan compile asset menggunakan perintah npm install && npm run dev. Setelah selesai compile, tekan Ctrl+C lalu ketik Y untuk stop. Kemudian jalankan migration dengan perintah php artisan migrate.

Gambar 3c – Authentication scaffolding berhasil di-generate

Gambar 3d – Hasil php artisan migrate

4Custom Tabel Users

Tabel users bawaan Laravel perlu ditambahkan beberapa field yaitu username, level, dan status. Buat migration baru menggunakan perintah php artisan make:migration costum_table_users.

Gambar 4a – Membuat migration costum_table_users

Buka file migration yang baru dibuat di folder database/migrations/, kemudian isi method up() dengan menambahkan kolom username (string, unique), level (string), dan status (enum: ACTIVE, INACTIVE). Method down() diisi dengan perintah dropColumn untuk ketiga field tersebut.

Gambar 4b – Isi file migration costum_table_users.php

5Seeding User Admin

Buat seeder untuk mengisi data user admin awal ke database menggunakan perintah php artisan make:seeder AdminSeeder. File seeder akan dibuat di folder database/seeders/AdminSeeder.php.

Gambar 5a – Membuat AdminSeeder

Buka file AdminSeeder.php dan isi method run() dengan membuat instance model User, kemudian mengisi field username, name, email, level (json_encode), status, dan password menggunakan bcrypt(). Setelah itu panggil $admin->save() untuk menyimpan ke database.

Gambar 5b – Isi file AdminSeeder.php

Jalankan seeder dengan perintah php artisan db:seed --class=AdminSeeder untuk mengisi data admin ke database.

Gambar 5c – Hasil seeding user admin berhasil ditambahkan

6Integrasi Template SB Admin 2

Download template SB Admin 2 di startbootstrap.com/theme/sb-admin-2, ekstrak file zip yang didownload, kemudian buat folder public/sbadmin/ di dalam project Laravel dan copy semua isi folder template (css, js, vendor, img) ke dalamnya.

Gambar 6a – Struktur folder public/sbadmin setelah asset template dicopy

Buka file resources/views/layouts/app.blade.php dan ganti seluruh isinya dengan template HTML login SB Admin 2. File ini menggunakan asset dari folder public/sbadmin/ melalui helper asset(), dan form login diarahkan ke route login menggunakan method POST dengan token @csrf.

Gambar 6b – Isi file app.blade.php dengan template login SB Admin 2

Gambar 6c – Tampilan halaman login dengan template SB Admin 2

7Membuat Layout Global

Buat file baru resources/views/layouts/main.blade.php sebagai layout utama aplikasi. Layout ini memanggil @include('layouts.sidebar') dan @include('layouts.topbar') sehingga kedua komponen tersebut tampil di semua halaman yang menggunakan layout ini. Konten halaman ditampilkan menggunakan @yield('konten') dan judul halaman menggunakan @yield('judul').

Gambar 7a – Isi file layouts/main.blade.php

Sidebar

Buat file baru resources/views/layouts/sidebar.blade.php yang berisi navigasi sidebar aplikasi menggunakan class SB Admin 2. Sidebar menampilkan menu Dashboard dan Users dengan icon Font Awesome.

Gambar 7b – Isi file layouts/sidebar.blade.php

Topbar

Buat file baru resources/views/layouts/topbar.blade.php yang berisi navbar atas dengan dropdown menu user. Nama user yang sedang login ditampilkan menggunakan Auth::user()->name. Menu logout menggunakan modal konfirmasi sebelum melakukan logout.

Gambar 7c – Isi file layouts/topbar.blade.php

Edit file resources/views/home.blade.php agar menggunakan layout main dengan direktif @extends('layouts.main'), kemudian isi section judul dan konten menggunakan @section dan @endsection.

Gambar 7d – Isi file home.blade.php yang sudah menggunakan layout main

Gambar 7e – Tampilan dashboard aplikasi setelah login berhasil

8Membuat CRUD Manajemen Users

Pada langkah ini dibuat fitur manajemen users secara lengkap (Create, Read, Update, Delete) menggunakan Resource Controller. Setiap bagian dijelaskan beserta kode file dan tampilan hasilnya di browser.

SETUP UserController & Route Resource

Buat UserController dengan flag --resource menggunakan perintah berikut agar semua method CRUD (index, create, store, show, edit, update, destroy) otomatis tersedia.

Gambar 8a – Perintah membuat UserController resource di terminal

Buka file app/Http/Controllers/UserController.php — file ini berisi skeleton method CRUD yang akan diisi secara bertahap.

Gambar 8b – Isi file UserController.php dengan skeleton method CRUD

Tambahkan route resource di routes/web.php dengan Route::resource('users', UserController::class) agar semua route CRUD terdaftar otomatis dalam satu baris.

Gambar 8c – Isi file routes/web.php dengan route resource users

CREATE Tambah User Baru

Edit method create() di UserController agar mengembalikan view form tambah user, dan method store() untuk menyimpan data baru ke database. Data level disimpan dalam format JSON menggunakan json_encode().

Gambar 8d – Method create() dan store() di UserController.php

Buat file resources/views/user/create.blade.php berisi form input dengan field nama, email, username, password, dan level. Field level menggunakan select2 multiple agar bisa memilih lebih dari satu level.

Gambar 8e – Isi file resources/views/user/create.blade.php

Gambar 8f – Tampilan halaman form tambah user baru di browser

Gambar 8g – Tampilan setelah berhasil menambahkan user

READ Daftar Semua Users

Edit method index() di UserController untuk mengambil semua data user menggunakan User::all() dan mengirimkannya ke view user/index.blade.php.

Gambar 8h – Method index() di UserController.php

Buat file resources/views/user/index.blade.php yang menampilkan daftar user dalam tabel menggunakan plugin DataTables agar tabel memiliki fitur pencarian, pengurutan, dan paginasi otomatis.

Gambar 8i – Isi file resources/views/user/index.blade.php

Gambar 8j – Tampilan halaman daftar users dengan DataTables di browser

UPDATE Edit Data User

Edit method edit() di UserController untuk mengambil data user berdasarkan id menggunakan findOrFail() dan mengirimkannya ke view. Method update() menerima data baru dari form dan menyimpan perubahan ke database.

Gambar 8k – Method edit() dan update() di UserController.php

Buat file resources/views/user/edit.blade.php yang berisi form edit dengan nilai default dari data user yang dipilih. Form menggunakan @method('PUT') untuk method spoofing karena HTML form tidak mendukung method PUT secara langsung. Field level menampilkan nilai terpilih sebelumnya menggunakan in_array() dan json_decode().

Gambar 8l – Isi file resources/views/user/edit.blade.php

Gambar 8m – Tampilan form edit user dengan data lama sudah terisi di browser

Gambar 8o & 8n – Halaman daftar users setelah data berhasil diupdate (muncul alert success)

DELETE Hapus Data User

Tambahkan tombol hapus di view user/index.blade.php menggunakan form dengan @method('DELETE') dan atribut onsubmit="return confirm()" untuk menampilkan dialog konfirmasi sebelum data dihapus.

Gambar 8p – Kode tombol hapus dengan konfirmasi di user/index.blade.php

Edit method destroy() di UserController untuk menghapus data user berdasarkan id menggunakan findOrFail() dan delete(), kemudian redirect ke halaman index dengan flash message success.

Gambar 8q – Method destroy() di UserController.php

Gambar 8r – Dialog konfirmasi sebelum menghapus data user

Gambar 8s – Tampilan daftar users setelah data berhasil dihapus (muncul alert success)

V. Hasil & Pembahasan

Praktikum ini berhasil mengimplementasikan sistem informasi sekolah berbasis Laravel 10 dengan fitur authentication menggunakan laravel/ui dan Bootstrap, serta tampilan menggunakan template SB Admin 2. Fitur authentication otomatis men-generate halaman login, register, controller auth, dan route yang dibutuhkan sehingga mempercepat proses pengembangan.

Custom migration berhasil menambahkan field username, level, dan status ke tabel users sesuai kebutuhan aplikasi. Seeding berhasil mengisi data admin awal ke database. Layout global main.blade.php dengan Blade Templating berhasil diterapkan sehingga sidebar dan topbar tampil konsisten di semua halaman. Fitur CRUD users berhasil diimplementasikan menggunakan Resource Controller dengan DataTables dan Select2.

VI. Kesimpulan

Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa:

1. Package laravel/ui memudahkan pembuatan fitur authentication dengan Bootstrap scaffolding yang otomatis men-generate controller, view, dan route yang dibutuhkan.
2. Migration berhasil digunakan untuk memodifikasi struktur tabel users dengan menambahkan field username, level, dan status sesuai kebutuhan aplikasi.
3. Seeding memudahkan pembuatan data user admin awal tanpa perlu input manual melalui phpMyAdmin.
4. Blade Templating Engine dengan direktif @extends, @section, @yield, dan @include berhasil diterapkan untuk membuat layout global yang konsisten di seluruh halaman.
5. Resource Controller dengan Route::resource memudahkan pembuatan CRUD karena semua route CRUD otomatis terdaftar dalam satu baris perintah.
6. Template SB Admin 2 berhasil diintegrasikan sebagai tampilan aplikasi yang profesional dan responsif.