Tutorial Laravel Passport dan React JS Pada Website Sewa Mobil

Ketika kita membangun sebuah website sewa mobil, keamanan dan manajemen otentikasi menjadi faktor yang sangat penting. Laravel Passport adalah salah satu solusi yang bisa kita gunakan untuk menangani otentikasi API dengan cara yang aman dan efisien.

Passport memungkinkan kita untuk mengelola akses pengguna ke berbagai fitur di dalam aplikasi dengan cara yang mudah dan fleksibel. Ini sangat penting terutama jika kita berencana untuk membuat aplikasi sewa mobil yang melibatkan berbagai jenis pengguna seperti pelanggan, pemilik mobil, dan admin.

Bayangkan sebuah sistem sewa mobil seperti rental mobil konvensional. Dalam rental konvensional, setiap pelanggan harus melalui proses verifikasi identitas sebelum bisa menyewa mobil. Proses ini bertujuan untuk memastikan bahwa hanya orang yang telah diverifikasi yang dapat menyewa mobil, sehingga mengurangi risiko penyalahgunaan.

Laravel Passport berperan sebagai "petugas verifikasi" dalam dunia digital, memastikan bahwa hanya pengguna yang memiliki izin yang tepat yang dapat mengakses fitur-fitur tertentu di dalam aplikasi sewa mobil kita.

5 Fitur Penting untuk Website Sewa Mobil

1. Manajemen Pengguna Sistem ini memungkinkan pengguna untuk mendaftar, login, dan mengelola akun. Dengan Laravel Passport, hanya pengguna terverifikasi yang dapat mengakses fitur tertentu seperti pemesanan mobil.
2. Pemesanan Mobil Hanya pengguna dengan token otentikasi yang sah yang bisa melakukan pemesanan. Ini mencegah pengguna tak terdaftar dari melakukan pemesanan.
3. Manajemen Kendaraan Pemilik mobil bisa mengelola informasi kendaraan mereka. Laravel Passport memastikan hanya pemilik yang sah yang dapat mengubah detail mobil seperti harga dan ketersediaan.
4. Ulasan dan Rating Hanya pengguna yang telah menyewa mobil yang bisa memberikan ulasan. Ini menjaga keaslian ulasan dan menghindari spam.
5. Riwayat Transaksi Pengguna dapat melihat riwayat transaksi mereka. Hanya pengguna terverifikasi yang bisa mengakses informasi ini, menjaga privasi dan keamanan data.

Tutorial Membuat Projek Laravel 11 Sewa Mobil dengan Composer

Pada tutorial kali ini, kita akan belajar cara membuat sebuah projek website sewa mobil menggunakan Laravel 11. Kita akan mulai dengan menginstal Laravel menggunakan Composer dan membuat beberapa file migration yang dibutuhkan untuk aplikasi ini, seperti categories, cities, cars, transactions, dan customers.

1) Instalasi Laravel 11 dengan Composer

Untuk memulai projek ini, pastikan Composer sudah terpasang di komputer Anda. Jika belum, silakan unduh dan instal Composer terlebih dahulu dari situs resminya.

Setelah Composer terinstal, buka terminal dan jalankan perintah berikut untuk membuat projek Laravel baru:

composer create-project --prefer-dist laravel/laravel rental-car "11.*"

Perintah ini akan membuat folder baru dengan nama rental-car yang berisi file-file projek Laravel 11.

2) Mengatur Koneksi Database

Setelah projek berhasil dibuat, langkah selanjutnya adalah mengatur koneksi database di file .env. Buka file .env dan sesuaikan konfigurasi database seperti berikut:

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

Pastikan database rental_car sudah dibuat di MySQL.

3) Membuat File Migration Categories

Selanjutnya, kita akan membuat file migration untuk tabel categories. Tabel ini akan menyimpan data kategori mobil seperti SUV, sedan, atau hatchback.

Jalankan perintah berikut di terminal:

php artisan make:migration create_categories_table

Buka file migration yang baru saja dibuat di folder database/migrations dan ubah menjadi seperti berikut:

use Illuminate\\\\Database\\\\Migrations\\\\Migration;
use Illuminate\\\\Database\\\\Schema\\\\Blueprint;
use Illuminate\\\\Support\\\\Facades\\\\Schema;

return new class extends Migration {
    public function up(): void {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

    public function down(): void {
        Schema::dropIfExists('categories');
    }
};

4) Membuat File Migration Cities

Tabel cities digunakan untuk menyimpan data kota di mana mobil tersedia untuk disewa. Buat file migration dengan perintah berikut:

php artisan make:migration create_cities_table

Kemudian, buka file migration tersebut dan ubah menjadi seperti ini:

use Illuminate\\\\Database\\\\Migrations\\\\Migration;
use Illuminate\\\\Database\\\\Schema\\\\Blueprint;
use Illuminate\\\\Support\\\\Facades\\\\Schema;

return new class extends Migration {
    public function up(): void {
        Schema::create('cities', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

    public function down(): void {
        Schema::dropIfExists('cities');
    }
};

5) Membuat File Migration Cars

Tabel cars akan menyimpan informasi tentang mobil yang tersedia untuk disewa. Mobil akan terkait dengan kategori dan kota. Jalankan perintah berikut:

php artisan make:migration create_cars_table

Buka file migration yang dibuat dan ubah menjadi seperti ini:

use Illuminate\\\\Database\\\\Migrations\\\\Migration;
use Illuminate\\\\Database\\\\Schema\\\\Blueprint;
use Illuminate\\\\Support\\\\Facades\\\\Schema;

return new class extends Migration {
    public function up(): void {
        Schema::create('cars', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('license_plate');
            $table->unsignedBigInteger('category_id');
            $table->unsignedBigInteger('city_id');
            $table->integer('price_per_day');
            $table->timestamps();

            $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
            $table->foreign('city_id')->references('id')->on('cities')->onDelete('cascade');
        });
    }

    public function down(): void {
        Schema::dropIfExists('cars');
    }
};

6) Membuat File Migration Transactions

Tabel transactions digunakan untuk mencatat transaksi penyewaan mobil oleh pelanggan. Buat file migration dengan perintah berikut:

php artisan make:migration create_transactions_table

Ubah file migration yang dibuat menjadi seperti ini:

use Illuminate\\\\Database\\\\Migrations\\\\Migration;
use Illuminate\\\\Database\\\\Schema\\\\Blueprint;
use Illuminate\\\\Support\\\\Facades\\\\Schema;

return new class extends Migration {
    public function up(): void {
        Schema::create('transactions', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('car_id');
            $table->unsignedBigInteger('customer_id');
            $table->date('rental_date');
            $table->date('return_date');
            $table->integer('total_price');
            $table->timestamps();

            $table->foreign('car_id')->references('id')->on('cars')->onDelete('cascade');
            $table->foreign('customer_id')->references('id')->on('customers')->onDelete('cascade');
        });
    }

    public function down(): void {
        Schema::dropIfExists('transactions');
    }
};

7) Membuat File Migration Customers

Tabel customers digunakan untuk menyimpan data pelanggan yang menyewa mobil. Jalankan perintah berikut:

php artisan make:migration create_customers_table

Ubah file migration yang dibuat menjadi seperti ini:

use Illuminate\\\\Database\\\\Migrations\\\\Migration;
use Illuminate\\\\Database\\\\Schema\\\\Blueprint;
use Illuminate\\\\Support\\\\Facades\\\\Schema;

return new class extends Migration {
    public function up(): void {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->string('phone');
            $table->timestamps();
        });
    }

    public function down(): void {
        Schema::dropIfExists('customers');
    }
};

8) Menjalankan Migration

Setelah semua file migration selesai dibuat, jalankan perintah berikut untuk membuat tabel-tabel di database:

php artisan migrate

Perintah ini akan membuat semua tabel yang telah kita definisikan di dalam file migration ke dalam database rental_car.

Membuat File Model dan Controller (CRUD) di Laravel 11

Setelah kita membuat file migration untuk tabel-tabel yang dibutuhkan, langkah selanjutnya adalah membuat file model dan controller untuk masing-masing tabel tersebut. Pada tutorial ini, kita akan membuat model dan controller untuk categories, cities, cars, transactions, dan customers dengan fitur CRUD (Create, Read, Update, Delete).

1) Membuat File Model dan Controller untuk Categories

Untuk membuat model dan controller Category, kita bisa menjalankan perintah berikut:

php artisan make:model Category -mcr

Perintah ini akan membuat file model Category, migration, controller CategoryController, dan resource.

Berikut adalah isi file Category.php di folder app/Models:

namespace App\\\\Models;

use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory;
use Illuminate\\\\Database\\\\Eloquent\\\\Model;

class Category extends Model {
    use HasFactory;

    protected $fillable = ['name'];
}

Dan berikut adalah isi file CategoryController.php di folder app/Http/Controllers:

namespace App\\\\Http\\\\Controllers;

use App\\\\Models\\\\Category;
use Illuminate\\\\Http\\\\Request;

class CategoryController extends Controller {
    public function index() {
        $categories = Category::all();
        return response()->json($categories);
    }

    public function store(Request $request) {
        $category = Category::create($request->all());
        return response()->json($category);
    }

    public function show($id) {
        $category = Category::findOrFail($id);
        return response()->json($category);
    }

    public function update(Request $request, $id) {
        $category = Category::findOrFail($id);
        $category->update($request->all());
        return response()->json($category);
    }

    public function destroy($id) {
        $category = Category::findOrFail($id);
        $category->delete();
        return response()->json(['message' => 'Category deleted successfully']);
    }
}

2) Membuat File Model dan Controller untuk Cities

Buat model dan controller City dengan perintah berikut:

php artisan make:model City -mcr

Isi file City.php di folder app/Models:

namespace App\\\\Models;

use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory;
use Illuminate\\\\Database\\\\Eloquent\\\\Model;

class City extends Model {
    use HasFactory;

    protected $fillable = ['name'];
}

Dan berikut adalah isi file CityController.php di folder app/Http/Controllers:

namespace App\\\\Http\\\\Controllers;

use App\\\\Models\\\\City;
use Illuminate\\\\Http\\\\Request;

class CityController extends Controller {
    public function index() {
        $cities = City::all();
        return response()->json($cities);
    }

    public function store(Request $request) {
        $city = City::create($request->all());
        return response()->json($city);
    }

    public function show($id) {
        $city = City::findOrFail($id);
        return response()->json($city);
    }

    public function update(Request $request, $id) {
        $city = City::findOrFail($id);
        $city->update($request->all());
        return response()->json($city);
    }

    public function destroy($id) {
        $city = City::findOrFail($id);
        $city->delete();
        return response()->json(['message' => 'City deleted successfully']);
    }
}

3) Membuat File Model dan Controller untuk Cars

Buat model dan controller Car dengan perintah berikut:

php artisan make:model Car -mcr

Isi file Car.php di folder app/Models:

namespace App\\\\Models;

use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory;
use Illuminate\\\\Database\\\\Eloquent\\\\Model;

class Car extends Model {
    use HasFactory;

    protected $fillable = [
        'name',
        'license_plate',
        'category_id',
        'city_id',
        'price_per_day'
    ];

    public function category() {
        return $this->belongsTo(Category::class);
    }

    public function city() {
        return $this->belongsTo(City::class);
    }
}

Dan berikut adalah isi file CarController.php di folder app/Http/Controllers:

namespace App\\\\Http\\\\Controllers;

use App\\\\Models\\\\Car;
use Illuminate\\\\Http\\\\Request;

class CarController extends Controller {
    public function index() {
        $cars = Car::with(['category', 'city'])->get();
        return response()->json($cars);
    }

    public function store(Request $request) {
        $car = Car::create($request->all());
        return response()->json($car);
    }

    public function show($id) {
        $car = Car::with(['category', 'city'])->findOrFail($id);
        return response()->json($car);
    }

    public function update(Request $request, $id) {
        $car = Car::findOrFail($id);
        $car->update($request->all());
        return response()->json($car);
    }

    public function destroy($id) {
        $car = Car::findOrFail($id);
        $car->delete();
        return response()->json(['message' => 'Car deleted successfully']);
    }
}

4) Membuat File Model dan Controller untuk Transactions

Buat model dan controller Transaction dengan perintah berikut:

php artisan make:model Transaction -mcr

Isi file Transaction.php di folder app/Models:

namespace App\\\\Models;

use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory;
use Illuminate\\\\Database\\\\Eloquent\\\\Model;

class Transaction extends Model {
    use HasFactory;

    protected $fillable = [
        'car_id',
        'customer_id',
        'rental_date',
        'return_date',
        'total_price'
    ];

    public function car() {
        return $this->belongsTo(Car::class);
    }

    public function customer() {
        return $this->belongsTo(Customer::class);
    }
}

Dan berikut adalah isi file TransactionController.php di folder app/Http/Controllers:

namespace App\\\\Http\\\\Controllers;

use App\\\\Models\\\\Transaction;
use Illuminate\\\\Http\\\\Request;

class TransactionController extends Controller {
    public function index() {
        $transactions = Transaction::with(['car', 'customer'])->get();
        return response()->json($transactions);
    }

    public function store(Request $request) {
        $transaction = Transaction::create($request->all());
        return response()->json($transaction);
    }

    public function show($id) {
        $transaction = Transaction::with(['car', 'customer'])->findOrFail($id);
        return response()->json($transaction);
    }

    public function update(Request $request, $id) {
        $transaction = Transaction::findOrFail($id);
        $transaction->update($request->all());
        return response()->json($transaction);
    }

    public function destroy($id) {
        $transaction = Transaction::findOrFail($id);
        $transaction->delete();
        return response()->json(['message' => 'Transaction deleted successfully']);
    }
}

5) Membuat File Model dan Controller untuk Customers

Buat model dan controller Customer dengan perintah berikut:

php artisan make:model Customer -mcr

Isi file Customer.php di folder app/Models:

namespace App\\\\Models;

use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory;
use Illuminate\\\\Database\\\\Eloquent\\\\Model;

class Customer extends Model {
    use HasFactory;

    protected $fillable = [
        'name',
        'email',
        'phone'
    ];
}

Dan berikut adalah isi file CustomerController.php di folder app/Http/Controllers:

namespace App\\\\Http\\\\Controllers;

use App\\\\Models\\\\Customer;
use Illuminate\\\\Http\\\\Request;

class CustomerController extends Controller {
    public function index() {
        $customers = Customer::all();
        return response()->json($customers);
    }

    public function store(Request $request) {
        $customer = Customer::create($request->all());
        return response()->json($customer);
    }

    public function show($id) {
        $customer = Customer::findOrFail($id);
        return response()->json($customer);
    }

    public function update(Request $request, $id) {
        $customer = Customer::findOrFail($id);
        $customer->update($request->all());
        return response()->json($customer);
    }

    public function destroy($id) {
        $customer = Customer::findOrFail($id);
        $customer->delete();
        return response()->json(['message' => 'Customer deleted successfully']);
    }
}

Menerapkan Laravel Passport untuk API Endpoint dengan React.js

Laravel Passport memungkinkan kita untuk mengelola otentikasi API secara aman menggunakan token berbasis OAuth2. Dengan ini, kita bisa memastikan bahwa hanya pengguna yang sudah terverifikasi yang dapat mengakses endpoint API seperti categories, cities, cars, transactions, dan customers. Pada tutorial ini, kita akan menerapkan Laravel Passport untuk API endpoint tersebut dan mengaksesnya menggunakan React.js.

1) Menginstal dan Mengonfigurasi Laravel Passport

Langkah pertama adalah menginstal Laravel Passport pada projek Laravel. Buka terminal dan jalankan perintah berikut:

composer require laravel/passport

Setelah instalasi selesai, jalankan perintah untuk mengatur tabel-tabel yang dibutuhkan oleh Passport:

php artisan migrate
php artisan passport:install

Kemudian, buka file AuthServiceProvider.php di folder app/Providers dan tambahkan Passport ke dalam boot method:

use Laravel\\\\Passport\\\\Passport;

public function boot() {
    $this->registerPolicies();
    Passport::routes();
}

Di file config/auth.php, ubah driver API menjadi passport:

'guards' => [
    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],

2) Membuat Endpoint API Terproteksi

Setelah Laravel Passport terkonfigurasi, kita perlu membuat endpoint API yang hanya bisa diakses oleh pengguna yang terautentikasi.

Buka file api.php di folder routes dan buat rute seperti berikut:

use App\\\\Http\\\\Controllers\\\\CategoryController;
use App\\\\Http\\\\Controllers\\\\CityController;
use App\\\\Http\\\\Controllers\\\\CarController;
use App\\\\Http\\\\Controllers\\\\TransactionController;
use App\\\\Http\\\\Controllers\\\\CustomerController;

Route::middleware('auth:api')->group(function () {
    Route::apiResource('categories', CategoryController::class);
    Route::apiResource('cities', CityController::class);
    Route::apiResource('cars', CarController::class);
    Route::apiResource('transactions', TransactionController::class);
    Route::apiResource('customers', CustomerController::class);
});

Dengan konfigurasi ini, semua endpoint yang didefinisikan hanya bisa diakses oleh pengguna yang telah terautentikasi.

3) Membuat API Token untuk Pengguna

Agar pengguna dapat mengakses API, mereka memerlukan token otentikasi. Untuk membuat token ini, tambahkan rute untuk login di file api.php:

use Illuminate\\\\Http\\\\Request;
use Illuminate\\\\Support\\\\Facades\\\\Auth;

Route::post('login', function (Request $request) {
    $credentials = $request->only('email', 'password');
    if (Auth::attempt($credentials)) {
        $user = Auth::user();
        $token = $user->createToken('AccessToken')->accessToken;
        return response()->json(['token' => $token]);
    } else {
        return response()->json(['error' => 'Unauthorized'], 401);
    }
});

Endpoint ini akan menghasilkan token yang bisa digunakan oleh pengguna untuk mengakses endpoint yang dilindungi.

4) Mengakses Endpoint API Menggunakan React.js

Untuk mengakses API endpoint yang terproteksi menggunakan React.js, kita perlu mengirimkan token otentikasi bersama dengan permintaan (request).

Pertama, kita buat file api.js untuk mengatur permintaan ke API. Misalnya, untuk mengambil data categories:

import axios from 'axios';

const API_URL = '<http://localhost:8000/api>';

export const getCategories = async (token) => {
    try {
        const response = await axios.get(`${API_URL}/categories`, {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Error fetching categories', error);
        throw error;
    }
};

Kemudian, di file komponen React, kita bisa menggunakan fungsi ini untuk mengambil data:

import React, { useState, useEffect } from 'react';
import { getCategories } from './api';

const CategoryList = () => {
    const [categories, setCategories] = useState([]);
    const [token, setToken] = useState(''); // Token didapatkan dari proses login

    useEffect(() => {
        const fetchCategories = async () => {
            try {
                const data = await getCategories(token);
                setCategories(data);
            } catch (error) {
                console.error(error);
            }
        };

        if (token) {
            fetchCategories();
        }
    }, [token]);

    return (
        <div>
            <h3>List of Categories</h3>
            <ul>
                {categories.map(category => (
                    <li key={category.id}>{category.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default CategoryList;

Pastikan untuk mengganti token dengan token yang valid yang diperoleh dari proses login.

5) Mengirimkan Token dari Login Form

Di aplikasi React.js, kita perlu membuat form login untuk mengambil token otentikasi:

import React, { useState } from 'react';
import axios from 'axios';

const Login = ({ setToken }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post('<http://localhost:8000/api/login>', {
                email,
                password
            });
            setToken(response.data.token);
        } catch (error) {
            console.error('Login failed', error);
        }
    };

    return (
        <form onSubmit={handleLogin}>
            <h3>Login</h3>
            <div>
                <label>Email:</label>
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            </div>
            <div>
                <label>Password:</label>
                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </div>
            <button type="submit">Login</button>
        </form>
    );
};

export default Login;

Dengan form ini, kita bisa mengambil token dari API Laravel Passport dan menyimpannya di state setToken untuk digunakan pada permintaan API lainnya.

Membuat Data Transaksi Baru dengan React.js dan Laravel Passport

Untuk membuat data transaksi baru menggunakan React.js dengan otentikasi Laravel Passport, kita perlu mengirim permintaan POST ke API endpoint yang telah dilindungi dengan token otentikasi. Berikut ini adalah langkah-langkahnya.

1) Mengatur State dan Mengirim Permintaan API

Pertama, kita perlu membuat state untuk menampung data transaksi yang akan dikirim. Kemudian, kita buat fungsi untuk mengirim permintaan POST ke endpoint Laravel Passport.

import React, { useState } from 'react';
import axios from 'axios';

const CreateTransaction = ({ token }) => {
    const [carId, setCarId] = useState('');
    const [customerId, setCustomerId] = useState('');
    const [rentalDate, setRentalDate] = useState('');
    const [returnDate, setReturnDate] = useState('');
    const [totalPrice, setTotalPrice] = useState('');

    const handleCreateTransaction = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post(
                '<http://localhost:8000/api/transactions>',
                {
                    car_id: carId,
                    customer_id: customerId,
                    rental_date: rentalDate,
                    return_date: returnDate,
                    total_price: totalPrice
                },
                {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                }
            );
            console.log('Transaction created:', response.data);
        } catch (error) {
            console.error('Error creating transaction', error);
        }
    };

    return (
        <form onSubmit={handleCreateTransaction}>
            <h3>Create New Transaction</h3>
            <div>
                <label>Car ID:</label>
                <input
                    type="text"
                    value={carId}
                    onChange={(e) => setCarId(e.target.value)}
                />
            </div>
            <div>
                <label>Customer ID:</label>
                <input
                    type="text"
                    value={customerId}
                    onChange={(e) => setCustomerId(e.target.value)}
                />
            </div>
            <div>
                <label>Rental Date:</label>
                <input
                    type="date"
                    value={rentalDate}
                    onChange={(e) => setRentalDate(e.target.value)}
                />
            </div>
            <div>
                <label>Return Date:</label>
                <input
                    type="date"
                    value={returnDate}
                    onChange={(e) => setReturnDate(e.target.value)}
                />
            </div>
            <div>
                <label>Total Price:</label>
                <input
                    type="number"
                    value={totalPrice}
                    onChange={(e) => setTotalPrice(e.target.value)}
                />
            </div>
            <button type="submit">Create Transaction</button>
        </form>
    );
};

export default CreateTransaction;

Pada kode di atas, form digunakan untuk mengumpulkan data transaksi seperti car_id, customer_id, rental_date, return_date, dan total_price. Kemudian, data tersebut dikirim ke endpoint API transactions menggunakan token otentikasi.

2) Menampilkan Hasil dan Validasi

Setelah data dikirim, kita bisa menampilkan hasil atau pesan kesalahan dari permintaan API. Pastikan token yang dikirimkan pada header memiliki hak akses yang tepat untuk membuat transaksi baru.

const handleCreateTransaction = async (e) => {
    e.preventDefault();
    try {
        const response = await axios.post(
            '<http://localhost:8000/api/transactions>',
            {
                car_id: carId,
                customer_id: customerId,
                rental_date: rentalDate,
                return_date: returnDate,
                total_price: totalPrice
            },
            {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            }
        );
        console.log('Transaction created:', response.data);
        alert('Transaction successfully created!');
    } catch (error) {
        console.error('Error creating transaction', error);
        alert('Failed to create transaction. Please try again.');
    }
};

Dengan kode ini, jika permintaan berhasil, kita akan menampilkan pesan bahwa transaksi berhasil dibuat, dan jika gagal, kita akan menampilkan pesan kesalahan.

3) Menghubungkan Form dengan Komponen Utama

Terakhir, kita perlu menghubungkan komponen CreateTransaction dengan komponen utama atau halaman yang memuat token otentikasi untuk mengakses endpoint yang dilindungi.

import React, { useState } from 'react';
import CreateTransaction from './CreateTransaction';

const App = () => {
    const [token, setToken] = useState('');

    const handleLogin = async () => {
        try {
            const response = await axios.post('<http://localhost:8000/api/login>', {
                email: '[email protected]',
                password: 'password'
            });
            setToken(response.data.token);
        } catch (error) {
            console.error('Login failed', error);
        }
    };

    return (
        <div>
            <h1>Rental Car Management</h1>
            <button onClick={handleLogin}>Login to Get Token</button>
            {token && <CreateTransaction token={token} />}
        </div>
    );
};

export default App;

Pada komponen App di atas, kita membuat fungsi login untuk mendapatkan token otentikasi. Token ini kemudian digunakan sebagai prop yang dikirim ke komponen CreateTransaction untuk mengakses endpoint API yang dilindungi oleh Laravel Passport.

Penutup dan saran dari mentor

Laravel adalah salah satu framework PHP yang cocok dipelajari karena fleksibilitas dan kemudahan penggunaannya. Selain itu, Laravel juga menawarkan berbagai fitur lengkap yang dapat membantu pengembang membuat aplikasi web dengan cepat dan efisien. Popularitas Laravel terus meningkat dalam beberapa tahun terakhir, menjadikannya pilihan tepat bagi developer yang ingin menguasai web development modern.

Untuk mempelajari Laravel lebih dalam, belajar di BuildWithAngga bisa menjadi solusi terbaik. Dengan bimbingan mentor expert dan berpengalaman, kamu bisa mengembangkan kemampuan coding sekaligus menjadikan projek skripsimu lebih menarik dan profesional. Di BuildWithAngga, kamu akan mendapatkan akses seumur hidup ke semua materi, sehingga bisa belajar kapan saja dan di mana saja.

Tidak hanya itu, kamu juga bisa bertanya langsung kepada mentor jika menemui kendala dalam belajar atau mengerjakan projek. Ini akan membuat proses belajarmu lebih produktif dan terarah. Jadi, jangan ragu untuk mulai belajar Laravel dan tingkatkan skill coding-mu bersama BuildWithAngga!