Laravel Engaging Product Packaging QR Codes

Eugene Musebe

Laravel is a PHP framework developed with developer productivity in mind. The framework also aims to evolve with the web and has already incorporated several new features and ideas in the web development world—such as job queues, API authentication out of the box, real-time communication, and much more.

Cloudinary is a Software-as-a-Service (SaaS) solution for managing all your web or mobile application’s media assets in the cloud. Cloudinary offers an end-to-end solution for all your image and video needs, including the upload, storage, administration, transformation and optimized delivery.

Introduction

Product Packaging is the first thing a customer sees when looking at a product. In this article, we will use Cloudinary to create engaging and compelling product packaging embedded with QR codes that will provide additional product details.

Let's get started.

PHPSandbox and Github

The final project can be viewed on PHPSandbox and the entire source code is available on my Github repository.

Prerequisites

Using Cloudinary in your Laravel projects is pretty straightforward. However, for you to be able to easily follow along, you need to have a good command of your terminal, Git, and entry knowledge of PHP specifically with the Laravel framework.

Getting Started

Being that Laravel is a PHP Framework, we will need Composer. Like any modern PHP framework, Laravel uses Composer to manage its dependencies. So, before we can start ensure you have Composer installed on your machine. Follow step 1 below to install Composer and PHP.

  1. Install Composer and PHP on

your development or production machine.

  1. Install Laravel

  2. Via Composer:

composer create-project --prefer-dist laravel/laravel cloudinary-video-slideshow

  1. Via Laravel Installer

composer global require laravel/installer

laravel new cloudinary-video-slideshow

  1. In step 2 above we have installed the Laravel Installer and used it to scaffold a new application in the folder cloudinary-video-slideshow. With Laravel installed, we should be able to start and test the server ensuring everything is okay. Change the directory to the project folder and run the local development server by typing the following commands:

cd cloudinary-video-slideshow

php artisan serve

The Laravel project is now up and running. When you open http://localhost:8000 on your computer, you should see the image below:

Setting up Cloudinary’s Laravel SDK

Cloudinary has a tonne of features from media upload, storage, administration, and manipulation to optimization and delivery. In this article, we will use image transformation to create product labels with embedded QR codes.

  1. Sign up for a free Cloudinary account then navigate to the Console page and take note of your Cloud name, API Key and API Secret.

  1. Install Cloudinary’s Laravel SDK:

composer require cloudinary-labs/cloudinary-laravel

Note: Please ensure you follow all the steps in the #Installation section. Publish the configuration file and add the Cloudinary credentials you noted in Step 1 to the .env file.

1CLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY
2
3CLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET
4
5CLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME

Product Package Details

We will need a UI to collect product details, for this, we will use the Laravel package Livewire to build this.

  1. Install Livewire Package by running the following command in your Laravel project:

composer require livewire/livewire

  1. Include Livewire scripts and styles on every page that will be using Livewire. In our case welcome.blade.php:
1...
2
3@livewireStyles
4
5</head>
6
7<body>
8
9...
10
11@livewireScripts
12
13</body>
14
15</html>
  1. We will then create a Livewire Component to handle our image uploads:

php artisan make:livewire ProductPackaging

This will create two files, first

app/Http/Livewire/ProductPackaging.php and the other one in resources/views/livewire/product-packaging.blade.php

Now you can use this component anywhere in your Laravel project using the following snippet:

<livewire:product-packaging/>

or

@livewire('product-packaging')

  1. Open resources/views/welcome.blade.php and add the following code within the <body></body> tags as shown below:
1<body class="antialiased">
2
3<div>
4
5@livewire('product-packaging')
6
7</div>
8
9</body>

This includes the Livewire component we created earlier in our welcome.blade.php.

Note: Please ensure you go through the Livewire documentation, to learn how to install and set it up.

  1. Open the file resources/views/livewire/product-packaging.blade.php and populate it with the following code:
1<form class="mb-5" wire:submit.prevent="store">
2
3<div class="form-group row mt-3 mb-3">
4
5<div class="input-group mb-3">
6
7<input id="package" type="file" class="form-control @error('package') is-invalid @enderror"
8
9placeholder="Choose files..." wire:model="package">
10
11<label class="input-group-text" for="package">
12
13Upload Product Packaging...
14
15</label>
16
17@error('package')
18
19<div class="invalid-feedback">{{ $message }}</div>
20
21@enderror
22
23</div>
24
25<div class="input-group mb-5">
26
27<label class="input-group-text" for="location">QRCode Position</label>
28
29<select id="location" type="file" class="form-select @error('location') is-invalid @enderror"
30
31wire:model="location">
32
33<option selected>Select Position ...</option>
34
35<option selected value="north_east">Top Right</option>
36
37<option value="north_west">Top Left</option>
38
39<option value="south_east">Bottom Right</option>
40
41<option value="south_west">Bottom Left</option>
42
43<option value="center">Center</option>
44
45</select>
46
47@error('location')
48
49<div class="invalid-feedback">{{ $message }}</div>
50
51@enderror
52
53</div>
54
55<div class="input-group mb-3">
56
57<span class="input-group-text" id="basic-addon1">Name</span>
58
59<input class="form-control @error('name') is-invalid @enderror" placeholder="Product Name"
60
61aria-label="Product Name"
62
63aria-describedby="basic-addon1" wire:model="name">
64
65@error('name')
66
67<div class="invalid-feedback">{{ $message }}</div>
68
69@enderror
70
71</div>
72
73<div class="input-group mb-3">
74
75<span class="input-group-text" id="basic-addon1">Price</span>
76
77<input type="number" class="form-control @error('price') is-invalid @enderror" placeholder="Product Price"
78
79aria-label="Product Price"
80
81aria-describedby="basic-addon1" wire:model="price">
82
83@error('price')
84
85<div class="invalid-feedback">{{ $message }}</div>
86
87@enderror
88
89</div>
90
91<div class="input-group mb-3">
92
93<span class="input-group-text" id="basic-addon1">Short Desc</span>
94
95<input type="text" class="form-control @error('short_desc') is-invalid @enderror"
96
97placeholder="Product Short Desc"
98
99aria-label="Product Short Desc"
100
101aria-describedby="basic-addon1" wire:model="short_desc">
102
103@error('short_desc')
104
105<div class="invalid-feedback">{{ $message }}</div>
106
107@enderror
108
109</div>
110
111<div class="input-group mb-3">
112
113<span class="input-group-text" id="basic-addon1">Desc</span>
114
115<textarea class="form-control @error('desc') is-invalid @enderror" placeholder="Product Desc"
116
117aria-label="Product Desc"
118
119aria-describedby="basic-addon1" wire:model="desc"></textarea>
120
121@error('desc')
122
123<div class="invalid-feedback">{{ $message }}</div>
124
125@enderror
126
127</div>
128
129<small class="text-muted text-center mt-2" wire:loading wire:target="package">
130
131{{ __('Uploading') }}…
132
133</small>
134
135</div>
136
137<div class="text-center">
138
139<button type="submit" class="btn btn-sm btn-primary">
140
141{{ __('Create New Product') }}
142
143<i class="spinner-border spinner-border-sm ml-1 mt-1" wire:loading wire:target="store"></i>
144
145</button>
146
147</div>
148
149</form>

This is our Livewire Component view, this basically will display a form with a couple of input fields and a button. You will see the implementation in code shortly.

Install QR Code Package

In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application.

We will use the simplesoftwareio/simple-qrcode package to create the QR Codes that we will embed on our product labels.

composer require simplesoftwareio/simple-qrcode

SQLite Database

Laravel makes interacting with databases extremely simple across a variety of supported databases using raw SQL. We will save our product details in the SQLite database. This is suitable for a small applications.

  1. Edit your .env file and change DB_CONNECTION to sqlite

  2. Open your config/database.php file and change the default to sqlite:

'default' => env('DB_CONNECTION', 'sqlite'),

  1. In the connections array, change sqlite's database key-value pair as shown below and leave the rest as is:
1'connections' => [
2
3'sqlite' => [
4
5'driver' => 'sqlite',
6
7'url' => env('DATABASE_URL'),
8
9'database' => database_path('database.sqlite'),
10
11'prefix' => '',
12
13'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
14
15],
16
17...
18
19];

Run the command php artisan migrate:status to test if you are connected, you should see the response Migration table not found.

  1. Next, we need to create the Product model. Run the command

php artisan make:model Product

This will create the file app\Models\Product.php. Open the file and add the following:

1protected $fillable = [
2
3'name',
4
5'price',
6
7'short_desc',
8
9'desc',
10
11'package'
12
13];
  1. Lastly, we will create the create_products_table migration:

php artisan make:migration create_products_table

Open the file created at database\migrations\<timestamp>_create_products_table.php and in the up method and the following code under Schema:create:

1$table->id();
2
3$table->string('name');
4
5$table->float('price');
6
7$table->string('short_desc');
8
9$table->longText('desc');
10
11$table->string('package'); //will store URL of package
12
13$table->timestamps();

Once done run the command php artisan migrate, this will create the products table with the above columns.

Implementing the QR Code

Open the file app/Http/Livewire/ProductPackaging.php. Here, we are going to add a method that will handle the video selected by the user, and upload them to Cloudinary for video moderation.

Add the following code to this file.

  1. First, we use Livewires WithFileUploads to help us with file uploads, then create the variables as shown.
1use Livewire\WithFileUploads;
2
3public $package;
4
5public $name;
6
7public $price;
8
9public $short_desc;
10
11public $desc;
12
13public $location;
14
15public $qrCodeId;
16
17public $product;
18
19...
  1. Secondly, we will create the store method which will process the creation of the product label. First by creating the QR code, uploading it to Cloudinary, then creating an image overlay.
1public function store() {
2
3...
4
5}
  1. Let's see how this works:
  • Creating the QR code - we create the QR code from the product description submitted by the user and store it as product_qr_code.svg under the storage folder.
1...
2
3$qrCodeData = $this->desc;
4
5$qrCodePath = '../storage/product_qr_code.svg';
6
7QrCode::format('svg')->size(512)->style('round')->backgroundColor(255, 255, 255, 0)->color(0, 0, 0, 90)->margin(5)->generate($qrCodeData, $qrCodePath);
8
9...

We won't go to detail about how this package works, but you can reference the QR code package documentation here for more info on the numerous features it has.

  • Uploading the QR Code to Cloudinary - a simple upload of the QR code to Cloudinary. We are creating the public_id dynamically so we have unique ids for different products that we can reference later.
1...
2
3$this->qrCodeId = cloudinary()->upload($qrCodePath, [
4
5'folder' => 'product-qrcodes',
6
7'public_id' => Str::uuid()->toString(),
8
9])->getPublicId();
10
11...
  • Embed the QR code - we embed the QR code created on the product packaging labels and save the details in our SQLite database:
1...
2
3$packaged = cloudinary()->upload($this->package->getRealPath(), [
4
5'folder' => 'product-qrcodes',
6
7'transformation' => [
8
9'overlay' => $this->qrCodeId,
10
11'gravity' => $this->location,
12
13'x' => 0.02,
14
15'y' => 0.02,
16
17'crop' => 'scale',
18
19'flags' => 'relative',
20
21'width' => 0.15,
22
23'opacity' => 80
24
25],
26
27])->getSecurePath();
28
29$data['package'] = $packaged;
30
31$this->product = Product::create($data);
32
33$productName = $this->product->name;
34
35...

The code above uses overlay, gravity - we get this as an input from the user, flags - ensures that the overlay is resized based on the resolution of the underlying layer and lastly the opacity transformation.

The code above will be implemented within the store method, which will perform validation, create the QR then upload the images to Cloudinary to create the final product label.

On successful implementation, you should be able to see the following when you navigate to http://localhost:8000:

On successful submission, you should see the product label created with a QR code.

When you scan this code with your phone it will provide you with detailed product information as shown:

Conclusion

A QR code is a type of matrix barcode invented in 1994 by the Japanese automotive company Denso Wave. A barcode is a machine-readable optical label that can contain information about the item to which it is attached.

There are multiple use cases for QR codes, but the most vital use has been in manufacturing and in retail where QR code labels are used to provide detailed information on shipping and retail products as well.

Using Cloudinary we have been able to create product packaging labels that are engaging, providing shoppers with more details about their purchases. Check out Cloudinary for your A to Z media management - upload, storage, administration, manipulation, optimization and delivery.

Get started with Cloudinary in your Laravel projects for FREE!

Eugene Musebe

Software Developer

I’m a full-stack software developer, content creator, and tech community builder based in Nairobi, Kenya. I am addicted to learning new technologies and loves working with like-minded people.