These days QR Code has become more and more popular as it capture all the information using a Smart Phone. QR codes can be used in Google’s Android operating system and iOS devices (iPhone/iPod/iPad), as well as by using 3rd party barcode scanners.
So here I am going to tell how to build QR Code generator using Google Chart API.
First of all you need to create two file
– index.php: in the file you create a form where you collects the input from the user like size, encoding, content and correction. And make the action of the this form to generate.php.
– generate.php: in this file collect the input data from the above form and process it with Google Chart API and create the dynamic QR Code.
File index.php
[html]
<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-iframe" action="generate.php" method="post">
<fieldset>
<legend>Size:</legend>
<input type="radio" name="size" value="150×150" checked>150×150<br>
<input type="radio" name="size" value="200×200">200×200<br>
<input type="radio" name="size" value="250×250">250×250<br>
<input type="radio" name="size" value="300×300">300×300<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 QR Code"></input>
</form>
</div>
<div id="result">
<iframe name="qrcode-iframe" frameborder="0" id="qrcode" src="generate.php" height="315px;" width="350px"></iframe>
</div>
</div>
</body>
</html>
[/html]
In the above file collects the data from the user and sends that data to generate.php and create the QR Code using Google Chart API in the iFrame.
File generate.php
[php]
<?php
if(isset($_REQUEST[‘content’])){
//capture from the form
$qr_size = $_REQUEST[‘size’];
$qr_content = $_REQUEST[‘content’];
$qr_correction = strtoupper($_REQUEST[‘correction’]);
$qr_encoding = $_REQUEST[‘encoding’];
//form google chart api link
$qrImageUrl = "https://chart.googleapis.com/chart?cht=qr&chs=$qr_size&chl=$qr_content&choe=$qr_encoding&chld=$qr_correction";
//print out the image
echo ‘<img src="’.$qrImageUrl.’">’;
}
?>
[/php]
In the above file (generate.php) collects the data from the form using REQUEST method and append the data into the Google Chart API URL and generate the QR Code image.
