Proses login merupakan bagian yang sangat utama dalam pembuatan website. Untuk membuat proses login pada laravel kita bisa menggunakan Boostrap Auth. Tinggal pasang sekali anda sudah bisa menggunakan fitur login, register, logout, forget password, profile, dan reset password.
Berikut tutorial membuat Login dengan Boostrap Auth.
1. Buat project baru dengan nama "login" (sesuaikan dengan keinginan anda).
2. Buka terminal atau cmd kemudian arahkan ke folder root project.
3. Ketikkan perintah "composer require laravel/ui", pastikan telah menginstall composer
4. Setelah ui terpasang sekarang ketikkan perintah "php artisan ui bootstrap --auth", kemudian tunggu hingga proses instalasi selesai.
5. Selanjutnya buat database dengan nama "login" (sesuaikan dengan keinginan).
6. Kembali ke terminal ketikkan perintah "php artisan migrate", perintah ini kan menjalankan migrate di folder database project. Dimana migration defaultnya akan membuat tabel user dan beberapa tabel lainnya.
7. Cek database apakah sudah terdapat tabel seperti pada gambar.
8. Jalankan web di browser. Jika anda belum menggunakan cara Menjalankan Project Laravel Menggunakan XAMPP, Laragon, atau WAMP tanpa port silahkan gunakan perintah "php artisan serve".
9. Berikut tampilan web setelah di pasang Boostrap auth
Tampilan Awal
Halaman Login
Halaman Dashboard
Halaman Register
10. Pasang css dan javascript bootstrap untuk mengaktifkan class yang telah terpasanga pada "resources/views/layouts/app.blade.php" tambahkan code berikut di atas tag "</head>":
<!-- boostrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
11. Buka kembali web di browser dan tampilan akan berubah, contohnya seperti tampilan login akan menjadi seperti pada gambar di bawah :
0 comments:
Post a Comment