Nowadays, QR codes are an essential part of a web application. It doesn't matter if you are creating an E-commerce site, social media, payment site, or any other, It helps to provide an easy user interface.
In this blog, you will learn how to create a QR code for your Laravel application using the simplesoftwareio/simple-qrcode Package. This package provides all functionality for almost all kinds of QR codes.
You can easily install this package in Laravel using the Composer package. after installation, it requires package services to be registered in config/app.php. After that, you can use it as per your requirements.
In this tutorial, you will need to follow these steps to create a QR code for your application from scratch.
- Step 1: Create New Application
- Step 2: Database Configuration
- Step 3: Install the QR Code Package
- Step 4: Register for QR Code Service
- Step 5: Build Controller
- Step 6: Creating Route
- Step 7: Create Blade File
- Step 8: Running Application
Note: Skip steps 1 and 2 if you already have an application.
Create New Application
First, open the terminal and create a new Laravel application using the below command :
Database Configuration
Let's configure a database fora ur application. If you don't have a database then create a new one. After creating the database open .env file from root directory of your project. if .env file is missing from the project then copy content from .env.example and create file. .env file defines many common environment variables
Install QR Code Package
Let's head back to terminal at root directory of project and enter below command :
It will take some time to install simplesoftwareio/simple-qrcode package. We will use this package to generate QR codes.
Register QR Code Service
Now, we have installed our package but in order to use it, we need to register it to our application. you can do that by registering it into config\app.php file. so open the file and update the providers and alias array with the given below services.
<?php
return [
'providers' => [
...
SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class,
],
'aliases' => [
...
'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class,
]
];
Building New Controller for QR Code
Let's create a controller which will handle, user request and pass user input to view. For creating a new controller enter below command into your terminal :
Now let's modify our controller which will take user input and pass it to view. For that make the following changes to your controller :
App\Http\Controllers\QrCodeController.php
Adding QR Code Related Routes
Let's create a route which will interact with the QrCodeController and provides a link to view.
Creating Blade Files or Views
Here, we are planning to display a QR Code from user input so we need two views. First will take user input like name and second will display the QR code for that name.
We will use the default welcome view to get user input. In this blade file, we will remove all content and just add a simple form with one input.
resources\view\welcome.blade.php
Let's create new blade file for display qr codes to user. Here, we will bootstrap for styling output.
resources\view\qr_code.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laravel Generate QR Code Examples - Codewolfy</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">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h2>Simple QR Code</h2>
</div>
<div class="card-body">
{!! QrCode::size(150)->generate($user_name) !!}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h2>Simple QR Code In Red Color</h2>
</div>
<div class="card-body">
{!! QrCode::size(150)->backgroundColor(255, 0, 0)->generate($user_name) !!}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h2>For Phone Number</h2>
</div>
<div class="card-body">
{!! QrCode::size(150)->phoneNumber('000-000-0000') !!}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h2>For Website URL</h2>
</div>
<div class="card-body">
{!! QrCode::size(150)->generate(Request::url()); !!}
</div>
</div>
</div>
</div>
</div>
</body>
</html>