Panduan Lengkap: Membangun Sistem PPDB Online Gratis dengan Google Sheets, Apps Script, dan Vercel

Musim Penerimaan Peserta Didik Baru (PPDB) sering kali menjadi momen yang sibuk bagi pihak sekolah. Di era digital ini, memfasilitasi pendaftaran secara online adalah sebuah keharusan. Namun, tantangan terbesar yang sering dihadapi sekolah—terutama sekolah menengah atau dasar—adalah anggaran untuk menyewa hosting dan mengelola database yang kompleks.

Bagaimana jika Anda bisa membangun sistem PPDB yang canggih, otomatis, dan 100% gratis?

Memanfaatkan ekosistem Google Workspace (Google Sheets, Google Drive, Google Apps Script) dan platform deployment Vercel, hal tersebut sangat mungkin dilakukan. Artikel ini akan membedah cara membangun sistem PPDB serverless dalam hitungan menit, tanpa perlu repot mengurus database seperti MySQL.

Arsitektur Sistem: Bagaimana Cara Kerjanya?

Sebelum masuk ke teknis, mari kita pahami alur kerjanya. Sistem PPDB tanpa hosting ini membagi beban kerja ke dalam dua platform raksasa yang gratis:

Front-End (Tampilan Web): File HTML, CSS, dan JavaScript akan disimpan di GitHub dan di-hosting secara otomatis oleh Vercel.
Back-End (Database & Penyimpanan): Google Sheets bertindak sebagai database tempat data pendaftar berkumpul. Google Drive otomatis menyimpan berkas unggahan siswa (seperti foto atau ijazah). Keduanya dihubungkan ke website menggunakan Google Apps Script (GAS).

Langkah-Langkah Integrasi Sistem PPDB

1. Siapkan Tampilan Depan (Front-End) di Vercel

Langkah pertama adalah menyiapkan antarmuka website Anda. Unggah seluruh source code website PPDB Anda ke repository GitHub. Setelah itu, login ke Vercel menggunakan akun GitHub Anda, pilih repository tersebut, dan klik Deploy.

Dalam hitungan detik, Vercel akan memberikan tautan publik (link URL) untuk website Anda. Namun, pada tahap ini, formulir pendaftaran belum bisa digunakan karena belum terhubung ke database.

2. Jadikan Google Sheets Sebagai Database

Buatlah sebuah spreadsheet kosong di Google Sheets. Buka menu Ekstensi > Apps Script. Di sinilah keajaiban terjadi.

Salin kode khusus (biasanya berada di folder gas atau Google Apps Script dari source code yang Anda miliki) dan tempelkan ke dalam editor Apps Script. Kode ini sudah diprogram untuk menangkap data dari website dan menyusunnya dengan rapi ke dalam baris dan kolom spreadsheet.

Setelah kode dimasukkan, klik Terapkan (Deploy) > Deployment Baru, lalu pilih jenis "Aplikasi Web" (Web App). Pastikan aksesnya diatur untuk "Siapa Saja" (Anyone). Google akan memberikan sebuah URL Web App.

3. Hubungkan Front-End dan Back-End

Kembali ke GitHub Anda. Cari file konfigurasi koneksi (biasanya bernama app.js atau terletak di dalam folder service). Tempelkan URL Web App dari Google Apps Script tadi ke dalam file tersebut, lalu simpan perubahan (commit changes).

Karena Anda menggunakan Vercel, perubahan di GitHub ini akan langsung di-update ke website live Anda secara otomatis!

Fitur Canggih yang Berhasil Diciptakan

Dengan integrasi di atas, sistem PPDB Anda kini memiliki fitur setara aplikasi berbayar:

Manajemen Berkas Otomatis: Saat siswa mengunggah syarat pendaftaran, sistem otomatis membuatkan folder atas nama siswa tersebut di Google Drive admin.
Cetak Bukti Instan: Pendaftar langsung bisa mengunduh file PDF bukti pendaftaran secara otomatis setelah menekan tombol submit.
Penghitung Jarak Sistem Zonasi: Dengan memasukkan titik koordinat sekolah di pengaturan, sistem dapat otomatis menghitung jarak dari rumah pendaftar ke sekolah berbasis Google Maps API.
Pengaturan Jadwal Kelulusan: Anda bisa menyetel tanggal kapan hasil seleksi bisa dilihat oleh pendaftar secara otomatis.

Tips Ekstra: Kustomisasi UI/UX Agar Website Lebih Profesional

Banyak pengembang pemula hanya memakai template mentah tanpa penyesuaian. Agar website PPDB sekolah Anda tampil beda, lebih meyakinkan, dan profesional, terapkan empat best practice modifikasi desain berikut pada source code Anda:

Jadikan Murni Landing Page (Hapus Tombol Login): Demi keamanan dan pengalaman pengguna yang lebih bersih, hapus seluruh halaman dashboard admin beserta tombol login dari kode front-end website. Biarkan pengunjung hanya melihat informasi sekolah dan formulir pendaftaran. Validasi dan manajemen data kelulusan cukup dikelola secara tertutup langsung melalui Google Sheets saja.
Gunakan Foto Asli pada Hero Section: Bagian paling atas website (hero section) adalah penentu impresi pertama. Jangan gunakan warna solid atau ilustrasi vektor bawaan template. Ubah background header dengan fotografi asli anak-anak sekolah yang sedang belajar atau beraktivitas untuk memberikan nuansa hangat, kredibel, dan nyata.
Standarisasi Tipografi Modern: Buka file style.css Anda dan ubah font-family utama ke Plus Jakarta Sans. Font ini sangat bersih, modern, dan tingkat keterbacaannya (readability) sangat tinggi untuk formulir online yang padat teks.
Rapatkan Jarak Footer: Desain template gratis sering kali memiliki bagian footer (kaki halaman) yang terlalu lebar. Sesuaikan padding atau margin di CSS agar ukuran footer lebih dirapatkan. Hal ini membuat tata letak terasa lebih padat, profesional, dan nyaman saat digulir di layar smartphone.

Download Source Code

Dengan perpaduan teknologi serverless modern dan sedikit sentuhan desain yang presisi, Anda kini siap meluncurkan sistem PPDB online kelas premium tanpa mengeluarkan biaya sepeser pun. Selamat mencoba!