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.
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:
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.
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:
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
$_REQUESTand store them in different variables. - Construct a Goolge Charts API URL, and append captured data above to the URL.
- Print out a
imgtag withsrcequals 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.
