HTML5

Latitude dan Longatude dengan HTML5

c5e27964bb92058aa5c10d1b06fb5e9c

Halo,

Sekian lama tidak nge post di web ini karena banyak kesibukan juga pengembangan dari blog sederhana ini akhirnya saya sempatkan untuk share sedikit pelajaran yang saya ambil.

Berawal dari tugas Prakerin yang saya disuruh buat Server Location Based Service, ya seperti sebuah server yang menampung permintaan dari si user nah ini berbasis Android, memang pelajaran baru buat saya dan diharuskan memahami arti dari Location dulu. Nah, saya bertujuan akan belajar secara bertahap.

Dalam tutorial kali ini akan membahas bagaimana membuat sebuah script html dapat menentukan Latitude dan Longatude posisi kita, disetiap daerah akan berbeda. Contoh script dibawah ini untuk menampilkann Latitude dan Longatude

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
	<title>Mengetahui Latitude dan Longitude dengan HTML5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<body>
	<h1>Mengetahui Latitude dan Longitude</h1>
		<p id="lokasi">Klik tombol dibawah ini untuk melihat koordinat tempat Anda:</p>
		<button onclick="getLocation()" class="btn btn-success">Cari Lokasi</button>
		<script>
		function getLocation()
		{
		navigator.geolocation.getCurrentPosition(showPosition);
		}
		function showPosition(posisi)
		{
		document.getElementById("lokasi").innerHTML="Latitude : " + posisi.coords.latitude +
		"Longitude : " + posisi.coords.longitude;
		}
		</script>
</body>
</html>

dari sciprt diatas kita sudah bisa mengetahui Latitude dan Longatude posisi kita, namun jika teman ingin membuatnya lebih menarik designnya untuk mudahnya bisa mendownload Bootstrap gratis. Kemudian copykan css nya ke folder project kita.

Script dibawah ini sudah termasuk menggunakan Bootstrap sebagai desainnya agar mempercantik tampilannya.

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
	<title>Mengetahui Latitude dan Longitude dengan HTML5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<body>
<a href="http://bocahdesa.com" target="_blank" style="text-align:left;" class="btn btn-info">Back to Tutorial</a>
<a href="https://github.com/maful/My-Latitude-dan-Longatude" target="_blank" style="float:right;" class="btn btn-default">Download</a>
<div style="text-align:center;" class="well">
	<h1>Mengetahui Latitude dan Longitude</h1>
		<p id="lokasi">Klik tombol dibawah ini untuk melihat koordinat tempat Anda:</p>
		<button onclick="getLocation()" class="btn btn-success">Cari Lokasi</button>
		<script>
		function getLocation()
		{
		navigator.geolocation.getCurrentPosition(showPosition);
		}
		function showPosition(posisi)
		{
		document.getElementById("lokasi").innerHTML="<div class='alert alert-dismissible alert-success'>Latitude : " + posisi.coords.latitude +
		"<br>Longitude : " + posisi.coords.longitude + "</div>";
		}
		</script><br><br>
<a href="http://bocahdesa.com" class="btn btn-default btn-lg btn-block" style="text-align:center;">BOCAHDESA.COM</a>
</div>
</body>
</html>

Sekian tutorial kali ini tentang HTML5 semoga bermanfaat.

Salam BoDes