Praktikum 8 Pemrograman Web – Laravel Auth

Laporan Praktikum 8 Pemrograman Web

Membuat Project Laravel dengan Nama Laravel-sisfo

Untuk membuat project baru, kita dapat menggunakan composer dengan mengetikkan perintah pada cmder:
composer create-project laravel/laravel=^12.0 laravel-sisfo –prefer-dist

Dengan perintah ini, Composer akan menginstal seluruh kerangka kerja (framework) Laravel versi 12.x beserta semua dependensi PHP yang diperlukan untuk menjalankan aplikasi Laravel dasar.

Jalankan project dengan perintah php artisan serve.

Konfigurasi Database

Bula file .env kemudian sesuaikan konfigurasi databasenya.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel_sisfo

DB_USERNAME=root

DB_PASSWORD=

User Authentication
Install Package Laravel/UI

Ketikkan perintah composer require laravel/ui di terminal atau cmd.

Fungsinya untuk menginstal paket UI (User Interface) resmi Laravel yang menyediakan scaffolding otentikasi (login, register, reset password) dasar dan frontend preset (Blade, Bootstrap, Vue, React).

Authentication Fitur

Ketikkan perintah berikut pada terminal / cmd php artisan ui bootstrap –auth

Fungsinya untuk menginstal scaffolding otentikasi (login, register, dll.) dengan styling menggunakan Bootstrap, termasuk tampilan (views), rute (routes), dan controller yang diperlukan.

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.

Dan akan ditambahkan folder auth ke project kita

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.

Halaman Login

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

Halaman Regsiter

Akses url http://127.0.0.1:8000/register pada browser maka akan tampil halaman register

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.

Custom Table Users

Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user dan 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. Perintah ini digunakan untuk membuat file migrasi database baru di Laravel dengan nama costum_table_users.

Di folder migrations akan terbuat file baru yaitu custom table user yang dibuat menggunakan perintah tadi. Kemudian buka file costum_table_users.php dan isikan dengan kode program berikut.

Kemudian jalankan perintah php artisan migrate, jika berhasil maka struktur table users telah berubah

Seeding User

Buat seeder dengan perintah php artisan make:seeder AdminSeeder yang akan membuat file AdminSeeder.php pada folder Seeder dan gunakan untuk buat akun admin.

Selanjutnya untuk menjalankan seeding dengan cara menjalankan perintah berikut . php artisan db:seed –class=AdminSeeder. Jika berhasil maka akan muncul seperti ini:

Kita dapat login dengan menggunakan akun tersebut.

Templating dan Layouting

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.

Buka file app.blade.php dan sesuaikan kodenya:

<!DOCTYPE html>

<head>

<title>Sisfo – Login</title>

<!– Custom fonts for this template–>

free/css/all.min.css’) }}” rel=”stylesheet” type=”text/css”>

<link

href=”https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i rel=”stylesheet”>

<!– Custom styles for this template–>

</head>

<!– Outer Row –>

<!– Nested Row within Card Body –>

<!– <div class=”col-lg-6 “></div> –>

<h1 class=”h4 text-gray-900 mb4″>Halaman Login</h1>

</div>

@csrf

<input id=”email” type=”email” class=”form-control form-control-user @error(’email’) is-invalid

@enderror”

name=”email” value=”{{ old(’email’) }}” required autocomplete=”email” autofocus />

@error(’email’)

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

<input id=”password” type=”password”

class=”form-control form-control-user @error(‘password’) is-invalid @enderror”

name=”password” value=”{{ old(‘password’) }}” required />

@error(‘password’)

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</button>

</form>

</div>

<!– Bootstrap core JavaScript–>

<!– Core plugin JavaScript–>

<!– Custom scripts for all pages–>

</body>

</html>

Dengan kode ini, tampilan halaman login akan berubah

Layout Global

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. Buat file dengan nama main.blade.php pada folder view/layouts.

<!DOCTYPE html>

<head>

<title>Sisfo – @yield(‘judul’)</title>

<!– Custom fonts for this template–>

<!– Custom styles for this template–>

</head>

<!– Page Wrapper –>

<!– Sidebar –>

@include(‘layouts.sidebar’)

<!– End of Sidebar –>

<!– Content Wrapper –>

<!– Main Content –>

<!– Topbar –>

@include(‘layouts.topbar’)

<!– End of Topbar –>

<!– Begin Page Content –>

<!– Page Heading –>

<h1 class=”h3 mb-4 text-gray-800″>@yield(‘judul’)</h1>

@yield(‘konten’)

</div>

<!– /.container-fluid –>

</div>

<!– End of Main Content –>

<!– Footer –>

</div>

</footer>

<!– End of Footer –>

</div>

<!– End of Content Wrapper –>

</div>

<!– End of Page Wrapper –>

<!– Scroll to Top Button–>

</a>

<!– Logout Modal–>

<div class=”modal fade” id=”logoutModal” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel”

aria-hidden=”true”>

<h5 class=”modal-title” id=”exampleModalLabel”>Yakin

akan keluar aplikasi ?</h5>

</button>

</div>

<div class=”modal-body”>Silahkan klik tombol logout untuk

keluar aplikasi</div>

<button class=”btn btn-secondary” type=”button” data dismiss=”modal”>Cancel</button>

@csrf

<button class=”btn btn-primary” style=”cursor:pointer”>Logout</button>

</form>

</div>

<!– Bootstrap core JavaScript–>

< /s

cript >

!–Core plugin JavaScript– >

script src = “{{ asset(‘sbadmin/vendor/jquery easing/jquery.easing.min.js’) }}” >

</script>

<!– Custom scripts for all pages–>

</body>

</html>

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 sidebar.blade.php pada folder layouts.

Topbar

Buat juga file topbar.blade.php di folder yang sama.

Penggunaan Layouts main.blade.php

Untuk menggunakan layouts main, gunakan @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

Caranya masuk ke home.blade.php dan isikan:

@extends(‘layouts.main’)

@section(“judul”) Dasboard @endsection

@section(‘konten’)

<P>dashboard</P>

@endsection

Jika konfigurasi berhasil, maka tampilannya akan berubah menjadi:

Leave a Comment Cancel Reply