Selasa, 20 Februari 2024

LARAVEL-bab14

 Tutorial Laravel 9 - Part #14 - Membuat Login User dengan Laravel UI Bootstrap

Hi Semua, fitur Login dan Register user sudah menjadi hal umum dalam membuat sebuah aplikasi web. Pada dasarnya Login User ini dibuat untuk memberikan akses terhadap fitur tertentu hanya kepada user yang telah terdaftar dalam aplikasi tersebut.

Pada kesempatan ini kita akan membuat fitur Login User menggunakan Package/Library Laravel-UI dengan menggunakan tampilan Bootstrap. Tentu dengan kelengkapan fitur seperti: Registrasi User, Forgot Password, Reset Password dan lain sebagainya.

Namun sebelum membahas lebih lanjut, saya asumsikan bahwa Anda telah menginstall project laravel dari awal dan juga telah melakukan konfigurasi database. Jika belum, Anda dapat mengikuti Tutorial Instalasi Laravel 9 yang telah diposting sebelumnya.

Step 1 - Instalasi Package Laravel/UI dengan Composer

Buka terminal dan kemudian jalankan perintah berikut pada directory project kita:

composer require laravel/ui

Step 2 - Generate Scaffolding

Jalankan perintah berikut pada terminal:

php artisan ui bootstrap --auth

Perintah di atas akan menghasilkan file-file yang berkaitan dengan Autentikasi di Laravel yang terdiri dari: Route, Controller, Views dan file pendukung lainnya. 

Step 3 - Instalasi NPM Dependencies

Jalankan perintah berikut pada terminal:

npm install && npm run dev

Step 4 - Migrasi Tabel Database

Jalankan perintah berikut untuk membuat tabel-tabel pada database yang terkait dengan autentikasi di Laravel:

php artisan migrate

Step 5 - Uji Coba

Jalankan perintah:

php artisan serve

Buka localhost:8000 pada browser kalian. Jika tidak ada kendala, maka seharusnya ada Link untuk Login dan Register pada pojok kanan atas seperti berikut: 

Kemudian jika kita klik Login maka akan tampil form login seperti berikut: 

Download Source Code

Source code untuk tutorial kali ini dapat di download langsung di link github berikut: https://github.com/gieart87/tutorial-laravel9/tree/feature/laravel9-auth-login-laravel-ui-boostrap

Selamat mencoba!

Tidak ada komentar:

Posting Komentar