>> Kita akan membahas fitur login dan registrasi untuk aplikasi kita.

Kita akan
membuat dlu
view atau tampilan dari halaman login dan register. Kita akan menggunakan
bantuan dari
tema yang dimiliki bootstrap. Sehingga pembuatannya gk akan dari awal

>> Kalau ingin membuat tampilan yang berbeda sesuai dengan selera kita, silahkan,
jadi
tampilannya tidak harus sama. Jadi kita akan membuat view untuk login dan
registrasi

>> Jadi di navbarnya kita bikin link yang mengarah ke halaman login, setelah di
klik, kita
masuk ke viewnya login dan baru disitu akan ada tombol jika belum punya
account, klik
registrasi, ketika di klik, baru tampil halaman form registrasi

>> Kita contek template yang sudah diberi bootstrap, klo kita punya template lain,
silahkan
gunakan. Kalau kita scroll ke bawah, cari yang namanya examples. Klo kita masuk
ke themes
itu adalah versi berbayarnya

>> Klo kita klik examples ini adalah contoh2 yang membuat kita bisa bikin project
secara
cepat. Kita scroll ke bawah cari sign-in. Dan kedepannya kita juga akan gunakan
template
dashboard dari bootstrap ketika kita udah masuk ke bagian dashboardnya

>> Klo kita download examplesnya, kita akan mendownload semua contoh yang ada coba
kita
download semua templatenya, kita simpen di direktori sesuai keinginan.

>> Setelah itu kita extract, zip dihapus, klo kita lihat isinya akan menjadi
banyak. Yang
kita butuhin hanya bagian sign-in. Nanti kita pake index.html, dan kita copykan
sedikit
cssnya

>> Kita kembali ke kodingan kita dlu, kita masuk ke halaman navbar, ada di
Resources/view/
layout/partials/navbar, tapi kalau mau langsung aja, caranya ctrl+p lalu ketik
navbar,
kita pilih file yang kita cari

>> Kalau sudah kebuka, lalu kita tambahkan link di kanan atas untuk login, ini
adalah teknik
nya bootstrap, jadi kita bikin ul satu lagi. kan kita sebelumnya punya satu ul
untuk
membuat yang sebelah kiri, kita kasih class navbar-nav untuk membari tanda klo
itu bagian
dari navbar

>> Lalu di dalam tagnya kita bikin li, dikasih class nav-item, lalu di dalamnya
dikasih tombol
dengan menggunakan tag a, hrefnya akan mengarah ke /login, untuk sekarang kita
belum punya
routes dan controllernya, biarkan dlu. di tag a nya kita kasih atribut class
nav-link
 >> Baru di dalam tag a kita tulis login, navigasinya sudah ada, tapi dia disebelah
kiri. Kalau
pingin bikin disebelah kanan, kita kasih class baru di ulnya ms-auto. ms ini
adalah
margin start atau margin kirinya dibikin auto supaya dia geser ke kanan

>> Supaya lebih keren lagi, kita kasih icon untuk hiasan. Kita cari di bootstrap
dengan nama
icons. Nanti kita diarahkan ke icons, lalu kita klik link install, kita akan
pakai yg cdn
kita copy aja yang disimpan di head, yang ada tag link

>> Kita simpan di layout kita, kita buka main.blade.php, kita akan simpan di bawah
bootstrap
css.
Misal :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.7.2/font/bootstrap-icons.css">

>> Jadi kita ambil langsung dari CDN nya, kalau sudah kita save, sekarang kita
pakai. Kita
cari dlu icon yang mau kita gunakan iconnya adalah gambar panah ada kotaknya,
namanya
adalah box arrow

>> Kita bisa cari logo sesuai keinginan kita, kita klik iconnya, kita klik syntax
icon font
untuk di copy, pindahkan ke depan tulisan login, jika sudah kita save. Kita
lihat di
web browser, maka iconnya akan muncul

>> Kalau di klik masih error, karena belum punya routesnya, sekarang kita bikin
dlu routesnya
file navbarnya bisa kita close, kita buka routes

>> Lalu kita bikin di paling bawah untuk login dengan mengetikkan :
Route::get('/login', [LoginController::class, 'index']);

>> Setelah itu kita bikin controller, caranya kita ketik php artisan
make:controller
LoginController di terminal atau, kita pake pluggin dengan cara tekan
ctrl+shift+p,
lalu ketikkan artisan:Make Controller, lalu pilih, lalu tulis nama
controllernya apa

>> Kita kasih LoginController, lalu akan ditanya mau tipe controller apa, apakah
basic,
resource atau API, kita pilih yang Basic, lalu enter, klo sudah, otomatis
dibuatkan di
dalam controller

>> Kita balik dlu ke route, di tulisan LoginController kita klik kanan pilih
import all
classes, untuk mengimport controller login. Import ini kalau kita lakukan di
routes itu
pasti berhasil

>> Ada kalanya kalau kita butuh use, trus kita import gk akan jalan, karena
namespacenya
gk sesuai. Untuk yang model, kita lihat di baris use model, karena kita gk lagi
panggil
model post dan model usernya, redup, artinya gk dipake, sebaiknya klo gk
dipake, mending
kita hapus saja

>> Kalau sudah kita masuk ke login controller bikin method yang namanya index,
jadi kita bikin
public function index(){ lalu di dalamnya kita akan kembalikan view nanti
viewnya kita kasih
nama index dan biar lebih rapih, kita akan simpan ke dalam folder2 terpisah
nantinya

>> Jadi nanti kita arahkan ke folder login. lalu kita bikin file namanya
index.blade
Misal :
public function index()
{
return view('login.index');
}
}

>> Biasanya, satu controller, merepresentasikan satu folder. Dan ada data yang mau
dikirimin
kita tinggal bikin array yang berisi title, karena di layout kita, titlenya
dikirim dari
controller
Misal :
public function index()
{
return view('login.index', [
'title' => 'Login'
]);
}

>> Ketika kita refresh, masih error, tapi errornya sudah berubah. Errornya viewnya
gk ada,
tapi routesnya ada. Sekarang kita bikin viewnya. Kita bikin folder baru namanya
login,
di dalamnya kita bikin file baru namanya index.blade.php

>> Di view index ini, kita akan extends view main kita dengan menuliskan
@extends() lalu
arahkan ke layouts.main, lalu kita bikin section yang namanya container, lalu
kita tutup
dengan endsection
Misal :
@extends('layouts.main')
@section('container')

@endsection

>> Di dalam sectionnya kita ambil dari view login bootstrap yang kita download,
kita drag
and drop file htmlnya kita taro di new tab di visual studio code

>> Di file tersebut, kita copas isinya, kita copy tag main, cara gampangnya, di
baris tag
 main buka ada panah di samping baris nomornya, kita klik panahnya, lalu kita
blok ctrl+c

>> Setelah itu, kita akan simpan di dalam section, kita atur tag2nya, supaya
bener. Jika
sudah, kita cek di web browser. Kita refresh, masih ada yang error karena ada
variable
active

>> Karena di navbar, klo kita buka ada variable active, kita kopykan saja, supaya
variable
activenya nyala, paste ka tag a untuk login, kita ganti dengan login

>> Jangan lupa kita kirim juga, active di logincontroller. jadi ada active dengan
nilai login
Misal :
<li class="nav-item">
<a href="/login" class="nav-link {{ ($active === "login") ? 'active' :
'' }}">
<i class="bi bi-person-circle px-2"></i>Login</a>

>> Jika di refresh di browser, sekarang login sudah active, karena sekarang kita
ada di login
kita akan memperbaiki tampilannya. Sebenernya memperbaiki tampilannya itu
gampang, karena
kita udah punya cssnya di folder yang sudah kita download.

>> Kita drag and drop saja filenya ke vscode menjadi tab baru. Yang kita butuhin,
kita copas
css untuk style form ke dalam file css yang akan kita bikin

>> Kita bikin file css punya kita sendiri, jadi kita buka folder public, di folder
css. Kita
sudah punya file style.css, kita timpa syntaxnya, dengan copasan kita dari form
sign in
sampe bawah
Misal :
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}

.form-signin .checkbox {
font-weight: 400;
}

.form-signin .form-floating:focus-within {
z-index: 2;
}

.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
 margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

>> Kita save, kalau sudah tinggal kita panggil di main

Misal :
{{-- My Styles --}}
<link rel="stylesheet" href="/css/style.css">

>> sign-in.css kita hapus, tetapi style.css nanti kita akan tambahkan style.
Sekarang ketika
di cek di web browser, formnya sudah mengecil, karena max-width nya 330px.
Sebenernya ini
bisa kita akalin

>> Jadi kita bisa gk pake ini, jadi nanti kita mau pake yg resposivenya aja, kita
bisa hapus
baris 1 sampai baris 6. Lalu checkbox, karena kita gk pake remember me, ini di
hapus
Save. Sekarang kita balik ke index

>> Di atas main kita bikin class row, di dalemnya kita bikin kolom, mau dikasih
medium boleh
mau dikasi large boleh, ini akan mengatur responsivenya. md artinya medium.
Medium di
bootstrap jaraknya antara 1-12, kita pilih ukurannya 5 agar sedang ukurannya
Misal :
<div class="row">
<div class="col-md-5">

</div>
</div>

>> Setelah itu, mainnya, kita masukkin ke dalem tag class col, caranya, kita drag
dlu, boleh
pindahinnya dengan menekan alt+arrow atas

>> Sekarang klo kita lihat hasilnya, lebarnya menyesuaikan apa yang kita tulis di
vsc. Klo
masih lebar kita ganti dengan 4. Tapi sekarang dia mepet ke kiri, karena magrin
autonya kita hilangkan. Untuk bikin dia ke tengah

>> Kita bisa bikin rownya, karena dia flex box kita kasih justify-content-center,
supaya
semua yang ada di dalemnya pindah ke tengah
Misal :
<div class="row justify-content-center">
<div class="col-md-4">

>> Selanjutnya kita edit dlu isinya, kita scroll, tag formnya akan kita isi ketika
kita
membuat login, tapi karena kita mau bikin registrasi dlu, ini kita abaikan.
Image gk kita
butuhin, klo kita mau bikin logo silahkan

>> Lalu h1 mau kita simpan di luar saja dari tag form. Supaya h1nya di tengah kita
kasih
 text-center di classnya, lalu isi dari h1 nya tulis please login

>> Kita akan hapus fitur remember me nya. Lalu buttonnya kita ubah dari sign in
jadi login

>> Terus copyrightnya kita hapus. Kita ingin di bawah tombolnya kita bikin link ke
halaman
registrasi. Kita tulis buttonnya di luar formnya aja, karena bukan merupakan
bagian dari
form

>> Kita bikin tag small supaya hurufnya kecil aja, kita tulis di dalem tagnya Not
registered?
lalu di dalam tag small kita kasih tag a di dalamnya kita tulis register now.
kasih hrefnya
mengarah ke halaman register, di smallnya kita kasih class text-center agar
tulisannya
berada di tengah
Misal :
<small>Not registered? <a href="/register">Register Now!</a></small>

>> Jika kita beri class text-center di dalam tag smallnya, maka tidak bisa
diarahkan ke center
kerena displaynya inline

>> Klo mau ke tengah kita bikin tagnya block dlu dengan memberi class d-block.
Setelah itu kita
kasih margin-top biar gk terlalu mepet
Misal :
<small class="d-block text-center mt-3">Not registered?
<a href="/register">Register Now!</a></small>

>> Klo misalkan mau ganti2 stylenya silahkan, ganti di stylenya, jadi sekarang
cukup. Jadi ini
hanya untuk patokan ketika kita bikin registrasi. Karena yang mau kita kerjakan
registrasi

>> Sekarang ketika kita klik register, maka akan error, kita butuh controller dan
juga viewnya
jadi kita bikin lagi controller, bisa dengan menekan ctrl+shift+p kita ketikan
artisan: make
controller lagi, kita bikin namanya register controller

>> Tipenya basic, yang nanti isinya kita punya index juga untuk register. Jadi
kita bikin
function dengan nama index di register controllernya. di dalamnya berisi mirip
sama login
Kita kasih data ada title, dan juga active register. Baru setelah itu kita
bikin routesnya
Misal:
public function index()
{
return view('register.index', [
'title' => 'Register',
'active' => 'register'
]);
}

>> Kita buka file web.phpnya untuk membuat routes register. Kita copy aja syntax
routes login
ganti namanya menjadi register.
Misal :
Route::get('/register', [RegisterController::class, 'index']);

>> Jika sudah, kita cek browsernya maka sudah ada error klo view registernya gk
ada, setelah
itu kita bikin folder baru dengan nama register, lalu di dalamnya ada file
namanya
index.blade.php

>> Isi dari filenya kita copas isi dari login, simpen di index untuk register.
Setelah itu
kita edit, kita ganti h1nya menjadi registration form, ganti class yang
membungkus tag
main nya dengan ukuran md-5, untuk lebih panjang

>> Ganti nama class mainnya, bukan form signin tapi form-registration. Sekarang
kolom email
address dan password jadi error, karena di stylenya, cuman untuk class form-
signin.
Sedangkan kita punya form-register

>> Tab login dan navbar kita close dlu. Jadi ceritanya kita bikin isi dari formnya
banyak.
Jadi kita tahu user kita itu punya beberapa field, klo kita buka mysql kita,
kita cek
kembali tabel users kita

>> Klo kita cek, yang mau kita isi itu ada nama, username, email, password. 4 aja,
sisanya
kita abaikan dlu. Remember, karena kita gk pakai fitur remember me. Created_at,
sama
updated_at itu akan otomatis terisi. Email_verified_at itu kita akan abaikan

>> Karena kita gk akan jalanin fungsi verifikasi. Jadi ada 4, kita mulai dari nama
dlu. kita
ke file index untuk register, kita copy div untuk email. Kenapa dipilih div
dengan class
form-floating. Karena di bootstrap itu, kita bisa pakai fitur klo kolomnya di
klik. Nama
dari kolomnya akan melayang

>> Kita ganti typenya menjadi text, kasih atribut name yang berisi name juga. Lalu
idnya kita
ganti value dari id dan fornya menjadi name, tulisan email addressnya kita
ganti jadi
name. Placeholdernya juga kita ganti jadi Name
Misal :
<div class="form-floating">
<input type="text" name="name" class="form-control" id="name"
placeholder="Name">
<label for="name">Name</label>
</div>

>> Lalu setelah name, ada username. Jadi kita duplikasi saja input namenya di
bawah. Kita ganti
name, id, placeholder label fornya username dan isi dari labelnya username
 >> Lakukan hal yang sama untuk email, kecuali placeholdernya. Untuk password,
tipenya password
kita kasih namenya password, id dan label fornya password, placeholdernya
password

>> Jika sudah, kita cek di web browser, maka kolom sudah ada, cuman nempel. Kita
bisa bikin
supaya ada jaraknya dengan menggunakan mt-3(margin-top), tapi klo pengen senada
dengan
halaman login, kita bisa akalin supaya gk ada border-radiusnya

>> Caranya kita bikin semuanya gk ada radiusnya. kita buka style, lalu kita kasih
style di
paling bawah untuk class form-registration semua inputnya, semua input yang ada
di dalam form
registration, itu kita bikin agar border-radiusnya itu 0
Misal :
.form-registration input {
border-radius: 0;
}

>> Sekarang jadi lancip semua. Selanjutnya yang kita butuh agar melengkung, hanya
yang paling
atas dan paling bawah aja, sisanya biar nempel, caranya ini bisa pakai classnya
bootstrap

>> Kita cari input yang paling pertama kita kasih class namanya rounded-top, jadi
atasnya aja
yang rounded. Lalu scroll cari tag input yang paling bawah, kita kasih class
rounded-bottom

>> Jadi di formnya kelihatan gabung tiap kolom, tapi sebenaarnya ini garisnya
gabung, jadi
kelihatan tebal, klo kita kurangin, kita kasih marginnya -1, itulah kenapa klo
kita lihat
di stylenya, ada untuk form margin-bottom: -1px;

>> Ini bisa kita kasih semuanya, semua input margin-bottom: -1px; supaya nempel
semua. Paling
tinggal kita benerin yang paling akhir. Klo sudah kita ke index registernya,
kita kasih
buttonnya mt-3 untuk membuat margin top

>> Ganti isi dari tag buttonnya, menjadi register, lalu tulisan small dibawahnya,
kita ganti
Already registered?, tag a nya kita kasih login dan arahkan ke route login
Misal :
<button class="w-100 btn btn-lg btn-primary mt-3"
type="submit">Register</button>
</form>
<small class="d-block text-center mt-3">Already registered?
<a href="/login">Login</a></small>

>> Kita atur responsivenya untuk semua device, caranya bisa kita ganti class di
div yang
membungkus tag mainnya, yang awalnya md-5 untuk medium, kita ganti jadi lg-5