Playing
01. Generate Scannable QR Codes With PHP

Episodes

0%
Your progress
  • Total: 12m
  • Played: 0m
  • Remaining: 12m
Join or sign in to track your progress

Transcript

00:00
So if you're looking to generate QR codes within your application really easily, I'm going to show you a package that we can download that allows us to do this. And we're also going to be creating a file specifically that allows us to specify the text that we want or a URL, specify the size of the QR code and padding if we need it.
00:24
So you can see an example here of a QR code. This is currently linking to Google. If you've got a QR code reader, go ahead and scan this and you'll see the Google URL appear.
00:35
Let's take a look inside of our text editor here and see how this actually works. So qrcode.php is a file that I've created over here. This uses the library that we're going to be pulling down with Composer and I'll show you how to do that as well.
00:48
And it allows us to define the text that we want to include. So in this case, it's google.co.uk. It allows us to define a size and we can also do things like add a little bit of padding if we need it.
01:01
But the reason I've created it this way is because then wherever we are in our application, we can generate an image using this URL. It gives us an almost API to generate a QR code directly within our application. So in this video, we're specifically going to be pulling the package down that we need
01:20
and then creating this qrcode.php file that you can use like this really, really easily. It doesn't cause a lot of mess and promotes code reuse. So let's go ahead and look at how we can build something like this. Okay, so we're going to start completely from scratch.
01:36
If you are trying to integrate this into your current application, it is really straightforward. It's not going to make much difference at all because everything's really clean and tidy. Now in my browser at the moment, I obviously don't have an index file or anything like
01:50
that. We'll be creating that in just a moment. Now we're going to be using this package to generate our QR codes. It's Android QR code.
01:59
So we're going to be pulling this down using Composer as a dependency in our project. Now if you want to use Composer, I would highly recommend it. It works for all operating systems and it's basically a dependency manager for PHP. If you haven't got this already, go ahead and download that and make sure you can access
02:17
it on the command line like the following. If you don't want to use Composer, that's fine. You can go ahead and hit download zip to pull in the files that you need and then you can manually include the class and then do things like that.
02:33
But to follow best practice, I'm going to use Composer to pull this down. So the first thing that we need to do is actually find this package and basically pull this package and put it into a Composer.json file. So on the command line here, we've got a couple of options.
02:50
We can search for packages. We already know the name of the package is Android slash QR code, but we can also show information about packages and this allows me to pull in a version that I want. So if you do want to search for packages, you can use Composer, search and then do something
03:08
like Android. That's going to give you a list of packages that match. In this case, we know this is the one that we need. So we can copy this and we can say Composer show, paste that in and that's going to give
03:21
us version information. So you can see here we've got versions up here. We don't really want to pull DevMaster or the development here. Let's say we pull in 1.3.star just so we know which sort of version we're working with and
03:36
any increments on this we can pull in. So we can either do this manually from our Composer.json file so we can create one here. Let's do this and we're going to save this as Composer.json and this will allow us to update and install our dependencies from the command line.
03:55
So we want to require this in as a dependency and we can go ahead and paste in the package name. In this case, we know that it is Android QR code. So we paste this in here and then within here, we define a version which we said 1.3.star.
04:17
So over on the command line now, we're going to run Composer install and that's going to install that for us. Really, really straightforward and if you ever have a new version of this released, you can just do a Composer update and it will pull down the latest version.
04:32
So if you have manually downloaded this, you're going to want to put it in some kind of folder and then require it in to the qrcode.php file that we're going to create. In my case, I already have the auto load generated by Composer so I can just pull that in and it will pull all of my project dependencies in much easier.
04:52
So let's create this qrcode.php file, qrcode.php and first of all, let's require in vendor autoload.php. So we now have the QR code library pulled in. So we know that we can start to use that.
05:16
So within this specific qrcode.php file, we're going to be working to generate a qrcode and then we'll apply the options that we need to be able to use this within an HTML file or anywhere else on our project. So the first thing that we need to do then is go ahead and create a new instance of the
05:34
qrcode class and we can do this, save it in a variable called qr. Now it's namespaced on the Android qrcode. So at the top of your project, you can either say use Android qrcode like that or you can say new Android qrcode and then the name of the class.
05:57
So we'll do that for now since this file is pretty basic but depending on how you're working, you might want to do that instead. So like the following. So now that we've got that, we can go ahead and actually start to use some of the methods
06:11
that are available on this to generate for us and this is really straightforward. So there's a method called setText which allows us to obviously set the text for this qrcode. This could of course be a URL so we could do something like google.co.uk or we could go in here and we could just type a name in or something, anything that we want, a message
06:32
to our users. Let's leave this as a URL for now. What we can then do is go ahead and set the size using the setSize method. So for this, it can be something like 200 which is about right, sort of normal size
06:48
and that's fine. What we can then do is set the padding on this, so the padding around the outside. So let's set that for, I don't know, 10 for now. Now the last thing that we need to call is the render method which will actually output
07:03
the image data for this qrcode. So we can use render like that. You don't need to echo it out, it will just do it for you. So this is all well and good but it's not going to quite work as we expect.
07:15
Let's check this out in the browser. So you can see here that this is actually outputting the image data rather than an actual image. And this is really important because when we come to include qrcode.php within an image
07:29
element in HTML, this isn't going to work properly otherwise. So what we can actually do here is use the header function in PHP to set the content type. So we say header content type image slash png.
07:46
That's going to alter the content type of this page and that will be rendered as an actual image and there's our qrcode. So again, you can go ahead and scan this if you didn't scan the one at the start of the video and you can see that this now works.
08:00
Obviously if you're following along, generate your own text and give this a scan. So it's all well and good doing this but what happens if say we have some kind of page like index.html, we have some kind of document layout here and we want to include an image on here with a qrcode.
08:22
Let's just set a title here. So I'm going to say here is your qrcode. Now there are a couple of ways that we could do this. If this was a PHP file, we could of course call this for every time we want to generate
08:41
a qrcode. So we could do something like the following but this is really messy. It's horrible the fact that you have to keep calling this, not to mention if you change the library or package that you use to generate qrcodes, say you wanted to switch this out
08:58
with another one, then it's not going to work quite right because you're going to have to go back and modify all of your code. So we're going to turn this file into a dynamic qrcode generator. So to do that, let's go ahead and define how we want this to look.
09:15
So I'm going to create an image tag here. The alt will just say qrcode and the source is going to be qrcode.php. We're going to say text equals and let's give a URL here and we're going to say we want the size to be 200 and we'll also specify the padding.
09:36
So let's say we want a padding of 10. So this is how we want this to work. We can just use this anywhere we want then and we'll automatically receive a generated qrcode.
09:47
Now inside of here, we need to make adjustments to allow for a text, size and padding to be passed in as a get variable and we can access that using the get super global. So what's required here? Well, the text is required and then we're going to set some defaults for size and padding.
10:06
So if they're not provided, we'll automatically default to say 200 and maybe like zero padding or something. So we can modify this file. Let's just start up here.
10:18
We can create an if statement to check if dollar underscore get, so the get super global text is set. Now only if that's set, we want to generate a qrcode because otherwise it's pretty pointless. So now only if that is set, do we do all of this.
10:36
What we can now do is up here set our defaults. We can say size equals and then we can give a default value here, so say 200. We can do the same for padding as well, we'll set that to 10, but we want to replace this size variable value if the size and padding values are included in the get request.
11:00
So all we can do here is say is set dollar underscore get size. If that is set, we want to access that key. Otherwise set this to 200. This is a ternary operator.
11:16
It's basically saying set something in this size variable. So if size is set, we want that to be the size. Otherwise we want that to be 200 and you could of course just cast that to an integer if you wanted.
11:29
It doesn't really matter. So we're going to do exactly the same for this here. So if the padding is set, we want that to be the padding. Otherwise 10.
11:45
So regardless of whether size and padding are available, they will have values. Otherwise they'll be the values that have been defined. So now what we can do is we can pass in here get text. In here we can pass in the size and in here we can pass in the padding and that's it.
12:07
So now when we go over to index.html and we access this file, we're just replacing what we've passed in here into these methods. So over on our index.html file or if we just hit the URL like this, there is our QR code. So we can go ahead and we can modify this directly from the URL here and we can choose
12:32
the size. Let's say we want that to be 300 and that regenerates it for us. So now you can go ahead and use this URL anywhere within your application to generate a QR code as you please.
1 episode 12 mins

Overview

Here's a super quick way to generate QR code images for scanning.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!