Table of Contents

Sistem Absensi QR Code: Cara Mudah Implementasi dengan PHP dan JavaScript

Bayangin lagi meeting penting, terus harus absensi manual pakai kertas yang kemudian data nya harus di-input ulang ke komputer. Ribet banget kan? Atau sistem absensi fingerprint yang antriannya panjang banget setiap pagi. Nah, di era serba digital ini, ada solusi yang jauh lebih elegant: Sistem Absensi QR Code.

Sistem ini bekerja sederhana banget. Setiap karyawan atau siswa cukup scan QR code yang ditampilkan di layar komputer menggunakan smartphone mereka. Dalam hitungan detik, absensi langsung tercatat otomatis ke database. Gak perlu antri, gak perlu sentuh perangkat bersama, dan yang paling penting—data langsung digital dari sumbernya.

Yang bikin tambah menarik, kamu bisa bikin sistem keren ini sendiri dengan modal pengetahuan PHP dan JavaScript dasar. Di panduan lengkap ini, kita akan bangun bersama sistem absensi QR code dari nol sampai bisa dipakai production. Saya janji akan bahas step-by-step dengan code yang bisa langsung kamu coba. Ready to code? Let’s go!

Konsep Dasar Sistem Absensi QR Code

Sebelum terjun ke coding, mari kita pahami dulu bagaimana alur sistemnya bekerja:

Generate QR Code: Sistem menghasilkan QR code unik yang berisi token/ID absensi
Display QR Code: QR code ditampilkan di layar komputer atau monitor
Scan dengan Smartphone: User scan QR code menggunakan kamera smartphone
Verifikasi Data: Sistem memvalidasi QR code dan mencatat absensi
Konfirmasi: User mendapat notifikasi absensi berhasil

Keunggulan sistem ini compared to traditional methods:

Contactless: Aman di era pandemi, tidak perlu sentuh perangkat bersama
Real-time: Data langsung masuk ke database
User-friendly: Hanya butuh smartphone dengan kamera
Cost-effective: Tidak perlu beli hardware khusus
Flexible: Bisa digunakan untuk karyawan, siswa, event, dll

Teknologi yang Kita Butuhkan

Untuk membangun sistem ini, kita akan menggunakan stack teknologi yang sederhana:

Komponen	Teknologi	Fungsi
Backend	PHP + MySQL	Proses data dan penyimpanan
Frontend	HTML, CSS, JavaScript	Antarmuka pengguna
QR Code Generator	QRCode.js	Generate QR code di browser
QR Code Scanner	HTML5 Camera API	Scan QR code via smartphone
Real-time Update	AJAX	Update data tanpa reload halaman

Struktur Database MySQL

Pertama, kita perlu setup database untuk menyimpan data absensi. Buat database dengan nama sistem_absensi kemudian jalankan SQL berikut:

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    nama VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    no_identitas VARCHAR(50) UNIQUE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE sessions (
    id INT PRIMARY KEY AUTO_INCREMENT,
    session_code VARCHAR(50) UNIQUE NOT NULL,
    session_name VARCHAR(100) NOT NULL,
    start_time DATETIME NOT NULL,
    end_time DATETIME NOT NULL,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE attendance (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    session_id INT,
    attendance_time DATETIME DEFAULT CURRENT_TIMESTAMP,
    status ENUM('hadir', 'terlambat', 'alpha') DEFAULT 'hadir',
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (session_id) REFERENCES sessions(id)
);

Implementasi Backend dengan PHP

1. Koneksi Database (config.php)

<?php
$host = 'localhost';
$dbname = 'sistem_absensi';
$username = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("Koneksi database gagal: " . $e->getMessage());
}
?>

2. API untuk Generate Session Absensi (generate_session.php)

<?php
require_once 'config.php';

if ($_POST['action'] == 'generate_session') {
    $session_name = $_POST['session_name'];
    $duration = $_POST['duration']; // dalam menit
    
    // Generate unique session code
    $session_code = uniqid('ABS_');
    
    $start_time = date('Y-m-d H:i:s');
    $end_time = date('Y-m-d H:i:s', strtotime("+$duration minutes"));
    
    try {
        $stmt = $pdo->prepare("INSERT INTO sessions (session_code, session_name, start_time, end_time) VALUES (?, ?, ?, ?)");
        $stmt->execute([$session_code, $session_name, $start_time, $end_time]);
        
        echo json_encode([
            'success' => true,
            'session_code' => $session_code,
            'end_time' => $end_time
        ]);
    } catch(PDOException $e) {
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
    }
}
?>

3. API untuk Record Absensi (record_attendance.php)

<?php
require_once 'config.php';

if ($_POST['action'] == 'record_attendance') {
    $session_code = $_POST['session_code'];
    $user_identifier = $_POST['user_identifier']; // bisa email atau no identitas
    
    try {
        // Cek session validity
        $stmt = $pdo->prepare("SELECT * FROM sessions WHERE session_code = ? AND is_active = true AND end_time > NOW()");
        $stmt->execute([$session_code]);
        $session = $stmt->fetch();
        
        if (!$session) {
            echo json_encode(['success' => false, 'message' => 'Sesi absensi tidak valid atau sudah expired']);
            exit;
        }
        
        // Cek user
        $stmt = $pdo->prepare("SELECT * FROM users WHERE email = ? OR no_identitas = ?");
        $stmt->execute([$user_identifier, $user_identifier]);
        $user = $stmt->fetch();
        
        if (!$user) {
            echo json_encode(['success' => false, 'message' => 'User tidak ditemukan']);
            exit;
        }
        
        // Cek apakah sudah absen
        $stmt = $pdo->prepare("SELECT * FROM attendance WHERE user_id = ? AND session_id = ?");
        $stmt->execute([$user['id'], $session['id']]);
        
        if ($stmt->fetch()) {
            echo json_encode(['success' => false, 'message' => 'Anda sudah melakukan absensi']);
            exit;
        }
        
        // Record attendance
        $stmt = $pdo->prepare("INSERT INTO attendance (user_id, session_id, attendance_time) VALUES (?, ?, NOW())");
        $stmt->execute([$user['id'], $session['id']]);
        
        echo json_encode([
            'success' => true,
            'message' => 'Absensi berhasil dicatat',
            'user_name' => $user['nama'],
            'attendance_time' => date('Y-m-d H:i:s')
        ]);
        
    } catch(PDOException $e) {
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
    }
}
?>

Implementasi Frontend dengan JavaScript

1. Halaman Admin – Generator QR Code (admin.php)

<!DOCTYPE html>
<html>
<head>
    <title>Admin - Generator QR Code Absensi</title>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Generator QR Code Absensi</h1>
        
        <form id="sessionForm">
            <input type="text" name="session_name" placeholder="Nama Sesi (e.g., Absensi Pagi)" required>
            <input type="number" name="duration" placeholder="Durasi (menit)" value="5" required>
            <button type="submit">Generate QR Code</button>
        </form>
        
        <div id="qrcode-container" style="display:none;">
            <h3>Scan QR Code Berikut:</h3>
            <div id="qrcode"></div>
            <p>Session Code: <span id="session-code"></span></p>
            <p>Berlaku sampai: <span id="end-time"></span></p>
        </div>
    </div>

    <script>
    $('#sessionForm').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: 'generate_session.php',
            type: 'POST',
            data: {
                action: 'generate_session',
                session_name: $('[name="session_name"]').val(),
                duration: $('[name="duration"]').val()
            },
            success: function(response) {
                var data = JSON.parse(response);
                if (data.success) {
                    // Generate QR Code
                    var qrContent = JSON.stringify({
                        session_code: data.session_code,
                        server_url: window.location.origin
                    });
                    
                    $('#qrcode').empty();
                    new QRCode(document.getElementById("qrcode"), {
                        text: qrContent,
                        width: 200,
                        height: 200
                    });
                    
                    $('#session-code').text(data.session_code);
                    $('#end-time').text(data.end_time);
                    $('#qrcode-container').show();
                }
            }
        });
    });
    </script>
</body>
</html>

2. Halaman Scan Absensi (scan.php) – Untuk Smartphone

<!DOCTYPE html>
<html>
<head>
    <title>Scan Absensi</title>
    <script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
        #reader { width: 100%; max-width: 400px; margin: 0 auto; }
        #result { margin-top: 20px; padding: 10px; border-radius: 5px; }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <h1>Scan QR Code Absensi</h1>
    <div id="reader"></div>
    <div id="result"></div>
    
    <script>
    function onScanSuccess(decodedText, decodedResult) {
        // Stop scanning setelah berhasil
        html5QrcodeScanner.clear().then(_ => {
            var qrData = JSON.parse(decodedText);
            processAttendance(qrData.session_code);
        });
    }

    function processAttendance(sessionCode) {
        var userIdentifier = prompt("Masukkan email atau NIM/NIK Anda:");
        
        if (!userIdentifier) return;
        
        $.ajax({
            url: 'record_attendance.php',
            type: 'POST',
            data: {
                action: 'record_attendance',
                session_code: sessionCode,
                user_identifier: userIdentifier
            },
            success: function(response) {
                var data = JSON.parse(response);
                var resultDiv = $('#result');
                
                if (data.success) {
                    resultDiv.html(`
                        <div class="success">
                            <h3>Absensi Berhasil!</h3>
                            <p>Nama: ${data.user_name}</p>
                            <p>Waktu: ${data.attendance_time}</p>
                        </div>
                    `);
                } else {
                    resultDiv.html(`
                        <div class="error">
                            <h3>Gagal</h3>
                            <p>${data.message}</p>
                        </div>
                    `);
                }
            }
        });
    }

    // Initialize scanner
    var html5QrcodeScanner = new Html5QrcodeScanner(
        "reader", { fps: 10, qrbox: 250 });
    html5QrcodeScanner.render(onScanSuccess);
    </script>
</body>
</html>

Fitur Keamanan yang Perlu Dipertimbangkan

Sistem absensi perlu dilengkapi dengan mekanisme keamanan agar tidak disalahgunakan:

Session Expiration: QR code hanya berlaku dalam waktu tertentu
Unique Session Codes: Gunakan code unik yang sulit ditebak
Rate Limiting: Batasi jumlah absensi per user per session
IP Tracking: Catat IP address untuk audit trail
SSL Encryption: Gunakan HTTPS untuk mengamankan komunikasi

Cara Menggunakan Sistem yang Telah Dibuat

Setup Database: Import SQL structure yang sudah disediakan
Input Data User: Masukkan data karyawan/siswa ke tabel users
Generate QR Code: Buka admin.php di komputer dan buat sesi absensi
Scan QR Code: Arahkan user ke scan.php di smartphone mereka
Monitor Absensi: Buat halaman dashboard untuk melihat rekapitulasi

Ide Pengembangan Lanjutan

Setelah sistem dasar berjalan, kamu bisa kembangkan dengan fitur-fitur canggih:

Push Notification: Kirim notifikasi ke admin ketika ada absensi baru
Geolocation Verification: Pastikan absensi dilakukan dari lokasi tertentu
Face Recognition: Kombinasi dengan verifikasi wajah untuk keamanan tambahan
Mobile App: Buat aplikasi native untuk experience yang lebih baik
Report Generator: Fitur generate laporan absensi dalam format PDF/Excel

Sistem absensi QR code yang kita bangun ini sudah cukup powerful untuk kebutuhan dasar. Yang paling penting adalah konsepnya sudah berjalan dengan baik. Dari sini, kamu bisa terus mengembangkan sesuai kebutuhan spesifik di lingkunganmu.

Selamat mencoba! Dengan sistem ini, kamu tidak hanya menghemat waktu dan biaya, tapi juga membawa proses absensi ke level yang lebih modern dan efisien. 🚀