Anatomi URL — Web Fundamentals

URL (Uniform Resource Locator) adalah alamat yang menunjukkan lokasi resource di internet. Memahami bagian-bagian URL penting untuk routing, SEO, dan…

URL (Uniform Resource Locator) adalah alamat lengkap sesuatu di web: halaman, gambar, atau data. Satu URL terdiri dari beberapa bagian, dan tiap bagian punya tugas sendiri: lewat jalur apa, ke server mana, minta apa, dengan pilihan apa. Mirip alamat surat: kota, jalan, nomor rumah, lalu catatan buat penerimanya.

🧪 Tebakan cepat: kamu membuka https://example.com/blog#komentar. Apa server ikut tahu kamu mau ke bagian #komentar? Tebak dulu, jawabannya ada di bagian "Yang dikirim ke server".

Bagian-bagian URL

https://belajarweb.dev:443/kursus/html?level=pemula&urut=baru#latihan
└─┬─┘   └──────┬─────┘└─┬┘└─────┬────┘└──────────┬──────────┘└───┬──┘
protocol   hostname   port    path             query         fragment

https adalah protocol (disebut juga scheme): cara browser bicara dengan server. https artinya HTTP yang dienkripsi. Sesudahnya selalu ada ://.
belajarweb.dev adalah hostname: nama server yang dituju. Bisa juga localhost (komputermu sendiri) atau alamat IP, nomor alamat server.
:443 adalah port: nomor "pintu" di server itu, karena satu server bisa menjalankan beberapa layanan. Biasanya gak ditulis: https otomatis memakai 443, http memakai 80.
/kursus/html adalah path: jalur ke halaman atau data di server itu. Selalu dimulai dengan /.
?level=pemula&urut=baru adalah query string: pilihan tambahan, berupa pasangan kunci=nilai yang dipisah &. Dimulai dengan ?.
#latihan adalah fragment (disebut juga hash): bagian tertentu di dalam halaman, biasanya elemen dengan id="latihan".

Mengurai URL dengan JavaScript

Browser punya pengurai URL bawaan, new URL():

const url = new URL("https://belajarweb.dev:8080/cari?q=html&halaman=2#hasil")

console.log(url.protocol) // "https:"
console.log(url.hostname) // "belajarweb.dev"
console.log(url.host)     // "belajarweb.dev:8080"
console.log(url.pathname) // "/cari"
console.log(url.search)   // "?q=html&halaman=2"
console.log(url.hash)     // "#hasil"
console.log(url.searchParams.get("halaman")) // "2"

new URL(teks) mengurai teks jadi object URL. Teksnya harus lengkap dengan https://, kalau gak, new URL melempar error.
url.protocol membawa titik dua di belakangnya: "https:". Butuh "https" saja? Pakai url.protocol.replace(":", "").
url.hostname cuma nama host-nya. url.host ikut membawa port-nya.
url.search dan url.hash ikut membawa ? dan # di depannya.
url.searchParams.get("halaman") mengambil satu nilai query. Nilainya selalu string: "2", bukan angka 2.

Semua query jadi satu object

url.searchParams.forEach mendatangi tiap pasangan query. Perhatikan urutannya: nilai dulu, baru kunci.

const params = {}
url.searchParams.forEach((value, key) => {
  params[key] = value
})

console.log(params) // { q: "html", halaman: "2" }

Yang dikirim ke server

Waktu kamu membuka https://example.com/blog?urut=baru#komentar, browser mengirim ini ke server example.com:

GET /blog?urut=baru HTTP/1.1
Host: example.com

Path dan query string ikut terkirim. Fragment #komentar gak ikut: browser menyimpannya sendiri, lalu scroll ke elemen dengan id="komentar" sesudah halamannya datang. Jadi jawaban tebakannya: server gak tahu.

⚠️ Jebakan yang sering ketemu

URL tanpa https://. new URL("belajarweb.dev") melempar TypeError, karena gak ada protocol-nya. Tulis lengkap, atau beri alamat dasarnya: new URL("/kursus", "https://belajarweb.dev").
Spasi dan & di nilai query. ?q=kaos & celana bikin celana terbaca jadi kunci baru. url.searchParams.set("q", "kaos & celana") mengubahnya jadi q=kaos+%26+celana yang aman, dan get("q") tetap mengembalikan teks aslinya.
Data rahasia di URL. URL tersimpan di riwayat browser dan di log server. Jangan taruh password atau token di query string.

💡 Origin. Protocol, hostname, dan port bersama-sama disebut origin, misalnya https://belajarweb.dev. Browser memakainya untuk aturan keamanan seperti CORS, dan url.origin memberikannya langsung.

TL;DR: URL = protocol https://, hostname, port (biasanya gak ditulis), path yang dimulai /, query string sesudah ? berisi pasangan kunci=nilai dipisah &, dan fragment sesudah #. new URL() mengurainya: protocol (dengan titik dua), hostname (tanpa port), pathname, search, hash, dan searchParams untuk tiap nilai query. Fragment gak pernah dikirim ke server.