Info Penting

Aplikasi Yasin dan Tahlil No 1 di Google dan Playstore

A plikasi Yasin dan Tahlil terbaik nomor 1 di Google dan Playstore kaya akan fitur dan konten yang bermanfaat untuk amalan sehari-hari u...

Info Penting

Artikel Terbaru

Buku Informatika Kelas 8 Kurikulum Merdeka (Versi Digital) 2025

Silakan akses buku elektronik melalui tautan di bawah ini. Buku ini diterbitkan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia sebagai bahan ajar resmi untuk mata pelajaran Informatika kelas 8.

👉 Buku Informatika Kelas 8 Kurikulum Merdeka (Versi Digital) 2025

Pastikan perangkat Anda terhubung dengan internet agar dapat mengakses konten dengan lancar.

Buku Informatika Kelas 7 Kurikulum Merdeka (Versi Digital) 2025

Silakan akses buku elektronik melalui tautan di bawah ini. Buku ini diterbitkan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia sebagai bahan ajar resmi untuk mata pelajaran Informatika kelas 7.

👉 Buku Informatika Kelas 7 Kurikulum Merdeka (Versi Digital) 2025

Pastikan perangkat Anda terhubung dengan internet agar dapat mengakses konten dengan lancar.

Panduan Implementasi Sistem Cek & Unduh E-Ijazah Otomatis untuk Sekolah (Gratis)

Di era digital, pengelolaan dokumen seperti ijazah dan transkrip nilai kini bisa dilakukan secara online. Sekolah Anda bisa menyediakan layanan Cek dan Unduh e-Ijazah berbasis web dengan menggunakan sistem yang simpel dan gratis, berbasis Google Drive dan kode HTML + JavaScript.

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.


📦 Apa yang Bisa Dilakukan Sistem Ini?

  • Menyediakan form input NIS dan Token
  • Menampilkan data siswa setelah diverifikasi
  • Menampilkan preview PDF ijazah/transkrip
  • Menyediakan tombol Download PDF dan Buka di Tab Baru
  • Semua file tersimpan aman di Google Drive

⚙️ Cara Kerja Sistem:

  1. Data siswa disimpan dalam file CSV Google Sheet.
  2. File CSV dipublikasikan dan diambil otomatis oleh script.
  3. File ijazah/transkrip disimpan di Google Drive berdasarkan ID file, untuk mendapatkan ID file secara otomatis bisa gunakan Apps Script [Download kodenya disini]
  4. Pengguna memasukkan NIS dan Token untuk verifikasi.
  5. Jika cocok, sistem menampilkan data dan link unduhan PDF.

🧩 Contoh Struktur Data CSV

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.

💻 Langkah-langkah Menggunakan Script:

  1. Copy seluruh kode HTML + CSS + JavaScript dari sistem yang tersedia [Download disini].
  2. Ganti bagian:
    const csvURL = 'URL_CSV_DISINI';
    dengan link CSV Google Sheet yang telah dipublikasikan.
  3. Upload ijazah/transkrip ke Google Drive dan ambil ID file-nya.
  4. Tanam kode ke halaman blog sekolah atau web sekolah.

🔐 Keamanan Sistem

  • Setiap siswa hanya bisa mengakses dokumen jika memiliki Token yang valid.
  • Token dapat diberikan secara manual oleh pihak sekolah, atau bisa menggunakan tanggal lahir.

📌 Kelebihan Sistem Ini

  • 💡 Gratis, tanpa biaya server atau database
  • 📄 Dapat diakses 24 jam
  • 🔒 Aman dengan verifikasi Token
  • 📱 Bisa diakses dari HP atau laptop
  • 🎨 Tampilan responsif dan bisa dikustom sesuai branding sekolah

Demikian, semoga bermanfaat.
Simak video panduannya DISINI.

Membangun Sistem Absensi Online: Integrasi AI Canva (Front End) dengan Google Sheets (Backend)


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.


Apa yang Akan Dibuat?

  1. Tampilan absensi online berbasis web dengan filter kelas dan tombol kehadiran.
  2. Backend yang terhubung langsung ke Google Sheet untuk menyimpan data siswa dan mencatat kehadiran.
  3. Desain responsif dan modern menggunakan Tailwind CSS.


Langkah 1: Siapkan Backend (Google Apps Script)

  1. Buka Google Spreadsheet buat dua sheet (Siswa dan Absensi)
  2. Klik menu Ekstensi - Apps Script 


  3. Buka Chat GBT atau Gemini tuliskan prompt berikut:
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


Langkah 2: Buat Front-End (HTML + Tailwind CSS)

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.

Aplikasi Konversi Nilai Online - Solusi Praktis untuk Penyesuaian Skala Nilai

Guru dan tenaga pendidik sering kali dihadapkan pada kebutuhan menyesuaikan skala nilai siswa sesuai standar tertentu, misalnya mengubah rentang nilai asli menjadi range yang lebih spesifik (contoh: 70-98). Untuk mempermudah proses ini, kami menghadirkan Aplikasi Konversi Nilai Online berbasis web yang praktis dan efisien. Tanpa perlu instalasi atau database, tool ini memungkinkan Anda mengunggah data nilai dalam format CSV, menentukan target konversi, dan langsung mendapatkan hasil yang akurat dalam hitungan detik.

Dengan antarmuka yang sederhana, fitur deteksi otomatis nilai terendah/tertinggi, serta rumus konversi linear yang presisi, aplikasi ini menjamin hasil sesuai ekspektasi. Hasil konversi dapat langsung disalin atau diunduh untuk keperluan dokumentasi. Cukup upload data, tentukan range target, dan biarkan sistem bekerja untuk Anda!

Konversi Nilai Online

1. Upload Data Nilai

Follow Me

Foto Mr. Mung
ttd Mr. Mung

Tutorial Blogger

Pilih Arsip Blog