Pernahkah kamu isi form panjang di browser, terus tiba-tiba baterai laptop habis — dan saat dibuka lagi, semua tulisanmu masih ada? Atau buka aplikasi belanja online dan tiba-tiba muncul promo toko yang dekat rumahmu? Atau pernah drag foto dari satu folder ke folder lain di browser? Itu semua bukan sulap. Itu adalah HTML5 API bekerja di balik layar. Di artikel ke-12 dari Seri Belajar HTML5 From Zero to Zorro ini, kita akan bedah tuntas tiga API paling sering dipakai: localStorage HTML5, Geolocation API HTML5, dan Drag and Drop HTML5.
HTML5 API adalah sekumpulan antarmuka pemrograman bawaan browser yang memungkinkan halaman web berinteraksi langsung dengan perangkat keras, sistem operasi, dan data pengguna — tanpa plugin tambahan. Singkatnya: browser kamu jauh lebih pintar dari yang kamu kira.
💾 localStorage HTML5: Lemari Penyimpanan Pribadi di Browser
Bayangkan kamu punya lemari kecil di dalam browser-mu. Lemari itu bisa menyimpan catatan, preferensi, bahkan isi keranjang belanja — dan catatannya tidak hilang meski browser ditutup. Itulah localStorage HTML5. Berbeda dengan cookie yang umurnya pendek dan dikirim ke server, localStorage murni hidup di sisi client — dan bisa menyimpan hingga 5–10 MB data.
localStorage menyimpan data secara permanen hingga pengguna atau kode JavaScript menghapusnya. Artinya bahkan setelah restart komputer sekalipun, data tetap ada. Makanya banyak app notes seperti Google Keep menggunakan teknik ini sebagai fallback offline.
Berikut panduan lengkap menggunakan localStorage dari nol:
Simpan data dengan setItem()
Gunakan pasangan key-value. Key adalah nama "laci lemari", value adalah isinya.
// Menyimpan data localStorage.setItem('namaUser', 'Budi Santoso'); localStorage.setItem('tema', 'gelap'); // Mengambil data let nama = localStorage.getItem('namaUser'); console.log(nama); // Output: Budi Santoso // Menyimpan objek (wajib di-JSON-kan dulu) let user = { nama: 'Budi', umur: 25 }; localStorage.setItem('dataUser', JSON.stringify(user)); // Mengambil objek let dataUser = JSON.parse(localStorage.getItem('dataUser')); console.log(dataUser.nama); // Output: Budi // Menghapus satu item localStorage.removeItem('tema'); // Menghapus SEMUA data localStorage.clear();
Contoh nyata: Simpan nama pengguna di form
Pengguna isi nama sekali, lain kali buka browser — namanya sudah muncul otomatis. Praktis banget!
<input type="text" id="namaku" placeholder="Masukkan namamu"> <button onclick="simpanNama()">Simpan</button> <p id="salam"></p> <script> // Cek apakah nama sudah tersimpan window.onload = function() { let nama = localStorage.getItem('namaku'); if (nama) { document.getElementById('salam').textContent = 'Halo lagi, ' + nama + '! 👋'; } }; function simpanNama() { let nama = document.getElementById('namaku').value; localStorage.setItem('namaku', nama); document.getElementById('salam').textContent = 'Tersimpan! Sampai jumpa, ' + nama + ' 🎉'; } </script>
localStorage hanya menyimpan string. Kalau kamu mau simpan angka, array, atau objek — wajib pakai JSON.stringify() saat menyimpan dan JSON.parse() saat mengambilnya. Ini kesalahan paling umum pemula!
📍 Geolocation API HTML5: Browser yang Tahu di Mana Kamu Berada
Pernah heran kenapa Google Maps langsung tahu posisimu begitu dibuka? Itu karena browser modern dilengkapi Geolocation API HTML5 — sebuah API bawaan yang memungkinkan situs web mengakses koordinat GPS perangkat pengguna. Tentu saja, browser akan selalu minta izin dulu sebelum membagikan lokasi. Privasi tetap nomor satu! 🔒
Geolocation API hanya bekerja di protokol HTTPS (atau localhost untuk testing). Jika kamu coba di HTTP biasa, browser akan menolak dan melempar error. Ini fitur keamanan, bukan bug!
Dapatkan koordinat pengguna
Gunakan navigator.geolocation.getCurrentPosition() untuk mengambil posisi saat ini.
<button onclick="dapatkanLokasi()">📍 Lihat Lokasimu</button> <p id="hasilLokasi"></p> <script> function dapatkanLokasi() { if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition( function(posisi) { let lat = posisi.coords.latitude; let lon = posisi.coords.longitude; document.getElementById('hasilLokasi').innerHTML = '🌍 Latitude: ' + lat + '<br>🧭 Longitude: ' + lon; }, function(error) { document.getElementById('hasilLokasi').textContent = '❌ Izin lokasi ditolak.'; } ); } else { alert('Browser kamu tidak mendukung Geolocation!'); } } </script>
Tampilkan di Google Maps
Koordinat yang didapat bisa langsung digunakan untuk membuka Google Maps atau integrasi peta lainnya.
function bukaDiMaps(lat, lon) { let url = `https://maps.google.com/?q=${lat},${lon}`; window.open(url, '_blank'); }
Selalu tangani kasus di mana pengguna menolak izin lokasi dengan callback error. Jangan biarkan aplikasimu crash begitu saja — tampilkan pesan yang ramah dan informatif. User experience itu nomor satu!
🖱️ Drag and Drop HTML5: Seret, Lepas, Selesai!
Fitur drag and drop HTML5 adalah API bawaan browser yang memungkinkan elemen di halaman web bisa diseret dan dilepas ke area tertentu — persis seperti memindahkan file di desktop komputer. Tanpa perlu library jQuery UI, tanpa plugin. Murni HTML5! Fitur ini populer digunakan di kanban board, file uploader, editor foto, dan aplikasi produktivitas modern.
| Event | Di Elemen | Kapan Terpanggil? |
|---|---|---|
dragstart |
Sumber (draggable) | Saat elemen mulai diseret |
dragover |
Target (drop zone) | Saat elemen melayang di atasnya |
drop |
Target (drop zone) | Saat elemen dilepas di area ini |
dragend |
Sumber (draggable) | Setelah drag selesai (berhasil/tidak) |
dragleave |
Target (drop zone) | Saat elemen keluar dari area target |
Tandai elemen sebagai draggable
Tambahkan atribut draggable="true" pada elemen yang ingin bisa diseret.
Siapkan area tujuan (drop zone)
Tambahkan event listener dragover dan drop pada elemen target.
Gunakan DataTransfer untuk bawa data
Objek event.dataTransfer adalah "tas" yang membawa informasi selama proses drag.
<!-- Elemen yang bisa diseret --> <div id="kartu" draggable="true" ondragstart="mulaiSeret(event)" style="padding:16px;background:#6366f1; color:#fff;border-radius:8px; cursor:grab;display:inline-block;"> 🃏 Seret Aku! </div> <!-- Area tujuan --> <div id="zona" ondragover="izinkanDrop(event)" ondrop="lepaskan(event)" style="width:200px;height:120px;margin-top:20px; border:2px dashed #f59e0b;border-radius:10px; display:flex;align-items:center; justify-content:center;color:#94a3b8;"> ⬇️ Taruh di sini </div> <script> function mulaiSeret(e) { e.dataTransfer.setData('text', e.target.id); } function izinkanDrop(e) { e.preventDefault(); // wajib! } function lepaskan(e) { e.preventDefault(); let id = e.dataTransfer.getData('text'); let elemen = document.getElementById(id); e.target.appendChild(elemen); } </script>
Pada fungsi dragover, kamu wajib memanggil e.preventDefault(). Tanpa ini, browser tidak akan mengizinkan operasi drop dan elemen tidak akan bisa dilepas ke target. Ini kesalahan nomor satu di drag and drop HTML5!
📊 Perbandingan Tiga HTML5 API Sekaligus
| Fitur | localStorage | Geolocation API | Drag & Drop |
|---|---|---|---|
| Fungsi Utama | Simpan data lokal | Akses koordinat GPS | Seret & lepas elemen |
| Butuh Izin User? | ✅ Tidak | ❌ Ya (izin lokasi) | ✅ Tidak |
| Butuh HTTPS? | ✅ Tidak | ❌ Ya (wajib) | ✅ Tidak |
| Kapasitas Data | 5–10 MB | N/A (hanya koordinat) | N/A (interaksi UI) |
| Contoh Penggunaan | Simpan preferensi tema, keranjang belanja | Peta, promo toko terdekat | Kanban, file uploader |
🎯 Kesimpulan: Tiga API, Satu Langkah Lebih Dekat ke Developer Sungguhan
Di artikel ini, kita sudah menyelami tiga HTML5 API paling populer yang ada di browser modern. Pertama, localStorage HTML5 — lemari data yang persisten dan mudah digunakan. Kedua, Geolocation API HTML5 — fitur yang membuat browser bisa "tahu" posisi pengguna secara real-time. Dan ketiga, Drag and Drop HTML5 — interaksi seret-lepas yang membuat UI terasa hidup dan intuitif.
Ketiganya adalah bagian dari ekosistem HTML5 yang luar biasa — dan ini hanyalah sebagian kecil. Satu artikel lagi menanti kamu: proyek final! Saatnya gabungkan semua yang sudah kamu pelajari dari 12 artikel seri ini.
💬 Punya pertanyaan, bingung di bagian mana, atau mau berbagi hasil praktikmu? Drop komentar di bawah! Dan kalau artikel ini bermanfaat, bagikan ke teman yang lagi belajar HTML — siapa tahu kamu bantu mereka jadi developer! 🚀
HTML5 From Zero to Zorro — 13 Artikel
Kuasai HTML5 dari dasar hingga proyek nyata
No comments:
Post a Comment