#JP03 Cara Memberi Password Pada Google Form (Profesional)

Cara Memberi Password Pada Google Form (Profesional)

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

1. Copy Spreadsheet (Klik Disini)

2. Copy semua Google Form

Google Form 1 (Klik disini)
Google Form 2 (Klik disini)
Google Form 3 (Klik disini)

3. Buka Spreadsheet. ada 2 sheet yaitu sheet "Data" dan "Setting"

Penjelasan :

0-Password : Silahkan diisi password

1-User ID : Silahkan di isi nama/user

2-IFRAME : Pada kolm IFRAME pastekan code dari sheet Setting

3-Key : Abaikan saja, karena otomatis terisi

4. Pada sheet "Setting"

Penjelasan :

Keterangan : Silahkan di isi judul pada Google Form
Link Google Drive : Silahkan Copy link view dari Google Form (Tutorial)
Embed Code : Setelah Link Google Drive terisi maka Embed Code otomatis akan berubah, copy dan "Paste Value" ke kolom "IFRAME" pada sheet Data (Tutorial)

5. Pilih menu Ekstensi - Apps Script

6. Paste code dibawah ini ke file Code.gs pada Apps Script

Masukkan Password (Password ada di dalam video)

function doGet(e) {
  
  return HtmlService.createTemplateFromFile("Index").evaluate()
  .setTitle("Form Soal")
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


/* PROCESS FORM */
function processForm(formObject){ 
  var concat = formObject.searchtext+formObject.searchtext2;
  var result = "";
  if(concat){//Execute if form passes search text
      result = search(concat);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS ;
function search(searchtext){
  var spreadsheetId   = '170-RDE2Qr7-vLoZSUNT4J_Q-wttJtAbcKMW_6fNUzuE'; //** CHANGE !!!!
  var sheetName = "Data"
  var range = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName).getDataRange();
  var data = range.getValues();
  var ar = [];
  
  data.forEach(function(f) {
    if (~[f[3]].indexOf(searchtext)) {
      ar.push([ f[2] ]);
    }
  });
                                           
  return ar;
};

Penting!

Ganti spreadsheetId dengan ID kalian, perhatikan gambar dibawah.

7. Paste code dibawah ini ke file Index.html pada Apps Script

Masukkan Password (Password sama dengan di atas)

<!DOCTYPE html>
<html>
    <head>
        <base target="_self">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
       
   <style>
   
   /* h5 {background: red;} */
   
   </style>

        
    </head>
    <body>
        <div class="container">
            <br>
            <div class="row">
              <div class="col">
            
                  <!-- ## SEARCH FORM ------------------------------------------------ -->
                  <center><form id="search-form" onsubmit="handleFormSubmit(this)">
                    <div class="form-group mb-2">
                      <h5 for="searchtext">Masukkan ID dan Password Soal</h5>
                    </div><p>
                    <div class="form-group mx-sm-3 mb-3">
                      <input type="text" class="form-control col-sm-6" id="searchtext" name="searchtext" placeholder="User ID"><br>
                      <input type="password" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="Password">
                    </div><p>
                    <button type="submit" class="btn btn-primary mb-2">Cari Soal</button>
                    <span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
                    <span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span>
                    <span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span>
                  </form></center>
                  <!-- ## SEARCH FORM ~ END ------------------------------------------- -->
              
              </div>    
            </div>
            <div class="row">
              <div class="col">
            
                <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
                <div id="search-results" class="table-responsive">
                  <!-- The Data Table is inserted here by JavaScript -->
                </div>
                <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->
                  
              </div>
            </div>
        </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
        <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
        <script>
          //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
            }
          }
          window.addEventListener("load", preventFormSubmit, true); 
             
          
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
           if(document.getElementById('searchtext').value == "" || document.getElementById('searchtext2').value == ""){
              alert("Fill in Name and Password");
           }else{
             document.getElementById('resp-spinner5').classList.remove("d-none");
             document.getElementById('resp-spinner6').classList.remove("d-none");
             document.getElementById('resp-spinner7').classList.remove("d-none");
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
           };
          };
        
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
             document.getElementById('resp-spinner5').classList.add("d-none");
             document.getElementById('resp-spinner6').classList.add("d-none");
             document.getElementById('resp-spinner7').classList.add("d-none");
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
                           "<thead style='white-space: nowrap'>"+
                             "<tr>"+                               //Change table headings to match with the Google Sheet
                            "</tr>"+
                          "</thead>";
              for(var i=0; i<dataArray.length; i++) {
                  result += "<tr>";
                  for(var j=0; j<dataArray[i].length; j++){
                      result += "<td>"+dataArray[i][j]+"</td>";
                  }
                  result += "</tr>";
              }
              result += "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data tidak ditemukan";
            }
          }
        </script>
        <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->    
        <style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:374px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:546px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:1055px){.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:1052px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:60%}}</style><div class="disclaimer">@Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>
    
    </body>
</html>

8. Klik icon Save dan klik menu "Terapkan" - "Deployment baru"

9. Pastikan jenis "Aplikasi web", hak akses "Siapa saja / Anyone" lalu Terapkan

Penting!

Tutorial Authorize (Klik disini)

10. Selesai

#JP03 Cara Memberi Password Pada Google Form (Profesional)

Promo

Contact Form