Di era digitalisasi pendidikan, manajemen administrasi sekolah menuntut efisiensi, kecepatan, dan keamanan data. Sayangnya, membangun sistem informasi seringkali terkendala oleh biaya server (hosting) dan pembuatan aplikasi yang mahal. Sistem Informasi Tata Usaha (SITU) Pro hadir sebagai solusi inovatif dengan memanfaatkan ekosistem gratis dari Google: Google Apps Script (GAS) dan Blogger.
Mengenal App Script dan Blogger
Apa itu Google Apps Script?
Google Apps Script (GAS) adalah platform serverless berbasis JavaScript yang disediakan oleh Google. Platform ini memungkinkan kita membuat aplikasi (Web App) yang terhubung langsung dengan Google Sheets sebagai databasenya. Semua pemrosesan data (CRUD) berjalan di server Google secara gratis, aman, dan tanpa perlu repot mengurus hosting backend.
Apa itu Blogger?
Blogger adalah sistem manajemen konten (CMS) gratis milik Google. Meski dikenal sebagai platform pembuat blog, arsitektur XML Blogger yang fleksibel memungkinkan kita menyulapnya menjadi Front-End sebuah aplikasi web (Dashboard). Dengan Blogger, kita mendapatkan hosting antarmuka tak terbatas (unlimited bandwidth) yang anti-down.
Manfaat Menggabungkan Keduanya
Kombinasi antara Google Apps Script (Backend) dan Blogger (Frontend) menciptakan arsitektur Aplikasi Tanpa Biaya (Zero-Cost App) dengan manfaat luar biasa:
- Gratis Selamanya: Tidak perlu membayar langganan CPanel, Hosting, atau VPS tahunan.
- Keamanan Setara Bank: Data Anda tersimpan di Google Drive (Spreadsheet) yang dilindungi oleh sistem keamanan Google.
- Kapasitas Besar: Satu file Google Spreadsheet mampu menampung hingga 10 juta sel data, sangat lebih dari cukup untuk administrasi sekolah selama bertahun-tahun.
- Kustomisasi Tanpa Batas: Tampilan di Blogger bisa didesain se-premium mungkin (menggunakan Tailwind, Bootstrap, dll) tanpa dibatasi oleh tema default.
Fitur Unggulan SITU Pro
Aplikasi yang akan Anda buat melalui Source Code di bawah ini memiliki fitur-fitur kelas atas (Premium):
- 📊 Dashboard Analitik: Menampilkan grafik real-time jumlah siswa, guru, dan tenaga kependidikan.
- 🖨️ Cetak Kop Surat Resmi: Mencetak laporan (Landscape) dan Surat/SK (Portrait) secara otomatis lengkap dengan Kop Surat Daerah & Sekolah.
- 📠 Sistem Barcode: Generate barcode (Code128) otomatis berdasarkan waktu cetak sebagai tanda validasi/keaslian dokumen.
- 📁 Upload & Download Massal: Memasukkan ratusan data Siswa/Guru sekaligus menggunakan file Excel (.xlsx).
- ⚙️ Pengaturan Dinamis: Nama Kepsek, NIP, Logo, hingga Link Database diatur langsung melalui antarmuka aplikasi.
Prompt Rahasia untuk Membuat Aplikasi Ini
Jika Anda menggunakan AI (seperti Google Gemini atau ChatGPT), Anda bisa menggunakan *prompt* komprehensif di bawah ini untuk meminta AI membuatkan aplikasi serupa dari awal.
Prompt AI SITU Pro
Buatkan saya Source Code Aplikasi Sistem Informasi Tata Usaha (SITU) Sekolah tingkat profesional. Gunakan Google Apps Script sebagai Backend (Database menggunakan Google Sheets) dan Blogger XML Theme sebagai Frontend. Fitur yang harus ada: 1. Dashboard Premium: Gradient background, card statistik, grafik ChartJS (Siswa, Guru, Tendik), dan Buku Petunjuk. 2. Menu Manajemen: Arsip Surat (Masuk/Keluar + Link Drive opsional), Buku Tamu, Agenda, Data Siswa (NISN, Tempat/Tgl Lahir, Nama Ortu), dan Data Pegawai (Guru/Tendik, TMT, No SK). 3. Upload Massal: Harus mendukung input manual, cetak tabel filter, dan UPLOAD BATCH via file Excel (xlsx) menggunakan SheetJS, beserta tombol download template excelnya. 4. Fitur Cetak Dinamis (Window.Print): - Tabel laporan harus menggunakan layout Kertas Landscape. - Fitur "Cetak Surat" (Surat Keluar, Surat Keterangan, SK) harus menggunakan Kertas Portrait. - Keduanya WAJIB memiliki Header Kop Surat Resmi (Logo Daerah, Logo Sekolah, Alamat) dan Tanda Tangan Kepsek & Ka TU. - Harus ada sistem Barcode Keaslian dokumen di bawah kop surat bagian kanan. 5. Menu Pengaturan Dinamis: Form untuk menginput dan menyimpan Link Database (Web App URL), Nama Daerah, Nama Sekolah, Nama/NIP Kepsek, NIP TU, URL Logo ke dalam Database dan LocalStorage browser. Terdapat juga input URL untuk menu "Aplikasi Lainnya" di sidebar. UI/UX: Gunakan Bootstrap 5, FontAwesome, dan SweetAlert2. Sidebar responsif mobile-friendly (Offcanvas). Pisahkan kode menjadi 2 bagian: Kode.gs (Backend) dan Blogger_Theme.xml (Frontend).
Langkah-Langkah Instalasi
- Siapkan Google Spreadsheet: Buat file Spreadsheet baru di Google Drive Anda.
- Pasang Backend (Apps Script): Klik menu Ekstensi > Apps Script pada Spreadsheet tersebut. Hapus kode lama, lalu paste kode
Kode.gsdi bawah. - Deploy API: Simpan, lalu klik Terapkan (Deploy) > Deployment Baru. Pilih jenis "Aplikasi Web", akses untuk "Siapa Saja". Salin URL Web App yang dihasilkan.
- Pasang Frontend (Blogger): Download file Tema XML Blogger di bawah. Buka Blogger Anda > Tema > Edit HTML. Hapus semua kode bawaan blogger, lalu paste isi file XML tersebut dan Simpan.
- Hubungkan Sistem: Buka blog Anda. Masuk ke menu Pengaturan (kiri bawah), lalu paste URL Web App (dari langkah 3) ke kolom Link Database. Simpan, dan aplikasi siap digunakan!
Source Code Backend (Kode.gs)
Kode.gs (Google Apps Script)
/**
* SITU SMPN 3 Kerinci - Back-end System (V2.0 Pro)
* Update: Penambahan Kolom Siswa & Guru
*/
const SPREADSHEET_ID = SpreadsheetApp.getActiveSpreadsheet().getId();
const DATABASE_CONFIG = {
'SuratMasuk': ['Timestamp', 'No. Surat', 'Asal Instansi', 'Perihal', 'Tanggal Terbit', 'Link Drive'],
'SuratKeluar': ['Timestamp', 'No. Surat', 'Tujuan', 'Perihal', 'Tanggal Kirim', 'Link Drive'],
'BukuTamu': ['Timestamp', 'Nama Lengkap', 'Instansi', 'Keperluan', 'No. WhatsApp'],
'Agenda': ['Timestamp', 'Nama Kegiatan', 'Lokasi', 'Tanggal', 'Jam'],
'DataSiswa': ['Timestamp', 'NISN', 'Nama Siswa', 'L/P', 'Tempat Lahir', 'Tanggal Lahir', 'Kelas', 'Nama Ayah', 'Nama Ibu', 'Alamat'],
'DataGuru': ['Timestamp', 'NIP/NUPTK', 'Nama Lengkap', 'Kategori', 'Jabatan', 'Status Pegawai', 'TMT Bertugas', 'No. SK'],
'Pengaturan': ['Key', 'Value']
};
function onOpen() {
SpreadsheetApp.getUi().createMenu('🚀 SITU System')
.addItem('1. Setup Database Otomatis', 'setupDatabase')
.addSeparator()
.addItem('2. Cek Koneksi API', 'checkConnection')
.addToUi();
}
function setupDatabase() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ui = SpreadsheetApp.getUi();
for (const sheetName in DATABASE_CONFIG) {
let sheet = ss.getSheetByName(sheetName);
if (!sheet) {
sheet = ss.insertSheet(sheetName);
const header = DATABASE_CONFIG[sheetName];
sheet.getRange(1, 1, 1, header.length).setValues([header])
.setBackground('#0f172a').setFontColor('#ffffff').setFontWeight('bold');
sheet.setFrozenRows(1);
}
}
ui.alert('✅ Setup Berhasil! Database siap digunakan.');
}
function checkConnection() {
SpreadsheetApp.getUi().alert('Koneksi Aktif! Sistem V2.0 siap berjalan.');
}
function doGet(e) {
return ContentService.createTextOutput("✅ Sistem Back-end SITU V2.0 Aktif.");
}
function doPost(e) {
const lock = LockService.getScriptLock();
lock.tryLock(10000);
try {
const data = JSON.parse(e.postData.contents);
const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
if (data.action === 'save_settings') {
let sheet = ss.getSheetByName('Pengaturan');
if (!sheet) { sheet = ss.insertSheet('Pengaturan'); }
sheet.getDataRange().clearContent();
sheet.appendRow(['Key', 'Value']);
const settings = data.settings;
for (const key in settings) {
sheet.appendRow([key, settings[key]]);
}
return ContentService.createTextOutput(JSON.stringify({status: "success"})).setMimeType(ContentService.MimeType.JSON);
}
if (data.action === 'load_settings') {
let sheet = ss.getSheetByName('Pengaturan');
if (!sheet) return ContentService.createTextOutput(JSON.stringify({status: "success", data: {}})).setMimeType(ContentService.MimeType.JSON);
const rows = sheet.getDataRange().getValues();
rows.shift();
let settings = {};
rows.forEach(row => { if(row[0]) settings[row[0]] = row[1]; });
return ContentService.createTextOutput(JSON.stringify({status: "success", data: settings})).setMimeType(ContentService.MimeType.JSON);
}
const sheetMap = {
'masuk': 'SuratMasuk', 'keluar': 'SuratKeluar', 'tamu': 'BukuTamu',
'agenda': 'Agenda', 'siswa': 'DataSiswa', 'guru': 'DataGuru'
};
const sheetName = sheetMap[data.type];
const sheet = ss.getSheetByName(sheetName);
if (!sheet && data.action !== 'save_settings' && data.action !== 'load_settings') {
throw new Error("Sheet '" + sheetName + "' belum dibuat! Hapus sheet lama dan klik Setup Database Otomatis.");
}
if (data.action === 'insert') {
let rowData = [new Date()];
if (data.type === 'masuk') rowData.push(data.noSurat, data.asalTujuan, data.perihal, data.tanggal, data.linkDrive || '-');
else if (data.type === 'keluar') rowData.push(data.noSurat, data.tujuan, data.perihal, data.tanggal, data.linkDrive || '-');
else if (data.type === 'tamu') rowData.push(data.nama, data.instansi, data.keperluan, data.noHp);
else if (data.type === 'agenda') rowData.push(data.kegiatan, data.lokasi, data.tanggal, data.jam);
else if (data.type === 'siswa') rowData.push(data.nisn, data.nama, data.jk, data.tempatLahir, data.tglLahir, data.kelas, data.namaAyah, data.namaIbu, data.alamat);
else if (data.type === 'guru') rowData.push(data.nip, data.nama, data.kategori, data.jabatan, data.status, data.tmt, data.noSk);
sheet.appendRow(rowData);
return ContentService.createTextOutput(JSON.stringify({status: "success"})).setMimeType(ContentService.MimeType.JSON);
}
if (data.action === 'insert_batch') {
let rows = data.batchData.map(row => {
let r = [new Date()];
if(data.type === 'siswa') r.push(row.nisn||'-', row.nama||'-', row.jk||'-', row.tempat_lahir||'-', row.tanggal_lahir||'-', row.kelas||'-', row.nama_ayah||'-', row.nama_ibu||'-', row.alamat||'-');
if(data.type === 'guru') r.push(row.nip||'-', row.nama||'-', row.kategori||'-', row.jabatan||'-', row.status||'-', row.tmt||'-', row.no_sk||'-');
return r;
});
if(rows.length > 0) {
sheet.getRange(sheet.getLastRow() + 1, 1, rows.length, rows[0].length).setValues(rows);
}
return ContentService.createTextOutput(JSON.stringify({status: "success", count: rows.length})).setMimeType(ContentService.MimeType.JSON);
}
if (data.action === 'read') {
const rows = sheet.getDataRange().getDisplayValues();
rows.shift();
return ContentService.createTextOutput(JSON.stringify({status: "success", data: rows})).setMimeType(ContentService.MimeType.JSON);
}
} catch (err) {
return ContentService.createTextOutput(JSON.stringify({status: "error", error: err.toString()})).setMimeType(ContentService.MimeType.JSON);
} finally {
lock.releaseLock();
}
}
Download Tema Blogger (Frontend)
Silakan download source code Tema XML Blogger untuk antarmuka/tampilan Front-end aplikasi ini dengan menekan tombol di bawah. Metode ini menggunakan direct download yang aman dari Google Drive.
Download Blogger_Theme.xml
File XML siap pakai, bebas error.
 untuk Sekolah){kind=link}