QR Code Generator System

QR Code Generator System


What you need is the web server running on your PC such as WAMP / XAMPP / MAMP andtext editor such as Notepad++ or Dreamweaver to create codings. Google released the Google Chart API for public used and it make the development process easier as we can used the service provided by Google in order to generate the QR codes. Now, create a new file known as index.php which will collect information from user such as the QR codes size, encoding and the information field. Below is the codes for index.php file:

<html>
<head>
<title>QR Code Generator</title>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="atas">QR CODE GENERATOR</div>
<div class="small">i code the pixel here...</div><br><br>

<table border="0" align="center">
<tr>
<td><div id="result">
        <iframe name="qrcode-iframe" frameborder="0"  id="qrcode" src="/generate.php" height="315px;" width="350px"></iframe>
    </div></td>
<td valign="top"><div id="generator">
        <form target="qrcode-iframe" action="generate.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>Correction:</legend>
            <input type="radio" name="correction" value="L">L - 7% data loss<br>
            <input type="radio" name="correction" value="M">M - 15% data loss<br>
            <input type="radio" name="correction" value="Q">Q - 25% data loss<br>
            <input type="radio" name="correction" value="H">H - 30% data loss<br>
          </fieldset> 
         
          <fieldset>
            <legend>Content:</legend>
            <textarea name="content"></textarea>
          </fieldset>       
      <br><br><br>
          <input type="submit" value="Generate QR Code!" class="button"></input>
        </form>
    </div></td>
</tr>
</table>


<br><br><br><br>
    <div class="footer">
    <a href="/asyraf.org">Muhammad Asyraf Wahi Anuar</a>
     </div>


</body>
</html>

 

The index.php file collect data from users and we need to create a file known as generate.php in oder to process the data using Google Chart API. These file collection data from form using the REQUEST method and append data to Google Chart API URL to get the QR codes. Here the codes:

<?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";
     $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.'">';
}
?>

 

Last is the CSS:

body{
    width:100%;
    margin:0px;
    padding:0px;
    background-image:url(../img/bg.png);
    background-repeat: repeat;
    font-family: 'Oswald', sans-serif;
}
.atas{
  padding-top:40px;
  font-size: 40px;
  text-align: center;
  color: #ba2323
}

.small{
  font-size: 20px;
  text-align: center
}
form{
    width:600px;
    padding: 0px;
    margin: 0px;
}
form textarea{
    font-family: Arial, serif;
    font-size:12px;
    width:600px;
    margin:5px;
    height:40px;
    overflow: hidden;
}
iframe{
    border:1px solid #000000;
}
#generator{
    width: 600px;
    margin-left:auto;
    margin-right: auto
}
fieldset {
    border: 1px dotted #61B5CF;
    margin-top: 1.4em;
    padding: 0.6em;
    float:left;
  width: 200px
}
.button {
    background-color:#ba2323;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:32px;
    text-decoration:none;
    color:#fff;
    border: solid 1px #831212;
    background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
    border-radius: 5px;
    width: 635px;
    height: 50px
}

.button:active {
    padding-bottom:9px;
    padding-left:10px;
    padding-right:10px;
    padding-top:11px;
    top:1px;
    background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}
#generator fieldset{
    border:1px solid #000000;
}
#result{
    padding-top:7px;
    margin-left:auto;
    width: 350px;
  margin-right: auto;
  height: 350px
}
.footer{
  background-color: #000000;
  color: #FFFFFF;
  text-align: center
}
a, a:visited, a:link, a:active, a:hover {
	color: white;
	text-decoration: underline;
}
a, a:visited, a:link, a:active, a:hover {
	color: white;
	text-decoration: underline;
}
a, a:visited, a:link, a:active, a:hover {
	color: white;
	text-decoration: underline;
}
a, a:hover {
	color: #ba2323;
	text-decoration: underline;
}

 


Download this code from download section or directly visit my Github pages.
Good luck!

Author Information
Muhammad Asyraf bin Wahi Anuar
Web Administrator
Muhammad Asyraf bin Wahi Anuar, lecturer, majoring in Information System Management, Faculty of Information Management, Universiti Teknologi MARA (UiTM). Interested with web and system development. Asyraf enjoys life and has great enthusiasm for all outdoors activities especially MTB!


Leave your comments

Post comment as a guest

0

People in this conversation