↑↓ atau Space untuk navigasi
01 / 17
Bab 01

Bagaimana Web
Sebenarnya Bekerja

Membangun mental model tentang sistem yang menjadi panggung bagi semua kode yang akan Anda tulis.

🌐 HTTP 📡 DNS 🖥️ Browser
02 / 17
Tujuan Pembelajaran

Setelah bab ini, Anda dapat:

1 Menggambar alur lengkap HTTP request — dari URL hingga pixel di layar
2 Mengidentifikasi komponen arsitektur client-server dan tanggung jawabnya
3 Menjelaskan mengapa web disebut "stateless" dan implikasinya
4 Membedakan operasi client-side vs server-side dan dampak keamanannya
5 Melacak jalur data dari URL hingga rendering pixel menggunakan DevTools
03 / 17
Konteks Konseptual

Ketik google.com → halaman muncul.

Sederhana? Tidak juga.

Di balik kesederhanaan itu, terjadi orkestrasi kompleks yang melibatkan puluhan sistem komputer, protokol komunikasi, dan transformasi data.

🔍 DNS → 🤝 TCP → 📨 HTTP → ⚙️ Server → 🎨 Render
04 / 17
Analogi Dunia Nyata

Web sebagai Sistem Pos Raksasa

📝 Browser

Anda yang menulis surat permintaan

📞 DNS

Buku telepon raksasa — menerjemahkan nama ke alamat

✉️ HTTP Request

Amplop berisi surat, lengkap dengan stempel

🏢 Server

Kantor yang menerima surat dan menyiapkan balasan

📦 Response

Paket balasan berisi dokumen HTML, gambar, dll.

🎨 Rendering

Membuka paket dan menyusunnya agar bisa dipahami

05 / 17
Mental Model Visual

Alur Request-Response

👤 User ketik URL → 🔍 DNS Lookup → 📍 IP Address → 🤝 TCP Handshake
📨 HTTP Request → ⚙️ Server Process → 📦 HTTP Response → 🎨 Browser Render
Setiap langkah = transformasi data. Tidak ada yang "ajaib" — semua bisa dijelaskan secara mekanistik.
06 / 17
Tahap 1

URL Parsing

https://example.com/about

Scheme https://

Protokol yang digunakan — memberitahu browser cara berkomunikasi

Domain example.com

Nama human-readable dari server tujuan

Path /about

Lokasi spesifik resource yang diminta di server

💡 Jika Anda tidak menulis https://, browser modern default ke HTTPS.
07 / 17
Tahap 2

DNS Resolution

Menerjemahkan example.com → 93.184.216.34

1 Cek DNS cache lokal — pernah dikunjungi?
2 Tanya DNS Resolver (ISP / Google 8.8.8.8)
3 Resolver → Root Server: "Siapa tahu .com?"
4 Resolver → TLD Server: "Siapa tahu example.com?"
5 Resolver → Authoritative NS: "IP-nya berapa?" → 93.184.216.34
🔐 Keamanan: DNS bisa di-hijack → HTTPS memastikan Anda bicara dengan server yang benar via sertifikat.
08 / 17
Tahap 3

TCP Three-Way Handshake

Sebelum mengirim data, dua komputer harus "berjabat tangan"

🖥️ Browser
SYN
🖧 Server
🖥️ Browser
SYN-ACK
🖧 Server
🖥️ Browser
ACK
🖧 Server
Jika HTTPS → tambahan TLS Handshake untuk setup enkripsi. Lebih lambat, tapi aman.
09 / 17
Tahap 4

HTTP Request

GET /about HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0...
Accept: text/html
Accept-Language: en-US,id
Connection: keep-alive

Request Line

GET /about HTTP/1.1
Method + Path + Versi protokol

Headers

Metadata tambahan — browser info, bahasa, format yang diterima

💡 Accept-Language memberitahu server bahasa yang diprefer pengguna
10 / 17
Tahap 5 & 6

HTTP Response

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1256
Server: nginx/1.18.0

<!DOCTYPE html>
<html>
  <head>...</head>
</html>

Status Line

Versi + Status Code + Pesan

Headers

Tipe konten, ukuran, info server

Body

Data aktual — HTML yang akan di-render browser

11 / 17
Referensi Penting

HTTP Status Codes

1xx

Informational — sedang diproses

2xx ✓

200 OK, 201 Created — Berhasil!

3xx ↗

301 Moved, 304 Not Modified — Redirect

4xx ✗

400 Bad Request, 404 Not Found — Salah client

5xx 💥

500 Server Error, 503 Unavailable — Masalah server

Kenapa penting? 404 = "resource tidak ada" (salah client). 503 = "server overload" (masalah server). Mengetahui kategori = tahu siapa yang salah.
12 / 17
Tahap 7

Browser Rendering Pipeline

HTML mentah → Pixel di layar dalam 6 langkah

📄
HTML → DOM
Parse markup
🎨
CSS → CSSOM
Parse styles
🌳
Render Tree
DOM + CSSOM
📐
Layout
Posisi & ukuran
🖌️
Paint
Gambar pixel
🧩
Composite
Gabung layer
⚡ Performa: Re-layout & re-paint itu mahal. JS yang terus mengubah ukuran elemen = halaman lambat.
13 / 17
Keamanan Fundamental

Trust Boundary

🖥️ Client

Zona Tidak Terpercaya

  • User bisa edit JavaScript
  • User bisa ubah request
  • Validasi hanya untuk UX

🖧 Server

Zona Terpercaya

  • Menjaga data & logika bisnis
  • HARUS validasi semua input
  • Keamanan sebenarnya di sini
🔐 Validasi di client-side (JS) = untuk UX. Validasi sebenarnya harus di server.
14 / 17
Desain Protokol

Stateless vs Stateful

HTTP adalah stateless — setiap request independen. Server tidak "mengingat" request sebelumnya.

✓ Stateless (HTTP)

  • ✓Scalable — tambah server mudah
  • ✓Reliable — server crash? Request ke server lain
  • ✓Simple — setiap request dipahami independen
  • ✗No memory — butuh cookies/tokens

✗ Stateful (Alternatif)

  • ✗Setiap user perlu koneksi dedicated
  • ✗Server restart = semua disconnect
  • ✗Load balancing jadi kompleks
  • ✓Server "ingat" user otomatis
15 / 17
🎨 Hands-On

DevTools — Network Tab

// Buka DevTools:
F12 atau Ctrl+Shift+I
// Klik tab Network
// Centang "Preserve log"
// Reload halaman → Ctrl+R
🔍 Klik request → lihat Headers, Response, dan Timing

⏱ Timing Breakdown

DNS Lookup → Cari alamat IP
TCP Connection → Jabat tangan
TTFB → Server processing
Download → Transfer data

🐌 Coba Slow 3G

Network → throttling → "Slow 3G" untuk merasakan empati terhadap koneksi lambat

16 / 17
🔧 Engineering Checkpoint

Lima Dimensi Engineering Mindset

🔒 Keamanan

Client ≠ terpercaya. Validasi di server.

⚡ Performa

Ukur dulu, baru optimasi. DevTools = alat ukur.

📖 Keterbacaan

Diagram & kode ditulis untuk dibaca manusia.

📈 Skalabilitas

Stateless = horizontal scale ke miliaran user.

🔧 Pemeliharaan

Pahami fondasi, bukan hanya abstraksi.

✅ Kelima dimensi ini berlaku untuk setiap keputusan yang Anda buat sebagai developer web.
17 / 17
Ringkasan Bab 1

Key Takeaways

🌐 Web = Request + Response. Browser mengirim permintaan, server menjawab, browser merender.
📡 DNS → TCP → HTTP. Tiga tahap sebelum data berpindah: cari alamat, jabat tangan, kirim surat.
🎨 Rendering Pipeline. HTML mentah → DOM → CSSOM → Render Tree → Layout → Paint → Pixel.
🔐 Trust Boundary. Client tidak terpercaya. Validasi sebenarnya selalu di server.
📡 Stateless by Design. HTTP stateless → scalable. State di-handle via cookies/tokens.

Selanjutnya: Bab 2 — HTML: Struktur Semantik dan Aksesibilitas