HTML Geolocation
IT CORNER RABU 18 DESEMBER 2024
Halo semuanya kembali lagi dengan admin disini. Yaa di IT CORNER Kali ini kita akan belajar dan membahas tentang HTML Geolocation. Nahh sebelumnya nihh mau nanya ada yang tau apa itu HTML Geolocation?
Definisi HTML Geolocation :
Singkatnya Geolocation adalah API yang bertujuan untuk mendapatkan lokasi atau posisi geografis kita berada. Jadi simpelnya cara kerjanya Geolocation adalah seperti kompas dengan medan magnet, tapi untuk versi HTML Geolocation tidak hanya dengan kompas aja tapi kita bisa lihat titik lokasi koordinat pada peta!.
So tunggu apalagi mari kita buat!
Disini admin akan membuat sebuah contoh codingan seperti dibawah ini :
Penjelasan :
Disini admin akan membuat menggunakan file ekstensi HTML saja kalian juga bisa menggunakan ekstensi JavaScript tergantung selera kalian okey. Nahh seperti diatas pada gambar untuk mendapatkan lokasi kita buat function getLocation(). lalu kita gunakan if statement untuk membuat akses ke GPS kepada pengguna.
Jika pengguna setuju maka otomatis program akan melakukan eksekusi dan mendapatkan data lokasi pengguna.
Sebaliknya jika pengguna tidak setuju maka akan keluar tulisan dengan "Berikan akses izinkan lokasi untuk mendapatkan lokasi anda terkini".
Untuk memunculkan hasil lokasi kita tambahkan yaitu function showPosition(). nahh disini fungsinya untuk mengeluarkan hasil atau output program yang sudah eksekusi saat kita pencet pada tombol tersebut. Soo mari kita buat output dari program tersebut.
Penjelasan :
Kita masukkan variabel lokal yaitu position pada function showPosition() lalu isinya kita tulis pada gambar di atas. Alasan disini admin menggunakan innerHTML adalah agar kita bisa mengakses properti dari javascript ke html hampir sama seperti pengguna printOut pada javascript tapi dapat merubah konten pada HTML akan tetapi hati-hati yaa dalam penggunaan innerHTML. Lanjut kita tambahkan "position.coords. 'latitude/longitude'; untuk mendapatkan lokasi kita serta nanti akan keluar pada output innerHTML.
Lanjut untuk membuat sebuah error code kita menggunakan namanya Switch. Switch sendiri adalah rangkaian kerja dimana program atau eksekutor akan memilih barisan pemrograman ketika terjadi sebuah error. Misal Sebuah lampu di dapur menyala selama 10 jam, Akan tetapi apakah lampu menyala selama 10 jam itu benar-benar nyala apa bukan? dengan Switch kita bisa menentukan apakah lampu tersebut nyala atau tidak, seperti if statement. Jika lampu tersebut nyala maka lampu tersebut benar-benar nyala. Sebaliknya Jika lampu tersebut mati maka lampu tersebut mati.
Contoh Switch Case
Penjelasan :
Gambar pada diatas kita bisa lihat sendiri admin memberikan sebuah 4 contoh codingan. nahh seperti awal yang kita jelaskan bahwa Switch Case adalah rangkaian kerja dimana program atau eksekutor akan memilih barisan program tersebut. untuk membuatnya kita menggunakan case lalu kita masukkan variabel lokal yaitu error pada kolom switch tersebut, lalu di lanjutkan pada error code di browser. Disini aku akan ambil 1 contoh yaitu lokasi di tolak alias tidak diberikan akses. Untuk gambarnya ada dibawah tersebut.
Seperti pada gambar diatas tersebut yaitu si Switch Case memilih pada "case error.PERMISSION_DENIED:" karena pada browser kita menolak memberikan sebuah akses lokasi untuk mendapatkan data tersebut. Nahh sama programnya mendeteksi kalau browsernya tidak mengijinkan memberikan data yang dibutuhkan maka otomatis program mengalihkan ke Switch Case sebagai tanda error pada output browser kalian. Alhasil yang keluar seperti pada output diatas gambar yang admin berikan.
Hasilnya :
Untuk hasilnya kalian bisa liat pada gambar dibawah berikut ini!
Kesimpulan :
Kesimpulan dari materi HTML Geolocation adalah kita bahwa tahu bagaimana cara bekerjanya sebuah alat sederhana yaitu kompas. lalu kompas berkembang pesat menjadi teknologi digital dan diterapkan banyak perangkat-perangkat yang kita gunakan pada sehari-harinya. Dengan ini kita bisa tahu Geolocation pada teknologi menggunakan namanya GPS untuk mendapatkan data lokasi ataupun geografis kita. Dengan itu kita semakin dipermudah dengan teknologi saat ini dan mudah-mudahan pada pembelajaran ini bisa bermanfaat bagi para pembaca maupun teman-teman yang ada disekolah.
Terimakasih atas membacanya saksikan lanjutan artikel tugas selanjutnya!
0 Komentar