If you are simply looking for a quick way to encode a URL as a downloadable QR Code, see: Chrome’s QR Code generator.
Quick Response (“QR”) Codes are fashionable little things with many, many uses. I had previously worked on an implementation of QR Codes in a project using the Google Charts API which is now deprecated. Fortunately, there are several API’s available: this is a simple implementation of a QR Code generator using the free goQR.me API.
1. API
The key to the following code is simply passing a few parameters to the API via a URL like so (paste the following into the address bar of your browser to test):
http://api.qrserver.com/v1/create-qr-code/?data=HelloWorld!&size=100x100
2. HTML
Displaying the QR code on a webpage is then as simple as using the above as the value of the src attribute in an image tag:
<img src="http://api.qrserver.com/v1/create-qr-code/?data=HelloWorld!&size=100x100" />
which results in:
3. jQuery
To incorporate this into a webpage so that a user can input some text and have it encoded in the QR Code dynamically, we build a basic HTML page with an input field and a button.
I added a bit of AJAX flashiness using jQuery to keep things interesting:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" language="javascript" src="jquery-1.11.0.js"></script>
</head>
<body>
<h2>QR Codes demo</h2>
<p><label class="for" for="encode_this">Encode this:</label><input name="encode_this" id="encode_this" /><button id="get_code">Get QR Code</button></p>
<div id="imageContainer">Nothing yet...</div>
<script type="text/javascript">
$(document).ready(function() {
// getQRcode();
$('#get_code').click(function() {
var theQuery = $('#encode_this').val();
if(theQuery.length>0) {
$.ajax({
type: "POST",
url: "AJAXqr.php",
cache: false,
data: { get_qr: theQuery },
error: function(msg) {
alert(msg);
},
success: function(text) {
$("#imageContainer").html(text);
}
})
} else {
alert('You have entered nothing');
}
return false; });
});
</script>
</body>
</html>
4. PHP
Save this code as a script named AJAXqr.php in the same directory:
<?php
session_start();
define("QRSERVER", "http://api.qrserver.com/");
function get_qr($to_encode) {
$size = 100;
$encode_d = urlencode($to_encode);
return '<img src="'.QRSERVER.'v1/create-qr-code/?data='.$encode_d.'&size='.$size.'x'.$size.'" alt="'.$to_encode.'" title="'.$to_encode.'" />';
}
if($_POST['get_qr']) {
echo get_qr($_POST['get_qr']);
}
?>
5. Demo
See the QR Codes demo here…
References:
- W3schools. (2022). What is AJAX. Available at: https://www.w3schools.com/whatis/whatis_ajax.asp (Retrieved 9 November 2022)