Anatomi sebuah URL

Kamu mengetik sebuah alamat web, menekan Enter, lalu halaman muncul. Rasanya seperti sihir, padahal alamat itu sebenarnya sebuah instruksi rapi yang penuh makna. Setiap karakternya punya tugas. Begitu kamu bisa membaca URL seperti cara browser membacanya, web berhenti terasa misterius dan mulai terasa seperti sesuatu yang masuk akal.

Di artikel ini kita akan membongkar satu tautan biasa, sepotong demi sepotong. Kita pakai contoh yang akrab seperti example.com dan acy-partner.com. Di akhir nanti, kamu bakal bisa melirik alamat apa pun dan langsung tahu apa yang sedang diperintahkan tiap bagiannya ke browser.

Apa sebenarnya arti “URL”

URL adalah singkatan dari Uniform Resource Locator. Buang istilah teknisnya, dan artinya cuma “cara baku untuk menunjuk sesuatu di internet.” Sesuatu itu disebut resource — biasanya halaman web, tapi bisa juga gambar, video, berkas, atau data yang dikembalikan oleh sebuah program.

Kata uniform di sini yang penting. Karena semua orang sepakat memakai format yang sama, browser kamu, sebuah mesin pencari, dan sebuah server di belahan bumi lain semuanya membaca alamat dengan cara yang sama persis. Tidak perlu tebak-tebakan.

Inilah bentuk lengkap sebuah URL, dengan semua bagian opsionalnya disertakan:

scheme://host:port/path?query#fragment

Sebagian besar tautan sehari-hari tidak menampilkan semuanya. Banyak bagian yang sifatnya opsional, dan browser diam-diam mengisi nilai default yang masuk akal saat kamu tidak menuliskannya. Mari kita telusuri satu per satu.

Contoh dengan label

Sebelum masuk lebih dalam, ini satu alamat dengan setiap bagiannya diberi label. Pegang gambaran ini selama kita berjalan.

 https://www.acy-partner.com:443/blog/post?id=5#summary
 └─┬─┘   └──────┬─────────┘ └┬┘ └───┬────┘ └─┬──┘ └─┬───┘
 scheme       host          port   path     query  fragment

Dibaca dari kiri ke kanan, browser bertanya pada dirinya sendiri: bagaimana cara menyambung (scheme), siapa yang diajak bicara (host), pintu mana yang harus diketuk (port), apa yang diinginkan (path), dengan detail tambahan apa (query), dan di bagian mana halaman aku harus mendarat (fragment).

Scheme: cara menyambung

Scheme muncul paling depan, sebelum ://. Bagian ini memberi tahu browser aturan mana — protokol mana — yang harus dipakai untuk percakapannya.

https://...
└─┬─┘
scheme

Dua yang paling sering kamu lihat:

Scheme	Artinya
`http`	HyperText Transfer Protocol biasa — cara asli meminta halaman. Tanpa enkripsi.
`https`	Sama, tapi aman: koneksinya dienkripsi, sehingga orang lain tidak bisa membaca atau mengutak-atiknya saat data lewat.

Ada scheme lain juga — mailto: membuka draf email, ftp: untuk transfer berkas, tel: memulai panggilan telepon di ponsel — tapi untuk menjelajah web, https yang kamu butuhkan.

Selalu utamakan https

Saat kamu membuat atau membagikan tautan, pakai https. Ini melindungi data pengunjung dan memang diharapkan oleh browser modern, yang bisa memperingatkan orang agar menjauhi halaman http biasa. Ikon gembok kecil di bilah alamat itu berasal dari https.

Perhatikan :// tepat setelah scheme. Tanda titik dua mengakhiri scheme, dan dua garis miring menandakan bahwa nama host akan menyusul. Itu sekadar tanda baca yang memisahkan satu bagian dari bagian lain.

Host: siapa yang kamu ajak bicara

Host adalah alamat dari mesin yang ingin kamu hubungi. Biasanya tampil sebagai nama domain yang bisa kamu baca, misalnya www.acy-partner.com.

https://www.acy-partner.com/...
        └────────┬────────┘
              host

Sebuah nama domain sebenarnya tersusun dari potongan-potongan kecil, dibaca dari kanan ke kiri:

www  .  acy-partner  .  com
 │          │           │
subdomain   nama       top-level domain (TLD)

com adalah top-level domain (TLD). Yang lain termasuk org, net, dan kode negara seperti id untuk Indonesia.
acy-partner adalah nama terdaftar yang dimiliki seseorang atau sebuah perusahaan.
www adalah subdomain — label di depan yang menunjuk ke area tertentu. www itu tradisi untuk situs utama, tapi kamu bisa punya yang lain, misalnya blog.acy-partner.com untuk sebuah blog, semuanya di bawah nama terdaftar yang sama.

Di balik layar, nama domain yang ramah harus diterjemahkan dulu menjadi alamat IP berupa angka (sesuatu seperti 93.184.216.34) sebelum koneksi apa pun bisa terjadi. Penerjemahan itu ditangani oleh DNS, semacam buku telepon internet — topik yang layak ditelusuri tersendiri begitu kamu sudah nyaman di sini.

Domain vs. host

Orang sering memakai kata “domain” dan “host” secara longgar. Untuk keperluan sehari-hari, anggap host sebagai “bagian tepat setelah :// dan sebelum /, :, ?, atau # berikutnya.” Itulah potongan yang menentukan server mana yang harus dihubungi.

Port: pintu mana yang diketuk

Satu server bisa menyediakan banyak layanan sekaligus. Port adalah angka yang menyatakan layanan spesifik mana — “pintu” yang mana — yang dituju oleh permintaanmu.

https://www.acy-partner.com:443/...
                           └─┬─┘
                           port

Kabar baiknya: kamu hampir tidak pernah perlu mengetik port. Tiap scheme punya nilai default, dan browser mengisinya untukmu.

Scheme	Port default
`http`	80
`https`	443

Jadi https://www.acy-partner.com dan https://www.acy-partner.com:443 artinya sama persis. Port yang ditulis eksplisit biasanya hanya kamu temui saat pengembangan, misalnya http://localhost:3000, ketika sebuah server lokal berjalan di pintu yang bukan standar.

Path: apa yang kamu inginkan

Setelah host (dan port opsional) datang path — segala sesuatu mulai dari / pertama, sampai sebelum ? atau #. Path menunjuk ke resource tertentu di server itu, mirip lokasi folder-dan-berkas.

https://www.acy-partner.com/blog/post
                           └────┬────┘
                              path

Path yang cuma / berarti halaman utama — akar dari situs. Path yang lebih dalam masuk ke bagian atau halaman tertentu:

/                     →  halaman utama
/blog                 →  bagian blog
/blog/post            →  satu artikel tertentu
/images/logo.png      →  sebuah berkas gambar

Path itu peka huruf besar-kecil di banyak server, jadi /Blog dan /blog bisa membawamu ke dua tempat berbeda. Kalau ragu, samakan persis penulisan huruf besar-kecil seperti yang kamu terima.

Perhatikan garis miring di akhir

/blog dan /blog/ secara teknis adalah path yang berbeda. Sebagian besar situs memperlakukannya sama dan mengalihkan yang satu ke yang lain, tapi tidak semua begitu. Kalau sebuah tautan rusak, garis miring akhir yang hilang atau berlebih sering jadi biang keladinya.

Query: detail tambahan

Kadang path saja tidak cukup — kamu perlu menyertakan informasi tambahan dalam permintaan, seperti kata kunci pencarian atau item mana yang ingin ditampilkan. Itulah tugas query string, yang diawali dengan ?.

https://www.acy-partner.com/blog/post?id=5
                                      └─┬─┘
                                     query

Query adalah daftar pasangan kunci/nilai. Tiap pasangan berbentuk kunci=nilai, dan beberapa pasangan disambung dengan &:

?id=5
?search=dns&page=2
?category=web&sort=newest&page=3

Membaca yang terakhir: cari di dalam category yang nilainya web, urutkan berdasar newest, dan tampilkan halaman (page) nomor 3. Server membaca nilai-nilai ini lalu memutuskan apa yang dikirim balik. Begini caranya alamat halaman yang sama bisa menampilkan isi yang berbeda — halaman hasil pencarian, misalnya, berubah total tergantung query-nya.

Karena beberapa karakter (spasi, &, =, dan lainnya) punya arti khusus di dalam query, karakter-karakter itu di-encode saat muncul sebagai data. Spasi, contohnya, sering berubah jadi %20 atau +. Kalau kamu melihat kode % yang aneh di sebuah tautan, itu cuma proses encoding yang aman, bukan sebuah kesalahan.

Fragment: di mana mendarat pada halaman

Bagian opsional terakhir adalah fragment, yang diperkenalkan oleh #. Bagian ini menunjuk ke titik tertentu di dalam halaman yang sudah dimuat.

https://www.acy-partner.com/blog/post#summary
                                      └───┬───┘
                                     fragment

Ketika sebuah halaman punya bagian yang ditandai dengan id summary, menambahkan #summary menyuruh browser menggulir langsung ke sana. Tautan “lompat ke bagian” di sebuah daftar isi bekerja persis seperti ini.

Hal penting yang perlu dipahami: fragment ditangani sepenuhnya oleh browser kamu dan tidak pernah dikirim ke server. Server mengirim seluruh halaman; tanda # hanya menentukan dari mana kamu mulai membaca. Itu sebabnya mengubah fragment saja bisa memindahkanmu di dalam halaman tanpa memuat ulang.

Menyatukan semuanya

Mari baca lagi contoh lengkap kita sekali lagi, sekarang setelah kamu tahu setiap bagiannya:

https://www.acy-partner.com:443/blog/post?id=5#summary

https — sambung secara aman.
www.acy-partner.com — ke server ini.
:443 — di pintu standar web aman (biasanya tersembunyi).
/blog/post — ambil resource artikel blog.
?id=5 — tepatnya yang diidentifikasi oleh id 5.
#summary — dan gulirkan aku ke bagian ringkasan begitu halaman selesai dimuat.

Satu baris itu adalah instruksi yang lengkap dan presisi. Dibaca dengan cara ini, ia bukan deretan karakter acak — melainkan sebuah kalimat yang browser tahu cara mengikutinya.

Acuan singkat

Bagian	Diawali dengan	Contoh	Fungsinya
Scheme	(paling depan)	`https`	Protokol mana yang dipakai
Host	`://`	`www.acy-partner.com`	Server mana yang dituju
Port	`:`	`:443`	Layanan mana di server itu
Path	`/`	`/blog/post`	Resource mana yang diinginkan
Query	`?`	`?id=5`	Detail tambahan untuk permintaan
Fragment	`#`	`#summary`	Di mana mendarat pada halaman

Rangkuman dan langkah berikutnya

URL hanya terlihat menakutkan sampai kamu tahu tata bahasanya. Ada urutan yang tetap — scheme, host, port, path, query, fragment — dan tiap bagian menjawab satu pertanyaan yang jelas. Sebagian besar waktu kamu hanya akan melihat beberapa di antaranya, karena browser menyediakan nilai default yang masuk akal untuk sisanya.

Lain kali ketika sebuah alamat berperilaku aneh, kamu sudah punya daftar periksa: Apakah scheme-nya https? Apakah host-nya dieja dengan benar? Apakah ada garis miring akhir yang menyelinap masuk? Apakah ada nilai query yang ter-encode dengan janggal? Membaca URL pelan-pelan dan dengan sengaja adalah keterampilan kecil yang manfaatnya terus terasa.

Langkah lanjut yang alami adalah menelusuri bagian host lebih dalam — bagaimana nama seperti acy-partner.com diubah menjadi alamat server sungguhan lewat DNS. Di situlah perjalanan dari “sebuah tautan” menjadi “sebuah halaman yang termuat” benar-benar dimulai.