How to Generate a QR Code using Google QR Code API and PHP

This tutorial tackles how to create a QR Code using Google QRCode API with PHP. QR stands for Quick Response and as per Google Dictionary description, it is a machine-readable code consisting of an array of black and white squares, typically used for storing URLs or other information for reading by the camera on a smartphone.

Getting Started

I've used Bootstrap in this tutorial which is a CSS framework and is included in the downloadable of this tutorial but if you want, you may download Bootstrap using this link.

Creating our QR Code

Our QR Code will be generated as an image and it will look something like this:

  1. <img src='https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=$code&choe=UTF-8'>
Descriptions:
cht=qr Required Specifies a QR code.
chs= Required Image size.
chl= Required The data to encode. Data can be digits (0-9), alphanumeric characters, binary bytes of data, or Kanji.
choe= Optional How to encode the data in the QR code.

For additional info, you may visit Google's documentation on QR Code using this link.

Creating our Script

To provide a working example, let's create a form and generate a QR Code on the inputted text. Create a new file, name it as index.php and paste the codes below.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>How to Create a QRCode using Google QRCode API</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1 class="page-header text-center">QRCode using Google QRCode API</h1>
  11. <div class="row">
  12. <div class="col-sm-3 col-sm-offset-3">
  13. <form method="POST">
  14. <div class="form-group">
  15. <label for="">Text to Convert to QRCode</label>
  16. <input type="text" class="form-control" name="text_code">
  17. </div>
  18. <button type="submit" class="btn btn-primary" name="generate">Generate QRCode</button>
  19. </form>
  20. </div>
  21. <div class="col-sm-3">
  22. <?php
  23. if(isset($_POST['generate'])){
  24. $code = $_POST['text_code'];
  25. echo "
  26. <img src='https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=$code&choe=UTF-8'>
  27. ";
  28. }
  29. ?>
  30. </div>
  31. </div>
  32. </div>
  33. </body>
  34. </html>

DEMO

That ends this tutorial. I hope this will help you with what you are looking for and for your future project. Explore more on this website for more tutorials and free source codes.

Happy Coding :)

Comments

Submitted byjohan78 (not verified)on Sat, 11/19/2022 - 22:25

thanks a lot!

Add new comment