Membuat Web App dengan Google Sheets sebagai CMS (Content Management System)

Spreadsheet sebagai CMS

CMS (Content Management System) biasanya membutuhkan database MySQL dan server. Tapi dengan Google Spreadsheet + Apps Script, Anda bisa membuat CMS yang fungsional tanpa biaya server. Anda cukup edit spreadsheet untuk mengubah konten website secara real-time. Cocok untuk: website profil perusahaan, portofolio, katalog produk, dan halaman berita sederhana.

Struktur Spreadsheet CMS

Buat beberapa sheet dalam satu spreadsheet untuk berbagai jenis konten:

Settings — Konfigurasi umum website (judul, deskripsi, logo URL)
Pages — Halaman statis (slug, judul, konten, status publish)
Products — Produk/jasa (nama, harga, deskripsi, gambar URL, kategori)
Testimonials — Testimoni pelanggan (nama, teks, rating)
Gallery — Galeri gambar (URL gambar, caption, kategori)

Kode Apps Script untuk CMS

function doGet(e) {
  var type = e.parameter.type || "pages";
  var slug = e.parameter.slug;
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(
    type.charAt(0).toUpperCase() + type.slice(1)
  );
  
  if (!sheet) {
    return ContentService.createTextOutput(JSON.stringify({
      error: "Tipe konten tidak ditemukan"
    })).setMimeType(ContentService.MimeType.JSON);
  }
  
  var data = sheet.getDataRange().getValues();
  var headers = data[0];
  var result = [];
  
  for (var i = 1; i < data.length; i++) {
    var row = {};
    for (var j = 0; j < headers.length; j++) {
      row[headers[j].toLowerCase()] = data[i][j];
    }
    
    // Filter berdasarkan slug jika ada
    if (slug && row.slug === slug) {
      return ContentService.createTextOutput(JSON.stringify(row))
        .setMimeType(ContentService.MimeType.JSON);
    }
    
    // Hanya tampilkan yang publish
    if (row.status === "publish" || !row.status) {
      result.push(row);
    }
  }
  
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

Frontend untuk CMS

<script>
var CMS_API = "URL_APP_SCRIPT";

// Load semua produk
function loadProducts() {
  fetch(CMS_API + "?type=products")
    .then(r => r.json())
    .then(products => {
      var html = products.map(p => `
        <div class="product-card">
          <img src="${p.gambar}" alt="${p.nama}">
          <h3>${p.nama}</h3>
          <p class="price">Rp ${Number(p.harga).toLocaleString()}</p>
          <p>${p.deskripsi}</p>
        </div>
      `).join('');
      document.getElementById('products').innerHTML = html;
    });
}

// Load halaman spesifik
function loadPage(slug) {
  fetch(CMS_API + "?type=pages&slug=" + slug)
    .then(r => r.json())
    .then(page => {
      document.title = page.judul;
      document.getElementById('content').innerHTML = page.konten;
    });
}
</script>

Kesimpulan

CMS dengan Google Spreadsheet adalah solusi ideal untuk: website sederhana, prototipe cepat, intranet perusahaan, dan proyek dengan budget minim. Kelebihan utamanya: klien bisa mengupdate konten sendiri tanpa perlu knowledge teknis — cukup edit spreadsheet seperti biasa menggunakan Google Sheets.

Tutorial CMS Google Spreadsheet & Apps Script — Web App Builder Collection