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>