#JP70 (SIMFONI) Sistem Manajemen Informasi & Nilai Siswa Lengkap Dengan Foto

Sistem Manajemen Informasi & Nilai Siswa Lengkap Dengan Foto (SIMFONI)



1. Copy Spreadsheets SIMFONI (Klik Disini)

2. Copy Spreadsheets DAFTAR NILAI (Contoh Format) (Klik Disini)




3. Buatlah folder baru untuk menyimpan semua berkas pada Google Drive.


4. Pada Spreadsheet SIMFONI yang telah di copy di atas, terdapat 3 sheet yaitu Tools, Data dan Dokumen.


5. Pada sheet Tools sesuaikan isi ID Folder yang telah dibuat dan ID Spreadsheet dari Daftar Nilai.


6. Pada sheet Data isi semua kolom yang tersedia
Catatan : Untuk kolom NIS harus sama dengan NIS yang ada pada Spreadsheet Daftar Nilai, untuk menampilkan daftar nilai berdasarkan NIS Siswa.


7. Pada sheet Dokumen, data akan terisi otomatis apabila data di tambahkan dari pada Web Apps Script.


8. Buatlah lembar kerja Apps Script, klik menu Ekstensi/Extensions lalu pilih Apps Script.


9. Terdapat 9 file default pada lembar kerja Apps Script.


10. Copy dan pastekan script di bawah ini ke Code.gs

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

/**  Source Code by Javabitpro  **/
var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Tools')
var idForder = ss.getRange('B2').getDisplayValues()
var idSheet = ss.getRange('B3').getDisplayValues()
var folder = DriveApp.getFolderById(idForder)


function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
/** Config include */
function include(file){ return HtmlService.createHtmlOutputFromFile(file).getContent()}

/** Config URL */
function getURL() { return url = ScriptApp.getService().getUrl();}


/**  Mengambil Data  **/
function getData(wsName){
  return SpreadsheetApp.getActiveSpreadsheet().getSheetByName(wsName).getDataRange().getDisplayValues().slice(1)
}

/**  Edit Data */
function saveEdit(datax){
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data') 
  const data = ss.getDataRange().getDisplayValues()
  const row = data.findIndex(r=>r[1]==datax[0])+1
       for(j = 0; j < 25; j++ ){
         ss.getRange(row,j+2).setValue("'"+datax[j])
       }
  return true
}

/**  Edit Foto*/
function saveEditIMG(e){
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data') 
  const data = ss.getDataRange().getDisplayValues()
  const row = data.findIndex(r=>r[1]==e.idSTD2)+1
  if(e.myFileIMG.length>1){
  var file1 = folder.createFile(e.myFileIMG).getId()
  var imglh ="https://lh5.googleusercontent.com/d/"+file1
  }
if(row>1){
  ss.getRange(row,27).setValue(imglh)
}
}

function saveData(e){
    const ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Dokumen');
    const data = ss.getDataRange().getDisplayValues()
    var row = data.findIndex(r=>r[0]==e.idNum)+1
    console.log(row)
  if(e.myFile1.length>1){
  var file1 = folder.createFile(e.myFile1).getUrl()
  }else{
      file1 =""
  }
if(row>1){
    ss.getRange(row,3).setValue(e.input1)
    ss.getRange(row,4).setValue(e.input2)
    ss.getRange(row,5).setValue(e.input3)
    if(e.myFile1.length>1){
    ss.getRange(row,6).setValue(file1)
    }

}else{
    ss.appendRow([
      "",
      e.idSTD3,
      e.input1,
      e.input2,
      e.input3,
      file1
    ])
}

}


function deleteData(id) {
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Dokumen')
  var data = ss.getDataRange().getDisplayValues()
  let rowID = data.findIndex(r => r[0] == id) + 1
  if (rowID > 0) {
    ss.deleteRow(rowID);
  }
  return true;
}

/**  Mengambil semua sheet  **/
function getSheetName() {
  let ss = SpreadsheetApp.openById(idSheet)
  let output = new Array()
  const sheets = ss.getSheets();
  for (i = 0; i < sheets.length; i++)
    output.push([sheets[i].getName()])
  return output
}

function search(searchtext) {
  const rangeList = SpreadsheetApp.openById(idSheet)
  .createTextFinder(searchtext)  
  .matchEntireCell(true)
  .findAll()
  .map((r) => `${r.getSheet().getSheetName()}!${r.getA1Notation()}`);

let arrNew = []
rangeList.map((m,i)=>{
var cell = SpreadsheetApp.openById(idSheet).getRange(m+":K"+m.split("A")[1]).getDisplayValues()[0];
arrNew.push(cell)
})
console.log(arrNew)
return arrNew
}


11. Copy dan pastekan script di bawah ini ke index.html

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

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.2.7/build/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


  <!-- font-awesome@6.2.0 icon Visit -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

   <?!= include('visit')?>
  <?!=include('css')?>
</head>

<body>  

  <?!=include('login')?>
  <div id="wrapper">

    <aside id="sidebar-wrapper" class="shadow">
      <div class="sidebar-brand">
        <h2>Data Kesiswaan</h2>
      </div>
      <ul class="sidebar-nav">
        <li class="active">
          <a href="#"><i class="fa fa-home"></i> Menu Utama</a>
        </li>
        <li class="">
          <a href="#"><i class="fa fa-edit"></i> Identitas Siswa</a>
        </li>
         <li class="">
          <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
            aria-controls="collapseExample"><i class="fa fa-images"></i> Edit Foto</a>
        </li>
        <li class="">
          <a href="#page2"><i class="fa fa-file-alt"></i> Dokumen</a>
        </li>
        <li class="">
          <a href="#page3"><i class="fa fa-poll"></i> Nilai Siswa</a>
        </li>
      </ul>

    </aside>

    <div id="navbar-wrapper">
      <nav class="navbar bg-body-tertiary shadow" style="background:#005689">
        <div class="container-fluid">
          <a class="navbar-brand text-white" id="sidebar-toggle"><i class="fa fa-bars"></i> Sistem Informasi Kesiswaan</a>
          <div class="d-flex" role="search">
               <button class="btn btn-danger" type="button" onclick="reLoad()">KELUAR</button>
          </div>
        </div>
      </nav>

    </div>

    <section id="content-wrapper">
      <!-- Student Profile -->
      <div class="student-profile py-4">
        <div class="container">
          <div class="row">
            <div class="col-lg-4">
              <div class="card shadow-sm">
                <div class="card-header bg-transparent text-center">
                  <img class="profile_img" src="" id="imgSTD" alt="">
                  <h3 id="stdname"></h3>
                  <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                      <form onsubmit="formEditIMG(this)">
                        <div class="row g-3">
                          <div class="col-8">
                            <input type="text" class="form-control" id="idSTD2" name="idSTD2" style="display:none">
                            <input type="file" class="form-control" id="fileIMG" name="myFileIMG">
                          </div>
                          <div class="col-4">
                            <button type="submit" class="btn btn-primary">Upload</button>
                          </div>
                        </div>
                      </form>

                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <p class="mb-0"><strong class="pr-1" id="stdID"></strong></p>
                  <p class="mb-0"><strong class="pr-1" id="stdID2"></strong></p>
                  <p class="mb-0"><strong class="pr-1" id="roomname"></strong></p>
                  <!-- <p class="mb-0"><strong class="pr-1">Section:</strong>A</p> -->
                </div>
              </div>
            </div>
            <div class="col-lg-8" >
              <div class="card shadow-sm">
                <div class="card-header bg-transparent border-0">
                  <h3 class="titleSTD"> Identitas Siswa <a class="add" title="Add"
                      data-toggle="tooltip"><i class="bx bxs-save bx-sm"></i></a><a class="edit" title="Edit"
                      data-toggle="tooltip"><i class="bx bxs-edit bx-sm"></i></a></h3>
                </div>
                <div class="card-body pt-0">
                  <table class="table" id="TabelSiswa"></table>
                </div>
              </div>
            </div>


            <div class="col-lg-12 mt-3" id="page2">
              <div class="card shadow-sm">
                <div class="card-header bg-transparent border-0">
                  <h4>Dokumen Prestasi</h4>
                  <button type="button" class="btn btn-success btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="resetForm()">Tambah</button>
                  <?!=include('table')?>
                </div>
              </div>
            </div>

            <div class="col-lg-12 mt-3" id="page3">
              <div class="card shadow-sm">
                <div class="card-header bg-transparent border-0">
                  <h4>Tabel Nilai Siswa</h4>
                  <?!=include('NilaiSiswa')?>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </section>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Dokumen</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form onsubmit="saveForm(this)" id="myF">
              <div class="row mb-3">
                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">Jenis</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control form-control-sm" id="idNum" name="idNum" style="display:none">
                  <input type="text" class="form-control form-control-sm" id="idSTD3" name="idSTD3" style="display:none" >
                  <input type="text" class="form-control form-control-sm" id="input1" name="input1" >
                </div>
              </div>
              <div class="row mb-3">
                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">Nomor</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control form-control-sm" id="input2" name="input2" >
                </div>
              </div>
              <div class="row mb-3">
                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">Nama</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control form-control-sm" id="input3" name="input3" >
                </div>
              </div>
              <div class="row mb-3">
                <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">File</label>
                <div class="col-sm-9">
                  <input type="file" class="form-control form-control-sm" id="file1" name="myFile1" >
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>

  </div>


  <?!=include('TabelSiswa')?>
  <?!=include('js')?>


  <script>
    const $button  = document.querySelector('#sidebar-toggle');
const $wrapper = document.querySelector('#wrapper');
$button.addEventListener('click', (e) => {
  e.preventDefault();
  $wrapper.classList.toggle('toggled');
});
  </script>

  <!-- bootstrap js -->
  <script src="https://cdn.jsdelivr.net/npm/js-loading-overlay@1.1.0/dist/js-loading-overlay.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>


12. Copy dan pastekan script di bawah ini TabelSiswa.html

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

<script>

function createTable(datas) {
          if(datas){
            let result = "";
            for(let i = 0; i < datas.length; i++) {
               result +="<tr class='hide' >";
               result +="<td><i class='bx bxs-check-circle'></i> Data</td>";
               result +="<td class='form-data'>"+datas[i][1]+"</td>";
               result +="</tr>";
               result +="<tr >";
               result +="<td><i class='bx bxs-check-circle'></i> Nama Lengkap</td>";
               result +="<td class='form-data'>"+datas[i][2]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Satuan UPTD</td>";
               result +="<td class='form-data'>"+datas[i][3]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Tempat Lahir</td>";
               result +="<td class='form-data'>"+datas[i][4]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Nama Sekolah</td>";
               result +="<td class='form-data'>"+datas[i][5]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Tanggal Lahir</td>";
               result +="<td class='form-data'>"+datas[i][6]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Jurusan</td>";
               result +="<td class='form-data'>"+datas[i][7]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Jenis Kelamin</td>";
               result +="<td class='form-data'>"+datas[i][8]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Kelas</td>";
               result +="<td class='form-data'>"+datas[i][9]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Agama</td>";
               result +="<td class='form-data'>"+datas[i][10]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Absensi</td>";
               result +="<td class='form-data'>"+datas[i][11]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Alamat</td>";
               result +="<td class='form-data'>"+datas[i][12]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Status Siswa</td>";
               result +="<td class='form-data'>"+datas[i][13]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Provinsi</td>";
               result +="<td class='form-data'>"+datas[i][14]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Tahun Masuk</td>";
               result +="<td class='form-data'>"+datas[i][15]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Kab/Kota</td>";
               result +="<td class='form-data'>"+datas[i][16]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Tahun Lulus</td>";
               result +="<td class='form-data'>"+datas[i][17]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Kecamatan</td>";
               result +="<td class='form-data'>"+datas[i][18]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Wali Kelas</td>";
               result +="<td class='form-data'>"+datas[i][19]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Kelurahan/Desa</td>";
               result +="<td class='form-data'>"+datas[i][20]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Wali jurusan</td>";
               result +="<td class='form-data'>"+datas[i][21]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> RT/RW</td>";
               result +="<td class='form-data'>"+datas[i][22]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Wali Praktek</td>";
               result +="<td class='form-data'>"+datas[i][23]+"</td>";
               result +="</tr>";
               result +="<tr>";
               result +="<td><i class='bx bxs-check-circle'></i> Kode Pos</td>";
               result +="<td class='form-data'>"+datas[i][24]+"</td>";
               result +="<td><i class='bx bxs-check-circle'></i> Keterangan</td>";
               result +="<td class='form-data'>"+datas[i][25]+"</td>";
               result +="</tr>";      

            }

            document.getElementById('TabelSiswa').innerHTML = result;

        }
      }

// Tombol Edit
  $(document).on("click", ".edit", function(){    
    $(this).parents(this).find(".form-data:nth-child(2n+2)").each(function(){
    $(this).html('<input type="text" class="form-input" value="' + $(this).text() + '">');
    });   
     $(this).parents(".titleSTD").find(".add, .edit").toggle();  
      });


// Tombol Simpan
  $(document).on("click", ".add", function(){ 
      if(confirm("Apakah Ingin mengedit??")){ 
        JsLoadingOverlay.show();  

      let datax = []
      $('.form-input').each(function () {
          const radioValue = [this.value]
          datax.push(radioValue);
        });

      google.script.run.withSuccessHandler((result)=>{
        JsLoadingOverlay.hide();  
          Swal.fire(
            'Berhasil Diedit',
          )   
          
          $(this).parents(".titleSTD").find(".add, .edit").toggle();
          google.script.run.withSuccessHandler((result)=>{
              dataSTD =result
              searchLogin()
          }).getData('Data')

       }).saveEdit(datax)

        } else{
       $(this).parents(".titleSTD").find(".add, .edit").toggle();
          google.script.run.withSuccessHandler((result)=>{
              dataSTD =result
              searchLogin()
          }).getData('Data')


        }
       });

</script>


13. Copy dan pastekan script di bawah ini ke table.html

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

<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
 <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
 <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
 <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" rel="stylesheet"> 
 <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<table id="showTable" class="display" width="100%"></table>
<script>

function tableAll(item){
  if(item) {
      let result = "<div><table>"+
                   "<thead class='text-white' style='background:#005689'>"+ 
                   "<tr>"+                                                                        
                  "<th with='20px' class='text-center'>No</th>"+ 
                  "<th with='20px' class='hide text-center'>NIS</th>"+ 
                  "<th with='40px' class='text-center'>Jenis</th>"+ 
                  "<th with='100px' class='text-center'>Nomor</th>"+ 
                  "<th with='100px' class='text-center'>Nama</th>"+
                  "<th with='20px' class='text-center'>Aksi</th>"+
                  "</tr>"+                            
                  "</thead>";
          var n=1
           for(var i=0; i<item.length; i++) {
               result += "<tr class='text-center'>";
               result += "<td>"+[n]+"</td>" 
               result += "<td class='hide'>"+item[i][0]+"</td>" 
               result += "<td>"+item[i][2]+"</td>" 
               result += "<td>"+item[i][3]+"</td>" 
               result += "<td>"+item[i][4]+"</td>" 
               result += '<td><a href="'+item[i][5]+'" target="_blank"> <i class="bx bxs-file-jpg bx-sm"></i></a><span class="text-warning" onclick="editData(this);" data-bs-toggle="modal" data-bs-target="#exampleModal" ><i class="bx bx-edit bx-sm"></i></span>  <span class="text-danger" onclick="delData(this);"><i class="bx bx-trash bx-sm"></i></span></td>' 
               result += "</tr>";
               n++
              }
        $("#showTable").html(result)
      new DataTable('#showTable', {
      destroy: true,    
      responsive : true,
         columnDefs:[{
          targets: [1,2,3],
          className: 'all',
          },
          ],
      order: [[0, 'desc']],
});

    }
}

</script>


<script>
function editData(el){
let id1 = el.parentNode.parentNode.cells[1].innerHTML; 
let id2 = el.parentNode.parentNode.cells[2].innerHTML; 
let id3 = el.parentNode.parentNode.cells[3].innerHTML; 
let id4 = el.parentNode.parentNode.cells[4].innerHTML; 
$('#idNum').val(id1)
$('#input1').val(id2)
$('#input2').val(id3)
$('#input3').val(id4)
}


function delData(el){
var idDel = el.parentNode.parentNode.cells[0].innerHTML; 
Swal.fire({
  title: 'Apakah Anda ingin menghapus data ini?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Ys, Hspus!'
}).then((result) => {
  if (result.isConfirmed) {
      google.script.run.withSuccessHandler(()=>{
          Swal.fire(
            'Berhasil dihapus',
          )
google.script.run.withSuccessHandler(tableAll).getData('Dokumen')
        }).deleteData(idDel)
   }
})
 }

</script>


14. Copy dan pastekan script di bawah ini NilaiSiswa.html

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

<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
 <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
 <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
 <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" rel="stylesheet"> 
 <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<table id="showTableG" class="display" width="100%" ></table>
<script>
 
function tableAllGread(result){
      new DataTable('#showTableG', {
          data:result,
          destroy: true,
          responsive: true,
          columns: [
              { title: 'No' },
              { title: 'Mata Pelajaran' },
              { title: 'Ujian Semester 1' },
              { title: 'Ujian Semester 2' },
              { title: 'Ujian Praktek' },
              { title: 'Revisi' },
              { title: 'Total' },

          ],
       columnDefs:[{
          targets: [1,2,3],
          className: 'all',
          },
          ],
      order: [[0, 'desc']],
      });
        }
</script>


15. Copy dan pastekan script di bawah ini ke js.html

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

<script>
  var dataSTD
  google.script.run.withSuccessHandler((result)=>{
      dataSTD =result
  }).getData('Data')

  var dataFile
  google.script.run.withSuccessHandler((result)=>{
      dataFile =result
  }).getData('Dokumen')

function searchLogin(){
  let id = $('#searchID').val()
  let item = dataSTD.filter(r=>r[1]==id)  // Informasi siswa
  let item2 = dataFile.filter(r=>r[1]==id) // Cari file
  if(item!=""||item2!=""){
             $('#wrapper').show()
             $('#formLog').hide()
             $('#idSTD2').val(item[0][1])
             $('#idSTD').text(item[0][1])
             $('#idSTD3').val(item[0][1])
             $('#stdname').text(item[0][2])
             $('#imgSTD').attr("src",item[0][26]);
            $('#roomname').text("NIS : "+item[0][1])
            $('#stdID').text("Nama : "+item[0][2])
            google.script.run.withSuccessHandler(tableAllGread).search(item[0][1]) // Tabel nilai
            createTable(item) // Tabel informasi dasar
            tableAll(item2)  // Tabel lampiran file
      }else{
             Swal.fire(
            'Kata sandinya salah.!',            
          )    
          }

}

// Dokument Prestasi
  function saveForm(obj){
    event.preventDefault()
       JsLoadingOverlay.show();
      google.script.run.withSuccessHandler(()=>{
          JsLoadingOverlay.hide(); 
              Swal.fire(
            'Berhasil disimpan.',            
          )      
          google.script.run.withSuccessHandler((result)=>{
              dataFile =result
              searchLogin()
          }).getData('Dokumen')
  
      $('#exampleModal').modal('hide')
    }).saveData(obj)

  }

//Edit Gambar
  function formEditIMG(obj){
    event.preventDefault()
       JsLoadingOverlay.show();
      google.script.run.withSuccessHandler(()=>{
          JsLoadingOverlay.hide(); 
              Swal.fire(
            'Berhasil disimpan.',            
          )    
          google.script.run.withSuccessHandler((result)=>{
              dataSTD =result
              searchLogin()
          }).getData('Data')

    }).saveEditIMG(obj)
  }


   function reLoad() {
          Swal.fire(
            'Anda Berhasil Keluar',
          )   
       google.script.run.withSuccessHandler(function(url){
          window.open(url,'_top');
      }).getURL();
    }

function resetForm(){
   $('#idNum').val('')
   $('#input1').val('')
   $('#input2').val('')
   $('#input3').val('')
   $('#file1').val('')
}

 function openYTByMethod(){
    window.open("https://www.youtube.com/@javabitpro-editor/videos")
   }
 function openSiteByMethod(){
    window.open("https://www.google.com/search?q=javabitpro&rlz=1C1ONGR_enID1033ID1033&oq=java&gs_lcrp=EgZjaHJvbWUqDggBEEUYJxg7GIAEGIoFMgYIABBFGDwyDggBEEUYJxg7GIAEGIoFMggIAhBFGCcYOzIGCAMQRRg7MgYIBBBFGDwyBggFEEUYPDIGCAYQRRhBMgYIBxBFGDzSAQgxMTc1ajBqNKgCALACAA&sourceid=chrome&ie=UTF-8")
   }
   
</script>


16. Untuk 3 file css.html, login.html dan visit.html, script telah terisi otomatis di dalamnya.

17. Klik ikon Save.


18. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.


19. Pastikan jenisnya adalah Aplikasi web, hak aksesnya adalah Siapa saja/Anyone lalu pilih Terapkan/Deploy.


20. Klik atau salin URL yang sudah di Deploy.


SELESAI!!!






Previous Post Next Post

Promo