Laravel 12 - How to Create Bar Code, QR Code, Coda Bar etc
Laravel 12 - How to Create Bar Code, QR Code, Coda Bar etc
In this tutorial, we’ll create Bar Codes, QR Codes, Coda Bar, and more using Laravel 12. Learn to integrate barcode generation in your Laravel apps for inventory, tracking, and business solutions.
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 as the database. After installing the barcode package, you’ll publish its configuration and create a controller to handle barcode generation. You will then build a Blade view to display various barcode formats, including PHARMA, PHARMA2T, CODABAR, and QR codes. The tutorial also covers generating QR codes dynamically from the controller, which is helpful for product URLs or custom data. Finally, you’ll test the app and view the generated barcodes directly in your browser.
Step # 1 : Set Up a New Laravel Project or Use an Existing One.
Note: If Laravel isn’t installed globally on your system, you’ll need to do that first. Make sure Composer is already available, then run.
composer global require laravel/installer
Once the installer is available, you can create a new Laravel project using.
laravel new codes
If you prefer using Composer directly instead of the Laravel installer, use this command instead.
composer create-project laravel/laravel --prefer-dist codes
During the installation process, you’ll be prompted to make some initial setup choices.
- Starter Kit: Select None to begin without any authentication scaffolding.
- Database Driver: Choose MySQL.
- Run Migrations: Enter yes to create the default database tables.
- Would you like to run npm install and npm run build? Type yes to install the frontend dependencies and compile assets.
After the installation completes, you’ll have a fresh Laravel 12 project named codes, with MySQL set up, default database migrations applied, and everything ready to go.
Step # 2 : Access the project.
Open your terminal (e.g., Git Bash) and navigate to the root folder of your Laravel project by running.
cd c:xampp/htdocs/codes
This will take you into the codes project folder, where you can run Artisan commands and manage your application directly from the terminal.
Step # 3 : Install the Barcode Package.
To enable barcode generation functionality in your Laravel project, you’ll need to install a third-party package. The milon/barcode package is widely used for creating various types of barcodes. To install it, run the following command from your project’s root directory.
composer require milon/barcode
This command will fetch and install the milon/barcode package, along with any required dependencies, using Composer. Once the package is installed, you'll be able to generate barcodes in different formats like Code128, QR codes, and more, directly in your views or controllers.
Step # 4 : Publish the Barcode Configuration.
After installing the barcode package, the next step is to publish its configuration file, which lets you customize its settings as required. To do this, run the following Artisan command.
php artisan vendor:publish --provider="Milon\Barcode\BarcodeServiceProvider"
Executing this command will copy the configuration file for the package into your Laravel project’s config folder. This gives you the flexibility to adjust default settings for barcode generation, such as specifying supported formats or modifying output options.
Step # 5 : Create a Controller.
The next step is to create a controller responsible for handling all barcode-related operations in your application. Use the following Artisan command to generate a new controller.
php artisan make:controller BarcodeController
This will generate a new file called BarcodeController.php in the app/Http/Controllers directory. Open this file and add the following method, which will return the 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 the codes.blade.php view, which you'll create later to display the barcode.
Step # 6 : Set Up the Barcode Generation Route.
To display the barcode, you'll need to define a route that links 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;
Next, add this route to handle requests to the homepage.
Route::get('/', [BarcodeController::class, 'generateCode']);
This route will trigger the generateCode method when someone visits the root URL (/), which will load the view that renders the barcode.
Step # 7 : Create a Blade View for Displaying Barcodes.
To render barcodes on the frontend, you’ll need to set up a Blade view that displays the output. Create a file named codes.blade.php inside the resources/views directory and add the following HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shotcut</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black text-gray-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl w-full max-w-4xl p-6">
<h2 class="text-2xl font-semibold text-center mb-6 text-gray-800">Code Shotcut - Barcodes</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Pharma Barcode -->
<div class="flex flex-col items-center">
<h3 class="text-lg font-medium text-gray-700 mb-2">PHARMA</h3>
{!! DNS1D::getBarcodeHTML('4445645656', 'PHARMA') !!}
</div>
<!-- QR Code -->
<div class="flex flex-col items-center">
<h3 class="text-lg font-medium text-gray-700 mb-2">QRCODE</h3>
{!! DNS2D::getBarcodeHTML('https://www.youtube.com/@CodeShotcut', 'QRCODE') !!}
</div>
<!-- PHARMA2T -->
<div class="flex flex-col items-center">
<h3 class="text-lg font-medium text-gray-700 mb-2">PHARMA2T</h3>
{!! DNS1D::getBarcodeHTML('4445645656', 'PHARMA2T') !!}
</div>
<!-- CODABAR -->
<div class="flex flex-col items-center">
<h3 class="text-lg font-medium text-gray-700 mb-2">CODABAR</h3>
{!! DNS1D::getBarcodeHTML('4445645656', 'CODABAR') !!}
</div>
</div>
</div>
</body>
</html>
This view utilizes Tailwind CSS for styling and makes use of the milon/barcode package to generate various barcode formats, both 1D and 2D, through the DNS1D and DNS2D facades. When you access the homepage, you'll see barcodes such as PHARMA, PHARMA2T, CODABAR, and a QR Code displayed.
Step # 8 : It's time to Test.
Run the following command in your terminal to launch the Laravel development server.
php artisan serve
After the server is running, open your browser and navigate to: http://127.0.0.1:8000. The codes.blade.php view will be displayed, showcasing various barcode formats such as PHARMA, PHARMA2T, CODABAR, and a QR Code.
You can generate QR codes dynamically in your controller, for example, for specific products or URLs. Here’s how to modify the BarcodeController to generate a QR code for a particular 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: Generates one-dimensional (1D) barcodes
// DNS2D: Generates two-dimensional (2D) barcodes (like QR codes)
$qrcode = new DNS2D();
$qrcode->setStorPath(__DIR__.'/cache/');
$html = $qrcode->getBarcodeHTML('https://www.youtube.com/@codeshotcut', 'QRCODE');
return view('codes', compact('html'));
}
}
Now, update the codes.blade.php file to display the generated QR code.
<!DOCTYPE html>
<html>
<head>
<title>Code Shotcut</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-6 mx-auto">
<h2 class="text-2xl font-semibold text-center mb-6 text-gray-800">Code Shotcut - Barcode</h2>
<!-- Dynamic QR Code Content -->
<div class="flex flex-col items-center">
<h3 class="text-lg font-medium text-gray-700 mb-2">Dynamic QR Code</h3>
{!! $html !!}
</div>
</div>
</body>
</html>
After refreshing the page at http://127.0.0.1:8000, the QR code will be displayed, generated dynamically based on the URL provided. This method is helpful for creating QR codes for user-specific input, product details, or any dynamic content in your app.
Conclusion
By following this guide, you’ve successfully integrated barcode generation into your Laravel application using the milon/barcode package. Your Laravel app is now capable of generating and displaying various barcode formats, including 1D and 2D barcodes, within your Blade views. You’ve also learned how to dynamically create QR codes through the controller, making it easy to generate barcodes for products, URLs, or other dynamic content. This setup significantly enhances your Laravel application's functionality, offering a more engaging and feature-rich experience for users.
For additional information, 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