Membuat Nomor Antrian Otomatis

1. Copy Spreadsheet (Klik di sini)

2. Terdapat beberapa kolom untuk di isi data agar mendapatkan nomor antrian otomatis.

3. Buatlah lembar kerja Apps Script dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.

4. Terdapat 2 file deafult yaitu Code.gs dan Page.html

5. Copy script di bawah ini ke Code.gs

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

//www.javabitpro.com

function doGet() {
  var template = HtmlService.createTemplateFromFile('Page');
  var lastRow = getLastRow();
  template.lastRow = lastRow;
  return template.evaluate();
}

function processForm(form) {
  var name = form.name;
  var phone = form.phone;
  var gender = form.gender;
  var gejala = form.gejala;
  var lastRow = form.lastRow;
  var timestamp = new Date();
  var antrian = lastRow;
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1"); //Ganti Nama Sheet
  sheet.appendRow([timestamp, name, phone,gender,gejala, antrian]);
  return lastRow;
}

function getLastRow() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1"); //Ganti Nama Sheet
  return sheet.getLastRow();
}
function countRegistrations() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1"); //Ganti Nama Sheet
  var lastRow = sheet.getLastRow();
  return lastRow - 1; // Mengurangi 1 karena baris pertama adalah header
}

6. Copy Script di bawah ini ke Page.html.

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<!DOCTYPE html>
<html>
  <head>
<base target="_top">
   <style>
  .container {
    margin-top: 50px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-control {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  .form-check-label {
    margin-left: 10px;
  }

  .btn {
    margin-right: 10px;
  }
  

</style>

  </head>

  <body onload="updateRegistrationsCount()">
      <div class="container">
    <h1>Pendaftaran Nomor Antrian</h1>
    <? if (lastRow == 0) { ?>
      <p>Belum ada data antrian yang terdaftar.</p>
    <? } else { ?>
 
 <p><h2>Jumlah Pendaftar : <strong><span id="registrationsCount"></span></strong></h2></p>

     
    <? } ?>
     <div class="h3" style="color:blue;"  id="output"></div>
    <form id="myForm">
       <div class="form-group">
      <label for="name">Nama:</label>
      <input type="text" id="name" class="form-control" name="name" required>
       </div>

        <div class="form-group">
      <label for="phone">Nomor Telepon:</label>
      <input type="tel" id="phone" class="form-control" name="phone" required><br>
        </div>

 <div class="form-group">
       <label for="jenis_kelamin">Jenis Kelamin:</label>
          <div class="form-check">
            <input type="radio" id="laki_laki" name="jenis_kelamin" class="form-check-input" value="Laki-laki" required>
            <label for="laki_laki" class="form-check-label">Laki-laki</label>
          </div>
          <div class="form-check">
            <input type="radio" id="perempuan" name="jenis_kelamin" class="form-check-input" value="Perempuan">
            <label for="perempuan" class="form-check-label">Perempuan</label>
          </div>
 </div>
  <div class="form-group">
           <label>Pertanyaan:</label>
          <div class="form-check">
            <input type="checkbox" id="gejala1" name="gejala" class="form-check-input" value="Sudah Vaksin" required>
            <label for="gejala1" class="form-check-label">Sudah Vaksin (Wajib)</label>
          </div>
          <div class="form-check">
            <input type="checkbox" id="gejala2" name="gejala" class="form-check-input" value="Sedang Sakit">
            <label for="gejala2" class="form-check-label">Sedang Sakit</label>
          </div>
  </div>
      <input type="hidden" id="lastRow" name="lastRow" value="<?=lastRow?>">
      <input type="submit" class="btn btn-primary" value="Daftar">
    </form>
  </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

   
    <script>
      function updateRegistrationsCount() {
        google.script.run.withSuccessHandler(function(count) {
          var countElement = document.getElementById("registrationsCount");
          countElement.innerHTML = count;
        }).countRegistrations();
      }
      


      document.getElementById("myForm").addEventListener("submit", function(e) {
        e.preventDefault();
        var form = document.getElementById("myForm");
        var name = form.elements["name"].value;
        var phone = form.elements["phone"].value;
        var gender = document.querySelector('input[name="jenis_kelamin"]:checked').value;
        var gejala = getCheckedGejala();
        var lastRow = form.elements["lastRow"].value;
        google.script.run.withSuccessHandler(updateOutput).processForm({name: name, phone: phone,gender,gejala, lastRow: lastRow});
        form.reset();
      });

      function updateOutput(antrian) {
        var output = document.getElementById("output");
        //alert('Nomor Antrian Anda adalah ' + antrian);
       output.innerHTML = "Pendaftaran berhasil. Nomor antrian Anda adalah: " + antrian;
        document.getElementById("lastRow").value = antrian ;
        updateRegistrationsCount();
     
      }
       function getCheckedGejala() {
    var checkboxes = document.getElementsByName('gejala');
    var values = [];

    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        values.push(checkboxes[i].value);
      }
    }

    return values.join(', ');
  }
    </script>
  </body>
</html>
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.02.25.23 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>