015 Listing files on a directory with PHP

Hey there and welcome to View Source! This week we're going to use PHP to generate a list of files and a folder. It's going to help us improve the image rotator we built with the jQuery Cycle plug-in on week four. So if you want PHP to make your life easier, it's time to View Source. Now, normally when we make a request from a server, the server simply grabs the files you ask for and gives you the document without doing anything to it. We can use a server set language to improve things by having the server process the file before it gets to the user. The server can do all kinds of interesting things. In this case, we have the server automatically generate the code for the images when somebody drops the photos in one of our folders. So if we open up this folder with a few additional images, and I grab the fourth image right here and I copy it into our folder, then when I refresh the page, you'll see that instead of three photos, we'll get a fourth photo. I have to make sure that I put my mouse outside of the image, because I added a variable to stop their rotation, if my mouse is in the image. So as you can see, this soup photo is the fourth photo that we just added, we didn't have to write any HTML, the HTML was automatically generated by this extra page called rotator.php, other than that the code is exactly the same as what we used before. Now, there's a couple of problems with PHP. One of them is that unless you have a server installed on your local machine, your computer will not be able to process the files, so you have to use PHP files that are on a server. The other problem is that most servers won't know they have to process a file with PHP unless the file name ends with the .php extension. So here you can see the version of this file that is on our local machine, and as before our index file was called index.html. When I uploaded the files to the server, I modified the name to index.php. The server is not really going to care about whether we have the files in index.php or .html, it's going to simply realize that the name is index and serve us that file when we go to that directory. We also have the rotator file itself, which has to have the .php extension as well, because it has most of the code for our project. So if we go to the Rotator page and just go to the rotator.php, we'll see that it simply gives us a list of images. If we view the source on that page, you'll see that it's essentially writing out the image list from the directory right here. That's another thing about PHP, when you View Source on a PHP file, you never see the original PHP code, you see the results of the code. So in order to take a look at how this file looks, we need to open it up. We can do so by opening up directly from the server. I'm going to click on this file that I've uploaded to my server with an FTP program, and I want to edit the file, I want to show you how to set this up. I'm going to go to the Cyberduck menu, select Preferences, and make sure that I click on this Editor tab and pick my favorite Editor from this list. I have Espresso, so that's good. And when I do that, you'll get this extra little icon in Cyberduck that says Edit. So I'm going to hit Edit, and what that's actually doing is opening up that file from the server. Any changes that I make to that file right here are going to automatically update on the server when I save the file. I'm going to close up this Projects window that just opens up extra. So I'm going to move these side-by- side and show you what's happening here. So the first thing that I want to do in my PHP document is make sure that I define this area as being a PHP script area. We do that by adding the question mark, the <?php tag, and then closing it off at the bottom with ?>. This tells the server that everything in between these tags is a set of PHP commands. And we're adding quite a few different PHP commands here, so I want to go through each one of these lines. I'm going to make this window bigger so you could see things a little better. And the first thing we need to do is tell PHP which directory we want to read the files from, in this case we're going to read them from the images directory. This rotator.php file is in the same folder as the images directory right here, and so all we have to do is to say, we want to look for a folder in the same folder called images. Once we do that, we create an array called the filesarray, where we're going to store all the names of all the files in this images folder. Next, I want to read all the contents of the directory, and this is what this part of the code is doing, into a variable called filename. Once I have the file name of each one of the files, I can go through every one of those file names and perform everything inside this while loop. So the while loop allows us to go through a list of things, and the list of things that we're going through are the different file names that it reads from this handler that we created that points to this images folder. Now, for each one of the images that I read, I want to make sure that they end with the extension .jpg, that way if I put in a .html, or .php file or anything other than a .jpg, it's not going to read it into our list. And so what I'm doing here is making sure that I check to see if the file has a .jpg extension. On the left side we're also doing a couple of things. We're taking the file name and making sure that we convert it to a lowercase version of the file name. That way if somebody types in .JPG, then it will still first convert it to a lowercase JPG, which when it checks right here, it's going to function just fine, because they will both be the same regardless of capitalization. The next thing is, in order to get the last four letters of our file name, I want to make sure that I perform the substring command that allows me to get a part of a string, and the part of a string that I want to get is the last four digits, which I do by using this number, -4; 1, 2, 3, 4, that way I can get just that last piece of every file name and compare it against .jpg. The next thing that I'm doing is calling another function called preg_replace. This preg_replace is what we call a regular expression check. So what I want to do is, I want to get the title of the file name. When we get a file name, it's going to have everything in it, including the JPEG extension. So for the title of our document, we don't want the JPEG extension in there, and I'm performing a regular expression. This particular preg_replace command takes a few different commands, and the first part of the command is what we call a regular expression, that tells it how to take pieces of the file name out. So what we're doing here is checking to see if the file name is a word, followed by a period, and the letters jpg. This particular version of this regular expression makes sure that when we're checking things, we don't care about capitalization. So by adding this i next to the slash, we make sure that we don't care whether somebody types in JPG in capital letters or not. Next thing, we want to store the results of this search into a variable called $1, and what we want to replace is this file name. Now, this $1 comes from the fact that we have surrounded this \w, which just means a word, and then this plus sign means more than one word, and this takes the name of the files and it stores it in a temporary variable called $1. The results of which get placed into this title variable. So all we're doing here is checking the name of the files and taking out the .jpg part, and storing the results into this title variable. We still have the file name from before, the entire file name, so then we push into an array, which we generated right here, essentially an image tag that has the file name that we get from reading each file name, and also the title that we get from this regular expression. So as we go through this loop right here, this program is pushing an image tag with the file name as the source of the image, as well as the title as what goes into the alt attribute of each image. After I go through all the images, we make sure that we close the directory, it's just a good practice, and then after that we're going to perform a sort, so when the images are displayed, they are displayed in alphabetical order. There is no guarantee that the files will be displayed in alphabetical order, so we have to do that. Then we go through another loop, that for every item in the array, it stores the item temporarily in this variable called value, and then it just prints it out. So this will just print out each copy of that image tag, and that's what generates this page right here, that is a page that has just the list of images. And now if you remember from the week four version of the jQuery Script, all the jQuery Script needed was a list of images to generate the rotator. So I'm going to go back into that page that's rotating all the images, and if I take a look at the source code for that page, you'll see that it's already getting the version of the image. How is it getting that? Remember that when you look at the source code of a PHP page, it's never going to show you the code, it's always going to show you the results of the code. So what I've done here on my other file, which I'll bring into the Editor, I'll click on the index.php file and hit the Edit button, it will bring it up in a browser, and you'll see that this code looked exactly like what we had in Chapter 04, except that I'm using a different command right here, that instead of listing all the images, calls the other PHP function, and prints out the results of that function within this function. That is called a php include, and that include calls this rotator.php function, which is this function, does all the magic of listing the images and puts them right here. By combining these two scripts we're able to generate a list of images for our rotator. So now, if we add additional images to our rotator, I'll add 05 and 06 here, once it finishes uploading them, all we have to do is refresh this browser, and now instead of three images or four images, we have six images. We've done a lot of things with just a few lines of code. PHP is super powerful, especially when combined with MySQL. If you want to find out more about PHP, make sure you check out our excellent series, PHP and MySQL Essential Training, as well as other courses in the lynda.com Online Training Library. Don't forget to stay tuned to lynda.com for another dynamic episode of View Source.