Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Aplikasi / Berita / Buku / computer / Download / editor / hikmah / INTERNET / kreatif / trik komputer / Website / Windows

Contoh Script atau Kode Pemrograman Absensi Menggunakan QR Barcode

Posting Komentar



Contoh Script HTML + JavaScript untuk Aplikasi Absensi scan QR Code dan dikirim hasilnya ke server lewat file absensi_siswa.php, yang nantinya menyimpan ke database MySQL.

Berikut alurnya:

  1. HTML untuk menampilkan kamera dan hasil scan.

  2. JavaScript untuk membaca QR Code (pakai library scanner).

  3. Mengirim hasil scan ke absensi_siswa.php lewat AJAX (tanpa reload halaman).


  • Buatlah File Index.HTML
!DOCTYPE html
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Absensi QR Code</title>
    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
    <style>
        #reader {
            width: 300px;
            margin: auto;
        }
        #result {
            margin-top: 20px;
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>

<h2 style="text-align:center;">Absensi Siswa QR Code</h2>

<div id="reader"></div>
<div id="result"></div>

<script>
// Inisialisasi scanner
function onScanSuccess(decodedText, decodedResult) {
    document.getElementById('result').innerHTML = `QR Code: ${decodedText}`;

    // Kirim data ke server
    fetch('absensi_siswa.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'qrcode=' + encodeURIComponent(decodedText)
    })
    .then(response => response.text())
    .then(data => {
        alert(data); // Tampilkan respon dari server
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function onScanError(errorMessage) {
    // Bisa abaikan error scanning kecil
    console.warn('Scan error:', errorMessage);
}

// Mulai scanner
let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", 
    { fps: 10, qrbox: 250 }
);
html5QrcodeScanner.render(onScanSuccess, onScanError);
</script>

</body>
/html

  • Buatlah File SQL
  • Cara membuat file MySQL
CREATE DATABASE absensi;
USE absensi;

CREATE TABLE absensi_siswa (
    id INT AUTO_INCREMENT PRIMARY KEY,
    qrcode TEXT,
    waktu DATETIME DEFAULT CURRENT_TIMESTAMP
);

  • Buatlah File Absensi.PHP
?php
// Konfigurasi database
$host = "localhost";
$user = "root";
$pass = "";
$db   = "absensi";

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

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

// Tangkap data dari POST
if (isset($_POST['qrcode'])) {
    $qrcode = $conn->real_escape_string($_POST['qrcode']);

    // Simpan ke tabel
    $sql = "INSERT INTO absensi_siswa (qrcode) VALUES ('$qrcode')";

    if ($conn->query($sql) === TRUE) {
        echo "Absensi berhasil disimpan!";
    } else {
        echo "Gagal menyimpan absensi: " . $conn->error;
    }
} else {
    echo "Data QRCode tidak diterima.";
}

$conn->close();
?
SIMPAN semua file dalam folder htdoc kalau menggunakan Xampp atau Folder WWW kalau menggunakan Aplikasi WAN,usahakan diakses menggunakan protokol HTTPS://

UNTUK membuat QR Barcode dapat menggunakan aplikasi atau script ini

@ChatGPT 
Generate script ini adalah hasil trial error bukan dari bootcamp atau webinar disarankan ikut bootcamp y


* Menggunakan Browser Chrome
* Driver Camera telah terinstall

Anda mungkin menyukai postingan ini :

Posting Komentar untuk "Contoh Script atau Kode Pemrograman Absensi Menggunakan QR Barcode"