Membuat Presensi Online Geolokasi Dengan Google Form

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 …..

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
@boysetyadin
  • kamu tak pernah salah, begitupula aku, tapi aku tau siapa yang paling benar 😆
  • ada yang bisa diandalkan, tapi bukan kamu ...
  • waktu dibuatkan minuman pemusnah sakit tenggorokan dan batuk ini, pikiranku melayang ke awal Maret 2021, dimana aku dan keluarga di Jateng sempat terkena Long Covid kalau orang bilang, dan Ibu mengirimkan beberapa botol minuman racikan ini utk obat. 

tapi sungguh tdk disangka, setelah kami sembuh Ibu justru berpulang karena Covid di bulan Juli 2021.

Allah lebih tau mana yang terbaik ...
  • setelah sekian purnama
  • halo selamat pagi, kita ketemu lagi
  • 4 days New Workshop Grounded Total Marketing (GTM) Lead by Coach Dr. Fahmi Angkatan 2 

Selasa - Jumat, 26 - 29 Oktober 2021 

Alhamdulilah diberi kesempatan untuk mengikuti workshop GTM yang dibimbing langsung oleh ahlinya @coach.fahmi
Insyaallah saya siap hadir dan siap menerima semua ilmu yang diberikan selama mengikuti kegiatan GTM. Mudah-mudahan dengan semua ilmu yang saya dapatkan nanti, dapat membantu saya untuk mengoptimalkan kinerja saya dalam perusahaan. 
 
Menuntut ilmu adalah sesuatu yang harus dilakukan apabila seseorang ingin terus berkembang dan bertumbuh, dan Insyaallah saya siap melakukannya. 

"Bila kau tak tahan lelahnya belajar, maka kau harus menahan perihnya kebodohan" Imam Asy Syafi'i

#salamgrounded
#groundedtotalmarketing
#gtm
#coachdrfahmi
#menolakkalah
#menolaklemah
  • tarik sis ...
  • seribu alasan kamu berharga
  • masih, rasa yang sama ... pahit dan asam
  • ball boy

#bodiwebid #havingfun #ball #swim
  • ketika aku mengenalmu, dan kamu berlalu dalam bayang2

#bodiwebid #alunalunpurworejo
  • pagi ....
kamu tak pernah salah, begitupula aku, tapi aku tau siapa yang paling benar 😆
kamu tak pernah salah, begitupula aku, tapi aku tau siapa yang paling benar 😆
1 month ago
View on Instagram |
1/12
ada yang bisa diandalkan, tapi bukan kamu ...
ada yang bisa diandalkan, tapi bukan kamu ...
1 month ago
View on Instagram |
2/12
waktu dibuatkan minuman pemusnah sakit tenggorokan dan batuk ini, pikiranku melayang ke awal Maret 2021, dimana aku dan keluarga di Jateng sempat terkena Long Covid kalau orang bilang, dan Ibu mengirimkan beberapa botol minuman racikan ini utk obat. 

tapi sungguh tdk disangka, setelah kami sembuh Ibu justru berpulang karena Covid di bulan Juli 2021.

Allah lebih tau mana yang terbaik ...
waktu dibuatkan minuman pemusnah sakit tenggorokan dan batuk ini, pikiranku melayang ke awal Maret 2021, dimana aku dan keluarga di Jateng sempat terkena Long Covid kalau orang bilang, dan Ibu mengirimkan beberapa botol minuman racikan ini utk obat. tapi sungguh tdk disangka, setelah kami sembuh Ibu justru berpulang karena Covid di bulan Juli 2021. Allah lebih tau mana yang terbaik ...
1 year ago
View on Instagram |
3/12
setelah sekian purnama
setelah sekian purnama
2 years ago
View on Instagram |
4/12
halo selamat pagi, kita ketemu lagi
halo selamat pagi, kita ketemu lagi
2 years ago
View on Instagram |
5/12
4 days New Workshop Grounded Total Marketing (GTM) Lead by Coach Dr. Fahmi Angkatan 2 

Selasa - Jumat, 26 - 29 Oktober 2021 

Alhamdulilah diberi kesempatan untuk mengikuti workshop GTM yang dibimbing langsung oleh ahlinya @coach.fahmi
Insyaallah saya siap hadir dan siap menerima semua ilmu yang diberikan selama mengikuti kegiatan GTM. Mudah-mudahan dengan semua ilmu yang saya dapatkan nanti, dapat membantu saya untuk mengoptimalkan kinerja saya dalam perusahaan. 
 
Menuntut ilmu adalah sesuatu yang harus dilakukan apabila seseorang ingin terus berkembang dan bertumbuh, dan Insyaallah saya siap melakukannya. 

"Bila kau tak tahan lelahnya belajar, maka kau harus menahan perihnya kebodohan" Imam Asy Syafi'i

#salamgrounded
#groundedtotalmarketing
#gtm
#coachdrfahmi
#menolakkalah
#menolaklemah
4 days New Workshop Grounded Total Marketing (GTM) Lead by Coach Dr. Fahmi Angkatan 2 Selasa - Jumat, 26 - 29 Oktober 2021 Alhamdulilah diberi kesempatan untuk mengikuti workshop GTM yang dibimbing langsung oleh ahlinya @coach.fahmi Insyaallah saya siap hadir dan siap menerima semua ilmu yang diberikan selama mengikuti kegiatan GTM. Mudah-mudahan dengan semua ilmu yang saya dapatkan nanti, dapat membantu saya untuk mengoptimalkan kinerja saya dalam perusahaan. Menuntut ilmu adalah sesuatu yang harus dilakukan apabila seseorang ingin terus berkembang dan bertumbuh, dan Insyaallah saya siap melakukannya. "Bila kau tak tahan lelahnya belajar, maka kau harus menahan perihnya kebodohan" Imam Asy Syafi'i #salamgrounded #groundedtotalmarketing #gtm #coachdrfahmi #menolakkalah #menolaklemah
2 years ago
View on Instagram |
6/12
tarik sis ...
3 years ago
View on Instagram |
7/12
seribu alasan kamu berharga
seribu alasan kamu berharga
4 years ago
View on Instagram |
8/12
masih, rasa yang sama ... pahit dan asam
masih, rasa yang sama ... pahit dan asam
4 years ago
View on Instagram |
9/12
ball boy

#bodiwebid #havingfun #ball #swim
ball boy #bodiwebid #havingfun #ball #swim
5 years ago
View on Instagram |
10/12
ketika aku mengenalmu, dan kamu berlalu dalam bayang2

#bodiwebid #alunalunpurworejo
ketika aku mengenalmu, dan kamu berlalu dalam bayang2 #bodiwebid #alunalunpurworejo
5 years ago
View on Instagram |
11/12
pagi ....
5 years ago
View on Instagram |
12/12

Artikel Menarik