Start learning with our library of video tutorials taught by experts. Get started

View Source
Illustration by
Watching:

015 Listing files on a directory with PHP


From:

View Source

with Ray Villalobos

Video: 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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
View Source
2h 10m Intermediate Jan 20, 2012 Updated May 25, 2012

Viewers: in countries Watching now:

The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.

Topics include:
  • Creating a custom URL in WordPress
  • Adding breadcrumb links to sites
  • Creating a toggle button with jQuery
  • Adding Twitter feeds to a site
  • Adding PayPal buttons to pages
  • Uploading photos to your web site
  • Embedding videos for different browsers and devices
  • Parsing and placing a YouTube video feed
Subjects:
Web Web Design Projects
Software:
WordPress
Author:
Ray Villalobos

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 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.

There are currently no FAQs about View Source.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.