Build Your Own QR Code Generator with Google Chart API

by in Tutorials on 12th Oct 2011 · Comments

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


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.

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.