Manajemen administrasi sekolah yang rumit kini bisa diatasi dengan teknologi sederhana namun sangat kuat. Anda tidak perlu menyewa server mahal atau membeli domain khusus untuk membangun Sistem Administrasi Guru yang lengkap, interaktif, dan mendukung banyak pengguna (multi-user). Rahasianya? Kombinasi maut antara Google Apps Script dan Blogger.

Mengenal Google Apps Script (Backend) dan Blogger (Frontend)

Apa itu Google Apps Script?

Google Apps Script (Appscript) adalah platform scripting berbasis cloud yang disediakan gratis oleh Google. Platform ini menggunakan bahasa JavaScript dan terintegrasi langsung dengan ekosistem Google Workspace (seperti Google Sheets, Docs, Drive). Dalam aplikasi ini, Appscript dan Google Sheets bertindak sebagai Server dan Database (Backend). Ia menyimpan data absensi, nilai, jadwal, dan menangani logika login tanpa batas penyimpanan (selama kapasitas Google Drive Anda memadai).

Apa itu Blogger?

Blogger adalah layanan *hosting* blog gratis milik Google. Namun, dengan trik tertentu, halaman kosong di Blogger bisa disulap menjadi Antarmuka Pengguna / UI (Frontend) yang premium layaknya aplikasi web profesional. Blogger akan menampilkan *dashboard*, tombol, tabel, dan grafik, lalu "berbicara" dengan database di Google Sheets melalui API yang kita buat di Appscript.

Manfaat Kombinasi Ini untuk Guru:

  • 100% Gratis & Serverless: Tidak ada biaya hosting bulanan. Server ditangani langsung oleh infrastruktur raksasa Google.
  • Aman (Anti-Down): Karena menumpang di server Google, aplikasi ini tidak akan *down* meskipun diakses puluhan guru secara bersamaan.
  • Real-time & Mudah Dibackup: Semua data masuk seketika ke Google Sheets, sangat mudah diunduh (Excel/PDF) dan diprint.
  • Akses di Mana Saja: Tampilan (UI) responsif di HP, tablet, maupun laptop.

Opsi 1: Buat Mandiri Menggunakan AI (Prompting)

Bagi Anda yang ingin belajar atau membuat aplikasi ini sendiri menggunakan bantuan AI (seperti Google Gemini atau ChatGPT), Anda harus memberikan instruksi yang sangat spesifik dan presisi. Berikut adalah *Mega Prompt* yang sudah disesuaikan agar AI menghasilkan kode yang *bug-free* dan responsif.

📝 Prompt AI Lengkap 
Bertindaklah sebagai Full Stack Web Developer ahli. Saya ingin membuat "Sistem Administrasi Guru" menggunakan Google Apps Script (Backend/Database via Google Sheets) dan Blogger XML (Frontend/UI). Gunakan arsitektur REST API (fetch/JSON).

FITUR YANG HARUS ADA:
1. Multi-user login (Admin dan Guru biasa).
2. Database mencakup: Config, Users, Kelas, Mapel, DataSiswa, Absensi, Nilai, Agenda, BimbinganWali, JadwalMengajar.
3. Dashboard statistik (Jumlah Rombel, Guru, Siswa).
4. Menu Guru: Input Absensi, Input Penilaian (Leger dinamis & Riwayat), Jadwal Mengajar, Jurnal Agenda, Bimbingan Wali.
5. Menu Admin: Rekap Guru Wali, Manajemen User (Tambah/Hapus), Import Siswa Massal, Konfigurasi Sekolah.
6. Fitur Cetak PDF (menggunakan jsPDF & jsPDF-AutoTable) lengkap dengan Kop Surat Sekolah, Logo (kiri/kanan), tanda tangan Kepsek, dan Auto Barcode generator.
7. Ambil data tanggal di GAS menggunakan getDisplayValues() untuk menghindari bug ISO string.
8. UI/UX: Desain "Platinum", Glassmorphism, warna primer #2C3E50. Harus 100% responsif di Mobile (Sidebar otomatis tutup/overlay). Gunakan Bootstrap 5 dan FontAwesome. Avatar user memakai Logo Sekolah dari Config.

Tolong berikan 2 kode terpisah:
1. Kode backend lengkap (Kode.gs) dengan fungsi doPost() sebagai API. Pastikan semua struktur block try...catch...finally menggunakan line break yang benar agar tidak error saat di-copy paste ke web editor Apps Script.
2. Kode frontend XML lengkap untuk di-paste ke Tema Blogger, lengkap dengan fungsi fetch() text/plain untuk menangani masalah CORS.

Opsi 2: Metode Copy-Paste Langsung (Siap Pakai)

Jika Anda tidak ingin repot, Anda bisa langsung mengunduh kode siap pakai (Production Ready) v9.8 di bawah ini. Ikuti panduannya langkah demi langkah dengan teliti agar tidak terjadi error.

Langkah 1: Setup Backend (Google Sheets & Appscript)

DOWNLOAD KODE .GS (BACKEND)

*Direct Download File Kode Google Apps Script*

  1. Buka Google Sheets dan buat *Spreadsheet* kosong baru.
  2. Klik menu Ekstensi > Apps Script.
  3. Hapus semua kode bawaan yang ada di layar. Buka file Kode.gs yang baru saja Anda download menggunakan Notepad, copy semua isinya, lalu paste (tempel) ke dalam editor Apps Script.
  4. Klik tombol Terapkan (Deploy) di pojok kanan atas > Deployment Baru.
  5. Pilih jenis Aplikasi Web (Web App). Atur akses jalankan sebagai: Saya, dan Siapa yang memiliki akses: Semua Orang (Anyone).
  6. Klik Terapkan dan lakukan otorisasi izin email. Setelah selesai, Anda akan mendapatkan URL Aplikasi Web (Web App URL). Salin URL tersebut!

Langkah 2: Setup Frontend (Blogger Theme)

Penting: Kode tema XML ini akan menimpa tema blog Anda secara keseluruhan. Sangat disarankan untuk membuat Blog Baru khusus untuk menampung aplikasi ini.
DOWNLOAD TEMA XML BLOGGER v9.8

*Direct Download File XML Tema Premium*

  1. Masuk ke dasbor Blogger Anda.
  2. Pilih menu Tema, lalu klik tanda panah bawah di sebelah tombol Sesuaikan. Pilih Edit HTML.
  3. Hapus semua kode bawaan blogger, lalu buka file XML yang Anda download tadi menggunakan Notepad. Paste seluruh isinya ke editor HTML Blogger.
  4. Scroll (gulir) kursor Anda sampai ke bagian paling bawah. Temukan kode ini (sekitar baris 600-an):
    const GAS_URL = "https://script.google.com/macros/s/AKfy..._GANTI_URL_INI/exec";
  5. Ganti teks URL tersebut dengan URL Aplikasi Web (Web App URL) yang Anda dapatkan dari Langkah 1 sebelumnya. Pastikan tanda kutipnya "..." tidak terhapus.
  6. Klik tombol Simpan Tema (Save) di pojok kanan atas. Selesai! Buka URL Blog Anda untuk mencoba aplikasinya.
💡 Catatan Keamanan & Hak Cipta:
Tema ini dilindungi oleh watermark lisensi pencipta ("Desain oleh Yefri Haryanto"). Mohon untuk tidak menghapus baris footer tersebut. '