Generate Different Types of QR Codes in Laravel

10 mins0
generate different type of QR codes in laravel

Nowadays, QR codes are an essential part of a web application. It doesn’t matter if you are creating an E-commerce site, social media, payment site, or any other, It helps to provide an easy user interface.

This blog will teach you how to create a QR code for your Laravel application using the simplesoftwareio/simple-qrcode Package. This package provides all functionality for almost all kinds of QR codes.

You can easily install this package in Laravel using the Composer package. after installation, it requires package services to be registered in config/app.php. After that, you can use it as per your requirements.

In this tutorial, you must follow these steps to create a QR code for your application from scratch.

  1. Create a new Application
  2. Database Configuration
  3. Install the QR Code Package
  4. Register for QR Code Service
  5. Build Controller
  6. Creating Route
  7. Create Blade File
  8. Running Application

Note: Skip steps 1 and 2 if you already have an application.

Create a new Application

First, open the terminal and create a new Laravel application using the below command :

composer create-project --prefer-dist laravel/laravel QrCodeApp

Database Configuration

Let’s configure a database for your application. If you don’t have a database then create a new one. After creating the database open the .env file from the root directory of your project. if the .env file is missing from the project then copy content from the .env.example and create a file. .env file defines many common environment variables

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=user_name
DB_PASSWORD=password

Install QR Code Package

Let’s head back to the terminal at the root directory of the project and enter the below command :

composer require simplesoftwareio/simple-qrcode

It will take some time to install the simplesoftwareio/simple-qrcode package. We will use this package to generate QR codes.

Register QR Code Service

Now, we have installed our package but to use it, we need to register it to our application. you can do that by registering it into the config\app.php file. so open the file and update the providers and alias array with the given below services.

<?php

return [

    'providers' => [
        ...
        SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class,
    ],

    'aliases' => [
        ...
        'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class,
    ]
];

Building a new Controller for QR Code

Let’s create a controller which will handle, user requests and pass user input to view. To create a new controller enter the below command into your terminal :

php artisan make:controller QrCodeController

Now let’s modify our controller which will take user input and pass it to view. For that make the following changes to your controller :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class QrCodeController extends Controller
{
    public function showQrCode(Request $request)
    {
        $user_name = $request->input('name');
        return view('qr_code', compact('user_name'));
    }
}

Adding QR Code Related Routes

Let’s create a route that will interact with the QrCodeController and provide a link to view.

<?php

use App\Http\Controllers\QrCodeController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::post('/show-qr-code',[QrCodeController::class, 'showQrCode'])->name('qr_code.show');

Creating Blade Files or Views

Here, we are planning to display a QR Code from user input so we need two views. First will take user input like name and second will display the QR code for that name.

We will use the default welcome view to get user input. In this blade file, we will remove all content and just add a simple form with one input.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body class="antialiased">
        <div class="container">
            <form action="{{route('qr_code.show')}}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6 offset-3 form-group mt-5">
                        <label for="qrcode">Enter Name :</label>
                        <input type="text" name="name" class="form-control" autofocus>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 offset-3 form-group mt-3">
                        <button type="submit" class="btn btn-outline-primary" >Generate QR Code</button>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

Let’s create a new blade file for displaying QR codes to the user. Here, we will bootstrap for styling output.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel Generate QR Code Examples - Codewolfy</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h2>Simple QR Code</h2>
                    </div>
                    <div class="card-body">
                        {!! QrCode::size(150)->generate($user_name) !!}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h2>Simple QR Code In Red Color</h2>
                    </div>
                    <div class="card-body">
                        {!! QrCode::size(150)->backgroundColor(255, 0, 0)->generate($user_name) !!}
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h2>For Phone Number</h2>
                    </div>
                    <div class="card-body">
                        {!! QrCode::size(150)->phoneNumber('000-000-0000') !!}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h2>For Website URL</h2>
                    </div>
                    <div class="card-body">
                        {!! QrCode::size(150)->generate(Request::url()); !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Running Application

php artisan serve

Open the below URL in your browser :

http://127.0.0.1:8000

It will show the webpage and with a self URL and display it to a browser window.

Related Articles