Laravel 9 - How to generate Qr Code
Laravel 9 - How to generate Qr Code
In this tutorial, we’ll cover generating QR codes in Laravel 9, which are useful for sharing URLs, product details, and contact information quickly through scanning.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we walk through integrating QR code generation into a Laravel 9 application using the Simple QrCode package. We start by setting up a fresh Laravel project and configuring the development environment with Vite. Next, we install the QR code package, create a dedicated controller, and build a Blade view to display the QR code. A route is defined to make the page accessible in the browser. Finally, we test the functionality by running the Laravel development server and scanning the QR code to ensure it works correctly. This step-by-step process allows you to quickly implement dynamic QR codes in your Laravel applications. By the end, you’ll have a reusable setup that can generate QR codes for any URL or custom data in your projects.
Step # 1 : Create a New Laravel 9 Application.
Let’s kick things off by setting up a clean Laravel 9 project. If you already have Laravel installed globally, you can run.
laravel new qrcode
Or, if you prefer Composer, use.
composer create-project laravel/laravel --prefer-dist qrcode
This will generate a brand-new Laravel project with the default structure and files. Once it’s ready, you’ll have a fresh workspace to start integrating QR code functionality and building out the front end. This clean setup ensures you start with a stable foundation, free from any conflicts or leftover configurations from previous projects.
Step # 2 : Navigate Into the Project and Start the Dev Server.
Once the project is created, open your terminal (for example, Git Bash) and move into your Laravel project’s root folder.
cd c:xampp/htdocs/qrcode
Next, install the necessary dependencies and start the Laravel Vite development server to handle your front-end assets.
npm install && npm run dev
It’s a good idea to open a second terminal window or tab, navigate to the same project directory, and keep it ready for running additional Laravel commands while the dev server runs in the background.s.
Step # 3 : Install the QR Code Package.
To generate QR codes in Laravel, we’ll use the Simple QrCode package, a handy wrapper around the popular Bacon/BaconQrCode library. It makes working with QR codes in Laravel super simple. Run the following command in your project directory to install it.
composer require simplesoftwareio/simple-qrcode "~1"
This package allows you to easily generate QR codes in different formats and sizes directly from your Laravel application. You can create text-based QR codes, URLs, or even encode custom data. Later, we’ll render them inside views and make them dynamic based on your project needs. It provides a simple and flexible way to add QR code functionality without writing complex code from scratch.
Step # 4 : Publish the Package Configuration (Optional).
The Simple QrCode package works right out of the box, but if you’d like to customize its default settings, you can publish the configuration file. This step is optional. Run the following command in your terminal.
php artisan vendor:publish --provider="SimpleSoftwareIO\QrCode\QrCodeServiceProvider"
This will publish the package’s configuration file into your project, giving you the flexibility to adjust default styles, size, or other QR code settings according to your application’s needs. By customizing the configuration, you can maintain consistency across all QR codes in your application and tailor them to match your design preferences.
Step # 5 : Create a Controller for QR Codes.
Next, we’ll create a controller to handle QR code logic and render the view. Run the following command.
php artisan make:controller QrCodeController
Then, inside the controller, define an index method to return a view.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class QrCodeController extends Controller
{
public function index()
{
// Return the 'qrcode' view where the QR code will be displayed
return view('qrcode');
}
}
This sets up a clean separation between your logic and the front-end, keeping your QR code functionality organized and easy to maintain. It also makes future updates or enhancements to the QR code feature much simpler and more efficient.
Step # 6 : Create a View to Display the QR Code.
To show your QR code in the browser, create a Blade view named qrcode.blade.php inside the resources/views directory (resources/views/qrcode.blade.php).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laravel 9 - QR Code Integration</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Include Bootstrap for styling -->
<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">
<div class="card">
<div class="card-header text-center">
<h2>Scan this QR Code to Visit My YouTube Channel</h2>
</div>
<div class="card-body text-center">
<!-- Generate the QR code using Simple QrCode package -->
{!! QrCode::size(400)->generate('https://www.youtube.com/@CodeShotcut') !!}
</div>
</div>
</div>
</body>
</html>
In this view, we use Bootstrap to make the card layout clean, responsive, and visually appealing. The QR code itself is generated dynamically using the QrCode::size()->generate() method provided by the Simple QrCode package. This allows visitors to simply scan the QR code and instantly access your YouTube channel. You can easily customize this view to display multiple QR codes or change the content dynamically based on your application’s needs.
Step # 7 : Define a Route for the QR Code Page.
To make your QR code view accessible in the browser, you need to create a route. First, import the QrCodeController at the top of your routes/web.php file.
use App\Http\Controllers\QrCodeController;
Then, define a GET route that points to the index method of your controller.
Route::get('/qr', [QrCodeController::class, 'index']);
Now, when you visit http://127.0.0.1:8000/qr, Laravel will load the qrcode.blade.php view and display your QR code.
Step # 8 : Test Your QR Code Page.
Now it’s time to see your QR code in action. Start the Laravel development server by running.
php artisan serve
Once the server is running, open your browser and navigate to: http://127.0.0.1:8000/qr. You should see your QR code displayed on the page, ready to be scanned and used.
Conclusion
By following this step-by-step guide, you’ve successfully integrated QR code generation into your Laravel 9 application using the Simple QrCode package. From setting up a fresh Laravel project to creating a controller, Blade view, and defining routes, you now have a fully functional QR code page that can dynamically display codes for URLs or other data. This setup provides a solid foundation for adding QR code functionality to your applications, whether for marketing, user authentication, or information sharing. As your project grows, you can extend it by generating QR codes dynamically based on user input, customizing styles, or exporting them as images. For more advanced options, refer to the official Simple QrCode 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