Join Chris Converse for an in-depth discussion in this video Combining PHP (server-side languages) with Google Chart API, part of Design the Web: Adding Dynamic QR Codes.
- View Offline
- In the second option we're gonna take a look at using a server-side language so we can get the URL from the server so that we don't have to keep updating the image tag for every page of our site. So to follow along in this example we're gonna be opening up qroption2.php and in order to see this you'll need to be working from a web server that has PHP or you'll need to be running a local server in order to process this file. So now in the PHP file this looks exactly like the HTML file we just completed in the last lesson. We have a link to our style sheet and our article tag. We also have the image tag here we got from our snippets.
And our chart location is still set to x and what we're going to be doing is detecting the URL of this page and replacing x with whatever that URL is. Now you can preview this file in a browser. I'm gonna open up the preview inside of my code editor here. Now the one difference is I am running a local server here. So if I come in here and look at the URL of this page I'm running a web server with the domain of demo on my local server, then /qr_option2.php. Now the PHP script that we're gonna be writing will give us the value of any PHP page that the browser's pointing at.
So if I write mine correctly I will get this URL here. So let's start by coming over here to our PHP file. Let's get our cursor at the very top of the document, let's head a return. Now let's switch back over to our snippets. Let's open up snippets.html up in our code editor. Let's scroll down and find snippet 2. Here I have a PHP snippet which will give us the URL. So we have our beginning PHP tag and our ending PHP tag and now the syntax will vary based on the server-side languages. So again, you can use this technique with backend service, you'll just need to change the syntax for whatever language you're using.
So in PHP we're going to declare a URL variable that's gonna be equal to a string literal then a ., which is the concatenation string for PHP. $_server, we're gonna get the host, then we'll concatenate that with the server variable of REQUEST URI. So let's come down here, select this entire line, copy this to the clipboard. Let's switch back to option2.php and let's paste that at the very top of the document. So now when this PHP page is requested from the server the server will evaluate this tag and create a variable called URL that we can use throughout the document before the PHP server sends this to the browser.
So let's come up here and select and copy the variable URL, then we'll scroll down in the page. I'll re-size this a little bit. And what we're gonna do is come down here and find the letter x inside of the chart location and we're gonna replace the x with a PHP echo statement. So we'll start with a beginning tag ?php, then a space, another ? and end the tag. Then inside of this PHP statement we're gonna type echo, space, paste in the URL then a ;.
Then I'll save my file, the PHP file will be reprocessed in the server and then sent to the browser. And now we can see the updated chart. Now, if we were to scan this we would get the URL that I have on my local server which would be demo/qroptions.php. Now before I test this on a QR device a lot of times I'll just reprint the URL in the page so I can see what the value of that variable is. So I'm gonna come down here and copy the PHP echo statement. I'll paste this in after the image tag and then hit save. So now next to QR code I can see the value of that variable showing up there as well.
And if you're setting up a page for printing and this content's only gonna show when somebody prints your page you might wanna leave this URL there so that people can always get back to the website. Now this is the exact technique we used on a website that we maintain for Adobe Systems called acrobatusers.com. And when you're on a tutorial and you hit the print button what we do is serve up the same content of the page formatted for a printer and at the very bottom of the screen we print information about the website that this was printed from and we use Google Charts to dynamically generate a QR code based on the URL of the document.