Laravel 12 Barcode Generation: Step-by-Step Tutorial
Hey, Laravel developers! I’m excited to show you how to generate barcodes in your Laravel 12 application using the picqer/php-barcode-generator package. Barcodes are super useful for product tracking, inventory management, or ticketing systems.
In this beginner-friendly tutorial, I’ll walk you through three ways to create barcodes: displaying them as images, saving them to storage, and rendering them in a Blade view. The steps are simple, and you’ll have barcodes up and running in no time.
Prerequisites
Before we start, make sure you have:
- A Laravel 12 project set up.
- Composer installed.
Step 1: Install Laravel 12
If you already have a Laravel 12 project, skip this step. Otherwise, run:
composer create-project laravel/laravel example-app
Navigate to your project directory:
cd example-app
Step 2: Install picqer/php-barcode-generator
We’ll use the picqer/php-barcode-generator package to generate barcodes. Install it by running:
composer require picqer/php-barcode-generator
This package supports various barcode types (e.g., CODE_128, UPC, EAN) and can generate barcodes as PNG images or HTML.
Step 3: Generate Barcodes
We’ll explore three examples to generate barcodes: displaying as an image, saving to storage, and rendering in a Blade view. For consistency, we’ll use a controller instead of inline route closures to keep the code organized.
Create a Controller
Run the following command to create a controller:
php artisan make:controller BarcodeController
Open app/Http/Controllers/BarcodeController.php and add the following code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Picqer\Barcode\BarcodeGeneratorPNG;
use Picqer\Barcode\BarcodeGeneratorHTML;
use Illuminate\Support\Facades\Storage;
use Illuminate\View\View;
class BarcodeController extends Controller
{
// Display barcode as PNG image
public function show()
{
$generator = new BarcodeGeneratorPNG();
$image = $generator->getBarcode('000005263635', $generator::TYPE_CODE_128);
return response($image)->header('Content-Type', 'image/png');
}
// Generate and save barcode
public function save()
{
$generator = new BarcodeGeneratorPNG();
$image = $generator->getBarcode('000005263635', $generator::TYPE_CODE_128);
$path = 'barcodes/demo-' . time() . '.png';
Storage::put($path, $image);
return response($image)->header('Content-Type', 'image/png');
}
// Display barcode in Blade view
public function blade(): View
{
$generator = new BarcodeGeneratorHTML();
$barcode = $generator->getBarcode('0001245259636', $generator::TYPE_CODE_128);
return view('barcode', compact('barcode'));
}
}
Explanation:
show: Generates a CODE_128 barcode as a PNG image and returns it directly.save: Generates a barcode, saves it to thestorage/app/barcodesdirectory, and returns the image.blade: Generates an HTML-based barcode for display in a Blade view.
Step 4: Define Routes
Open routes/web.php and add routes for the three barcode examples:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BarcodeController;
Route::get('/barcode', [BarcodeController::class, 'show'])->name('barcode.show');
Route::get('/barcode-save', [BarcodeController::class, 'save'])->name('barcode.save');
Route::get('/barcode-blade', [BarcodeController::class, 'blade'])->name('barcode.blade');
Step 5: Create the Blade View
For the Blade example, create a file named barcode.blade.php in resources/views and add:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 12 Barcode Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="card">
<h3 class="card-header p-3">Laravel 12 Barcode Example</h3>
<div class="card-body">
<h4>Code: 0001245259636</h4>
{!! $barcode !!}
</div>
</div>
</div>
</body>
</html>
Step 6: Configure Storage (for Saving Barcodes)
To save barcodes, ensure the storage directory is writable. Run:
php artisan storage:link
This creates a symbolic link from public/storage to storage/app/public. Barcodes saved in storage/app/barcodes can be accessed via public/storage/barcodes.
If you’re saving barcodes, create the barcodes directory in storage/app:
mkdir storage/app/barcodes
Step 7: Run the Application
Start your Laravel server:
php artisan serve
Test the three examples by visiting:
-
Display Barcode:
http://localhost:8000/barcode
Shows a CODE_128 barcode as a PNG image. -
Save Barcode:
http://localhost:8000/barcode-save
Displays the barcode and saves it tostorage/app/barcodes/demo-timestamp.png. -
Blade Barcode:
http://localhost:8000/barcode-blade
Renders the barcode in a styled Blade view with the product code.
Conclusion
Generating barcodes in Laravel 12 with the picqer/php-barcode-generator package is simple and powerful! In this tutorial, I showed you how to display barcodes as images, save them to storage, and render them in a Blade view. Whether you’re building an e-commerce platform, inventory system, or ticketing app, barcodes can add a professional touch. I hope this guide was easy to follow and inspires you to integrate barcodes into your Laravel projects.
Frequently Asked Questions (FAQs)
Q1: What barcode types does picqer/php-barcode-generator support?
A: It supports types like CODE_128, UPC_A, UPC_E, EAN_8, EAN_13, and more. Check the package documentation for the full list.
Q2: Why is my barcode not displaying?
A: Ensure the picqer/php-barcode-generator package is installed, the route is correct, and the Content-Type header is set to image/png for PNG barcodes. Check the browser console for errors.
Q3: Can I save barcodes in a different format?
A: The package primarily generates PNG images or HTML. For other formats, you’d need additional libraries (e.g., to convert PNG to PDF).
Q4: How do I access saved barcodes?
A: After running php artisan storage:link, saved barcodes in storage/app/barcodes are accessible via public/storage/barcodes/filename.png.
Q5: Can I customize the barcode’s appearance?
A: For PNG barcodes, you can adjust width, height, and colors using the package’s methods (e.g., getBarcode($code, $type, $widthFactor, $height, $color)). For HTML barcodes, style the output with CSS.
You might also like :
- Read Also: Laravel 11 Product Add to Cart Example
- Read Also: Laravel 11 Display Image from Storage Folder
- Read Also: Laravel 12 Simple Pagination Step-by-Step Tutorial
- Read Also: Laravel 12: How to Generate QR Codes - A Step-by-Step Guide
