Setelah diartikel sebelumnya kita belajar tentang sistem Register, sekarang kita akan membaut Sistem Login dan Logout pada Laravel. Sistem ini merupakan lanjutan dari Sistem Register yang kemarin sudah kita selesaikan.
Login dan Logout merupakan Fitur yang sering sekali ada di Web App. Login dan Logout ini akan sangat berguna kedepannya. Disini akan aku jelaskan Fitur ini melanjutkan dari Fitur Register pada Artikel Belajar Laravel 8 #10 : Sistem Register pada Laravel.
Pembuatan Sistem Login dan Logout pada Laravel
Nah, karena kita melanjutkan artikel sebelumnya, kita tidak harus melakukan Proses instalasi Laravel atau pun setting Database. Kita akan lanjut untuk buat Controller, tampilan, dan Route saja.
Setting Controller
Disini, kita akan membuat Controller baru khusus untuk Login dan Logout. Controller ini akan berisi 3 Fungsi yang berbeda.
- Fungsi pertama untuk menampilkan tampilan Login, akan kita beri nama
index() - Fungsi kedua adalah untuk autentikasi Login kita, akan kita beri nama
authenticate() - Fungsi ketiga adalah untuk Logout, jadi kita beri nama
logout()
Nah, sekarang kita buat LoginController terlebih dahulu, setelah itu syntax nya kurang lebih seperti dibawah ini
File LoginController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class LoginController extends Controller
{
public function index()
{
return view('login', [
'title' => 'Login'
]);
}
public function authenticate(Request $request)
{
$credentials = $request->validate([
'email' => ['required', 'email:dns'],
'password' => ['required']
]);
if (Auth::attempt($credentials)) {
$request->session()->regenerate();
return redirect()->intended('/dashboard');
}
return back()->with('loginError', 'Login failed');
}
public function logout(Request $request)
{
Auth::logout();
request()->session()->invalidate();
request()->session()->regenerateToken();
return redirect('/login');
}
}
Bisa dilihat dari Syntax diatas terdapat 3 Fungsi yang berbeda. Bisa diperhatikan ada Fungsi index(), authenticate(), dan logout().
Kalau kalain perhatikan di fungsi authenticate(), Fungsi ini melakukan sebuah validasi dari Email dan Password yang di inputkan oleh User saat Login, nah didalam fungsi login() ini, kita menggunakan session()->regenerate(), artinya kita membuat session untuk Akun yang Login di Website kita.
Terakhir ada fungsi logout(), sudah jelas fungsi ini digunakan untuk Keluar/logout. Apabila diperhatikan syntax-nya, fungsi ini “mematikan” session yang sedang berjalan, oleh karena itu User yang login bisa keluar / logout.
Setting Routes
Setelah kita selesai membuat LoginController, sekarang saatnya kita setting untuk Route kita di File web.php. Di-route kita ini kita harus menambahkan beberapa syntax yang digunakan untuk mengarahkan ke LoginContrroller kita. Kurang lebih seperti ini syntax nya.
use App\Http\Controllers\LoginController;
Route::get('/dashboard', function () {
return view('index');
});
Route::get('/login', [LoginController::class, 'index'])->name('login')->middleware('guest');
Route::post('/login', [LoginController::class, 'authenticate']);
Route::post('/logout', [LoginController::class, 'logout']);
Nah, disana kita membaut beberapa syntax. Yang harus diperhatikan pertama adalah Route::get('/dashboard'), ini digunakan untuk tampilan saat kita login nanti.
Selanjutnya ada 3 syntax yang mengarah langsung ke LoginController kita. Ada Route::get('/login') untuk menampilkan tampilan Login, Route::post('/login') untuk mengirimkan Data Login kita, dan Route::post('/logout') untuk kita Logout.
Setting views
Hal terakhir yang harus kita setting di Login dan Logout pada Laravel ini adalah mengatur tampilan atau views. Disini ada beberapa tampilan yang akan kita atur, Pertama adalah tampilan untuk Login, yang kedua adalah tampilan untuk User misal User ini telah Login.
Kita akan buat tampilan Login terlebih dahulu, kurang lebih seperti ini syntaxnya disini kita menggunakan template dari Bootstrap yang bisa kalian lihat disini https://getbootstrap.com/
File login.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Login</title>
</head>
<body>
<div class="row justify-content-center" style="margin-top: 150px">
<div class="col-lg-6">
<main class="form-registration">
<h1 class="h3 mb-3 fw-normal text-center">Login</h1>
<form action="/login" method="POST">
@csrf
<div class="form-floating">
<input type="email" class="form-control " name="email" id="email" required
value="{{ old('email') }}" placeholder="name@example.com">
<label for="email">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control rounded-bottom" name="password" id="password" required
placeholder="Password">
<label for="password">Password</label>
</div>
<button class="w-100 btn btn-lg btn-danger mt-3" type="submit">Login</button>
</form>
<small class="d-block mt-3">Doesn't have an account? <a class="text-danger" href="/register">
Register
Now!</a></small>
</main>
</div>
</div>
<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>
</body>
</html>
Nah kalau Login ini ditampilkan, kurang lebih akan seperti ini tampilannya
Setelah itu, kita setting tampilan untuk User yang sudah Login, kita buat sederhana saja, jadi Nanti ada tulisan Welcome User, lalu tombol untuk Logout.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
<div class="container mt-5">
<h1 class="display-4">
Welcome {{ auth()->user()->name }}
</h1>
<form action="/logout" method="POST">
@csrf
<button class="btn btn-danger">Logout</button>
</form>
</div>
<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>
</body>
</html>
Nah, kalau diperhatikan terdapat syntax {{ auth()->user()->name }}. Nah syntax ini adalah syntax yang digunakan untuk menampilkan Nama dari User yang Login. Kurang lebih tampilannya akna seperti ini.
Nah, dengan ini kita sudah selesai membuat Sistem Login dan Logout pada Laravel.
Kesimpulan
Nah di artikel ini kita sudah selesai membahas Sistem Login dan Logout pada Laravel. Sistem Login dan Logout pada Laravel ini juga melengkapi Sistem Register yang kemarin sudah kita buat.
Oh iya, kalau mau melihat sistem Register bisa klik disini ya
Sampai disini artikel Login dan Logout pada Laravel ini, semoga bermanfaat bagi kita semua.
bg, kl logout nya terakses lewat get gimana? biar otomatis not found gmn bg?
Ini cara kerja sessions nya gimana?