SnapShooter Backups Server, Database, Application and Laravel Backups - Get fully protected with SnapShooter

PHP QR Code Generator with Source Code

QR code is awesome. It makes information sharing so much easier, with a small piece of QR code, we can share a website address, contact number, and email address. QR code also makes things so much more accessible, we can make a purchase, log in to a WIFI network, and check in a cafe by scanning a QR Code.

In this tutorial, we will create a QR code generator as shown below. We will be using the PHP built-in development server, so you do not need to set up any additional services to run this application.

Requirement

  • PHP version > 7.4: we will need PHP at least 7.4 as this is the oldest version PHP still supports.
  • Tailwind CSS: we are going to use Tailwind CSS to make our generator look good.

Building the UI

We are going to build a very simple and neat generator interface. Copy the code below to an index.php file:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>PHP QR Code Generator</title>
</head>

<body class="h-screen w-full flex flex-col items-center justify-center gap-10">

<h1 class="text-5xl font-bold font-serif">
    PHP QR Code Generator
</h1>

<div class="w-full px-28 grid grid-cols-2 gap-4">
    <div class="border border-gray-300 p-6 rounded-lg">
        <form action="index.php" method="get">
            <div class="mb-6">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Content</label>
                <textarea type="text"
                          name="content"
                          class="block p-4 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"></textarea>
            </div>

            <button type="submit"
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                Generate
            </button>
        </form>
    </div>

    <div class="border border-gray-300 p-6 rounded-lg flex items-center justify-center">
        <?php if (isset($result) && !empty($result)): ?>
            <img src="<?= $result ?>"/>
        <?php endif; ?>
    </div>
</div>

</body>
</html>

Open your terminal (CLI) console and run the command below to start PHP built-in server:

php -S localhost:8888

Keep the server running and navigate to the URL http://localhost:8888 from your browser, you should be able to see a web page as shown below:

Apparently, this is just a static page, nothing is working yet. The variable $result is going to f

Building the QR code generator

Install Dependency

The only dependency of this application is https://github.com/chillerlan/php-qrcode. We will use the package to handle the heavy lifting of QR codes.

Run the command below to install the package via Composer:

composer require chillerlan/php-qrcode

Write the generator code

At the beginning of the index.php page, we write the code for generating the QR code image:

<?php

use chillerlan\QRCode\QRCode;

include './vendor/autoload.php';

$result = '';

if (isset($_GET['content']) && !empty($_GET['content'])) {
    $result = (new QRCode())->render($_GET['content']);
}
?>

The logic is pretty simple, we get the user's input via $_GET['content'] variable and invoke the QRCode class's render method. We have chosen to use $_GET so that when we refresh the browser, it can still render the previous QR code.

The result

That's it. We have just built an awesome PHP QR code generator with a few lines of PHP code. Your PHP QR code generator should be able to generate any text to a QR code as shown below:

If you follow along with the tutorial step by step, you will get all the source code in place. However, if you are feeling lazy or have a need to download the complete source code from us. You can do so by paying us a small fee. Your support will enable us to produce better and more in-depth tutorials.

Download Source Code ($9)