Sign in Subscribe
Javascript

Cara Mengakses Nama Host dalam URL dengan Host Name Location

Cara Mengakses Nama Host dalam URL dengan Host Name Location
Photo by Firmbee.com / Unsplash

Dalam pengembangan web, kita sering kali perlu mengakses nama host dari URL yang sedang digunakan oleh pengguna. Ini berguna untuk berbagai keperluan seperti redirect, validasi domain, pengaturan konfigurasi, atau debugging. JavaScript menyediakan cara mudah untuk mendapatkan nama host dengan menggunakan location.hostname.

Dengan location.hostname, kita bisa mengetahui domain dari URL tanpa protokol dan tanpa path, memungkinkan kita untuk menangani navigasi dan kontrol akses dengan lebih fleksibel.

Di artikel ini, kita akan membahas cara menggunakan location.hostname, perbedaannya dengan properti lainnya di window.location, serta contoh implementasi dalam proyek web.

Apa Itu Host Name Location?

location.hostname adalah properti dalam JavaScript yang mengembalikan nama domain dari URL tanpa menyertakan protokol (http:// atau https://) dan tanpa path tambahan.

Contoh jika kita mengakses halaman dengan URL:

https://www.example.com:8080/page.html

Maka jika kita menjalankan kode berikut:

console.log(location.hostname);

Output yang dihasilkan:

www.example.com
Catatan: location.hostname tidak akan menyertakan port. Jika ingin mendapatkan domain beserta port, gunakan location.host.

Perbedaan location.hostname dan location.host

Properti Output Termasuk Port?
location.hostname www.example.com ❌ Tidak
location.host www.example.com:8080 ✅ Ya
Gunakan location.hostname jika hanya perlu nama domain, dan location.host jika ingin mendapatkan domain beserta portnya.

Cara Menggunakan location.hostname

1. Menampilkan Nama Host dalam Halaman Web

Kita bisa menampilkan nama host di dalam halaman web agar pengguna tahu domain yang sedang mereka akses.

<p>Nama Host: <span id="host"></span></p>
<script>
    document.getElementById("host").textContent = location.hostname;
</script>

Jika pengguna membuka halaman dari https://sub.example.com, maka yang ditampilkan di halaman akan menjadi:

Nama Host: sub.example.com

2. Redirect Berdasarkan Nama Host

Kadang kita ingin mengalihkan pengguna ke domain tertentu berdasarkan nama host yang mereka gunakan.

if (location.hostname === "staging.example.com") {
    location.href = "https://www.example.com";
}

Jika pengguna mengakses staging.example.com, mereka akan dialihkan ke versi utama di www.example.com secara otomatis.

3. Menyesuaikan Konfigurasi Berdasarkan Host

Dalam pengembangan aplikasi berbasis domain, kita bisa menggunakan location.hostname untuk mengatur konfigurasi API atau layanan yang berbeda berdasarkan domain.

let apiBaseUrl;
if (location.hostname === "localhost") {
    apiBaseUrl = "http://localhost:5000/api";
} else if (location.hostname === "staging.example.com") {
    apiBaseUrl = "https://staging-api.example.com";
} else {
    apiBaseUrl = "https://api.example.com";
}
console.log("API Base URL: ", apiBaseUrl);

Dengan cara ini, aplikasi akan otomatis menggunakan base URL API yang sesuai dengan domain yang sedang diakses.

Kapan Harus Menggunakan location.hostname?

✅ Jika ingin menampilkan nama host dalam halaman web untuk referensi pengguna.
✅ Jika ingin mengalihkan pengguna dari domain tertentu ke domain lain.
✅ Jika ingin menyesuaikan konfigurasi aplikasi berdasarkan lingkungan domain (development, staging, production).
❌ Jangan gunakan jika ingin mendapatkan jalur atau parameter dari URL, karena location.hostname hanya mengembalikan nama host.

Kesimpulan

  • location.hostname digunakan untuk mendapatkan nama host dalam URL tanpa menyertakan protokol atau path.
  • Berguna untuk redirect, debugging, dan konfigurasi aplikasi berbasis domain.
  • Berbeda dengan location.host, karena location.hostname tidak menyertakan port.
  • Dapat digunakan untuk menampilkan nama domain saat ini dalam halaman, atau mengalihkan pengguna berdasarkan domain tertentu.

Dengan memahami cara kerja Host Name Location, kita bisa membuat aplikasi web yang lebih fleksibel, aman, dan dinamis sesuai dengan kebutuhan pengguna!

Read next