Perkembangan dunia informasi dan digital, membuat kita sering sekali menemukan QRCode. Proses transaksi online, tanda tangan digital, hingga validasi data banyak yang sudah menerapkan penggunaan QRCode.
Lantas, apa itu QRCode?
Menurut Wikipedia, Kode QR, kode RC, kode respons cepat, atau kode cepat tanggap (bahasa Inggris: Quick Response code) adalah bentuk evolusi kode batang dari satu dimensi menjadi dua dimensi.
Lalu, gimana sih cara sederhana untuk kita dapat membuat generator QRCode dengan Codeigniter 3? Pada artikel ini, kuhomi mencoba share ke pembaca mengenai cara generate QRCode di Codeigniter 3.
Pada tutorial ini, kita akan membuat studi kasus yaitu membuat form pendaftaran peserta suatu event (anggap aja event konser). Kemudian, penyelengara event menginginkan menggunakan QRCode untuk proses validasi data peserta sebelum memasuki venue event. Maka dari itu, ketika proses pendaftaran, diperlukan fungsi untuk generate QRCode unik untuk setiap peserta. Oh iya, studi kasus ini dibuat hanya untuk kebutuhan tutorial ini aja ya. Silahkan sesuaikan kodingan generate qrcode ini dengan studi kasus yang ingin pembaca terapkan.
Pada tutorial ini, lebih berfokus pada kodingan cara generate QRCode dengan menggunakan library CIQRCode di Codeigniter 3. Tutorial ini tidak membahas secara detail bagaimana membuat database dan table di MySQL, konfigurasi dasar Codeigniter 3, proses insert data ke database, atau cara membuat view dengan bootstrap.
Pada tutorial kali ini, ada beberapa yang harus disiapkan, diantaranya
1. Codeigniter 3. Karna tutorial ini kita akan menggunakan framework Codeigniter 3, maka harus download Codeigniter 3 terlebih dahulu. Asumsi kuhomi, pembaca sudah dapat melakukan konfigurasi awal CI3 ya sampai bisa diakses lewat browser
2. Database MySQL. Untuk database sendiri, pada tutorial kali ini menggunakan MySQL bawaan dari aplikasi XAMPP.
3. Library CIQRcode. Untuk proses generate QRCode-nya, kita akan menggunakan library CIQRCode, yang bisa pembaca download di link ini https://github.com/dwisetiyadi/CodeIgniter-PHP-QR-Code. Setelah didownload, extract atau unzip file download tersebut lalu copy-kan file library CIQRCode ke dalam folder /application/libraries pembaca, seperti gambar dibawah ini
4. Script Jquery. Karna pada tutorial ini, kuhomi coba untuk melakukan validasi isi form dengan library jquery validation, maka untuk menjalankan proses validasi tersebut kita juga membutuhkan library jquery.
5. Script Jquery Validation. Ini adalah script library jquery untuk validasi input data pada form.
Untuk persiapan nomor 4 dan 5 sebenernya opsional. Jika pembaca tidak ingin melakukan proses validasi input, boleh di skip aja nomor 4 dan 5. Kemudian, jika pembaca ingin membuat tampilan form yang lebih menarik, pembaca bisa menggunakan bootstrap.
Untuk tutorial ini, kuhomi mencoba membuat table di database dengan nama table 'peserta', yang mana hanya terdiri dari field id, fullname, email, qrcode_path dan qrcode_data. Untuk field qrcode_path nantinya akan menyimpan data filename image QRCode hasil dari proses generate. Sedangkan field qrcode-data sendiri nantinya akan menyimpan 6 digit string data unik yang akan disematkan pada QRCode.
CREATE TABLE `peserta` (
`id` int(11) NOT NULL,
`fullname` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`qrcode_path` varchar(255) NOT NULL,
`qrcode_data` varchar(50) NOT NULL
)
ALTER TABLE `peserta`
ADD PRIMARY KEY (`id`);
ALTER TABLE `peserta`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;
Selanjutnya buat kodingan view untuk form input data peserta. Berikut kode HTML untuk form input-nya.
<form id="form" action="" method="POST">
<!-- Field Row -->
<div class="row">
<!-- Field Left -->
<div class="col-md-12">
<div class="form-group">
<?php if($this->uri->segment(2) == "edit"): ?>
<input type="text" name="id" class="form-control" id="id" value="<?= $peserta[0]['id'] ?>" hidden>
<?php endif; ?>
<label for="title">Nama Peserta</label>
<input type="text" name="fullname" class="form-control" id="fullname" placeholder="Nama Peserta" value="<?= (!empty($peserta))?$peserta[0]['fullname']:"" ?>">
</div>
<div class="form-group">
<label for="teaser">Email Peserta</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Email Peserta" value="<?= (!empty($peserta))?$peserta[0]['email']:""?>">
</div>
</div>
<!-- End Field Left -->
</div>
<!-- End Field Row -->
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form").validate({
ignore: [],
rules: {
fullname: "required",
email: "required",
},
messages:{
fullname : "Nama Peserta harus diisi",
email : "Email Peserta harus diisi",
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
Selanjutnya, membuat kodingan controller. Untuk class controller, kita coba kasih nama class 'peserta'. Disini, kita coba buat satu method dengan nama 'add'. Method ini sebenernya hanya untuk menampilkan view form atau jika terdapat data post, akan memanggil method 'save_data' di model untuk proses simpan data.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Peserta extends CI_Controller {
public function add(){
$this->load->model('peserta_model');
if($this->input->post()){
$res = $this->peserta_model->save_data();
redirect('/peserta');
}
$data['menu'] = 'Tambah Peserta';
$data['content'] = 'peserta/form';
$this->load->view('theme', $data);
}
}
Selanjutnya adalah membuat kodingan model. Menurut kuhomi, ini adalah bagian terpenting pada tutorial ini. Karena, pada file class model ini terdapat kodingan untuk melakukan proses generate QRCode. Class model sendiri kita coba kasih nama 'Peserta_model'.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Peserta_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 save_data()
{
//memanggil method _generate_data_qrcode untuk proses generate data qrcode
$qrcode_data = $this->_generate_data_qrcode();
$data = array(
'fullname' => $this->input->post('fullname'),
'email' => $this->input->post('email'),
'qrcode_path' => $this->_generate_qrcode($this->input->post('fullname'),$qrcode_data), //memanggil method _generate_qrcode dengan mengirimkan dua parameter yaitu data fullname dan data qrcode
'qrcode_data' => $qrcode_data
);
$this->db->insert($this->table,$data);
}
//generate qrcode data
public function _generate_data_qrcode()
{
$this->load->helper('string');
$code = strtoupper(random_string('alnum', 6));
//proses cek data qrcode untuk memastikan data qrcode bersifat unik
$cek_data=$this->get_data($code);
if(!empty($cek_data)){
//jika data qrcode ada yang sama, maka karakter terakhir dari data qrcode
//akan di-replace dengan angka jumlah data yang sama + 1
$code = substr_replace($code, count($cek_data)+1, 5);
}
return $code;
}
//generate image qrcode
public function _generate_qrcode($fullname, $data_code)
{
//load libraru qrcode
$this->load->library('ciqrcode');
//persiapan direktori untuk menyimpan image qrcode hasil generate.
//Path dan nama direktori bisa kalian sesuaikan dengan kebutuhan kalian
$directory = "./assets/img/qrcode";
//persiapan filename untuk image qrcode. Diambil dari data fullname tanpa spasi + 3 digit angka random
$file_name = str_replace(" ", "", strtolower($fullname)).rand(pow(10, 2), pow(10, 3)-1);
//pembuatan direktori jika belum ada
if (!is_dir($directory)) {
mkdir($directory, 0777, TRUE);
}
$config['cacheable'] = true; //boolean, the default is true
$config['quality'] = true; //boolean, the default is true
$config['size'] = '1024'; //interger, the default is 1024
$config['black'] = array(224,255,255); // array, default is array(255,255,255)
$config['white'] = array(70,130,180); // array, default is array(0,0,0)
$this->ciqrcode->initialize($config);
//menyisipkan ekstensi png pada filename qrcode
$image_name=$file_name.'.png';
$params['data'] = $data_code; //data yang akan di jadikan QR CODE
$params['level'] = 'H'; //H=High
$params['size'] = 10;
$params['savename'] = $directory.'/'.$image_name;
$this->ciqrcode->generate($params); // fungsi untuk generate QR CODE
return $image_name;
}
}
sampai tahap ini, seharusnya pembaca sudah bisa melakukan generate qrcode setiap kali melakukan insert atau tambah data peserta. Untuk mencobanya, pembaca bisa coba scan qrcode dengan aplikasi mobile, dan lihat apakah data yang terbaca sama dengan data yang telah disisipkan pada field qrcode_data.
Untuk data di database, data yang tersimpan akan seperti gambar dibawah ini
dan berikut adalah capture image QRCode yang tersimpan di dalam direktori /assets/img/qrcode
