Pendahuluan
Di era digital ini, proses absensi manual menggunakan kertas sudah mulai terasa kuno, tidak efisien, dan rentan terhadap kesalahan. Salah satu solusi modern yang bisa diterapkan adalah sistem absensi digital menggunakan QR Code. Dalam tutorial ini, kita akan membahas cara membuat sistem absensi siswa yang canggih hanya dengan modal Google Sheets dan Google Apps Script. Siswa cukup menunjukkan QR Code unik mereka, dan guru bisa melakukan scan menggunakan smartphone biasa untuk mencatat kehadiran secara otomatis. Mari kita mulai!
Apa Saja yang Dibutuhkan?
Sebelum memulai, pastikan Anda memiliki semua yang dibutuhkan. Kabar baiknya, semuanya gratis!
- ✅ Akun Google: Untuk mengakses Google Sheets dan Apps Script.
- ✅ Google Sheets: Sebagai database untuk menyimpan data siswa dan log absensi.
- ✅ Komputer/Laptop: Untuk melakukan pengaturan awal.
- ✅ Smartphone dengan Kamera: Untuk digunakan sebagai alat pemindai (scanner).
Langkah 1: Menyiapkan Database di Google Sheets
Langkah pertama adalah membuat "otak" dari sistem kita, yaitu sebuah file Google Sheets yang akan menampung semua data.
- Buka Google Sheets dan buat spreadsheet baru. Beri nama, misalnya, "Sistem Absensi Sekolah".
- Buat dua sheet. Ganti nama sheet pertama menjadi "Database Siswa" dan sheet kedua menjadi "Log Absensi".
-
Di sheet "Database Siswa", buat kolom berikut:
ID_Siswa,Nama_Lengkap,Kelas, danQR_Code. Isi data siswa di bawahnya. -
Di sheet "Log Absensi", buat kolom berikut:
Timestamp,ID_Siswa,Nama_Lengkap, danKeterangan.
Langkah 2: Membuat QR Code Unik untuk Setiap Siswa
Kita akan membuat QR Code secara otomatis langsung di dalam Google Sheets.
- Kembali ke sheet "Database Siswa".
-
Di sel pertama kolom
QR_Code(misalnya sel D2), masukkan formula berikut:
=IMAGE("https://api.qrserver.com/v1/create-qr-code/?size=300x300&data="&A2)- Tekan Enter, lalu seret formula tersebut ke bawah untuk membuat QR Code bagi semua siswa.
Langkah 3: Menulis Kode Ajaib di Google Apps Script
Sekarang kita akan membuat aplikasi web yang akan berfungsi sebagai scanner.
- Dari menu Google Sheets, buka Ekstensi > Apps Script.
- Anda akan melihat dua file. Pastikan isinya sesuai dengan kode di bawah ini.
1. Kode untuk Code.gs (Logika Server)
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function recordAttendance(studentId) {
try {
var sheetSiswa = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Database Siswa");
var sheetLog = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Log Absensi");
var dataSiswa = sheetSiswa.getDataRange().getValues();
var studentName = null;
for (var i = 1; i < dataSiswa.length; i++) {
if (dataSiswa[i][0] == studentId) {
studentName = dataSiswa[i][1];
break;
}
}
if (studentName) {
sheetLog.appendRow([new Date(), studentId, studentName, "Hadir"]);
return "BERHASIL: Absensi untuk " + studentName + " telah dicatat.";
} else {
return "GAGAL: ID Siswa '" + studentId + "' tidak ditemukan di database.";
}
} catch (e) {
return "ERROR: Terjadi kesalahan pada sistem. " + e.toString();
}
}
2. Kode untuk Index.html (Tampilan Scanner di HP)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Scanner Absensi</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
<style>
body { font-family: sans-serif; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #333; color: white; }
#video-container { position: relative; width: 100%; max-width: 600px; }
video { width: 100%; height: auto; display: block; }
#canvas { display: none; }
#result { position: fixed; bottom: 20px; left: 10px; right: 10px; padding: 15px; text-align: center; font-weight: bold; border-radius: 8px; z-index: 10; }
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }
.info { background-color: #fff3cd; color: #856404; }
</style>
</head>
<body>
<div id="video-container">
<video id="video" playsinline></video>
<canvas id="canvas"></canvas>
</div>
<div id="result" class="info">Memulai kamera...</div>
<script>
const video = document.getElementById('video');
const canvasElement = document.getElementById('canvas');
const canvas = canvasElement.getContext('2d');
const resultDiv = document.getElementById('result');
let scanning = true;
function startCamera() {
scanning = true;
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true);
video.play();
requestAnimationFrame(tick);
})
.catch(function(err) {
resultDiv.innerText = "Error Kamera: " + err.message;
resultDiv.className = 'error';
});
}
function tick() {
if (!scanning) return;
if (video.readyState === video.HAVE_ENOUGH_DATA) {
resultDiv.innerText = "Arahkan kamera ke QR Code Siswa";
resultDiv.className = 'info';
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code) {
scanning = false;
resultDiv.innerText = `Memproses ID: ${code.data}...`;
resultDiv.className = '';
google.script.run.withSuccessHandler(updateResult).recordAttendance(code.data);
}
}
if(scanning) {
requestAnimationFrame(tick);
}
}
function updateResult(message) {
resultDiv.innerText = message;
if (message.startsWith("BERHASIL")) {
resultDiv.className = 'success';
} else {
resultDiv.className = 'error';
}
setTimeout(() => {
startCamera();
}, 3000);
}
startCamera();
</script>
</body>
</html>Langkah 4: Publikasikan Aplikasi Web
Setelah kode siap, kita perlu mempublikasikannya agar bisa diakses melalui link.
- Di editor Apps Script, klik tombol Deploy > Penerapan baru.
- Pilih jenis "Aplikasi Web".
- Pada bagian "Siapa yang memiliki akses", ubah menjadi "Siapa saja" (Anyone).
- Klik Deploy, berikan izin akses jika diminta.
- Salin dan simpan URL Aplikasi Web yang diberikan. Link inilah yang akan Anda gunakan untuk scan.
Kesimpulan
Selamat! Anda telah berhasil membuat sistem absensi QR Code yang fungsional dan modern. Sistem ini tidak hanya mengurangi penggunaan kertas, tetapi juga meningkatkan akurasi dan efisiensi pencatatan kehadiran. Anda bisa mengembangkan lebih lanjut dengan menambahkan fitur-fitur lain sesuai kebutuhan. Semoga tutorial ini bermanfaat!
