{"id":28381,"date":"2022-07-13T07:44:10","date_gmt":"2022-07-13T07:44:10","guid":{"rendered":"http:\/\/laravel-engaging-product-packaging-qr-codes"},"modified":"2022-07-13T07:44:10","modified_gmt":"2022-07-13T07:44:10","slug":"laravel-engaging-product-packaging-qr-codes","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-engaging-product-packaging-qr-codes\/","title":{"rendered":"Laravel Engaging Product Packaging QR Codes"},"content":{"rendered":"

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\u2014such as job queues, API authentication<\/strong> out of the box, real-time communication, and much more.<\/p>\n

Cloudinary is a Software-as-a-Service (SaaS) solution for managing all your web or mobile application\u2019s 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.<\/p>\n

Introduction<\/h2>\n

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.<\/p>\n

Let\u2019s get started.<\/p>\n

PHPSandbox and Github<\/h2>\n

The final project can be viewed on PHPSandbox<\/a> and the entire source code is available on my Github<\/a> repository.<\/p>\n

Prerequisites<\/h2>\n

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.<\/p>\n

Getting Started<\/h2>\n

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.<\/p>\n

    \n
  1. Install Composer<\/a> and PHP<\/a> on<\/li>\n<\/ol>\n

    your development or production machine.<\/p>\n

      \n
    1. \n

      Install Laravel<\/p>\n<\/li>\n

    2. \n

      Via Composer:<\/p>\n<\/li>\n<\/ol>\n

      composer create-project --prefer-dist laravel\/laravel cloudinary-video-slideshow<\/code><\/p>\n

        \n
      1. Via Laravel Installer<\/li>\n<\/ol>\n

        composer global require laravel\/installer<\/code><\/p>\n

        laravel new cloudinary-video-slideshow<\/code><\/p>\n

          \n
        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<\/code>. 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:<\/li>\n<\/ol>\n

          cd cloudinary-video-slideshow<\/code><\/p>\n

          php artisan serve<\/code><\/p>\n

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

          \"Laravel<\/p>\n

          Setting up Cloudinary\u2019s Laravel SDK<\/h2>\n

          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.<\/p>\n

            \n
          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.<\/li>\n<\/ol>\n

            \"Cloudinary<\/p>\n

              \n
            1. Install Cloudinary\u2019s Laravel SDK<\/a>:<\/li>\n<\/ol>\n

              composer require cloudinary-labs\/cloudinary-laravel<\/code><\/p>\n

              Note<\/strong>: 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<\/code> file.<\/p>\n

              \nCLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY\n\nCLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET\n\nCLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME\n\n<\/code><\/pre>\n
              Product Package Details<\/h2>\n
              We will need a UI to collect product details, for this, we will use the Laravel package Livewire to build this.<\/p>\n
                \n
              1. Install Livewire Package by running the following command in your Laravel project:<\/li>\n<\/ol>\n
                composer require livewire\/livewire<\/code><\/p>\n
                  \n
                1. Include Livewire scripts and styles on every page that will be using Livewire. In our case welcome.blade.php<\/code>:<\/li>\n<\/ol>\n
                  \n...\n\n@livewireStyles\n\n<\/head<\/span>><\/span>\n\n<body<\/span>><\/span>\n\n...\n\n@livewireScripts\n\n<\/body<\/span>><\/span>\n\n<\/html<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                    \n
                  1. We will then create a Livewire Component to handle our image uploads:<\/li>\n<\/ol>\n
                    php artisan make:livewire ProductPackaging<\/code><\/p>\n
                    This will create two files, first<\/p>\n
                    app\/Http\/Livewire\/ProductPackaging.php<\/code> and the other one\nin resources\/views\/livewire\/product-packaging.blade.php<\/code><\/p>\n
                    Now you can use this component anywhere in your Laravel project using the following snippet:<\/p>\n
                    <livewire:product-packaging\/><\/code><\/p>\n
                    or<\/p>\n
                    @livewire('product-packaging')<\/code><\/p>\n
                      \n
                    1. Open resources\/views\/welcome.blade.php<\/code> and add the following code within the <body><\/body><\/code> tags as shown below:<\/li>\n<\/ol>\n
                      \n<body<\/span> class<\/span>=\"antialiased\"<\/span>><\/span>\n\n<div<\/span>><\/span>\n\n@livewire('product-packaging')\n\n<\/div<\/span>><\/span>\n\n<\/body<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                      This includes the Livewire component we created earlier in our welcome.blade.php<\/code>.<\/p>\n
                      Note:<\/strong> Please ensure you go through the Livewire documentation<\/a>, to learn how to install and set it up.<\/p>\n
                        \n
                      1. Open the file resources\/views\/livewire\/product-packaging.blade.php<\/code> and populate it with the following code:<\/li>\n<\/ol>\n
                        \n<form<\/span> class<\/span>=\"mb-5\"<\/span>  wire:submit.prevent<\/span>=\"store\"<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"form-group row mt-3 mb-3\"<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-3\"<\/span>><\/span>\n\n<input<\/span> id<\/span>=\"package\"<\/span>  type<\/span>=\"file\"<\/span>  class<\/span>=\"form-control @error('package') is-invalid @enderror\"<\/span>\n\nplaceholder<\/span>=\"Choose files...\"<\/span>  wire:model<\/span>=\"package\"<\/span>><\/span>\n\n<label<\/span> class<\/span>=\"input-group-text\"<\/span>  for<\/span>=\"package\"<\/span>><\/span>\n\nUpload Product Packaging...\n\n<\/label<\/span>><\/span>\n\n@error('package')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-5\"<\/span>><\/span>\n\n<label<\/span> class<\/span>=\"input-group-text\"<\/span>  for<\/span>=\"location\"<\/span>><\/span>QRCode Position<\/label<\/span>><\/span>\n\n<select<\/span> id<\/span>=\"location\"<\/span>  type<\/span>=\"file\"<\/span>  class<\/span>=\"form-select @error('location') is-invalid @enderror\"<\/span>\n\nwire:model<\/span>=\"location\"<\/span>><\/span>\n\n<option<\/span> selected<\/span>><\/span>Select Position ...<\/option<\/span>><\/span>\n\n<option<\/span> selected<\/span>  value<\/span>=\"north_east\"<\/span>><\/span>Top Right<\/option<\/span>><\/span>\n\n<option<\/span> value<\/span>=\"north_west\"<\/span>><\/span>Top Left<\/option<\/span>><\/span>\n\n<option<\/span> value<\/span>=\"south_east\"<\/span>><\/span>Bottom Right<\/option<\/span>><\/span>\n\n<option<\/span> value<\/span>=\"south_west\"<\/span>><\/span>Bottom Left<\/option<\/span>><\/span>\n\n<option<\/span> value<\/span>=\"center\"<\/span>><\/span>Center<\/option<\/span>><\/span>\n\n<\/select<\/span>><\/span>\n\n@error('location')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-3\"<\/span>><\/span>\n\n<span<\/span> class<\/span>=\"input-group-text\"<\/span>  id<\/span>=\"basic-addon1\"<\/span>><\/span>Name<\/span<\/span>><\/span>\n\n<input<\/span> class<\/span>=\"form-control @error('name') is-invalid @enderror\"<\/span>  placeholder<\/span>=\"Product Name\"<\/span>\n\naria-label<\/span>=\"Product Name\"<\/span>\n\naria-describedby<\/span>=\"basic-addon1\"<\/span>  wire:model<\/span>=\"name\"<\/span>><\/span>\n\n@error('name')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-3\"<\/span>><\/span>\n\n<span<\/span> class<\/span>=\"input-group-text\"<\/span>  id<\/span>=\"basic-addon1\"<\/span>><\/span>Price<\/span<\/span>><\/span>\n\n<input<\/span> type<\/span>=\"number\"<\/span>  class<\/span>=\"form-control @error('price') is-invalid @enderror\"<\/span>  placeholder<\/span>=\"Product Price\"<\/span>\n\naria-label<\/span>=\"Product Price\"<\/span>\n\naria-describedby<\/span>=\"basic-addon1\"<\/span>  wire:model<\/span>=\"price\"<\/span>><\/span>\n\n@error('price')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-3\"<\/span>><\/span>\n\n<span<\/span> class<\/span>=\"input-group-text\"<\/span>  id<\/span>=\"basic-addon1\"<\/span>><\/span>Short Desc<\/span<\/span>><\/span>\n\n<input<\/span> type<\/span>=\"text\"<\/span>  class<\/span>=\"form-control @error('short_desc') is-invalid @enderror\"<\/span>\n\nplaceholder<\/span>=\"Product Short Desc\"<\/span>\n\naria-label<\/span>=\"Product Short Desc\"<\/span>\n\naria-describedby<\/span>=\"basic-addon1\"<\/span>  wire:model<\/span>=\"short_desc\"<\/span>><\/span>\n\n@error('short_desc')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-3\"<\/span>><\/span>\n\n<span<\/span> class<\/span>=\"input-group-text\"<\/span>  id<\/span>=\"basic-addon1\"<\/span>><\/span>Desc<\/span<\/span>><\/span>\n\n<textarea<\/span> class<\/span>=\"form-control @error('desc') is-invalid @enderror\"<\/span>  placeholder<\/span>=\"Product Desc\"<\/span>\n\naria-label<\/span>=\"Product Desc\"<\/span>\n\naria-describedby<\/span>=\"basic-addon1\"<\/span>  wire:model<\/span>=\"desc\"<\/span>><\/span><\/textarea<\/span>><\/span>\n\n@error('desc')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<small<\/span> class<\/span>=\"text-muted text-center mt-2\"<\/span>  wire:loading<\/span>  wire:target<\/span>=\"package\"<\/span>><\/span>\n\n{{ __('Uploading') }}\u2026\n\n<\/small<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"text-center\"<\/span>><\/span>\n\n<button<\/span> type<\/span>=\"submit\"<\/span>  class<\/span>=\"btn btn-sm btn-primary\"<\/span>><\/span>\n\n{{ __('Create New Product') }}\n\n<i<\/span> class<\/span>=\"spinner-border spinner-border-sm ml-1 mt-1\"<\/span>  wire:loading<\/span>  wire:target<\/span>=\"store\"<\/span>><\/span><\/i<\/span>><\/span>\n\n<\/button<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<\/form<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                        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.<\/p>\n
                        Install QR Code Package<\/h2>\n
                        In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application.<\/p>\n
                        We will use the simplesoftwareio\/simple-qrcode<\/code> package to create the QR Codes that we will embed on our product labels.<\/p>\n
                        composer require simplesoftwareio\/simple-qrcode<\/code><\/p>\n
                        SQLite Database<\/h2>\n
                        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.<\/p>\n
                          \n
                        1. \n
                          Edit your .env<\/code> file and change DB_CONNECTION<\/code> to sqlite<\/code><\/p>\n<\/li>\n
                        2. \n
                          Open your config\/database.php<\/code> file and change the default to sqlite:<\/p>\n<\/li>\n<\/ol>\n
                          'default' => env('DB_CONNECTION', 'sqlite'),<\/code><\/p>\n
                            \n
                          1. In the connections array, change sqlite\u2019s database key-value pair as shown below and leave the rest as is:<\/li>\n<\/ol>\n
                            \n'connections'<\/span>  =>  [\n\n'sqlite'<\/span>  =>  [\n\n'driver'<\/span>  =>  'sqlite'<\/span>,\n\n'url'<\/span>  =>  env('DATABASE_URL'<\/span>),\n\n'database'<\/span>  =>  database_path('database.sqlite'<\/span>),\n\n'prefix'<\/span>  =>  ''<\/span>,\n\n'foreign_key_constraints'<\/span>  =>  env('DB_FOREIGN_KEYS'<\/span>,  true<\/span>),\n\n],\n\n...\n\n];\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                            Run the command php artisan migrate:status<\/code> to test if you are connected, you should see the response Migration table not found<\/code>.<\/p>\n
                              \n
                            1. Next, we need to create the Product model. Run the command<\/li>\n<\/ol>\n
                              php artisan make:model Product<\/code><\/p>\n
                              This will create the file app\\Models\\Product.php<\/code>. Open the file and add the following:<\/p>\n
                              \nprotected<\/span>  $fillable  =  [\n\n'name'<\/span>,\n\n'price'<\/span>,\n\n'short_desc'<\/span>,\n\n'desc'<\/span>,\n\n'package'<\/span>\n\n];\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                                \n
                              1. Lastly, we will create the create_products_table<\/code> migration:<\/li>\n<\/ol>\n
                                php artisan make:migration create_products_table<\/code><\/p>\n
                                Open the file created at database\\migrations\\<timestamp>_create_products_table.php<\/code> and in the up<\/code> method and the following code under Schema:create<\/code>:<\/p>\n
                                \n$table->id();\n\n$table->string('name'<\/span>);\n\n$table->float('price'<\/span>);\n\n$table->string('short_desc'<\/span>);\n\n$table->longText('desc'<\/span>);\n\n$table->string('package'<\/span>);  \/\/will store URL of package<\/span>\n\n$table->timestamps();\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                                Once done run the command php artisan migrate<\/code>, this will create the products table with the above columns.<\/p>\n
                                Implementing the QR Code<\/h2>\n
                                Open the file app\/Http\/Livewire\/ProductPackaging.php<\/code>. 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.<\/p>\n
                                Add the following code to this file.<\/p>\n
                                  \n
                                1. First, we use Livewires WithFileUploads<\/code> to help us with file uploads, then create the variables as shown.<\/li>\n<\/ol>\n
                                  \nuse<\/span>  Livewire<\/span>\\WithFileUploads<\/span>;\n\npublic<\/span>  $package;\n\npublic<\/span>  $name;\n\npublic<\/span>  $price;\n\npublic<\/span>  $short_desc;\n\npublic<\/span>  $desc;\n\npublic<\/span>  $location;\n\npublic<\/span>  $qrCodeId;\n\npublic<\/span>  $product;\n\n...\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                                    \n
                                  1. Secondly, we will create the store<\/code> method which will process the creation of the product label. First by creating the QR code, uploading it to Cloudinary<\/a>, then creating an image overlay.<\/li>\n<\/ol>\n
                                    \npublic<\/span>  function<\/span>  store<\/span>()<\/span>  <\/span>{\n\n...\n\n}\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                                      \n
                                    1. Let\u2019s see how this works:<\/li>\n<\/ol>\n