Hai, kali ini kita akan belajar membuat AJAX di laravel, saya masih melanjutkan projek sebelumnya di https://mitraide.blogspot.com/2024/04/membuat-login-sederhana-dengan-laravel.html
Route web.php :
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Login;
Route::match(['GET', 'POST'], '/login', [Login::class, 'index']);
Route::match(['GET', 'POST'], '/welcome', [Login::class, 'success']);
Route::match(['GET', 'POST'], '/logout', [Login::class, 'logout']);
Route::match(['GET', 'POST'], '/getData', [Login::class, 'getData']);
Controller (Login.php)
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class Login extends Controller
{
function index(Request $request){
if ($request->isMethod('post')) {
$username = $request->input('username');
$password = $request->input('password');
if (($username == "admin") and ($password = "admin")){
session()->put('username', $username);
return redirect()->action([Login::class, 'welcome']);
}else{
return redirect()->action([Login::class, 'index']);
}
}
if ($request->isMethod('get')) {
$data = array(
"nama" => "ini nama",
"usia" => 30
);
return view('login', $data);
}
}
function welcome (){
$username = session()->get('username');
echo $username;
if (session()->has('username')) {
echo "akses diberikan";
}else{
echo "anda tidak diberikan akses";
}
echo "login welcome";
}
function logout(){
session()->flush();
return redirect()->action([Login::class, 'index']);
}
function getData(Request $request){
return response()->json(['message' => 'Data berhasil diterima']);
}
}
login.blade.php (View) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form action="/login" method="post">
@csrf
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
<script>
console.log("csrf token");
var token = '{{ csrf_token() }}';
console.log(token);
fetch('/getData', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
body: JSON.stringify({
data: 'contoh data'
})
})
.then(response => response.json())
.then(data => handleResponse(data))
.catch(error => console.error('Error:', error));
function handleResponse(data) {
console.log(data);
console.log("silses");
console.log(data.message);
}
</script>
</html>
