🎓 Tutorial Lengkap: Cara Membuat Page Cek Tagihan SPP di Blogger Menggunakan Google Apps Script & Spreadsheet
Apakah Anda ingin membuat halaman khusus di Blogger yang dapat digunakan siswa atau orang tua untuk mengecek tagihan SPP secara online hanya dengan memasukkan NISN?
Dengan memanfaatkan Google Spreadsheet sebagai basis data dan Google Apps Script sebagai API, kita bisa membuatnya dengan mudah dan gratis!
Dalam tutorial ini, Anda akan belajar langkah demi langkah bagaimana membuat halaman seperti ini:
✅ Input NISN
✅ Lihat total tagihan, total bayar, sisa
✅ Tampilkan detail bulanan, semester, dan biaya lain
✅ Didukung oleh data real-time dari Google Spreadsheet
💼 Persiapan Data di Spreadsheet
1. Buka Google Spreadsheet, dan buat sheet baru bernama SPP
2. Masukkan kolom berikut sesuai urutan:
NISN | Nama | Total | Bayar | Sisa | Januari | Februari | ... | Desember | Sem1 | Sem2 | Pendaftaran | Seragam
3. Contoh entri data:
1234567890 | Andi Wijaya | 3000000 | 1500000 | 1500000 | 0 | 0 | 150000 | ... | 0 | 500000 | 500000
Tambahkan sheet kedua bernama LogSPP (jika tidak, akan dibuat otomatis oleh script) untuk mencatat histori akses.
🧠 Membuat API dengan Google Apps Script
1. Klik Extensions > Apps Script di Spreadsheet
2. Ganti isi file Code.gs dengan kode berikut:
function doGet(e) {
var nisn = e.parameter.nisn;
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("SPP");
if (!nisn) {
logSPP("-", "NISN kosong");
return ContentService.createTextOutput(JSON.stringify({ status: "invalid" }))
.setMimeType(ContentService.MimeType.JSON);
}
var data = sheet.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
if (data[i][0].toString() === nisn) {
var result = {
nama: data[i][1],
total: data[i][2],
bayar: data[i][3],
sisa: data[i][4],
bulanan: {
januari: data[i][5],
februari: data[i][6],
maret: data[i][7],
april: data[i][8],
mei: data[i][9],
juni: data[i][10],
juli: data[i][11],
agustus: data[i][12],
september: data[i][13],
oktober: data[i][14],
november: data[i][15],
desember: data[i][16]
},
semester: {
sem1: data[i][17],
sem2: data[i][18]
},
lainnya: {
pendaftaran: data[i][19],
seragam: data[i][20]
},
status: parseInt(data[i][4]) === 0 ? "Lunas" : "Belum Lunas"
};
logSPP(nisn, result.status);
return ContentService.createTextOutput(JSON.stringify(result))
.setMimeType(ContentService.MimeType.JSON);
}
}
logSPP(nisn, "Data tidak ditemukan");
return ContentService.createTextOutput(JSON.stringify({ status: "notfound" }))
.setMimeType(ContentService.MimeType.JSON);
}
function logSPP(nisn, status) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var logSheet = ss.getSheetByName("LogSPP");
if (!logSheet) {
logSheet = ss.insertSheet("LogSPP");
logSheet.appendRow(["Waktu", "NISN", "Status"]);
}
logSheet.appendRow([new Date(), nisn, status]);
}
3. Klik tombol Deploy > Manage deployments > New deployment
4. Pilih:
Deployment type: Web app
Execute as: Me
Who has access: Anyone (atau Anyone with the link)
5. Klik Deploy dan Salin URL Web App. Contoh:
https://script.google.com/macros/s/AKfyc.../exec
📝 Membuat Halaman di Blogger
1. Masuk ke Dashboard Blogger
2. Klik menu Laman > Laman Baru
3. Ubah ke tampilan HTML
4. Tempelkan kode HTML yang sudah kamu siapkan tadi:
Catatan Penting:
Ganti bagian ID_GoogleScriptnya Disini dengan URL Web App kamu yang tadi.
fetch("https://script.google.com/macros/s/ID_GoogleScriptnya Disini/exec?nisn=" + nisn)
✅ Hasil Akhir
Sekarang kamu punya halaman pengecekan SPP yang profesional di Blogger. Cukup input NISN, dan sistem akan menampilkan:
Nama siswa
Total tagihan
Jumlah yang sudah dibayar
Sisa yang harus dibayar
✅ Status per bulan
✅ Status semester dan biaya tambahan
🛠 Tips Tambahan
Pastikan urutan kolom di Spreadsheet tidak berubah
Gunakan formulir Google Form untuk input data tagihan SPP
Integrasikan dengan sistem pembayaran untuk fitur lanjutan
🔐 Keamanan
Jangan bagikan link Apps Script Anda secara publik jika datanya sensitif
Anda bisa membatasi siapa yang bisa mengakses berdasarkan login Google (opsional dengan OAuth)
Jika kamu mengikuti semua langkah di atas, maka kamu telah berhasil membuat halaman Cek Tagihan SPP Online dengan Blogger + Google Spreadsheet + Apps Script, tanpa perlu hosting atau database tambahan!
Kode Untuk di Page HTML Blogger :
<div Style="initCustom"><style>#contact,#article-share,#article-comments,#footer,#navvfloat{display:none!important}</style></div><style>body {font-family: 'Segoe UI', sans-serif;background-color: #f7f7f7;color: #333;padding: ;}.spp-container {background-color: #fff;padding: 30px;border-radius: 12px;max-width: 600px;margin: auto;margin-top:25px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);text-align: center;}h2 {font-size: 24px;color: #007acc;margin-bottom: 20px;}input, button {padding: 12px;margin: 10px 0;border-radius: 6px;border: 1px solid #ccc;width: 80%;max-width: 400px;font-size: 16px;}button {background-color: #007acc;color: white;border: none;cursor: pointer;margin:Auto;}button:hover {background-color: #005f99;}.spinner-container {display: none;text-align: center;}.spinner {border: 4px solid #f3f3f3;border-top: 4px solid #007acc;border-radius: 50%;width: 50px;height: 50px;animation: spin 1s linear infinite;margin: Auto;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.loading-text {font-size: 18px;color: #333;margin-top: 10px;}.spp-result {margin-top: 20px;text-align: left;}.spp-result table {width: 100%;border-collapse: collapse;}.spp-result th, .spp-result td {padding: 12px;text-align: left;border-bottom: 1px solid #eee;}.spp-result th {background-color: #f8f8f8;color: #007acc;}.status-lunas {color: green;font-weight: bold;}.status-belum {color: red;font-weight: bold;}.modal {display: none;position: fixed;z-index: 100;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);justify-content: center;align-items: center;opacity: 0;transition: opacity 0.3s ease;}.modal.show {display: flex;opacity: 1;}.modal-content {position: relative;background: white;padding: 25px;border-radius: 10px;max-width: 800px;width: 90%;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);overflow-y: auto;margin-top:40%;}.modal-close {position: absolute;top: 30px;right: 15px;font-size: 22px;cursor: pointer;font-weight: bold;color: #ff4040;}.modal-header {border-bottom: 2px solid #f1f1f1;margin-bottom: 15px;padding-bottom: 10px;}.modal-header h3 {font-size: 24px;font-weight: 600;color: #007acc;}.table-section {margin-bottom: 30px;}.table-section h4 {margin-bottom: 10px;text-align: center;color: #007acc;font-size: 18px;font-weight: bold;}.table-section td {padding: 12px;border-bottom: 1px solid #eee;font-size: 14px;}.table-section td:last-child {text-align: right;}</style>
<body>
<div class="spp-container">
<h2>Informasi Tagihan SPP</h2>
<input type="text" id="nisn" placeholder="Masukkan NISN">
<br>
<button onclick="cekSPP()">Cek SPP</button>
<div class="spinner-container" id="spinnerContainer">
<div class="spinner"></div>
<div class="loading-text">Sedang Mengecek, mohon tunggu...</div>
</div>
<div id="hasil" class="spp-result" style="display:none;">
<h3 id="namaSiswa"></h3>
<table>
<tr><th>Total Tagihan</th><td id="totalTagihan"></td></tr>
<tr><th>Total Bayar</th><td id="totalBayar"></td></tr>
<tr><th>Sisa</th><td id="sisaTagihan"></td></tr>
</table>
<br>
<button onclick="bukaDetail()">📄 Lihat Detail</button>
</div>
</div>
<!-- MODAL DETAIL -->
<div class="modal" id="modalDetail">
<div class="modal-content">
<span class="modal-close" onclick="tutupDetail()">✖</span> <!-- Tombol Close -->
<div class="modal-header">
<h3>Detail Pembayaran</h3>
</div>
<div class="table-section">
<h4>UDB - Bulanan</h4>
<table id="tabelBulanan"></table>
</div>
<div class="table-section">
<h4>UDT & Biaya Lain</h4>
<table id="tabelLainnya"></table>
</div>
</div>
</div>
<script>
let dataSPP = null;
function formatRupiah(angka) {
return parseInt(angka).toLocaleString("id-ID");
}
function showSpinner(show) {
const spinnerContainer = document.getElementById("spinnerContainer");
if (show) {
spinnerContainer.style.display = "block"; // Menampilkan spinner
} else {
spinnerContainer.style.display = "none"; // Menyembunyikan spinner
}
}
function cekSPP() {
const nisn = document.getElementById("nisn").value.trim();
if (!nisn) return alert("Masukkan NISN.");
document.getElementById("hasil").style.display = "none";
document.getElementById("namaSiswa").innerText = "";
showSpinner(true);
fetch("https://script.google.com/macros/s/ID_GoogleScriptnya Disini/exec?nisn=" + nisn)
.then(res => res.json())
.then(data => {
showSpinner(false);
if (data.status === "notfound") {
alert("Data tidak ditemukan.");
return;
}
dataSPP = data;
document.getElementById("namaSiswa").innerText = data.nama;
document.getElementById("totalTagihan").innerText = "Rp " + formatRupiah(data.total);
document.getElementById("totalBayar").innerText = "Rp " + formatRupiah(data.bayar);
document.getElementById("sisaTagihan").innerText = "Rp " + formatRupiah(data.sisa);
document.getElementById("hasil").style.display = "block";
})
.catch(() => {
showSpinner(false);
alert("Gagal mengambil data. Coba lagi.");
});
}
function bukaDetail() {
if (!dataSPP) return;
const bulanan = dataSPP.bulanan;
const semester = dataSPP.semester;
const lainnya = dataSPP.lainnya;
let bulananHTML = "";
for (const [bulan, val] of Object.entries(bulanan)) {
const status = val > 0 ? `<span class="status-belum">❌ Belum</span>` : `<span class="status-lunas">✅ Lunas</span>`;
bulananHTML += `<tr><td>${bulan.toUpperCase()}</td><td>Rp ${formatRupiah(val)}</td><td>${status}</td></tr>`;
}
document.getElementById("tabelBulanan").innerHTML = bulananHTML;
let lainnyaHTML = "";
lainnyaHTML += `<tr><td>Semester 1</td><td>Rp ${formatRupiah(semester.sem1)}</td><td>${semester.sem1 > 0 ? '<span class="status-belum">❌ Belum</span>' : '<span class="status-lunas">✅ Lunas</span>'}</td></tr>`;
lainnyaHTML += `<tr><td>Semester 2</td><td>Rp ${formatRupiah(semester.sem2)}</td><td>${semester.sem2 > 0 ? '<span class="status-belum">❌ Belum</span>' : '<span class="status-lunas">✅ Lunas</span>'}</td></tr>`;
lainnyaHTML += `<tr><td>Pendaftaran</td><td>Rp ${formatRupiah(lainnya.pendaftaran)}</td><td>${lainnya.pendaftaran > 0 ? '<span class="status-belum">❌ Belum</span>' : '<span class="status-lunas">✅ Lunas</span>'}</td></tr>`;
lainnyaHTML += `<tr><td>Seragam</td><td>Rp ${formatRupiah(lainnya.seragam)}</td><td>${lainnya.seragam > 0 ? '<span class="status-belum">❌ Belum</span>' : '<span class="status-lunas">✅ Lunas</span>'}</td></tr>`;
document.getElementById("tabelLainnya").innerHTML = lainnyaHTML;
const modal = document.getElementById("modalDetail");
modal.classList.add("show");
modal.style.display = "flex";
}
function tutupDetail() {
const modal = document.getElementById("modalDetail");
modal.classList.remove("show");
setTimeout(() => {
modal.style.display = "none";
}, 300);
}
</script>
</body>