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

Struktur lengkap URL:

https://user:[email protected]:443/courses/html?page=2&sort=asc#section-3
└─┬──┘ └───┬───┘ └──────┬─────────┘└┬┘ └────┬─────┘ └─────┬──────┘ └───┬───┘
protocol  auth       hostname     port    path       query string    fragment

Penjelasan setiap bagian:

1. Protocol (scheme): https:// — cara berkomunikasi (http, https, ftp, mailto)
2. Auth (opsional): user:pass@ — kredensial (jarang dipakai, tidak aman)
3. Hostname: www.belajarweb.dev — nama domain atau IP address
   • Subdomain: www (opsional, bisa api, admin, dll)
   • Domain: belajarweb
   • TLD: .dev
4. Port: :443 — port server (default: 80 untuk HTTP, 443 untuk HTTPS)
5. Path: /courses/html — lokasi resource di server
6. Query string: ?page=2&sort=asc — parameter tambahan (key=value pairs)
7. Fragment (hash): #section-3 — posisi di halaman (tidak dikirim ke server!)

URL Encoding: Karakter khusus harus di-encode. Spasi menjadi %20, & menjadi %26, dll.

// JavaScript URL API:
const url = new URL("https://belajarweb.dev/search?q=html css&page=1#results");

console.log(url.protocol);   // "https:"
console.log(url.hostname);   // "belajarweb.dev"
console.log(url.pathname);   // "/search"
console.log(url.search);     // "?q=html css&page=1"
console.log(url.hash);       // "#results"

// Mengambil query parameters:
const params = url.searchParams;
console.log(params.get("q"));    // "html css"
console.log(params.get("page")); // "1"

// Menambah parameter:
params.set("lang", "id");
console.log(url.toString());
// "https://belajarweb.dev/search?q=html+css&page=1&lang=id#results"

URL vs URI vs URN:

• URI (Uniform Resource Identifier) — identifikasi resource (umbrella term)
• URL — URI yang menunjukkan lokasi resource
• URN — URI yang menunjukkan nama resource (jarang dipakai di web)

Tips praktis:

• Gunakan kebab-case untuk path: /belajar-html bukan /belajar_html
• Query string case-sensitive di sebagian besar server
• Fragment tidak dikirim ke server — berguna untuk client-side navigation
• Gunakan URL API bawaan JavaScript daripada parsing manual dengan regex
• Selalu encode user input yang masuk ke URL untuk mencegah injection