[[---]]
Membuat Presensi Online Geolokasi Dengan Google Form
Untuk yang ingin melakukan pencatatan presensi atau daftar hadir dengan biaya murah mungkin bisa dicoba alternatif berikut, yaitu penggunaan Google Form dan Google AppScript.
Untuk proses pembuatannya cukup mudah yaitu dengan menggunakan Gmail, kebetulan aku menggunakan Google Workspace.
Berikut langkah-langkahnya :
Buat terlebih dulu Google Form
Pilih titik 3 pada sudut kanan atas, pilih Script Editor
Kemudian akan muncul jendela Script Editor, pada file Code.gs, apabila ada kode bawaan, langsung dihapus saja semuanya
kemudian diganti dengan kode berikut :
function orgIP(ip) { var url = "http://ipinfo.io/"+ ip +"?token=12f70b0a35a87f"; var response = UrlFetchApp.fetch(url); var json = JSON.parse(response.getContentText()); return json.org;}function cekIP() { var url = "http://api.ipify.org/?format=json"; var response = UrlFetchApp.fetch(url); var json = JSON.parse(response.getContentText()); return json.ip;}function doGet(request) { var template = HtmlService.createTemplateFromFile('index.html') var pageData = template.evaluate() .setTitle("Form") .addMetaTag("viewport","width=device-width, initial-scale=1") .setSandboxMode(HtmlService.SandboxMode.IFRAME) .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) return pageData;}/* @Include JavaScript and CSS Files */function include() { var HTMLString = "<input type='text' class='form-control' id='ip' value='"+ cekIP() +"' readonly>"; HTMLOutput = HtmlService.createHtmlOutput(HTMLString); return HTMLOutput.getContent();}/* @Process */function processForm(x,y,z) { var url = "https://docs.google.com/spreadsheets/d/XXXXXXXX-XXXXXXXXX/edit?usp=sharing#gid=XXXXXXXXX"; var ss = SpreadsheetApp.openByUrl(url); var ws = ss.getSheetByName("Info Responder"); var lokasi = Maps.newGeocoder().reverseGeocode(y, z); alamat= lokasi.results[0].formatted_address; ws.appendRow([x,cekIP(),orgIP(cekIP()),y,z,alamat]);}– var url = diganti dengan url Google Sheet pada tab yang untuk menyimpan data
– var ws = nama Info Responder dapat diganti dengan nama Tab pada Google Sheet dimana data disimpan
Kemudian tekan tanda + pada sisi atas, dan buat file dengan nama index.html
dan kemudian isi dengan file dibawah ini :
<!DOCTYPE html><html><head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"></head><body onload="getLocation()"> <div class='container'> <form> <p class='h4 mb-4 text-center'>Klik 'Isi Presensi' untuk melanjutkan!!</p> <p>Aktifkan GPS SmartPhone kalian dan izinkan akses lokasi untuk mendapatkan unique id, silakan reload jika anda belum mengizinkan akses lokasi.</p> <div class='form-group'> <label for='ip'>IP Address:</label> <?!= include(); ?> </div> <div class='form-group'> <label for='unik'>Unique ID:</label><p>copy Unique ID dan masukkan kedalam Google Form</p> <input type='text' class='form-control' id='unik' readonly> </div> <a type="button" class="btn btn-primary" href='[isi dengan URL Google Form yang sudah dibuat]' target='_blank'>Isi Presensi</a> </form> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } function makeid() { var result = ''; var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var charactersLength = characters.length; for ( var i = 0; i < 7; i++ ) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } document.getElementById("unik").value = result; return result; } function showPosition(position) { google.script.run.processForm(makeid(),position.coords.latitude,position.coords.longitude); } </script></body></html>Apabila file Code.gs dan index.html sudah terisi dengan kode diatas, maka saatnya untuk Test Deployment dan buat New Deployment
Saat deploy jangan lupa untuk memilih opsi Webapp
Isi Description pada point 1 dan langsung tekan Deploy setelahnya pada point 2
Apabila sudah muncul jendela seperti dibawah ini maka link script sudah bisa dicoba
Apabila link script dibuka maka tampilannya akan seperti berikut
Dan berikut ini adalah data yang berhasil direkam melalui script yang sudah dibuka tadi
Tinggal diaplikasikan saja ke Google Form dan outputnya ke Google Sheet. Selamat mencoba …..
