Daftar

Membuat sistem Check In menggunakan QR Code dengan PHP MySQL

1. Pendahuluan

Absensi digital semakin populer karena lebih praktis dibanding metode manual. Salah satu metode yang efektif adalah absensi QR code, di mana pengguna cukup memindai kode unik untuk mencatat kehadirannya.

2. Kenapa Menggunakan QR Code untuk Absensi?

  • Cepat & praktis: tidak perlu input manual.
  • Aman: setiap orang punya QR unik.
  • Mudah diintegrasikan: bisa digunakan dengan aplikasi web sederhana.

3. Gambaran Sistem Absensi QR Code

Alur kerja sederhana: 

[Admin Buat QR Code] → [User Scan QR Code] → [Data Masuk ke Database] → [Laporan Absensi]

4. Persiapan Tools dan Teknologi

  • PHP & MySQL → untuk backend & database absensi.
  • Library QR Code (misalnya PHP QR Code) → untuk membuat QR. Kalian bisa install PHP QR Code disini.
  • Scanner → bisa pakai kamera HP (via web/app).
  • JavaScript Library (html5-qrcode) → untuk membaca QR langsung dari browser.

5. Implementasi Langkah demi Langkah

5.1 Instalasi tools PHP QR Code

Setelah download PHP QR Code → ekstrak folder → letakkan di dalam folder project kamu.

Lalu di file PHP cukup panggil :

include "phpqrcode/qrlib.php";

5.2 Membuat Database Absensi

Masuk ke dalam file laragon di Laptop/PC kamu

laragon → bin → mysql → mysql-8.0.30-winx64 → bin

klik path bar kemudian ketikkan cmd untuk masuk ke command prompt. Ketikkan command :

mysql -u root -p
create database qr_absensi

Kemudian buatlah tabel absensi di dalam database kalian dengan mengetikkan command berikut

5.3 Implementasi Kode

Struktur file di project kalian nantinya akan seperti ini :

Folder qrcodes nantinya akan menjadi tempat hasil scan qr tersimpan

Buat file koneksi db.php 

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db   = "nama_database";

$koneksi = new mysqli($host, $user, $pass, $db);

if ($koneksi->connect_error) {
    die("Koneksi gagal: " . $koneksi->connect_error);
}
?>

5.4 Membuat Generator QR Code untuk setiap user

Masukkan kode berikut ke dalam generate.php

<?php
require "phpqrcode/qrlib.php";
require "db.php";

if (!file_exists('qrcodes')) {
    mkdir('qrcodes');
}

$sql = "SELECT * FROM users";
$result = $koneksi->query($sql);

if (!$result) {
    die("Query error: " . $koneksi->error);
}

while ($row = $result->fetch_assoc()) {
    $qrText = $row['id']; // isi QR: id siswa
    $filePath = "qrcodes/" . $row['id'] . ".png";

    QRcode::png($qrText, $filePath, QR_ECLEVEL_L, 5);

    echo "QR untuk " . $row['id'] . " (" . $row['nama'] . ") berhasil dibuat! <br>";
    echo "<img src='$filePath'><br><br>";
}

5.5 Membuat Halaman Scan QR Code

Masukkan kode berikut ke dalam index.php

<!DOCTYPE html>
<html>
<head>
    <title>Scan QR Code untuk Check In</title>
    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
    <style>
        #reader {
            width: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
    <h2>Scan QR Code untuk Absensi</h2>

    <div id="reader"></div>
    <p>Hasil Scan: <span id="result"></span></p>
    <div id="absensi-list"></div> <!-- Tambahkan ini -->

    <script>
        function loadAbsensi() {
            fetch("lihat_data.php")
                .then(response => response.text())
                .then(html => {
                    document.getElementById("absensi-list").innerHTML = html;
                });
        }

        function onScanSuccess(decodedText, decodedResult) {
            document.getElementById("result").textContent = decodedText;

            fetch("scan.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: "id=" + encodeURIComponent(decodedText)
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                loadAbsensi(); // Refresh data absensi setelah scan
            });
        }

        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess);

        // Tampilkan data absensi saat halaman pertama kali dibuka
        loadAbsensi();
    </script>
</body>
</html>

Masukkan kode ini ke dalam lihat_data.php

<?php
include 'db.php';

// ambil semua data absensi
$sql = "SELECT * FROM absensi ORDER BY waktu DESC";
$result = mysqli_query($koneksi, $sql);
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Data Absensi</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h2>📋 Data Absensi</h2>
    <table>
        <tr>
            <th>ID</th>
            <th>Nama</th>
            <th>Waktu</th>
        </tr>
        <?php while ($row = mysqli_fetch_assoc($result)) { ?>
            <tr>
                <td><?= $row['id_absensi']; ?></td>
                <td><?= $row['nama']; ?></td>
                <td><?= $row['waktu']; ?></td>
            </tr>
        <?php } ?>
    </table>
</body>
</html>

masukkan kode ini ke dalam scan.php 

<?php
require "db.php";

if (isset($_POST['id'])) {
    $id = $koneksi->real_escape_string($_POST['id']); // ID dari QR

    $result = $koneksi->query("SELECT nama FROM users WHERE id='$id'");

    if ($result && $result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $nama = $row['nama'];

        // Insert ke absensi dengan id, nama, waktu
        $insert = $koneksi->query("INSERT INTO absensi (nama, waktu) VALUES ('$nama', NOW())");

        if ($insert) {
            echo json_encode(["success"=>true, "message"=>"Absensi berhasil!"]);
        } else {
            echo json_encode(["success"=>false, "message"=>"Gagal menyimpan absensi: " . $koneksi->error]);
        }
    } else {
        echo json_encode(["success"=>false, "message"=>"ID tidak ditemukan!"]);
    }
} else {
    echo json_encode(["success"=>false, "message"=>"Tidak ada data diterima!"]);
}

Masukkan kode ke dalam simpan.php

<?php
include 'db.php';

if (isset($_POST['nama'])) {
    $nama = $_POST['nama'];

    // simpan ke database
    $sql = "INSERT INTO absensi (nama, waktu) VALUES ('$nama', NOW())";
    if (mysqli_query($koneksi, $sql)) {
        echo "Absensi berhasil untuk $nama";
    } else {
        echo "Gagal menyimpan absensi!";
    }
} else {
    echo "Data nama tidak ditemukan!";
}

6. Uji Coba Sistem

  1. Admin generate QR Code untuk semua user.
  2. User scan QR Code dengan kamera HP.
  3. Data absensi langsung masuk ke database.
  4. Cek laporan absensi di tabel MySQL atau dashboard.

Contoh Halaman Scan QR dan Data Absensi :

7. Keuntungan & Tantangan

Keuntungan:

  • Tidak perlu login manual.
  • Akses cepat via kamera HP.
  • Mudah diintegrasikan ke dashboard.

Tantangan:

  • Membutuhkan kamera perangkat.
  • QR Code bisa dibagikan, sehingga perlu validasi tambahan (misalnya lokasi atau device ID).

8. Kesimpulan

Kalian bisa upgrade project ini, karna source code di atas masih dalam tahap awal dan hanya dapat digunakan untuk sistem absensi atau check-in dengan validasi tambahan melalui penjaga. Dimana nantinya, QR code milik pengguna akan dipindai oleh petugas sebagai bentuk verifikasi.

Kalian juga dapat mengembangkan lagi tampilan untuk scan QR nya ataupun tabel data sesuai kebutuhan kalian.

Sistem Absensi berbasis QR Code ini adalah solusi sederhana namun efektif untuk kehadiran digital. Dengan PHP, MySQL, dan library QR/Scanner, sistem ini dapat dibangun dengan cepat dan dapat dikembangkan lebih lanjut ke fitur laporan otomatis, validasi lokasi (GPS), atau bahkan integrasi dengan WhatsApp/Telegram.

Tags:

Post comment

Your email address will not be published. Required fields are marked *