Generate Custom Bar-code or QR code in Laravel Application

9 mins0
Generate custom barcode or qr code in laravel application

The main purpose of this blog is to create and display barcodes or QR codes based on user input. In the below examples, we are going to use milon/barcode library.

For your better understanding, we have divided the program into some parts.

  • Install Barcode Package (milon\barcode)
  • Register Barcode Package
  • Create a new Controller for Barcode
  • Add Barcode Related Route
  • Create View to Display Barcode
  • Test Our Application

let’s assume you have a Laravel application. If you don’t have any application then create a new application and perform further steps into it.

Install Barcode Package

Creating and displaying a barcode or QR code in your application, we are going to use milon/barcode library. This library contains all functionality to create and display all kinds of barcodes.

So let’s install milon/barcode into our Laravel application using the below command :

composer require milon/barcode

This command will download related files to your application.

Register Barcode Package

Before using this package, we need to register it into your application config file. So you can access it whenever required. To register open app.php file and add those lines :

<?php

    return [

    'providers' => [
        ...
        Milon\Barcode\BarcodeServiceProvider::class,
    ],

    'aliases' => [
        ...
        'DNS1D' => Milon\Barcode\Facades\DNS1DFacade::class,
        'DNS2D' => Milon\Barcode\Facades\DNS2DFacade::class,
    ]
];

Create a new controller for Barcode

Let’s create a new controller that will handle your barcode methods. you will need this controller to load the blade file. You can use the existing controller if required. To create a new controller enter the below command into your terminal :

php artisan make:controller BarcodeController

It will create a Barcode controller. 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;
use Symfony\Component\Console\Input\Input;

class BarcodeController extends Controller
{
    public function showBarcode(Request $request)
    {
        $user_input = $request->input('barcode');
        return view('show_barcode', compact('user_input'));
    }
}

Barcode Controller has only one method which will get request input and pass this input to the QR code display page.

Add Barcode Related Route

Let’s create a route that will interact with the barcode controller and provide a link to view. thus updating the routes/web.php file.

<?php

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

Route::get('/', function () {
    return view('welcome');
});
Route::post('/generate-barcode',[BarcodeController::class, 'showBarcode'])->name('barcode.show');

Whenever the user hits this route with the post method then it will call showBarcode methods.

Creating View to Display Barcode

In this example, we will create a QR code on user input so you need two views. One will take user input and the second will display a QR code to the user. Here, we will modify the default welcome view for user input and create a new view for displaying barcodes. >We can create any type of barcode or QR code using this library. Modify the below views :

resources/views/welcome.blade.php :

<!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('barcode.show')}}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6 offset-3 form-group mt-5">
                        <label for="barcode">Enter Value For Barcode :</label>
                        <input type="text" name="barcode" 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 Barcode</button>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

resources/views/show_barcode.blade.php:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Laravel Generate Barcode 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">
        <h1 class="mb-4 mt-4">1D Barcodes</h1>
        <div class="row mt-2">
            {!! DNS1D::getBarcodeHTML('4445645656', 'IMB') !!}
        </div>
        <div class="row mt-2">
            {!! DNS1D::getBarcodeHTML('4445645656', 'CODABAR') !!}
        </div>
        <div class="row mt-2">
            {!! DNS1D::getBarcodeHTML('4445645656', 'CODE11') !!}
        </div>
        <div class="row mt-2">
            {!! DNS1D::getBarcodeHTML('4445645656', 'PHARMA') !!}
        </div>
        <h1 class="mb-4 mt-4">2D Barcodes</h1>
        <div class="row">
            <label>QR Code</label>
            {!! DNS2D::getBarcodeHTML($user_input, 'QRCODE')!!}
        </div>
        <div class="row">
            <label>Data Matrix Barcode</label>
            {!! DNS2D::getBarcodeSVG('4445645656', 'DATAMATRIX') !!}
        </div>
    </div>
</body>
</html>

Testing Our Application

php artisan serve

open below URL into your browser :

http://127.0.0.1:8000

Here, the Home page will ask for input and when we submit this input It will display the QR code and Barcode with the input value. In this view, we have created multiple types of barcodes. So use it according to your requirements.

Related Articles