Laporan Praktikum 8 Pemrograman Web

LARAVEL AUTH, CRUD Multi Level User

Aliffia Humairah - 2311531004



1. Membuat project Laravel dengan nama Laravel-sisfo

Ada beberapa cara yang dapat digunakan untuk membuat project baru Laravel yaitu dengan cara install installer Laravel secara globat atau install menggunakan composer.

Global Installer Laravel
  • Pertama buat folder / workspace terlebih dahulu didalam folder htdocs, kita sepakati dengan nama Laravel.
  • Selanjutnya buka terminal / command prompt / cmder dan masuk kedalam workspace (C:\xampp\htdocs\laravel).
  • Setalah masuk kedalam workspace ketikkan perintah berikut untuk melakukan installasi.
  • composer global require "laravel/installer"
  • Setelah instalasi selesai, selanjutnya buat project laravel dengan cara mengetikkan perintah berikut.
  • laravel new laravel-sisfo

    Comoposer

    Cara kedua yang dapat digunakan untuk membuat project baru Laravel yaitu menggunakan comoposer, ketikkan perintah berikut pada workspace.

    composer create-project laravel/laravel=^12.0 laravel-sisfo --prefer-dist

    Untuk menjalankan project dapat menggunakan perintah seperti dibawah ini.

    php artisan serve

    Pada Praktikum ini saya menggunakan Composer.

    Nanti bakal muncul link yang dapat dibuka, dan buka link tersebut kemudian akan muncul seperti gambar dibawah.

    https://i.imgur.com/DQVFscw.jpeg

    2. Konfigurasi Database

    Buka file .env kemudian isikan konfigurasi datababse berikut ini.

    https://i.imgur.com/gTeWepW.jpeg

    3. User Authentication

    User authentication pada studi kasus ini menggunakan fitur authentication bawaan Laravel.

    Install package Laravel/ui

    Buka terminal/cmd kemudian ketikkan perintah berikut ini.

    composer require laravel/ui

    https://i.imgur.com/MVYQuw2.jpeg

    jika berhasil maka akan tampil seperti gambar berikut ini.

    https://i.imgur.com/mjuZfbE.jpeg

    Authenctiacation fitur

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

    https://i.imgur.com/heIrMh1.jpeg

    Install dan compile

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

    https://i.imgur.com/vM8GZUb.jpeg

    Selain controller juga degenerate view untuk authenctication seperti gambar berikut.

    https://i.imgur.com/vM8GZUb.jpeg

    Migration

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

    https://i.imgur.com/yJwCGZZ.jpeg

    https://i.imgur.com/SqvoAb9.jpeg

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



    Halaman Login

    Akses url http://127.0.0.1:8000/login pada browser maka akan tampil halaman login seperti berikut.

    https://i.imgur.com/QBnT2yQ.jpeg

    Halaman Register

    Akses url http://127.0.0.1:8000/register pada browser maka akan tampil halaman login seperti berikut.

    https://i.imgur.com/QBnT2yQ.jpeg

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

    https://i.imgur.com/YtvQjko.jpeg

    Kesimpulan

    Fitur authentication Laravel akan mengenerate 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.


    Costum Table Users

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

    https://i.imgur.com/jrr7O0j.jpeg

    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, ketikkan perintah berikut pada terminal atau cmd.

    php artisan make:migration costum_table_users



    Selanjutnya buka folder database/migration/ seperti gambar berikut.

    https://i.imgur.com/EESuIlk.jpeg

    Kemudian buka file yang diakhiri costum_table_users.php dan isikan dengan kode program berikut.

    https://i.imgur.com/RcnwDPo.jpeg

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

    https://i.imgur.com/DjiPzLq.jpeg

    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.

    https://i.imgur.com/JHTyTIb.jpeg

    Selanjutnya untuk menjalankan seeding dengan cara menjalankan perintah berikut . php artisan db:seed --class=AdminSeeder jika berhasil maka akan tampil seperti gambar berikut.

    https://i.imgur.com/J46TiRJ.jpeg

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

    https://i.imgur.com/YtvQjko.jpeg

    4. Templating atau Layouting

    Authentication Laravel secara otomatis mengenerate tampilan dashboard aplikasi, Langkah selanjutnya 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.

    Halaman Login Aplikasi

    Buka file app.blade.php pada folder view/layouts kemudian ganti dengan kode program dibawah ini.

    https://i.imgur.com/nM9NjIs.jpeg

    https://i.imgur.com/LxLlcaM.jpeg

    Jika berhasil maka akan tampil seperti gambar berikut ini.

    https://i.imgur.com/hLlrwIJ.jpeg

    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.

    https://i.imgur.com/JmGVjWr.jpeg

    https://i.imgur.com/YVTb9hh.jpeg

    https://i.imgur.com/y5EFgYI.jpeg

    Penjelasan

    Pada layouts main.blade.php diatas 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).



    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.

    https://i.imgur.com/JmGVjWr.jpeg

    https://i.imgur.com/YVTb9hh.jpeg

    https://i.imgur.com/y5EFgYI.jpeg

    Penjelasan

    Pada layouts main.blade.php diatas 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.

    https://i.imgur.com/D7pGjsJ.jpeg

    Topbar

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

    https://i.imgur.com/aip4uhw.jpeg

    https://i.imgur.com/ewmaOrV.jpeg

    Cara penggunaan layouts main.blade.php

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

    https://i.imgur.com/HLajMzQ.jpeg

    Penjelasan

    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 maka akan tampil seperti gambar berikut ini.

    https://i.imgur.com/vXILZQF.jpeg