DailyBlog.id - Lama tidak posting di blog ini, dan akhirnya saya bisa kembali untuk memposting lagi. Dikarenakan saya tidak memiliki waktu untuk mengurus blog ini lagi. Dan akhirnya saya sekarang punya waktu untuk kembali memposting di blog ini lagi. Nah untuk postingan kali ini saya akan membagi tutorial pada kalian semua, bagaimana caranya kita mendapatkan lokasi dari pengguna hanya dengan menggunakan HTML dan JavaScript. Caranya sangat mudah sekali, dengan bermodalkan yang namanya Geolocation API, kalian bisa mendapatkan lokasi dari pengguna yang membuka halaman tersebut.
Seperti kalian bisa mendapatkan yang namanya Latitude, Longitude, Accuracy, dll. Untuk detail lengkap mengenai geolocation ini saya tidak begitu mendalami, apakah geolocation api ini dapat digunakan di berbagai browser, terutama safari. Yang jelas ketika saya mencobanya di browser dengan tanda kutip menggunakan bawaan chrome, seperti opera dan google chrome sendiri. Dan bisa digunakan, lalu untuk firefox dan microsoft edge masih juga bisa digunakan.
Sebelum memasuki tutorialnya, disini saya akan memberitau kekurangan dari Geolocation API ini. Dimana menurut saya kekurangan dari geolocation API ini harus meminta ijin kepada pengguna. Agar mereka dapat mengijinkan lokasi mereka dilacak. Tidak seperti mendapatkan lokasi dari IP yang digunakan, yang bisa dilacak tanpa harus minta ijin terlebih dahulu melalui browser. Dan selain itu, rincian lokasinya tidak bisa lengkap yang didapatkan, mungkin hanya beberapa saja yang bisa. Seperti latitude, longitude, acuracy, dll.
Namun itu juga bisa menjadi keunggulan dari geolocation (dari sudut pandang yang mengakses halaman/peungguna), karena tidak langsung mendapatkan lokasi dari pengguna. Dan masih bisa bersifat privasi, jika pengguna tidak mengijinkan lokasinya dilacak.
Jika sudah mengetahui kekurangan dan kelebihan dari geolocation api. Kalian bisa ikuti langkah-langkah yang ada di bawah ini.
Cara Mendapatkan Lokasi Pengguna dengan HTML dan Geolocation API
1. Langkah pertama yang dapat kalian lakukan yaitu buat file dengan nama (coba_geolocation.html). Kalian boleh bebas membuat nama filenya, yang penting memiliki ekstensi .html
2. Setelah itu kalian bisa copy script yang di bawah ini, lalu paste di file yang sudah kalian buat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Mendapatkan Lokasi Pengguna dengan HTML GEOLOCATION API</title>
</head>
<body>
<h2>Cara Mendapatkan Lokasi Pengguna dengan HTML GEOLOCATION API</h2>
<button id="dapatin_lokasi">Dapatin Lokasi</button>
<br/><br/>
<div id="hasil"></div>
<script type="text/javascript">
const output = document.getElementById("hasil");
document.getElementById("dapatin_lokasi").addEventListener("click", () =>
{
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(sukses, error);
else
alert('Browser ini tidak mendukung Geolocation API.');
});
const sukses = (posisi) =>
{
const koordinat = posisi.coords;
output.innerHTML = `
Latitude: ${koordinat.latitude != null ? koordinat.latitude : '-'}<br/>
Longitude: ${koordinat.longitude != null ? koordinat.longitude : '-'}<br/>
Accuracy: ${koordinat.accuracy != null ? koordinat.accuracy : '-'}<br/>
Altitude: ${koordinat.altitude != null ? koordinat.altitude : '-'}<br/>
Altitude Accuracy: ${koordinat.altitudeAccuracy != null ? koordinat.altitudeAccuracy : '-'}<br/>
Heading: ${koordinat.heading != null ? koordinat.heading : '-'}<br/>
Speed: ${koordinat.speed != null ? koordinat.speed : '-'}<br/>
Timestamp: ${posisi.timestamp != null ? posisi.timestamp : '-'}`;
}
const error = (error) => output.innerHTML = `Error Code ${error.code}<br/>Message: ${error.message}`;
</script>
</body>
</html>
3. Jika sudah, kalian bisa coba buka file tersebut di browser. Contoh: http://localhost/coba_geolocation.html
4. Lalu akan membuka halaman baru, dan klik tombol "Dapatin Lokasi". Dan browser akan meminta untuk diijinkan atau diallow, agar browser ini bisa melacak lokasi dari orang yang membuka halaman tersebut. Seperti contoh gambar di bawah ini, nah kalian bisa coba allow kan, dan coba klik ulang tombol "Dapatin Lokasi".
Bisa dilihat bahwa browser akan mengirimkan informasi lokasi dari pengguna yang membuka halaman tersebut. Seperti Latitude, Longitude, Accuracy, dll.
Sangat mudah kan? hanya bermodalkan HTML dan JavaScript bisa mendapatkan lokasi pengguna. Ya walaupun tidak sangat detail mendapatkan informasinya. Tidak seperti informasi lokasi yang didapatkan dari IP. Jika menggunakan IP, pasti akan mahal biaya langgananAPI nya. Tapi untuk geolocation ini gratis, tapi kekurangannya yaitu pengguna harus meng-allowkan, biar bisa mendapatkan rincian informasi lokasinya. Kalau diblock/tidak diijinkan, ya kita tidak bisa mendapatkan lokasi dari si pengguna tersebut.
Mungkin cukup sekian tutorial dari saya, semoga tutorial yang saya bagikan ini dapat bermanfaat bagi kalian semuanya. Dan jika saya ada salah kata atau ada kekurangan lainnya, saya mohon maaf. Sekian dan terima kasih.
Selamat mencoba!