#JP06 Cara Membuat Dropdown Bertingkat Dengan Google Script dan Spreadsheet

byJavabitpro


Cara Membuat Dropdown Bertingkat Dengan Google Script dan Spreadsheet


*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

1. Copy Spreadsheets (Klik disini)

2. Buka spreadsheets yang sudah dicopy di atas, ada 2 kolom yang berisikan kolom "KECAMATAN" dan "DESA/KELURAHAN". 

Saat data di kolom Kecamatan dipilih maka data di kolom Desa/Kelurahan akan tampil sesuai data yang dipilih pada kolom Kecamatan

3. Buka lembar kerja Apps Script dengan cara klik menu Ekstensi - Apps Script
4. Setelah lembar kerja Apps Script tempil, perhatikan ada 2 file di sebelah kiri yaitu Code.gs dan Index.html
5. Copy script dibawah ini pada Code.gs

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

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('Index');
  var kecamatans = getKecamatan();
  htmlOutput.message = '';
  htmlOutput.kecamatans = kecamatans;
  return htmlOutput.evaluate();
}

function getKecamatan() { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var lovSheet = ss.getSheetByName("Kec"); 
  var getLastRow = lovSheet.getLastRow();
  var return_array = [];
  for(var i = 2; i <= getLastRow; i++)
  {
      if(return_array.indexOf(lovSheet.getRange(i, 1).getValue()) === -1) {
        return_array.push(lovSheet.getRange(i, 1).getValue());
      }
  }

  return return_array;  
}

function getDesa(kecamatan) { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var lovSheet = ss.getSheetByName("Kec"); 
  var getLastRow = lovSheet.getLastRow();
  var return_array = [];
  for(var i = 2; i <= getLastRow; i++)
  {
      if(lovSheet.getRange(i, 1).getValue() === kecamatan) {
        return_array.push(lovSheet.getRange(i, 2).getValue());
      }
  }


  return return_array;  
}



PENJELASAN!
Perhatikan teks bergaris bawah merah, ejaan dan penulisan teks harus sama persis.


Perhatikan script yang bergaris bawah merah dibawah ini. Samakan nama sheet dengan yang ada pada spreadsheet.




6. Copy script dibawah ini pada Index.html
Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<style>
.register{
    background: -webkit-linear-gradient(left, #3931af, #00c6ff);
    margin-top: 3%;
    padding: 3%;
}
.register-left{
    text-align: center;
    color: #fff;
    margin-top: 4%;
}
.register-left input{
    border: none;
    border-radius: 1.5rem;
    padding: 2%;
    width: 60%;
    background: #f8f9fa;
    font-weight: bold;
    color: #383d41;
    margin-top: 30%;
    margin-bottom: 3%;
    cursor: pointer;
}
.register-right{
    background: #f8f9fa;
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
}
.register-left img{
    margin-top: 15%;
    margin-bottom: 5%;
    width: 25%;
    -webkit-animation: mover 2s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
.register-left p{
    font-weight: lighter;
    padding: 12%;
    margin-top: -9%;
}
.register .register-form{
    padding: 10%;
    margin-top: 10%;
}
.btnRegister{
    float: right;
    margin-top: 10%;
    border: none;
    border-radius: 1.5rem;
    padding: 2%;
    background: #0062cc;
    color: #fff;
    font-weight: 600;
    width: 50%;
    cursor: pointer;
}
.register .nav-tabs{
    margin-top: 3%;
    border: none;
    background: #0062cc;
    border-radius: 1.5rem;
    width: 28%;
    float: right;
}
.register .nav-tabs .nav-link{
    padding: 2%;
    height: 34px;
    font-weight: 600;
    color: #fff;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
.register .nav-tabs .nav-link:hover{
    border: none;
}
.register .nav-tabs .nav-link.active{
    width: 100px;
    color: #0062cc;
    border: 2px solid #0062cc;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}
.register-heading{
    text-align: center;
    margin-top: 8%;
    margin-bottom: -15%;
    color: #495057;
}
</style>
  <script>
    function GetDesa1(kecamatan) 
    {
    
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    desa.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    desa.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      desa.appendChild(option);    
    });
    
    }).getDesa(kecamatan);
    
    };
  </script> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container register">
<div class="form-group">
<h3 style="color:white">DROPDOWN BERTINGKAT</h3>
<p style="color:white">Menggunakan Google Script / Apps Script</p>
<select name="kecamatan" class="form-control"   required onchange="GetDesa1(this.value)" >
<option selected disabled value="">Pilih Kecamatan</option>
<? for(var i = 0; i < kecamatans.length; i++) { ?>      
<option value="<?= kecamatans[i] ?>" ><?= kecamatans[i] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<select name="desa" id="desa" class="form-control" required ></select>
</div>
</div>
<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.01.05.22 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>



7. Setelah selesai - klik icon Save 
 


Lalu klik tombol Deploy atau Terapkan - New deployment

8. Pastikan type "Web app" dan hak akses "Anyone" atau "Siapa saja"


Selesai.






Tags:
Previous Post Next Post