Lewati ke konten utama
menjadi.dev
Chapter 1.3 Fundamental Web Pemula

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

Diagram

      +------------------+     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.1 Artinya: “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 kamu
  • Authorization: Token atau kredensial untuk akses terproteksi
  • Content-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 byte
  • Cache-Control: Instruksi caching
  • Set-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
# === 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, Response

Penjelasan Kode

Baris 1-5: HTTP Request dengan method GET dan headers. Baris 7-14: HTTP Response dengan status 200 OK dan body JSON. Baris 16-20: Cara melihat HTTP request/response di browser DevTools.

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'?