Pada pertemuan kali ini, kita akan membuat tampilan CRUD sederhana berdasarkan template Bootstrap UI yang disediakan oleh laravel
PWEB 8 – LARAVEL AUTH
langkah-langkah
Silakan buat project baru Laravel dengan salah satu cara yang telah disampaikan pada pertemuan sebelumnya, yaitu dengan laravel installer ataupun dengan composer. Pada kesempatan kali ini akan menggunakan composer
Setelah selesai melakukan instalasi project, silahakn buka project tersebut pada file pada code editor, lalu lakukan konfigurasi database seperti berikut, dan pastikan sudah menghidupkan XAMPP.
Tambahkan Fitur User Authentication menggunakan fitur autentikasi bawaan Laravel untuk mempermudah proses login, registrasi, dan pengelolaan sesi pengguna. Laravel menyediakan paket bernama laravel/ui yang memungkinkan kita untuk menghasilkan scaffolding (kerangka) UI dasar lengkap dengan autentikasi.
Setelah berhasil menginstal paket laravel/ui, langkah selanjutnya adalah membuat tampilan autentikasi (login, register, dll) menggunakan Bootstrap. Laravel menyediakan perintah khusus untuk menghasilkan scaffolding tersebut. Jalankan perintah berikut pada terminal didalam project laravel anda
Selanjutnya instal dan compile asset frontend yang dibutuhkan agar tampilan bekerja dengan baik. Jalankan Perintah Berikut npm install && npm run dev , yang mana akan menginstal semua dependensi frontend yang dibutuhkan dan meng-compile file JavaScript dan CSS menggunakan Laravel Mix
Selain tampilan, Laravel juga otomatis menghasilkan controller untuk autentikasi, seperti LoginController, RegisterController, dan lainnya. Dan juga digenerate view untuk authenctication seperti gambar berikut.
langkah berikutnya adalah menjalankan migration. Migration ini akan membuat tabel-tabel penting yang dibutuhkan oleh sistem autentikasi Laravel, seperti tabel users, password_resets, dan lainnya. Jika sebelumnya belum terdapat database, Laravel akan memberikan konfirmasi untuk membuatnya terlebih dahulu.
Selanjutnya jika seluruh alur tadi berhasil, maka kita telah membuat tampilan login dan register template yang disediakan oleh laravel itu sendiri.
Langkah selanjutnya adalah membuat custom table pada tabel user, dengan menambahkan beberapa field baru. Ketikkan kode berikut pada terminal project php artisan make:migration costum_table_users
Selanjutnya buka folder database/migration/custom_table_users yang baru saja dibuat, lalu ketikkan kode program berikut
Jalankan kembali php artisan migrate. Tabel user yang telah di custom akan terlihat seperti berikut
selanjutnya kita akan membuat user pertama, misalnya seorang admin, menggunakan fitur seeder. Seeder ini akan menghasilkan data user dengan peran admin yang dapat digunakan untuk login awal ke sistem. ketikkan perintah berikut php artisan make:seeder AdminSeeder. Jika perintah berhasil, Laravel secara otomatis membuat file AdminSeeder.php di dalam folder database/seeders
Selanjutnya buka file tersebut dan ketikkan kode berikut
Setelah file AdminSeeder.php selesai dibuat dan diisi dengan data user admin, langkah selanjutnya adalah menjalankan seeder tersebut agar data dapat tersimpan ke dalam tabel users pada database. Untuk menjalankannya, ketik perintah berikut php artisan db:seed --class=AdminSeeder
Secara default, Laravel Authentication sudah mengenerate tampilan dashboard aplikasi. Namun, agar tampilan aplikasi lebih menarik dan sesuai dengan kebutuhan, kita perlu mengkonfigurasi layout atau template yang akan digunakan. Pada studi kasus ini, kita akan menggunakan template SB Admin 2, yang dibangun dengan framework Bootstrap. Template ini sangat populer dan mudah dikustomisasi. Langkah pertama, silakan unduh template SB Admin 2 melalui link berikut: https://startbootstrap.com/theme/sb-admin-2. Setelah berhasil diunduh, ekstrak file tersebut. Kemudian, buat folder baru di dalam direktori public pada proyek Laravel Anda dengan nama sbadmin. Terakhir, salin seluruh file aset dari template SB Admin 2 ke dalam folder public/sbadmin yang sudah dibuat tadi.
Selanjutnya, kita akan mengatur tampilan halaman login aplikasi agar sesuai dengan template yang sudah kita siapkan. Buka file app.blade.php yang berada di dalam folder resources/views/layouts, isikan dengan kode berikut
Setelah membuat layout untuk halaman login, langkah selanjutnya adalah membuat layout global yang akan menjadi kerangka utama untuk seluruh halaman aplikasi lainnya. Karena app.blade.php sudah kita gunakan untuk halaman login, maka kita perlu membuat layout baru agar tampilan halaman seperti dashboard, profil, dan halaman lainnya bisa menggunakan struktur yang konsisten. Buat file baru dengan nama main.blade.php di dalam folder resources/views/layouts, lalu isi file tersebut dengan kode program berikut ini.
Pada file main.blade.php yang sudah kita buat, layout ini akan memanggil dua view terpisah yaitu sidebar.blade.php dan topbar.blade.php menggunakan directive Blade @include. Dengan begitu, isi dari kedua view tersebut akan ditampilkan secara otomatis di dalam layout main.blade.php. Selain itu, layout ini juga akan menampilkan data judul dan konten dari setiap halaman yang menggunakan layout ini dengan menggunakan directive @yield('judul') dan @yield('konten'). Karena itu, sebelum melanjutkan ke halaman lain, kita perlu membuat terlebih dahulu view untuk sidebar dan topbar.
Mulai dari sidebar terlebih dahulu, Buat file pada folder layouts dengan nama sidebar.blade.php dan isi dengan kode program berikut
Selanjutnya bagian topbar, Buat file pada folder layouts dengan nama topbar.blade.php dan isi dengan kode program berikut
Selanjutnya kita akan menggunakan layout main.blade.php yang telah kita atur sebelumnya. Sebagai contoh, kita akan menggunakan layout main.blade.php pada view home.blade.php. Buka file home.blade.php dan isi dengan kode program berikut. Untuk menggunakan layout main.blade.php, tambahkan directive @extends('layouts.main') di bagian atas file home.blade.php. Dengan begitu, seluruh tampilan dari layout main.blade.php akan diterapkan pada view home. Selanjutnya, untuk menampilkan data judul pada layout main, gunakan directive @section('judul') diikuti dengan isi judul yang diinginkan, misalnya Dashboard. Tutup dengan @endsection. Begitu pula untuk bagian konten, gunakan directive @section('konten') dan isikan konten yang ingin ditampilkan pada halaman tersebut, lalu tutup dengan @endsection.
Jika konfigurasi layout sudah benar, tampilan halaman home akan muncul seperti gambar berikut.
Dengan memahami cara membuat dan menggunakan layout di Laravel, kita dapat membangun aplikasi yang lebih terstruktur dan mudah dikembangkan. Layout main.blade.php berfungsi sebagai kerangka utama yang memudahkan pengelolaan tampilan aplikasi secara konsisten, terutama saat aplikasi memiliki banyak halaman. Di pertemuan selanjutnya, kita akan melanjutkan dengan membuat fitur multi-level user, sehingga aplikasi dapat mengatur hak akses pengguna dengan lebih baik sesuai peran masing-masing.