Membuat Login dan Register di Laravel Dengan Ajax dan Bootstrap 4 : Ajax Proses Register - Halo teman-teman semuanya, diartikel sebelumnya kita semua sudah belajar bagaimana cara menginstall framework Laravel dan sekaligus membuat Databasenya.
Pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat Proses Register di Framework Laravel menggunakan Ajax.
Dan kali ini kita tidak akan menggunakan Auth bawaan dari Laravel, jadi disini nanti kita manual membuatnya sendiri dari awal secara terstruktur step by step.
Oke langsung saja, silahkan kalian jalankan perintah dibawah ini :
php artisan make:controller RegisterController
Dari perintah yang sudah kalian jalankan diatas, kalian akan membuat sebuah controller baru di dalam folder app/Http/controllers dengan nama RegisterController.php.
Silahkan kalian buka file RegisterController.php dan silahkan kalian ganti kodenya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
class RegisterController extends Controller
{
/**
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function index()
{
return view('register');
}
/**
* @param Request $request
* @return \Illuminate\Http\JsonResponse
*/
public function store(Request $request)
{
$nama_lengkap = $request->input('nama_lengkap');
$email = $request->input('email');
$password = $request->input('password');
$user = User::create([
'name' => $nama_lengkap,
'email' => $email,
'password' => Hash::make($password)
]);
if($user) {
return response()->json([
'success' => true,
'message' => 'Register Berhasil!'
], 201);
} else {
return response()->json([
'success' => false,
'message' => 'Register Gagal!'
], 400);
}
}
}
Dari kode controller RegisterController.php diatas kita menambahkan 2 fungsi baru yaitu
-
fungsi index - fungsi ini digunakan untuk menampilkan From dari Register kita.
-
fungsi store - fungsi ini digunakan untuk menyimpan data user yang diinputkan melalui Form dan mengembalikannya berupa data JSON.
Selanjutnya silahkan kalian buat file baru dengan nama register.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>Register 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>REGISTER</label>
<hr>
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" class="form-control" id="nama_lengkap" placeholder="Masukkan Nama Lengkap">
</div>
<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-register btn-block btn-success">REGISTER</button>
</div>
</div>
<div class="text-center" style="margin-top: 15px">
Sudah punya akun? <a href="/login">Silahkan Login</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-register").click( function() {
var nama_lengkap = $("#nama_lengkap").val();
var email = $("#email").val();
var password = $("#password").val();
var token = $("meta[name='csrf-token']").attr("content");
if (nama_lengkap.length == "") {
Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Nama Lengkap Wajib Diisi !'
});
} else 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
$.ajax({
url: "{{ route('register.store') }}",
type: "POST",
cache: false,
data: {
"nama_lengkap": nama_lengkap,
"email": email,
"password": password,
"_token": token
},
success:function(response){
if (response.success) {
Swal.fire({
type: 'success',
title: 'Register Berhasil!',
text: 'silahkan login!'
});
$("#nama_lengkap").val('');
$("#email").val('');
$("#password").val('');
} else {
Swal.fire({
type: 'error',
title: 'Register Gagal!',
text: 'silahkan coba lagi!'
});
}
console.log(response);
},
error:function(response){
Swal.fire({
type: 'error',
title: 'Opps!',
text: 'server error!'
});
}
})
}
});
});
</script>
</body>
</html>
Terakhir kita buat sebuah route untuk proses Register kita, silahkan buka file web.php di dalam folder routes dan silahkan kalian tambahkan baris kode dibawah ini :
Route::get('/register', 'RegisterController@index')->name('register.index');
Route::post('/register', 'RegisterController@store')->name('register.store');
Oke sekarang jika kalian jalankan dengan mengetikkan http://localhost:8000/register maka jika berhasil kalian akan mendapatkan kurang lebih seperti berikut ini :
Dan silahkan kalian masukkan inputan dari form tersebut, jika berhasil kalian akan mendaptkan pesan sukses kurang lebih seperti berikut ini :
Sampai disini pembahasan tentang membuat Proses Register di Framework Laravel Dengan Ajax. Di artikel selanjutnya kita semua akan belajar membuat Proses Login menggunakan Ajax di Framework Laravel. Terima Kasih