Cara Membuat QR Code dan Barcode di Aplikasi Web Berbasis PHP

Saat membuat aplikasi absensi atau inventaris berbasis web, ada satu bagian yang awalnya terlihat sederhana tetapi sering membuat proses input terasa lambat: memasukkan kode secara manual.

Bayangkan setiap barang memiliki kode seperti RL000123. Petugas membuka aplikasi, membaca label, lalu mengetik kode tersebut. Cara ini memang bekerja, tetapi setelah dilakukan berulang kali, risiko salah ketik mulai terasa.

Karena itu saya mulai melihat QR Code dan barcode bukan sekadar gambar yang ditempel pada label. Keduanya sebenarnya adalah cara untuk memasukkan sebuah kode ke aplikasi dengan lebih cepat.

Pada tutorial ini kita akan membuat alur sederhana berbasis web. PHP membuat QR Code, kamera browser membacanya, dan barcode Code 39 digunakan sebagai alternatif label satu dimensi.

Gambaran Sistem yang Akan Kita Buat

Sebelum masuk ke kode, lebih mudah jika kita memahami alurnya terlebih dahulu.

Anggap aplikasi memiliki sebuah kode unik:

RL000123

Kode tersebut disimpan di database. Kita tidak perlu menyimpan gambar QR sebagai data utama dan tidak perlu menyimpan bentuk garis barcode di database.

Data utama tetap:

RL000123

Dari nilai yang sama, aplikasi dapat membuat QR Code atau menampilkannya sebagai Code 39.

Alurnya kira-kira seperti ini:

Kode unik
    ↓
Database
    ↓
QR Code / Barcode
    ↓
Kamera atau scanner
    ↓
Kode kembali dibaca
    ↓
PHP mencari data

Pola seperti ini banyak dipakai dalam tutorial QR dinamis berbasis PHP: data disiapkan sebagai string, library membuat QR, lalu hasil pembacaan digunakan kembali oleh aplikasi.

Library yang Kita Gunakan

Agar tutorial tidak melebar ke banyak library, kita hanya menggunakan tiga komponen.

Menempatkan PHP QR Code di Project

Salah satu pola yang sering ditemukan pada tutorial PHP QR Code adalah mengunduh library, menyalinnya ke dalam project, kemudian memanggil file qrlib.php.

Pada project saya, library ditempatkan di:

C:\xampp\htdocs\absensi\libs\phpqrcode

File yang kita gunakan adalah:

C:\xampp\htdocs\absensi\libs\phpqrcode\qrlib.php

Struktur sederhananya:

absensi
│
├── libs
│   ├── phpqrcode
│   │   ├── qrlib.php
│   │   └── file library lainnya
│   │
│   └── qr-scanner-master
│
├── uploads
└── index.php

Jika folder project Anda berbeda, tidak masalah. Yang penting path pada require_once mengarah ke file qrlib.php yang benar.

Membuat QR Code Pertama dengan PHP

Kita mulai dari contoh paling kecil.

Buat file PHP, misalnya:

buat_qr.php

Isi dengan kode berikut:

<?php

require_once __DIR__ . '/libs/phpqrcode/qrlib.php';

$qr_key = 'RL000123';

QRcode::png($qr_key);

?>

Buka file tersebut melalui browser.

Jika library dan path sudah benar, browser akan menerima output QR Code.

Contoh ini mengikuti pola dasar API PHP QR Code: memanggil qrlib.php lalu menggunakan method QRcode::png(). Dokumentasi class PHP QR Code memang menyediakan class QRcode sebagai class utama untuk membuat QR.

Menyimpan QR Code sebagai File PNG

Menampilkan QR langsung di browser cocok untuk pengujian. Namun pada aplikasi inventaris atau absensi, kita biasanya membutuhkan file QR untuk ditampilkan kembali atau dicetak.

PHP QR Code mendukung output PNG. Pada parameter output, kita dapat memberikan nama file tujuan.

<?php

require_once __DIR__ . '/libs/phpqrcode/qrlib.php';

$qr_key = 'RL000123';

$folder = __DIR__ . '/uploads/qrcode/';

if (!is_dir($folder)) {
    mkdir($folder, 0777, true);
}

$file = $folder . $qr_key . '.png';

QRcode::png(
    $qr_key,
    $file,
    QR_ECLEVEL_H,
    8,
    2
);

?>

Setelah script dijalankan, hasilnya tersimpan sebagai:

uploads/qrcode/RL000123.png

Pola ini juga sering dipakai pada tutorial PHP QR Code dinamis: nilai dari aplikasi dijadikan isi QR, kemudian output PNG disimpan ke folder project.

Memahami Parameter QRcode::png()

Daripada sekadar menyalin kode, ada baiknya kita memahami bagian berikut:

QRcode::png(
    $qr_key,
    $file,
    QR_ECLEVEL_H,
    8,
    2
);

Pada penggunaan ini:

Dokumentasi PHP QR Code menyediakan beberapa level error correction seperti QR_ECLEVEL_L, QR_ECLEVEL_M, QR_ECLEVEL_Q, dan QR_ECLEVEL_H.

Untuk aplikasi nyata, jangan langsung menganggap ukuran terbesar atau level tertinggi selalu menjadi pilihan terbaik. Buat QR, cetak jika diperlukan, lalu uji pada kamera yang benar-benar digunakan.

Jangan Menggunakan ID Database sebagai QR Key

Misalnya tabel pengguna memiliki ID:

1
2
3
4

Secara teknis kita dapat membuat QR dari angka tersebut. Namun untuk aplikasi yang menggunakan QR sebagai identitas, saya lebih memilih membuat key terpisah.

Contohnya:

9f32a8c11d74e9825b27a19f0a6e47cd

PHP dapat membuat nilai acak menggunakan:

<?php

$qr_key = bin2hex(random_bytes(16));

?>

Kemudian simpan qr_key ke database.

QR hanya membawa key tersebut. Saat dipindai, server mencari record berdasarkan qr_key.

SELECT *
FROM users
WHERE qr_key = ?
LIMIT 1

Dengan cara ini, ID internal database tidak perlu dijadikan isi QR.

Menempatkan Nimiq QR Scanner di Project

Sekarang kita masuk ke bagian kamera browser.

Library yang digunakan tetap Nimiq QR Scanner.

Pada project ini foldernya adalah:

C:\xampp\htdocs\absensi\libs\qr-scanner-master

Dua file yang perlu diperhatikan:

qr-scanner.min.js
qr-scanner-worker.min.js

Repository resmi QR Scanner menjelaskan bahwa qr-scanner.min.js merupakan file API utama. Library juga memiliki qr-scanner-worker.min.js yang digunakan untuk proses decoding ketika diperlukan.

Untuk penggunaan tanpa bundler, dokumentasi library menyarankan agar file worker tersedia di lokasi yang sesuai, biasanya di sebelah file utama.

Karena itu struktur berikut cukup mudah dikelola:

qr-scanner-master
│
├── qr-scanner.min.js
└── qr-scanner-worker.min.js

Membuat Halaman Scanner QR

Buat halaman scanner, misalnya:

scan.php

Kita membutuhkan elemen video sebagai tempat preview kamera.

<video id="qr-video"></video>

Kemudian panggil QR Scanner.

<script type="module">

import QrScanner from "./libs/qr-scanner-master/qr-scanner.min.js";

const video = document.getElementById("qr-video");

const scanner = new QrScanner(
    video,
    result => {
        console.log("QR terbaca:", result.data);
    }
);

scanner.start();

</script>

Contoh dasar pada dokumentasi QR Scanner juga menggunakan elemen video dan callback hasil scan. Hasil yang terdeteksi tersedia melalui result.

Jika QR berisi:

RL000123

maka console dapat menampilkan:

QR terbaca: RL000123

Kamera Tidak Muncul? Periksa Konteks Browser

Ini bagian yang sering membuat bingung saat scanner mulai diuji dari perangkat lain.

API kamera browser menggunakan getUserMedia(). Dokumentasi MDN menjelaskan bahwa fitur ini membutuhkan secure context. HTTPS memenuhi syarat tersebut, dan localhost juga dianggap sebagai origin yang berpotensi dapat dipercaya untuk pengembangan lokal.

Artinya, pengujian di:

http://localhost/absensi/scan.php

dapat berbeda dengan membuka aplikasi melalui alamat IP HTTP biasa dari perangkat lain.

Jika scanner bekerja di komputer server tetapi kamera bermasalah ketika halaman dibuka dari tablet atau smartphone, jangan langsung mengganti library.

Periksa terlebih dahulu:

• izin kamera browser;
• apakah halaman berjalan pada secure context;
• path file JavaScript;
• dan apakah browser perangkat mendukung akses kamera.

Mengirim Hasil Scan ke PHP

Setelah QR berhasil dibaca, biasanya kita ingin mengirim nilainya ke server.

Kita dapat menggunakan Fetch API.

const scanner = new QrScanner(
    video,
    result => {

        fetch("proses_scan.php", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: "qr_key=" + encodeURIComponent(result.data)
        })
        .then(response => response.text())
        .then(data => {
            console.log(data);
        });

    }
);

Kemudian buat:

proses_scan.php

Isi contoh sederhananya:

<?php

$qr_key = $_POST['qr_key'] ?? '';

if ($qr_key === '') {
    exit('QR tidak valid');
}

echo 'QR diterima: ' . htmlspecialchars($qr_key);

?>

Jika QR berisi RL000123, PHP akan menerima nilai tersebut.

Setelah tahap ini berhasil, barulah hubungkan dengan database.

Saya lebih menyukai urutan pengujian seperti ini:

QR berhasil dibuat
↓
Kamera berhasil membaca
↓
JavaScript menerima data
↓
PHP menerima POST
↓
Baru hubungkan database

Jika semua bagian dibuat sekaligus, kita akan lebih sulit mengetahui sumber masalah ketika scanner tidak bekerja.

Mencegah Hasil QR Diproses Berulang Kali

Scanner kamera bekerja terus-menerus. Dalam praktiknya, QR yang sama dapat terbaca beberapa kali dalam waktu singkat.

Karena itu jangan langsung menganggap callback hanya berjalan satu kali.

Untuk proses absensi atau transaksi, kita dapat menghentikan scanner sementara setelah QR ditemukan.

const scanner = new QrScanner(
    video,
    async result => {

        await scanner.stop();

        console.log("QR terbaca:", result.data);

    }
);

Setelah proses server selesai, scanner dapat dijalankan kembali sesuai kebutuhan aplikasi.

Selain itu, validasi duplikasi tetap sebaiknya dilakukan di sisi server. Jangan hanya mengandalkan JavaScript untuk mencegah absensi atau transaksi ganda.

Sekarang Kita Membuat Barcode Code 39

QR Code cocok untuk kamera. Namun pada aplikasi inventaris, kadang kita juga menggunakan barcode scanner USB.

Untuk contoh barcode web, kita menggunakan Libre Barcode 39.

Dokumentasi Libre Barcode menjelaskan bahwa Code 39 biasa menggunakan karakter asterisk untuk membungkus data yang akan dienkode.

Misalnya kode barang:

RL000123

Data yang diberikan ke font Code 39 menjadi:

*RL000123*

Untuk web, font dapat dipanggil melalui Google Fonts.

<style>

@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

.barcode {
    font-family: 'Libre Barcode 39', cursive;
    font-size: 64px;
}

</style>

Kemudian tampilkan data:

<div class="barcode">*RL000123*</div>

Browser akan menampilkan teks tersebut menggunakan font barcode.

Membuat Barcode dari Data PHP

Pada aplikasi nyata, kode barang tentu berasal dari database.

Contoh sederhananya:

<?php

$kode_barang = 'RL000123';

?>

<div class="barcode">
*<?= htmlspecialchars(strtoupper($kode_barang)) ?>*
</div>

Saya menggunakan strtoupper() karena Code 39 standar menggunakan huruf kapital A sampai Z pada set karakter dasarnya.

Data asli tetap:

RL000123

Asterisk hanya ditambahkan ketika data ditampilkan menggunakan font Code 39.

Ini sama dengan prinsip yang kita gunakan pada artikel barcode Microsoft Access: jangan mengubah data utama hanya demi format barcode.

Kenapa Code 128 Tidak Dibuat dengan Cara yang Sama?

Libre Barcode memang menyediakan font Code 128. Namun dokumentasinya menjelaskan bahwa Code 128 membutuhkan encoding.

Jadi kode seperti ini bukan solusi yang benar hanya karena kita menggunakan font Code 128:

<div class="barcode128">RL000123</div>

Code 128 memiliki code set, start symbol, checksum, dan stop symbol yang perlu diproses dengan benar.

Libre Barcode menyediakan dokumentasi dan encoder sebagai referensi untuk Code 128.

Dokumentasi Libre Barcode Code 128

QR Code atau Barcode untuk Aplikasi Web?

Setelah mencoba keduanya, pertanyaannya biasanya bukan mana yang paling modern.

Pertanyaannya adalah: kode akan dibaca menggunakan apa?

Jika aplikasi banyak dibuka dari tablet atau smartphone dan ingin menggunakan kamera browser, QR Code terasa lebih praktis.

Jika meja kerja sudah memiliki barcode scanner USB dan kode barang relatif pendek, barcode 1D masih sangat nyaman digunakan.

Dalam aplikasi inventaris, kita juga dapat menggunakan keduanya.

Satu KodeBarang dapat ditampilkan sebagai QR Code untuk kamera dan sebagai Code 39 untuk scanner USB.

Database tidak perlu memiliki dua identitas berbeda.

Struktur yang Saya Sarankan

Untuk project PHP sederhana, struktur berikut cukup mudah dibaca:

absensi
│
├── libs
│   ├── phpqrcode
│   │   └── qrlib.php
│   │
│   └── qr-scanner-master
│       ├── qr-scanner.min.js
│       └── qr-scanner-worker.min.js
│
├── uploads
│   └── qrcode
│
├── buat_qr.php
├── scan.php
├── proses_scan.php
└── index.php

Folder libs berisi library.

Folder uploads/qrcode menyimpan hasil QR PNG jika aplikasi memang membutuhkan file fisik.

File scanner dan proses server dipisah agar lebih mudah diuji.

Urutan Pengujian yang Lebih Mudah

Salah satu hal yang saya pelajari dari membaca tutorial dan dokumentasi library adalah jangan langsung membuat sistem lengkap.

Uji satu bagian pada satu waktu.

1. Buat QR Code dari teks statis.
2. Pastikan file PNG berhasil dibuat.
3. Buat halaman kamera.
4. Pastikan QR Scanner membaca QR.
5. Tampilkan hasil scan di console.
6. Kirim hasil ke PHP.
7. Pastikan PHP menerima data.
8. Baru lakukan pencarian database.
9. Tambahkan validasi duplikasi.
10. Uji dari perangkat yang benar-benar digunakan.

Urutan ini memang terlihat lebih lambat di awal.

Namun ketika terjadi masalah, kita langsung tahu bagian mana yang perlu diperiksa.

Kesimpulan

Membuat QR Code dan barcode di aplikasi web PHP sebenarnya lebih mudah dipahami jika kita melihat keduanya sebagai representasi dari sebuah kode.

PHP QR Code mengambil string seperti qr_key dan menghasilkan QR Code. Nimiq QR Scanner membaca QR melalui kamera browser dan mengembalikan data hasil scan. Libre Barcode menampilkan data Code 39 sebagai barcode satu dimensi.

Library yang digunakan pada tutorial ini adalah:

PHP QR Code
Nimiq QR Scanner
Libre Barcode

Untuk QR Code, file utama yang kita panggil adalah:

qrlib.php

Untuk scanner browser:

qr-scanner.min.js
qr-scanner-worker.min.js

Sedangkan barcode Code 39 ditampilkan menggunakan Libre Barcode 39 dengan data yang dibungkus karakter asterisk.

Jika aplikasi digunakan pada komputer, tablet, dan smartphone, kita tidak harus memilih satu teknologi untuk semua kondisi. QR Code dapat digunakan untuk kamera browser, sementara barcode 1D tetap dapat digunakan pada meja kerja yang memiliki scanner USB.

Yang terpenting adalah menjaga satu kode identitas yang konsisten di database dan memastikan hasil scan kembali cocok dengan data tersebut.