Membuat Login dan Register di Laravel Dengan Ajax dan Bootstrap 4 : Ajax Proses Login - Halo teman-teman semuanya, diartikel sebelumnya kita sudah berhasil membuat Proses Register di Framework Laravel menggunakan Ajax.
pada kesempatan kali ini kita semua akan belajar membuat Proses Login di Framework Laravel menggunakan Ajax. Langsung saja kita mulai.
Silahkan jalankan perintah dibawah ini :
php artisan make:controller LoginController
Dari perintah diatas kita membuat sebuh controller baru dengan nama LoginController.php didalam folder app/Http/controllers.
Silahkan kalian buka file LoginController.php dan kalian ubah kodenya menajdi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
class LoginController extends Controller
{
/**
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function index()
{
return view('login');
}
/**
* @param Request $request
* @return \Illuminate\Http\JsonResponse
*/
public function check_login(Request $request)
{
$email = $request->input('email');
$password = $request->input('password');
if(Auth::guard('web')->attempt(['email' => $email, 'password' => $password])) {
return response()->json([
'success' => true
], 200);
} else {
return response()->json([
'success' => false,
'message' => 'Login Gagal!'
], 401);
}
}
}
Dari kode diatas kita membuat 2 fungsi baru yaitu :
-
fungsi index - fungsi ini digunakan untuk menampilkan From login kita di web browser.
-
fungsi check_login - fungsi ini digunakan untuk mengecek data User yang diinputkan dari Form dan di cocokan di database. Untuk proses pengecekan kita menggunakan fungsu bawaan dari laravel yaitu attempt, yang mana ini extends dari class authentication milik laravel.
Selanjutnya kita buat file baru dengan nama login.blade.php di dalam folder resources/views dan silahkan kalian masukkan kode dibawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Login Akun</title>
</head>
<body>
<div class="container" style="margin-top: 50px">
<div class="row">
<div class="col-md-5 offset-md-3">
<div class="card">
<div class="card-body">
<label>LOGIN</label>
<hr>
<div class="form-group">
<label>Alamat Email</label>
<input type="email" class="form-control" id="email" placeholder="Masukkan Alamat Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="Masukkan Password">
</div>
<button class="btn btn-login btn-block btn-success">LOGIN</button>
</div>
</div>
<div class="text-center" style="margin-top: 15px">
Belum punya akun? <a href="/register">Silahkan Register</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<script>
$(document).ready(function() {
$(".btn-login").click( function() {
var email = $("#email").val();
var password = $("#password").val();
var token = $("meta[name='csrf-token']").attr("content");
if(email.length == "") {
Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Alamat Email Wajib Diisi !'
});
} else if(password.length == "") {
Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Password Wajib Diisi !'
});
} else {
$.ajax({
url: "{{ route('login.check_login') }}",
type: "POST",
dataType: "JSON",
cache: false,
data: {
"email": email,
"password": password,
"_token": token
},
success:function(response){
if (response.success) {
Swal.fire({
type: 'success',
title: 'Login Berhasil!',
text: 'Anda akan di arahkan dalam 3 Detik',
timer: 3000,
showCancelButton: false,
showConfirmButton: false
})
.then (function() {
window.location.href = "{{ route('dashboard.index') }}";
});
} else {
console.log(response.success);
Swal.fire({
type: 'error',
title: 'Login Gagal!',
text: 'silahkan coba lagi!'
});
}
console.log(response);
},
error:function(response){
Swal.fire({
type: 'error',
title: 'Opps!',
text: 'server error!'
});
console.log(response);
}
});
}
});
});
</script>
</body>
</html>
Terakhir kita buat sebuah route untuk proses Login kita, silahkan buka file web.php di dalam folder routes dan silahkan kalian tambahkan baris kode dibawah ini :
Route::get('/login', 'LoginController@index')->name('login');
Route::post('/login', 'LoginController@check_login')->name('login.check_login');
Oke sekarang jika kalian jalankan dengan mengetikkan http://localhost:8000/login maka jika berhasil kalian akan mendapatkan kurang lebih seperti berikut ini :
Dan silahkan kalian login, jika berhasil kalian akan mendaptkan pesan sukses kurang lebih seperti berikut ini :
Dari proses sukses login kalian akan diarahkan otomatis dalam 3 Detik ke halaman dashboard. Untuk pembuatan halaman dashboard kita akan lanjutkan di artikel selanjutnya.
Sampai disini pembahasan tentang membuat Proses Login di Framework Laravel Dengan Ajax. Terima Kasih