About PHP Dynamic Qr code

PHP Dynamic Qr code is a script that allows the generation and saving of dynamic and static QR codes. It has clean, responsive and user-friendly design. It is Based on AdminLte the "Best open source admin dashboard & control panel theme. Built on top of Bootstrap" and Core PHP Admin Panel, a simple Admin Pannel written in core PHP that contains an implementation of general features you might need in your website admin panel like: record management (CRUD), secure authentication, pagination, filters.

N.B. A careful reading of this documentation is recommended to fully understand how the script works.

What is a dynamic qr code

A Dynamic QR code has a modifiable destination URL.
A Short URL is placed into the QR code which then transparently re-directs the user to the intended destination. The destination of a dynamic QR code can be changed at any time and as often as you want – even if your marketing material has already been printed. This will save reprinting costs, effort and enable you to respond to any changes in the campaign as quickly as possible.

What is a static qr code

A Static QR code has a fixed destination URL.
The information encoded in static QR codes are fixed. The destination/data is stored directly in the QR Code graphic (hence QR codes are also getting larger and form a more complex pattern if there is more data to store). Therefore, the stored destination/data cannot be changed. Any typo in an already printed QR code cannot be changed, as with any other printed material. Through this script you can create 13 different types of static qr code.

Setup

Local setup:

  1. No more available from v2.3.0

Docker:

  1. Download docker-compose.yml file from github and edit if you want (recommended)
  2. docker compose build --no-cache && docker compose up -d
  3. Open your browser at http://localhost:80 and login with (username: superadmin, password: superadmin)
  4. Finish

Docker image building:

  1. Clone the project from github
  2. Clone the database project from github: https://github.com/giandonatoinverso/PHP-Dynamic-Qr-code-db
  3. Build and run both docker image: docker buildx build -f Dockerfile
  4. Open your browser at http://localhost:80 and login with (username: superadmin, password: superadmin)
  5. Finish

Upgrade

To upgrade the program from version 1.0 to version 2.x and maintain backward compatibility with the QR codes you have already created, files and users, you can follow these steps:

  1. Clone the project from github
  2. Edit config/environment.php with your database credential
  3. Launch upgrade/upgrade.php file in your browser

    4. The script makes the necessary changes in the database that adapt to the new source code.

  4. Finish

Multi account

Starting from version 2.x, the functionality that supports the creation and management of QR codes with the support of multiple accounts has been added

  1. Superadmin accounts can manage all users, all qrcodes created
  2. Admin accounts can only manage QR codes created by them and "universal" ones, i.e. not associated with any specific account

Frontend Files Structure


a) CSS Files
  • dist/css/adminlte.min.css Contains general css codes for admin panel
  • dist/css/alt folder Contains additional styles files
  • plugins/fontawesome-free/css/all.min.css Contains css of fontawesome
  • plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css Contains css of color picker input data
  • plugins/daterangepicker/daterangepicker.css Contains css of daterange input data
  • plugins/overlayScrollbars/css/OverlayScrollbars.css Contains css of the scrollbar relating to template customization (top right)

b) JS Files
  • dist/js/adminlte.js Contains general js codes for admin panel
  • dist/js/custom.js Contains custom js code for front-end
  • build/ folder Contains general dashboard script codes

c) Plugins used in application
  • Bootstrap The world’s most popular front-end open source toolkit
  • Bootstrap colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4
  • Chart JS Simple yet flexible JavaScript charting for designers & developers
  • Date Range Picker A JavaScript component for choosing date ranges, dates and times
  • Fontawesome The world's most popular and easiest to use icon set just got an upgrade
  • jQuery jQuery is a JavaScript library that greatly reduces the amount of code that you must write
  • jQueryUI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library
  • jQuery Validation This jQuery plugin makes simple clientside form validation easy
  • Moment JS Moment will still create a moment global, which is useful to plugins and other
  • Overlay Scrollbars A JavaScript scrollbar plugin which hides native scrollbars and provides custom styleable overlay scrollbars

d) Open source libraries used
  • MysqliDb Simple MySQLi wrapper and object mapper with prepared statements
  • vCard Qr code This class allows to easily generate a simple QR code using vCard 4.0
  • PHP to ICS A convenient script to generate iCalendar (.ics) files on the fly in PHP


Script Structure

  1. General

    2. All pages include the config.php file which in turn includes the helpers.php file and the MysqliDb class and the auth_validation.php file which takes care of verifying on each page that the user is logged in (read authentication types).

    As for the HTML structure, all pages start by including the head.php page which contains the entire head tag, the navbar.php page, the sidebar.php page. There is a header with the page title and then the different main content for each page. Finally, each page includes the footer.php file with the required js scripts; some pages have additional js scripts needed As specified at the beginning, the frontend part of this script is done with AdminLTE (Bootstrap). We therefore recommend reading the official documentation to fully understand the HTML structure.

  2. Qr code and Admin users

    3. The dashboard page has a separate structure, while the dynamic qr codes, static qr codes and users sections have a very similar structure to each other:

    1. dynamic_qrcodes.php, static_qrcodes.php, users.php allow you to view the relevant data
    2. dynamic_qrcode.php, static_qrcode.php, user.php allow you to add, modify and delete the relevant data

This script is designed as OOP as possible. Therefore, all QR code handling operations are performed using classes and methods. There are 3 classes for 3 the three sections (dynamic qrcodes, static qrcodes, users) and dynamic qrcodes, static qrcodes share a single Qrcode class which contains some methods used by both classes

Dynamic Qr code


The physical creation of a dynamic qr code is managed by a free external provider https://api.qrserver.com/

Static Qr code


The physical creation of a static qr code is managed by a free external provider https://api.qrserver.com/ and previously is managed differently depending on the type

Dashboard

The dashboard is the main page of the script. In this section there is a counter of the total number of qr code in the database, and in particular also the number of dynamic and static ones. There is also a counter regarding the number of scans of the dynamic qr code.
The script offers 2 examples of dynamic charts created with chart.js The first shows a weekly report of the number of qr codes created (dynamic and static), the second graph offers an overview of the number of scans of dynamic qr codes.

What happens when i scan a dynamic qr code?

When a dynamic QR code is scanned, the read.php page opens by default which increases the scan counter and takes care of carrying out the appropriate redirect. You can change the name of this page by remembering to change the constant defined in config.php You can also customize the redirect page and increase the timer

EXTRA

My script is in constant development and I hope to expand it from time to time with more and more useful features, so stay tuned for the updates.
With the first version, in the classes that realize the 2 types of qr code, an additional method not mentioned in the above documentation called addLogo() is included. To add this functionality you need to delete the comment characters inside the class and add the input fields to the forms for the user to upload the logo. However, this feature is not recommended as it can cause different QR code scanning errors depending on the scanner applications.

Support

Please don't forget to rate my script on GitHub.

Thank You,

Giandonato Inverso