HTML Geolocation, HTML Drag/Drop, HTML Web Storage, HTML Web Workers.

A. PENDAHULUAN

  • Pengertian
Di hari ini saya mempelajari dan mengerjakan HTML Geolocation, HTML Drag/Drop, HTML Web Storage, HTML Web Workers.
  • Latar belakang masalah
Di karenakan saya ingin menguasai HTML, maka dari itu saya mempelajari langkah langkah yang ada di W3schools untuk menguasai HTML.

B. MAKSUD DAN TUJUAN

Agar memiliki Skills HTML yang di butuhkan untuk menuju ke jenjang berikutnnya.


C. BATASAN DAN RUANG LINGKUP  PEKERJAAN

- HTML Geolocation
- HTML Drag/Drop
- HTML Web Storage
- HTML Web Workers

D. TARGET DAN HASIL YANG DIHARAPKAN

Mengetahui dan memahami HTML Geolocation, HTML Drag/Drop, HTML Web Storage, HTML Web Workers.

E. METODE PELAKSANAAN

- Membaca referensi di W3schools
- Mengerjakan Try it your self

F. ALAT DAN BAHAN

- Laptop
- Koneksi internet
- Text editor

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

  • API Geolokasi HTML
Temukan sisi pengguna dengan menggunakan HTML
Api Geolokasi HTML digunakan untuk mendapatkan posisi geografis pengguna. Karena ia dapat membahayakan privasi, posisi tersebut tidak tersedia kecuali jika pengguna menyetujuinya.

Versi Browser yang mendukung API Geolokasi HTML :

Chrome :  5.0 - 49.0 (http) 50.0 (https)
Bing : 9.0
Firefox : 3.5
Safari : 5.0
Opramini : 16.0

Menggunakan Geolokasi HTML

Metode getCurrentPosition() ini digunakan untuk mengembalikan posisi pengguna.
Contoh di bawah ini adalah penulisan code yang akan bisa mengambil atau menampilkan lokasi dari garis lintang dan garis bujur pengguna :

<!DOCTYPE html>
<html>
<body>

<p>Jika anda mengeklik tombol dibawah ini, anda akan menemukan lokasi a>

<button onclick="adelwingans()">Klik disini</button>

<p id="adelwingans000"></p>

<script>
var x = document.getElementById("adelwingans000");

function adelwingans() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Browser anda tidak mendukung.";
  }
}

function showPosition(position) {
  x.innerHTML = "Garis lintang : " + position.coords.latitude + "<br> g>
}
</script>

</body>
</html>


Penjelasan :

- Periksa browser anda, apakah mendukung
- Jika didukung, jalankan metode getCurrentPosition(). Jika tidak, tampilkan pesan kepada pengguna
- Jika metide getCurrentPosition() berhasil, ia mengembalikan objek koordinat ke fungsi yang ditentukan dalam parameter (showPosition)
- Fungsi showPosition() menampilkan garis lintang dan garis bujur koordinat pengguna.

- Menangani Kesalahan dan Penolakan 
Paramater kedua dari getCurrentPosition() metode ini digunakan untuk menangani kesalahan. Contoh penulisan di bawah ini menentukan fungsi untuk di jalankan jika gagal mendapatkan lokasi pengguna :

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

untuk penambahannya jadi seperti ini :

<!DOCTYPE html>
<html>
<body>

<p>Jika anda mengeklik tombol dibawah ini, anda akan menemukan lokasi anda...</p>

<button onclick="adelwingans()">Klik disini</button>

<p id="adelwingans000"></p>

<script>
var x = document.getElementById("adelwingans000");

function adelwingans() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Browser anda tidak mendukung.";
  }
}

function showPosition(position) {
  x.innerHTML = "Garis lintang : " + position.coords.latitude + "<br> garis bujur : "  + position.coords.longitude;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Pengguna tidak diizinkan mengeksekusi letak lokasi anda."
      break;
    case error.POSITION.UNAVAIBLE:
      x.innerHTML = "Lokasi pengguna tidak di temukan"
      break;
    case erroHr.TIMEOUT:
      x.innerHTML = "Pengguna tidak bisa mengakses lokasi yang ada di browsernya"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Error browser anda"
      break;
 }
}
</script>
</body>
</html> 


Hasilnya :


 
Informasi Khusus lokasi
Halaman ini telah menunjukkan posisi pengguna di peta.
Geolokasi juga sangat berguna untuk informasi spesifik lokasi, seperti :

- Informasi lokal terkini
- Menampilkan tempat menarik di dekat pengguna
- Navigasi belokan demi belokan (GPS)


- Metode getCurrentPosition() -Mengembalikkan data
Metode getCurrentPosition() Mengembalikkan objek pada keberhasilan. Properti Garis lintang, garis bujur, dan akurasi selalu di kembalikan. Properti lainnya dikembalikan jika tersedia :

coords.latitude : Garis lintang sebagai angka desimal (selalu dikembalikan)

coords.longitude : Bujur sebagai angka desimal (selalu dikembalikan)

coords.accuracy : Keakuratan posisi (selalu dikembalikan)

coords.altitude : Ketinggian dalam meter di atas permukaan laut rata-rata (dikembalikan jika tersedia)

coords.altitudeAccuracy : Akurasi ketinggian posisi (dikembalikan jika tersedia)

coords.heading : Judul sebagai derajat searah jarum jam dari Utara (dikembalikan jika tersedia)

coords.speed : Kecepatan dalam meter per detik (dikembalikan jika tersedia)

timestamp : Tanggal/waktu tanggapan (dikembalikan jika tersedia)

  • HTML Drag/Drop

Drag and drop ini adalah fitur yang sangat umum. Ketika anda sedang mengambil sebuah objek dan menyeretnya ke lokasi yang berbeda.
Untuk versi browser yang mendukung Drag And Drop :

Chrome : 4.0
Bing : 9.0
Firefox : 3.5
Safari : 6.0
Opramini : 12.0

Contoh untuk penulisan Drag and Drop :

<!DOCTYPE html>
<html>
<head>
<title>Adelwingans Seret dan Lepas</title>

<style>
#div1, #div2 {
  float: left;
  width: 300px;
  height: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

</script>
</head>
<body>

<h2>Menyeret gambar dan di tempatkan/dilepaskan</h2>
<p>Proses ini menggunakan javascript untuk bisa menyeret dan melepaskan</p>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://i.top4top.io/p_2252rdnf31.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="300" height="300">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

Untuk hasilnya akan seperti ini :





kalian bisa menyeret gambarnnya dan melepaskan ke kotak yang satunya.
Bagaimana Cara kerjanya?? :

1. Buat Elemen Dapat diseret

Pertama-tama untuk membuat elemen dapat diseret, setel attribut draggable ke true :

<img draggable="true">

2. Apa yang harus di seret ?
 Yang di seret menggunakan ondragstart dan setData()
 
 Kemudian, tentukan apa yang harus terjadi ketika elemen diseret.
 
 Dalam contoh di atas, ondragstart atribut memanggil fungsi, drag(event), yang menentukan data apa yang akan diseret.
 Metode dataTransfer.setData() ini menetapkan tipe data dan nilai dari data yang diseret :
 
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

Dalam hal ini, tipe datanya adalah "teks" dan nilainya adalah id dari elemen yang dapat diseret("drag1")

- Tempat Drop - ondragover

ondragover ini menentukan di mana data yang diseret dapat di jatuhkan. Secara default, data/elemen tidak dapat dijatuhkan di elemen lain. Untuk mengizinkan penurunan, kita harus mencegah penanganan elemen secara default.
Ini dilakukan dengan memanggil event.preventDefault() metode untuk acara ondragover :

event.preventDefault()

- Lakukan Drop - Ondrop

Saat data yang diseret di jatuhkan, peristiwa penurunan terjadi. 
Dalam contoh diatas, atribut memanggil fungsi, drop(event):

functiom drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Penjelasan kodenya :
- Panggil preventDefault() untuk mencegah penanganan data default browser (default terbuka sebagai tautan saat dijatuhkan)

- Dapatkan data yang diseret dengan metode dataTransfer.getData(). Metode ini akan mengemalikkan data apapun yang disetel ke tipe yang sama dalam metode setData()

- Data yang diseret adalah id dari elemen yang diseret ("drag1")
- Tambahkan elemen yang diseret kedalam elemen jatuhkan.

  • Penyimpanan Web HTML

dengan penyimpanan web, aplikasi web dapat menyimpan data secara lokal di dalam browser pengguna.
Sebelum HTML5, data aplikasi harus disimpan dalam cookie, termasuk dalam setiap permintaan server. Penyimpanan web lebih aman, dan sejumlah besar data dapat disimpan secara lokal, tanpa memengaruhi kinerja situs web.

Tidak seperti cookie, batas penyimpanan jauh lebih besar (minimal 5 MB) dan informasi tidak pernah di transfer ke server.

Penyimpanan web adalah per asal (per domain dan protokol). Semua halaman, dari satu asal, dapat menyimpan dan mengakses data yang sama.

Untuk versi browser yang dapat mendukung penyimpanan web HTML
Chrome : 4.0
Bing : 8.0
Firefox : 3.5
Safari : 4.0
Opramini : 11.5

Sebelum menggunakan penyimpanan web, periksa dukungan browser untuk localStorage dan sessionStorage :

if (typeof(Storage) !== "undefined") {
    //Code yang ada di Lokal dan di session penyimpanan
  } else {
    // Maaf, Browser anda tidak support..


- Objek penyimpanan lokal

Obyek localStorage menyimpan data tanggal kadaluarsa. Data tidak akan dihapus saat browser ditutup, dan akan tersedia pada hari, minggu atau tahun berikutnya.

Contoh :

//Store
localStorage.setItem("nama belakang", "Adelwin");

//Mengabil
document.getElemetById("result").innerHTML = localStorage.getItem("nama belakang");


Contoh penempatan pada kerangka htmlnya :

<!DOCTYPE html>
<html>
<body>
<div id="hasil"></div>

<script>
//cek browser kalian mendukung?
if (typeof(Storage) !== "undefined") {
  //store
  localStorage.setItem("nama belakang","AdelwinNL");
  //Mengambil
  document.getElementById("hasil").innerHTML = localStorage.getItem("nama belakang");
} else {
  document.getElementById("hasil").innerHTML = "Maaf, browser anda tidak support mengenai Web Penyimpanan";
}

</script>
</body>
</html>

Penjelasan :
- Buat pasangan nama/nilai Penyimpanan lokal dengan nama = "nama belakang" dan nilai = "AdelwinNL"
- Ambil nilai "nama belakang" dan masukkan ke dalam elemen dengan id="hasil"

Contoh berikut menghitung berapa kali pengguna mengeklik tombol. Dalam kode string nilai diuabah menjadi angka untuk dapat meningkatkan penghitung. Contoh :

<!DOCTYPE html>
<head>
<title>Hitungan setelah mengeklik</title>

<script>
function Klikdisini() {
  if (typeof(Storage) !== "Undefinded") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("hasil").innerHTML = "Kamu sudah mengeklik tombol " + localStorage.clickcount + "kali.";
  } else {
    document.getElementById("hasil").innerHTML = "Maaf, Browser anda tidak mendukung Web Penyimpanan";
  }
}

</script>
</head>
<body>
<center>
<b><button onclick="Klikdisini()" type="button">Klik Disini</button></b>

<div id="hasil"></div>

<p>Jika kalian mengeklik, browser akan megetahui anda sudah mengeklik berapa kali</p>

<p>Jika ingin mereset, maka kaluarlah tab haaman anda dan anda coba akses kembali. Nanti akan kembali lagi!!</p>
</center>
</body>
</html>

Maka hasilnya akan seperti ini :




- Objek sessionStorage
Objek sessionStorage sama dengan objek localStorage, kecuali objek tersebut menyimpan data hanya untuk satu sesi. Data di hapus ketika anda menutup tab browser anda.

Contoh untuk menghitung berapa kali penggunaka mengeklik tombol, disesi saat ini :

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("hasil").innerHTML = "Kamu sudah mengeklik tombol sebanyak " +
sessionStorage.clickcount + " kali di session ini.";

  • HTML Web Workes API

Web Workes API ini adalah Javascript yang berjalan di latar belakang, terlepas dari skrip lain, tanpa memengaruhi kinerja halaman. Anda dapat mengeklik, memilih sesuatu, dll. Saat Web Workes Api berjalan di latar belakang.

Untuk versi Browser yang mendukung :

Chrome : 4.0
Bing : 10.0
Firefox : 3.5
Safari : 4.0
Opramini : 11.5


Contoh misal kita akan membuat program timer.

<!DOCTYPE html>
<html>
<body>

<p>Jumlah Detikan: <output id="result"></output></p>
<button onclick="startWorker()">Mulai Timer</button> 
<button onclick="stopWorker()">Stop Timer</button>

<p><strong>Catatan:</strong> Internet Explorer 9 dan versi sebelumnya tidak mendukung Pekerja Web.</p>

<script>
var w;

function startWorker() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Sekarang mari kita membuat file pekerja webnya dengan membuat javascript Eksternal. Di saat membuat nama file nya harus sama saat yang dibuat tadi yaitu "demo_workers.js" :

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}

timedCount();

Bagian terpenting dari kode di atas adalah postMessage() metode - yang digunakan untuk mengirim pesan kembali ke halaman HTML. 

Untuk memanggil file pekerja webnya :

if (typeof(w) == "undefinded) {
  w = new Worker(demo_workers.js);
}

Kemudian kita dapt mengirim dan menerima pesan dari web browser. Tambahkan event listener "onmessage" ke web worker.

w.onmessage = function(event) {
  document.getElementById("hasil").innerHTML = event.data; 
};

Saat pekerja web memposting pesan, kode di dalam event listener dieksekusi. Data dari web worker disimpan di event data.

- Mengehentika pekerja web
Saat objek pekerja web dibuat, objek tersebut akan terus mendengarkan pesan (bahkan setelah skrip eksternal selesai) hingga dihentikan.

Untuk mengehentikkan pekerja web, dan sumber daya browser/komputer gratis, gunakan terminate() metode :

w.terminate();

- Gunakan kembali web Worker
Jika anda  menyetel variabel pekerja ke undefinded, setelah di hentikan, Anda dapat menggunakan kembali kode :

w = undefinded;

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

Di saat coding ada kesalahan bagian penulisan tagnya.
Solusi :
Harus lebih teliti lagi saat mengoding.

J. REFERENSI

- W3schools
AdelwinNL

Saya Adelwin Nugroho Liandy bisa di panggil Adelwin/win saya adalah siswa Smk Roudlotul Mubtadiin Balekambang. Saya seorang yang kreatif dan suka mencari alternatif solusi dari berbagai macam persoalan