Memasang Script Kamus Online di Blogger

Membuat kamus online menggunakan Google Sheets sebagai database dan Blogger (Blogspot) sebagai antarmuka web sangat mungkin dilakukan dan gratis. Anda dapat menggunakan Google Apps Script untuk menghubungkan keduanya.Berikut adalah panduan langkah demi langkah yang ringkas untuk membangunnya:

Langkah 1:

• Siapkan Database di Google Sheets
• Buka Google Sheets dan buat dokumen baru.
• Buat tiga kolom di baris pertama:
  A1: Kata
  B1: Definisi
  C1: Kategori (Opsional)
• Isi data kata dan artinya di bawah kolom tersebut (misalnya: A2 = Bahasa, B2 = Sistem komunikasi manusia).

Langkah 2:

• Buat Skrip Penghubung dengan Google Apps Script
• Di menu bagian atas Google Sheets, klik Ekstensi > Apps Script.
• Hapus kode yang ada, lalu tempelkan kode berikut untuk membuat API sederhana:

javascriptfunction doGet(e) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  var data = sheet.getDataRange().getValues();

  var kamusData = [];

  for (var i = 1; i < data.length; i++) {

    kamusData.push({

      "kata": data[i][0],

      "definisi": data[i][1],

      "kategori": data[i][2]

    });

  }

  var result = JSON.stringify(kamusData);

  return ContentService.createTextOutput(result)

    .setMimeType(ContentService.MimeType.JSON);

}

• Klik ikon Simpan (ikon disket), lalu klik Terapkan (Deploy) > Deployment Baru.
• Pilih jenis Akses Web (Web App). Pada bagian Yang memiliki akses, pilih Siapa saja.
• Klik Deploy dan salin URL Web App yang muncul (ini akan menjadi penghubung data Anda)

Langkah 3: Buat Tampilan Kamus di Blogger

• Buka Blogger dan buat blog baru.
• Buat Halaman Baru (Pages) dan beri judul "Kamus Online".
• Pada editor tulisan, ubah mode dari Tampilan Menulis ke Tampilan HTML.
• Tempelkan kode HTML dan JavaScript berikut di sana:

html<input type="text" id="cariKata" placeholder="Cari kata di sini..." onkeyup="cariKamus()" style="width: 100%; padding: 10px; font-size: 16px;">

<div id="hasilKamus" style="margin-top: 20px;"></div>

<script>

  const urlGS = "MASUKKAN_URL_WEB_APP_ANDA_DISINI";

  async function cariKamus() {

    let input = document.getElementById('cariKata').value.toLowerCase();

    let response = await fetch(urlGS);

    let data = await response.json();

    let output = '';

    if (input.trim() !== '') {

      let hasil = data.filter(item => item.kata.toLowerCase().includes(input));

      

      if (hasil.length > 0) {

        hasil.forEach(item => {

          output += `<div style="border-bottom: 1px solid #ccc; padding: 10px 0;">

                       <h3>${item.kata}</h3>

                       <p>${item.definisi}</p>

                     </div>`;

        });

      } else {

        output = '<p>Kata tidak ditemukan.</p>';

      }

    }

    document.getElementById('hasilKamus').innerHTML = output;

  }

</script>

• Ganti teks MASUKKAN_URL_WEB_APP_ANDA_DISINI dengan URL Apps Script yang Anda dapatkan di Langkah 2.
• Publikasikan halaman tersebut.

Sekarang, siapa saja yang mengunjungi halaman tersebut di blog Anda bisa mengetikkan kata di kolom pencarian, dan sistem akan otomatis mengambil definisi dari Google Sheets secara real-time.

Islamic Program
Kamis, 20 Juni 2024

Artikel Terkait