Laravel 11 - How to Generate Bar Code, Qr Code, Coda Bar etc
Laravel 11 - How to Generate Bar Code, Qr Code, Coda Bar etc
In this tutorial, we will discuss how to generate barcodes, QR codes, and Codabar in Laravel 11, which is useful for simplifying product identification and tracking.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through integrating barcode generation into a Laravel application using the milon/barcode package. You'll begin by setting up a new Laravel project or using an existing one, configuring it with MySQL and Pest for testing. After installing the barcode package, you’ll publish its config and create a dedicated controller for generating barcodes. A Blade view is created to display various barcode types including PHARMA, PHARMA2T, CODABAR, and QR codes using the DNS1D and DNS2D classes. The tutorial also demonstrates how to generate dynamic QR codes directly within the controller, making it useful for product URLs or custom data. Finally, you’ll run the app and see the generated barcodes in your browser.
Step # 1 : Set Up a New Laravel Project or Use an Existing One.
To begin, you can either start with an existing Laravel application or set up a brand-new project. If Laravel is installed globally on your system, you can create a new project by running.
laravel new codes
Alternatively, if you prefer using Composer, execute the following command,
composer create-project laravel/laravel --prefer-dist codes
During the setup, you’ll be asked to make a few configuration choices.
- Starter Kit: Select None to install Laravel without any built-in authentication.
- Testing Framework: Choose Pest for a clean and expressive testing setup.
- Database Driver: Pick MySQL as your database.
- Run Migrations: Type yes to run the default migrations and automatically create the necessary tables.
This will generate a fresh Laravel project named codes. Whether you use the laravel new command or Composer, you’ll end up with a clean installation of Laravel that’s ready to go with Pest configured for testing, MySQL connected, and initial database tables already set up.
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
cd c:xampp/htdocs/codes
This command will take you into the Laravel project folder named codes, allowing you to run Artisan commands and manage your application from the terminal.
Step # 3 : Install the Barcode Generation Package.
To enable barcode generation in your Laravel project, you’ll need to install a third-party package. The milon/barcode package is a popular choice for creating various barcode formats. Run the following command in your project’s root directory.
composer require milon/barcode
This command will download and install the milon/barcode package along with its dependencies via Composer. Once installed, you’ll be able to easily generate barcodes in multiple formats such as Code128, QR codes, and more directly in your views or controllers.
Step # 4 : Publish the Barcode Package Configuration.
Once the barcode package is installed, the next step is to publish its configuration file. This allows you to customize the package settings if needed. Use the following Artisan command.
php artisan vendor:publish --provider="Milon\Barcode\BarcodeServiceProvider"
Running this command will copy the package’s configuration file into your Laravel project’s config directory. This makes it easier to modify default settings related to barcode generation, such as supported formats or output preferences.
Step # 5 : Create a Barcode Controller.
Now it’s time to create a controller that will handle barcode-related logic in your application. Run the following Artisan command to generate a new controller.
php artisan make:controller BarcodeController
This command will create a file named BarcodeController.php in the app/Http/Controllers directory. Next, open the newly created controller and add the following method to load a view where the barcode will be displayed.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class BarcodeController extends Controller
{
public function generateCode()
{
return view('codes');
}
}
This method simply returns a view called codes.blade.php, which you’ll create in the next steps to render the barcode.
Step # 6 : Define the Route for Barcode Generation.
To display the barcode, you need to create a route that points to the generateCode method in your controller. First, import the BarcodeController at the top of your routes/web.php file.
use App\Http\Controllers\BarcodeController;
Then, add the following route to handle requests to the home page.
Route::get('/', [BarcodeController::class, 'generateCode']);
This route will trigger the generateCode method when someone visits the root URL (/) of your application, loading the view that displays the barcode.
Step # 7 : Create a Blade View for Displaying Barcodes.
To display the barcodes on the frontend, you need to create a Blade view file that will render the output. Create a file named codes.blade.php inside the resources/views directory, and add the following HTML code
<!DOCTYPE html>
<html>
<head>
<title>All About Laravel - Bar codes in Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
<h2>Bar codes</h2>
</div>
<div class="card-body">
<div class="row">
<!-- DNS1D: This is used for generating one-dimensional (1D) barcodes -->
<!-- //DNS2D: This is used for generating two-dimensional (2D) barcodes. -->
<div class="col-6">
<div class="mb-3"><h5>Pharma</h5>
{!! DNS1D::getBarcodeHTML('4445645656', 'PHARMA') !!}
</div>
</div>
<div class="col-6">
<div class="mb-3"><h5>QRCODE</h5>
{!! DNS2D::getBarcodeHTML('4445645656', 'QRCODE') !!}
</div>
</div>
<div class="col-6">
<div class="mb-3"><h5>PHARMA2T</h5>
{!! DNS1D::getBarcodeHTML('4445645656', 'PHARMA2T') !!}</div>
</div>
<div class="col-6">
<div class="mb-3"><h5>CODABAR</h5>
{!! DNS1D::getBarcodeHTML('4445645656', 'CODABAR') !!}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This view uses Bootstrap for styling and leverages the milon/barcode package to render different types of barcodes (both 1D and 2D) using the DNS1D and DNS2D facades. You’ll see barcodes like PHARMA, PHARMA2T, CODABAR, and a QR Code displayed when accessing the homepage.
Step # 8 : Run and Test Your Application.
Start the Laravel development server by running the following command in your terminal.
php artisan serve
Once the server starts, open your browser and visit: http://127.0.0.1:8000.
You should see the codes.blade.php view rendered in your browser, displaying multiple barcode formats including PHARMA, PHARMA2T, CODABAR, and a QR Code.
You can also generate QR codes dynamically within your controller, for example, for individual products or URLs. Let’s modify the BarcodeController to generate a QR code for a specific link.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Milon\Barcode\DNS1D;
use Milon\Barcode\DNS2D;
class BarcodeController extends Controller
{
public function generateCode()
{
//DNS1D: This is used for generating one-dimensional (1D) barcodes
//DNS2D: This is used for generating two-dimensional (2D) barcodes.
$qrcode = new DNS2D();
$qrcode->setStorPath(__DIR__.'/cache/');
$html = $qrcode->getBarcodeHTML('https://www.youtube.com/@codeshotcut', 'QRCODE');
return view('codes', compact('html'));
}
}
Now update codes.blade.php to display the generated QR code.
<!DOCTYPE html>
<html>
<head>
<title>All About Laravel - Bar codes in Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
<h2>Bar codes</h2>
</div>
<div class="card-body">
<div class="row">
<!-- DNS1D: This is used for generating one-dimensional (1D) barcodes -->
<!-- //DNS2D: This is used for generating two-dimensional (2D) barcodes. -->
<div class="col-12">
<div class="mb-3"><h5>Qr code from Method</h5>
{!! $html !!}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you reload the page at http://127.0.0.1:8000, you’ll now see a QR code rendered directly from the controller. This is useful for generating codes based on user input, product details, URLs, or anything dynamic in your application.
Conclusion
By following this guide, you’ve successfully integrated barcode generation into your Laravel application using the milon/barcode package. Your application can now generate and display various barcode types, including 1D and 2D formats, directly within the Blade views. Additionally, you’ve learned how to dynamically generate QR codes through the controller, making it easy to create barcodes for products, URLs, or other dynamic data. This setup enhances the functionality of your Laravel application by adding barcode generation capabilities, allowing you to offer a more feature-rich and interactive experience for your users.
For more details, please refer to the milon/barcode package documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments