Panduan Lengkap: Cara Membuat Konten Dinamis dengan Tiga Langkah Sederhana

Apakah Anda ingin website statis Anda mampu menampilkan data yang berubah setiap hari, seperti mengumumkan hasil survei terbaru atau menarik daftar entri langsung dari formulir? Ini bisa dilakukan tanpa server yang rumit!

Tutorial ini akan memandu Anda membangun sebuah sistem yang menggunakan tiga komponen utama—Laman HTML, Pusat Data Sederhana, dan Jembatan Skrip Otomatis—untuk menghasilkan konten yang hidup dan terbarui secara otomatis.

---

Langkah 1: Menyiapkan Pusat Data Sederhana (Spreadsheet Online)

Pusat data kita adalah spreadsheet online yang mudah diakses. Ini akan menjadi tempat semua informasi disimpan dan ditarik.

1. Buat Spreadsheet Baru: Buat dokumen spreadsheet online baru (misalnya, di Google Drive) dan beri nama yang mudah dikenali (Contoh: "Data Website Dinamis").
2. Tentukan Kolom: Di baris pertama (header), buat kolom-kolom yang Anda butuhkan. Misalnya, untuk menampilkan daftar, Anda bisa menggunakan kolom:
   • NamaEntri
   • Nilai
   • Status (Untuk menandai apakah data sudah siap tayang)
3. Isi Data Awal: Isi beberapa baris data contoh agar kita bisa mengujinya di langkah berikutnya.

---

Langkah 2: Membangun Jembatan Skrip Otomatis (Google Apps Script)

Jembatan Skrip adalah jantung dari sistem ini. Tugasnya adalah menerima permintaan dari laman web dan mengambil, menyaring, atau memproses data dari spreadsheet sebelum mengirimkannya kembali ke website.

1. Akses Skrip: Di spreadsheet Anda (Langkah 1), buka menu Ekstensi > Apps Script. Editor kode akan terbuka.
2. Tulis Fungsi Pengambil Data (doGet): Fungsi ini akan dijalankan setiap kali laman web meminta data. Di sini, kita akan memfilter data dan mengubahnya menjadi format yang dipahami oleh website (JSON).

Contoh kode sederhana Jembatan Skrip (Fungsi doGet):

function doGet(e) {
  // Hubungkan ke spreadsheet aktif dan sheet pertama
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheets()[0];
  
  // Ambil semua data
  const dataMentah = sheet.getDataRange().getValues();
  let dataYangSiapTayang = [];
  
  // Lakukan penyaringan dan pemrosesan data (lewatkan baris header)
  for (let i = 1; i < dataMentah.length; i++) {
    const baris = dataMentah[i];
    
    // Contoh penyaringan: hanya ambil data yang statusnya 'publish'
    if (baris[2].toString().toLowerCase() === 'publish') {
      dataYangSiapTayang.push({
        nama: baris[0],
        nilai: baris[1]
      });
    }
  }
  
  // Kirim data kembali ke website dalam format JSON
  const output = ContentService.createTextOutput(JSON.stringify(dataYangSiapTayang));
  output.setMimeType(ContentService.MimeType.JSON);
  return output;
}

3. Deploy Jembatan Skrip: Ini adalah langkah krusial untuk mendapatkan URL unik yang akan digunakan di laman web Anda.
   • Klik Deploy > New deployment.
   • Pilih jenis deployment: Web app.
   • Pilih Execute as: Anda (atau User accessing the web app).
   • Pilih Who has access: Anyone.
   • Klik Deploy dan SALIN URL Web App yang muncul. URL ini adalah alamat Jembatan Skrip Anda.

---

Langkah 3: Menampilkan Data di Laman Web (HTML dan JavaScript)

Setelah Jembatan Skrip Anda aktif, saatnya memanggil data tersebut dari laman web Anda.

1. Buat Laman Statis: Di platform blog Anda, buat laman statis baru dan buka mode HTML.
2. Siapkan Wadah HTML: Buat elemen HTML sebagai wadah tempat data akan ditampilkan (misalnya, sebuah div).

<div id="wadah-data">
  <p>Sedang memuat data...</p>
</div>

3. Panggil Data dengan JavaScript: Gunakan kode JavaScript untuk memanggil URL Jembatan Skrip yang sudah Anda salin di Langkah 2.

<script>
// Ganti dengan URL Web App Anda dari Langkah 2
const URL_JEMBATAN = 'PASTIKAN_URL_JEMBATAN_ANDA_DI_SINI'; 

fetch(URL_JEMBATAN)
  .then(response => response.json())
  .then(data => {
    const wadah = document.getElementById('wadah-data');
    let htmlTabel = '<ul>';
    
    // Iterasi melalui data yang diterima
    data.forEach(item => {
      htmlTabel += `<li>Nama: ${item.nama}, Nilai: ${item.nilai}</li>`;
    });
    
    htmlTabel += '</ul>';
    wadah.innerHTML = htmlTabel;
  })
  .catch(error => {
    document.getElementById('wadah-data').innerHTML = 'Gagal memuat data.';
    console.error('Ada kesalahan:', error);
  });
</script>

---

Selamat!

Laman statis Anda kini sudah mampu menampilkan konten dinamis. Kapan pun Anda mengedit atau menambahkan data baru di Pusat Data Sederhana (spreadsheet), cukup pastikan Jembatan Skrip sudah memprosesnya, dan data baru akan langsung muncul di website Anda tanpa perlu mengedit kode HTML sama sekali.

Oleh Opan
Dipostkan December 20, 2024
Seorang guru matematika yang hobi ngeblog dan menulis. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang saya miliki.