Buku Informatika Kelas 8 Kurikulum Merdeka (Versi Digital) 2025

👉 Buku Informatika Kelas 8 Kurikulum Merdeka (Versi Digital) 2025
Pastikan perangkat Anda terhubung dengan internet agar dapat mengakses konten dengan lancar.
A plikasi Yasin dan Tahlil terbaik nomor 1 di Google dan Playstore kaya akan fitur dan konten yang bermanfaat untuk amalan sehari-hari u...
Sistem ini dapat ditanam langsung di halaman blog guru atau website sekolah tanpa perlu hosting atau server khusus, untuk demonya anda bisa kunjungi halaman ini https://www.mrmung.com/p/ijazah.html.
File Google Sheet Anda harus memiliki kolom seperti ini:
| nis | token | nama | sekolah | idfile | |------|-------|---------------|------------------------|---------------------| | 1234 | 123 | Amin Mungamar | SMP Negeri 1 Indonesia | 1a2b3c4d5e6f7g8h9ij |
idfile adalah ID file PDF dari Google Drive, bukan seluruh link.
const csvURL = 'URL_CSV_DISINI';dengan link CSV Google Sheet yang telah dipublikasikan.
Di era digital saat ini, kebutuhan akan sistem absensi yang cepat, mudah diakses, dan terintegrasi menjadi sangat penting, terutama bagi lembaga pendidikan. Dalam artikel ini, kita akan membuat sistem absensi online yang modern dan responsif, dengan AI Canva atau HTML sebagai tampilan depan dan Google Sheets sebagai basis data backend menggunakan Google Apps Script.
Buatkan file .gs dengan fungsi doGet(e) sebagai endpoint Web App.1. Konfigurasi Awal:Definisikan sheetId, studentSheetName (contoh: "Siswa"), dan attendanceSheetName (contoh: "Absensi"). Pandu pengguna untuk mengganti sheetId sesuai Spreadsheet mereka.2. GET action = 'getStudentData':- Akses sheet studentSheetName.- Baca data, baris pertama = header (misal: NO, NAMA, NIS, KELAS).- Ubah ke array objek JSON.- Jika sheet kosong atau hanya header, kembalikan [].- Jika sheet tidak ditemukan, kembalikan {"status":"error", "message":"Sheet Data Siswa tidak ditemukan!"}.- Return data JSON sebagai ContentService.createTextOutput(...).setMimeType(...).- GET untuk Absensi (selain getStudentData):- Akses sheet attendanceSheetName.- Ambil & validasi parameter: NO, NAMA, NIS, KELAS, KEHADIRAN, TANGGAL.- Jika tidak lengkap, kembalikan JSON error.- Simpan data ke sheet dengan new Date() sebagai timestamp.- Kembalikan {"status":"success", "message":"Absensi berhasil dicatat!"}.
📌 Ganti sheetId dengan ID Spreadsheet Anda.
Contoh: https://docs.google.com/spreadsheets/d/1CwAIYUB7aelqNe5LKHrJ9xzx1B2mJSiYT03rAdA8fwA/edit
ID Spreadsheet adalah: 1CwAIYUB7aelqNe5LKHrJ9xzx1B2mJSiYT03rAdA8fwA
Salin prompt di bawah ini untuk minta dibuatkan AI Canva:
Buatkan saya kode HTML lengkap untuk sistem absensi online. Perhatikan poin-poin berikut untuk memastikan fungsionalitas pengiriman data berjalan dengan benar, mengingat masalah respons JSON dari backend yang sering terjadi:
1. Struktur Halaman:
- Sertakan <select> dengan id="classFilter" untuk memfilter kelas dari data siswa.
- Tampilkan tabel dengan id="studentTableBody" yang memiliki kolom: No., Nama, NIS, Kelas, Kehadiran, dan Aksi.
- Setiap baris siswa dalam tabel harus memiliki tombol-tombol H, I, S, A (Hadir, Izin, Sakit, Alfa) untuk mencatat kehadiran.
- Setiap tombol absensi harus memiliki data-attributes berikut: data-no, data-nama, data-nis, data-kelas, dan data-status.
2. Konfigurasi JavaScript:
Definisikan konstanta SCRIPT_URL sebagai endpoint Google Apps Script Anda: https://script.google.com/macros/s/WEBAP-ID/exec.
3. Fungsi Pengambilan Data (fetchStudentData):
- Buat fungsi fetchStudentData() untuk mengambil data siswa dari SCRIPT_URL dengan parameter ?action=getStudentData.
- Setelah menerima respons, validasi bahwa respons adalah array objek JSON yang valid, lalu simpan ke variabel global (misalnya studentsData) dan panggil populateClassFilter() dan renderStudents().
4. Fungsi Filter dan Render (populateClassFilter, renderStudents):
- Implementasikan populateClassFilter() untuk mengisi opsi dropdown filter kelas secara dinamis dari data siswa yang tersedia.
- Implementasikan renderStudents() untuk menampilkan data siswa ke dalam studentTableBody, dengan mempertimbangkan filter kelas yang dipilih.
5. Fungsi Pengiriman Absensi (handleAttendanceClick):
- Buat fungsi handleAttendanceClick(event) yang dipicu saat tombol kehadiran diklik.
- Dalam fungsi ini, ambil data siswa (no, nama, nis, kelas, status) dari event.currentTarget.dataset.
- PENTING - Perbaikan Masalah Respons: Kirim data absensi ke SCRIPT_URL menggunakan permintaan GET dengan parameter yang persis sama dengan yang diharapkan oleh Google Apps Script Anda (doGet(e)). Pastikan semua nama parameter HURUF KAPITAL dan cocok: action=Absensi, NO=..., NAMA=..., NIS=..., KELAS=..., KEHADIRAN=..., (Gunakan KEHADIRAN, bukan STATUS), TANGGAL=... (Pastikan format tanggal YYYY-MM-DD dan disertakan)
- PENTING - Penanganan Respons Backend: Setelah fetch respons dari SCRIPT_URL, parse respons sebagai JSON. Periksa status pengiriman berdasarkan properti status dalam objek JSON yang dikembalikan (misalnya, if (result.status === 'success')). Jangan asumsikan adanya properti success yang berdiri sendiri.
- Perbarui status kehadiran siswa di tabel UI secara real-time setelah pengiriman sukses.
6. Sistem Notifikasi (showMessage):
Buat fungsi showMessage(msg, type) untuk menampilkan notifikasi sukses/gagal yang responsif di bagian atas halaman (gunakan animasi slide-in/fade-out). type bisa 'success' atau 'error'.
7. Desain dan Responsivitas:
- Gunakan Tailwind CSS untuk styling.
- Pastikan tata letak responsif untuk perangkat seluler dan desktop.
- Terapkan gaya modern dan clean, seperti penggunaan kartu, bayangan, dan rounded corners.
- Sertakan indikator loading saat data sedang diambil atau dikirim.
Sistem absensi online ini adalah solusi ringan dan powerful, cocok untuk sekolah atau komunitas kecil. Dengan integrasi antara Canva (atau HTML custom) sebagai front end dan Google Apps Script sebagai backend, Anda bisa membangun sistem real-time tanpa biaya server. Selamat mencoba.
Simak video panduan DISINI.