Disini kita akan membuat penerapan komunikasi antara Frontend ke Backend dengan Token sebagai pengaman dari komuniikasi tersebut dengan spesifikasi sbb :
//via Laravel Installer
composer global require laravel/installer
laravel new laravelsantumreactjs
//via Composer
composer create-project laravel/laravel laravelsantumreactjs
Buka file .env lalu edit baris berikut :
//.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydatabase
DB_USERNAME=myusername
DB_PASSWORD=mypassword
Langka ini diperlukan hanya jika anda menggunakan Laravel versi 9 ke bawah. Install sanctum melalui composer.
composer require laravel/sanctum
Jalankan database migration.
php artisan migrate
Sanctum akan membuat satu table di database untuk menyimpan token API.
php artisan make:controller Api/AuthController
Sesuaikan file Controller App/Http/Controllers/Api/AuthController.php
all(),[
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:8'
]);
if($validator->fails()){
return response()->json($validator->errors());
}
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password)
]);
$token = $user->createToken('auth_token')->plainTextToken;
return response()
->json(['data' => $user,'access_token' => $token, 'token_type' => 'Bearer', ]);
}
public function login(Request $request)
{
if (!Auth::attempt($request->only('email', 'password')))
{
return response()
->json(['message' => 'Unauthorized'], 401);
}
$user = User::where('email', $request['email'])->firstOrFail();
$token = $user->createToken('auth_token')->plainTextToken;
return response()
->json(['message' => 'Hi '.$user->name.', welcome to home','access_token' => $token, 'token_type' => 'Bearer', ]);
}
// method for user logout and delete token
public function logout()
{
auth()->user()->tokens()->delete();
return [
'message' => 'You have successfully logged out and the token was successfully deleted'
];
}
}
Selanjutnya, buka file routes/api.php dan tambahkan kode route seperti di bawah ini.
//Api route for register new user
Route::post('/register', [App\Http\Controllers\Api\AuthController::class, 'register']);
//Api route for login user
Route::post('/login', [App\Http\Controllers\Api\AuthController::class, 'login']);
//Sanctum Route Protection
Route::group(['middleware' => ['auth:sanctum']], function () {
Route::get('/profile', function(Request $request) {
return auth()->user();
});
// API route for logout user
Route::post('/logout', [App\Http\Controllers\Api\AuthController::class, 'logout']);
});
composer require laravel/ui
php artisan ui react
npm install
&
npm run dev
Buat file baru resources/views/layout/app.blade.php.
{{ config('app.name', 'Laravel') }}
@viteReactRefresh
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
Edit routes/web.php lalu tambahkan baris berikut.
Route::get('/frontend', function () {
return view('layouts.app');
});
php artisan serve
Buka browser http://localhost:8000/frontend hasilnya sbb :
Pada resource/view/layouts/app.blade.php kita lihat element utamanya yaitu id=”example” dimana pada reactjs biasanya kita menggunakan id=”root”. Untuk memudahkan kedepannya baiknya kita sesuaikan element root tesrsebut.
body>
Buat file baru bernama /resources/js/App.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
function App() {
return (
App Component
Using `div id=root`
);
}
export default App;
if (document.getElementById('root')) {
const Index = ReactDOM.createRoot(document.getElementById("root"));
Index.render(
)
}
Edit file resources/js/app.js tambahkan baris berikut.
//import './components/Example'; ganti
import './App';
Struktur direktorinya seperti gambar berikut.
Buka kembali browser http://localhost:8000/frontend hasilnya sbb :