As you can see, the design is very simple, as usual. 

In this project we will use the usual HTML, CSS and some embedded PHP, nothing complex but you will need to know your way around PHP.

1. A PHP server (Xampp, Wampp, Mampp or hosted, your choice).
2. You PHP server has GD2 installed (I'm pretty sure most servers have this installed);
3. The QR Code Library. Download it here. Get the latest version.

Setting up the Project.

In your root folder/project folder create two files, index.php and styles.css. Also create a folder, I named mine phpqrcode. Extract the contents of the archive file you downloaded into this folder.

First things first, lets see if the project is working. In your index.php file write the following code.

<?php
    echo "<img src='phpqrcode/php/qr_img.php?d=Hello'>";
?>

You should get a qrcode on your screen like the one below.

A QR Code appears on the browse.

This PHP QR Code library uses the html image tag to draw the QR Code as an image.  As you can see from the code above, we are simply echoing a normal html image tag, the only unusual part is it's source attribute. You see, inside the library we downloaded is a file caleed qr_img.php . This is the file that recieves the details then returns the QR Code as an image. Also notice the question mark and the letter 'd' ( ?d=Hello). This is how we pass our values to the qr_img.php file. If you have been paying attention in your php classes, you will notice that we are actually passing this values through the GET method (src='phpqrcode/php/qr_img.php?d=Hello'), so my presumption is that the file checks for the set $_GET['']; values then uses that information to give the final result, anyways now you know. The d stands for the text characters we want to be converted to qr code. More on that next.

The Parameters.

The php library takes other values like size, qr Code version, Error Handling Level e.t.c. Below is a list explaining the important parameters.

• d : Data you want to encode into a QRcode. A special letter like '%'.space or 8bit letter must be URL-encoded.It's important to note that this value cannot be omitted.
• e : Error correct level. The values can be 'L','M','Q' or 'H' (Ascending order).
• s : The image size, it can take a value of 1 or more.
• v: This simply selects the qr version. The values range from 1-40. If not set the program chooses a suitable default.
• t: Type of image, e.g for jpg, use the value 'J' (That's the only version on the documentation :-( ).

Below is an example of how we can put the values together.

src='phpqrcode/php/qr_img.php?d=The_Text&t=J&e=H&v=6&s=5'>

Pretty awesome right? I think so too. Now lets make the final php script.

<?php 
//Checking whether the form has been submitted
if (isset($_POST["submit"])) {
$data = $_POST["QRContent"];
$type = 'J';
$ErrLv = 'H';
$version = 5;
$size = 5;
echo "<img src='phpqrcode/php/qr_img.php?d=$data&t=$type&e=$ErrLv&v=$version&s=$size'></br>";
echo "<a href='phpqrcode/php/qr_img.php?d=$data&t=$type&e=$ErrLv&v=$version&s=$size' download='qrc.jpg'><button>Download</button></a>";
}
?>

The plan here is to make a html/php form in the index.php file. Then the idea is to have the form be processed within the same page (we will see this in the html markup). So in the code above, the if statement checks whether the form is submitted by checking if the submit button has been initiated (the form has a method of post meaning the form data will be submitted using the post method), if true the specified code is executed.

In the code, we assign the $data variable with the value in the text form. The text form has a name of "QRCOntent". Then we assign the $type(image type), $ErrLv(Error handling level), $version(QR Code Version) and $size(size of image) variables with some default options.

later on you can make a more advanced form to dynamically get this options, but for the purpose of this post let's just use the above.

We then echo the image tag with all the variables merged together. The end user might also want to download the generated QR Code, so as you can see, the anchor tag comes to our aid. What we shall do here is to copy the same source url used to generate the QR Code in the image tag and paste it in the href attribute of the anchor below. The download attribute will suggest the user to save the file as qrc.jpg (this is important since the url doesn't specify the image type in the href link). We then enclose a button within the the anchor tag for styling.

The HTML(markup).

<!DOCTYPE html>
<html>
 <head>
  <title>QR Code Generator</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link href='https://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
 </head>
 <body>
  <div class="displayBox">
  <h2>QR Code Generator</h2>
  <form method="post" action="">
  <input type="text" name="QRContent" />
  <input type="submit" name="submit" value="Generate" />
  </form>
  <div class="qrCodeRender">
  <!--The php script goes here -->
  </div>
  </div>
 </body>
</html>

The HTML markup is quite simple, we start by importing an external style sheet on line 5, and on line 6, we import the google font we will be using for the site. Inside the body tag, is a div with a class of "displayBox". This is where all the content goes. Inside the div we start with a h2 heading.

Then comes the form. as you can see, the form's action attribute is left blank so that it submits to the same page. The method is set to post hence the data submitted via $_POST[];. The form has one text input with a name of "QRContent". This text input is where the user will input his/her data. The name is used to identify it's value when assigning it to a variable using post method. The submit input(which is basically a button) will send the info when clicked. It has a name of "submit" which we used to see if the form has been submitted in the above php script.

Below the form is another div with a class of "qrCodeRender", as the class name explains, it's where we put the php code that renders the QR Code image and download button.

The CSS (Cascading Style Sheet).

html, body{
 padding: 20px 50px;
 margin: 0;
 background: #50B8E7;
 font-family: 'PT Sans', sans-serif;
}
h2{
 font-size: 43px;
 color: #fff;
}
.displayBox{
 min-height: 300px;
 padding: 12px;
 text-align: center;
}
input, button{
 font-size: 15px;
 line-height: 19px;
 font-weight: 600;
 color: #fff;
 padding: 8px 12px;
 border-radius: 4px;
 background: transparent;
 border: 2px solid #fff;
 margin: 15px 5px;
}
input[type='submit'], button{
 cursor: pointer;
}

The css is very short, which is a good thing :-). We start off by styling the html and body. We set the padding to 20px on top and bottom of the page snd 50px on the right and left of the page. we strip all the default margins, set a blue-ish background and specify the google font to be used in the entire body. we then specify the font color and size of the h2 heading.

next we target the div with the class "displayBox". With a minimum height of 300px and all round padding of 12px, we align all the text to the center. Aligning all the text  to the center makes sure that the form elemnts and buttons within that div will always stay at the center of the page, cool right?

Next we style all the inputs and buttons. A few important mentions; we set the background to transparent then give them a solid white border to make them see-through with the borders showing them off. I personally find this very visually appealing.

Finally we target the input of type submit and the button to tell the browser that when the mouse hovers over them, the cursor should change to a pointer.

I hope you enjoyed this as I did. You can download the project here.