Cara Integrasi Leaflet dan HTML5 Geolocation untuk Absensi Foto Otomatis Berbasis Titik Koordinat
Banyak sistem absensi online gagal bukan karena desainnya buruk, tetapi karena validasi lokasinya tidak akurat. Beberapa aplikasi hanya mengambil koordinat secara sederhana tanpa memastikan akurasi GPS, tanpa menampilkan visual peta, dan tanpa sinkronisasi dengan server. Akibatnya, data absensi menjadi kurang presisi dan berpotensi dimanipulasi.
Dalam tren digitalisasi HR saat ini, perusahaan mulai menggabungkan teknologi GPS, kamera perangkat, dan pemetaan interaktif untuk menciptakan sistem presensi digital yang lebih transparan. Transformasi ini bukan sekadar mengikuti perkembangan teknologi, tetapi menjawab kebutuhan kerja hybrid dan mobilitas tinggi yang terus meningkat.
Jika Anda sudah memahami konsep pembatasan area menggunakan polygon pada artikel sebelumnya tentang geofencing, maka tahap berikutnya adalah mengintegrasikan Leaflet JS dan HTML5 Geolocation agar sistem absensi dapat mengambil koordinat secara real-time sekaligus menampilkan titik lokasi pada peta. Artikel ini akan memandu Anda membuat sistem absensi foto otomatis berbasis titik koordinat menggunakan CodeIgniter 4 dan JavaScript.
Mengapa Menggunakan Leaflet dan HTML5 Geolocation?
Leaflet adalah library JavaScript ringan untuk menampilkan peta interaktif. Sementara HTML5 Geolocation API memungkinkan browser mengambil latitude dan longitude dari perangkat pengguna. Kombinasi keduanya sangat cocok untuk membangun sistem absensi berbasis lokasi.
- Leaflet → menampilkan peta dan marker lokasi
- Geolocation API → mengambil koordinat GPS
- CodeIgniter 4 → backend penyimpanan dan validasi data
Struktur Sistem Absensi Foto Berbasis Titik Koordinat
Alur sistem:
- User membuka halaman absensi
- Browser meminta izin lokasi
- Sistem mengambil latitude & longitude
- Lokasi ditampilkan di peta
- User mengambil foto selfie
- Data dikirim ke server
Untuk sistem lengkap validasi titik poin, Anda bisa membaca artikel utama berikut:
Absensi Foto GPS Berdasarkan Titik Poin Menggunakan CodeIgniter 4, Leaflet, JS
Implementasi Frontend: Integrasi Leaflet dan Geolocation
<div id="map" style="height:400px;"></div> <button onclick="getLocation()">Ambil Lokasi</button> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script> var map = L.map('map').setView([-6.200000, 106.816666], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map); var marker; function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError, { enableHighAccuracy: true, timeout: 10000 }); } else { alert("Geolocation tidak didukung browser ini."); } } function showPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; document.getElementById("lat").value = lat; document.getElementById("lng").value = lng; if(marker){ map.removeLayer(marker); } marker = L.marker([lat, lng]).addTo(map); map.setView([lat, lng], 18); } function showError(error) { alert("Gagal mengambil lokasi: " + error.message); } </script> <input type="hidden" id="lat" name="lat"> <input type="hidden" id="lng" name="lng"> {codeBox}
Menambahkan Fitur Foto Selfie Otomatis
<input type="file" accept="image/*" capture="user" name="photo"> {codeBox}
Atribut capture="user" akan langsung membuka kamera depan pada perangkat mobile.
Backend CodeIgniter 4 untuk Menyimpan Data
public function submitAbsen() { $lat = $this->request->getPost('lat'); $lng = $this->request->getPost('lng'); $photo = $this->request->getFile('photo'); $photoName = $photo->getRandomName(); $photo->move('uploads', $photoName); $this->absensiModel->save([ 'latitude' => $lat, 'longitude' => $lng, 'photo' => $photoName, 'created_at' => date('Y-m-d H:i:s') ]); return redirect()->back()->with('success','Absensi berhasil disimpan'); } {codeBox}
Menambahkan Validasi Akurasi GPS
Untuk meningkatkan keamanan sistem absensi berbasis GPS, gunakan validasi akurasi:
if(position.coords.accuracy > 50){ alert("Akurasi GPS kurang baik, silakan ulangi."); return; } {codeBox}
Nilai accuracy di bawah 50 meter biasanya cukup aman untuk absensi kantor.
Optimasi Keamanan Sistem
- Gunakan HTTPS agar Geolocation berjalan optimal
- Simpan timestamp server, bukan waktu dari client
- Kombinasikan dengan validasi polygon geofencing
- Tambahkan validasi device fingerprint
Untuk pembatasan area lebih presisi menggunakan polygon map, silakan baca panduan lengkap berikut:
Implementasi Geofencing pada Sistem Absensi Online dengan Polygon Map di CodeIgniter 4
Strategi Integrasi dengan Sistem Titik Poin
Jika Anda ingin menggabungkan sistem ini dengan validasi titik poin (radius tertentu dari lokasi kantor), maka kombinasi berikut sangat direkomendasikan:
- Validasi koordinat real-time
- Tampilkan marker lokasi
- Validasi radius jarak
- Validasi polygon area
- Simpan bukti foto selfie
Integrasi lengkap sistem tersebut telah dijelaskan secara detail pada artikel utama yang membahas titik poin absensi berbasis GPS dan Leaflet JS.
Kesimpulan
Integrasi Leaflet dan HTML5 Geolocation adalah fondasi utama dalam membangun sistem absensi foto berbasis titik koordinat. Dengan menampilkan peta interaktif dan mengambil lokasi real-time, sistem menjadi lebih transparan dan sulit dimanipulasi.
Jika dikombinasikan dengan geofencing polygon serta validasi radius, sistem absensi digital Anda akan jauh lebih aman dan profesional. Implementasi ini sangat cocok untuk perusahaan modern yang ingin meningkatkan akurasi presensi tanpa bergantung pada mesin fingerprint konvensional.
Langkah selanjutnya adalah menggabungkan seluruh metode ini dalam satu ekosistem absensi berbasis CodeIgniter 4 yang terintegrasi penuh antara frontend dan backend.