How to Create and Display a QR Code in Symfony

Introduction

In this tutorial, we will explore the process of creating and displaying a QR code in a Symfony project. Whether you’re building a web application that generates event tickets, adds a layer of security through 2-factor authentication, or simply aims to share URLs or contact information quickly, integrating QR codes can enhance functionality and user experience. We’ll cover installation, QR code generation, and rendering it in a Symfony twig template.

Prerequisites

• PHP 7.4 or higher
• Symfony 4.4 or newer
• Composer installed
• Basic understanding of Symfony framework

Step-by-Step Instructions

Step 1: Installing the Bundle

The first step is to install a bundle that allows QR code generation. For this purpose, we’ll use the endroid/qr-code-bundle. Run the following command in your project directory:

composer require endroid/qr-code-bundle

This command installs the bundle and enables it in Symfony flex automatically.

Step 2: Configuring the Route

Create a new controller or use an existing one to house the QR code generation logic. For this example, we’ll create a QrCodeController.php in the src/Controller directory. Add the following route configuration:

#[Route('/qr-code', name: 'qr_code')]
public function generateQrCode(): Response
{
    // QR code generation logic will go here
}

We’ve now set up a path that will lead to our QR code generation function.

Step 3: Generating the QR Code

In the generateQrCode() method, add the following code to generate a QR code:

$qrCode = new QrCode('This is a QR code content!');
$qrCode->setSize(300); // Size in pixels

// Optionally, customize your QR code
$qrCode->setMargin(10);
$qrCode->setEncoding('UTF-8');
$qrCode->setErrorCorrectionLevel(ErrorCorrectionLevel::HIGH);
$qrCode->setForegroundColor(['r' => 0, 'g' => 0, 'b' => 0, 'a' => 0]);
$qrCode->setBackgroundColor(['r' => 255, 'g' => 255, 'b' => 255, 'a' => 0]);

// To save the QR code
// $qrCode->writeFile(__DIR__.'/../../public/qrcodes/your-qr-code.png');

// To directly output to the browser
$response = new Response($qrCode->writeString(), 200, ['Content-Type' => 'image/png']);
return $response;

This code snippet creates a basic QR code and sets various properties like size, margin, encoding, error correction level, and colors. We’ve commented out the line that saves the QR code as a file, but you can uncomment it if you need to store the QR code image.

Step 4: Displaying the QR Code in Twig

To display the QR code in a Symfony twig template, use the following twig syntax:

{{ path('qr_code') }}

This code will generate a URL to the route where the QR code is generated. If you want to display the QR code as part of an HTML page, you could embed it within an <img> tag like so:

<img src="{{ path('qr_code') }}" alt="QR Code">

And there you have it, your very own QR code displayed in a Symfony application!

Conclusion

Throughout this tutorial, we’ve explored how to integrate QR code functionality into a Symfony application. We installed the necessary bundle, configured a route for generating QR codes, wrote the logic to generate and potentially save QR codes, and finally, displayed the QR code in a twig template. This functionality can be extended in myriad ways depending on your project’s requirements, such as generating dynamic QR codes for unique URLs or user data, enhancing application security, or providing easy access to online resources.

By leveraging bundles and Symfony’s robust framework, adding sophisticated features like QR code generation becomes manageable, even for developers new to the ecosystem. Keep experimenting and exploring Symfony’s extensive capabilities to enhance your projects further.