Tutorial Vue 3 dan Laravel 11 #4: Konfigurasi Laravel 11 sebagai REST Full API di Vue 3

sobatcoding.com - Tutorial Vue 3 dan Laravel 11 #4: Konfigurasi Laravel 11 sebagai REST Full API di Vue 3

Untuk project Vue 3 Js kali ini kita menggunakan Laravel 11 sebagai source data via REST Full API

Kita akan konfigurasi dahulu agar bisa digunakan sebagai REST API

Step 1 : Konfigurasi Database di File .env

Kita buka file .env untuk setting koneksi ke database. Kali ini kita buat database dengan nama vue_laravel

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vue_laravel
DB_USERNAME=root
DB_PASSWORD=

SESSION_DRIVER=file
CACHE_STORE=file

Step 2: Buat Model User

Table yang kita gunakan kali ini adalah table users dengan struktur table seperti gambar berikut

Kemudian kita buat model User dengan command php artisan make:model User. Tetapi biasaya saat kita install Laravel 11 via composer, file model User otomatis ter create jadi kita tidak perlu buat model User lagi.

Step 3 : Membuat Controller

Kita buat controller dengan nama UserController menggunakan command php artisan:make controller UserController

php artisan make:controller UserController

Selanjutnya kita buat beberapa function untuk kebutuhan REST API nanti. 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Crypt;
use App\Models\User;
use Validator;

class UserController extends Controller
{
    public function index(Request $request)
    {
       //
    }

    public function show($id)
    {
        //
    }

    public function store(Request $request)
    {
        //
    }

    public function update($id, Request $request)
    {
        //
    }

    public function delete($id)
    {
        //
    }
}

Step 4 : Membuat Cors Middleware

Langkah selanjutnya kita buat CorsMiddleware yang fungsinya adalah agar API bisa diakses cross domain atau antar domain. Caranya adalah kita buat middleware bernama CorsMiddleware menggunakan command php artisan make:middleware CorsMiddleware

Selanjutnya didalam file CorsMiddleware.php tambahkan kode didalam function handle menjadi seperti berikut

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class CorsMiddleware
{

    public function handle(Request $request, Closure $next): Response
    {
        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
        ];

        if ($request->isMethod('OPTIONS'))
        {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        return $next($request);
    }

Step 5: Routing End Point

Selanjutnya kita buat routing endpoint untuk user. Caranya kita buka file web.php yang ada pada folder <project>routes, kemudian kita tambahkan kode berikut

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/users', [UserController::class, 'index']);
Route::get('/users/{id}', [UserController::class, 'show']);
Route::post('/users', [UserController::class, 'store']);
Route::post('/users/{id}/update', [UserController::class, 'update']);
Route::get('/users/{id}/delete', [UserController::class, 'delete']);

Step 6: Setup Cors Middleware ke EndPoint User

Selanjutnya kita setup agar CorsMiddleware ini bisa handle API yang kita buat. Caranya ada 2

Cara 1: Kita tambahkan via bootstrap/app.php

Cara pertama kita buka file app.php terlebih dahulu kemudian ubah menjadi seperti berikut

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

use App\Http\Middleware\CorsMiddleware; //tambahkan line berikut

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {

        $middleware->append(CorsMiddleware::class); //tambahkan line berikut
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();

Cara 2: Kita tambahkan langsung difile router.php

Untuk cara kedua klita bisa langsung tambahkan di routing app nya

use App\Http\Middleware\CorsMiddleware;

Route::middleware([CorsMiddleware::class])->group(function () { 
       Route::get('/users', [UserController::class, 'index']);
       Route::get('/users/{id}', [UserController::class, 'show']);
       Route::post('/users', [UserController::class, 'store']);
       Route::post('/users/{id}/update', [UserController::class, 'update']);
       Route::get('/users/{id}/delete', [UserController::class, 'delete']);
})

Step 7: Disable Validasi CRSF Token

Untuk REST API kita disable dulu untuk fitur validasi CSRF Token dengan cara buka kembali file boostrap/app.php dan tambahkan kode berikut

$middleware->validateCsrfTokens(except: [
            '*',
]);

Artinya kita disable fitur validasi CSRF Token disemua routing Laravel 11

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

use App\Http\Middleware\CorsMiddleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {

        //tambahkan line di bawah ini
        $middleware->validateCsrfTokens(except: [
            '*',
        ]);

        $middleware->append(CorsMiddleware::class);
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();

Demikian persiapan setup untuk REST API menggunakan Laravel 11

Pada artikel selanjutnya kita akan membuat Halaman Index User menggunakan Vue 3 Js dan Larevel 11 sebagai REST API nya

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat.