Selamat datang! Jika Anda sedang mencari solusi untuk membuat Sistem Penerimaan Murid Baru (SPMB) atau PPDB yang profesional, gratis, dan anti-down, Anda berada di tempat yang tepat. Artikel ini akan membagikan Source Code lengkap dan cara membuatnya.
Apa itu Google Apps Script & Blogger?
Blogger adalah platform CMS gratis dari Google yang sangat tangguh untuk menangani trafik tinggi (anti-down). Kita akan menyulap tampilan Blogger ini menjadi layaknya Web App profesional menggunakan tema XML khusus.
Google Apps Script (GAS) adalah bahasa pemrograman berbasis cloud dari Google. Kita menggunakannya sebagai Backend (Server). Saat pendaftar mengisi formulir di Blogger, GAS akan menangkap data tersebut dan menyimpannya langsung ke dalam Google Sheets secara real-time.
Manfaat Kombinasi Ini:
- 100% Gratis: Tanpa biaya hosting atau sewa server tahunan.
- Anti-Down: Server Google siap menahan ribuan pendaftar sekaligus.
- Keamanan Data: Data langsung masuk ke Google Sheet privat Anda.
- Fitur Premium: Dilengkapi cetak Bukti Pendaftaran PDF murni, Barcode (QR Code), dan Notifikasi Pop-up (SweetAlert).
1. Prompt AI untuk Membuat Sistem SPMB
Jika Anda ingin bereksperimen atau memodifikasi sistem ini menggunakan AI (seperti Gemini atau ChatGPT), Anda bisa menggunakan Prompt rahasia di bawah ini:
Prompt SPMB Master
Buatkan website profesional dan premium berbasis database sheet, back eng appscript (kode gs) dan front end blogger (tema xml blogger), khusus untuk SPMB (Sistem Penerimaan Murid Baru).
Ketentuan:
1. Desain menggunakan Tailwind CSS, responsif, elegan, dan mobile-friendly.
2. Tambahkan Visi Sekolah: "Unggul dalam Prestasi, Teguh Berbudaya, Berkarakter dan Berakhlak Mulia".
3. Form pendaftaran lengkap meliputi: NISN, NIK Siswa, Nama Lengkap, TTL, Jenis Kelamin, Asal Sekolah, No WA, Alamat, Data Ayah (Nama, NIK, Pekerjaan), Data Ibu (Nama, NIK, Pekerjaan), dan Data Wali opsional.
4. Gunakan SweetAlert2 untuk notifikasi sukses/gagal.
5. Buatkan fitur otomatis memunculkan tiket Bukti Pendaftaran setelah sukses.
6. Berikan Barcode (QR Code) keaslian pada tiket bukti pendaftaran.
7. Buatkan tombol Download Bukti PDF murni (menggunakan jsPDF).
8. Pada Apps Script, berikan validasi pencegah duplikasi data agar NISN atau NIK yang sama tidak bisa mendaftar dua kali.2. Kode Google Apps Script (Backend)
Berikut adalah kode .gs yang berfungsi untuk menerima data dari formulir dan menyimpannya ke Google Sheet. Kode ini sudah dilengkapi dengan fitur Anti Duplikat NIK/NISN.
Kode.gs (Apps Script)
/**
* SISTEM PENERIMAAN MURID BARU (SPMB)
* SMP NEGERI 3 KERINCI
* Backend: Google Apps Script - Versi 3 (Validasi Duplikat NIK & NISN)
*/
const SHEET_NAME = 'DataPendaftar';
function doPost(e) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
if (!sheet) {
return ContentService.createTextOutput(JSON.stringify({"result": "error", "message": "Sheet tidak ditemukan!"})).setMimeType(ContentService.MimeType.JSON);
}
try {
// ==========================================
// FITUR CEGAH DUPLIKASI DATA (NISN ATAU NIK)
// ==========================================
var data = sheet.getDataRange().getValues();
var isDuplicate = false;
var duplicateMsg = "";
// Looping data dari baris ke-2 (karena baris 1 adalah Header)
for (var i = 1; i < data.length; i++) {
var existNisn = String(data[i][1]).trim(); // Kolom B: NISN
var existNik = String(data[i][2]).trim(); // Kolom C: NIK Siswa
var inputNisn = String(e.parameter.nisn).trim();
var inputNik = String(e.parameter.nik_siswa).trim();
if (existNisn !== "" && existNisn === inputNisn) {
isDuplicate = true;
duplicateMsg = "Maaf, NISN " + inputNisn + " sudah terdaftar di sistem!";
break;
}
if (existNik !== "" && existNik === inputNik) {
isDuplicate = true;
duplicateMsg = "Maaf, NIK Siswa " + inputNik + " sudah pernah didaftarkan!";
break;
}
}
// Jika ganda, kembalikan pesan error ke tampilan frontend
if (isDuplicate) {
return ContentService.createTextOutput(JSON.stringify({"result": "error", "message": duplicateMsg}))
.setMimeType(ContentService.MimeType.JSON);
}
// ==========================================
// Jika tidak ganda, lanjutkan simpan data
var rowData = [];
var timestamp = new Date();
rowData.push(timestamp);
rowData.push(e.parameter.nisn || '');
rowData.push(e.parameter.nik_siswa || '');
rowData.push(e.parameter.nama || '');
rowData.push(e.parameter.ttl || '');
rowData.push(e.parameter.jk || '');
rowData.push(e.parameter.asal_sekolah || '');
rowData.push(e.parameter.no_wa || '');
rowData.push(e.parameter.alamat || '');
rowData.push(e.parameter.nama_ayah || '');
rowData.push(e.parameter.nik_ayah || '');
rowData.push(e.parameter.pekerjaan_ayah || '');
rowData.push(e.parameter.nama_ibu || '');
rowData.push(e.parameter.nik_ibu || '');
rowData.push(e.parameter.pekerjaan_ibu || '');
rowData.push(e.parameter.nama_wali || '-');
rowData.push(e.parameter.nik_wali || '-');
rowData.push(e.parameter.pekerjaan_wali || '-');
sheet.appendRow(rowData);
return ContentService.createTextOutput(JSON.stringify({
"result": "success",
"message": "Pendaftaran berhasil!",
"data": {
"nama": e.parameter.nama,
"nisn": e.parameter.nisn,
"asal": e.parameter.asal_sekolah,
"waktu": timestamp.toLocaleString('id-ID')
}
})).setMimeType(ContentService.MimeType.JSON);
} catch (error) {
return ContentService.createTextOutput(JSON.stringify({"result": "error", "message": error.message}))
.setMimeType(ContentService.MimeType.JSON);
}
}3. Download Tema Blogger (Frontend)
Tema XML Blogger ini dirancang super premium dengan fitur Fade-in Animation, Cetak PDF, dan QR Code terintegrasi. Silakan download file temanya melalui tombol di bawah ini:
Download Tema XML4. Langkah-Langkah Integrasi Lengkap
- Buat Database: Buka Google Sheets baru. Beri nama sheet di bagian kiri bawah dengan nama
DataPendaftar. - Buat Header: Pada baris pertama (A1 sampai R1), ketikkan urutan judul kolom berikut: Timestamp, NISN, NIK Siswa, Nama Lengkap, TTL, Jenis Kelamin, Asal Sekolah, No WhatsApp, Alamat, Nama Ayah, NIK Ayah, Pekerjaan Ayah, Nama Ibu, NIK Ibu, Pekerjaan Ibu, Nama Wali, NIK Wali, Pekerjaan Wali.
- Pasang Script: Klik menu Ekstensi > Apps Script. Hapus semua kode yang ada, lalu Paste (tempel) Kode GS yang sudah disalin di atas.
- Deploy Web App: Klik tombol Terapkan (Deploy) > Deployment Baru. Pilih jenis 'Aplikasi Web'. Pada bagian Akses, pastikan Anda memilih Siapa saja (Anyone). Klik Terapkan, beri otorisasi akun Google Anda, lalu salin URL Web App yang dihasilkan.
- Pasang Tema Blogger: Buka dashboard Blogger Anda. Masuk ke menu Tema, klik tanda panah ke bawah, pilih Edit HTML.
- Timpa Kode: Hapus seluruh isi kode HTML bawaan Blogger Anda, lalu Paste isi file tema XML yang sudah Anda download dari tombol pelangi di atas.
- Hubungkan Database: Gulir ke bagian paling bawah pada kode Tema Blogger tersebut. Cari tulisan 'MASUKKAN_URL_WEB_APP_ANDA_DISINI'. Hapus tulisan tersebut (biarkan tanda kutipnya) dan tempel/paste URL Web App dari langkah 4 ke dalamnya.
- Selesai! Klik tombol ikon Save (Simpan). Buka blog Anda dan lakukan tes pendaftaran!
Semoga sistem SPMB ini bermanfaat untuk sekolah Anda. Salam teknologi pendidikan!
){kind=link}