Generate QR Code dan Sekaligus Membuat Scanner QR di Laravel dengan Package simplesoftwareio/simple-qrcode dan Library HTML5-QRCode

Image Source: https://cdn.urbandigital.id/wp-content/uploads/2017/01/scan-qr-code-di-layar-handphone-android-768x380.jpg

Halo temen-temen, kali ini aku akan membagikan tulisan seputar pengembangan web dengan Laravel. Jadi pada tulisan kali ini kita akan bersama-sama membangun sebuah fitur simple berupa generate QR Code dari sebuah link yang di submit dari web dan sebuah scanner di web untuk membaca QR Code yang hasil baca QR Code-nya akan me-redirect kita ke link yang ada di QR Code tersebut.

Jadi langsung saja kita akan mulai dari instalasi package simplesoftwareio/simple-qrcode.

composer require simplesoftwareio/simple-qrcode

Selanjutnya, kita akan buat sebuah controller QRController.php dan tambahkan kode di bawah ini.

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use SimpleSoftwareIO\QrCode\Facades\QrCode;
use Illuminate\Support\Facades\Storage;

class QRCodeController extends Controller
{
    public function index()
    {
        //layoutnya bisa temen-temen sesuaiin sama kebutuhannya temen-temen
        return view('admin.pages.qr_code.index');
    }

    public function submit(Request $request)
    {
        $this->validate($request, [
            'link' => 'required|url',
        ]);
        
        // untuk usecase ku sendiri tidak menyimpan ke database
        // jadi aku akalin dengan nge-generate unique code yang
        // ku ambil dari waktu saat ini (saat mengenerate image QR)
        // lalu itu yang ku jadikan identifier untuk image yang di generate 
        $code = time();

        // untuk format, temen-temen bisa sesuaiin 
        // (format yang tersedia: png, eps, dan svg)
        // lalu temen-temen bisa menyesuaikan ukuran image QR-nya
        // dengan menambahkan ->size(ukuranDalamPixel, contoh: 100);
        // QrCode::format('png')->size(100)->generate($request->link);  
        $qr = QrCode::format('png')->generate($request->link);
        $qrImageName = $code . '.png';

        // simpan ke local storage
        Storage::put('public/qr/' . $qrImageName, $qr);

        //layoutnya bisa temen-temen sesuaiin sama kebutuhannya temen-temen
        return view('admin.pages.qr_code.scanner', compact('code'));
    }
}

Selanjutnya, kita akan melakukan instalasi library HTML5-QRCode dengan cara mendownload file js-nya disini: https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js

Atau temen-temen bisa juga menggunakan npm dengan perintah:
npm install html5-qrcode

Jika sudah di download, filenya letakan di folder public temen-temen ya. Peletakannya bebas sesuai kebutuhan temen-temen (kalau aku naruhnya di dalam folder assets/html5-qrcode).

Next, kita akan buatkan container HTML untuk scanner QR Code kita dan menambahkan kode js seperti di bawah ini.

// container HTML untuk scanner QR Code
<div id="reader"></div>
.
.
.
//sesuaikan dengan di folder mana teman-teman menaruh file js HTML5-QRCode
<script src="{{ asset('assets/html5-qrcode/html5-qrcode.min.js') }}"></script>
<script>
    // inisiasi html5QRCodeScanner
    let html5QRCodeScanner = new Html5QrcodeScanner(
        // target id dengan nama reader, lalu sertakan juga 
        // pengaturan untuk qrbox (tinggi, lebar, dll)
        "reader", {
            fps: 10,
            qrbox: {
                width: 200,
                height: 200,
            },
        }
    );

    // function yang dieksekusi ketika scanner berhasil
    // membaca suatu QR Code
    function onScanSuccess(decodedText, decodedResult) {
        // redirect ke link hasil scan
        window.location.href = decodedResult.decodedText;

        // membersihkan scan area ketika sudah menjalankan 
        // action diatas
        html5QRCodeScanner.clear();
    }

    // render qr code scannernya
    html5QRCodeScanner.render(onScanSuccess);
</script>

Simple banget bukan? Untuk video demo-nya bisa temen-temen liat di bawah ini yaa.

Demo Video

Okee sip, jadi sekian dulu pembahasan kali ini. Semoga bermanfaat bagi teman-teman dan terimakasih sudah membaca!

Refrensi:
[1] https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js
[2] https://blog.minhazav.dev/research/html5-qrcode