How to Generate Different Types of QR Codes in Laravel: A Comprehensive Guide

 How to Generate QR Codes in Laravel

How to Generate Different Types of QR Codes in Laravel: A Comprehensive Guide

QR codes have become increasingly popular for their ability to encode data into a compact, easy-to-scan format. From sharing links and storing contact information to inventory management, QR codes provide versatility across a range of applications. In this blog, we’ll explore how to generate various types of QR codes in Laravel, including text-based, URL, Wi-Fi, and dynamic QR codes.

In this article we will learn how can you generate different types of QR codes on Laravel. We are going to build following QR code.

  • Simple text QR
  • Colored QR
  • Dotted QR
  • Color Gradient QR
  • Email QR
  • Phone Number QR
  • SMS QR
  • WIFI QR
  • GeoLocation QR
To generate QR we are going to use simple-qrcode package. Let's start with the integration process.

Install Simple-Qrcode package :

composer require simplesoftwareio/simple-qrcode "~4"

Create Routes :

Route::get('/QRGenerator', [QRController::class, 'show'])->name('qr.show');
Route::post('/qr-generate', [QRController::class, 'generateQR'])->name('qr.generate');

Show.blade.php - To view generated QR :

<!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>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        <!-- Styles -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
      
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1> QR Generation by thedevnerd </h1>
                </div>
            </div>
            <form action="{{route('qr.generate')}}" method="POST">
                @csrf
                <div class="row my-3">
                    <div class="col-md-12 text-center">
                        <input type="text" class="form-control" name="detail" required />
                    </div>
                </div>
                <div class="row my-4">
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-primary" name="action" value="generateQR">Generate QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-warning" name="action" value="generateColoredQR">Generate Colored QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-info" name="action" value="generateDottedQR">Generate Dotted QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-dark" name="action" value="generateGradientQR">Generate gradient QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-primary" name="action" value="generateEmailQR">Generate Email QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-warning" name="action" value="generatePhoneNumberQR">Generate Phone QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-info" name="action" value="generateSmsQR">Generate SMS QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-dark" name="action" value="generateWifiQR">Generate WIFI QR</button>
                    </div>
                    <div class="col-md-3 my-3">
                        <button type="submit" class="form-control btn-dark" name="action" value="generateGeoQR">Generate GeoLocation QR</button>
                    </div>
                </div>
            </form>

            <div class="row mt-5">
                <div class="col-md-12 text-center">
                    @if (session('image'))
                        {{session('image')}}
                    @else
                        <p>No QR code available.</p>
                    @endif
                </div>
            </div>
            
            
        </div>
    </body>
</html>

QRController.php :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use SimpleSoftwareIO\QrCode\Facades\QrCode;
use Illuminate\Support\Facades\Storage;

class QRController extends Controller
{
    public function show(){
        return view('QR.show');
    }
    public function generateQR(Request $request){
        $detail = $request->input('detail');
        switch ($request->input('action')) {
            case 'generateQR':
                $image = $this->generateSimpleQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            
            case 'generateColoredQR':
                $image = $this->generateColoredQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
    
            case 'generateDottedQR':
                $image = $this->generateDottedQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            case 'generateGradientQR':
                $image = $this->generateGradientQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            case 'generateEmailQR':
                $image = $this->generateEmailQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            case 'generatePhoneNumberQR':
                $image = $this->generatePhoneNumberQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            case 'generateSmsQR':
                $image = $this->generateSmsQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            case 'generateWifiQR':
                $image = $this->generateWifiQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            case 'generateGeoQR':
                $image = $this->generateGeoQR($detail);
                return redirect()->route('qr.show')->with('image', $image);
            default:
                return redirect()->back()->with('error', 'Invalid action');
        }
    }
}

Simple QR :

public function generateSimpleQR($detail){
        return QrCode::generate(
            $detail,
        );
    }

Simple Colored QR :

public function generateColoredQR($detail){
        return QrCode::size(200)
                ->backgroundColor(173, 216, 230)
                ->color(128, 0, 128)
                ->margin(1)
                ->generate($detail);

    }

Dotted QR :

public function generateDottedQR($detail){
        return QrCode::size(200)
                ->style('dot')
                ->eye('circle')
                ->backgroundColor(173, 216, 230)
                ->color(128, 0, 128)
                ->margin(1)
                ->generate($detail);
    }

Gradient QR :

public function generateGradientQR($detail){
        return QrCode::size(200)
                ->style('dot')
                ->eye('circle')
                ->backgroundColor(173, 216, 230)
                ->gradient(255, 182, 193, 128, 0, 128, 'diagonal')
                ->color(128, 0, 128)
                ->margin(1)
                ->generate($detail);
    }

Email QR:

public function generateEmailQR($detail){
        return QrCode::size(200)
                ->email('hello@thedevnerd.com', 'This is the email subject', 'This is the email body');
    }

Phone Number QR :

public function generatePhoneNumberQR($detail){
        return QrCode::size(200)
                ->phoneNumber('555-555-5555');
    }

SMS QR :

public function generateSmsQR($detail){
        return QrCode::size(200)
                ->SMS('555-555-5555');
    }

Wifi QR :

public function generateWifiQR($detail){
        return QrCode::size(200)->wiFi([
            'encryption' => 'WPA/WEP',
            'ssid' => 'SSID of the network',
            'password' => 'Password of the network',
            'hidden' => 'Whether the network is a hidden SSID or not.'
        ]);
    }

Geo Location QR :

public function generateGeoQR($detail){
        return QrCode::size(200)
                    ->geo(40.748817, -73.985428);
    }

Result :




Thank you for reading this article 😊

For any query do not hesitate to comment 💬


Previous Post Next Post

Contact Form