Halo teman-teman semuanya, di artikel sebelumnya kita telah berhasil belajar bagaimana cara membuat proses register di Inertia.js. Di artikel kali ini kita akan belajar bersama-sama bagaimana cara membuat proses login menggunakan Inertia.js dengan data yang sudah kita inputkan saat proses register.
Langkah 1 - Membuat Controller Login
Pertama, kita akan membuat controller-nya terlebih dahulu. Dimana di dalam controller ini kita akan membuat beberapa method, seperti index yang digunakan untuk render halaman view/form. Kemudian store untuk proses login-nya dan destroy untuk proses logout.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.
php artisan make:controller Auth/LoginController
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru dengan nama LoginController.php yang berada di dalam folder app/Http/Controllers/Auth.
Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers\Auth;
use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
class LoginController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
return Inertia::render('Auth/Login');
}
/**
* store
*
* @param mixed $request
* @return void
*/
public function store(Request $request)
{
/**
* validate request
*/
$this->validate($request, [
'email' => 'required|email',
'password' => 'required'
]);
//get email and password from request
$credentials = $request->only('email', 'password');
//attempt to login
if (Auth::attempt($credentials)) {
//regenerate session
$request->session()->regenerate();
//redirect route dashboard
return redirect('/dashboard');
}
//if login fails
return back()->withErrors([
'email' => 'The provided credentials do not match our records.',
]);
}
/**
* destroy
*
* @return void
*/
public function destroy()
{
auth()->logout();
return redirect('/login');
}
}
Dari penambahan kode di atas. Pertama kita import Inertia.
use Inertia\Inertia;
Kemudian kita import Facades Auth dari Laravel. Ini akan kita gunakan untuk proses attempt atau login.
use Illuminate\Support\Facades\Auth;
Dan di dalam class LoginController, kita menambahkan 3 method baru. Yaitu :
-
function index
-
function store
-
function destroy
Function Index
Method ini akan kita gunakan untuk melakukan render halaman view/form menggunakan Inertia.js.
return Inertia::render('Auth/Login');
Function Store
Method ini akan kita gunakan untuk proses authentication. Dimana di dalam method ini, pertama kita lakukan validasi terhadap data yang dikirimkan melalui request.
$this->validate($request, [
'email' => 'required|email',
'password' => 'required'
]);
Jika data yang dikirimkan sudah sesuai, maka kita buat variable 1 lagi yang bernama $credentials yang isinya adalah request email dan password.
//get email and password from request
$credentials = $request->only('email', 'password');
Kemudian, untuk melakukan proses authentication, kita menggunakan Facades Auth dengan method attempt.
if (Auth::attempt($credentials)) {
//...
}
Jika proses authentication berhasil, maka kita akan lakukan regenerate session.
//regenerate session
$request->session()->regenerate();
Setelah itu, kita redirect ke dalam URL /dashboard.
return redirect('/dashboard');
Tapi, jika proses authentication gagal dilakukan, maka akan melakukan redirect ke halaman form lagi dengan memberikan message error login failed.
return back()->withErrors([
'email' => 'The provided credentials do not match our records.',
]);
Function Destroy
Method ini kita gunakan untuk proses logout. Dimana di dalamnya kita memanggil helper auth dan memanggil method logout.
auth()->logout();
Jika proses logout berhasil, maka kita akan redirect ke URL /login.
Langkah 2 - Menambahkan Route Login
Setelah berhasil membuat controller, selanjutnya kita membuat route untuk login. Silahkan buat file routes/web.php, kemudian ubah kode-nya menjadi seperti berikut ini :
<?php
use Illuminate\Support\Facades\Route;
//route index register
Route::get('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'index']);
//route store register
Route::post('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'store']);
//route index login
Route::get('/login', [\App\Http\Controllers\Auth\LoginController::class, 'index']);
//route store login
Route::post('/login', [\App\Http\Controllers\Auth\LoginController::class, 'store']);
//route logout
Route::post('/logout', [\App\Http\Controllers\Auth\LoginController::class, 'destroy'])->middleware('auth');
Dari perubahan kode di atas. Kita menambahkan 3 route baru. yaitu /login dengan methot GET, yang mana kita gunakan untuk menampilkan halaman view/form login.
Dan /login dengan method POST untuk melakukan proses login. Kemudian /logout dengan method POST untuk proses logout.
Langkah 3 - Membuat Halaman View Login
Kita lanjutkan membuat halaman untuk menampilkan form login di Inertia.js. Silahkan buat file baru dengan nama Login.vue di dalam folder resources/js/Pages/Auth. Kemudian masukkan kode berikut ini di dalamnya.
<template>
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card border-0 rounded-3 shadow-sm">
<div class="card-body">
<h5>LOGIN</h5>
<hr>
<form @submit.prevent="storeLogin">
<div class="mb-3">
<label class="form-label">Email Address</label>
<input type="email" class="form-control" v-model="form.email" placeholder="Email Address">
</div>
<div v-if="errors.email" class="alert alert-danger">
{{ errors.email }}
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" v-model="form.password" placeholder="Password">
</div>
<div v-if="errors.password" class="alert alert-danger">
{{ errors.password }}
</div>
<button type="submit" class="btn btn-primary w-100">LOGIN</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
//import layout App
import LayoutApp from '../../Layouts/App.vue';
//import reactivity API dari vue
import {
reactive
} from 'vue';
//import inertia adapter
import { Inertia } from '@inertiajs/inertia';
export default {
//set layout
layout: LayoutApp,
//get props
props: {
errors: Object
},
//define composition API
setup() {
//define state
const form = reactive({
email: '',
password: '',
});
//method storeLogin
const storeLogin = () => {
//send data ke server
Inertia.post('/login', {
email: form.email,
password: form.password,
});
}
return {
form,
storeLogin
}
}
}
</script>
<style>
</style>
Dari penambahan kode di atas. pertama kita import Layout App yang sudah pernah kita buat sebelumnya.
//import layout App
import LayoutApp from '../../Layouts/App.vue';
Kemudian, kita import hook reactive dari Vue.
//import reactivity API dari vue
import {
reactive
} from 'vue';
Dan kita import juga Inertia dari Inertia.js.
//import inertia adapter
import { Inertia } from '@inertiajs/inertia';
Setelah itu, kita set halaman ini menggunakan layout yang sudah kita import di atas.
//set layout
layout: LayoutApp,
Dan kita get props dengan nama errors. Props ini akan dikirimkan oleh controller, ketika kita gagal melakukan validasi di dalam form.
//get props
props: {
errors: Object
},
Kemudian kita definisikan composition API menggunakan method setup.
//define composition API
setup() {
//...
}
Di dalam composition API. Pertama kita buat state dulu dengan nama form, yang mana isinya adalah object dengan key email dan password. State tersebut yang kita gunakan untuk mendapatkan data yang diinputkan di dalam form.
//define state
const form = reactive({
email: '',
password: '',
});
kemudian kita buat method baru dengan nama storeLogin. Method tersebut akan dijalankan, ketika kita melakukan submit di dalam form.
<form @submit.prevent="storeLogin">
//...
</form
//method storeLogin
const storeLogin = () => {
//...
}
Di dalam method storeLogin, kita melakukan HTTP request ke dalam server dengan method POST ke endpoint /login. Dan kita mengirimkan 2 data yaitu email dan password yang kita dapatkan dari input form.
//send data ke server
Inertia.post('/login', {
email: form.email,
password: form.password,
});
Agar state form dan method storeLogin dapat digunakan di dalam template, maka kita perlu melakukan return terlebih dahulu.
return {
form,
storeLogin
}
Langkah 4 - Compile Asset
Ketika kita melakukan perubahan di dalam file folder resources/js maka kita perlu melakukan compile ulang agar kode assets-nya diperbarui.
Jalankan perintah berikut ini di dalam terminal/CMD :
npm run dev
Atau jika pengen otomatis melakukan compile saat kita melakukan perubahan di dalam file, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :
npm run watch
CATATAN : ketika menjalankan perintah npm run watch, jangan tutup terminal/CMD-nya.
Langkah 5 - Uji Coba Proses Login
Sekarang, kita akan lakukan uji coba proses login. Silahkan buka halaman loginnya di http://localhost:8000/login, jika berhasil maka akan menampilkan halaman seperti berikut ini :
Sekarang, silahkan klik LOGIN tanpa mengisi data apapun, maka kita akan mendpatkan response error yang dikirimkan dari controller melalui props.
Sekarang, silahkan masukkan email dan password yang belum ada di dalam table users, maka kita juga akan mendapatkan response login failed yang dikirimkan oleh controller.
Dan terakhir. Silahkan masukkan email dan password yang ada di dalam table users. Jika berhasil maka akan menampilkan halaman seperti berikut ini :
Di atas, sebenarnya kita sudah berhasil melakukan proses login, error 404 muncul karena kita belum membuat halaman dashboard atau /dashboard.
Jika kita reload halaman login, maka kita sudah berhasil menampilkan menu DASHBOARD dan LOGOUT. Itu yang berarti kita sudah berhasil melakukan proses login.
Sampai disini pembahasan bagaimana cara membuat proses login atau authentication menggunakan Inertia.js. Di artikel selanjutnya kita akan belajar bagaimana cara menampilkan halaman dashboard dan menampilkan user yang sedang login.
Terima Kasih