Routing & Jawaban JSON API Perpustakaan

Pendahuluan — buka pintu toko

Artikel ini adalah #58 (ini) di Seri 4: Pemrograman Web Lanjut v2. Di Struktur Folder, .env & Artisan Laravel (#57) kamu sudah kenal denah, pengaturan, dan Artisan. Sekarang langkah 3/8: buka pintu HTTP (routing) dan jawab dengan JSON — bahasa paket data yang sering dipakai API.

Awam: toko sudah punya denah. Pengunjung butuh alamat pintu yang jelas: “daftar buku ada di sini”. Routing = peta alamat. JSON = isi paket yang dikirim balik ke browser/aplikasi — bukan halaman HTML berwarna.

Domain tetap perpustakaan mini. Hari ini kita buat daftar buku sederhana (data contoh dulu). Menyimpan ke database, validasi form, dan login datang belakangan.

Prasyarat: sudah selesai Struktur Folder, .env & Artisan Laravel (#57) — folder perpustakaan-api ada, php artisan serve pernah jalan. Fondasi instalasi di Instal PHP, Composer & Proyek Laravel (#56). Pakai Laravel 13+ — butuh PHP 8.3+.

Spesifikasi fitur — apa yang kita kuasai?

Daftar singkat yang bisa kamu centang di akhir artikel:

1. Mengerti route sebagai alamat pintu HTTP di file routes/web.php.
2. Membuat GET /api/buku yang mengembalikan daftar buku contoh.
3. Memakai response()->json(...) agar jawaban berbentuk JSON.
4. Menguji di browser (atau terminal) saat php artisan serve hidup.

Awam: urutan nyaman: paham pintu -> tulis route -> jawab JSON -> coba di browser. Belum perlu file pengatur terpisah (controller) atau menyimpan ke tabel database di sini.

Istilah — ringkas untuk pintu & paket

Urutan belajar: baca istilah -> lihat alur -> tulis route -> uji JSON.

Kenapa routing dulu?

Tanpa route, Laravel tidak tahu harus menjawab URL mana. Kamu bisa sudah punya denah folder, tapi pengunjung yang ketik alamat di browser masih “tersesat”.

Awam: sama seperti perpustakaan — sebelum meminjamkan buku, loket harus punya nomor loket yang jelas. Routing = nomor loket. JSON = slip jawaban yang rapi untuk sistem lain (bukan poster dinding).

Artikel ini tetap install-dari-nol untuk routing: tidak ada paket baru hari ini. Kita pakai file route bawaan proyek. Fondasi PHP/Composer/Laravel + denah sudah di Instal PHP, Composer & Proyek Laravel (#56) dan Struktur Folder, .env & Artisan Laravel (#57).

Alur — dari URL sampai JSON

Persiapan — alat yang kamu buka

Alat yang dipakai di artikel ini (sudah dari fondasi Instal PHP, Composer & Proyek Laravel (#56) / Struktur Folder, .env & Artisan Laravel (#57) — tidak ada unduhan wajib baru):

• Terminal — Laragon: menu Terminal · XAMPP: tombol Shell. Untuk cd, php artisan serve, dan menjalankan file demo. Jangan asal buka CMD/PowerShell dari Start Menu.
• Editor teks — Notepad / VS Code — untuk membuka routes/web.php dan menempel cuplikan route.
• Browser — Chrome/Edge/Firefox — menguji alamat http://127.0.0.1:8000/api/buku setelah lampu toko hidup.

Buka terminal Laragon/Shell XAMPP, masuk folder proyek dulu:

cd C:\laragon\www\perpustakaan-api

Di XAMPP biasanya: cd C:\xampp\htdocs\perpustakaan-api. Sesuaikan path jika foldermu beda (pakai lokasi yang kamu catat saat instalasi).

Lalu nyalakan lampu toko:

php artisan serve

Biarkan jendela terminal ini tetap hidup. Kalau perlu mengedit web.php atau menjalankan perintah lain, buka jendela terminal kedua (Laragon/Shell XAMPP lagi), cd ke folder proyek yang sama, lalu bekerja di sana. Alamat lokal biasanya http://127.0.0.1:8000.

Awam: Terminal pertama = lampu toko (serve). Terminal kedua = tangan mengedit/cek tanpa mematikan lampu. Matikan serve dengan Ctrl+C di terminal yang menjalankannya.

Tulis route daftar buku

Buka file routes/web.php di editor teks (Explorer: masuk folder routes, klik kanan file -> Open with Notepad / VS Code — atau dari terminal kedua: notepad routes\web.php). Di bagian bawah file (setelah route bawaan), tambahkan cuplikan berikut (ini cuplikan untuk ditempel ke proyek — bukan file PHP mandiri):

// Cuplikan routes/web.php — tempel di bawah route bawaan
Route::get('/api/buku', function () {
    $buku = [
        ['id' => 1, 'judul' => 'Belajar PHP', 'penulis' => 'Ayu'],
        ['id' => 2, 'judul' => 'Dasar Laravel', 'penulis' => 'Budi'],
    ];

    return response()->json([
        'message' => 'Daftar buku perpustakaan mini',
        'data' => $buku,
    ]);
});

Contoh bentuk data yang akan dikemas jadi JSON (bisa diuji di file mandiri dulu):

<?php

declare(strict_types=1);

$buku = [
    ['id' => 1, 'judul' => 'Belajar PHP', 'penulis' => 'Ayu'],
    ['id' => 2, 'judul' => 'Dasar Laravel', 'penulis' => 'Budi'],
];

echo json_encode([
    'message' => 'Daftar buku perpustakaan mini',
    'data' => $buku,
], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE), PHP_EOL;

Satu lagi — cek jumlah item sebelum dikirim:

<?php

declare(strict_types=1);

$data = [
    ['id' => 1, 'judul' => 'Belajar PHP'],
    ['id' => 2, 'judul' => 'Dasar Laravel'],
];

echo 'Jumlah buku contoh: ', count($data), PHP_EOL;

Awam: baris Route::get('/api/buku', ...) artinya: kalau ada permintaan GET ke alamat /api/buku, jalankan fungsi di dalamnya. Data buku masih “contoh di kertas” (array) — belum dari tabel database.

Kenapa di web.php? Supaya awam tidak wajib memasang file/route API ekstra dulu. Nanti jalur routes/api.php bisa dipelajari saat kebutuhan API makin besar — fondasi route-nya sama.

Uji di browser

Dengan php artisan serve masih hidup di terminal pertama, buka browser lalu ketik di bilah alamat:

http://127.0.0.1:8000/api/buku

Kamu harus melihat teks JSON berisi message dan data (dua buku contoh). Kalau 404, cek: sudah simpan web.php? Sudah di folder proyek yang benar? URL path-nya /api/buku? Kalau “tidak bisa terhubung”, hampir selalu karena serve belum hidup.

Awam: browser menampilkan JSON seperti “slip jawaban”. Bentuknya kaku untuk mata manusia — itu normal. Yang penting mesin bisa membacanya.

Pola Dasar — empat langkah pintu bersih

Demo peta pintu — file mandiri

Latihan ide pintu & JSON tanpa mengubah proyek Laravel:

1. Buka editor teks, buat file baru, tempel cuplikan di bawah, simpan sebagai laravel_routing_json_perpustakaan_demo.php (boleh di Desktop).
2. Buka terminal di folder tempat file itu disimpan (Explorer: Shift+klik kanan folder -> “Open in Terminal” / “Buka di Terminal”, atau cd manual). Pastikan php -v sudah jalan.
3. Jalankan: php laravel_routing_json_perpustakaan_demo.php — layar menampilkan peta route & contoh paket JSON.

File ini mensimulasikan peta route & paket JSON — tidak mengubah proyek Laravel-mu:

<?php

declare(strict_types=1);

/**
 * Demo peta route & JSON — simulasi teks untuk awam.
 * File: laravel_routing_json_perpustakaan_demo.php
 */

function petaRoute(): array
{
    return [
        'GET /api/buku' => 'daftar buku (JSON)',
    ];
}

function paketJson(): array
{
    return [
        'message' => 'Daftar buku perpustakaan mini',
        'data' => [
            ['id' => 1, 'judul' => 'Belajar PHP', 'penulis' => 'Ayu'],
            ['id' => 2, 'judul' => 'Dasar Laravel', 'penulis' => 'Budi'],
        ],
    ];
}

function demo(): void
{
    echo "=== Peta pintu (route) ===", PHP_EOL;
    foreach (petaRoute() as $alamat => $peran) {
        echo "- {$alamat} : {$peran}", PHP_EOL;
    }

    echo PHP_EOL, "=== Contoh jawaban JSON ===", PHP_EOL;
    echo json_encode(paketJson(), JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE), PHP_EOL;
}

demo();

Awam: demo() hanya menampilkan peta di terminal. Setelah paham, kerjakan langkah yang sama di routes/web.php sungguhan. declare(strict_types=1); membuat tipe lebih ketat — boleh diikuti, tidak wajib dihafal.

Kesalahan umum

Latihan

1. Jalankan demo PHP di atas, lalu bandingkan dengan JSON di browser setelah route hidup.
2. Tambah satu buku ketiga di array $buku, simpan, refresh /api/buku.
3. Jelaskan ke teman: beda singkat “alamat pintu (route)” dan “isi paket (JSON)” dengan bahasa toko/perpustakaan.

FAQ

Harus pakai routes/api.php?
Belum wajib di langkah ini. web.php cukup untuk belajar pintu + JSON. File api.php bisa belakangan saat kebutuhan API bertambah.

Terminal mana yang harus dibuka?
Sama seperti di Struktur Folder, .env & Artisan Laravel (#57): menu Terminal Laragon atau tombol Shell XAMPP. Lalu cd ke perpustakaan-api sebelum php artisan serve.

Bagaimana membuka routes/web.php?
Lewat Explorer (folder routes) atau dari terminal kedua: notepad routes\web.php. Simpan setelah menempel cuplikan, baru uji di browser.

Kenapa belum pakai database?
Supaya fokus satu hal: membuka pintu dan menjawab JSON. Menyimpan ke tabel datang setelah fondasi ini nyaman.

Apa hubungan dengan artikel denah?
Struktur Folder, .env & Artisan Laravel (#57) menyiapkan rumah. #58 (ini) memasang nomor loket dan slip jawaban.

Ke mana setelah ini?
Berikutnya: Request & Form Request: Menjaga Input API (#59) — jaga isi permintaan yang masuk lewat pintu supaya data tidak berantakan.

Kesimpulan

Kamu sudah membuka pintu HTTP di Laravel: menulis route GET /api/buku, menjawab dengan JSON, dan mengujinya saat artisan serve hidup. Ini langkah 3/8 jalur Laravel di Seri 4.

Seri 4 progress: langkah #58 (ini) · 3/8 jalur Laravel · prasyarat: Struktur Folder, .env & Artisan Laravel (#57) LIVE. Berikutnya: Request & Form Request: Menjaga Input API (#59).