Userform App Script Part 1

===== Code.gs =====

function doGet() {

  var form = HtmlService.createTemplateFromFile("Index");  
  return form.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

=====stylecss.html=====

<style>

#objek{
position: absolute;
background-color: #b8b8b8;
left: 50px;
top: 50px;
}


#Input1{
position: absolute;
top: 150px;
left: 410px;

}

#Label1{
position: absolute;
top: 150px;
left: 325px;
color:#000;
font-weight:bold;
}

#Input2{
position: absolute;
top: 220px;
left: 552px;
}

#Label2{
position: absolute;
top: 220px;
left: 450px;
color:#000;
font-weight:bold;
}


#Input3{
position: absolute;
top: 220px;
left: 140px;
}

#Label3{
position: absolute;
top: 220px;
left: 40px;
color:#000;
font-weight:bold;
}

#Input4{
position: absolute;
top: 250px;
left: 552px;
}

#Label4{
position: absolute;
top: 250px;
left: 450px;
color:#000;
font-weight:bold;
}


#Input5{
position: absolute;
top: 250px;
left: 140px;
}

#Label5{
position: absolute;
top: 250px;
left: 40px;
color:#000;
font-weight:bold;
}

#Input6{
position: absolute;
top: 280px;
left: 552px;
}

#Label6{
position: absolute;
top: 280px;
left: 450px;
color:#000;
font-weight:bold;
}


#Input7{
position: absolute;
top: 280px;
left: 140px;
}

#Label7{
position: absolute;
top: 280px;
left: 40px;
color:#000;
font-weight:bold;
}

#Input8{
position: absolute;
top: 310px;
left: 552px;
}

#Label8{
position: absolute;
top: 310px;
left: 450px;
color:#000;
font-weight:bold;
}

#Input9{
position: absolute;
top: 310px;
left: 140px;
}

#Label9{
position: absolute;
top: 310px;
left: 40px;
color:#000;
font-weight:bold;
}

#Input10{
position: absolute;
top: 340px;
left: 140px;
}

#Label10{
position: absolute;
top: 340px;
left: 40px;
color:#000;
font-weight:bold;
}




#btnbersih{

position: absolute;
top: 188px;
left: 860px;
background-color: #adadad;
font-weight: bold;
font-size: 14px;

}


#btncari{
position: absolute;
top: 150px;
left: 560px;
background-color: #adadad;
font-weight: bold;
font-size: 14px;

}


#btnubah{

position: absolute;
top: 235px;
left: 860px;
background-color: #adadad;
font-weight: bold;
font-size: 14px;

}


#btnsimpan{

position: absolute;
top: 283px;
left: 860px;
background-color: #adadad;
font-weight: bold;
font-size: 14px;

}

#btnhapus{

position: absolute;
top: 330px;
left: 860px;
background-color: #adadad;
font-weight: bold;
font-size: 14px;

}

   #Komponen{
   display: none;
   opacity: .8;
   position: fixed;
   top: 0px;
   left:0px;
   background: #FFF;
   width: 100%;
   z-index:10;   
   }
   
   #BoxMessage {
    display: none;
    position: fixed;
    background: #000;
    border-radius: 7px;
    width: 550px;
    z-index:10;   
   }
   
   #BoxMessage > div {background: #FFF; margin: 6px}
   #BoxMessage > div > #JudulMsg{background: #fff; font-size: 22px; padding:10px;color: #000;text-align:center;}
   #BoxMessage > div > #IsiMsg {background: #b8b8b8; font-size: 15px; padding:20px;color: #000;text-align:center;}
   #BoxMessage > div > #AkhirMsg{background: #b8b8b8; padding:10px;text-align:center;}


</style>

=======Form-js.html======

<script>

function Message(){
   
   this.Execute = function (){

   var Width = window.innerWidth;
   var Height = window.innerHeigth;
   
   var Objek = document.getElementById("Komponen");
   var Box = document.getElementById("BoxMessage");
   
   Objek.style.display = "block";
   Objek.style.heigth = Height+ "px";
   
   Box.style.left = (Width/2) - (550 * .5)+"px";
   Box.style.top = "70px";
   Box.style.display = "block";
   
    document.getElementById("JudulMsg").innerHTML = "Peringatan!";
    document.getElementById("IsiMsg").innerHTML = "Yakin ingin hapus data ini?";
    document.getElementById("AkhirMsg").innerHTML = '<button class = "green" onclick= "Confirm.Hapus()"> <b> <font color= "black" size = "5">Hapus</font></b></button><button class = "red" onclick= "Confirm.Tidak()"> <b><font color= "black"  size = "5">Batal</font></b></button>';                                                                                                               
       
   }
   
   this.Tidak = function (){   
   Tutup();   
   }
   
   
   this.Hapus = function (){
   
    document.getElementById("AkhirMsg").innerHTML = '<button onclick= "Tutup()"> <b> <font color= "black" size = "5">Tutup</font></b></button>';
    
   var carikriteria = document.getElementById("Input1").value;
   
   if (carikriteria.trim().length ==0){ 
    document.getElementById("IsiMsg").innerHTML = "Dibatalkan! ID tidak boleh kosong!";
   
    }else{
         
       google.script.run.withSuccessHandler(Memuat).HapusData(carikriteria);
  
        function Memuat(kembali){  
   
          if (kembali != "Data tidak ditemukan!"){

              document.getElementById("IsiMsg").innerHTML = "Data berhasil dihapus!";

            Bersih();

           }else{ 

              document.getElementById("IsiMsg").innerHTML = "Data tidak ditemukan!";

            }    
       }
   
     }
    }
   
   }   
   
var Confirm = new Message();

function boxMsgBox(m){

   var Width = window.innerWidth;
   var Height = window.innerHeigth;
   
   var Objek = document.getElementById("Komponen");
   var Box = document.getElementById("BoxMessage");
   
   Objek.style.display = "block";
   Objek.style.heigth = Height+ "px";
   
   Box.style.left = (Width/2) - (550 * .5)+"px";
   Box.style.top = "70px";
   Box.style.display = "block";        

  document.getElementById("JudulMsg").innerHTML = "Peringatan!"; 
  document.getElementById("IsiMsg").innerHTML = m;
  document.getElementById("AkhirMsg").innerHTML = '<button class = "orange" onclick= " Tutup()"> <b> <font color= "black" size = "5">Tutup</font></b></button>';

}

function Tutup(){
document.getElementById("BoxMessage").style.display = "none";
document.getElementById("Komponen").style.display = "none";
}


document.getElementById("btncari").addEventListener("click", Cari);
 
  function Cari(){  
  
  var carikriteria = document.getElementById("Input1").value;
  
  if (carikriteria.trim().length == 0){  
   var m = "ID wajib diisi!";
   boxMsgBox(m);
   return false;
  };  
  
  google.script.run.withSuccessHandler(Memuat).CariData(carikriteria);
  
  function Memuat(kembali){  
   
  if (kembali != "Data tidak ditemukan!"){
  
  document.getElementById("Input1").value = kembali[0]
  M.updateTextFields();
  document.getElementById("Input2").value = kembali[1]
  M.updateTextFields();
  document.getElementById("Input3").value = kembali[2]
  M.updateTextFields();
  document.getElementById("Input4").value = kembali[3]
  M.updateTextFields();
  document.getElementById("Input5").value = kembali[4]
  M.updateTextFields();
  document.getElementById("Input6").value = kembali[5]
  M.updateTextFields();
  document.getElementById("Input7").value = kembali[6]
  M.updateTextFields();
  document.getElementById("Input8").value = kembali[7]
  M.updateTextFields();
  document.getElementById("Input9").value = kembali[8]
  M.updateTextFields();
  document.getElementById("Input10").value = kembali[9]
  M.updateTextFields();

  }else{
  
   var m = "Data tidak ditemukan!";
   boxMsgBox(m);
   Bersih ();
   
  }
    
  }
  }
  
  document.getElementById("btnbersih").addEventListener("click", Bersih);
 
  function Bersih (){  
  document.getElementById("Input1").value = "";
  document.getElementById("Input2").value = "";
  document.getElementById("Input3").value = "";
  document.getElementById("Input4").value = "";
  document.getElementById("Input5").value = "";
  document.getElementById("Input6").value = "";
  document.getElementById("Input7").value = "";
  document.getElementById("Input8").value = "";
  document.getElementById("Input9").value = "";
  document.getElementById("Input10").value = "";
  }
  
      
  document.getElementById("btnsimpan").addEventListener("click", Simpan);
   
   function Simpan(){
   
   var Input1 = document.getElementById("Input1").value;
   var Input2 = document.getElementById("Input2").value;
   var Input3 = document.getElementById("Input3").value;
   var Input4 = document.getElementById("Input4").value;
   var Input5 = document.getElementById("Input5").value;
   var Input6 = document.getElementById("Input6").value;
   var Input7 = document.getElementById("Input7").value;
   var Input8 = document.getElementById("Input8").value;
   var Input9 = document.getElementById("Input9").value;
   var Input10 = document.getElementById("Input10").value;

   if (Input1.trim().length != 0){
   var m = "ID harus kosong karena terisi secara otomatis!";
   boxMsgBox(m);
   return false;   
   }
   
  if (Input2.trim().length == 0 || Input3.trim().length == 0 || Input4.trim().length == 0 || 
   Input5.trim().length == 0 || Input6.trim().length == 0 || Input7.trim().length == 0 || Input8.trim().length == 0 || Input9.trim().length == 0 || Input10.trim().length == 0){
   
   var m = "Isi semua kolom kecuali kolom ID!";
   boxMsgBox(m);
    return; 
       
   }else{
   
  var Data ={
 Input2: Input2,
 Input3: Input3,
 Input4: Input4,
 Input5: Input5,
 Input6: Input6,
 Input7: Input7,
 Input8: Input8,
 Input9: Input9,
 Input10: Input10,
   };
   
   
 google.script.run.withSuccessHandler(Simpan).SimpanData(Data);
   
  function Simpan(kembali) {  
  var m = "Data berhasil disimpan!";
   boxMsgBox(m);
  Bersih();  
     }
}
}
 


document.getElementById("btnubah").addEventListener("click", Ubah);
   
   function Ubah(){
   
   var Input1 = document.getElementById("Input1").value;
   var Input2 = document.getElementById("Input2").value;
   var Input3 = document.getElementById("Input3").value;
   var Input4 = document.getElementById("Input4").value;
   var Input5 = document.getElementById("Input5").value;
   var Input6 = document.getElementById("Input6").value;
   var Input7 = document.getElementById("Input7").value;
   var Input8 = document.getElementById("Input8").value;
   var Input9 = document.getElementById("Input9").value;
   var Input10 = document.getElementById("Input10").value;


  if (Input1.trim().length == 0 || Input2.trim().length == 0 || Input3.trim().length == 0 || Input4.trim().length == 0 || 
   Input5.trim().length == 0 || Input6.trim().length == 0 || Input7.trim().length == 0 || Input8.trim().length == 0 || Input9.trim().length == 0 || Input10.trim().length == 0){
   
   
   var m = "Isi semua kolom!";
   boxMsgBox(m);
       
   }else{
   
  var Data ={ 
 Input1: Input1,
 Input2: Input2,
 Input3: Input3,
 Input4: Input4,
 Input5: Input5,
 Input6: Input6,
 Input7: Input7,
 Input8: Input8,
 Input9: Input9,
 Input10: Input10, 
   };
   
   
 google.script.run.withSuccessHandler(Ubah).UbahData(Data);
   
  function Ubah(kembali) {

  if(kembali != "ID tidak ditemukan!" ){
   var m = "Data berhasil diupdate!";
   boxMsgBox(m);
  Bersih();
  }else{
   var m = "Data tidak ditemukan!";
   boxMsgBox(m);
  }

}
}
}   
  
</script>

======Macros.gs=======

var url = "Your spreadsheet URL here"

var namasheet = "Data";
var barisawal = 2;
var kolomawal = 1;
var headerbaris = 1;

// kolom ARRAY
var kolomID = 0;



function CariData(carikriteria){

var sheet = SpreadsheetApp.openByUrl(url);

var datasheet = sheet.getSheetByName(namasheet); 

var data = datasheet.getRange(barisawal, kolomawal, datasheet.getLastRow()-headerbaris,10).getValues(); 

for(var baris = 0; baris<data.length; baris++){
          
     if(data[baris][kolomID].toString().toLowerCase() == carikriteria.toString().toLowerCase() || data[baris][1].toString().toLowerCase() == carikriteria.toString().toLowerCase()){           
       
        var Memuat={};
        
        Memuat.Input1 = data[baris][kolomID]
        Memuat.Input2 = data[baris][1];
        Memuat.Input3 = data[baris][2];      
        Memuat.Input4 = data[baris][3];         
        Memuat.Input5 = data[baris][4];
        Memuat.Input6 = data[baris][5];
        Memuat.Input7 = data[baris][6];  
        Memuat.Input8 = data[baris][7];
        Memuat.Input9 = data[baris][8];
        Memuat.Input10 = data[baris][9];

        data.length = 0

         return ([Memuat.Input1,Memuat.Input2, Memuat.Input3, Memuat.Input4, Memuat.Input5, Memuat.Input6, Memuat.Input7, Memuat.Input8, Memuat.Input9, Memuat.Input10])     
                 
     }
}

data.length = 0
return "Data tidak ditemukan!";


}


function HapusData(carikriteria){

var sheet = SpreadsheetApp.openByUrl(url);

var datasheet = sheet.getSheetByName(namasheet); 

var data = datasheet.getRange(barisawal, kolomawal, datasheet.getLastRow()-headerbaris,10).getValues();  

for(var baris = 0; baris<data.length; baris++){
          
     if(data[baris][kolomID].toString().toLowerCase() == carikriteria.toString().toLowerCase()){           
       
           var baris = baris + barisawal;
           
           datasheet.deleteRow(baris);           
          data.length = 0
         return "Data telah dihapus!"    
         
         
     }

}

data.length = 0
return "Data tidak ditemukan!";


}


function SimpanData(Data){

var sheet = SpreadsheetApp.openByUrl(url);
var datasheet = sheet.getSheetByName(namasheet); 

var novoid = Math.max.apply(null, datasheet.getRange("A2:A").getValues()); 
var novoid = novoid + 1


var baris = datasheet.getLastRow() + 1;

datasheet.getRange(baris, 1).setValue(novoid);
datasheet.getRange(baris, 2).setValue([Data.Input2]);
datasheet.getRange(baris, 3).setValue([Data.Input3]);
datasheet.getRange(baris, 4).setValue([Data.Input4]);
datasheet.getRange(baris, 5).setValue([Data.Input5]);
datasheet.getRange(baris, 6).setValue([Data.Input6]);
datasheet.getRange(baris, 7).setValue([Data.Input7]);
datasheet.getRange(baris, 8).setValue([Data.Input8]);
datasheet.getRange(baris, 9).setValue([Data.Input9]);
datasheet.getRange(baris, 10).setValue([Data.Input10]);

return "Simpan data berhasil!";

}



function UbahData(Data){

var sheet = SpreadsheetApp.openByUrl(url);
var datasheet = sheet.getSheetByName(namasheet); 
var carikriteria = Data.Input1

var data = datasheet.getRange(barisawal, kolomawal, datasheet.getLastRow()-headerbaris,10).getValues(); 
for(var baris = 0; baris<data.length; baris++){
          
     if(data[baris][kolomID].toString().toLowerCase() == carikriteria.toString().toLowerCase()){   
     
      var baris = baris + barisawal;

      datasheet.getRange(baris, 2).setValue([Data.Input2]);
      datasheet.getRange(baris, 3).setValue([Data.Input3]);
      datasheet.getRange(baris, 4).setValue([Data.Input4]);
      datasheet.getRange(baris, 5).setValue([Data.Input5]);
      datasheet.getRange(baris, 6).setValue([Data.Input6]);
      datasheet.getRange(baris, 7).setValue([Data.Input7]);
      datasheet.getRange(baris, 8).setValue([Data.Input8]);
      datasheet.getRange(baris, 9).setValue([Data.Input9]);
      datasheet.getRange(baris, 10).setValue([Data.Input10]);


          data.length = 0
          return "Edit data berhasil!";
    }
}

data.length = 0
return "ID tidak ditemukan!";

}


=======Index.html=======

<html>
  <head>    
    <base target="_top">  
     <?!=include("stylecss") ?>    
  </head>
  <body>

<div id = "Komponen"></div>
<div id = "BoxMessage">

<div>
<div id = "JudulMsg"></div>
<div id = "IsiMsg"></div>
<div id = "AkhirMsg"></div>
</div>
</div>        

<div id="objek"style="width: 1000px; height: 450px; border: 1px solid #808080;margin-left:9%" >
<p align = "center"> 
<b><font color= "#000" size="3"><img src="https://drive.google.com/uc?id=1KkRhbIdSOqigRGoQ4aCQ3PqmjG-JyVO_" style="margin-top:-5px;width:70px"><br>SEKOLAH DASAR NEGERI 001 BABULU<br>Address: Jl.Provinsi Km 47 Babulu Darat Kecamatan Babulu Kabupaten Penajam Paser Utara Prov.Kaltim 76285</font></b><hr color="#000">     
            </p>
     
           <label id = "Label1">Student ID</label>
           <input id="Input1" type="text" size = "15" style="text-align:center" placeholder="Input ID to Search">

            <label id = "Label2">SRN</label>
            <input id="Input2" type="text" size="33" placeholder="Input SRN">

            <label id = "Label3">Name</label>            
            <input id="Input3" type="text" size = "33" placeholder="Type your name">
            
            <label id = "Label4">Gender</label>
            <select id="Input4" type="text"> 
            <option>--Select gender--</option>
             <option>Male</option>
             <option>Female</option>
           </select>

           <label id = "Label5">Classroom</label>
           <select id="Input5" type="text"> 
            <option>--Select classroom--</option>
             <option>I (Satu)</option>
             <option>II (Dua)</option>
             <option>III (Tiga)</option>
             <option>IV (Empat)</option>
             <option>V (Lima)</option>
             <option>VI (Enam)</option>
           </select>
          <div class="sub1"style="width:100%;text-align:center;width:68%;margin-left:14%;margin-top:50px">
           <h4>STUDENT INFORMATION</h4>
          </div>
           
           <label id = "Label6">Department</label>
           <select id="Input6" type="text" placeholder="Department">
            <option>--Select department--</option>
             <option>IPA</option>
             <option>IPS</option>
             <option>TIK</option>
           </select>  
           
           <label id = "Label7">School Year</label>
           <input id="Input7" type="text" size = "33" placeholder="School Year"> 
           
           <label id = "Label8">Address</label>
           <textarea id="Input8" style="width:26%" rows="3"type="text" size = "33" placeholder="Type your address"></textarea>  

           <label id = "Label9">Email</label>
           <input id="Input9" type="text" size = "33"placeholder="Email"> 
           
           <label id = "Label10">Phone</label>
           <input id="Input10" type="text" size = "33"placeholder="Phone number"> 

            
            <button id = "btnbersih" style="width: 100px; height: 30px">CLEAR</button>
            <button id = "btncari" style="width: 90px; height: 23px">SEARCH</button>
            <button id = "btnubah" style="width: 100px; height: 30px">UPDATE</button>
            <button id = "btnsimpan" style="width: 100px; height: 30px">SAVE</button>
            <button id = "btnhapus" style="width: 100px; height: 30px" onclick ="Confirm.Execute()">DELETE</button>
            <div class="footer"style="margin-top:20%; margin-left:-4%;color:#000">   
            <center><b>Created by JNC Edukasi</b></center>
            </div>
           </div>        
          
             <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 

         <?!=include("Form-js")?> 
   
  </body>
</html>



Copy 

https://docs.google.com/spreadsheets/d/1Kc6tghkp3VpffAmjqrsZHcfShqwrqqOW-K1wM8pwMOs/copy

Advertisement

Facebook

Userform App Script Part 1

Diposting oleh JNC Edukasi

Posting Komentar

0 Komentar

Comments

Most Popular

Login CRUD

Jane Grocery V.1

Database Search

Random Posts

Subscribe Us

Tags

Menu Footer Widget

Contact form

Advertisement

Facebook

Userform App Script Part 1

Diposting oleh JNC Edukasi

Anda mungkin menyukai postingan ini

Posting Komentar

0 Komentar

Comments

Social Plugin

Most Popular

Login CRUD

Jane Grocery V.1

Database Search

Random Posts

Subscribe Us

Tags

Menu Footer Widget

Contact form