Interested in adding QR codes to your Laravel 11 project? This guide will show you how! Let's walk through the steps together to easily integrate QR code generation into your Laravel 11 application.
Setting up Laravel 11
If you don't already have a Laravel application set up, you can simply create a new one by following the installation guide in the docs or simply running the following command:
composer create-project laravel/laravel example-app
Once installed, navigate into the example-app directory and start the Laravel dev server:
php artisan serve
The Laravel QR Code Package
There is a cool package by GiauPhan called Laravel QR Code that provides an easy way to generate QR codes in a Laravel application.
To get started, install the package using composer:
composer require giauphan/laravel-qr-code
This package provides a QRCode facade that we can use to create QR codes. So, let's get to work!
Prepare a Route for Testing
If you don't already have a spot where you need to create a QR code and want to play around with the package, you can create a testing route.
Let's define a route in the routes/web.php file and call it qr-code:
Route::get("/qr-code", function() {
});
Inside the route handler function you can now put the code we're about to write to create QR codes.
How to Use the QR Code Package
The facade provided by the package provides multiple methods to create different types of QR codes:
Email message
Phone number
SMS
Text
URL
MeCard (contact)
vCard (contact)
WiFi network settings
For example, to create a QR code that contains some text, there is the text method:
use LaravelQRCode\Facades\QRCode;
QRCode::text("Hello World");
To directly output the QR code, use the png or svg methods:
use LaravelQRCode\Facades\QRCode;
QRCode::text("Hello World")->png();
QRCode::text("Hello World")->svg();
We'll dive into other QR code types like URL and MeCard in just a second, but first let's take a look what else we can do with the package.
Storing QR Codes as Images
A generated QR code can easily be saved on the filesystem using the setOutfile method. It accepts a path to save the file to which we can get using the Laravel storage facade:
use Illuminate\Support\Facades\Storage;
use LaravelQRCode\Facades\QRCode;
QRCode::text("Hello World")
->setOutfile(Storage::disk("public")->path("qrcode.png"))
->png();
With default Laravel configuration, this will save the file to <project-directory>/storage/app/public/qrcode.png. This works with the svg method too.
Customizing the Image
Changing the Size
By default, the pixel size is set to 4. You can change it to a value from 1 to 10 to make it bigger or smaller using the setSize method:
use LaravelQRCode\Facades\QRCode;
QRCode::text("Hello World")
->setSize(10)
->png();
Changing the Margin
The margin is set 3 by default, but you can change it to any size from 1 to 10 or remove it completely by setting it to 0:
use LaravelQRCode\Facades\QRCode;
QRCode::text("Hello World")
->setMargin(2)
->png();
Setting the Error Correction Level
| Level | Value | Bytes that can be restored |
| Low | L | 7% |
| Medium | M | 15% |
| Quartile | Q | 25% |
| High | H | 30% |
The error correction level can be set via the setErrorCorrectionLevel method:
use LaravelQRCode\Facades\QRCode;
QRCode::text("Hello World")
->setErrorCorrectionLevel("Q")
->png();
๐ก
When chaining multiple methods together, make sure the png or svg methods are called last. Both methods will save or output the QR code, so apply all required settings before.
More QR Code Types
URL
use LaravelQRCode\Facades\QRCode;
QRCode::url("https://linu.us")
->png();
SMS
use LaravelQRCode\Facades\QRCode;
QRCode::sms('+55 (31) 1234-5678', 'Text to send!')
->png();
Phone Number
use LaravelQRCode\Facades\QRCode;
QRCode::phone('+55 31 1234-5678')
->png();
Email Message
use LaravelQRCode\Facades\QRCode;
$to = 'john.doe@example.com';
$subject = 'QR Code Message';
$body = 'This email was created from a QR Code!';
QRCode::email($to, $body, $subject)
->png();
MeCard
A MeCard stores information about a single contact.
use LaravelQRCode\Facades\QRCode;
$name = 'John Doe';
$street = '1234 Main st.';
$phone = '+1 001 555-1234';
$email = 'john.doe@example.com';
QRCode::meCard($name, $street, $phone, $email)
->png();
vCard
use LaravelQRCode\Facades\QRCode;
$firstName = 'John';
$lastName = 'Doe';
$title = 'Mr.';
$email = 'john.doe@example.com';
$company = "Acme Inc.";
$job = "Developer";
$url = "https://example.com";
$homeAddress = [
'type' => 'home',
'pref' => true,
'street' => '123 my street st',
'city' => 'My Beautiful Town',
'state' => 'LV',
'country' => 'Neverland',
'zip' => '12345-678'
];
$wordAddress = [
'type' => 'work',
'pref' => false,
'street' => '123 my work street st',
'city' => 'My Dreadful Town',
'state' => 'LV',
'country' => 'Hell',
'zip' => '12345-678'
];
$addresses = [$homeAddress, $wordAddress];
$workPhone = [
'type' => 'work',
'number' => '001 555-1234',
'cellPhone' => false
];
$homePhone = [
'type' => 'home',
'number' => '001 555-4321',
'cellPhone' => false
];
$cellPhone = [
'type' => 'work',
'number' => '001 9999-8888',
'cellPhone' => true
];
$phones = [$workPhone, $homePhone, $cellPhone];
QRCode::vCard($firstName, $lastName, $title, $email, $company, $job, $url, $addresses, $phones)
->setErrorCorrectionLevel('H')
->setSize(4)
->setMargin(2)
->svg();
๐ก
Since this QR code stores a lot of information, it's recommended to store it in a smaller pixel size and as SVG, so it can be re-scaled as needed. The error correction level should be set to high.
Conclusion
Thanks to the Laravel QR Code package it's really easy to create QR codes in Laravel. For more detailed information, check out the GitHub repository and the official documentation.
Thank you for reading! ๐
Do you find this article helpful? Support my work on Hashnode ๐
I'm also on ๐ / linusbenkner - would love to connect!
Happy coding ๐จโ๐ป
