Anda di halaman 1dari 11

>> Sekarang kita akan mengaplikasikan fitur loginnya, sehingga user yang sudah

melakukan
registrasi bisa masuk ke dalam aplikasi kita. Sambil nanti kita akan pelajari
fitur
middleware yang ada di dalam laravel 8

>> Kita langsung masuk ke materinya. Jadi sekarang kita buka aplikasinya, kita
akan jalankan
fitur login kita, tapi sebelum kita koding, kita lihat dlu dokumentasi laravel
mengenai authenticaton. Bagaimana laravel menangani fitur login di aplikasi
kita

>> Silahkan ketik di dokumentasinya dengan nama authentication. Kalau kita sudah
masuk ke
dokumentasinya, kita bisa baca dokumentasinya. Tapi intinya sebetulnya laravel
menyediakan
yang namanya starter kit

>> Jadi ada semacam plugin atau aplikasi yang khusus menangani otentikasi. Ada
yang namanya
laravel breeze. Dan sebetulnya ada satu lagi namanya laravel jetstream. Jadi
dengan
menggunakan aplikasi itu sebetulnya kita bisa dengan mudah menangani masalah
otentikasi
ini

>> Mulai dari registrasi user, login, bahkan dia ada fitur verifikasi lewat email,
ada
remember me ada forgot password, pokoknya semua yang berhubungan dengan
otentikasi dan
otorisasi sudah ditangani oleh starter kit ini.

>> Kita bisa pelajari aja lewat link dengan nama Laravel Breeze. Itu nanti bisa
diinstal
lewat composer, tapi UI nya dibuat menggunakan tailwind. Kita tidak akan
menggunakan
starter kit, kita mau pake yang versi manualnya aja, klo kita scroll ke bawah

>> Ada bagian yang namanya Manually Authenticating Users. Disini kalau misalnya
kita gk
pakai application starter kitsnya tidak usah khawatir, laravel punya sebuah
authentication service lewat facade

>> Facade ini seperti salah satu library di laravel yang namanya Auth. Nanti kita
sudah
dipermudah dalam pengelolaan session untuk loginnya. Jadi kita cukup panggil
facade
nya di atas controller kita, lalu kita nanti pakai apa yang kita butuhin

>> Jadi kita coba pelajari dari dokumentasinya, jadi kita butuh nanti method yang
namanya
authenticate, lalu nanti kita lakukan validasi terhadap form login kita, lalu
nanti
kita jalankan sesuatu yang disebut dengan attempt

>> Untuk ngecek apakah login yang dimasukkin user bener atau tidak, kalau bener,
arahkan
kemana dan kalau gagal arahkan kemana, jadi ini yang akan kita coba buat untuk
video
kali ini

>> Sekarang kita kembali ke kodingan, kita buka file view index untuk login.
Selanjutnya kita
juga akan buka controller loginnya. Kita scroll file index login, kita akan
perbaiki
tag formnya

>> tag form kita beri atribut action untuk mengarah ke routes login, tetapi
metodenya
adalah post. Jangan lupa setiap kita buat form, untuk pengamanannya, kita buat
@csrf,
supaya nanti formnya mengirimkan token csrf, supaya gk dibajak

>> Jika sudah, lalu kita perbaiki input tipenya. Jadi ceritanya kita maunya
ngirimnya email
dan password. Tambahkan atribut name tiap kolom tag input dengan nama yang
sesuai. id
juga kita akan ganti sesuai dengan value dari atribut namenya

>> Lalu supaya otomatis begitu kita masuk ke halaman login, kolom email langsung
active,
kita kasih di tag inputnya, atribut autofocus. Jadi klo kita refresh di
browser. Dia
akan otomatis ke kolom pertama untuk langsung diisi. Jangan lupa kita kasih
required
supaya menjaga minimal harus diisi kolomnya saat kita klik tombol submit
Misal :

<form action="/login" method="post">

<input type="email" name = "email" class="form-control" id="email"


placeholder="name@example.com" autofocus required>

>> Selanjutnya kita masuk ke password, kita buat atribut name pada tag inputnya,
idnya
ganti dan kita kasih required juga

>> Selanjutnya kita bikin dlu routesnya karena kita butuh untuk route login post.
Kita buka
file web.php. Buat route di paling bawah, copas route di atasnya. Lalu kita
ubah sedikit
Misal :
Route::post('/login', [LoginController::class, 'authenticate']);

>> Selanjutnya kita buatkan function di login controller dengan nama authenticate.
Sebetulnya
bebas, mau ganti jadi login atau store. Tapi karena kita mau ngikutin
dokumentasi laravel
kita tulis juga authenticate, seperti yang ada di dokumentasi

>> Sekaran kita balik ke controller, kita buat method baru dengan nama
authenticate. Karena kita
mau pakai kelas Auth, di atasnya kita includekan Auth
Misal :
use Illuminate\Support\Facades\Auth;

>> Di fungsinya ada request kita bikin variable, jadi kita boleh kasih parameter
Request
$request. Yang pertama akan kita lakukan di fungsinya, kita akan validasi dlu
email dan
passwordnya. Jadi di fungsinya kita panggil request, lalu kita validate() kasih
array
di dalamnya

>> Yang pertama adalah email, kita mau required, lalu di adalah email, jadi harus
valid email
beserta nama dnsnya, seperti .com, atau .apa. Lalu juga password kita kasih
required juga

>> Setelah itu kita coba kirimkan validasi errornya, jadi kalau error akan tampil
apa, misal
ketika emailnya formatnya salah. Untuk mengujinya, kita kasih syntax di
bawahnya
dd('berhasil login!');

>> Kalau berhasil login akan muncul tulisan di dd()


Misal :
public function authenticate(Request $request)
{
$request->validate([
'email' => 'required|email:dns',
'password' => 'required'
]);

dd('login berhasi!');
}

>> Kalau belum, validasinya akan jalan. Coba kita lihat di web browsernya, ketika
emailnya
salah dan passwordnya benar, ketika klik tombol login, tidak terjadi apa2.
Kalau misalnya
emailnya sudah benar dan password benar, maka berhasil login

>> Sekarang kita akan kasih di view index login pesan gagal, sama seperti index
register.
Jadi kita akan kasih class is-invalid, tapi dibungkus @error. Jadi kalau ada
error di email
Yang password gk usah, karena password biasanya harus diisi lagi. Paling kita
akan kasih
tulisan klo ada error
Misal :
<input type="email" name = "email" class="form-control @error ('email')
is-invalid @enderror" id="email" placeholder="name@example.com"
autofocus required value="{{ old('email') }}">
<label for="email">Email address</label>
@error('email')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror

>> Jika sudah, ketika kita cek di web browser, dengan email yang salah, maka ada
pesan
kesalahan, dan nilai lamanya tetap ada. Kalau berhasil validasi, maka belum
tentu bisa
login. Siapa tau emailnya belum terdaftar atau passwordnya salah
>> Ini baru kita lakukan yang namanya attempt, jadi jika percobaan login yang
dilakukan oleh
variable yang melakukan validasi email dan password, itu berhasil, kita akan
pindahkan ke
sebuah halaman. Tapi kalau gagal, kita akan kembalikan lagi ke halaman login
beserta
pesan errornya

>> Pesan error yang akan kita kirim itu gk akan "email belum terdaftar atau
passwordnya salah"
walaupun itu sepertinya pesannya membantu usernya klo passwordnya salah, tapi
itu juga
akan menjadi celah keamanan

>> Karena user sekarang jadi tahu, klo misalnya user berniat jahat, user jadi tahu
email
tersebut sudah atau belum terdaftar di sebuah sistem, jadi minimal orang tahu
emailnya
Sebaiknya kita jangan beri sedikitpun clue

>> Walaupun passwordnya gk ketahuan, tap setidaknya, begitu ada pernyataan


password salah,
artinya emailnya udah ada. Jadi kita kasih tahu bahwa loginnya gagal

>> Caranya kita simpan dlu $request ke dalam variable bernama credentials, namanya
bisa bebas
klo sebelumnya kita validated data, klo untuk insert user baru, sekarang
namanya credential
gpp

>> Lalu sekarang kita cek dengan seleksi kondisi, klo kita jalankan class Auth::
lalu menggunakan
function attempt(), dari si credentials, lalu di dalam seleksi kondisinya,
sessionnya di
regenerate()
Misal :
public function authenticate(Request $request)
{
$credentials = $request->validate([
'email' => 'required|email:dns',
'password' => 'required'
]);
if (Auth::attempt($credentials)) {
$request->session()->regenerate();
}

>> Kita baca di bagian atas, alasan melakukan regenerate pada session. Karena
untuk
menghindari teknik hacking yang namanya session fixation. Session fixation
adalah
bagaimana cara seseorang masuk ke dalam celah keamanan sistem menggunakan
session

>> Jadi pura2 masuk ke dalam session yang sama sebelumnya. Gk perlu login lagi,
karena dia
sudah menggunakan session yang sama. Untuk menghindari ini, kita generate ulang
sessionnya
Baru selanjutnya kita redirect ke routes baru
>> Misalnya langsung masuk ke dalam dashboard, kita lihat di dokumentasi laravel,
kita
menggunakan intended(), sebuah method yang disediakan laravel, yang akan
meredirect
usernya ke url, sebelum melewati sebuah authentication middleware

>> Jadi kenapa kita gk langsung tulis redirect kemana, melainkan lewat intended,
supaya
melewati middlewarenya. Kita tulis di function authenticate, di dalam seleksi
kondisi
mereturn redirect(), lalu kasih intended(), lalu kasih misalnya kita ingin
masuk ke
dashboard

>> Sekarang kita belum punya dashboardnya, kita nanti akan bikin berikutnya.
Anggaplah jika
passwordnya salah, maka kita akan lakukan yang di bawah, kita akan return
dengan menggunakan
method back(), untuk balik lagi ke halaman login.

>> Sambil kita kirimkan errornya dengan menggunakan method withErrors(), karena
ini error
yang akan kita bikin sendiri, atau kalau mau, kita gk pakai, withErrors(),
karena kalau
pakai itu nanti dia masuk ke dalam variable error

>> Tapi klo kita mau dia masuk ke dalam flash message, kita cukup kasih with(),
seperti yang
sudah kita bahas. Misalkan nama pesan errornya yang akan menjadi variable kita
namakan
loginError, pesannya adalah misalnya Login failed
Misal :
if (Auth::attempt($credentials)) {
$request->session()->regenerate();
return redirect()->intended('/dashboard');
}

return back()->with('loginError', 'Login failed!');

>> Kita gk ngasih tau apa yang salah, apakah usernamenya, emailnya, maupun
passwordnya,
pokoknya login failed, sehingga di index loginnya, kita bisa tambahkan satu
lagi seleksi
kondisinya, kita copas saja seleksi kondisi untuk menampilkan pesan success
register

>> Kita ubah kalau misalnya di session ada loginError, maka tampilkan alert-
danger, jadi dia
bukan success tapi danger, dan tampilkan pesan errornya di dalam loginErrornya
Misal :
@if (session()->has('loginFailed'))
<div class="alert alert-danger alert-dismissible fade show"
role="alert">
{{ session('loginFailed') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
@endif
>> Kita coba di browser dengan mengetikkan password yang salah, misalkan kita tahu
di database
kita punya user dan password yang sudah kita tulis di registrasi. Kita isi,
tetapi password
yang dimasukkan salah. Kita sudah bikin validasi dan juga bikin otentikasi
gagal. Dan
usernya gk tau kesalahannya emailnya atau passwordnya

>> Maka akan menampilkan pesan kesalahan, kalau ditulisnya benar, maka akan
merequest route,
yang akan kita bikin. Dan di dalam sessionnya, kita sudah terdaftar login,
laravelnya
tahu, kita sekarang sudah terotentikasi

>> Tapi kalau mau ada dashboardnya, kita bikin controller untuk dashboard bisa
dengan
menggunakan ctrl+shift+p, kita ketikkan artisan:make controller, tulis nama
controllernya
dan pilih basic

>> Jika sudah kita bikin function index yang mereturn view index. Ini untuk
sementara aja, karena
kita belum masuk ke bagian dashboard, anggap aja kita punya view yang namanya
dashboard.index

>> Kita bikin folder namanya dashboard, bikin file di dalamnya namanya
index.blade.php, di dalam
filenya kita isi tag h1 dlu. Lalu ke bagian route di file web.php kita bikin
route mengarah
ke dashboard menggunakan method get, lalu menggunakan controller
dashboardcontroller, dan
mengakses function index

>> Maka kita sudah masuk ke dashboard, kelihatan loginnya sudah ok, tapi masih
banyak yang
harus kita perbaiki, contohnya adalah ketika kita balik lagi ke halaman login,
klo kita
ketik di urlnya mengarah ke login, maka halaman login masih tampil

>> Ini aneh, karena kita sudah login, klo sudah login harusnya gk boleh masuk ke
halaman
login, lalu gk juga gk punya cara untuk logout, itu akan kita tambahkan. Jadi
kita pengen
kalau misalkan udah login, tombol login udah gk ada

>> Jadi klo kita sudah masuk di link manapun, di halaman front endnya, harusnya
udah gk ada,
karena kita sudah login, kita ingin ada tulisannya, loginnya digantikan dengan
welcome back
ryan dhika, lalu kita klik, nanti ada dropdownya, kita bisa pilih mau masuk ke
dashboard,
atau logout

>> Untuk bisa melakukan itu, kita harus paham dlu mengenai sesuatu yang disebut
dengan
middleware authentication. Apa itu middleware, kita caritahu di dokumentasi
laravel
dengan mengetik middleware
>> Kita masuk ke halamanya. Katanya Middleware menyediakan sebuah mekanisme yang
memudahkan
kita untuk melakukan inspeksi dan filtering HTTP request, jadi request kita di
filter
dlu sama middleware ini.

>> Contohnya laravel sudah menyertakan sebuah middleware di dalamnya


yang melakukan verifikasi apakah seorang user dari aplikasi kita sudah
terotentikasi atau
belum, jika belum, maka middleware ini akan melakukan redirect user tadi ke
halaman login
atau halaman yang kita inginkan nanti terserah kita

>> Tapi kalau sudah terotentikasi, nanti si middlewarenya memperbolehkan kita


untuk lanjut
masuk ke dalam aplikasinya. Jadi sebenernya middleware itu bisa kita pasang di
routes
kita

>> Routes kita tu dibaca gini, jika ada request ke url login misalnya yang
metodenya get,
jalankan class login methodnya index. Nanti kita bisa tempelin middlewarenya ke
route
login

>> Middleware akan berjalan sebelum masuk ke login, jadi ketika ada request login
yang
metodenya get, jalanin dlu middleware, udah middlewarenya jalan lanjut ke
ngakses controller
login

>> Jadi istilahnya itu dia ada di tengah2 antara mengakses halaman atau url dengan
mengakses
controllernya. Secara default, di dalam laravel itu, udah banyak middleware
yang udah
otomatis jalan

>> Klo kita scroll ke bawah di dokumentasinya ada yang namanya global middleware.
Jadi ada
middleware yang otomatis udah jalan setiap request HTTP kita dijalankan.
direktorinya
di app/Http/Kernel.php. Kalau kita buka isinya

>> Di dalamnya ada middlewarenya, jadi sytaxnya otomatis dijalankan. Klo kita
scroll lagi
di dalamnya ada namanya middleware group, klo kita scroll lagi ada
routeMiddleware

>> Ternyata auth sudah dijalanin, jadi auth bisa kita panggil ketika kita pengen
halaman
tertentu atau routing tertentu hanya bisa diakses oleh user yang sudah
terotentikasi. Ada
juga middleware yang kita ingin jalanin, ketika usernya belum terotentikasi

>> Masih banyak yang lain, cuma kita hanya fokus di auth dan guest. auth anggap
aja udah
login, guest ini tamu yang belum login

>> Contoh kita balik ke file web.php, kita pengen agar halaman login hanya bisa
diakses oleh
user yang belum terotentikasi, berarti guest, sedangkan dashboard hanya bisa
diakses oleh
user yang sudah terotentikasi, bararti auth, caranya kita bisa kasih -
>middleware('guest')
Misal :
Route::get('/login', [LoginController::class, 'index'])->middleware('guest');

>> Ini hanya bisa diakses oleh user yang belum terotentikasi, jadi sekarang klo
kita save,
balik ke web browser, kita klik login, harusnya gk bisa. Klo kita klik tombol
login, dia
akan error 404 not found, di urlnya kita di arahin ke home, karena defaultnya
home

>> Klo kita ingin ubah urlnya, kita bisa ubah di service provider, kita cari
app/providers/RouteServiceProvider, klo kita scroll ke bawah, defaultnya ke
halaman home

>> Kalau misalkan mau, kita bisa duplikat dlu kodenya untuk mengarah ke /, jadi
halaman home
kita adalah routenya, klo kita ke web browser, klo kita refresh lagi, dia akan
ke
halaman home

>> Kenapa gk bisa ke halaman login? karena kita udah login, bahkan tombol loginnya
harusnya
gk ada. Caranya sekarang kita balik ke file navbar. kita lihat tag li di navbar
untuk
login, tag ini hanya akan muncul ketika usernya belum login

>> Kerennya laravel disini, kita jadi punya sebuah directive di blades yang
namanya @auth
kalau kita mau ngecek apakah seorang user sudah login atau belum, kalau udah
login,
tampilin apa, klo belom login tampilin apa

>> Ada lagi @guest, klo guest tampilin apa, klo auth tampilin apa. Atau mau
digabung caranya
kita bikin @auth terus di tengah2nya kita tulis @else, jadi kalau belum login,
tampilin
taro di bawah @else
Misal :
@auth

@else
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="/login" class="nav-link {{ ($active ===
"login") ? 'active' : '' }}"><i class="bi bi-person-circle px-2"></i>Login</a>
</li>
</ul>
@endauth

>> Tapi klo udah login, tampilin di bawah @auth, kita akan menampilkan sebuah
dropdown, coba
kita cari dropdown di bootstrap, kita ketikan navbar, kita cari navbar yang ada
dropdownya
>> Kita copas syntaxnya, pindahkan ke bawah @auth, atau auth dan elsenya kita
masukkin
ke dalam ulnya, jadi yang kita butuhin cuman linya aja, lalu kodingan yang
dicopas,
pindahkan di bawah @auth
Misal :
<ul class="navbar-nav ms-auto">
@auth
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-
labelledby="navbarDropdown">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another
action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something
else here</a></li>
</ul>
</li>
@else
<li class="nav-item">
<a href="/login" class="nav-link {{ ($active ===
"login") ? 'active' : '' }}"><i class="bi bi-person-circle px-2"></i>Login</a>
</li>
@endauth
</ul>

>> Jika sudah Sekarang kita ganti yang ada tulisan di navbar kita ganti isi tag a
menjadi
Welcome back, nama user yang lagi login, kerennya laravel kita bisa gunakan
sebuah method
yang namanya auth(), dia udah tau semua data user yang lagi login

>> Kita kasih method user() lalu yang kita butuhin field name misalnya, jadi dia
langsung
ngambil nama user yang lagi login, lalu di dropdownya kita bisa tulis aja
listnya
My Dashboard, lalu kita butuh class dropdown-devider, untuk garisnya, baru di
bawahnya
logout
Misal :
Welcome back, {{ auth()->user()->name }}
</a>
<ul class="dropdown-menu" aria-
labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">My
Dashboard</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item"
href="#">Logout</a></li>
</ul>

>> Kita kasih dlu icon untuk logoutnya, kita cari di bootstrap icon, cari box
arrow right
karena keluar dari kotak. Untuk yang dashboard, iconnya kita cari aja namanya
layout
Misal :
<ul class="dropdown-menu" aria-
labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i
class="bi bi-layout-text-sidebar-reverse"></i> My Dashboard</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i
class="bi bi-box-arrow-right"></i> Logout</a></li>
</ul>

>> Untuk dashboard href mengarah ke /dashboard, untuk logout, kita gk akan bikin
pakai tag a
kita akan bikin pakai form. Cara jalankan logout, jadi untuk logout, kita butuh
form
karena jalaninnya harus ada csrf lagi, jadi kita butuh tag form di dalam logout

>> Isinya cuman button yang tipenya submit, yang classnya menyerupai button jadi
kita copas
class tag a untuk logout, supaya dia jadi link biasa, di dalamnya kita copas
syntax untuk
logout
Misal :
<li>
<form action="#">
<button type="submit" class="dropdown-
item"><i class="bi bi-box-arrow-right"></i> Logout</button>
</form>
</li>

>> Sekarang actionnya nanti mengarah ke logout, methodnya post, jangan lupa setiap
form butuh
@csrf, tinggal kita bikin logoutnya, berarti yang pertama adalah routesnya dlu
buka web
kita bikin route yang mengarah ke logout dengan method post, buka
loginController arahkan
ke method namanya logout
Misal :
<form action="/logout" method="post">
@csrf
<button type="submit" class="dropdown-
item"><i class="bi bi-box-arrow-right"></i> Logout</button>
</form>

Route::post('/logout', [LoginController::class, 'logout']);

>> Lalu kita bikin method di logincontroller dengan nama logout. Di dalamnya
isinya kita
lihat di dokumentasi laravel namanya authentication, kita scroll cari logging
out,
cara logoutnya tinggal kita panggil Auth::logout();, lalu invalidate session
supaya
gk bisa dipake, bikin baru sessionnya menggunakan method regenerateToken(),
baru
balikin ke halaman mana
Misal :
public function logout(Request $request)
{
Auth::logout();
$request->session()->invalidate();
$request->session()->regenerateToken();

return redirect('/');
}

>> Jika kita coba di web browser, maka navbarnya akan berubah menjadi login,
ketika kita
klik tombol login, dia akan mengarah ke halaman login, jika kita mengakses
dashboard
di url, maka bisa

>> Karena kita belum ngasih tahu di routesnya bahwa dashboard ini hanya bisa di
akses oleh
orang yang sudah login. Jadi kita kasih juga method middleware('auth'), dan
juga register
kita kasih middleware('guest')
Misal :
Route::get('/dashboard', [DashboardController::class, 'index'])-
>middleware('auth');
Route::get('/register', [RegisterController::class, 'index'])->middleware('guest');

>> Karena yang bisa mengakses halaman register hanya guest, klo udah login, harus
logout dlu
Kita coba masuk klo masuk ke dashboard lewat url, ada error namanya route login
no
define. Alasannya karena kita gk punya sebuah route yang namanya login

>> Kenapa harus login, klo kita cek ke app/http/middleware/authenticate. Di file


ini ada
defaultnya bahwa kalau ada user yang gk terotentikasi berusaha masuk ke halaman
yang
terotentikasi, maka redirect dia ke route yang namanya login

>> Route itu kita bisa kasih nama, atau di istilah laravel namanya named routes,
klo kita
cari di dokumentasi laravel. kita bisa kasih nama dengan cara ->name('nama
route'),
supaya dia gk berpatokan pada urlnya

>> Jadi urlnya apapun, asal namanya apa, kita bisa akses, hal ini juga sama, klo
misalnya
ada halaman yang gk boleh di akses, otomatis di arahin ke route login. Jadi
kita harus
kasih tahu dlu di routes kita, mana route loginnya
Misal :
Route::get('/login', [LoginController::class, 'index'])->name('login')-
>middleware('guest');

>> Jika kita cek di web browser, maka akan kembali ke halaman login. Jadi kalau
user iseng
ketik url dashboard, maka kembali ke halaman login, jadi harus login dlu. Kalau
udah login
maka bisa ke halaman dashboard

>> Kalau logout, kita kembali lagi ke halaman home

Anda mungkin juga menyukai