Perjalanan Request: HTTP dari A ke Z
Struktur HTTP request dan response
Tujuan Pembelajaran
- Memahami struktur HTTP request dan response
- Mengerti header, body, dan method dalam HTTP
Analogi
+------------------+ HTTP Request +------------------+
| Kamu (Browser) | --------------------> | Server |
| GET /menu | | Proses... |
| Host: google | | |
| Accept: html | | |
+------------------+ <-------------------- +------------------+
HTTP Response
200 OK
Content-Type: text/html
<html>...</html>
HTTP Request = surat pesanan, HTTP Response = surat balasan dengan barangnya
Penjelasan Konsep
HTTP itu singkatan dari HyperText Transfer Protocol. Protokol = aturan main. Jadi HTTP adalah aturan main bagaimana browser dan server berkomunikasi. Tanpa HTTP, internet nggak akan bisa berfungsi seperti yang kita kenal sekarang.
Setiap kali kamu buka website, unduh gambar, kirim form,
Atau nonton video online — semuanya menggunakan HTTP sebagai fondasi komunikasinya.
Analoginya kayak kirim surat pesanan.
Bayangkan kamu mau beli buku dari toko online.
Kamu tulis surat yang isinya: “Halo, saya mau beli buku JavaScript untuk Pemula, dikirim ke alamat Jl.
Mawar No. 5.” Surat ini adalah HTTP Request.
Lalu toko online balas dengan surat lain: “Pesanan diterima, buku akan dikirim besok.” Surat balasan ini adalah HTTP Response.
Simple kan?
Tapi di dalam “surat” tersebut, ada struktur yang sangat terorganisir.
HTTP Request terdiri dari 3 bagian utama
1. Request Line (Baris Pertama) — Ini adalah baris paling penting yang berisi 3 informasi:
- Method: Apa yang mau kamu lakukan? (GET, POST, PUT, DELETE,
Dll)
- Path: Lokasi resource yang diminta (misalnya
/users/123) - Version: Versi HTTP yang dipakai (HTTP/1.1 atau HTTP/2)
Contoh:
GET /search?q=javascript HTTP/1.1Artinya: “Saya mau AMBIL data dari path /search dengan query javascript, pakai HTTP versi 1.1.”
2. Headers (Kepala Surat) — Headers adalah informasi tambahan yang membantu server memahami request-mu.
Ini seperti metadata — data tentang data. Beberapa header penting:
Host: Menyebutkan domain tujuan (contoh:Host: google.com)Accept: Memberitahu server format apa yang client bisa terima (Accept: text/html)User-Agent: Identitas browser dan sistem operasi kamuAuthorization: Token atau kredensial untuk akses terproteksiContent-Type: Format data yang dikirim (untuk POST/PUT) Headers ini penting karena server membutuhkan konteks untuk memproses request dengan benar.
Body (Isi Surat, Opsional)
Body hanya ada untuk method tertentu seperti POST dan PUT. Ini adalah data sebenarnya yang ingin kamu kirim ke server.
Misalnya kalau kamu mengisi form registrasi, data nama, email, dan password akan ada di body.
Body bisa berupa JSON, form data, XML, atau bahkan file upload.
HTTP Response juga terdiri dari 3 bagian yang mirip
1. Status Line — Berisi versi HTTP, status code (3 digit), dan status message.
Contoh: HTTP/1.1 200 OK
Artinya: “HTTP versi 1.1,
Request berhasil (200), semua baik (OK).” Status code ini sangat penting untuk mengetahui hasil request.
Ada ratusan status code yang dikelompokkan dalam 5 kategori (kita bahas di chapter berikutnya).
2. Response Headers — Sama seperti request headers, tapi informasinya tentang response.
Content-Type: Format data yang dikirim (text/html,application/json,
image/png)
Content-Length: Ukuran data dalam byteCache-Control: Instruksi cachingSet-Cookie: Cookie yang diset server untuk browser
3. Response Body — Ini isi sebenarnya yang diminta.
Kalau kamu buka website, body berisi HTML.
Kalau kamu akses API, body berisi JSON.
Kalau kamu buka gambar, body berisi data binary gambar tersebut.
Kenapa struktur ini penting?
Karena setiap bagian punya peran spesifik.
Request line memberitahu “apa yang mau dilakukan,” headers memberikan “konteks dan metadata,” dan body membawa “data sebenarnya.” Memahami struktur ini membantumu debug saat terjadi error — misalnya status 404 berarti resource tidak ditemukan,
Atau header Content-Type yang salah bisa membuat browser tidak bisa menampilkan halaman dengan benar.
HTTP/2 dan HTTP/3
Versi terbaru HTTP membuat web lebih cepat dengan multiplexing (banyak request sekaligus dalam satu koneksi), server push, dan kompresi header.
Tapi konsep dasar request-response tetap sama.
Yang berubah adalah efisiensi pengiriman datanya.
Jadi, setiap kali kamu browsing, ingatlah: kamu sedang menulis dan menerima “surat elektronik” yang sangat terstruktur.
Memahami isi surat tersebut akan membuatmu developer yang jauh lebih baik.
Contoh Kode
# === HTTP REQUEST ===
GET /api/users/123 HTTP/1.1
Host: api.example.com
Accept: application/json
Authorization: Bearer eyJhbGci...
User-Agent: Mozilla/5.0...
# === HTTP RESPONSE ===
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 87
Cache-Control: max-age=3600
{
"id": 123,
"nama": "Budi",
"email": "budi@example.com"
}
# === Lihat request di Browser DevTools ===
# 1. Buka halaman apa pun
# 2. Tekan F12 → tab Network
# 3. Refresh halaman
# 4. Klik salah satu request → lihat Headers, Preview, ResponsePenjelasan Kode
Prompt AI
Jelaskan perbedaan method GET dan POST menggunakan analogi restoran. Kapan sebaiknya menggunakan PUT vs PATCH?
Pertanyaan Reflektif
Buka DevTools (F12) → Network → refresh halaman. Pilih request pertama, lalu lihat tab Headers. Ada berapa header yang dikirim? Apa fungsi header 'User-Agent' dan 'Accept'?