KONSEP ARSITEKTUR: APLIKASI GAJI GURU WEB (SERVERLESS)

1. Arsitektur Sistem (The Stack)

Aplikasi ini menggunakan model Serverless Full-Stack, yang memisahkan antara tampilan, logika pemroses, dan penyimpanan data menggunakan layanan Google secara gratis.

Frontend (Tampilan Depan): Blogger (Platform hosting HTML/JS gratis, aman dari downtime, dan memiliki nilai SEO/PageSpeed yang luar biasa cepat).
Backend (Logika Server): Google Apps Script / GAS (Berfungsi sebagai REST API yang menerima dan mengirim data).
Database (Penyimpanan): Google Sheets (Mudah dipantau secara visual oleh klien, bisa di- backup manual dengan mudah, dan gratis).

2. Pilihan Teknologi (Library)

Untuk menjaga aplikasi tetap ringan (lightweight) namun profesional:

Desain UI: TailwindCSS (via CDN). Memungkinkan pembuatan desain modern, minimalis, dan responsif langsung di dalam HTML tanpa file CSS terpisah.
Pemroses Excel: SheetJS (xlsx). Paling tangguh untuk membaca (import) dan menulis (export) file Excel murni langsung dari browser klien tanpa membebani server.
Mesin Cetak PDF: jsPDF dipadukan dengan jsPDF-AutoTable. Ini adalah solusi mutlak untuk mencetak tabel dengan puluhan kolom (menghindari tabel terpotong) dengan merender file sebagai vektor/teks murni, bukan sekadar screenshot layar.

3. Topologi Database (Google Sheets)

Aplikasi membagi data menjadi 4 Sheet utama untuk memisahkan konteks data:

MASTER_GURU: Menyimpan data identitas pokok (Nama, TMT, Harga Tunjangan, Satmikal). Berlaku sebagai Relational Key.
REKAP_GAJI: Menyimpan seluruh transaksi bulanan aktif (JP, Potongan, Honor). Menyimpan nama lembaga (KB, TK, MI, dst) di kolom khusus agar data 5 lembaga cukup ditampung di 1 tabel.
KARYAWAN_YAYASAN: Menyimpan data khusus untuk pengurus di luar honor mengajar (Tipe Guru/Non-Guru, Jabatan, Nominal).
LAPORAN_ARSIP: Tabel canggih untuk membekukan (freeze) data. Menyimpan seluruh data JSON dari satu bulan tertentu dalam satu sel, agar bisa dipanggil kembali kapan saja tanpa merusak data bulan aktif.

4. Konsep Manajemen State & Sinkronisasi Data

Ini adalah urat nadi aplikasi yang membuatnya terasa sangat cepat dan anti-lag:

Single Source of Truth di Klien: Aplikasi sangat bergantung pada localStorage. Saat aplikasi dibuka, aplikasi membaca localStorage untuk langsung menampilkan layar tanpa menunggu loading dari Google Sheet.
Background Sync (Sinkronisasi Latar Belakang): Bersamaan dengan membaca data lokal, fungsi fetch() diam-diam memanggil data terbaru dari Google Sheet. Jika ada perbedaan, data lokal diperbarui dan UI di- refresh.
Metode Simpan Terbalik: Saat user mengeklik "Simpan", aplikasi menyimpan data ke localStorage terlebih dahulu agar antarmuka langsung update, baru kemudian mengirim fungsi Push ke Google Sheet melalui API.

5. Teknik Bypass Keamanan Browser (CORS)

Karena Frontend (Blogger) dan Backend (Google Script) berada di domain yang berbeda, browser selalu memblokir pengiriman data kompleks.

Solusi Pedoman: Selalu gunakan mode: "no-cors" dipadukan dengan Content-Type: "text/plain" pada fungsi fetch POST Anda. Kirim data dalam bentuk String JSON, lalu Parsing kembali menjadi Object JSON di dalam Kode.gs. Ini adalah kunci rahasia lolos blokir CORS.

6. Pola Navigasi Single Page Application (SPA)

Agar aplikasi terasa mahal seperti aplikasi desktop atau iOS/Android asli:

Aplikasi tidak pernah me- reload (muat ulang) halaman web.
Setiap halaman dibungkus dalam div besar dengan awalan view- (misal: view-menu, view-guru, view-yayasan).
Navigasi dilakukan menggunakan satu fungsi JavaScript pusat yang bertugas menambahkan class sembunyikan-halaman (berisi display: none) ke semua view, lalu menghapus class tersebut hanya pada view yang ingin dibuka.

7. Logika Pemrosesan Multi-Relasi (Dashboard & Slip Gaji)

Untuk menghindari duplikasi dan membuat slip gaji yang kompleks:

Array Filtering: Aplikasi mengumpulkan data mentah, lalu menggunakan fungsi filter (misal: mencari data di mana nama === 'Agus') dari semua lembaga.
Objek Gabungan (Grouping): Saat memuat Laporan Yayasan, aplikasi membuat satu variabel Objek Kosong {}, lalu melakukan iterasi (looping) dari seluruh tabel lembaga dan karyawan. Jika nama belum ada, buat ruang baru; jika nama sudah ada, tambahkan nominal gajinya (Accumulation).
Batas Logika Matematis: Untuk kasus seperti batas maksimal masa kerja, gunakan logika Ternary Operator simpel sebelum menyimpan data: masaKerjaDiakui = masaKerjaAktual > batasMaksimal ? batasMaksimal : masaKerjaAktual.

8. Modul Laporan & Pengarsipan Dinamis

Data Aktif vs Data Beku: Data yang ada di tabel Input Lembaga adalah "Data Bulan Ini" yang terus bergerak dan diedit.
Sistem Beku Data (Archive): Saat mengeklik "Simpan Laporan Bulanan", aplikasi mengambil snapshot (tangkapan layar memori) dari array JSON saat itu juga, lalu mengubahnya menjadi string teks panjang untuk dikirim ke Sheet LAPORAN_ARSIP. Saat dipanggil ulang, teks tersebut dikonversi kembali ke tabel visual.

🔥 Catatan Emas Untuk Proyek Anda Selanjutnya:

Selalu mulai dari Backend: Buat struktur Sheet dan Google Apps Script-nya (doPost & doGet) terlebih dahulu, pastikan format JSON keluar-masuknya sudah benar.
Buat Kerangka Statis: Rancang HTML/Tailwind-nya secara statis di komputer lokal sebelum menambahkan JavaScript. Pastikan secara visual desainnya elegan dan tata letaknya responsif.
Gunakan ID yang Disiplin: Seperti yang kita lakukan, gunakan prefix penamaan yang rapi seperti guru_nama, kb_jp, slip_txt_bersih agar tidak pusing saat file JavaScript membesar.
Siapkan Template Excel Dinamis: Fitur import/export adalah fitur yang membuat aplikasi Anda terasa memiliki kualitas "Enterprise". Selalu gunakan format array of arrays [ [] ] pada SheetJS.

Konsep Arsitektur Aplikasi Gaji Guru Berbasis Web (Cloud Google Sheet)