Kembali ke Blog

Menguasai Struktur URL - Panduan Lengkap Komponen URL

URL (Uniform Resource Locators) adalah fundamental untuk web, namun banyak developer tidak sepenuhnya memahami strukturnya. Panduan komprehensif ini merinci setiap komponen URL dan menjelaskan bagaimana mereka bekerja bersama.

Anatomi URL

Mari mulai dengan contoh URL lengkap dan uraikan bagian per bagian:

https://user:[email protected]:8080/products/phones?brand=apple&sort=price#reviews

URL ini mengandung tujuh komponen berbeda:

  1. Protocol - https://
  2. Authentication - user:pass@
  3. Hostname - shop.example.com
  4. Port - :8080
  5. Path - /products/phones
  6. Query String - ?brand=apple&sort=price
  7. Fragment - #reviews

Mari kita jelajahi setiap komponen secara detail.

1. Protocol (Scheme)

Format: protocol://

Contoh:

  • https:// - Secure HTTP (disarankan untuk semua website)
  • http:// - Hypertext Transfer Protocol
  • ftp:// - File Transfer Protocol
  • mailto: - Alamat email
  • file:// - Sistem file lokal

Best Practice:

  • Selalu gunakan https:// untuk website produksi
  • Protocol menentukan bagaimana browser berkomunikasi dengan server
  • Beberapa protocol tidak memerlukan // (seperti mailto:)

2. Authentication (Opsional)

Format: username:password@

Contoh: admin:[email protected]

Catatan Penting:

  • โš ๏ธ Jangan pernah gunakan ini di URL produksi - ini mengekspos kredensial dalam plain text
  • Terutama digunakan untuk tool internal atau pengembangan lokal
  • Autentikasi modern menggunakan header atau token sebagai gantinya
  • Jika ada, ia datang sebelum hostname

3. Hostname (Domain)

Format: subdomain.domain.tld

Contoh:

  • www.example.com
  • api.github.com
  • mail.google.com
  • localhost (untuk pengembangan lokal)
  • 192.168.1.1 (alamat IP)

Komponen:

  • Subdomain: www, api, mail (opsional)
  • Domain: example, github, google
  • TLD: .com, .org, .io (Top-Level Domain)

Best Practice:

  • Gunakan subdomain yang bermakna (api., admin., blog.)
  • Jaga domain tetap pendek dan mudah diingat
  • Pertimbangkan SEO saat memilih nama domain

4. Port (Opsional)

Format: :number

Port Umum:

  • :80 - Default untuk HTTP (biasanya dihilangkan)
  • :443 - Default untuk HTTPS (biasanya dihilangkan)
  • :8080 - Umum untuk server pengembangan
  • :3000 - Populer untuk aplikasi Node.js
  • :5432 - Database PostgreSQL
  • :27017 - MongoDB

Kapan Menentukan:

  • Hanya diperlukan saat menggunakan port non-standar
  • Port default secara otomatis diasumsikan
  • Environment pengembangan sering menggunakan port kustom

5. Path

Format: /segment1/segment2/resource

Contoh:

/products/electronics/phones
/blog/2026/01/article-title
/api/v1/users
/docs/getting-started.html

Best Practice:

  • Gunakan tanda hubung (-) bukan garis bawah (_)
  • Jaga path tetap jelas dan hierarkis
  • Gunakan huruf kecil untuk kompatibilitas lebih baik
  • RESTful API menggunakan path untuk mewakili resource
  • Pertimbangkan SEO - path deskriptif peringkatnya lebih baik

Segmen Path:

  • Setiap / memisahkan segmen
  • Segmen mewakili hierarki
  • Dapat berisi huruf, angka, tanda hubung, garis bawah
  • Karakter khusus harus di-encode URL

6. Query String (Parameter)

Format: ?key1=value1&key2=value2&key3=value3

Komponen:

  • Dimulai dengan ?
  • Pasangan dipisahkan oleh &
  • Setiap pasangan adalah key=value
  • Nilai harus di-encode URL

Contoh:

?search=laptop&price_max=1000&sort=price_asc
?user_id=123&token=abc&format=json
?page=2&per_page=20

Kasus Penggunaan Umum:

  • Filtering: ?category=books&author=smith
  • Sorting: ?sort=date&order=desc
  • Pagination: ?page=5&limit=10
  • Search: ?q=javascript+tutorial
  • API tokens: ?api_key=xyz123&format=json

Best Practice:

  • Selalu encode nilai parameter
  • Gunakan konvensi penamaan yang konsisten (snake_case atau camelCase)
  • Jaga parameter tetap bermakna dan mudah dibaca
  • Urutan biasanya tidak masalah (tapi dapat mempengaruhi caching)
  • Jangan taruh data sensitif di query string (muncul di log)

7. Fragment (Hash)

Format: #section-name

Contoh:

#introduction
#chapter-3
#comments
#top

Perilaku:

  • Fragment TIDAK dikirim ke server
  • Ditangani sepenuhnya oleh browser
  • Digunakan untuk scroll ke bagian halaman tertentu
  • Aplikasi single-page menggunakan fragment untuk routing
  • Dapat diakses melalui JavaScript (window.location.hash)

Best Practice:

  • Gunakan untuk navigasi dalam halaman
  • Jaga nama fragment tetap deskriptif
  • Gunakan tanda hubung untuk fragment multi-kata
  • Ingat fragment tidak memicu reload halaman

Karakter Khusus dalam URL

Karakter tertentu memiliki arti khusus dan harus di-encode ketika digunakan sebagai data:

KarakterTujuanEncoded
?Awal query string%3F
&Pemisah parameter%26
=Pemisah key-value%3D
#Identifier fragment%23
/Pemisah path%2F
Spasi%20 atau +
%Indikator encoding%25

Best Practice Konstruksi URL

1. Jaga URL Bersih dan Mudah Dibaca

โœ… Bagus: /products/laptops?brand=dell&price_max=1000
โŒ Buruk:  /p.php?id=123&cat=5&b=2

2. Gunakan HTTPS Di Mana-mana

โœ… Bagus: https://example.com
โŒ Buruk:  http://example.com

3. Encode Input Pengguna

// Contoh JavaScript
const query = encodeURIComponent(userInput);
const url = `https://api.example.com/search?q=${query}`;

4. Desain URL RESTful

โœ… Bagus:
GET    /api/users          - Daftar pengguna
GET    /api/users/123      - Dapatkan pengguna 123
POST   /api/users          - Buat pengguna
PUT    /api/users/123      - Update pengguna 123
DELETE /api/users/123      - Hapus pengguna 123

โŒ Buruk:
/api/getUsers
/api/createNewUser
/api/updateUserById?id=123

5. Versioning API

โœ… Bagus: /api/v1/users, /api/v2/users
โœ… Juga Bagus: api.example.com/v1/users
โŒ Buruk:  /api/users?version=1

Pola URL Umum

Halaman Produk E-commerce

https://shop.example.com/products/electronics/laptops/dell-xps-15
?variant=i7-16gb&color=silver

Post Blog

https://blog.example.com/2026/01/mastering-url-structure
#url-components

Endpoint API

https://api.example.com/v2/users
?page=1&limit=20&sort=created_at&order=desc

Hasil Pencarian

https://search.example.com/results
?q=web+development&category=tutorials&date_range=2026

Testing URL Anda

Gunakan tool gratis kami untuk bekerja dengan URL:

Kesimpulan

Memahami struktur URL sangat penting untuk pengembangan web. Setiap komponen melayani tujuan spesifik, dan mengetahui bagaimana mereka bekerja bersama membantu Anda:

  • Membangun API yang lebih baik
  • Debug masalah lebih cepat
  • Meningkatkan SEO
  • Membuat URL yang user-friendly
  • Menangani encoding dengan benar

Kuasai fundamental ini, dan Anda akan membangun aplikasi web yang lebih bersih dan lebih maintainable.

Ingin melihat URL Anda dipecah secara visual? Coba tool URL Parser kami untuk mengeksplorasi setiap komponen dengan kejelasan berkode warna.