Laravel 11 QR Code - Generating QR Codes using Laravel 11 and Storing QR Code Images on the Server

Steps to Generate QR Codes in Laravel 11

             Laravel 11 allows you to dynamically generate QR codes using various libraries. One popular choice is the simple-qrcode package. Here’s how you can generate QR codes in Laravel 11, along with storing QR code images on the server.

Table Of Content

1 Prerequisites

1.) PHP version of 8.2
2.) Composer

2 Introduction

A QR code, or Quick Response code, is a 2D barcode that stores information. This guide will show how to dynamically generate QR codes using Laravel 11 and store QR code images on the server.

3 Install Laravel Project

First, ensure Composer is installed, then run the following to create a new Laravel project:

composer create-project laravel/laravel laravel-qrcode-app

Then, navigate to your project directory:

cd laravel-qrcode-app

4 Install the QR Code Library

To generate QR codes in Laravel 11, install the simple-qrcode package:

composer require simplesoftwareio/simple-qrcode

5 Generate QR Code Examples

Here are some examples to generate Various types of QR code images using Laravel.

1.URL
Specify the website URL including the protocol (HTTP or HTTPS) to recognize the QR code as a URL.

$qrContent = 'https://getsamplecode.com/';

2.TEXT:
Specify the Text to Generate QR Code.

$qrContent = 'QR Code Generated by GetSampleCode';

3.Phone Number
Specify the Phone Number including Country Code to Generate QR Code.

$qrContent = 'tel:+16471234567';

4.SMS
Specify the Phone Number including Country Code and pre filled message to Generate QR Code.

$qrContent = 'sms:+16471234567:Samplemessage';

5.EMAIL
Specify the Email Address to Generate QR Code.

$qrContent = ''mailto:getsamplecode@gmail.com';';

6 Create New Controller - QrcodeController

Create a QrCodeController to handle the logic for generating QR codes:

php artisan make:controller QrCodeController

In the controller, you can define methods for displaying and generating QR codes dynamically based on user input. This allows for flexibility in generating QR codes for URLs, texts, phone numbers, and more.

<?php
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use SimpleSoftwareIO\QrCode\Facades\QrCode;


class QrCodeController extends Controller
{
    public function index()
    {
        return view('qrcode');
    }
    public function generate(Request $request)
    {


        $qrcode_type=$request->qrcode_type;
      if($qrcode_type==1 || $qrcode_type==2)
       $data=$request->qr_code_content;
      else if($qrcode_type==3)
       $data='tel:+'.$request->qr_phone_number;
       else if($qrcode_type==4)
       $data='sms:'.$request->qr_sms_phone_number;
       else if($qrcode_type==5)
       $data='mailto:'.$request->qr_email_email_id;
       else if($qrcode_type==6)
       $data='mailto:'.$request->qr_email_extended_email_id.'?subject='.urlencode($request->qr_email_extended_subject).'&body='.urlencode($request->qr_email_extended_message);
       else if($qrcode_type==7)
       $data='skype:'.urlencode($request->qr_skype_username).'?call';
       else if($qrcode_type==8)
       {
        $data  = 'BEGIN:VCARD'."\n";
        $data .= 'VERSION:3.0'."\n";
        $data .= 'N:'.$request->qr_business_card_first_name."\n";
        $data .= 'FN:'.$request->qr_business_card_last_name."\n";  
        $data .= 'TEL;TYPE=cell:'.$request->qr_business_card_phone."\n";
        $data .= 'EMAIL:'.$request->qr_business_card_email."\n";
        $data .= 'ADR;TYPE=HOME;'.'LABEL="'.$request->qr_business_card_address."\n";
        $data .= 'END:VCARD';
       }
       $hex_data   = bin2hex($data);
       $save_name  = 'qrcodes/'.$hex_data . '.png';
       $qrCode = QrCode::size(600)->margin(5)->generate($data);

     //   $qrCode = QrCode::format('png')->size(300)->generate($data);

      //  Storage::disk('local')->put($save_name, $qrCode);

        return view('qrcode', ['qrCode' => $qrCode]);
    }
}


?>

7 Create Qr Code Blade View File

Next, create a qrcode.blade.php view file to display the form for QR code generation. Users will select the type of QR code they want to generate (e.g., text, URL, email) and input the necessary data.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel File Storage with Amazon S3 </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>

<body>
<div class="container d-flex justify-content-center align-items-center" style="height: 100vh;">

    <div class="panel panel-primary">
      <div class="panel-heading"><h2>Laravel File Storage with Amazon S3 </h2></div>
      <div class="panel-body">

        @if (Session::get('message'))
        <div class="alert alert-success alert-block">
                <strong>{{Session::get('message')}}</strong>
        </div>
        @endif

        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('generate') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
            <div class="col-md-12">
                    <label class="label-text">QR CODE Type:                    </label>
                    <div class="form-group">
                      <select class="form-control" name="qrcode_type" required onChange="choose_content(this.value)">
                      <option value="">Select</option>  
                      <option value="1">Text</option>
                        <option value="2">URL</option>
                        <option value="3">Phone Number</option>
                        <option value="4">SMS</option>
                        <option value="5">Email Simple</option>
                        <option value="6">Email Extended</option>
                        <option value="7">Skype</option>
                        <option value="8">Business Card</option>

                      </select>
                    </div>
                  </div>
                  <div id="text_content" class="qr_content"  >
                  <div class="col-md-12">
                    <label class="label-text">Content</label>
                    <div class="form-group">
                      <input class="form-control" type="text" name="qr_code_content" placeholder="Content" >
                     
                    </div>
                  </div>
                </div>
                <div id="phone"  class="qr_content">
                <div class="col-md-12">
                    <label class="label-text">Phone Number</label>
                    <div class="form-group">
                    <input class="form-control" type="text" name="qr_phone_number" placeholder="Phone Number" >
                    </div>
                  </div>
                </div>
                

                <div id="sms" class="qr_content">
                <div class="col-md-12">
                    <label class="label-text">Phone Number</label>
                    <div class="form-group">
                    <input class="form-control" type="text" name="qr_sms_phone_number" placeholder="Phone Number" >
                    </div>
                  </div>
                 
                </div>
                <div id="email_simple"  class="qr_content">
                <div class="col-md-12">
                    <label class="label-text">Email ID</label>
                    <div class="form-group">
                      <input class="form-control" type="text" name="qr_email_email_id" placeholder="Email ID" >
                     
                    </div>
                  </div>
                </div>
                <div id="email_extended"  class="qr_content">
                <div class="col-md-12">
                    <label class="label-text">Email ID</label>
                    <div class="form-group">
                    <input class="form-control" type="text" name="qr_email_extended_email_id" placeholder="Email ID" >
                    </div>
                  </div>
                  <div class="col-md-12">
                    <label class="label-text">Subject</label>
                    <div class="form-group">
                    <input class="form-control" type="text" name="qr_email_extended_subject" placeholder="Subject">
                    </div>
                  </div>
                  <div class="col-md-12">
                    <label class="label-text">Message</label>
                    <div class="form-group">
                    <input class="form-control" type="text" name="qr_email_extended_message" placeholder="Message" >
                    </div>
                  </div>
                </div>
                <div id="skype"  class="qr_content">
                <div class="col-md-12">
                    <label class="label-text">Skype Username</label>
                    <div class="form-group">
                    <input class="form-control" type="text" name="qr_skype_username" placeholder="Skype Username" >
                    </div>
                  </div>
                </div>
                <div id="business_card"  class="qr_content">
                <div class="col-md-12">
                    <label class="label-text">First Name</label>
                    <div class="form-group">
                      <input class="form-control" type="text" name="qr_business_card_first_name" placeholder="First name" >
                    </div>
                  </div>
                  <div class="col-md-12">
                    <label class="label-text">Last Name</label>
                    <div class="form-group">
                      <input class="form-control" type="text" name="qr_business_card_last_name" placeholder="Last name" >
                    </div>
                  </div>
                  <div class="col-md-12">
                    <label class="label-text">Phone</label>
                    <div class="form-group">
                      <input class="form-control" type="text" name="qr_business_card_phone" placeholder="Last name" >
                    </div>
                  </div>
                  <div class="col-md-12">
                    <label class="label-text">Email</label>
                    <div class="form-group">
                      <input class="form-control" type="text" name="qr_business_card_email" placeholder="Email" >
                    </div>
                  </div>
                  <div class="col-md-12">
                    <label class="label-text">Address</label>
                    <div class="form-group">
                      <input class="form-control" type="text" name="qr_business_card_address" placeholder="Address" >
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="btn-box" style="text-align:center;margin-top:20px">
                    <button class="btn btn-success" type="submit" name="generate">Generate QR Code
                    </button>
                  </div>
                  </div>                  
</div>
        </form>
       

        <center>{{ isset($qrCode) ? $qrCode : '' }}</center>

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

</html>
<script src="https://getsamplecode.com/fassets/js/jquery-3.4.1.min.js"></script>

<script>
   $('.qr_content').hide();
    function choose_content(id)
    {
        $('.qr_content').hide();
        if(id==1 || id==2 )
        $('#text_content').show();
        else if(id==3)
        $('#phone').show();
        else if(id==4)
        $('#sms').show();
        else if(id==5)
        $('#email_simple').show();
        else if(id==6)
        $('#email_extended').show();
        else if(id==7)
        $('#skype').show();
        else if(id==8)
        $('#business_card').show()

    }
</script>s

8 Define a Route

Define routes in web.php for accessing the QR code generation:

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


Route::get('/', function () {
    return view('welcome');
});
Route::get('index', [ QRCodeController::class, 'index' ]);
Route::post('/generate-qrcode', [QRCodeController::class, 'generate'])->name('generate');

9 Storing QR Codes on the Server

After generating the QR code, you can store the QR code image on the server using Laravel’s storage functionality:

Storage::disk('local')->put($saveName, $qrCode);

10 Folder Structure

The folder structure will look like this:

11 Run Laravel Server to Test the App

Use the following artisan command to Test the App.

php artisan serve

Visit the URL http://127.0.0.1:8000

12 Conclusion

With these steps, you can easily generate QR codes in Laravel 11 and store QR code images on the server dynamically. This guide offers flexibility for generating QR codes with various types of content, from URLs to emails.

Tags