Beranda/ Pengulangan Skenario: URL Adalah Peta Anda - Tapi Anda Masih Membutuhkan Paspor dan Barang Bawaan

Pengulangan Skenario: URL Adalah Peta Anda - Tapi Anda Masih Membutuhkan Paspor dan Barang Bawaan

Artikel ini menyelami anatomi URL dan memecah elemen permintaan API, termasuk header, body, cookie, dan otorisasi, menggunakan analogi mal perbelanjaan untuk menggambarkan fungsinya dan interaksinya.

Andi Prasetyo

• 5 min read

Kali ini, kita akan mempelajari URL berikut:

https://alice:1234@shop.example.com:8080/products/sneakers?color=red&size=42#reviews

String kecil ini seperti peta navigasi ke mal perbelanjaan, memberi tahu server:

  • Terowongan mana yang Anda gunakan (https)
  • Siapa Anda (alice— meskipun metode ini tidak begitu aman saat ini)
  • Mal mana yang akan Anda kunjungi (shop.example.com)
  • Pintu masuk mana yang akan Anda gunakan (8080)
  • Bagian mana yang akan Anda tuju (/products/sneakers)
  • Permintaan khusus apa yang Anda miliki (merah, ukuran 42)
  • Dan lantai atau rak mana yang ingin Anda langsung tuju (#reviews)

Jadi ya — URL adalah jadwal perjalanan Anda, rencana "cara sampai di sana".

Tapi mengetahui tujuan Anda tidak cukup. Jika Anda pergi berbelanja sepatu, Anda masih perlu membawa keranjang belanja, ID, dan daftar belanja agar perjalanan berhasil.

Header, Body, Cookie, dan Auth? Mereka Adalah Dokumen Perjalanan dan Kebutuhan Anda

Pengulangan Skenario: URL Adalah Peta Anda - Tapi Anda Masih Membutuhkan Paspor dan Barang Bawaan
Nama Pikirkan sebagai… Apakah ada di URL? Contoh
Path Tujuan Anda di peta ✅ Ya /products/sneakers: lorong sepatu
Params Berteriak "Ini yang saya inginkan!" ✅ Ya ?color=red&size=42: merah, ukuran 42
Headers Paspor & kartu bahasa Anda ❌ Tidak Accept: application/json
Auth Lencana akses VIP ❌ Tidak (di Header) Authorization: Bearer abc123token
Body Isi koper Anda ❌ Tidak Form pemesanan, unggahan file, alamat pengiriman
Cookie Catatan lengket dari kunjungan terakhir ❌ Tidak Cookie: session_id=xyz789

Petak Memori Cepat:

  • URL = Peta jalan Anda
  • Headers = ID + "cara saya bersikap"
  • Auth = Lencana pemeriksaan keamanan
  • Body = Semua barang yang Anda bawa
  • Cookie = Catatan lengket dari perjalanan terakhir

Sekarang Anda bisa melihat sekalipun:
Apa yang publik (di URL), dan apa yang disembunyikan di ransel permintaan Anda.
Mari kita buka masing-masing barang perjalanan ini untuk melihat bagaimana semua ini bekerja sama dalam perjalanan HTTP.

1️⃣ Header｜Kartu Selamat Datang Anda di Meja Depan

Header seperti kartu yang Anda serahkan saat memasuki hotel. Ini memberi tahu staf:

  • Siapa Anda
  • Bahasa apa yang Anda bicarakan
  • Format apa yang Anda terima
  • Apakah Anda VIP (melalui token)

Tidak ada dari ini ada di URL—semuanya bepergian diam-diam bersama permintaan Anda.

Contoh Permintaan

GET /products/sneakers HTTP/1.1
Host: shop.example.com
Accept: application/json
User-Agent: Mozilla/5.0
Authorization: Bearer abc123token

Semua di bawah ini adalah header:

Host: shop.example.com
Accept: application/json
User-Agent: Mozilla/5.0
Authorization: Bearer abc123token

Pembongkaran Header:

Header Apa yang Diberitahu Server
Host “Saya mencari shop.example.com”
Accept “Kirim respons dalam JSON, ya”
User-Agent “Saya menggunakan Chrome di macOS”
Authorization “Saya memiliki token akses yang valid—biarkan saya masuk”

Apa yang Bukan Header?

GET /products/sneakers HTTP/1.1

Baris ini adalah Baris Permintaan, bukan header. Ini berisi:

[Metode HTTP] [Path Sumber Daya] [Versi HTTP]
  • GET → apa yang ingin Anda lakukan
  • /products/sneakers → apa yang Anda minta
  • HTTP/1.1 → bahasa yang Anda bicarakan

Lebih tentang metode HTTP

Pengulangan

Anda masuk ke toko dan berkata:

  • Baris Permintaan: “Saya ingin membeli sepatu sneaker, silakan.”
  • Header: “Ini ID saya (Otorisasi), saya berbicara dalam bahasa Inggris (Terima), dan saya menggunakan ponsel saya (User-Agent).”

2️⃣ Body｜Apa yang Benar-benar Ada di Dalam Koper Anda

Body adalah tempat Anda memasukkan konten nyata dari permintaan Anda.
Digunakan dalam metode seperti POST, PUT, atau PATCH, ini adalah cara Anda mengirim formulir, mengirim data, atau mengunggah gambar.

Contoh

POST /checkout HTTP/1.1           ← Baris Permintaan
Content-Type: application/json    ← Header Permintaan

{                                 ← Body Permintaan
  "productId": "sneakers123",
  "quantity": 2,
  "address": "New York Big Apple 1306 Blvd APT 8"
}

Blok JSON itu adalah Body—lembar pesanan “liter” Anda.
Ini bersih, tersimpan jauh dari URL, dan jauh lebih aman.

Header Permintaan:Content-Type seperti daftar kemasan Anda

Tipe Makna
application/json Format data API standar
application/x-www-form-urlencoded Form web tradisional
multipart/form-data Unggahan file atau formulir kompleks

Pengulangan

Bagian Konten Penjelasan
Baris Permintaan POST /checkout HTTP/1.1 Memberi tahu server apa yang Anda lakukan dan di mana Anda pergi
Header Permintaan Content-Type: application/json Memberi tahu server: “Hei, barang yang saya kirim dalam format JSON”
Body Permintaan Data JSON Berisi informasi terperinci yang Anda kirim — seperti pesanan lengkap Anda

Anda mendekati kasir dan berkata:

“Saya ingin membeli 2 pasang sepatu sneakers123. Kirim ke New York, Big Apple…”

3️⃣ Cookie｜Catatan Lengket yang Anda Lupakan Anda Tinggalkan

Cookie seperti catatan lengket yang server tinggalkan untuk browser Anda.
Kali berikutnya Anda mengunjungi, browser membawanya tanpa Anda melakukan apa pun.

Contoh

Cookie: session_id=abc987xyz; theme=dark; cart_id=12345

Isi Cookie

Kunci Nilai Artinya
session_id abc987xyz Sesi login Anda
theme dark Anda menyukai mode gelap
cart_id 12345 Keranjang Anda sebelumnya

Dari saat itu, browser Anda secara otomatis menyertakannya dengan setiap permintaan:

Cookie: session_id=abc987xyz

Setelah Anda login, server mengirimkan:

Set-Cookie: session_id=abc987xyz; Path=/; HttpOnly
Fitur Deskripsi
Disimpan di klien Browser Anda menyimpannya secara otomatis
Diatur oleh server Dikirim melalui header respons Set-Cookie
Persisten di antara permintaan Dikirim dengan setiap permintaan ke domain yang sama — hingga kadaluwarsa atau dihapus
Isolasi domain Cookie tidak bisa lintas domain — menjaga data Anda pribadi dan aman

Pengulangan

Pikirkan seperti ini: kali terakhir Anda mengunjungi toko, staf memberi Anda tanda terima. Hari ini, Anda kembali, dengan santai menunjukkan tanda terima (browser Anda yang melakukannya secara otomatis), dan staf segera tahu:

  • Oh hei, Anda telah login (session_id)
  • Anda menyukai mode gelap (theme)
  • Dan ya, sepatu Anda masih ada di keranjang (cart_id)

Anda tidak mengatakan apa-apa — tapi sistem mengingat semuanya. Itulah keajaiban Cookie.

Cookie adalah cara situs web mengingat Anda. Mereka seperti catatan lengket yang server berikan kepada Anda laagi — rahasia kecil antara Anda dan server (meskipun browser Anda sepenuhnya tahu ).

4️⃣ Otorisasi｜Lencana VIP Anda ke Lounge Backend

Otorisasi adalah Header khusus untuk titik akhir yang dilindungi.

Kadaluarsa: Autentikasi Dasar (nama pengguna:kata sandi di URL)

https://alice:1234@shop.example.com

Pernah umum, pendekatan "Hai, saya Alice dan ini kata sandi saya" ini jarang digunakan sekarang—terlalu mudah diretas.

Cara Modern: Token Bearer

Authorization: Bearer abcdefg123456token

Hari ini, kita login sekali, mendapatkan token, dan menggunakan token tersebut untuk permintaan selanjutnya.

Anatomi Header Otorisasi

  • Authorization: → ini adalah permintaan otorisasi
  • Bearer → "Saya memegang kredensial"
  • abcdefg123456token → kata sandi aktual Anda

Aliran Tipikal

  1. Login → dapatkan token
  2. Buat permintaan dengan:
Authorization: Bearer abcdefg123456token

Mengapa Ini Hebat

Keuntungan Mengapa Penting
Mengurangi penggunaan ulang kata sandi Token menggantikan kata sandi Anda
Ruang lingkup + Kadaluwarsa Batasi akses berdasarkan waktu/izin
Akses universal Bekerja di seluruh web, mobile, aplikasi desktop

Pengulangan

Anda mendekati gym. Mereka bertanya:

“Ada kartu keanggotaan Anda?”

Anda menunjukkan lulusan digital Anda:

Authorization: Bearer qwerty987654321token

Mereka memindainya dan berkata: “Selamat datang, Alice! Nikmati latihan Anda. ”

Pengulangan Akhir: Daftar Pemeran Mall API

Komponen Dalam Analogi Mall Contoh
URL Peta mal Anda /products/sneakers?color=red
Path Lorong tertentu /products/sneakers
Parameter Pertanyaan Filter produk di rak ?color=red&size=42
Header Kartu info untuk staf Accept: JSON, User-Agent: iOS
Cookie Catatan lengket dari perjalanan terakhir session_id=abc123
Body Formulir pesanan Anda {"product_id":"123",...}
Autentikasi Lencana keanggotaan VIP Anda Authorization: Bearer xyz123

Dan itu saja — sekarang Anda mengetahui tujuh karakter kunci dalam perjalanan permintaan API Anda!

Setiap dari mereka memainkan peran unik dalam alam semesta EchoAPI, bekerja sama seperti jaringan komunikasi berminyak baik antara klien dan server. Setelah Anda memahami tujuan mereka dan bagaimana mereka berinteraksi, Anda akan menulis permintaan yang lebih bersih, debug lebih cepat, dan membangun API yang tepat.

Jadi kali berikutnya Anda mengirim permintaan, ambillah jeda dan tanyakan:

“Di mana saya di mall? Apa yang perlu saya bawa?”

Anda mungkin menemukan bahwa dunia API tidak dingin dan kriptik — ini adalah perjalanan yang menyenangkan dan terorganisir dengan baik jika Anda tahu cara mempersiapkan diri!

Mulai secara Gratis

Topik Terhangat

Postman vs Thunder Client Alternatif Postman Alternatif Insomnia Pengujian Otomatis dengan Bruno Alternatif Thunder Client Ekstensi VSCode untuk Pengembang Frontend