How to Generate Various QR Codes in Laravel 10 Application

Last Updated on by in Laravel

QR codes are a versatile technology that can be used for many purposes, from encoding URLs and contact information to facilitating secure transactions.

As a Laravel developer, you can integrate QR code generation directly into your application to enhance user interactions and offer innovative features.

In this comprehensive guide we will walk you through the process of generating various types of QR codes in Laravel using simplesoftwareio/simple-qrcode pacakge, from a simple QR code to a custom color QR code.

This tutorial showcases step-by-step process on how to generate QR codes using the QrCode package. We start with a simple QR code of size 300 that encodes the text “RemoteStack.” The generated QR code is displayed in a Bootstrap-styled card, making the interface clean and modern.

Next, the tutorial progresses to creating a color QR code by specifying a custom background color for the QR code using RGB values. This customization can help make QR codes more visually appealing and on-brand.

By the end of this guide, you will have the knowledge to create and customize various QR codes in your Laravel application, enhancing its functionality and user experience.

Laravel 10 Simple QR Code Generator Tutorial with Example

  • Step 1: Create Laravel Project
  • Step 2: Add Database Details
  • Step 3: Install QR Code Package
  • Step 4: Register QR Code Service
  • Step 5: Build Controller
  • Step 6: Add Route
  • Step 7: Generate QR Codes in Blade View
  • Step 8: Run Laravel App

Create Laravel Project

First, head over to the terminal and use the suggested command to install the new project. Don’t forget to get inside the project folder.

composer create-project --prefer-dist laravel/laravel laravel-demo
cd laravel-demo

Add Database Details

The .env config file helps you establish the database connection, make sure to add the database credentials in this file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

If you are using MAMP local server in macOs; make sure to append UNIX_SOCKET and DB_SOCKET below database credentials in .env file.

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Install QR Code Package

Get into the command prompt, type the given command, and begin installing the simple-qrcode library; it profoundly helps create various kinds of QR codes in the laravel app.

composer require simplesoftwareio/simple-qrcode

Register QR Code Service

You have to register the QR code services in to 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,
    ]

Build Controller

In laravel, all the business logic goes into the controller file, and we need a controller to create one by using the given command.

php artisan make:controller QrCodeController

Next, head over to resources/views/QrCodeController.blade.php and add the provided code.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class QrCodeController extends Controller
{
    public function index()
    {
      return view('qrcode');
    }
}

Add Route

In the controller we defined the function to load the view file, code in the controller is run by routes, so go ahead and define the new route in routes/web.php file.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\QrCodeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('/generate-qrcode', [QrCodeController::class, 'index']);

Generate QR Codes in Blade View

We will show you how to use the view file and generate simple and colored QR Codes in laravel.

Now, you are ready to set up a blade view file, hence create the blade view file within the views folder, after that add the provided code in the resources/views/qrcode.blade.php file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel Generate QR Code Examples</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="card">
            <div class="card-header">
                <h2>Simple QR Code</h2>
            </div>
            <div class="card-body">
                {!! QrCode::size(300)->generate('RemoteStack') !!}
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h2>Color QR Code</h2>
            </div>
            <div class="card-body">
                {!! QrCode::size(300)->backgroundColor(255,90,0)->generate('RemoteStack') !!}
            </div>
        </div>
    </div>
</body>
</html>

Start Application

Eventually, use the PHP artisan command to start the laravel server, also use the given url to view the app.

php artisan serve
http://127.0.0.1:8000/generate-qrcode

Create Different Barcodes in Laravel

Conclusion

In this tutorial, you’ve learned how to generate different types of QR codes in a Laravel application. From simple to color-customized QR codes, these examples demonstrate the flexibility and ease of use of the simple-qrcode package in Laravel.

Enhance your application with QR codes today!

Age calculator tool

🎂✨ Discover your age in detail and with countdown to your next birthday with fun facts! 🎈🎉

Calculate your age now!
Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.