Laravel 10 QR Code Generator Application Tutorial
Last Updated: 30 Jan, 2024What is QR code?
A QR (QUICK RESPONSE) code is a type of two-dimensional barcode. It is invented early in 1994 by the Japanese automotive company Denso Wave. A barcode is a machine-readable optical label that contains the information about the item to which it is attached. QR codes are now widely used in a much broader context, including both commercial tracking applications and convenience-oriented applications targeted at mobile-phone users (termed mobile tagging). In practice, QR codes normally contain data for a locator, identifier, or tracker that points to a website or application.
Now, let's follow below steps to generate various QR code in your Laravel 10 application.
Step 1: Create a Fresh Laravel 10 Application
Open terminal window and install a fresh laravel 10 application by execution below command:
composer create-project laravel/laravel l10qrcodegenerator
Next, let's get inside the l10qrcodegenerator using below command:
cd l10qrcodegenerator
Step 2: Install Simple QR Code Composer Package
Next, you need to install simple-qrcode package for QR code generator. Type below command in terminal:
composer require simplesoftwareio/simple-qrcode
Next, open config/app.php file and add QR code service provider and aliase as mentioned below:
<?php
return [
...
...
'providers' => ServiceProvider::defaultProviders()->merge([
/*
* Package Service Providers...
*/
SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class,
/*
* Application Service Providers...
*/
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
// App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
])->toArray(),
'aliases' => Facade::defaultAliases()->merge([
// 'Example' => App\Facades\Example::class,
'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class,
])->toArray(),
];
Step 3: Create QR Code Route
Next, you need to create a route to test our QR Code application. Open routes/web.php file and add below route in it:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\QRCodeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/qrcode', [QRCodeController::class, 'index']);
Step 4: Create QR Code Controller
Next, create App/Http/Controllers/QRCodeController.php file and put below code in it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class QRCodeController extends Controller
{
public function index()
{
return view('qrcode');
}
}
Step 5: Create Blade File
Next, create resources/views/qrcode.blade.php file and put below code in it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laravel 10 QR Code Generator Application</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 mb-3">
<div class="card">
<div class="card-header">
<h5 class="text-center">Simple QR Code in Laravel 10</h5>
</div>
<div class="card-body text-center">
{!! QrCode::size(300)->generate('LaravelClick') !!}
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 mb-3">
<div class="card">
<div class="card-header">
<h5 class="text-center">Simple QR Code in Laravel 10</h5>
</div>
<div class="card-body text-center">
{!! QrCode::size(300)->generate('laravelclick22@gmail.com') !!}
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 mb-3">
<div class="card">
<div class="card-header">
<h5 class="text-center">Simple QR Code in Laravel 10</h5>
</div>
<div class="card-body text-center">
{!! QrCode::size(300)->generate('Happy Learning') !!}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 mb-3">
<div class="card">
<div class="card-header">
<h5 class="text-center">Coloured QR Code in Laravel 10</h5>
</div>
<div class="card-body text-center">
{!! QrCode::size(300)->backgroundColor(255,100,0)->generate('LaravelClick') !!}
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 mb-3">
<div class="card">
<div class="card-header">
<h5 class="text-center">Coloured QR Code in Laravel 10</h5>
</div>
<div class="card-body text-center">
{!! QrCode::size(300)->backgroundColor(100,255,0)->generate('LaravelClick') !!}
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 mb-3">
<div class="card">
<div class="card-header">
<h5 class="text-center">Coloured QR Code in Laravel 10</h5>
</div>
<div class="card-body text-center">
{!! QrCode::size(300)->backgroundColor(255,255,0)->generate('LaravelClick') !!}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 6: Start the development server using below command:
php artisan serve
Next, open below url in browser and see the result:
http://127.0.0.1:8000/qrcode
APPLICATION OUTPUT
Recommended Posts
Laravel 10 CRUD Application Tutorial for Beginners
In this simple and comprehensive tutorial you are going to learn how to install Laravel 10 and create a New Laravel 10 CRUD Application.
Laravel 10 Multiple Guards Authentication Application Tutorial
This tutorial will provide you a clear understanding of how can you setup a multiple authentication guards application in Laravel 10 with the help of examples.
Laravel 10 Yajra Datatables Integration Tutorial
In this tutorial, you will learn How to Implement Yajra Datatables in Laravel 10 Application using yajra/laravel-datatables-oracle composer package.