C. Langkah-langkah
1. Bikin Project Laravel Baru
Nama projectnya: Laravel-sisfo
Di workspace, buka terminal/cmd dan masukkan perintah ini:
composer create-project laravel/laravel=^9.0 laravel-sisfo --prefer-dist
Kalau udah jadi, jalankan project dengan:
php artisan serve
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:
composer require laravel/ui
Kalau sukses, bakal muncul pesan seperti di gambar.
b) Aktifkan Fitur Auth dengan Bootstrap
Ketik perintah:
php artisan ui bootstrap --auth
Kalau berhasil, akan muncul konfirmasi seperti gambar.
c) Install & Compile Asset
Jalankan:
npm install && npm run dev
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:
php artisan migrate
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:
php artisan make:migration costum_table_users
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:
php artisan make:seeder 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:
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
- Tombol 3 garis di kiri > buat muncul/sembunyikan sidebar di perangkat layar kecil (smartphone)
- 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:
php artisan make:controller UserController --resource
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.
