API Dasar (REST API)

Di dunia web modern, tidak semua komunikasi terjadi antara browser dan halaman HTML. Banyak aplikasi saling bertukar data menggunakan API (Application Programming Interface) — dalam format JSON, bukan HTML.

Apa itu API?

Bayangkan kamu memesan makanan di restoran:

KomponenDi RestoranDi API
PelangganKamuFrontend (JavaScript/Mobile App)
MenuDaftar makananDokumentasi API (endpoint)
PelayanPengantar pesananHTTP Request
DapurTempat masakServer (PHP)
MakananHasil pesananData JSON

Bedanya dengan website biasa: API tidak mengirim HTML, melainkan data mentah (biasanya JSON) yang bisa diproses oleh aplikasi lain.

Website biasa:
Browser ──► Server ──► Response: <html><h1>Halo</h1></html>

API:
Aplikasi ──► Server ──► Response: {"pesan": "Halo", "status": "ok"}

Format JSON

JSON (JavaScript Object Notation) adalah format data yang ringan dan mudah dibaca:

{
    "nama": "iPhone 15",
    "harga": 15000000,
    "stok": 25,
    "aktif": true,
    "kategori": ["elektronik", "smartphone"],
    "spesifikasi": {
        "warna": "hitam",
        "ram": "8GB"
    }
}

Di PHP, konversi antara array dan JSON sangat mudah:

<?php
// Array PHP → JSON (untuk dikirim sebagai response)
$produk = [
    'nama' => 'iPhone 15',
    'harga' => 15000000,
    'stok' => 25
];

$json = json_encode($produk);
echo $json;
// {"nama":"iPhone 15","harga":15000000,"stok":25}

// JSON → Array PHP (untuk memproses data yang diterima)
$data = json_decode($json, true);
echo $data['nama'];  // iPhone 15
TIP
// JSON yang rapi (pretty print) — berguna saat debugging
echo json_encode($produk, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);

Membuat API Sederhana dengan PHP

1. API: Daftar Produk (GET)

Buat file api/produk.php:

<?php
// 1. Beritahu browser bahwa response ini adalah JSON, bukan HTML
header('Content-Type: application/json');

require __DIR__ . '/../config/database.php';

// 2. Ambil data dari database
$stmt = $pdo->query("SELECT * FROM produk WHERE status = 'aktif' ORDER BY id DESC");
$produkList = $stmt->fetchAll();

// 3. Kirim sebagai JSON
echo json_encode([
    'status' => 'success',
    'data' => $produkList,
    'total' => count($produkList)
]);

Akses di browser: http://belajar.test/api/produk.php

Hasilnya:

{
    "status": "success",
    "data": [
        {"id": 1, "nama": "Laptop", "harga": 12000000},
        {"id": 2, "nama": "Mouse", "harga": 150000}
    ],
    "total": 2
}

2. API: Detail Produk (GET dengan Parameter)

<?php
// api/produk-detail.php
header('Content-Type: application/json');

require __DIR__ . '/../config/database.php';

$id = $_GET['id'] ?? null;

// Validasi
if (!$id || !is_numeric($id)) {
    http_response_code(400);  // Bad Request
    echo json_encode(['status' => 'error', 'pesan' => 'ID produk harus berupa angka']);
    exit;
}

// Cari produk
$stmt = $pdo->prepare("SELECT * FROM produk WHERE id = ?");
$stmt->execute([$id]);
$produk = $stmt->fetch();

if (!$produk) {
    http_response_code(404);  // Not Found
    echo json_encode(['status' => 'error', 'pesan' => 'Produk tidak ditemukan']);
    exit;
}

echo json_encode(['status' => 'success', 'data' => $produk]);

3. API: Tambah Produk (POST)

<?php
// api/produk-tambah.php
header('Content-Type: application/json');

require __DIR__ . '/../config/database.php';

// Hanya terima method POST
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);  // Method Not Allowed
    echo json_encode(['status' => 'error', 'pesan' => 'Gunakan method POST']);
    exit;
}

// Baca data JSON yang dikirim dari frontend
$input = json_decode(file_get_contents('php://input'), true);

$nama  = trim($input['nama'] ?? '');
$harga = $input['harga'] ?? 0;

// Validasi
if (empty($nama) || $harga <= 0) {
    http_response_code(422);  // Unprocessable Entity
    echo json_encode([
        'status' => 'error', 
        'pesan'  => 'Nama dan harga wajib diisi'
    ]);
    exit;
}

// Simpan ke database
$stmt = $pdo->prepare("INSERT INTO produk (nama, harga) VALUES (?, ?)");
$stmt->execute([$nama, $harga]);

http_response_code(201);  // Created
echo json_encode([
    'status' => 'success',
    'pesan'  => 'Produk berhasil ditambahkan',
    'data'   => [
        'id'    => $pdo->lastInsertId(),
        'nama'  => $nama,
        'harga' => $harga
    ]
]);

HTTP Status Code

Kode status memberitahu client apakah request berhasil atau gagal:

KodeNamaKapan Dipakai
200OKRequest berhasil (GET, PUT)
201CreatedData baru berhasil dibuat (POST)
400Bad RequestInput dari client salah format
401UnauthorizedClient belum login / token salah
403ForbiddenClient tidak punya izin
404Not FoundData / endpoint tidak ditemukan
405Method Not AllowedMethod salah (misal GET ke endpoint POST)
422Unprocessable EntityValidasi gagal
500Internal Server ErrorError di server (bug di code)

Mengkonsumsi API dari JavaScript (Fetch)

Di sisi frontend, kita menggunakan fetch() untuk berkomunikasi dengan API:

GET — Mengambil Data

<div id="daftar-produk">Memuat...</div>

<script>
// Ambil data dari API
fetch('/api/produk.php')
    .then(response => response.json())  // Ubah response ke object JS
    .then(data => {
        if (data.status === 'success') {
            let html = '<ul>';
            data.data.forEach(produk => {
                html += `<li>${produk.nama} — Rp ${produk.harga.toLocaleString('id-ID')}</li>`;
            });
            html += '</ul>';
            document.getElementById('daftar-produk').innerHTML = html;
        }
    })
    .catch(error => {
        console.error('Gagal mengambil data:', error);
    });
</script>

POST — Mengirim Data

<form id="form-produk">
    <input type="text" id="nama" placeholder="Nama produk" required>
    <input type="number" id="harga" placeholder="Harga" required>
    <button type="submit">Tambah Produk</button>
</form>
<div id="hasil"></div>

<script>
document.getElementById('form-produk').addEventListener('submit', async function(e) {
    e.preventDefault();  // Jangan submit form biasa

    const produkBaru = {
        nama: document.getElementById('nama').value,
        harga: parseInt(document.getElementById('harga').value)
    };

    try {
        const response = await fetch('/api/produk-tambah.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(produkBaru)  // Ubah object ke JSON
        });

        const data = await response.json();

        if (data.status === 'success') {
            document.getElementById('hasil').innerHTML = 
                `<p style="color:green">✅ ${data.pesan} (ID: ${data.data.id})</p>`;
        } else {
            document.getElementById('hasil').innerHTML = 
                `<p style="color:red">❌ ${data.pesan}</p>`;
        }
    } catch (error) {
        console.error('Error:', error);
    }
});
</script>

Pola Response API yang Konsisten

Selalu gunakan format response yang seragam agar frontend mudah memproses:

<?php
// helpers/api-response.php

function jsonSuccess($data, $pesan = 'Berhasil', $kode = 200) {
    http_response_code($kode);
    echo json_encode([
        'status' => 'success',
        'pesan'  => $pesan,
        'data'   => $data
    ]);
    exit;
}

function jsonError($pesan, $kode = 400) {
    http_response_code($kode);
    echo json_encode([
        'status' => 'error',
        'pesan'  => $pesan,
        'data'   => null
    ]);
    exit;
}

Penggunaan:

<?php
require 'helpers/api-response.php';

// Sukses
jsonSuccess($produkList, 'Data produk berhasil diambil');

// Error
jsonError('ID produk tidak valid', 400);

REST API: Konvensi Endpoint

REST (Representational State Transfer) adalah standar penamaan endpoint:

MethodEndpointFungsiContoh PHP
GET/api/produkDaftar semuaproduk.php
GET/api/produk?id=5Detail satuproduk-detail.php?id=5
POST/api/produkTambah baruproduk-tambah.php
PUT/api/produk?id=5Updateproduk-update.php?id=5
DELETE/api/produk?id=5Hapusproduk-hapus.php?id=5
NOTE
Route::apiResource('produk', ProdukController::class);

Ini otomatis membuat 5 endpoint (index, show, store, update, destroy) dengan satu baris kode! 🚀

Latihan

  1. Buat API GET /api/kategori.php yang mengembalikan daftar kategori produk (id, nama)
  2. Buat API POST /api/kategori-tambah.php dengan validasi nama tidak boleh kosong
  3. Di halaman HTML, gunakan fetch() untuk menampilkan daftar kategori dari API

Selanjutnya

Kamu sudah bisa membuat API untuk bertukar data antar aplikasi. Ini adalah skill yang sangat penting di dunia web modern — hampir semua aplikasi mobile, SPA (React/Vue), dan integrasi antar sistem menggunakan API.