Mencari di Gambar Google Drive Menggunakan Web Apps Script Sesuai Keyword

1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet yang telah di copy terdapat sheet Data yang berisi 2 kolom yaitu :

Kolom Nama : Beri nama/keyword untuk mencari gambar.
Kolom Url Gambar : Salin Url Gambar pada Google Drive (gambar wajib publish).
Url Gambar wajib

https://drive.google.com/uc?export=download&id=[ID] Ganti ID dengan ID gambar anda.

3. Buat lembar kerja Apps Script, dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.

4. Terdapat 2 file default yaitu :

Code.gs
Search.html

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

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

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

//Youtube : Javabitpro
//www.javabitpro.com

function doGet() {
  return HtmlService.createTemplateFromFile('Search').evaluate();
}

function searchImage(searchTerm) {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var results = [];
  for (var i = 1; i < data.length; i++) {
    var name = data[i][0].toLowerCase();
    var url = data[i][1];
    if (name.indexOf(searchTerm.toLowerCase()) !== -1) {
      results.push(url);
    }
  }

  return results;
}

6. Copy dan pastekan script di bawah ini ke Seacrh.html.

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

<!DOCTYPE html>
<html>
  <head>

    <base target="_top">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      .header {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .form-container {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        
      }
      .form-container input[type=text] {
        padding: 10px;
        font-size: 16px;
        border-radius: 5px;
        margin-right: 10px;
      }
      .form-container input[type=button] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      .form-container input[type=button]:hover {
        background-color: #3e8e41;
      }
      .image-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }
      .image-container img {
        max-width: 300px;
        margin: 20px;
      }
      .image-container .button-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }
      .image-container .button-container button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      .image-container .button-container button:hover {
        background-color: #3e8e41;
      }
      #loading-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}

#loading-indicator {
  display: block;
  margin: 20px auto;
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

    </style>
  </head>
  <body>
    <div class="header">Cari Gambar di Google Drive</div>
    <div class="form-container">
      <input type="text" id="search" name="search" placeholder="Masukkan kata kunci...">
      <input type="button" value="Cari" onclick="searchImage()">
    </div>
    <div class="image-container" id="results"></div>
        <div class="image-container" id="results"></div>
    <div class="image-container" id="results"></div>
<div id="loading-container">
  <div id="loading-indicator"></div>
</div>

    <script>
      function searchImage() {
        var searchTerm = document.getElementById('search').value;
        document.getElementById('loading-container').style.display = 'block';

        google.script.run.withSuccessHandler(displayImages).searchImage(searchTerm);
        
     document.getElementById('search').value = '';
       
      }
      

      function displayImages(images) {
        var container = document.getElementById('results');
        container.innerHTML = '';
        document.getElementById('loading-container').style.display = 'none';
        if (images.length === 0) {
          container.innerHTML = 'Tidak ditemukan gambar yang sesuai dengan kata kunci yang dimasukkan.';
          return;
        }
        for (var i = 0; i < images.length; i++) {
          var img = document.createElement('img');
          img.setAttribute('src', images[i]);
          container.appendChild(img);
        }

      }


    </script>
    
  </body>
</html>
<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.02.25.23 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>