Membuat CRUD Web App dengan Google Spreadsheet — Create, Read, Update, Delete Data

Apa itu CRUD?

CRUD adalah singkatan dari Create (Membuat), Read (Membaca), Update (Memperbarui), dan Delete (Menghapus). Ini adalah empat operasi dasar dalam pengelolaan data. Hampir semua aplikasi web modern menggunakan konsep CRUD — mulai dari aplikasi catatan, toko online, hingga sistem manajemen konten.

Persiapan Spreadsheet

Buat Google Spreadsheet baru dengan kolom: ID, Nama, Email, Pesan, Tanggal. Isi baris pertama sebagai header. Baris kedua dan seterusnya adalah data. Spreadsheet ini akan menjadi database CRUD kita.

Kode Apps Script Lengkap

Berikut adalah kode Apps Script lengkap untuk operasi CRUD. Salin kode ini ke editor Apps Script:

// ============ KONFIGURASI ============
var SHEET_NAME = "Sheet1";

// ============ MEMBACA DATA (READ) ============
function doGet(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  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]] = data[i][j];
    }
    result.push(row);
  }
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

// ============ MENAMBAH DATA (CREATE) ============
function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  var data = JSON.parse(e.postData.contents);
  var lastRow = sheet.getLastRow();
  
  // Generate ID otomatis
  var newId = lastRow;
  var now = new Date();
  
  sheet.appendRow([
    newId,
    data.nama,
    data.email,
    data.pesan,
    now.toLocaleDateString('id-ID')
  ]);
  
  return ContentService.createTextOutput(JSON.stringify({
    success: true,
    message: "Data berhasil ditambahkan",
    id: newId
  })).setMimeType(ContentService.MimeType.JSON);
}

// ============ MEMPERBARUI DATA (UPDATE) ============
function doPut(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  var data = JSON.parse(e.postData.contents);
  var rowId = data.id;
  var rowIndex = rowId + 1; // +1 karena header di baris 1
  
  sheet.getRange(rowIndex, 2).setValue(data.nama);
  sheet.getRange(rowIndex, 3).setValue(data.email);
  sheet.getRange(rowIndex, 4).setValue(data.pesan);
  
  return ContentService.createTextOutput(JSON.stringify({
    success: true,
    message: "Data berhasil diperbarui"
  })).setMimeType(ContentService.MimeType.JSON);
}

// ============ MENGHAPUS DATA (DELETE) ============
function doDelete(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  var id = parseInt(e.parameter.id);
  sheet.deleteRow(id + 1);
  
  return ContentService.createTextOutput(JSON.stringify({
    success: true,
    message: "Data berhasil dihapus"
  })).setMimeType(ContentService.MimeType.JSON);
}

Membuat Antarmuka Web

Berikut adalah contoh halaman HTML yang terintegrasi dengan semua fungsi CRUD:

<!DOCTYPE html>
<html>
<head>
  <title>CRUD dengan Spreadsheet</title>
  <style>
    body{font-family:sans-serif;max-width:800px;margin:0 auto;padding:20px}
    table{width:100%;border-collapse:collapse;margin:15px 0}
    th,td{border:1px solid #ddd;padding:10px;text-align:left}
    th{background:#059669;color:white}
    input,textarea{width:100%;padding:8px;margin:4px 0;border:1px solid #ddd;border-radius:6px}
    button{padding:10px 20px;background:#059669;color:white;border:none;border-radius:8px;cursor:pointer}
    .form{background:#f8fafc;padding:20px;border-radius:12px;margin:15px 0}
  </style>
</head>
<body>
  <h1>CRUD dengan Google Spreadsheet</h1>
  <div class="form">
    <h2>Tambah Data Baru</h2>
    <input id="nama" placeholder="Nama">
    <input id="email" placeholder="Email">
    <textarea id="pesan" placeholder="Pesan"></textarea>
    <button onclick="createData()">Simpan</button>
  </div>
  <div id="dataTable"></div>
  <script>
    var API_URL = "URL_WEB_APP_ANDA";
    function loadData() {
      fetch(API_URL + "?action=read")
        .then(r => r.json())
        .then(data => renderTable(data));
    }
    function createData() {
      fetch(API_URL, {
        method: 'POST',
        body: JSON.stringify({
          nama: document.getElementById('nama').value,
          email: document.getElementById('email').value,
          pesan: document.getElementById('pesan').value
        })
      }).then(r => r.json()).then(res => {
        alert(res.message);
        loadData();
      });
    }
    function updateData(id) {
      var newNama = prompt("Nama baru:");
      if (!newNama) return;
      fetch(API_URL + "?action=update", {
        method: 'PUT',
        body: JSON.stringify({id: id, nama: newNama})
      }).then(r => r.json()).then(res => {
        alert(res.message);
        loadData();
      });
    }
    function deleteData(id) {
      if (!confirm("Hapus data?")) return;
      fetch(API_URL + "?action=delete&id=" + id, {method: 'DELETE'})
        .then(r => r.json()).then(res => {
          alert(res.message);
          loadData();
        });
    }
    function renderTable(data) {
      var html = "<table><tr><th>ID</th><th>Nama</th><th>Email</th><th>Pesan</th><th>Tanggal</th><th>Aksi</th></tr>";
      data.forEach(row => {
        html += "<tr><td>" + row.ID + "</td><td>" + row.Nama + "</td><td>" + row.Email + "</td><td>" + row.Pesan + "</td><td>" + row.Tanggal + "</td><td><button onclick='updateData(" + row.ID + ")'>Edit</button> <button onclick='deleteData(" + row.ID + ")'>Hapus</button></td></tr>";
      });
      html += "</table>";
      document.getElementById('dataTable').innerHTML = html;
    }
    loadData();
  </script>
</body>
</html>

Deploy dengan Parameter Aksi

Untuk membedakan operasi CRUD, kita perlu mengubah kode Apps Script agar bisa menerima parameter aksi:

function doGet(e) {
  var action = e.parameter.action;
  if (action === "read") return handleRead();
  return ContentService.createTextOutput("Aksi tidak dikenal");
}

function doPost(e) {
  return handleCreate(e);
}

Kesimpulan

Dengan Google Apps Script, Anda bisa membuat aplikasi CRUD lengkap hanya dalam beberapa jam. Spreadsheet berfungsi sebagai database yang mudah divisualisasikan dan diedit. Cocok untuk aplikasi internal tim, prototipe MVP, atau tools sederhana untuk bisnis kecil. Kembangkan lebih lanjut dengan menambahkan filter data, pencarian, pagination, dan fitur export Excel.

⚡ Tutorial CRUD Google Spreadsheet & Apps Script — Web App Builder Collection