LARAVEL AUTH DAN CRUD MULTI-LEVEL USER PART 1 #8

Assalamu’alaikum warahmatullahi wabarakatuh. Konnichiwa, mina-san!

Pada praktikum ke-8 mata kuliah pemrograman web semester 4 jurusan informatika, saya kembali mempelajari Laravel dan membuat project baru dengan nama folder laravel-sisfo.

INSTALASI FOLDER

Sebelumnya, saya telah membuat folder bernama Laravel. Selanjutnya, saya masuk ke cmder dan masuk ke dalam workspace C:\Praktikum\Laravel (ini fleksibel dan dapat diubah sesuai dengan workspace yang teman-teman tentukan).

Setelah itu, saya membuat folder Laravel baru dengan menggunakan Composer di cmder karena composer dapat dikatakan sebagai “tukang pasang” otomatis buat program-program PHP seperti Laravel, sehingga membuat pekerjaan lebih efektif dan efisien. Ketikkan perintah seperti ini dan tunggu program selesai.

Jika sudah selesai, kita bisa cek di VSCode untuk melihat apakah foldernya sudah ada.

Berhasil! Folder sudah ada!

Lanjut, untuk menjalankan proyek dapat menggunakan perintah php artisan serve yang dijalankan di terminal VSCode seperti berikut, gunanya adalah untuk memulai server pengembangan lokal sehingga kita dapat melihat dan menguji aplikasi Laravel yang sedang dikerjakan di browser web.

Catatan: Tampilan default Laravel yang belum rapi seperti ini adalah hal wajar dan tidak ada yang salah dengan instalasi Laravel, karena ini hanya menunjukkan bahwa Laravel sudah berhasil terpasang dan server sudah berjalan.

DATABASE CONFIGURATION

Selanjutnya, buka file .env kemudian isikan konfigurasi database berikut ini.

USER AUTHENTICATIOM

Selanjutnya, kita dapat melakukan otentikasi pengguna menggunakan fitur authentication bawaan Laravel. Untuk itu, kita perlu melakukan instalasi package laravel/ui dengan cmder lalu mengetikkan perintah composer require laravel/ui. Tunggu hingga berhasil dan muncul tampilan seperti berikut.

Ketikkan perintah php artisan ui bootstrap –auth pada terminal, jika berhasil maka akan tampil seperti gambar berikut.

INSTALL AND COMPILE

Ketikkan perintah npm install && npm run dev untuk memasang dan compile file-file asset bawaan, dengan perintah di atas, maka file-file yang dibutuhkan untuk authentication akan di-generate secara otomatis, seperti halaman login, register dan forgot password, selain itu juga akan di-generate controller auth seperti gambar berikut.

MIGRATION

Ketikkan perintah php artisan migrate maka Laravel akan membuat migration table authentication, jika sebelumnya belum terdapat database, maka akan ada konfirmasi dari Laravel apakah akan dibuatkan databasenya atau tidak. Jika migration berhasil, maka akan tampil seperti berikut.

Jika instalasi berhasil, maka aplikasi sisfo sudah memiliki fitur authentication bawaan dari Laravel, berikut tampilan fitur authentication dari Laravel.

LOGIN PAGE

Akses tautan berikut pada browser untuk login dan tautan berikut untuk register, maka akan muncul tampilan seperti berikut.

Catatan: Jika tidak bisa atau terjadi eror, pastikan bahwa server dijalankan dengan 2 terminal, 1 untuk php artisan serve dan 1 untuk npm run dev agar pengembangan Laravel (php artisan serve) dapat menyajikan aplikasi PHP, sementara Vite (npm run dev) dapat mengkompilasi dan menyediakan aset frontend (CSS, JavaScript) secara real-time dan otomatis.

Selanjutnya, kita bisa coba lakukan registrasi dan lakukan login ke aplikasi, jika berhasil maka akan tampil seperti berikut.

Fitur authentication Laravel akan membuat controller, model, view, dan route authentication secara otomatis, selain itu juga tampilan view sudah menggunakan framework boostrap sehingga mempermudah dalam membuat fitur authentication pada aplikasi.

CUSTOM TABLE USERS

Authentication Laravel secara otomatis akan membuat table Users yang berisi tentang informasi data user, berikut struktur table users.

Dari stuktur table users di atas, perlu ditambahkan beberapa field, yaitu username, level dan status. Perlu dibuat sebuah migration untuk menambahkan field-field di atas, ketikkan perintah php artisan make:migration costum_table_users pada terminal dan isikan dengan kode program berikut.

Kemudian jalankan perintah php artisan migrate, jika berhasil maka struktur table users telah
berubah sesuai dengan kebutuhan aplikasi.

SEEDING USER

Setelah berhasil melakukan costum table users, selanjutnya membuat user menggunakan fitur seeding pada Laravel, buat seeder dengan nama AdminSeeder dengan perintah php artisan make:seeder AdminSeeder. Secara otomatis, file AdminSeeder.php akan dibuat pada folder database/Seeder. Kemudian, buka file tersebut dan buat akun admin seperti kode program berikut.

Untuk menjalankan seeding, ketik perintah php artisan db:seed –class=AdminSeeder

Jika berhasil, maka akan tampil seperti berikut.

Jika sudah berhasil menambahkan user, maka dapat login ke aplikasi menggunakan akun tersebut sebagai admin aplikasi.

LAYOUTING

Authentication Laravel secara otomatis generating tampilan dashboard aplikasi. Langkah selanjutnya adalah konfigurasi tampilan aplikasi sesuai dengan template yang dipilih. Di sini, saya akan menggunakan template SB Admin 2 dengan framework bootstrap, template bisa diunduh pada tautan berikut. Ekstrak, lalu buat folder pada public project Laravel dengan nama sbadmin dan copy paste-kan seluruh asset template sbadmin ke dalam folder tersebut.

Untuk halaman login, buka file app.blade.php pada folder views/layouts kemudian ganti dengan kode program berikut ini.

Setelahnya, refresh server, akan muncul tampilan berikut.

LAYOUT GLOBAL

Selanjutnya membuat layout global yang mana layout ini akan digunakan sebagai layout utama aplikasi dan view-view lain akan mengambil resource di sini, karena app.blade.php sudah digunakan untuk view login, maka kita perlu membuat layout baru, buat file dengan nama main.blade.php pada folder views/layouts dan isikan dengan kode program seperti berikut ini.

Pada layouts main.blade.php di atas, layout ini akan memanggil view sidebar.blade.php dan view topbar.blade.php kedalam layout main.blade.php dengan menggunakan perintah @include sehingga tampilan kedua view tersebut akan tampil pada layout main. Selanjutnya juga akan menampilkan data judul dan konten dari view yang akan menggunakan layouts main.blade.php dengan perintah @yeild(‘judul’) dan @yeild(‘konten).

SIDEBAR

Buat file pada folder layouts dengan nama sidebar.blade.php dan isi dengan kode program berikut.

TOPBAR

Buat file pada folder layouts dengan nama topbar.blade.php dan isi dengan kode program berikut.

Cara penggunaan layouts main.blade.php: sebagai contoh kita akan menggunakan view home.blade.php, buka file tersebut dan isikan dengan kode program berikut.

Untuk menggunakan layouts main menggunakan @extends(‘layouts.main’) sehingga seluruh tampilan main.blade.php akan ditampilkan pada view home, untuk menampilkan data judul pada layout main dengan perintah @section(‘judul’)Dashboard @endsection dan konten dengan cara @section(‘judul’)Dashboard @endsection

Jika berhasil, tampilan akan seperti ini.

Sekian praktikum pemrograman web #8 saya, mohon tinggalkan kritik dan saran yang membangun. Terima kasih! <3