Cara Kerja Web: Dari Klik sampai Halaman

Kamu membuka browser, mengetik alamat, lalu menekan Enter — dan satu detik kemudian sebuah halaman utuh muncul, lengkap dengan teks, gambar, dan tombol yang bisa diklik. Rasanya seketika, hampir seperti sihir. Padahal di balik momen singkat itu ada sebuah percakapan kecil yang sudah sangat terlatih antara komputermu dan sebuah mesin yang bisa jadi berada di belahan bumi lain.

Artikel ini akan menelusuri percakapan tersebut dari awal sampai akhir, dengan bahasa yang gampang dicerna. Kamu tidak perlu punya latar belakang ngoding sama sekali. Setelah selesai membaca, kamu akan punya peta yang jelas di kepala tentang apa yang terjadi antara klikmu dan halaman yang sudah jadi — peta yang sama yang selalu dibawa setiap pengembang web.

Para pemain dalam cerita ini

Sebelum mengikuti perjalanannya, mari kita kenalan dulu dengan para tokohnya. Jumlahnya cuma sedikit, dan masing-masing punya satu tugas.

Client adalah pihak yang meminta sesuatu. Sebagian besar waktu, itu adalah browser kamu — Chrome, Firefox, Safari, Edge. Tujuan utama sebuah browser memang cuma satu: mengambil konten web lalu menggambarnya di layar.

Server adalah pihak yang menjawab. Ini sebuah komputer, biasanya berjalan di suatu pusat data, yang menyimpan sebuah situs dan menyerahkan halamannya begitu diminta. Kata “server” terdengar bikin gentar, tapi artinya sebenarnya cuma “sesuatu yang melayani” — seperti pelayan restoran yang mengantarkan pesananmu.

Di antara keduanya ada jaringan: kabel, router, dan koneksi nirkabel yang membawa pesan bolak-balik. Kamu bisa membayangkannya seperti sistem pos. Kamu tidak perlu tahu setiap jalan yang dilewati suratmu; kamu cukup percaya bahwa surat itu akan sampai.

Client dan server itu peran, bukan jenis alat

“Server” bukan kotak emas istimewa. Ia komputer biasa yang sedang menjalankan tugas menjawab permintaan. Laptopmu sendiri pun bisa berperan sebagai server. Kedua kata ini hanya menjelaskan siapa yang meminta dan siapa yang menjawab dalam satu pertukaran — sesederhana itu.

Langkah 1 — Kamu meminta sesuatu

Perjalanan ini dimulai darimu. Kamu mungkin mengetik acy-partner.com di kolom alamat, mengklik sebuah tautan, atau menekan bookmark. Apa pun caranya, kamu sudah menyerahkan sebuah URL ke browser — sebuah alamat web.

Sebuah URL punya beberapa bagian yang layak diberi nama, karena masing-masing punya peran:

https://blog.acy-partner.com/id/sebuah-artikel
└─┬─┘   └────────┬────────┘ └──────┬───────┘
scheme       hostname            path

Scheme (https) menentukan bahasa apa yang akan dipakai browser dan server untuk bicara. https adalah versi terenkripsi yang aman dari http.
Hostname (blog.acy-partner.com) menyebutkan server mana yang kamu tuju.
Path (/id/sebuah-artikel) menyebutkan halaman mana di server itu.

Saat ini browser baru punya sebuah nama, seperti blog.acy-partner.com. Tapi komputer di jaringan tidak menemukan satu sama lain lewat nama — mereka saling menemukan lewat angka. Maka masalah pertama yang harus dipecahkan adalah menerjemahkan nama yang ramah itu menjadi sebuah angka.

Langkah 2 — Mencari alamatnya (DNS)

Setiap mesin yang bisa dijangkau di internet punya sebuah alamat IP, yaitu deretan angka seperti 93.184.216.34. Nama seperti acy-partner.com hanya ada demi manusia; jaringan di baliknya berjalan memakai angka-angka ini.

Mengubah nama menjadi angka adalah tugas DNS, atau Domain Name System. Anggap saja ini buku telepon internet: kamu tahu nama orang yang ingin kamu hubungi, dan DNS yang mencarikan nomornya untukmu.

Browser kamu:  "Berapa IP untuk blog.acy-partner.com?"
Sistem DNS:    "93.184.216.34."

Pencarian ini biasanya cuma butuh beberapa per seribu detik, dan jawabannya disimpan sebentar (di-cache) supaya tidak perlu diulang setiap kali kamu mengklik. DNS adalah topik besar tersendiri — kami akan menyiapkan artikel khusus tentang bagaimana buku telepon ini sebenarnya disusun, karena caranya ternyata cukup cerdik.

Kenapa pakai nama, bukan angka?

Angka susah diingat dan bisa berubah ketika sebuah situs pindah ke perangkat baru. Nama tetap sama meski angka di baliknya berganti. DNS memungkinkan nama yang ramah bagi manusia dan angka yang ramah bagi mesin tetap berdiri sendiri-sendiri.

Langkah 3 — Membuka koneksi

Sekarang browser sudah punya angka — ia tahu di mana server berada. Langkah berikutnya adalah benar-benar menghubunginya dan membangun jalur komunikasi, persis seperti menelepon dulu sebelum mulai bicara.

Koneksi ini dibangun di atas seperangkat aturan yang disepakati bernama TCP/IP. Detailnya tidak penting di sini; yang penting adalah idenya. Browser dan server melakukan sapaan singkat bolak-balik — sering disebut handshake (jabat tangan) — untuk memastikan kedua pihak sudah siap dan saling mendengarkan.

Kalau alamatnya memakai https, ada satu hal tambahan yang terjadi saat penyiapan: kedua pihak menyepakati enkripsi. Mereka diam-diam menentukan sebuah kode rahasia, sehingga semua yang dikirim setelah itu teracak bagi siapa pun yang mengintai di jaringan. Inilah arti “aman” pada koneksi yang aman — ikon gembok yang kamu lihat di kolom alamat.

Dengan jalur sudah terbuka dan (untuk https) terenkripsi, browser akhirnya siap meminta halaman.

Langkah 4 — Mengirim permintaan HTTP

Browser kini mengirim sebuah permintaan (request). Aturan tentang bagaimana permintaan itu ditulis disebut HTTP — HyperText Transfer Protocol. HTTP sebenarnya hanya format yang disepakati kedua pihak, ibarat formulir baku yang semua orang isi dengan cara yang sama.

Bentuk permintaan yang disederhanakan kira-kira begini:

GET /id/sebuah-artikel HTTP/1.1
Host: blog.acy-partner.com
Accept: text/html

Mari kita baca baris demi baris:

GET adalah metode — apa yang ingin kamu lakukan. GET artinya “berikan ini ke saya.” Ada metode lain, misalnya POST untuk “ini ada data yang mau saya simpan” (bayangkan mengirim sebuah formulir).
/id/sebuah-artikel adalah path — halaman mana yang kamu minta.
Baris di bawahnya adalah header: catatan tambahan tentang permintaan tersebut, seperti situs mana yang kamu maksud (Host) dan jenis konten apa yang bisa kamu terima.

Itulah keseluruhan permintaan: sebuah metode, sebuah path, dan beberapa header. Pesan ini lalu melintasi jaringan menuju server. HTTP adalah tulang punggung seluruh web, jadi ia pun akan mendapat artikel khususnya sendiri.

Langkah 5 — Server menjawab

Server menerima permintaan itu lalu mulai bekerja. Ia mencari tahu apa yang kamu minta, mungkin mengambil data dari sebuah basis data, lalu merangkai sebuah jawaban. Setelah itu ia mengirim kembali sebuah respons HTTP.

Sebuah respons terdiri dari tiga bagian: sebuah status, beberapa header, dan isinya (body).

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>...isi halaman...</html>

Baris pertama membawa sebuah kode status — angka pendek yang memberi tahu browser bagaimana hasilnya. Kamu mungkin pernah melihat salah satunya: si terkenal 404. Berikut beberapa yang layak kamu kenali:

Kode	Arti	Bahasa Sehari-hari
200	OK	Ini yang kamu minta.
301 / 302	Redirect	Sudah pindah — lihat ke sini saja.
404	Not Found	Saya tidak punya halaman itu.
403	Forbidden	Kamu tidak boleh melihat ini.
500	Server Error	Ada yang rusak di pihak saya.

Setelah status dan header, barulah datang body: dalam kasus kita, ini adalah HTML asli dari halaman tersebut. HTML adalah deskripsi berbasis teks tentang struktur sebuah halaman — judul, paragraf, gambar, dan tautannya. Server hanya menyerahkan deskripsi ini; ia sendiri tidak menggambar apa pun.

Respons pertama jarang berisi halaman utuh

HTML pertama itu biasanya cuma kerangka. Di dalamnya ada rujukan ke berkas-berkas lain — stylesheet, gambar, font, skrip. Browser membaca HTML, menemukan setiap rujukan, lalu menembakkan lebih banyak permintaan untuk mengambilnya. Satu halaman yang kamu buka bisa diam-diam memicu puluhan perjalanan bolak-balik.

Langkah 6 — Browser merender halaman

Sekarang browser sudah memegang HTML mentahnya, dan babak terakhir pun dimulai: mengubah teks itu menjadi sesuatu yang bisa kamu lihat dan pakai. Tahap ini disebut rendering.

Secara garis besar, browser melakukan tiga hal:

Membaca HTML untuk memahami strukturnya — ini judul, itu paragraf, ini gambar. Browser menyusun sebuah pohon internal berisi semua elemen tersebut.
Menerapkan gaya tampilan. Berkas terpisah yang ditulis dengan CSS menjelaskan bagaimana segala sesuatu seharusnya terlihat: warna, font, jarak, tata letak. Browser mengambil berkas itu lalu mengecatnya sesuai aturan tadi.
Menjalankan skrip. Berkas yang ditulis dengan JavaScript menambahkan perilaku — menu yang bisa terbuka, konten yang ikut berubah, tombol yang merespons. Browser menjalankan kode ini agar halaman menjadi interaktif.

Seiring setiap berkas tambahan tiba, gambarnya semakin terisi. Teks muncul lebih dulu, lalu gambar menempati posisinya, kemudian halaman menjadi bisa diklik. Apa yang terasa seperti satu kali muat seketika sebenarnya adalah rentetan kedatangan yang sangat cepat, masing-masing membuat halaman sedikit lebih utuh.

Seluruh perjalanan dalam satu pandangan

Inilah keseluruhan perjalanannya dalam satu gambar:

   KAMU                   JARINGAN                SERVER
    │                        │                       │
    │ 1. ketik URL / klik    │                       │
    │───────────────────────▶│                       │
    │ 2. DNS: nama → IP       │                       │
    │◀──────────────────────▶│                       │
    │ 3. buka koneksi         │                       │
    │───────────────────────────────────────────────▶│
    │ 4. permintaan HTTP      │                       │
    │───────────────────────────────────────────────▶│
    │                         │   5. susun respons    │
    │ 6. respons HTTP (HTML)  │                       │
    │◀───────────────────────────────────────────────│
    │ 7. render: HTML+CSS+JS  │                       │
    │   (+ ambil berkas lain) │                       │
    ▼                         │                       │
 HALAMAN!                     │                       │

Dibaca dari atas ke bawah, itulah perjalanan hidup satu kali tampilan halaman. Kalikan dengan puluhan berkas kecil yang dibutuhkan setiap halaman, dan kamu mendapat lalu lintas yang tenang namun terus-menerus yang menggerakkan semua aktivitasmu di internet.

Rangkuman dan langkah berikutnya

Mari kita kumpulkan semuanya menjadi beberapa kalimat yang bisa kamu bawa pulang:

Kamu memberikan sebuah URL ke browser dengan mengetik atau mengklik.
DNS mengubah nama yang ramah bagi manusia menjadi sebuah alamat IP numerik agar jaringan bisa menemukan server.
Browser membuka koneksi ke server itu, mengamankannya dengan enkripsi ketika alamatnya memakai https.
Browser mengirim sebuah permintaan HTTP — sebuah metode, sebuah path, dan beberapa header.
Server membalas dengan sebuah respons HTTP — sebuah kode status plus HTML halaman.
Browser merender HTML itu, menarik CSS dan JavaScript, lalu halaman yang sudah jadi dan interaktif pun muncul.

Itulah tulang punggung seluruh web. Hampir semua hal lain yang akan kamu pelajari — bagaimana situs dibangun, bagaimana aplikasi saling berbicara, bagaimana data dikirim dan disimpan — bergantung pada satu putaran permintaan dan respons ini.

Dua bagian dalam cerita ini cukup besar untuk dibahas tersendiri, dan keduanya adalah perhentian berikutnya yang paling masuk akal: DNS, sistem penamaan yang menemukan server, dan HTTP, bahasa yang dipakai browser dan server. Begitu kedua hal ini terpasang dengan jelas di kepalamu, sisa dunia web akan terasa jauh lebih sedikit seperti sihir dan jauh lebih seperti sebuah sistem yang kamu pahami.