Membuat QR dinamis dengan Dengan Codeigniter 4

 Membuat QR dinamis dengan Dengan Codeigniter 4

    Quick Response Code atau yang biasa disebut dengan QR Code merupakan sebuah barcode dua dimensi yang diperkenalkan oleh Perusahaan Jepang Denso Wave pada tahun 1994. Jenis barcode ini awalnya digunakan untuk pendataan inventaris produksi suku cadang kendaraan dan sekarang sudah digunakan dalam berbagai bidang layanan bisnis dan jasa untuk aktivitas marketing dan promosi. Pada dasarnya bahwa QR Code dikembangkan sebagai suatu kode yang memungkinkan isinya untuk dapat diterjemahkan dengan kecepatan tinggi. Keunggulan dari QR Code adalah mampu menyimpan informasi secara horizontal dan vertikal. Oleh karena itu, QR Code dapat menampung informasi yang lebih banyak dibandingkan dengan barcode satu dimensi . 

    Saat ini, untuk penggunaan QR Code telah banyak diimplementasikan dalam bentuk aplikasi QR Code Reader dan QR Code Generator, sehingga seseorang akan sangat mudah untuk membuat informasi dalam bentuk QR Code dan mendapatkan informasi yang ingin diketahuinya, hanya dengan melakukan proses scanning dan pemindaian data melalui media dari kamera handphone . Beberapa level Koreksi Error yang terdapat pada QR code:

1. Level L Dapat mengembalikan data yang mengalami kerusakan 7%

2. Level M Dapat mengembalikan data yang mengalami kerusakan 15%

3. Level Q Dapat mengembalikan data yang mengalami kerusakan 25%

4. Level H Dapat mengembalikan data yang mengalami kerusakan 30%

Sekarang  mari kita fokus pada pembahasan pembuatan QR code dinamis di codeigniter 4.

Pada umunya QR code digunakan untuk mengkodekan sebuah nilai yang sifatnya statis, artinya selalu tetap. misalnya kode buku, kode anggota ,atau nomor registrasi anggota yang dimana nilainya pasti selalu tetap karena sering digunakan juga sebagai ID. tapi disini kita akan mencoba membuat QR code versi dinamis untuk kebutuhan yang berbeda, yang dimaksud dinamis disini adalah nilai yang ada pada QR code akan berubah secara terus-menerus. sehingga setiap kali anda melakukan scanning QR code,nilai yang dihasilkan selalu berbeda. 

Pada kasus ini penerapan QR code dinamis digunakan untuk fungsi  absensi berbasis QR code. sehingga pegawai yang akan melakukan absen kehadiran harus melakukan scanning barcode yang datanya berisi data waktu realtime(berubah otomatis setiap beberapa waktu tertentu sesuai pengaturan). data bisa berubah otomatis karena barcode di setting auto reload menggunakan ajax, jadi setiap reload akan mengambil data waktu terbaru.

1. download file library QR code generator disini

2. ekstrak file tersebut dan letakan file Ciqrcode.php pada folder app/Libraries/  dan folder qrcode didalam folder thirdparty/  seperti pada gambar dibawah ini

3. sampai tahap ini proses penambahan library sudah selesai, sekarang kita perlu menggunakannya untuk membuat qr code, tahap berikutnya yaitu membuat method di kontroller untuk menampikan layout awal view qr code, berikut file controller untuk menampilkan halaman awal.

di method ini, pertama membuat qrcode dengan menggunakan library ciqrode yang telah di download, 

data yang di jadikan QR adalah data waktu terkini yang tersimpan pada variabel $waktu. nama file QR code menggunakan data waktu itu sendiri yang dihilangkan tanda titik duanya (:) menggunakan fungsi bersih kata dan ditambah ekstensi .png sehingga menjadi file gambar. fungsi bersihkan kata diletakan pada file helper yang ada di folder helpers pada project ci 4 kalian, berikut skriptnya

setelah menjalankan  script QRcode::png untuk membuat data QR , kemudian data nama file disimpan dalam variabel array $data dan dikirim ke file absen_keluar.php dengan menggunakan return view().

4. langkah selanjutnya membuat file dengan nama absen_keluar.php pada folder view/admin/absen_kehadiran/. , silahkan directory disesuaikan dengan project anda masing masing

berikut skriptnya,

berikut penjelasan file view diatas:

$nama_qr dikirimkan ke file view kemudian dimasukan ke dalam tag input bertype hidden dengan id nama_qr dengan tujuan agar nilai itu nantinya dapat diambil di javascript untuk selanjutnya dikirimkan dengan metode ajax guna menampilkan file QR yang telah tersimpan dengan nama tersebut.

membuat tag div dengan class loadData untuk selanjutnya tag tersebut akan diisi dengan load file view lain dengan ajax,

membuat script window.location.reload untuk membuat halaman ini reload otomatis setiap waktu yang telah ditentukan, pada gambar diatas reload dilakukan setiap 5 detik (5000 ms).

setelah reload halaman tersebut akan menjalankan fungsi loadData();

dimana fungsi ini membuat script ajax dengan  memanggil kontroller kehadiran dengan nama method qr_keluar, serta mengirimkan data nama file dengan method post

berikut script method tersebut.

 

pada method ini , file yang barusan dikirim ke ajax tadi diterima, kemudian membuat data array dengan berupa $msg yang didalamnya berisi file view dan juga data nama file QR di dalam $data.

hasilnya dikembalikan dalam bentuk json menggunakan json_encode yang kemudian diterima lagi oleh script ajax pada file sebelumnya dan hasilnya di load kedalam tag div dengan nama kelas .loadData pada file view sebelumnya.

disitu saya juga membuat fungsi hapusFile pada helper  yang gunanya untuk menghapus file-file gambar QR yang telah dibuat sebelumnya sehingga tersisa file gambar yang terbaru saja, hal ini bertujuan untuk menghemat ruang memori penyimpanan pada server. berikut skript dari fungsi hapusFile

dan ini adalah hasil tampilan untuk QRCode dinamisnya

masih pada menit yang sama tp pada jeda detik yang berbeda

dan ini reload secara otomatis, selamat mencoba..