Selamat datang kembali di Ngoprek Tech! Pada artikel sebelumnya, kita sudah membahas bagaimana Google Apps Script (GAS) dapat menyulap spreadsheet kosong menjadi struktur database yang rapi hanya dengan satu klik.
Namun, muncul sebuah pertanyaan penting: “Bagaimana cara memasukkan data ke dalam sheet tersebut tanpa harus membagikan akses (share link) Google Sheets kita ke publik?” Membagikan akses spreadsheet langsung ke banyak orang tentu sangat berisiko. Data bisa terhapus, teracak, atau bahkan disalin oleh pihak yang tidak bertanggung jawab. Solusi terbaik dan paling profesional adalah membuat sebuah Antarmuka Web (Web Interface) atau form HTML. Pengguna hanya berinteraksi dengan form tersebut, dan di belakang layar, data akan dikirim secara aman ke Google Sheets kita.
Kabar baiknya, Anda tidak perlu menyewa layanan hosting, membeli domain, atau melakukan konfigurasi server backend (Node.js, PHP, dll) untuk membuat ini. Semuanya akan kita bangun menggunakan Google Apps Script sebagai backend (sepenuhnya serverless) dan Bootstrap 5 agar tampilan form kita cantik serta responsif di layar HP.
Mari kita mulai ngoprek!
Memahami Arsitektur Web Apps di Google Apps Script
Sebelum masuk ke kode, penting untuk memahami bagaimana arsitektur aplikasi web ini bekerja. Dalam GAS, kita akan bekerja dengan dua jenis file utama:
- File Server-Side (
Code.gs): Ini adalah otak atau backend aplikasi kita. Ditulis menggunakan JavaScript standar GAS. Tugasnya adalah menerima permintaan dari pengguna (request), memproses logika, menyimpan data ke spreadsheet, dan mengirimkan kembali file HTML ke browser pengguna. - File Client-Side (
Index.html): Ini adalah wajah atau frontend aplikasi kita. Berisi struktur HTML, desain visual menggunakan CSS (kita akan pakai framework Bootstrap), dan JavaScript sisi klien untuk menangani interaksi pengguna (seperti klik tombol “Kirim”).
Jembatan ajaib yang menghubungkan file HTML di browser pengguna dengan Code.gs di server Google adalah sebuah API khusus bernama google.script.run. Ini memungkinkan form HTML kita mengirim data tanpa harus melakukan refresh halaman (mirip dengan teknologi AJAX).
Langkah 1: Siapkan “Database” Google Sheets
Langkah pertama adalah menyiapkan tempat penampungan datanya.
- Buka Google Sheets dan buat file baru. Beri nama misalnya “Database Pendaftaran Ngoprek”.
- Di baris pertama (Baris 1), buat header berikut dari kolom A sampai D:
- Waktu Daftar
- Nama Lengkap
- Asal Sekolah / Instansi
- Buka editor kode dengan mengklik menu Ekstensi > Apps Script.
Langkah 2: Menulis Logika Backend (Code.gs)
Di dalam editor Apps Script, Anda akan melihat file Code.gs. Hapus semua kode bawaan, lalu copy-paste kode berikut.
JavaScript
// Fungsi doGet() adalah fungsi wajib di GAS untuk menampilkan halaman web
function doGet() {
// Memanggil file 'Index.html' dan menampilkannya sebagai output web
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('Form Pendaftaran Ngoprek Tech') // Judul tab browser
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // Opsional: agar bisa di-embed (iframe) di website Anda
}
// Fungsi ini akan dipanggil dari HTML untuk memproses data form
function prosesDataForm(formObject) {
try {
// Membuka spreadsheet yang sedang aktif (tempat script ini terikat)
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
// Mengambil waktu saat ini (Timestamp)
var waktu = new Date();
// Menyiapkan array data yang akan dimasukkan ke baris baru
var dataBaru = [
waktu, // Kolom A
formObject.namaLengkap, // Kolom B (diambil dari atribut 'name' di HTML)
formObject.email, // Kolom C
formObject.instansi // Kolom D
];
// Menambahkan (append) data tersebut ke baris paling bawah yang kosong
sheet.appendRow(dataBaru);
// Mengembalikan pesan sukses ke frontend HTML
return "Berhasil! Data pendaftaran Anda telah tersimpan.";
} catch (error) {
// Mengembalikan pesan error jika terjadi kegagalan
return "Terjadi Kesalahan: " + error.message;
}
}
Penjelasan singkat: Fungsi doGet() bekerja ibarat pelayan restoran; ketika ada pengunjung yang mengakses URL aplikasi web Anda, pelayan ini akan menyajikan “piring” berupa halaman Index.html. Sedangkan prosesDataForm() adalah koki di dapur yang bertugas memasukkan “bahan” (data form) ke dalam “kulkas” (Google Sheets).
Langkah 3: Membuat Tampilan Frontend dengan Bootstrap (Index.html)
Sekarang, kita butuh membuat halaman webnya.
- Di sebelah kiri editor Apps Script (bagian “File”), klik ikon Tambah (+) lalu pilih HTML.
- Beri nama file tersebut Index (ingat, namanya harus persis dengan yang kita panggil di
doGet(), perhatikan huruf besarnya). - Hapus kode bawaannya, dan ganti dengan kode HTML di bawah ini:
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Sedikit modifikasi CSS (Custom Styling) */
body { background-color: #f8f9fa; }
.form-container {
max-width: 600px;
margin: 50px auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="form-container">
<h2 class="text-center mb-4 text-primary">Form Pendaftaran Event</h2>
<form id="myForm" onsubmit="handleFormSubmit(this); return false;">
<div class="mb-3">
<label class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" name="namaLengkap" placeholder="Masukkan nama lengkap Anda" required>
</div>
<div class="mb-3">
<label class="form-label">Alamat Email</label>
<input type="email" class="form-control" name="email" placeholder="[email protected]" required>
</div>
<div class="mb-3">
<label class="form-label">Asal Sekolah / Instansi</label>
<input type="text" class="form-control" name="instansi" placeholder="Misal: SMA Negeri 1 / PT Ngoprek Jaya" required>
</div>
<div id="notifikasi" class="alert d-none" role="alert"></div>
<button type="submit" id="btnSubmit" class="btn btn-primary w-100 mt-3">Kirim Pendaftaran</button>
</form>
</div>
</div>
<script>
function handleFormSubmit(formObject) {
// Mengubah tombol menjadi status 'loading'
const btn = document.getElementById('btnSubmit');
btn.disabled = true;
btn.innerHTML = 'Memproses Data...';
// Memanggil fungsi backend 'prosesDataForm'
// google.script.run adalah jembatan ajaib dari GAS
google.script.run
.withSuccessHandler(function(response) {
// Jika sukses, tampilkan pesan dan reset form
tampilkanPesan(response, 'success');
document.getElementById('myForm').reset();
btn.disabled = false;
btn.innerHTML = 'Kirim Pendaftaran';
})
.withFailureHandler(function(error) {
// Jika gagal/error
tampilkanPesan(error.message, 'danger');
btn.disabled = false;
btn.innerHTML = 'Coba Lagi';
})
.prosesDataForm(formObject); // Menyerahkan objek form ke backend
}
// Fungsi bantuan untuk menampilkan alert Bootstrap
function tampilkanPesan(pesan, tipe) {
const notifArea = document.getElementById('notifikasi');
notifArea.className = 'alert alert-' + tipe + ' d-block mt-3'; // Menambahkan class Bootstrap
notifArea.innerHTML = pesan;
// Menghilangkan pesan otomatis setelah 5 detik
setTimeout(function() {
notifArea.className = 'alert d-none';
}, 5000);
}
</script>
</body>
</html>
Perhatikan pada bagian <script> di bawah form. Kode google.script.run.prosesDataForm(formObject) adalah kunci utamanya. Sistem akan mengirimkan seluruh input dari pengguna ke server tanpa memuat ulang halaman (seamless experience).
Langkah 4: Publikasi (Deployment) Aplikasi Web Anda
Kode sudah siap, desain sudah cantik. Saatnya “meluncurkan” aplikasi web Anda ke internet agar bisa diakses orang lain.
- Di kanan atas editor Apps Script, klik tombol Terapkan (Deploy) > Deployment baru (New deployment).
- Di jendela pop-up, klik ikon roda gigi (⚙️) di sebelah tulisan “Pilih jenis” (Select type), lalu centang Aplikasi Web (Web app).
- Isi kolom konfigurasi sebagai berikut:
- Deskripsi: Versi 1.0 Form Pendaftaran (Bebas isi apa saja).
- Jalankan sebagai (Execute as): Pilih Saya / Me ([email protected]). Ini krusial! Ini artinya script akan memodifikasi Sheets menggunakan izin Anda, sehingga pengunjung form tidak perlu login ke akun Google.
- Siapa yang memiliki akses (Who has access): Pilih Siapa saja (Anyone).
- Klik tombol Terapkan (Deploy).
- Google mungkin akan meminta Anda untuk memberikan Otorisasi Akses. Klik Review Permissions, pilih akun Google Anda, klik Advanced / Lanjutan, lalu pilih Go to nama_project (unsafe), dan klik Allow / Izinkan.
- Setelah selesai, Anda akan mendapatkan sebuah URL yang berawalan
https://script.google.com/macros/s/.../exec.
Selamat! URL tersebut adalah link final aplikasi web Anda. Silakan copy dan buka di tab baru atau bagikan ke orang lain.
Mari Kita Uji Coba (Testing)
Cobalah buka URL Web App yang baru saja Anda dapatkan. Anda akan melihat sebuah form bersih, elegan, dan profesional berkat sentuhan CSS dari Bootstrap 5.
Isi nama, email, dan instansi, lalu klik Kirim Pendaftaran. Tombol akan berubah menjadi “Memproses Data…”, lalu muncul notifikasi berwarna hijau “Berhasil! Data pendaftaran Anda telah tersimpan.”
Kembali ke tab Google Sheets Anda, dan BOOM! Datanya sudah masuk secara otomatis beserta penanda waktu (timestamp) pada detik tersebut.
Praktik Terbaik (Best Practices) & Kesimpulan
Menggunakan Apps Script dan Bootstrap adalah cara hack terbaik bagi Developer, penggiat IT, maupun panitia acara untuk membuat sistem yang tangguh dalam hitungan menit tanpa mengeluarkan biaya sepeser pun untuk infrastruktur server.
Beberapa hal tambahan yang bisa Anda kembangkan (ngoprek lebih lanjut) dari dasar ini:
- Keamanan Ekstra: Tambahkan validasi JavaScript di HTML (misalnya pengecekan format nomor HP) sebelum data dikirim ke
google.script.run. - Upload File/Foto: GAS mendukung pembacaan
FileReaderdan pengiriman blob ke backend, sehingga Anda bisa mengizinkan pengguna mengupload bukti transfer atau pasfoto yang akan langsung tersimpan rapi ke Google Drive. - Integrasi ke Domain Sendiri: URL dari GAS memang sangat panjang dan jelek. Anda bisa menyematkan (embed) form ini menggunakan kode
<iframe src="URL_GAS_ANDA"></iframe>ke dalam website WordPress, Blogspot, atau halaman HTML statis dihendro-wibiksono.web.idagar terlihat lebih menyatu dengan brand Anda.
Sistem pendaftaran serverless Anda kini sudah siap tempur! Pada artikel berikutnya, kita akan membahas cara menambahkan fitur Upload File ke Google Drive via Web Apps Form. Tetap pantau blog Ngoprek Tech untuk tutorial IT, tools, dan tips ngoprek tanpa batas lainnya. Salam Ngoprek!
