Build Your Own QR Code Generator with Google Chart API

Build Your Own QR Code Generator with Google Chart API

QR code has become more and more popular since it enables us to grab information instantly using a smart phone. It saves us time from typing a long reluctant URL to a small phone browser; Smart phones will auto dial a number by scanning a QR code using a QR code scanner.

As a developer, have you ever wonder how to build your own QR code generator? With the power of Google Chart API, building a QR code generator might be much easier than you thought.
Let us get started!

Build Your Own QR Code Generator with Google Chart API
Image credit: Spiralshannon

[tut demo=”http://www.onextrapixel.com/examples/qr-code-generator/” download=”http://www.onextrapixel.com/examples/qr-code-generator/qr-code-generator.zip”]

As a developer, have you ever wonder how to build your own QR code generator? With the power of Google Chart API, building a QR code generator might be much easier than you thought.
Let us get started!

Before We Start

At the end of this tutorial, you will build your own QR code generator similar to below:

QR Code Generator

Preparation

Create two php files called index.php and gen.php.

  • index.php: this will be the front page where users select size, encoding and error correction of the generated QR code image. And it is also the place to enter data for QR code.
  • gen.php: this page will request data from Google Charts API. And it is called from index.php above using an iframe.

File: index.php

<html>
<head></head>
<body>
<div id="container">
    <h1>QR code generator</h1>
    <div id="generator">
        <form target="qrcode-frame" action="gen.php" method="post">
          <fieldset>
            <legend>Size:</legend>
             <input type="radio" name="size" value="150x150" checked>150x150<br>
             <input type="radio" name="size" value="200x200">200x200<br>
             <input type="radio" name="size" value="250x250">250x250<br>
             <input type="radio" name="size" value="300x300">300x300<br>
          </fieldset>
          <fieldset>
            <legend>Encoding:</legend>
            <input type="radio" name="encoding" value="UTF-8" checked>UTF-8<br>
            <input type="radio" name="encoding" value="Shift_JIS">Shift_JIS<br>
            <input type="radio" name="encoding" value="ISO-8859-1">ISO-8859-1<br>
          </fieldset>
          <fieldset>
            <legend>Content:</legend>
            <textarea name="content"></textarea>
          </fieldset>        
          <fieldset>
            <legend>Error correction:</legend>
            <select name="correction">
                <option value="L" selected>L</option>
                <option value="M">M</option>
                <option value="Q">Q</option>
                <option value="H">H</option>
            </select>
          </fieldset>        
          <input type="submit" value="Generate"></input>
        </form>
    </div> 
    <div id="result">
        <iframe name="qrcode-frame" frameborder="0"  id="qrcode" src="gen.php" height="315px;" width="350px"></iframe>
    </div>
</div>
 
</body>
</html>

First part of the code above is an HTML form with available options which will be passed to create the QR code image. Take note the form’s target attribute’s value is qrcode-frame. This tells the form to submit through an iframe.

<div id="generator">
<form target="qrcode-frame" action="gen.php" method="post">
    <fieldset>
        <legend>Size:</legend>
        <input type="radio" name="size" value="150x150" checked>150x150<br>
        <input type="radio" name="size" value="200x200">200x200<br>
        <input type="radio" name="size" value="250x250">250x250<br>
        <input type="radio" name="size" value="300x300">300x300<br>
    </fieldset>
    <fieldset>
        <legend>Encoding:</legend>
        <input type="radio" name="encoding" value="UTF-8" checked>UTF-8<br>
        <input type="radio" name="encoding" value="Shift_JIS">Shift_JIS<br>
        <input type="radio" name="encoding" value="ISO-8859-1">ISO-8859-1<br>
    </fieldset>
    <fieldset>
        <legend>Content:</legend>
        <textarea name="content"></textarea>
    </fieldset>        
    <fieldset>
        <legend>Error correction:</legend>
            <select name="correction">
                <option value="L" selected>L</option>
                <option value="M">M</option>
                <option value="Q">Q</option>
                <option value="H">H</option>
            </select>
     </fieldset>        
     <input type="submit" value="Generate"></input>
</form>
</div>

Second part of the code above is an iframe which will be used to submit the form. The reason we are using iframe here is to let users constantly generate QR code without refreshing the page.

<div id="result">
    <iframe name="qrcode-frame" frameborder="0"  id="qrcode" src="gen.php" height="315px;" width="350px"></iframe>
</div>

Now view index.php from your browser. It should look like something below.

Default QR Code Generator

It does not look very good with the current plain CSS style; let us add some CSS style to the page. We will not discuss details of CSS styles here, since this tutorial is more focus on the PHP part.

<html>
<head>
<style>
body{
    width:100%;
    margin:0px;
    padding:0px;
}
#container{
    font-family: Arial, serif;
    font-size:12px;
    padding-top:20px;
    width:700px;
    margin: auto;  
}
form{
    width:300px;
    padding: 0px;
    margin: 0px;
}
form textarea{
    font-family: Arial, serif;
    font-size:12px;
    width:270px;
    margin:5px;
    height:40px;   
    overflow: hidden;
}
iframe{
    border:1px solid #DDD;
}
#generator{
    width: 300px;
    float:left;
}
#generator fieldset{
    border:1px solid #DDD;
}
#result{
    padding-top:7px;
    margin-left:340px;
    width: 350px;  
}
</style>
</head>
 
<body>
<div id="container">
    <h1>QR code generator</h1>
    <div id="generator">
        <form target="qrcode-frame" action="gen.php" method="post">
          <fieldset>
            <legend>Size:</legend>
             <input type="radio" name="size" value="150x150" checked>150x150<br>
             <input type="radio" name="size" value="200x200">200x200<br>
             <input type="radio" name="size" value="250x250">250x250<br>
             <input type="radio" name="size" value="300x300">300x300<br>
          </fieldset>
          <fieldset>
            <legend>Encoding:</legend>
            <input type="radio" name="encoding" value="UTF-8" checked>UTF-8<br>
            <input type="radio" name="encoding" value="Shift_JIS">Shift_JIS<br>
            <input type="radio" name="encoding" value="ISO-8859-1">ISO-8859-1<br>
          </fieldset>
          <fieldset>
            <legend>Content:</legend>
            <textarea name="content"></textarea>
          </fieldset>        
          <fieldset>
            <legend>Error correction:</legend>
            <select name="correction">
                <option value="L" selected>L</option>
                <option value="M">M</option>
                <option value="Q">Q</option>
                <option value="H">H</option>
            </select>
          </fieldset>        
          <input type="submit" value="Generate"></input>
        </form>
    </div> 
    <div id="result">
        <iframe name="qrcode-frame" frameborder="0"  id="qrcode" src="gen.php" height="315px;" width="350px"></iframe>
    </div>
</div>
 
</body>
</html>

Now view index.php again from your browser, now it should look better as below:

Final QR Code Generator

File: gen.php

Copy and paste following code into gen.php.

<?php
//1
if(isset($_REQUEST['content'])){
    //2
    $size          = $_REQUEST['size'];
    $content       = $_REQUEST['content'];
    $correction    = strtoupper($_REQUEST['correction']);
    $encoding      = $_REQUEST['encoding'];
     
    //3
    $rootUrl = "https://chart.googleapis.com/chart?cht=qr&chs=$size&chl=$content&choe=$encoding&chld=$correction";
     
    //4
    echo '<img src="'.$rootUrl.'">';
}
?>
  • Do request only if there is a data posted to the page.
  • Capture data using $_REQUEST and store them in different variables.
  • Construct a Goolge Charts API URL, and append captured data above to the URL.
  • Print out a img tag with src equals to the Google Charts API created previously.

[tut demo=”http://www.onextrapixel.com/examples/qr-code-generator/” download=”http://www.onextrapixel.com/examples/qr-code-generator/qr-code-generator.zip”]

Generate Your Own QR Code Now!

That is all, now your own QR code generator should be fully working. Navigate index.php from your browser and enter some data in content filed, select your desired options and click “generate” button.
You should be able to see a QR code being created instantly.

Xu Ding is a passionate web developer. He is also the founder of Star Tutorial.

Comments

  1. / Reply

    Xu thanks for such a great tut. I was searching for such detailed guide for a while and stumbled upon yours. Now I’m going to make such code on my own. Later on will share final results. Many thanks again :-)

    1. / Reply

      I am so glad it helped.

      Looking forward to yours.

      :)

  2. / Reply

    Great post! thanks for these coding that will help me to learn more on Graphic n web designing :) thanks

    1. / Reply

      Glad to hear that.

  3. / Reply

    Nice tutorial.

    One thing, $_POST[‘content’] should be URL encoded.

    1. / Reply

      Yes, that is absolutely right.

      • Ewan,
      • February 21, 2012
      / Reply

      Hi Codefest.

      What do you mean by: $_POST[‘content’] should be URL encoded.. I can’t find $_POST[‘content’]. Has it been fixed in the code aready?

      Thanks

  4. / Reply

    really helping for generate qr code for my tech sites where we writing app reviews. thanks for sharing

    1. / Reply

      :)

  5. / Reply

    excellent work on this technique creation. thanks

    1. / Reply

      Glad you liked it.

    • dhani bin zain,
    • October 19, 2011
    / Reply

    Thanx a lot mr. Xu Ding, i wanna know bout this license? can u tell me?

    1. / Reply

      What do you mean the license?

      If you mean the terms of using Google Chat API.

      You can take a look at it one official site.

      :)

    • chroix,
    • December 1, 2011
    / Reply

    This is an excellent example. Thanks a lot.

    • Tom,
    • December 9, 2011
    / Reply

    Good stuff – thanks.

    An interesting post about the Google Chart API here.

    • GarethW,
    • January 14, 2012
    / Reply

    Hi, you have done a great functional script with real simplicity (which is great for a low level techie like myself). Can you explain what the ‘Error correction’ does, and its parameters M/Q/H, – what would happen if this was not included in the script? And, would the form work without ‘Encoding’ options?
    Again, amazingly simple – thanks – Gareth

    • damontanez,
    • February 16, 2012
    / Reply

    this site gives specs for QR-Codes including the error correction settings…
    http://www.denso-wave.com/qrcode/qrgene2-e.html

    • Ewan,
    • February 21, 2012
    / Reply

    Great tutorial, thanks for sharing.

    • Rik,
    • February 23, 2012
    / Reply

    Is there any chance you could explain to me why my generator shows a broken link before I enter anything, and how I could maybe fix this? That’d help me out incredibly much.

    Thanks in advance.

    • Hrishikesh,
    • February 29, 2012
    / Reply

    Hi,
    Thanks for this gr8 tutorial. i actually wanted to check with you if the knowledge base used by google API for making the QR code is available open source or is there any other equivalent that can be used if I dont wish to use gen.php to request content via google.

    • Van Anh,
    • February 29, 2012
    / Reply

    Hi Xu Ding,
    I’m from Vietnam. Many thanks to you for code. I have a problem need you help is: In the content filed I want is:

    Van Anh
    1977

    But in the QR code is:

    Van Anh1977

    How to fix it?
    Thanks in advance.

    • hicham,
    • March 28, 2012
    / Reply

    what to do if content is more then limit ?

    • Mike,
    • April 6, 2012
    / Reply

    I love this tutorial. However, I am having trouble getting the final qr code to include the urlencoded %20 instead of space. If the url has any spaces as %20 the scan results in a broken link. Such as client.php?cname=My%20Site is scanned as client.php?cname=My Site. which results in a broken link.

    I am using Droid Pro Scanner but I have a friend using the iphone app and getting same results.
    Any help with this would be greatly appreciated!

  6. / Reply

    XU Ding,

    Simple and clean. I only needed to click your download button save the zip file, and then upload the unzipped files to a directory on my server…DONE!

    I of course tweaked the index.php page a bit by adding my logo and links and will do more later. And your tutorial explains it all.

    Kudos buddy great work, thanks for the insight.

    -T

  7. / Reply

    Well really helpful tutorial. i am not expert at code but thinking of giving this QR Generator a try especially for my business niche related websites

    • James,
    • May 17, 2012
    / Reply

    Great simple tutorial

    • Yogi,
    • May 27, 2012
    / Reply

    This is fantastic… Thank you very much…

    I used it in my Joomla website and it works like a charm.

    Here is how:

    Add the content of index.php in an Article or Custom HTML
    Create a folder in the site root (eg. qrgen)
    Create a file called gen.php with its content
    Change the path of gen.php in the content of index.php(i.e. the article / custom html) into http://yourdomain.com/qrgen/gen.php

    Thats it… Publish the article / custom html.. There you go…

  8. / Reply

    Do you do contract work? I have a WordPress QR code plugin that I would like to have modified.

    • Walter,
    • June 24, 2012
    / Reply

    Could you translate the gen.php in to a gen.asp?

  9. / Reply

    Great stuff, we were looking for the code to produce our own QR codes rather than depending on a third party. Can you point us to a site where we can learn about building our own reader?

    • AIAO,
    • July 10, 2012
    / Reply

    What is the best way to make it produce an SVG file instead of an image?

    • efcooper,
    • September 12, 2012
    / Reply

    Great work Xu Ding! Can you suggest the best QR generator software I can get to generate QR codes inhouse without having to go on the internet? Thank you very much for your time.

  10. / Reply

    Hi, great tut man, i’m using a Codeigniter class to generate qrcodes, just i need to put inside the qrcode 4kb of AES text, is possible to do that? i tryed and the image was created but my Android scanner does not scans the image :(

    • Justin,
    • December 20, 2012
    / Reply

    thank you for this but i have a question how to process multiple fields unlike the example which is one textfield… i mean how to code like this one with 2 or more content boxes and how to process them…i really want to know because i will use this in my web project

  11. / Reply

    thank you I have been looking for something like this for a long time… I did add it to my site and it broke parts of my site.. any way you can PM me and take a look?

    Thanks and again thanks for making this..

  12. / Reply

    for somereason I can not get the qr to generate.. it did once but wont any more??? here is my site http://www.smurkcreative.com/qr/

    • Kalpesh Rajai,
    • February 3, 2013
    / Reply

    Hey Friend How Can I Chang PHP Code To Javascript ?

    • bob,
    • March 6, 2013
    / Reply

    Hi ive tried this over and over again with no luck. Every time I use this code I get the right boxes but the iframe/gen.php will not work correctly I either get a “page not found” error inside the frame or I’ll get this: ‘; } ?> inside the frame. please help

    • shar,
    • March 11, 2013
    / Reply

    like bob

    I have ( ‘; } ?> ) in the image box !

    • Truong Giang,
    • May 21, 2013
    / Reply

    I like it so much! thanks alot.

    • random person,
    • July 23, 2013
    / Reply

    i downloaded the two files from the zip you provided, set it all up correctly but when i add in the text and generate, the qr image is displayed on a new tab and when scanned it doesn’t have any information inside. why is this so? really need your help!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.