Web Apps CRUD: Latihan Data Online dengan Google Apps Script

Daftar Isi

Fitur Utama
Cara Kerja
Tutorial Membangun Sendiri
Cara Menggunakan
Tips Pengembangan
Di mana data disimpan?
Bisakah dipakai sebagai basis aplikasi lain?
Apakah gratis?
FAQ
Penutup

CRUD adalah singkatan dari Create, Read, Update, Delete, empat operasi dasar yang ada di hampir semua aplikasi data. Web Apps CRUD di JeniusKlik adalah web app gratis berbasis Google Apps Script untuk menambah, melihat, mengubah, dan menghapus data langsung dari browser.

Selain bisa dipakai langsung, polanya menjadi cikal bakal aplikasi data yang lebih besar seperti CRM, inventaris, atau sistem booking.

Fitur Utama

Tambah data — form singkat dengan validasi dasar.
Baca data — tabel dinamis yang bisa disortir dan dicari tanpa reload.
Update dan hapus — edit inline dan tombol hapus dengan konfirmasi.
Ringan — satu file HTML plus satu file Apps Script; cocok dipelajari sebagai referensi.

Cara Kerja

Google Spreadsheet bertindak sebagai basis data tempat semua data tersimpan dan mudah diekspor.
Google Apps Script menjalankan logika aplikasi di sisi server tanpa biaya hosting.
HtmlService merender tampilan aplikasi di browser, termasuk di HP.

Tutorial Membangun Sendiri

Karena polanya sama untuk hampir semua aplikasi berbasis Google Apps Script, berikut kerangka yang bisa Anda ikuti untuk Web Apps CRUD:

Buka Ekstensi > Apps Script dari sebuah Google Spreadsheet, lalu tempel kode pola berikut menjadi Code.gs:

/**
 * Pola dasar web app Google Apps Script (contoh: menyimpan satu data)
 */
function doGet(e) {
  return HtmlService.createTemplateFromFile('Index')
    .evaluate()
    .setTitle('Judul Aplikasi')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function include(nama) {
  return HtmlService.createHtmlOutputFromFile(nama).getContent();
}

// Contoh menyimpan data dari form browser ke Google Sheets
function simpanData(data) {
  var sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  if (!sh) sh = SpreadsheetApp.getActiveSpreadsheet().insertSheet('Data');
  var now = Utilities.formatDate(new Date(), 'Asia/Jakarta', 'yyyy-MM-dd HH:mm');
  sh.appendRow(['', data.a1, data.a2, now]);
  return 'ok';
}

Buat file HTML bernama Index untuk tampilannya, lalu panggil file JavaScript-nya lewat <?!= include('JavaScript') ?>.
Deploy lewat Deploy > New deployment > Web app: jalankan sebagai Me, akses Anyone, kemudian otorisasi izinnya.

Contoh kode penuh yang siap tempel ada di artikel CRM Sederhana dengan Google Apps Script pada blog ini.

Cara Menggunakan

Buka aplikasinya dan coba tambahkan satu baris data contoh.
Coba fitur edit dan hapus untuk melihat perilakunya.
Baca artikel tutorial terkait untuk membangun versi kustom Anda.

Tips Pengembangan

Tambah pencarian sisi server untuk dataset besar.
Catat pengguna terakhir setiap baris lewat Session.getActiveUser().
Gabungkan dengan grid dinamis agar membaca dan menulis jadi satu aplikasi.

FAQ

Di mana data disimpan?

Di Google Spreadsheet milik pemilik aplikasi, dengan akses yang diatur lewat Web App.

Bisakah dipakai sebagai basis aplikasi lain?

Ya. Pola CRUD ini adalah kerangka untuk CRM, inventaris, booking, dan aplikasi data lain di koleksi JeniusKlik. Lihat contohnya pada artikel CRM Sederhana.