Pada tutorial ini akan membahas Cara membuat fitur Login Logout di Laravel 8, untuk laravel sudah tersedia beberapa library untuk kebutuhan authentifikasi, namun di sini hanya akan dibahas fitur login dan logout secara manual menggunakan library bawaan laravel authentication, bisa di cek referensi nya di https://laravel.com/docs/8.x/authentication, fitur login dan logout sendiri biasa digunakan dalam sebuah aplikasi untuk membatasi akses ke halaman tertentu, seperti jika membuat aplikasi blog, yang dapat mengelola dan mengakses halaman admin hanya user yang sudah melakukan Login ke aplikasi saja.
Sebelum mengikuti tutorial ini di pastikan anda telah mengikuti tutorial sebelumnya di website ini :
- Install Laravel versi 8 di Windows 10
- Cara Membuat Database di Laravel 8
- Generate Key Aplikasi di Laravel 8
- Cara Mengatur Zona Waktu Indonesia di Laravel 8
- Cara Mengatur Validasi ke bahasa Indonesia di Laravel 8
- Blade Templating di laravel 8
Berikut adalah Cara membuat fitur Login Logout di Laravel 8 :
Buka file routes/web.php dan dan siapkan script route seperti ini :
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LoginController;
use App\Http\Controllers\DashboardController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
//INDEX
Route::get('/', [LoginController::class, 'index'])->middleware('guest');
//AUTH MANUAL
Route::get('/login', [LoginController::class, 'index'])->name('login')->middleware('guest');
Route::post('/login', [LoginController::class, 'authenticate'])->name('login')->middleware('guest');
Route::match(['get','post'],'/logout', [LoginController::class, 'logout'])->name('logout');
//DASHBOARD
Route::resource('dashboard', 'DashboardController')->except(['show'])->middleware('auth');
Route::get('dashboard', [DashboardController::class, 'index'])->name('dashboard')->middleware('auth');
Penjelasan dari route di atas kita bisa lihat ada tambahan ->middleware(‘guest’) yang artinya semua user bisa mengakses halaman tersebut tanpa memiliki session, dan ->middleware(‘auth’) artinya hanya user yang sudah login saja atau user yang sudah punya session yang dapat mengakses halaman.
Middleware secara default sudah disediakan di dalam project laravel, Middleware merupakan sebuah Class khusus yang berperan sebagai “penengah” antara request yang masuk dengan Controller yang dituju. prinsip kerja nya mencegat request yang masuk untuk kemudian diproses terlebih dahulu sebelum diberikan kepada Controller yang dituju atau diarahkan ke Controller yang lain.
Tahap selanjutnya kita buat controller dengan nama LoginController.php dengan perintah ini di terminal :
php artisan make:controller LoginControllerseperti ini proses dan hasilnya :
buka file app/Http/Controllers/LoginController.php dan isikan dengan script di bawah ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
//MODEL
use App\Models\User;
class LoginController extends Controller
{
public function index()
{
//Tampilan index di dalam folder auth_manual
return view('auth_manual.index');
}
public function authenticate(Request $request)
{
//Validasi inputan
$credentials = $request->validate([
'email' => 'required|email|max:255',
'password' => 'required|min:8|max:255'
]);
//jika lolos validasi
if (Auth::attempt($credentials)) {
//buatkan session
$request->session()->regenerate();
//di arahkan ke dashboard
return redirect()->intended('dashboard');
}
//jika tidak lolos validasi maka tampil pesan login failed
return back()->withInput()->with('failed','Login Failed!');
}
public function logout(Request $request)
{
Auth::logout();
$request->session()->invalidate();
$request->session()->regenerateToken();
return redirect('/');
}
}
Lalu buat view di dalam folder resources/views/ dengan nama folder auth_manual dengan nama file index.blade.php, sebagai berikut :
Kita dapat mengisi file resources/views/auth_manual/index.blade.php dengan template yang telah di pasang sebelumnya di project laravel ini, di pastikan kita telah mengikuti tutorial sebelumnya tentang Blade Templating di laravel 8 , kita copy semua isi konten nya :
Buka file resources/views/auth_manual/index.blade.php dan paste kan script auth-login.html tadi, dan modifikasi seperti di bawah ini :
<!DOCTYPE html>
<!-- language -->
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- csrf -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title -->
<title>@yield('title','Login')</title>
<!-- favicon -->
<link rel="shortcut icon" href="{{ asset('') }}dist/assets/compiled/svg/favicon.svg" type="image/x-icon"/>
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/app.css">
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/app-dark.css">
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/auth.css">
</head>
<body>
<script src="{{ asset('') }}dist/assets/static/js/initTheme.js"></script>
<div id="auth">
<div class="row h-100">
<div class="col-lg-5 col-12">
<div id="auth-left">
<div class="auth-logo">
<a href="/"><img src="{{ asset('') }}dist/assets/compiled/svg/logo.svg" alt="Logo"></a>
</div>
<!-- pesan berhasil -->
@if(session()->has('success'))
<div class="alert alert-success alert-dismissible show fade">
<strong>{!!session('success')!!}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<!-- pesan gagal -->
@if(session()->has('failed'))
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>{!!session('failed')!!}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<!-- pesan error -->
@if(session()->has('error'))
<div class="alert alert-danger alert-dismissible show fade">
<strong>{!!session('error')!!}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<h1 class="auth-title">Log in.</h1>
<p class="auth-subtitle mb-5">Log in with your data that you entered during registration.</p>
<!-- start form login -->
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group position-relative has-icon-left mb-4">
<input type="email" name="email" class="form-control form-control-xl" placeholder="Email" autofocus>
<div class="form-control-icon">
<i class="bi bi-envelope"></i>
</div>
</div>
<div class="form-group position-relative has-icon-left mb-4">
<input type="password" name="password" class="form-control form-control-xl" placeholder="Password">
<div class="form-control-icon">
<i class="bi bi-shield-lock"></i>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block btn-lg shadow-lg mt-5">Log in</button>
</form>
<!-- end form login -->
<div class="text-center mt-5 text-lg fs-4">
<p class="text-gray-600">Don't have an account? <a href="#" class="font-bold">Sign
up</a>.</p>
<p><a class="font-bold" href="#">Forgot password?</a>.</p>
</div>
</div>
</div>
<div class="col-lg-7 d-none d-lg-block">
<div id="auth-right">
</div>
</div>
</div>
</div>
</body>
</html>Tahap selanjutnya kita buat controller dengan nama DashboardController.php dengan perintah ini di terminal :
php artisan make:controller DashboardControllerseperti ini proses dan hasilnya :
buka file app/Http/Controllers/DashboardController.php dan isikan dengan script di bawah ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DashboardController extends Controller
{
public function index()
{
//Tampilan index di dalam folder dashboard
return view('dashboard.index');
}
}Lalu kita modifikasi file sidebar.blade.php di folder resources/views/template :
buka file resources/views/template/sidebar.blade.php dan modifikasi isinya seperti ini :
<!-- declare variabel get url segment satu -->
@php
$segment1=request()->segment(1);
@endphp
<div id="sidebar">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="/"><img src="{{ asset('') }}dist/assets/compiled/svg/logo.svg" alt="Logo"/></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" style="cursor: pointer" />
<label class="form-check-label"></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path
fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"
></path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<!-- jika url segment satu adalah dashboard maka menu active -->
<li class="sidebar-item @if($segment1=='dashboard') active @endif">
<!-- memanggil route dashboard -->
<a href="{{route('dashboard')}}" class="sidebar-link">
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-book-half"></i>
<span>Post</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="#" class="submenu-link">Tambah Post</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link" >Data Post</a>
</li>
</ul>
</li>
<li class="sidebar-title">Sistem</li>
<li class="sidebar-item">
<!-- start form logout -->
<form method="POST" action="{{ route('logout') }}" >
@csrf
<div class="sidebar-link">
<button type="submit" class="dropdown-item"><i class="bi bi-box-arrow-right"></i> Logout</button>
</div>
</form>
<!-- end form logout -->
</li>
</ul>
</div>
</div>
</div>Jalankan Xampp dan Jalankan project laravel nya dengan perintah ini di terminal :
php artisan servebegini proses dan hasilnya :
buka browser dan masukan di URL browser chrome http://127.0.0.1:8000 sebagai berikut :
Untuk Email kita bisa copy dari database yang memang sudah dibuat di tutorial sebelumnya, untuk password secara default laravel adalah password
jika berhasil login maka akan di arahkan ke halaman dashboard :
dan untuk logout dapat langsung menekan menu Logout maka secara sistem session user akan dihapus, dan di arahkan ke halaman index utama sesuai route yaitu halaman login
Selesai, selamat mencoba.
Artikel selanjutnya akan membahas Cara Mengatur Hak Akses di laravel 8
