PHP 7 ZXing Decoder Project to Build QRCode Scanner in Browser Using Bootstrap 5

Welcome folks today in this blog post we will be building a qrcode scanner web app using ZXing decoder in php 7. All the full source code of the application is shown below.

Get Started

First of all you need to create the composer.json file inside the root directory and add the dependency as shown below

composer.json

{
    "require": {
        "khanamiryan/qrcode-detector-decoder": "1.0.5.2"
    }
}

{

"require": {

"khanamiryan/qrcode-detector-decoder": "1.0.5.2"

}

Now you need to execute the below command to install this package as shown above

composer install

In order to get started you need to make an index.php file and copy paste the following code

index.php

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>QR Code Scanner PHP</title>
</head>

<body class="bg-light">
  <div class="container py-5">
    <div class="row">
      <div class="col-lg-5 mx-auto">
        <p><?= $msg; ?></p>
        <div class="card card-body p-5 rounded border bg-white">
          <h1 class="mb-4 text-center">QR Code Scanner</h1>
          <form action="" method="post" enctype="multipart/form-data">
            <div class="mb-3">
              <label for="qrCode" class="form-label">Upload your QR Code Image</label>
              <input class="form-control" type="file" accept="image/*" name="qrCode" id="qrCode">
            </div>
            <button type="submit" name="upload" class="btn btn-primary">
              Convert it
            </button>
          </form>
        </div>

      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

<!doctype html>

<head>

<title>QR Code Scanner PHP</title>

</head>

<h1 class="mb-4 text-center">QR Code Scanner</h1>

<label for="qrCode" class="form-label">Upload your QR Code Image</label>

</div>

Convert it

</button>

</form>

</div>

</body>

</html>

As you can see we have a simple bootstrap 5 form in which we have the input field where we allow the user to upload qrcode image and then we have the button to scan and display the result on the screen.

And before writing the php code to upload the file you need to create the uploads folder inside the root directory so that we will be storing all the uploaded files inside the upload folder

index.php

<?php

// Including the autoload file
require('vendor/autoload.php');

use Zxing\QrReader;

$msg = "";
if (isset($_POST['upload'])) {
  $filename = $_FILES["qrCode"]["name"];
  $filetype = $_FILES["qrCode"]["type"];
  $filetemp = $_FILES["qrCode"]["tmp_name"];
  $filesize = $_FILES["qrCode"]["size"];

  $filetype = explode("/", $filetype);
  if ($filetype[0] !== "image") {
    $msg = "File type is invalid: " . $filetype[1];
  } elseif ($filesize > 5242880) {
    $msg = "File size is too big. Maximum size is 5 MB.";
  } else {
    $newfilename = md5(rand() . time()) . $filename;
    move_uploaded_file($filetemp, "uploads/" . $newfilename);

    $qrScan = new QrReader("uploads/" . $newfilename);
    $msg = "QR Code is scanned the result is: " . $qrScan->text();
  }
}

?>

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>QR Code Scanner PHP</title>
</head>

<body class="bg-light">
  <div class="container py-5">
    <div class="row">
      <div class="col-lg-5 mx-auto">
        <p><?= $msg; ?></p>
        <div class="card card-body p-5 rounded border bg-white">
          <h1 class="mb-4 text-center">QR Code Scanner</h1>
          <form action="" method="post" enctype="multipart/form-data">
            <div class="mb-3">
              <label for="qrCode" class="form-label">Upload your QR Code Image</label>
              <input class="form-control" type="file" accept="image/*" name="qrCode" id="qrCode">
            </div>
            <button type="submit" name="upload" class="btn btn-primary">
              Convert it
            </button>
          </form>
        </div>

      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

<?php

// Including the autoload file

require('vendor/autoload.php');

use Zxing\QrReader;

$msg = "";

if (isset($_POST['upload'])) {

$filename = $_FILES["qrCode"]["name"];

$filetype = $_FILES["qrCode"]["type"];

$filetemp = $_FILES["qrCode"]["tmp_name"];

$filesize = $_FILES["qrCode"]["size"];

$filetype = explode("/", $filetype);

if ($filetype[0] !== "image") {

$msg = "File type is invalid: " . $filetype[1];

} elseif ($filesize > 5242880) {

$msg = "File size is too big. Maximum size is 5 MB.";

} else {

$newfilename = md5(rand() . time()) . $filename;

move_uploaded_file($filetemp, "uploads/" . $newfilename);

$qrScan = new QrReader("uploads/" . $newfilename);

$msg = "QR Code is scanned the result is: " . $qrScan->text();

}

<!doctype html>

<head>

<title>QR Code Scanner PHP</title>

</head>

<h1 class="mb-4 text-center">QR Code Scanner</h1>

<label for="qrCode" class="form-label">Upload your QR Code Image</label>

</div>

Convert it

</button>

</form>

</div>

</body>

</html>

As you can see in the above php code we are validating the data coming such as we only upload image files and only upload upto 5mb and then we are using the move_uploaded_file() to upload the qrcode image to the uploads folder. And after that we are using the QrReader() constructor to read the contents of the qrcode and display it on the screen as shown below