urldasarquery-stringPemula4 mnt baca

Anatomi URL: Membaca Alamat Web Bagian per Bagian

Membedah URL menjadi protokol, host, port, path, query string, dan fragment, plus cara membaca query parameter di JavaScript.

URL bukan sekadar alamat

Kamu mengetik URL setiap hari, tapi pernahkah membacanya bagian per bagian? Setiap potongan URL punya tugas sendiri. Ambil contoh:

https://learn.omnidevv.biz.id:443/tutorial/http?cari=fetch&hal=2#contoh

Mari bedah dari kiri ke kanan:

  • https : protokol, aturan komunikasi yang dipakai (bisa juga http, ftp, dan lain-lain).
  • learn.omnidevv.biz.id : host, nama server tujuan. Komputer mengubahnya jadi alamat IP lewat DNS.
  • :443 : port, "pintu" di server. Port 443 adalah default HTTPS, port 80 untuk HTTP, jadi biasanya tidak ditulis.
  • /tutorial/http : path, lokasi resource yang diminta di server.
  • ?cari=fetch&hal=2 : query string, parameter tambahan berupa pasangan kunci dan nilai.
  • #contoh : fragment, penanda posisi di halaman. Ini tidak pernah dikirim ke server, hanya dipakai browser.

Query string: cara web mengirim parameter

Query string diawali tanda ?, lalu pasangan kunci=nilai yang dipisah tanda &. Inilah cara paling umum mengirim filter, kata kunci pencarian, atau nomor halaman ke API. Contoh request pencarian produk:

http
GET /api/produk?kategori=kopi&urut=harga-asc&hal=1 HTTP/1.1
Host: tokokopi.example.com

Di JavaScript, jangan parsing query string secara manual dengan split. Pakai class bawaan URLSearchParams yang sudah menangani encoding karakter spesial:

javascript
const params = new URLSearchParams({ kategori: "kopi susu", hal: "2" });
const url = "https://tokokopi.example.com/api/produk?" + params.toString();
// hasil: https://tokokopi.example.com/api/produk?kategori=kopi+susu&hal=2

// membaca kembali
const dibaca = new URLSearchParams("?kategori=kopi&hal=2");
console.log(dibaca.get("kategori")); // "kopi"

Perhatikan spasi otomatis diubah jadi + atau %20. Itulah URL encoding, dan URLSearchParams mengurusnya untukmu.

Port yang sering kamu temui

Port default (80 untuk HTTP, 443 untuk HTTPS) biasanya disembunyikan, tapi saat development kamu akan sering melihat port eksplisit. http://localhost:3000 artinya server di komputermu sendiri lewat port 3000 (umum untuk Next.js), sedangkan http://localhost:8000 sering dipakai Laravel atau Python. Kalau frontend di port 3000 memanggil API di port 8000, browser menganggap itu origin berbeda, dan di sinilah urusan CORS mulai relevan. Jadi biasakan membaca port sebagai bagian dari identitas server, bukan sekadar angka tempelan.

Catatan teknis: Query string terlihat jelas di address bar, history browser, dan log server. Jangan pernah menaruh data sensitif di sana seperti password atau token login. Data sensitif dikirim lewat body request atau header Authorization, yang akan kita bahas di modul berikutnya.