How to generate QR code using PHP and Ajax

QR code is a two-dimensional barcode, also known as the Quick Response code. It can contain URL, simple text, contact number, email address and so on. In this tutorial, I will guide you through a step by step way about how to generate QR code using PHP and Ajax. The following example of QR code generator is very easy to implement and understand. In order to generate the QR code, you need a PHP library – PHP QR Code, download the latest version. Also, it is already included in the complete source code. Also, you may like to read the article on how to generate the barcode using PHP

.

File Structure

Before proceeding, please have look at the file structure —

• index.php
• generate-qr-code.php
• bootstrap (for bootstrap CSS and JS files)
• jquery.min.js
• qrcodes (location of generated QR code images)
• library (PHP QR Code library)

HTML – QR Code Generator Form (index.php)

1. <div class="container">
2. <div class="row">
3. <div class="col-md-6 col-6">
4. <form class="form-horizontal" method="POST" id="form" onsubmit="return false">
5. <div class="form-group">
6. <label class="control-label">Data : </label>
7. <input class="form-control col-xs-12" name="dataContent" id="dataContent" type="text" value="" required="required">
8. </div>
10. <div class="form-group">
11. <label class="control-label">ECC : </label>
12. <select class="form-control col-xs-12" name="ecc" id="ecc">
13. <option value="H">H - best</option>
14. <option value="M">M</option>
15. <option value="Q">Q</option>
16. <option value="L">L - smallest</option>
17. </select>
18. </div>
20. <div class="form-group">
21. <label class="control-label">Size : </label>
22. <input type="number" min="1" max="10" step="1" class="form-control col-xs-12" name="size" id="size" value="5">
23. </div>
25. <div class="form-group">
26. <label class="control-label"></label>
27. <input type="submit" name="submit" id="submit" class="btn btn-success" value="Generate QR">
28. </div>
29. </form>
30. </div>
32. <div class="col-md-6 col-6">
33. <div class="qrdiv loading"></div>
34. </div>
35. </div><!-- .row -->
36. </div>

The above HTML code generates a Bootstrap form where the user will input data and then it generates the  QR code based on that inputs.

Data : It can be URL, simple text, contact number, email address and so on.

ECC : Error Correction Capability. This compensates for dirt, damage or fuzziness of the barcode. A high ECC level adds more redundancy at the cost of using more space.

Size : This is the number of pixels that make a block of the matrix barcode.

Ajax – Call For QR Code Generator page (index.php)

1. <script type="text/javascript">
2. $(document).ready(function() {
3. $("#form").submit(function(){
4. $.ajax({
5. url:'generate-qr-code.php',
6. type:'POST',
7. data: {dataContent:$("#dataContent").val(), ecc:$("#ecc").val(), size:$("#size").val()},
8. beforeSend: function() {
9. $(".qrdiv").addClass('loading');
10. },
11. success: function(resp) {
12. $(".qrdiv").html(resp);
13. },
14. complete: function() {
15. $(".qrdiv").removeClass('loading');
16. },
17. });
18. });
19. });
20. </script>

The above jQuery Ajax code sends the user’s value to the generate-qr-code.php page and it returns the dynamically generated QR code as a .png image to the index page.

PHP – Dynamically Generate QR Code (generate-qr-code.php)

1. <?php
3. if(isset($_POST) && !empty($_POST)) {
5. include('library/phpqrcode/qrlib.php');
7. $image_location = "qrcodes/";
9. $image_name = date('d-m-Y-h-i-s').'.png';
11. $dataContent = $_POST['dataContent'];
12. $ecc = $_POST['ecc'];
13. $size = $_POST['size'];
15. // generating the QR code
16. QRcode::png($dataContent, $image_location.$image_name, $ecc, $size);
18. // displaying the QR code on the web page
19. echo '<img class="img-thumbnail" src="'.$image_location.$image_name.'" />';
21. } else {
22. header('location:./');
23. }
24. ?>

The above PHP code dynamically generates the QR code based on the user inputs. First of all, you have to include the qrlib.php file in your code. Each time when a new image will create it takes the PHP date and time as the new image name. QRcode() function creates the .png image of QR code. It accepts four parameters. The first one is the data, on which you want to create the QR code. The second parameter is image location with image name. The third and fourth parameters are ECC and size of the QR code respectively.

Demo & Complete Source Code of PHP QR Code Generator

Try the online demo on – how to generate QR Code using PHP and Ajax by click on the below demo link. Download the complete source code from the below Download link. Please, like and share this post with others.