Web Development Practical Report 3

Laravel AUTH, CRUD Multi Level User

1

Membuat Project baru dengan Composer

Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder)

composer create-project laravel/laravel=^12.0 laravel-sisfo --prefer-dist
Opening Visual Studio Code
2

Konfigurasi Database

Buka file .env kemudian isikan konfigurasi datababse berikut ini.

Opening Folder in VS Code
3

User Authentication

Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder)

composer require laravel/ui
Creating HTML File
4

Authenctiacation fitur

Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder)

php artisan ui bootstrap --auth

Dan jalankan code berikut untuk untuk menginstall dan compile file-file asset bawaan

npm install && npm run dev
HTML Structure Setup
5

Membuat Project Laravel dengan Laravel Installer

Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder)

composer global require laravel/installer

Untuk membuat project baru gunakan perintah ini

laravel new example-app
6

Migration

Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder)

php artisan migrate

maka Laravel akan membuat migration table authentication, jika sebelumnya belum terdapat database maka akan ada konfirmasi dari larevel apakah akan dibuatkan databasenya atau tidak. Jika migaration berhasil maka akan tampil seperti tampilan berikut.

Creating JavaScript File
7

Costum Table Users

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

Designing Navigation Bar

Dari stuktur table users diatas maka perlu ditambahken beberapa field yaitu username, level dan status, maka perlu membuat sebuah migration untuk menambahkan field-field diatas, Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder)

php artisan make:migration costum_table_users

dan Ketikkan Code berikut :

Designing Navigation Bar

Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder),

php artisan migrate

Jika berhasil maka struktur table users telah berubah sesuai dengan kebutuhan aplikasi.

Designing Navigation Bar
8

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

Maka secara otomatis file AdminSeeder.php akan dibuat pada folder database/Seeder. Kemudian buka file tersebut dan buat akun admin seperti kode program berikut.

Creating Hero Section

Selanjutnya untuk menjalankan seeding, Ketiklah Code berikut pada CLI (GIT Bash, Command Prompt, atau Cmder)

php artisan db:seed --class=AdminSeeder 
Creating Hero Section
9

Templating atau Layouting

Authentication Laravel secara otomatis mengenerate tampilan dashboard aplikasi, Langkah selannjutnya kita akan konfigurasi tampilan aplikasi sesuai dengan template yang kita pilih, ada studi kasus ini kita akan menggunakan template SB Admin 2 dengan framework bootstrap, silahkan downloah template pada link https://startbootstrap.com/theme/sb-admin-2 kemudian extrak, selanjutnya buat folder pada public project Laravel dengan nama sbadmin dan copy paste kan seluruh asset template sbadmin kedalam folder tersebut.

Creating Hero Section

Gantilah Kodenya dengan Kode program berikut ini :

Creating Hero Section
Creating Hero Section
Creating Hero Section

Sehingga tampilan login akan berubah seperti gambar dibawah ini.

Creating Hero Section
10

Layout Global

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

Opening Visual Studio Code
Opening Visual Studio Code
Opening Visual Studio Code
11

Sidebar

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

Opening Visual Studio Code
12

Topbar

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

Opening Visual Studio Code
13

Cara penggunaan layouts main.blade.php

Sebagai contoh kita akan menggunakan view home.blade.php, buka file tersebut dan isikan dengan kode program berikut.

Opening Visual Studio Code