Selamat datang kembali di Ngoprek Tech, tempat kita membedah teknologi dan melakukan otomatisasi tanpa batas!
Jika Anda mengikuti seri tutorial Google Apps Script (GAS) kita sebelumnya, Anda sudah berhasil membangun arsitektur backend serverless dan menghubungkan form HTML dasar ke Google Sheets. Fungsionalitasnya mungkin sudah berjalan 100%, tetapi mari kita jujur: form HTML bawaan (standar) terlihat sangat kaku, kuno, dan tidak menarik.
Bayangkan jika Anda sedang mende-velop sebuah sistem portal pendaftaran resmi, seperti pendaftaran event berskala besar atau sistem Penerimaan Peserta Didik Baru (PPDB) untuk instansi pendidikan. Tampilan visual (User Interface/UI) yang berantakan tidak hanya menurunkan kredibilitas, tetapi juga membuat pengguna kebingungan saat mengisi data di layar ponsel (tidak responsif).
Di sinilah Bootstrap 5 hadir sebagai pahlawan penyelamat. Pada artikel kali ini, kita akan belajar cara mengintegrasikan framework CSS populer ini ke dalam Google Apps Script untuk menyulap form biasa menjadi aplikasi web yang cantik, profesional, dan responsif di segala perangkat.
Mengapa Harus Bootstrap?
Bagi Anda yang mungkin baru terjun ke dunia frontend development, Bootstrap adalah kerangka kerja (framework) HTML, CSS, dan JavaScript gratis yang bersifat sumber terbuka (open-source).
Beberapa alasan mengapa Bootstrap adalah pasangan yang sempurna untuk Google Apps Script:
- Grid System yang Kuat: Memastikan form Anda tampil rapi baik di layar monitor PC yang lebar maupun di layar smartphone yang sempit (Responsive Web Design).
- Komponen Siap Pakai: Anda tidak perlu menulis CSS dari nol untuk membuat tombol yang elegan, card, sistem peringatan (alert), atau animasi loading. Tinggal panggil class namanya.
- Penerapan via CDN: Karena GAS membatasi kita untuk meng-unggah file aset statis (seperti
.cssatau.jsterpisah), menggunakan Bootstrap via Content Delivery Network (CDN) adalah solusi yang paling ringan, cepat, dan rapi.
Persiapan: Skenario Studi Kasus
Sebagai praktik langsung, kita akan membangun antarmuka web untuk sebuah formulir pendaftaran. Untuk membuatnya serealistis mungkin, mari kita rancang form untuk Sistem Registrasi Siswa Baru (PPDB). Form ini akan membutuhkan input data yang bervariasi, sehingga kita bisa mengeksplorasi berbagai jenis elemen form dari Bootstrap.
Field yang akan kita buat:
- Nomor Induk Siswa Nasional (NISN)
- Nama Lengkap
- Asal Sekolah
- Pilihan Jurusan (Dropdown)
Langkah 1: Menyiapkan File Backend (Code.gs)
Buka kembali project Google Apps Script Anda (melalui menu Ekstensi > Apps Script di Google Sheets). Pada file Code.gs, kita hanya membutuhkan fungsi dasar untuk memanggil file HTML kita. Copy-paste kode berikut:
JavaScript
function doGet() {
// Memanggil file 'Index.html' dan mengatur pengaturannya
var htmlOutput = HtmlService.createHtmlOutputFromFile('Index');
htmlOutput.setTitle('Portal Pendaftaran Siswa Baru - Ngoprek Tech');
htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1'); // Wajib untuk responsivitas di HP
htmlOutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return htmlOutput;
}
// Simulasi fungsi penerima data (Backend)
function prosesPendaftaran(dataForm) {
try {
// Di sini logika untuk menyimpan ke Google Sheets diletakkan
// (Seperti yang sudah kita pelajari di artikel sebelumnya)
// Memberikan jeda 2 detik untuk mensimulasikan proses loading
Utilities.sleep(2000);
return "Pendaftaran atas nama " + dataForm.nama + " berhasil disimpan ke sistem.";
} catch (e) {
return "Error: " + e.message;
}
}
Penting: Perhatikan baris htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');. Ini adalah kunci utama agar tampilan Bootstrap bisa menyesuaikan diri saat dibuka di smartphone. Tanpa baris ini, tampilan web akan terlihat sangat kecil seperti versi desktop yang di-zoom out.
Langkah 2: Mengintegrasikan Bootstrap via CDN (Index.html)
Buat file HTML baru bernama Index.html (atau gunakan yang sudah ada). Kita akan menanamkan tautan CDN Bootstrap tepat di dalam tag <head>.
Berikut adalah struktur lengkap kodenya:
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<!-- Link CDN CSS Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Link Icon Bootstrap (Opsional, untuk mempercantik tampilan) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
/* Kustomisasi tipis-tipis agar tidak kaku */
body {
background-color: #e9ecef;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card-registrasi {
margin-top: 5vh;
margin-bottom: 5vh;
border: none;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.header-card {
background: linear-gradient(135deg, #0d6efd, #0dcaf0);
color: white;
border-radius: 15px 15px 0 0;
padding: 20px;
}
</style>
</head>
<body>
<!-- Container utama dari Bootstrap -->
<div class="container">
<!-- Menggunakan sistem Grid untuk menengahkan form -->
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<!-- Komponen Card Bootstrap -->
<div class="card card-registrasi">
<div class="header-card text-center">
<h3 class="mb-0"><i class="bi bi-mortarboard-fill me-2"></i>Portal PPDB Online</h3>
<p class="mb-0 mt-1 opacity-75">Tahun Ajaran 2026/2027</p>
</div>
<div class="card-body p-4">
<!-- Form Start -->
<form id="formPendaftaran" onsubmit="submitForm(event)">
<!-- Input: NISN -->
<div class="mb-3">
<label for="nisn" class="form-label fw-bold">NISN</label>
<input type="number" class="form-control" id="nisn" name="nisn" placeholder="Masukkan 10 digit NISN" required>
</div>
<!-- Input: Nama Lengkap -->
<div class="mb-3">
<label for="nama" class="form-label fw-bold">Nama Lengkap</label>
<input type="text" class="form-control" id="nama" name="nama" placeholder="Sesuai Ijazah terakhir" required>
</div>
<!-- Input: Asal Sekolah -->
<div class="mb-3">
<label for="sekolah" class="form-label fw-bold">Asal Sekolah (SMP/MTs)</label>
<input type="text" class="form-control" id="sekolah" name="sekolah" required>
</div>
<!-- Input: Dropdown Pilihan Jurusan -->
<div class="mb-4">
<label for="jurusan" class="form-label fw-bold">Pilihan Jurusan</label>
<select class="form-select" id="jurusan" name="jurusan" required>
<option value="" selected disabled>-- Pilih Jurusan --</option>
<option value="Rekayasa Perangkat Lunak">Rekayasa Perangkat Lunak (RPL)</option>
<option value="Teknik Komputer Jaringan">Teknik Komputer Jaringan (TKJ)</option>
<option value="Multimedia">Multimedia (MM)</option>
</select>
</div>
<!-- Area Alert Notifikasi -->
<div id="notifikasi" class="alert d-none" role="alert"></div>
<!-- Tombol Submit dengan icon -->
<div class="d-grid gap-2 mt-4">
<button type="submit" id="btnSubmit" class="btn btn-primary btn-lg">
<i class="bi bi-send-fill me-2" id="iconSubmit"></i><span id="textSubmit">Kirim Data Pendaftaran</span>
</button>
</div>
</form>
<!-- Form End -->
</div>
</div>
</div>
</div>
</div>
<!-- Script CDN JS Bootstrap (Untuk fungsionalitas interaktif jika diperlukan) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Script Logika Frontend -->
<script>
function submitForm(event) {
event.preventDefault(); // Mencegah reload halaman
const form = document.getElementById('formPendaftaran');
const btnSubmit = document.getElementById('btnSubmit');
const notifikasi = document.getElementById('notifikasi');
// Mengubah state tombol menjadi "Loading" menggunakan Spinner Bootstrap
btnSubmit.disabled = true;
document.getElementById('iconSubmit').className = 'spinner-border spinner-border-sm me-2';
document.getElementById('textSubmit').innerText = 'Menyimpan Data...';
// Mengambil data form
const dataForm = {
nisn: form.nisn.value,
nama: form.nama.value,
sekolah: form.sekolah.value,
jurusan: form.jurusan.value
};
// Memanggil fungsi GAS Backend
google.script.run
.withSuccessHandler(function(response) {
// Menampilkan alert sukses dari Bootstrap
notifikasi.className = 'alert alert-success d-block';
notifikasi.innerHTML = '<i class="bi bi-check-circle-fill me-2"></i>' + response;
// Mengembalikan state tombol
resetTombol(btnSubmit);
form.reset(); // Kosongkan form
})
.withFailureHandler(function(error) {
// Menampilkan alert error dari Bootstrap
notifikasi.className = 'alert alert-danger d-block';
notifikasi.innerHTML = '<i class="bi bi-exclamation-triangle-fill me-2"></i>Terjadi kesalahan: ' + error.message;
resetTombol(btnSubmit);
})
.prosesPendaftaran(dataForm);
}
function resetTombol(btn) {
btn.disabled = false;
document.getElementById('iconSubmit').className = 'bi bi-send-fill me-2';
document.getElementById('textSubmit').innerText = 'Kirim Data Pendaftaran';
}
</script>
</body>
</html>
Bedah Kelas (Class) Bootstrap yang Digunakan
Agar Anda bisa ngoprek desain ini lebih jauh, berikut adalah penjelasan dari beberapa kelas krusial yang kita gunakan pada HTML di atas:
container: Pembungkus utama agar konten memiliki batas margin yang proporsional di sisi kiri dan kanan.row justify-content-center: Mengatur layout secara horizontal dan menengahkan form secara otomatis.col-md-8 col-lg-6: Inilah keajaiban sistem Grid. Artinya: “Gunakan 8 kolom pada layar medium (tablet) dan 6 kolom pada layar besar (laptop/PC)”. Pada layar HP, otomatis akan memakan penuh lebar layar.form-control&form-select: Kelas wajib untuk setiap input teks dan dropdown. Kelas ini otomatis membuat input field berdesain modern, memiliki focus ring biru saat diklik, dan mengambil 100% lebar dari tempatnya.mb-3(Margin Bottom 3): Memberikan jarak vertikal yang konsisten antar elemen input. Sangat berguna agar form tidak terlihat berdesakan.d-grid gap-2: Membuat tombol submit membentang penuh (full width) dari kiri ke kanan.
Interaksi Lanjutan (UX Enhancement)
Pada bagian JavaScript (submitForm), kita tidak sekadar mengirim data, tetapi juga memodifikasi elemen UI. Perhatikan bagaimana kita menonaktifkan tombol (btnSubmit.disabled = true;) dan mengganti ikon pesawat kertas (bi-send-fill) menjadi ikon animasi memutar dari Bootstrap (spinner-border).
Trik User Experience (UX) sederhana ini memberikan umpan balik visual (visual feedback) yang jelas kepada pendaftar bahwa data mereka sedang diproses, sehingga mereka tidak mengklik tombol berulang kali yang berpotensi menyebabkan data tersimpan ganda (duplicate entry).
Kesimpulan
Mengawinkan Google Apps Script dengan Bootstrap adalah salah satu kombo paling mematikan bagi Administrator Web atau Developer. Anda mendapatkan infrastruktur backend dan database gratis, stabil, dan aman dari ekosistem Google, ditambah dengan antarmuka yang setara dengan aplikasi web profesional kelas enterprise.
Desain form pendaftaran yang kita buat di atas sudah sangat siap untuk digunakan secara nyata. Anda tinggal melakukan Deployment dan membagikan link-nya kepada target audiens Anda.
Pada artikel Ngoprek Tech selanjutnya, kita akan mengeksplorasi penggunaan Apps Script untuk tujuan yang lebih teknis lagi, yaitu Membangun Sistem Pendaftaran Online PPDB Gratis Secara Utuh. Pastikan Anda sudah mencoba script di atas terlebih dahulu. Selamat ngoprek dan salam teknologi tanpa batas!
