URIS DOCS

COMPONENTS

URL
Description: Uniform Resource Locator, subset URI yang mengidentifikasi lokasi resource dan cara mengambilnya.
Example: 
https://user:pass@example.com:443/path?query=1#fragment
Output: URL lengkap
Scheme
Description: Protokol yang digunakan (https, http, ftp, mailto, file, dll). Diikuti oleh :// atau :.
Example: 
https://
Output: https
Authority
Description: Bagian setelah scheme, terdiri dari userinfo@, host, dan port (opsional). Dipisahkan dari path dengan /.
Example: 
user:pass@example.com:443
Output: user:pass@example.com:443
Host
Description: Nama domain atau alamat IP server.
Example: 
example.com
Output: example.com
Port
Description: Port jaringan, opsional (default 80 untuk HTTP, 443 untuk HTTPS).
Example: 
:8080
Output: 8080
Path
Description: Lokasi resource di server, dipisahkan oleh /. Dapat merefleksikan struktur file atau route.
Example: 
/blog/2024/my-post
Output: /blog/2024/my-post
Query String
Description: Parameter key=value dipisahkan &, dimulai setelah tanda tanya ?.
Example: 
?q=search&lang=id&page=2
Output: q=search, lang=id, page=2
Fragment
Description: Referensi ke sub-bagian resource, dimulai setelah tanda pagar #. Tidak dikirim ke server.
Example: 
#section-2
Output: Lompat ke elemen id='section-2'

ENCODING

Percent-encoding
Description: Mengganti karakter khusus dengan % diikuti dua digit heksadesimal UTF-8.
Example: 
Spasi → %20, # → %23, / → %2F
Output: URI yang valid
encodeURI()
Description: Mengenkode URI lengkap, tidak mengubah karakter yang memiliki makna khusus (:/?#[]@!$&'()*+,;=).
Example: 
encodeURI('https://example.com/path with spaces')
Output: https://example.com/path%20with%20spaces
encodeURIComponent()
Description: Mengenkode komponen URI (nilai query), mengkodekan lebih banyak karakter termasuk ?&=/.
Example: 
encodeURIComponent('key=value&other=another')
Output: key%3Dvalue%26other%3Danother
decodeURI()
Description: Mendekode URI yang telah di-encodeURI().
Example: 
decodeURI('https://example.com/path%20with%20spaces')
Output: https://example.com/path with spaces
decodeURIComponent()
Description: Mendekode komponen URI yang telah di-encodeURIComponent().
Example: 
decodeURIComponent('key%3Dvalue')
Output: key=value
reserved characters
Description: Karakter yang memiliki arti khusus dalam URI dan tidak boleh digunakan tanpa encoding: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
Example: 
Digunakan untuk struktur URI, harus di-encode jika bagian dari data.
Output: Set karakter khusus
unreserved characters
Description: Karakter yang aman tanpa encoding: A-Z a-z 0-9 - _ . ~
Example: 
Dapat langsung digunakan dalam URI.
Output: Alfanumerik dan - _ . ~

URL-API

new URL()
Description: Constructor untuk membuat dan memanipulasi URL. Dapat melempar TypeError jika URL tidak valid.
Example: 
const url = new URL('https://example.com:8080/path?q=test#hash')
Output: URL object
url.href
Description: URL lengkap sebagai string.
Example: 
url.href
Output: https://example.com:8080/path?q=test#hash
url.origin
Description: Origin URL (scheme + host + port).
Example: 
url.origin
Output: https://example.com:8080
url.protocol
Description: Scheme / protokol termasuk titik dua.
Example: 
url.protocol
Output: https:
url.hostname
Description: Nama host tanpa port.
Example: 
url.hostname
Output: example.com
url.port
Description: Port sebagai string.
Example: 
url.port
Output: 8080
url.pathname
Description: Path termasuk awalan /.
Example: 
url.pathname
Output: /path
url.search
Description: Query string termasuk tanda tanya ?. Dapat di-set untuk memperbarui query.
Example: 
url.search
Output: ?q=test
url.hash
Description: Fragment termasuk tanda pagar #.
Example: 
url.hash
Output: #hash
url.searchParams
Description: Objek URLSearchParams untuk manipulasi parameter query.
Example: 
url.searchParams.get('q')
Output: test
URLSearchParams
Description: Interface untuk bekerja dengan query string secara langsung.
Example: 
const params = new URLSearchParams('q=hello&page=1')
Output: params.get('page') = '1'
params.get(key)
Description: Mendapatkan nilai parameter pertama.
Example: 
params.get('q')
Output: 'hello'
params.getAll(key)
Description: Mendapatkan semua nilai untuk parameter yang sama.
Example: 
params.getAll('tag')
Output: ['js', 'css']
params.set(key, value)
Description: Mengatur nilai parameter (menimpa yang sudah ada).
Example: 
params.set('q', 'new')
Output: q=new
params.append(key, value)
Description: Menambahkan parameter (bisa ganda).
Example: 
params.append('tag', 'html')
Output: tag=js&tag=css&tag=html
params.delete(key)
Description: Menghapus parameter.
Example: 
params.delete('page')
Output: page dihapus
params.toString()
Description: Mengembalikan query string tanpa ?.
Example: 
params.toString()
Output: q=test&page=1

DATA-URLS

Data URL format
Description: Menyematkan data kecil langsung di URI, tidak perlu HTTP request.
Example: 
data:[mediatype][;base64],data
Output: URI mandiri
Plain text data URL
Description: Data teks tanpa encoding base64.
Example: 
data:text/plain,Hello%20World!
Output: Teks 'Hello World!'
Base64 data URL
Description: Data binary dienkode base64.
Example: 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
Output: Gambar inline
Data URL in CSS
Description: Gunakan sebagai nilai url() untuk background atau border-image.
Example: 
background-image: url('data:image/svg+xml,...');
Output: Gambar latar inline

RELATIVE-ABSOLUTE

Absolute URI
Description: Mengandung scheme dan authority, dapat diakses secara mandiri.
Example: 
https://example.com/about
Output: URL lengkap
Relative URI
Description: Bergantung pada base URI. Tanpa scheme atau authority.
Example: 
../images/photo.jpg
Output: Diresolve terhadap base
Root-relative URI
Description: Dimulai dengan /, merujuk ke root dari origin yang sama.
Example: 
/css/style.css
Output: Relative terhadap root domain saat ini
<base> element
Description: Mendefinisikan base URI untuk semua relative URI dalam dokumen.
Example: 
<base href="https://example.com/app/">
Output: Semua link relatif dari /app/

BEST-PRACTICES

Gunakan HTTPS
Description: Selalu gunakan skema https untuk keamanan dan privasi.
Example: 
https://example.com
Output: Koneksi terenkripsi
URL pendek dan deskriptif
Description: Gunakan path yang mudah dibaca manusia dan hindari parameter tidak perlu.
Example: 
/blog/belajar-javascript
Output: User-friendly URL
Validasi dan sanitasi input URL
Description: Hindari SSRF dan open redirect dengan memvalidasi URL dari pengguna.
Example: 
Gunakan new URL() dengan try/catch, atau perpustakaan validasi.
Output: URL aman
Encode komponen query dengan benar
Description: Gunakan encodeURIComponent() untuk nilai parameter.
Example: 
const query = '?name=' + encodeURIComponent('Ridho Akbar')
Output: ?name=Ridho%20Akbar
Hindari menyertakan rahasia di URL
Description: Token atau password di URL bisa terekspos di log server, history browser, dan referrer header.
Example: 
Gunakan POST body atau header Authorization.
Output: Rahasia tidak bocor