Generate and Scan QR Codes in Laravel: A Step-by-Step Guide with simplesoftwareio/simple-qrcode and HTML5-QRCode

Image Source: https://support.google.com/camerafromgoogle/answer/12033278?hl=en

Hello friends, this time I’ll be sharing a post about web development with Laravel. In this post, we’ll build a simple feature together: generating a QR Code from a link submitted through a web form, and creating a web-based QR Code scanner that reads the code and redirects us to the link embedded in the QR Code.

Let’s dive right in and start with installing the simplesoftwareio/simple-qrcode package. You can do this by running the following command:

composer require simplesoftwareio/simple-qrcode

Next, let’s create a controller named QRController.php and add the following code:

<?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()
    {
        // Adjust the layout to suit your needs
        return view('admin.pages.qr_code.index');
    }

    public function submit(Request $request)
    {
        $this->validate($request, ['link' => 'required|url']);
        
        // In this use case, the data is not saved to a database.
        // Instead, a unique code is generated based on the current time 
        // (at the moment the QR image is created), 
        // which serves as the identifier for the generated image.
        $code = time();

        // You can adjust the format to your needs 
        // (available formats: png, eps, and svg)
        // Additionally, you can set the QR image size in pixels using ->size(sizeInPixels, e.g., 100).
        // Example: QrCode::format('png')->size(100)->generate($request->link);
        $qr = QrCode::format('png')->generate($request->link);
        $qrImageName = $code . '.png';

        // Save the QR code image to local storage
        Storage::put('public/qr/' . $qrImageName, $qr);

        // Adjust the layout to your needs
        return view('admin.pages.qr_code.scanner', compact('code'));
    }
}

Next, we’ll install the HTML5-QRCode library. You can download the JavaScript file from the following link: Download HTML5-Qrcode

Alternatively, you can use…