Membuat Absensi Online dengan Mengambil Lokasi Pengguna dengan Leaflet JS

Share:
Membuat Absensi Online dengan Mengambil Lokasi Pengguna dengan Leaflet JS
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat absensi sederhana yang memanfaatkan lokasi pengguna dan menggunakan leaflet js untuk menampilkan maps lokasi. Penasaran?, ayo ikuti tutorilanya di bawah ini.





Sebelumnya saya sudah membuat beberapa artikel tutorial terkait dengan lokasi atau peta. Berikut ini beberapa tutorialnya


Jika kalian menemukan kesulitan pada tutorial kali ini, setidaknya 3 tutorial di atas bisa membantu kalian dalam memahami cara kerja kordinat gps dan library leaflet.


Pada kesempatan kali ini kita akan membuat aplikasi absensi sederhana dimana setiap user yang melakukan absensi datanya akan tersimpan di database dari tanggal, jam, nama, latitude dan longitude. Kita juga akan menampilkan peta dengan library leaflet js. Jadi setiap user yang melakukan absensi maka lokasinya juga otomatis diketahui, sistem juga akan menolak jika system gps tidak dihidupkan.



Membuat Absensi Online dengan Mengambil Lokasi Pengguna dengan Leaflet JS

1. Buatlah sebuah database baru dengan nama latihan, lalu buatlah sebuah tabel di dalamnya dengan nama absensi_online atau dengan nama yang kalian inginkan. Ikuti struktur tabelnya seperti gambar di bawah ini.

Absensi Online PHP
Tabel Absensi Online







2. Buatlah sebuah folder baru dengan nama absensi_online, lalu buat file index.php di dalamnya dan isi file tersebut dengan script seperti di bawah ini.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="Description" content="Enter your description here" /> <!-- bootstrap css library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css"> <!-- leaflet css --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <title>Sahretech Tutorial</title> <style> #mapid { aspect-ratio: 1/1; width: 100%; border-radius: 10px; z-index: 0; } </style> </head> <body> <div class="container mt-4"> <h3 class="alert alert-info text-center">Online Attendace With Leaflet JS</h3> <!-- make 2 column, left column for attendace input and right column for table --> <div class="row"> <div class="col-lg-4"> <div class="card"> <div class="card-body"> fill your name, and click the submit button to make an online attendance <br><br> <!-- fill the name field, and click submit button to add record the data will be send to process.php --> <form method="post" action="process.php"> <label>Name</label> <input type="text" name="name" class="form-control mt-1" required placeholder="Type Your Name"> <!-- latitude and longitude automatically filled when page loaded. we use javascript for get latitude and longitude with device gps. if latitude and longitude empty, form cannot be submitted. You have to check whether the GPS is blocked or not --> <label class="mt-4">Latitude</label> <input type="text" name="latitude" class="form-control mt-1" required readonly id="latitude"> <label class="mt-4">Latitude</label> <input type="text" name="longitude" class="form-control mt-1" required readonly id="longitude"> <button class="btn btn-primary mt-4" type="submit">Submit</button> </form> </div> </div> </div> <div class="col-lg-8"> <!-- The stored data will be displayed here. --> <table class="table table-striped"> <tr> <th>No</th> <th>Name</th> <th>Lat</th> <th>Long</th> <th>Time</th> <th>Map</th> </tr> <?php //make index variabel $num = 1; //make connection to database $connect = mysqli_connect('localhost', 'root', '', 'latihan'); //after the connection is established, retrieve the attendance data from the table $select = mysqli_query($connect, "select * from online_attendance"); //loop data with while() while($data= mysqli_fetch_array($select)){ ?> <tr> <!-- show data with array --> <td><?php echo $num++; ?></td> <td><?php echo $data['name']; ?></td> <td><?php echo $data['latitude']; ?></td> <td><?php echo $data['longitude']; ?></td> <td><?php echo $data['time']; ?></td> <!-- we add button, when button clicked, map will be displayed to see how popup and map can show you can see the javascript function --> <td> <button onclick="showMap(<?php echo $data['latitude']; ?>, <?php echo $data['longitude']; ?>)" class="btn btn-primary btn-sm"> Location</button> </td> </tr> <?php } ?> </table> <!-- map will be displayed here --> <div class="card"> <div class="card-body"> <h5 class="alert alert-info text-center">Map will be displayed in this area, click the button location in table to see the map location</h5> <div id="mapid"></div> </div> </div> </div> </div> </div> <!-- bootstrap js library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script> <!-- leaflet js --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script> // javascript function to get longitude and latitude function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { alert('Your device is not support!'); } } // fill the latitude and longitude form with this function function showPosition(data) { document.getElementById('latitude').value = data.coords.latitude document.getElementById('longitude').value = data.coords.longitude } // javascript function to show error function showError(error) { let error_message = '' switch (error.code) { case error.PERMISSION_DENIED: error_message = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: error_message = "Location information is unavailable." break; case error.TIMEOUT: error_message = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: error_message = "An unknown error occurred." break; } alert(error_message) } var mymap = '' function showMap(latitude, longitude) { //remove map and render the new map if (mymap) { mymap.remove(); mymap = undefined } //make map area mymap = L.map("mapid").setView( [latitude, longitude], 13 ); //setting maps using api mapbox not google maps, register and get tokens L.tileLayer( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", { maxZoom: 18, attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', id: "mapbox/streets-v11", tileSize: 512, zoomOffset: -1, } ).addTo(mymap); //add marker position with variabel latitude and longitude L.marker([ latitude, longitude ]) .addTo(mymap) .bindPopup("Location"); } getLocation() </script> </body> </html>




3. Selanjutnya buatlah sebuah file baru dengan nama process.php dalam satu folder dengan index.php. Kemudian ikuti scriptnya seperti gambar di bawah ini.


<?php //make connection to database $connect = mysqli_connect('localhost', 'root', '', 'latihan'); //get data from form input $name = $_POST['name']; $latitude = $_POST['latitude']; $longitude = $_POST['longitude']; $time = date("Y-m-d H:i:s"); //insert data into database $insert = mysqli_query($connect, "insert into online_attendance set name='$name', latitude='$latitude', longitude='$longitude', time='$time'"); //back to index.php header("Location: index.php"); ?>




Jika semua step di atas sudah dijalankan dengan benar, maka saatnya kita melakukan uji coba. Silahkan buka browser dan ketik localhost/absensi_online. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Tampilan Akhir Absensi Online
Tampilan Akhir





Tutorial kali ini sangat sederhana, kalian bisa melakukan improvisasi dengan menambahkan login, status waktu absensi, statistik dropdown list pegawai, dan masih banyak fitur-fitur lainnya.



Sekian tutorial kita kali ini tentang cara membuat absensi online dengan mengambil lokasi user dengan menggunakan leaflet js. Semoga tutorial ini bermanfaat. Jika ada pertanyaan silahkan langsung tanya di kolom komentar di bawah ini. Sekian dan terima kasih

2 comments:

  1. maaf bang, izin bertanya untuk mapnya kok tidak ada yah ka? makasih

    ReplyDelete
    Replies
    1. klik kanan -> insepct -> liat di tab console, nanti ada errronya. Errornya kasih tau saya, atau cari langsung di internet.

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi