Membuat REST API Laravel untuk Aplikasi React (Part 1)

Di seri ini kita akan membangun aplikasi fullstack — sebuah aplikasi manajemen produk dengan Laravel sebagai REST API (backend) dan React sebagai antarmuka (frontend). Ini adalah kombinasi yang sangat diminati di dunia kerja: Laravel menangani data dan logika, React menyajikan tampilan yang cepat dan interaktif.

Di Part 1 ini, kita fokus membangun backend-nya: REST API Laravel yang menyediakan data produk dalam format JSON, siap dikonsumsi React di part berikutnya.

Memahami Arsitektur Fullstack

Berbeda dari aplikasi Laravel biasa yang mengembalikan halaman HTML (Blade), pada arsitektur fullstack modern:

• Laravel tidak lagi merender tampilan — ia hanya menyediakan data lewat endpoint API dalam format JSON.
• React berjalan terpisah di browser, mengambil data dari API Laravel lewat HTTP, lalu merender tampilannya sendiri.
• Keduanya berkomunikasi melalui REST API — kontrak berbasis JSON yang menghubungkan frontend dan backend.

Pemisahan ini membuat frontend dan backend bisa dikembangkan secara independen, bahkan oleh tim berbeda. Diagram di atas menggambarkan alur datanya.

Menyiapkan Kebutuhan

• PHP 8.1+ dan Composer (untuk Laravel).
• Node.js dan npm (untuk React, dipakai di Part 2).
• MySQL/MariaDB.

Membuat Proyek Laravel API

composer create-project laravel/laravel produk-api
cd produk-api

Sesuaikan koneksi database di .env (buat dulu database produk_api):

DB_DATABASE=produk_api
DB_USERNAME=root
DB_PASSWORD=

Membuat Migration, Model, dan Controller

Buat semuanya sekaligus. Opsi --api menghasilkan controller khusus API (tanpa metode create/edit yang menampilkan form):

php artisan make:model Produk -m --api

Isi migration di database/migrations/:

public function up(): void
{
    Schema::create('produk', function (Blueprint $table) {
        $table->id();
        $table->string('nama');
        $table->string('kategori');
        $table->integer('harga');
        $table->integer('stok')->default(0);
        $table->timestamps();
    });
}

Jalankan migration:

php artisan migrate

Menyiapkan Model dan Seeder

Buka app/Models/Produk.php, tentukan tabel dan kolom yang boleh diisi:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Produk extends Model
{
    protected $table = 'produk';

    protected $fillable = ['nama', 'kategori', 'harga', 'stok'];
}

Tambahkan data contoh lewat Tinker agar API punya isi:

php artisan tinker

use App\Models\Produk;
Produk::insert([
    ['nama' => 'Keyboard Mekanik', 'kategori' => 'Aksesoris', 'harga' => 350000, 'stok' => 20],
    ['nama' => 'Mouse Wireless',   'kategori' => 'Aksesoris', 'harga' => 150000, 'stok' => 35],
    ['nama' => 'Monitor 24 inci',  'kategori' => 'Display',   'harga' => 1500000, 'stok' => 10],
]);

Membuat API Resource

API Resource adalah lapisan yang mengubah model menjadi struktur JSON yang rapi dan konsisten — kita bisa memilih kolom mana yang ditampilkan. Buat:

php artisan make:resource ProdukResource

Isi app/Http/Resources/ProdukResource.php:

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class ProdukResource extends JsonResource
{
    public function toArray($request): array
    {
        return [
            'id'       => $this->id,
            'nama'     => $this->nama,
            'kategori' => $this->kategori,
            'harga'    => $this->harga,
            'stok'     => $this->stok,
        ];
    }
}

Mengisi Controller API

Buka app/Http/Controllers/ProdukController.php. Karena tadi memakai --api, kerangkanya sudah menyediakan lima metode. Isi sebagai berikut:

<?php

namespace App\Http\Controllers;

use App\Models\Produk;
use App\Http\Resources\ProdukResource;
use Illuminate\Http\Request;

class ProdukController extends Controller
{
    public function index()
    {
        return ProdukResource::collection(Produk::latest()->get());
    }

    public function store(Request $request)
    {
        $data = $request->validate([
            'nama'     => 'required|max:150',
            'kategori' => 'required',
            'harga'    => 'required|integer',
            'stok'     => 'required|integer',
        ]);

        $produk = Produk::create($data);

        return new ProdukResource($produk);
    }

    public function show(Produk $produk)
    {
        return new ProdukResource($produk);
    }

    public function update(Request $request, Produk $produk)
    {
        $data = $request->validate([
            'nama'     => 'required|max:150',
            'kategori' => 'required',
            'harga'    => 'required|integer',
            'stok'     => 'required|integer',
        ]);

        $produk->update($data);

        return new ProdukResource($produk);
    }

    public function destroy(Produk $produk)
    {
        $produk->delete();

        return response()->json(['pesan' => 'Produk berhasil dihapus.']);
    }
}

Perhatikan setiap metode mengembalikan JSON (lewat Resource), bukan view. Inilah inti sebuah REST API.

Mendaftarkan Route API

Buka routes/api.php. Satu baris apiResource otomatis membuat seluruh endpoint CRUD:

<?php

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

Route::apiResource('produk', ProdukController::class);

Ini menghasilkan endpoint: GET /api/produk (semua), POST /api/produk (tambah), GET /api/produk/{id} (detail), PUT /api/produk/{id} (ubah), dan DELETE /api/produk/{id} (hapus).

Mengaktifkan CORS

Karena React berjalan di alamat berbeda (misalnya localhost:5173) dari API Laravel (localhost:8000), browser akan memblokir permintaan lintas-asal kecuali CORS diaktifkan. Untungnya Laravel sudah menyediakan konfigurasinya di config/cors.php. Pastikan barisnya mengizinkan path API:

'paths' => ['api/*'],
'allowed_origins' => ['*'],

Untuk produksi, ganti ['*'] dengan domain frontend Anda yang sebenarnya demi keamanan.

Menguji API

Jalankan server Laravel:

php artisan serve

Buka http://localhost:8000/api/produk di browser. Anda akan melihat data produk dalam format JSON — tanda API sudah bekerja. Anda juga bisa mengujinya dengan tools seperti Postman untuk endpoint POST, PUT, dan DELETE.

Penutup

Backend aplikasi fullstack Anda sudah siap — REST API Laravel yang menyediakan data produk dalam JSON, lengkap dengan validasi dan CORS. Anda memahami perbedaan mendasar antara aplikasi Laravel tradisional (Blade) dan API modern (JSON).

Di Part 2, kita beralih ke frontend: menyiapkan proyek React dengan Vite dan menampilkan data produk dari API ini. Sampai jumpa!

Referensi: untuk pendalaman lebih lanjut, kunjungi dokumentasi resmi React dan Laravel.

Baca Juga

• Menyiapkan React dan Menampilkan Data dari API Laravel (Part 2)
• Membuat CRUD React dengan API Laravel: Tambah, Edit, Hapus (Part 3)