#JP24 Memberi User dan Pass Semua File Google Drive

byJavabitpro

Memberi User dan Pass Semua File Google Drive


*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

1. Buatlah Spreadsheet

(atau bisa copy di sini)


2. Buatlah lembar kerja Apps Script. Klik "Ekstensi" - pilih "Apps Script".


3. Buatlah 2 file yaitu "Code.gs" dan "index.html".


4. Copy dan pastekan script di bawah ini ke "Code.gs".

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

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


/* PROCESS FORM */
function processForm(formObject){ 
  var concat = formObject.searchtext.toString().toLowerCase()+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 range = SpreadsheetApp.getActive().getSheetByName('Data').getDataRange();
  var data = range.getValues();
  var ar = [];
  
  data.forEach(function(f) {
    if (~[f[0].toString().toLowerCase()+f[1]].indexOf(searchtext)) {
     ar.push([ f[2], f[3],f[4],f[5]]);
    }
  });
                                           
  return ar;
};



5. Copy dan pastekan script di bawah ini ke "index.html".

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

<!DOCTYPE html>
<html>
<center>
<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap" rel="stylesheet">
  <style>
    body {font-family: 'Prompt', sans-serif;}
    a {color: #000;text-decoration: none;}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  margin: 0;
  padding: 0;
  background: linear-gradient(120deg,#2980b9, #8e44ad);
  height: 100vh;
  overflow: hidden;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: white;
  border-radius: 10px;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
}
.center h1{
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid silver;
}
.center form{
  padding: 0 40px;
  box-sizing: border-box;
}
form .txt_field{
  position: relative;
  border-bottom: 2px solid #adadad;
  margin: 30px 0;
}
.txt_field input{
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}
.txt_field label{
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  transition: .5s;
}
.txt_field span::before{
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #2691d9;
  transition: .5s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
  top: -5px;
  color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
  width: 100%;
}
.pass{
  margin: -5px 0 20px 5px;
  color: #a6a6a6;
  cursor: pointer;
}
.pass:hover{
  text-decoration: underline;
}
input[type="submit"]{
  width: 100%;
  height: 50px;
  border: 1px solid;
  background: #2691d9;
  border-radius: 25px;
  font-size: 18px;
  color: #e9f4fb;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
input[type="submit"]:hover{
  border-color: #2691d9;
  transition: .5s;
}
.signup_link{
  margin: 30px 0;
  text-align: center;
  font-size: 16px;
  color: #666666;
}
.signup_link a{
  color: #2691d9;
  text-decoration: none;
}
.signup_link a:hover{
  text-decoration: underline;
}


  </style>

</head>

<body>
  <section id="page1">
   <div class="center">
      <h1>Login</h1>
      <form id="search-form" onsubmit="handleFormSubmit(this)">
        <div class="txt_field">
          <input type="text" id="searchtext" name="searchtext" required>
          <span></span>
          <label>Username</label>
        </div>
        <div class="txt_field">
          <input type="password" id="searchtext2" name="searchtext2" required>
          <span></span>
          <label>Password</label>
        </div>
        <div class="pass"></div>
      <div class="mt-3 text-center">
              <button  type="submit" class="btn bg-primary mb-2  text-white btnSubmit"><i class="fa-solid fa-arrow-right-to-bracket"></i> Login</button>
              <button class="btn bg-primary  text-white  btnLoading d-none" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button></div>
              <div class="mt-2 text-center">
                <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>
              </div>
        <div class="signup_link">
          
        </div>
      </form>
    </div>
  </section>

  <section id="table" style="display:none">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand"><i class="fa-solid fa-font-awesome"></i> Javabitpro</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ms-auto">
            <button onclick="goback()" class="btn bg-warning"><i class="fa-solid fa-arrow-right-from-bracket"></i> Logout</button>
          </div>
        </div>
      </div>
    </nav>
    <table id="search-results" class="mt-2" style="width:100%"></table>
  </section>

  <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
  <script>
        function goback(){
    Swal.fire({
      position:'top',
      title: 'Apakah Yakin Akan Keluar?',
      text: "Apakah Anda Benar-Benar Ingin Keluar?!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#0d6efd',
      cancelButtonColor: '#d33',
      cancelButtonText: 'Tidak',
      confirmButtonText: 'Yakin'
    }).then((result) => {
      if (result.isConfirmed) {
        document.getElementById("page1").style.display= "block"; 
        document.getElementById("table").style.display= "none"; 
      }
    })
    }

    //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 == ""){

              Swal.fire({
                position: 'top',
                icon: 'warning',
                title: 'Enter your User ID and password.',
                showConfirmButton: false,
                timer: 1500
              }) 
              document.getElementById("table").style.display= "none"; 

           }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");
             document.querySelector('.btnSubmit').classList.toggle('d-none');
             document.querySelector('.btnLoading').classList.toggle('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");
             document.querySelector('.btnSubmit').classList.toggle('d-none');
             document.querySelector('.btnLoading').classList.toggle('d-none');   

            if(dataArray && dataArray !== undefined && dataArray.length != 0){
             document.getElementById("page1").style.display= "none"; 
             document.getElementById("table").style.display= "block"; 
                Swal.fire({
                position: 'top',
                icon: 'success',
                title: 'Selamat Datang '+'<br><h3 style="color:blue" class="mt-3">'+dataArray[0][0]+'</h3>',
                showConfirmButton: false,
                timer: 1500
              }) 

              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
                           "<thead style='white-space: nowrap'>"+"</thead>"+


                           "<tr>"+
                           "<td colspan='2' style='text-align:center;color:white'>Selamat Datang <b style='color:white'> "+dataArray[0][0]+"</b></td>"+
                         

                           "</tr>"+
                           "<tr>"+
                           "<td colspan='2'><iframe width='100%'  align='middle'  height='900' frameborder='0' scrolling='auto' src =" + dataArray[0][1]+ "></iframe></td>"+
                            "</tr>"+
                            
                          "</table>";
           
              var div = document.getElementById('search-results');
              div.innerHTML = result;
             
            }else{
              var div = document.getElementById('search-results');
              div.innerHTML = " ";
               document.getElementById("table").style.display= "none"; 
               document.getElementById("page1").style.display= "block"; 

                Swal.fire({
                position: 'top',
                icon: 'error',
                title: 'Data not found',
                showConfirmButton: false,
                timer: 1500
              }) 
            }
          }
  </script>
  <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
  </script>

</body>
</center>
</html>
<!-- Script by www.javabitpro.com ------------------------------------------------ -->
<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>



6. Klik ikon "Save".


7. Klik tombol "Terapkan / Deploy" lalu pilih "Deployment baru / New Deployment".


8. Pastikan jenisnya adalah Aplikasi Web dan hak akses adalah Siapa saja / Anyone lalu Terapkan.


9. Klik Url atau salin Url untuk menjalankan Web Apps Script.


10. Isikan link dari file yang sudah dishare atau di review.
Untuk menampikan Gambar dari Google Drive silahkan copy dan pastekan kode di bawah ini dan isikan ID dengan ID Gambar.

https://docs.google.com/uc?id=

SELESAI !
Tags:
Previous Post Next Post

Promo