Laravel 9 - How to generate Bar Code, Qr Code, Codabar etc
Laravel 9 - How to generate Bar Code, Qr Code, Codabar etc
In this tutorial, we’ll explore generating various codes, including barcodes, QR codes, and Codabar in Laravel 9 for product labeling and information access.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we cover how to integrate the milon/barcode package into a Laravel 9 application to generate barcodes and QR codes. We begin by creating a fresh Laravel project and setting up front-end assets using Vite. After that, we install the milon/barcode package and optionally publish its configuration file. A controller is then created with an index method that returns a Blade view, where various types of barcodes are displayed using simple helper functions. We define a route to load this view and finally test the setup by running the Laravel development server and accessing the /barcode URL. If everything is configured properly, the page will display multiple barcode formats and a QR code, confirming successful integration.
Step # 1 : Create a Fresh Laravel 9 Project.
To get started with barcode integration, you'll first need a fresh Laravel 9 project. If you have Laravel globally installed, use the following command to create a fresh project.
laravel new barcode
Alternatively you can use Composer to create a fresh project.
composer create-project laravel/laravel --prefer-dist barcode
Once you run the installation command, Laravel will generate a fresh project with all the necessary files and folder structure. At this point, your Laravel environment is ready for barcode integration and front-end customization.
Step # 2 : Access the Project Directory & Set Up Front-End Assets.
Open your terminal (e.g., Git Bash) and move into your newly created Laravel project folder. For example.
cd /c/xampp/htdocs/barcode
Next, install the required front-end dependencies and start the Vite development server.
npm install && npm run dev
This will compile your front-end assets and keep them updated as you make changes. Open a new terminal tab or window for running Laravel-specific commands, so you can keep Vite running without interruption.
Step # 3 : Install the Barcode Package.
To enable barcode generation in your Laravel project, you'll need to install the milon/barcode package. Run the following command in your project directory.
composer require milon/barcode
This package provides an easy way to generate various types of barcodes directly in your views using simple Blade syntax. Once installed, you're ready to start using barcodes in your application.
Step # 4 : Publish the Configuration File (Optional).
If you’d like to customize the default settings of the barcode package, you can publish its configuration file using the command below.
php artisan vendor:publish --provider="Milon\Barcode\BarcodeServiceProvider"
This will copy the package’s config file into your project’s config directory, allowing you to tweak options as needed. If the default settings work for your use case, you can skip this step.
Step # 5 : Create a Controller.
Next, create a controller to handle barcode related logic. Run the following Artisan command to generate a new controller.
php artisan make:controller ProductController
Next, open that file and add an index method that returns a Blade view called barcode. Here's how the controller should look.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ProductController extends Controller
{
public function index()
{
return view('barcode');
}
}
The index method handles incoming requests to the controller and returns a Blade view named barcode. This view will be used to display the barcode output to the user. By separating the logic into a controller, your code remains clean, organized, and easier to maintain. You can later expand this method to pass dynamic data such as product codes or barcode types from a database or form input to the view for more flexible barcode generation.
Step # 6 : Create a View to Display Barcodes.
To render the barcodes in your browser, create a new Blade view file named barcode.blade.php inside the resources/views directory (Path: resources/views/barcode.blade.php). Add the following HTML code to that file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laravel Generate Barcode Examples - Code Shotcut</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">
<h1>Code Shotcut - Bar Code, QR Code etc</h1>
<!-- Pass product code as the 1st parameter -->
<div class="mb-3">{!! DNS1D::getBarcodeHTML('4445645656', 'PHARMA') !!}</div>
<div class="mb-3">{!! DNS2D::getBarcodeHTML('', 'QRCODE') !!}</div>
<div class="mb-3">{!! DNS1D::getBarcodeHTML('4445645656', 'PHARMA2T') !!}</div>
<div class="mb-3">{!! DNS1D::getBarcodeHTML('4445645656', 'CODABAR') !!}</div>
<div class="mb-3">{!! DNS1D::getBarcodeHTML('4445645656', 'KIX') !!}</div>
<div class="mb-3">{!! DNS1D::getBarcodeHTML('4445645656', 'RMS4CC') !!}</div>
<div class="mb-3">{!! DNS1D::getBarcodeHTML('4445645656', 'UPCA') !!}</div>
</div>
</body>
</html>
This Blade file uses the milon/barcode package to generate different types of barcodes and a QR code using the provided helper methods like DNS1D::getBarcodeHTML() and DNS2D::getBarcodeHTML(). These functions accept the data and barcode format as parameters, rendering them directly in the view. The page is also styled using Bootstrap to ensure a clean and responsive layout. You can easily update the data passed to the barcode methods or loop through dynamic values as needed to fit your specific use case.
Step # 7 : Define a Route.
To display the barcode view in the browser, you need to set up a route and connect it to the controller method you created earlier. First, import the controller at the top of your routes/web.php file.
use App\Http\Controllers\ProductController;
Then, define a route that points to the index method of ProductController.
Route::get('/barcode', [ProductController::class, 'index']);
When you visit /barcode in your browser, Laravel will call the index method in ProductController, which returns the barcode view with all the generated codes.
Step # 8 : Test the Barcode Feature.
Now that everything is set up, it's time to test it out. Start the Laravel development server by running.
php artisan serve
Once the server is running, open your browser and visit: http://127.0.0.1:8000/barcode. If everything was configured correctly, you should see a page displaying various types of barcodes and a QR code.
Congrats, your barcode generator is now up and running!
Conclusion
By following this guide, you’ve successfully integrated barcode generation into your Laravel 9 application using the milon/barcode package. Starting from a fresh Laravel setup, you configured the front-end environment with Vite, installed the barcode package, created a controller and view, defined a route, and tested the barcode output in the browser. Your application is now ready to display both 1D and 2D barcodes with ease. This setup provides a clean and flexible structure that you can easily build upon as your project grows or requirements change.
For more details, please refer to the official documentation of the milon/barcode package. It provides a full list of supported barcode types, usage examples, and customization options to help you get the most out of the integration.
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