Beberapa bulan lalu, gua pernah sharing mengenai cara generate qrcode dengan Codeigniter 3. Untuk artikelnya, bisa kalian klik link berikut ini Tutorial Codeigniter 3 - Membuat Fungsi untuk Generate QRCode.
Nah, pada artikel kali ini, gua mau sharing lagi mengenai cara membaca data qrcode yang telah kita generate pada artikel sebelumnya, kemudian dari data qrcode tersebut akan di proses lebih lanjut dengan menggunakan Codeigniter 3.
Studi kasus yang gua jadikan contoh pada artikel ini adalah, membuat aplikasi web dengan Codeigniter 3 yang berfungsi untuk mendata kehadiran peserta. Jadi, setelah proses scan qrcode berhasil, program akan mencatat kehadiran peserta serta mencatat jam berapa peserta tersebut hadir. Kemudian mengambil detail data dari database berdasarkan kode qrcode yang terbaca dan menampilkan data tersebut ke layar.
Ya kurang lebih seperti buku tamu kehadiran peserta apabila kita menghadiri suatu event tertentu.
Oke, langsung aja ke proses pembuatan kodingannya.
Untuk menyimpan data dummy peserta, gua menggunakan database MySQL. Gua buat database dengan nama ‘tutorial’ dan satu buah tabel dengan nama ‘peserta’. Silahkan kalian sesuaikan saja nama database dan tabel dengan studi kasus kalian. Kurang lebih, query untuk membuat tabel seperti di bawah ini.
-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Aug 16, 2024 at 09:23 AM
-- Server version: 8.4.0
-- PHP Version: 7.3.33
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `tutorial`
--
-- --------------------------------------------------------
--
-- Table structure for table `peserta`
--
CREATE TABLE `peserta` (
`id` int NOT NULL,
`fullname` varchar(255) NOT NULL,
`address` varchar(255) DEFAULT NULL,
`email` varchar(255) NOT NULL,
`contact` varchar(75) DEFAULT NULL,
`whatsapp` varchar(75) DEFAULT NULL,
`qrcode_path` varchar(255) NOT NULL,
`qrcode_data` varchar(50) NOT NULL,
`attendance` tinyint(1) DEFAULT '0',
`attendance_time` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `peserta`
--
ALTER TABLE `peserta`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `peserta`
--
ALTER TABLE `peserta`
MODIFY `id` int NOT NULL AUTO_INCREMENT;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Download dan Konfigurasi Dasar Codeigniter 3 di sini.
Seperti yang telah gua bahas di awal, aplikasi web scanner ini gua buat dengan menggunakan Codeigniter 3. Silahkan kalian download dan konfigurasi dasar projek CI3 kalian. Atau jika kalian ingin menggunakan framework PHP lain, silahkan disesuaikan saja ya…
Gua anggap, kalian sudah paham mengenai konfigurasi dasar framework PHP ini, terutama Codeigniter 3.
Untuk handle proses scaning qrcode, gua menggunakan library html5-qrcode. Alasan gua menggunakan library ini, karena menurut gua proses scanning nya cukup cepat dan lancar, implementasi nya sangat mudah, dokumentasinya juga menurut gua cukup lengkap.
Ada dua cara implementasi htm5-qrcode ini. Yaitu, easy mode dan pro mode. Bedanya, untuk easy mode, kita cukup load library seperti load library javascript pada umumnya, kemudian sediakan satu buah tag div container untuk menempatkan hasil render UI scanner.
Selanjutnya, setup script dasar untuk proses inisialisasi library html5-qrcode ini. Untuk script dasar ini juga bisa kalian dapatkan pada dokumentasi html5-qrcode.
Nah, dari script dasar tersebut, ketika kita jalankan aplikasinya, sebenarnya sudah dapat melakukan proses scaning qrcode dan menampilkan data qrcode pada console. Hanya saja, apabila kita ingin memproses lebih lanjut data qrcode tersebut, kita harus menyesuaikan kembali script dasar tersebut sehingga dapat memproses data sesuai yang kita inginkan.
Seperti yang gua katakan di awal, data qrcode dari hasil scan akan gua gunakan untuk mengubah data kehadiran peserta yang ada pada database. Maka dari itu, ada kodingan atau script library html5-qrcode yang perlu disesuaikan.
Oke, langsung aja berikut kodingannya. Untuk penjelasan kode program, gua coba sertakan dalam kodingan dalam bentuk komentar ya
File view ini berisikan kodingan yang akan memproses antarmuka pengguna pada layar. Pada file ini juga kita akan menaruh script html5-qrcode. Pada kali ini, gua membuat dua file view, yaitu index.php dan biodata.php.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Attendance Check</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 20px;">
<div class="row">
<div class="col">
<div id="qr-reader"></div>
</div>
<!-- tag div untuk menempelkan tag html detail data peserta dari proses ajax -->
<div class="col" id="biodata"></div>
</div>
</div>
</div>
<!-- load script library jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- load script library html5-qrcode -->
<script src="https://unpkg.com/html5-qrcode"></script>
<script type="text/javascript">
// var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0;
function onScanSuccess(decodedText, decodedResult) {
if (decodedText !== lastResult) {
++countResults;
lastResult = decodedText;
// Handle on success condition with the decoded message.
$.ajax({url: "/qrcode_scanner/attendance/?code="+decodedText, success: function(result){
$("#biodata").html(result);
}});
// console.log(`Scan result ${decodedText}`, decodedResult);
}
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 }
);
html5QrcodeScanner.render(onScanSuccess);
</script>
</body>
</html>
<div id="qr-reader-results">
<?php if($this->session->flashdata('msg')){ ?>
<div class="alert alert-warning" role="alert">
<?php echo $this->session->flashdata('msg'); ?>
</div>
<?php } ?>
<?php if(!empty($peserta)){ ?>
<div class="row gutters-sm">
<div class="col-md-12">
<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Nama Lengkap</h6>
</div>
<div class="col-sm-9 text-secondary">
<?php echo $peserta[0]['fullname'] ?>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Email</h6>
</div>
<div class="col-sm-9 text-secondary">
<?php echo $peserta[0]['email'] ?>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Kontak</h6>
</div>
<div class="col-sm-9 text-secondary">
<?php echo $peserta[0]['contact'] ?>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">WhatsApp</h6>
</div>
<div class="col-sm-9 text-secondary">
<?php echo $peserta[0]['whatsapp'] ?>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Alamat</h6>
</div>
<div class="col-sm-9 text-secondary">
<?php echo $peserta[0]['address'] ?>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
File controller ini berfungsi untuk routing dan mengarahkan ke file view scanner. Selain itu, pada file controller ini juga akan memproses data qrcode dari proses scaning.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Qrcode_scanner extends CI_Controller {
//method untuk menampilkan antarmuka scanner
//method inilah yang diakses melalui browser
public function scanner()
{
$this->load->view('qrcode/index');
}
//method untuk handle proses update data kehadiran dan waktu kehadiran
public function attendance()
{
//load model yang ingin digunakan
$this->load->model('qrcode_model');
//get data parameter 'code' yang dikirimkan melalui fungsi ajax
$code = $this->input->get("code");
//memanggil method model dengan nama 'get_data' untuk mendapatkan detail data
//berdasarkan parameter kode qrcode
$data_peserta = $this->qrcode_model->get_data($code);
//jika data peserta dengan kode qrcode tersebut ada
if(!empty($data_peserta))
{
$data['peserta'] = $data_peserta;
//jika peserta belum pernah check in atau konfirmasi kehadiran (value attendance masih FALSE)
if(!$data_peserta[0]['attendance']){
//memanggil method model dengan nama 'attendance' untuk ubah value attendace menjadi TRUE
//dan mengubah value attendace_time berdasarkan waktu saat ini
$checkin = $this->qrcode_model->attendance($code);
//jika proses checkin kehadiran sukses, tampilkan pesan
if($checkin)
{
$this->session->set_flashdata('msg','Kehadiran Peserta telah Tercatat');
}
//jika proses checkin kehadiran gagal, tampilkan pesan
else
{
$this->session->set_flashdata('msg','Maaf, proses pencatatan kehadiran peserta gagal');
}
}
//jika peserta telah checkin kehadiran sebelumnya, langsung tampilkan pesan
else
{
$this->session->set_flashdata('msg','Peserta telah hadir');
}
}
//jika tidak ada data yang cocok dengan kode qrcode yang di scan, tampilkan pesan
else
{
$this->session->set_flashdata('msg','Maaf, data peserta tidak ada');
}
//load view detail data peserta dengan nama file 'biodata'
$view_data = $this->load->view('qrcode/biodata',$data,TRUE);
//return ke ajax
echo $view_data;
}
}
File model ini berisikan kodingan yang berfungsi untuk proses koneksi dengan MySQL serta eksekusi query data seperti get dan update data.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Qrcode_model extends CI_Model{
private $table = "peserta";
function __construct(){
parent::__construct();
$this->db = $this->load->database('default',TRUE);
}
//fungsi untuk get data dengan qrcode data tertentu
public function get_data($qrcode_data="")
{
$this->db->select('*')
->from($this->table);
if(!empty($qrcode_data)){
$this->db->where('qrcode_data', $qrcode_data);
}
$res = $this->db->get();
return $res->result_array();
}
public function attendance($code)
{
$data = array(
'attendance' => true,
'attendance_time' => date('Y-m-d H:i:s')
);
$result = $this->db->where('qrcode_data',$code)->update($this->table,$data);
return $result;
}
}
Untuk menjalankan aplikasi scanner qrcode ini pada server lokal, harus diakses melalui localhost atau jika menggunakan vhost atau subdomain, harus dengan https. Silahkan akses fungsi controller untuk menampilkan antarmuka scanner. Kalau gua disini, karena file controller gua berikan nama atau class ‘qrcode’ dan fungsi method untuk menampilkan antarmuka scanner, yaitu ‘scanner’, maka URL yang gua akses adalah localhost/qrcode/scanner.
Silahkan lakukan scaning terhadap qrcode yang telah disediakan. Jika belum, silahkan generate terlebih dahulu sample qrcode-nya. Atau silahkan cek artikel gua yang ini untuk membuat aplikasi generate qrcode. Setelah proses scanning, akan menampilkan antarmuka seperti gambar di bawah ini.
![Proses Scanner dengan html5-qrcode [docs/kuhomi.id].](http://manage.kuhomi.id/assets/img/gallery/1723795893411.png)
selain melalui camera, proses scanner dengan html5-qrcode juga bisa dilakukan dengan upload file. Silahkan klik tombol "Stop Scanning" terlebih dahulu, kemudian klik tombol "Scan an Image File", lalu lanjutkan upload file qrcode yang ingin di scan.
![Proses Scanner dengan Upload File [docs/kuhomi.id].](http://manage.kuhomi.id/assets/img/gallery/1723795927481.png)
Silahkan cek kembali baris data dengan qrcode data yang di scan pada database MySQL, apakah data attendance dan attendance_time sudah update atau belum.
Kodingan pada artikel ini hanya untuk contoh, mungkin masih memiliki banyak bug dan kekurangan. Silahkan sesuaikan dengan studi kasus kalian. Semoga bermanfaat..:)
