#JP02 Cara Membuat Sertifikat/Kartu Pelajar Otomatis Tanpa Email Dengan Google Form

Cara Membuat Sertifikat/Kartu Pelajar Otomatis Tanpa Email Dengan Google Form

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

1. Copy File Spreadsheets (Klik Disini)

2. Copy File Sertifikat/Kartu Pelajar (Klik Disini)

3. Akan ada 3 File di dalam Google Drive kalian

4. Klik Alat - Kelola Formulir - Edit Formulir

5. Klik Pulihkan

6. Pada Google Form dibagian foto

Klik dan pastikan type Gambar sudah tercentang

Maka di Google Drive kalian akan muncul Folder baru untuk menyimpan berkas foto dan hasil PDF dari Kartu Pelajar

7. Pada Spreadsheets pilih menu Ekstensi - Autocrat - Open

Cara Install Autocrat Klik disini

8. Klik NEW JOB

9. Beri nama pada Job Name (Terserah kalian)

10. Pilih File Template Katu Pelajar/Sertifikat yang dicopy tadi dengan mengklik From drive - lalu klik Next

11. Pada Map Source klik Marge tab lalu pilih ID Card

Pada type Foto ubah type dari "Standard" menjadi "image" dan "Foto" dirubah menjadi "FotoMaker"

Scroll kebawah, type pada QR Code dirubah dari "Standard" menjadi "Image"

12. File Name ketik <<Nomer Absen>>,<<Nama>> dan pada type pilih "PDF" - Next

13. Pada Folder Destination klik hapus dan klik Choose folder - pilih folder dimana kita akan menyimpan hasil file PDF kartu pelajar - Lalu klik Next

14. Klik Next

15. Klik Save

HAPUS JOB PERTAMA DAN KLIK RUN (TANDA PLAY)

16. Pada Spreadsheets klik menu APPS SCRIPT

17. Copy Script dibawah ini dan pastekan pada Code.gs

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

function doGet(e) {
  
  return HtmlService.createTemplateFromFile("Index").evaluate()
  .setTitle("Kartu Pelajar")
  .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   = '1pL5z0ZOOf3AVA0DvxZS4fA54trEBtCX49Tvv5QS_YVY'; //** CHANGE !!!!
  var sheetName = "Data"
  var range = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName).getDataRange();
  var data = range.getValues();
  var ar = [];
  
  data.forEach(function(f) {
    if (~[f[5]].indexOf(searchtext)) {
      ar.push([f[2],f[3],f[4]]);
    }
  });
                                           
  return ar;
};

18. Pada Code.gs edit pada script SpreadsheetID yang ada dengan Spreadsheet ID kalian (Perhatikan Gambar dibawah ini)

Buka Spreadsheet, perhatikan link dibawah ini, copy dan pastekan pada APPS SCRIPT lalu tekan icon Save.

19. Buatlah file Index.html dengan cara klik tanda (+) pilih HTML dan beri nama Index lalu copy script dibawah ini.

Masukkan Password Untuk Melihat Script (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">
                       <body>
<marquee direction="down" height="100" width="200" bgcolor="white">www.javabitpro.com</marquee>
</body>
                      <h5 for="searchtext">Download Kartu Pelajar</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="Nama"><br>
                      <input type="text" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="Nomer Absen">
                    </div><p>
                    <button type="submit" class="btn btn-primary mb-2">Cari Kartu Pelajar</button></br>
   
                    <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:1.0em'>"+
                           "<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 = "Nama atau Nomer Absen TIDAK ADA!";
            }
          }
        </script>
        <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->    
    
    </body>
</html>
<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>