Difference between revisions of "PHP-and-MySQL/C4/Display-Images-from-a-Directory/English-timed"
From Script | Spoken-Tutorial
(Created page with '{|Border=1 !Time !Narration |- |0:00 |Welcome to this short tutorial on how to list images in a directory. |- |0:07 |This tutorial deals with listing files and manipulating them …') |
|||
| Line 1: | Line 1: | ||
{|Border=1 | {|Border=1 | ||
| − | + | |'''Time''' | |
| − | + | |'''Narration''' | |
|- | |- | ||
| − | | | + | |00:00 |
|Welcome to this short tutorial on how to list images in a directory. | |Welcome to this short tutorial on how to list images in a directory. | ||
|- | |- | ||
| − | | | + | |00:07 |
|This tutorial deals with listing files and manipulating them to use an html code, like an image tag, to echo out the images that are listed in a directory. | |This tutorial deals with listing files and manipulating them to use an html code, like an image tag, to echo out the images that are listed in a directory. | ||
|- | |- | ||
| − | | | + | |00:23 |
|The end result is going to look something like this. | |The end result is going to look something like this. | ||
|- | |- | ||
| − | | | + | |00:26 |
|I've created 8 images and they are just going to be listed down a page. These are all separate images here. | |I've created 8 images and they are just going to be listed down a page. These are all separate images here. | ||
|- | |- | ||
| − | | | + | |00:33 |
|Let me just show you how I've set up my directory structure - its like this. | |Let me just show you how I've set up my directory structure - its like this. | ||
|- | |- | ||
| − | | | + | |00:37 |
|I've got my 'show dot php' file which is the one we're going to work with here. | |I've got my 'show dot php' file which is the one we're going to work with here. | ||
|- | |- | ||
| − | | | + | |00:42 |
|And then I have my images folder and that's got the images which are listed here, as shown. | |And then I have my images folder and that's got the images which are listed here, as shown. | ||
|- | |- | ||
| − | | | + | |00:53 |
|It doesn't matter what format the are in, at all. | |It doesn't matter what format the are in, at all. | ||
|- | |- | ||
| − | | | + | |00:56 |
|They could be mixed format, they could be one format and any format of display or image file via html will work. | |They could be mixed format, they could be one format and any format of display or image file via html will work. | ||
|- | |- | ||
| − | | | + | |01:04 |
|So here's our 'show dot php'. | |So here's our 'show dot php'. | ||
|- | |- | ||
| − | | | + | |01:06 |
|And at the moment this is pretty much blank inside here. | |And at the moment this is pretty much blank inside here. | ||
|- | |- | ||
| − | | | + | |01:09 |
|And obviously we'll need our php tags. | |And obviously we'll need our php tags. | ||
|- | |- | ||
| − | | | + | |01:13 |
|And the way we'll be doing this is we'll first of all set up a variable with the directory of our images. | |And the way we'll be doing this is we'll first of all set up a variable with the directory of our images. | ||
|- | |- | ||
| − | | | + | |01:20 |
|And as I showed you earlier this is 'images' and we'll just have a forward slash in there. | |And as I showed you earlier this is 'images' and we'll just have a forward slash in there. | ||
|- | |- | ||
| − | | | + | |01:24 |
|Be careful with these symbols like back-slashes. They are special characters in php that get rid of the character after it. | |Be careful with these symbols like back-slashes. They are special characters in php that get rid of the character after it. | ||
|- | |- | ||
| − | | | + | |01:35 |
|So for example if you have 'images forward slash photos' then this would be writing php as 'images-hotos' because this character here cancels the 'p'. | |So for example if you have 'images forward slash photos' then this would be writing php as 'images-hotos' because this character here cancels the 'p'. | ||
|- | |- | ||
| − | | | + | |01:51 |
|So make sure your using forward slash and obviously we don't have this 'photos' here. | |So make sure your using forward slash and obviously we don't have this 'photos' here. | ||
|- | |- | ||
| − | | | + | |01:57 |
|Okay the next thing we need to do is use the 'open dir function'. | |Okay the next thing we need to do is use the 'open dir function'. | ||
|- | |- | ||
| − | | | + | |02:01 |
|This is basically going to open a directory for us. | |This is basically going to open a directory for us. | ||
|- | |- | ||
| − | | | + | |02:05 |
|It's not going to be the contents of the directory. | |It's not going to be the contents of the directory. | ||
|- | |- | ||
| − | | | + | |02:08 |
|This is just going to open a specific directory namely this directory here. | |This is just going to open a specific directory namely this directory here. | ||
|- | |- | ||
| − | | | + | |02:14 |
|So instead of keeping this as it is what we'll do is say if open dir equals to a new variable called 'open dir' and dir. So we're matching this to this here. | |So instead of keeping this as it is what we'll do is say if open dir equals to a new variable called 'open dir' and dir. So we're matching this to this here. | ||
|- | |- | ||
| − | | | + | |02:27 |
|And basically all this does is, it says whether this has successfully completed and then it assigns 'open dir' to our open directory so we can manipulate it later on. | |And basically all this does is, it says whether this has successfully completed and then it assigns 'open dir' to our open directory so we can manipulate it later on. | ||
|- | |- | ||
| − | | | + | |02:40 |
|The reason that we do this is because if your directory doesn't exist, we'll get a bunch of code and lots of errors. | |The reason that we do this is because if your directory doesn't exist, we'll get a bunch of code and lots of errors. | ||
|- | |- | ||
| − | | | + | |02:47 |
|This here says if we don't have any errors then we can continue with the code inside and our block here. | |This here says if we don't have any errors then we can continue with the code inside and our block here. | ||
|- | |- | ||
| − | | | + | |02:56 |
|Okay now the next bit is more complicated. | |Okay now the next bit is more complicated. | ||
|- | |- | ||
| − | | | + | |02:59 |
|Let's just start annotating this. | |Let's just start annotating this. | ||
|- | |- | ||
| − | | | + | |03:00 |
|This is to open the directory. | |This is to open the directory. | ||
|- | |- | ||
| − | | | + | |03:03 |
|And inside what we'll be doing is we'll be reading the directory so 'read dir'. | |And inside what we'll be doing is we'll be reading the directory so 'read dir'. | ||
|- | |- | ||
| − | | | + | |03:09 |
|And we'll do this with a while loop because for each loop around the while loop we want to echo out or rather display the image of each image inside the folder. | |And we'll do this with a while loop because for each loop around the while loop we want to echo out or rather display the image of each image inside the folder. | ||
|- | |- | ||
| − | | | + | |03:23 |
|So we'll start with our while loop, we'll create what will go in it, in a minute and here's our block of code we'll execute, in between here, for our while loop. | |So we'll start with our while loop, we'll create what will go in it, in a minute and here's our block of code we'll execute, in between here, for our while loop. | ||
|- | |- | ||
| − | | | + | |03:32 |
|Okay for this what we'll do is if file equals read directory, that's a new function I've just introduced. | |Okay for this what we'll do is if file equals read directory, that's a new function I've just introduced. | ||
|- | |- | ||
| − | | | + | |03:44 |
|And obviously you may have guessed you have to type 'open dir' variable inside here. | |And obviously you may have guessed you have to type 'open dir' variable inside here. | ||
|- | |- | ||
| − | | | + | |03:51 |
|So this is basically reading the directory that we've already opened using the open dir function. | |So this is basically reading the directory that we've already opened using the open dir function. | ||
|- | |- | ||
| − | | | + | |03:57 |
|So these are two really useful functions so I can harmonize them with each other. | |So these are two really useful functions so I can harmonize them with each other. | ||
|- | |- | ||
| − | | | + | |04:03 |
|And again we'll validate this here and say if it doesn't equal 'false' or if it's not equal to or if it doesn't open or if it can't be read that means we may run into a few errors later on. | |And again we'll validate this here and say if it doesn't equal 'false' or if it's not equal to or if it doesn't open or if it can't be read that means we may run into a few errors later on. | ||
|- | |- | ||
| − | | | + | |04:17 |
|And with this we need to start the structure. | |And with this we need to start the structure. | ||
|- | |- | ||
| − | | | + | |04:20 |
|We'll need to put this into parenthesis. | |We'll need to put this into parenthesis. | ||
|- | |- | ||
| − | | | + | |04:23 |
|So lets just put that into parenthesis. | |So lets just put that into parenthesis. | ||
|- | |- | ||
| − | | | + | |04:25 |
|Okay so that should be our complete while statement. | |Okay so that should be our complete while statement. | ||
|- | |- | ||
| − | | | + | |04:30 |
|Now inside there's a really easy way to do this because we've created this file variable. | |Now inside there's a really easy way to do this because we've created this file variable. | ||
|- | |- | ||
| − | | | + | |04:35 |
|And we're inside a while loop so this is gonna dynamically update for each file contained within this directory. | |And we're inside a while loop so this is gonna dynamically update for each file contained within this directory. | ||
|- | |- | ||
| − | | | + | |04:40 |
|So all we really need to do is now say 'echo file' and what we might want to do is add a 'br'to the end of that. | |So all we really need to do is now say 'echo file' and what we might want to do is add a 'br'to the end of that. | ||
|- | |- | ||
| − | | | + | |04:50 |
|So if we open up our browser and refresh, you can see that we've got all our directories listed. | |So if we open up our browser and refresh, you can see that we've got all our directories listed. | ||
|- | |- | ||
| − | | | + | |04:55 |
|Now I do have some other tutorials on directory listing I think I've mentioned this before. | |Now I do have some other tutorials on directory listing I think I've mentioned this before. | ||
|- | |- | ||
| − | | | + | |05:00 |
|We've got a dot and a double dot,this is basically just standard notations for directory structures. | |We've got a dot and a double dot,this is basically just standard notations for directory structures. | ||
|- | |- | ||
| − | | | + | |05:05 |
|dot i think is current directory, two dots is to go back or something like that. | |dot i think is current directory, two dots is to go back or something like that. | ||
|- | |- | ||
| − | | | + | |05:13 |
|but what we need to do now is validate this inside our loop to make sure we don't echo out this dot and this full stop - these two dots, sorry. | |but what we need to do now is validate this inside our loop to make sure we don't echo out this dot and this full stop - these two dots, sorry. | ||
|- | |- | ||
| − | | | + | |05:22 |
|Reason is that if we are displaying these as images that is not a valid image and that is not a valid image. | |Reason is that if we are displaying these as images that is not a valid image and that is not a valid image. | ||
|- | |- | ||
| − | | | + | |05:27 |
|So we'll need to get rid of these. | |So we'll need to get rid of these. | ||
|- | |- | ||
| − | | | + | |05:28 |
|So what I'll do is I'll say if file doesn't equal dot and - we need an 'and' here instead of an 'or' - and file doesn't equal dot dot. | |So what I'll do is I'll say if file doesn't equal dot and - we need an 'and' here instead of an 'or' - and file doesn't equal dot dot. | ||
|- | |- | ||
| − | | | + | |05:45 |
|So as we're looping through its going to say "Does this equal dot?" | |So as we're looping through its going to say "Does this equal dot?" | ||
|- | |- | ||
| − | | | + | |05:50 |
|In the first case its going to be 'yes' so we'll completely ignore this statement inside our if - the command inside our if statement. | |In the first case its going to be 'yes' so we'll completely ignore this statement inside our if - the command inside our if statement. | ||
|- | |- | ||
| − | | | + | |05:59 |
|And we're also checking for this simultaneously, so obviously both are going to be true. | |And we're also checking for this simultaneously, so obviously both are going to be true. | ||
|- | |- | ||
| − | | | + | |06:04 |
|So now what we'll do is refresh and we see that they have disappeared. | |So now what we'll do is refresh and we see that they have disappeared. | ||
|- | |- | ||
| − | | | + | |06:07 |
|Okay so the next thing to do is to manipulate this file variable here to actually make an image. | |Okay so the next thing to do is to manipulate this file variable here to actually make an image. | ||
|- | |- | ||
| − | | | + | |06:16 |
|So what we'll do is I'll take away all of this and I'll just write some html code as an omni word. | |So what we'll do is I'll take away all of this and I'll just write some html code as an omni word. | ||
|- | |- | ||
| − | | | + | |06:23 |
|So image source equals something in here. | |So image source equals something in here. | ||
|- | |- | ||
| − | | | + | |06:26 |
|You can specify a height and a width but I'll not do this now because my image is all preset height and width. | |You can specify a height and a width but I'll not do this now because my image is all preset height and width. | ||
|- | |- | ||
| − | | | + | |06:33 |
|Obviously if you have images of all different sizes you will want to put them all in the same size and then maybe have a hyper link to them so you can click them to view them individually. | |Obviously if you have images of all different sizes you will want to put them all in the same size and then maybe have a hyper link to them so you can click them to view them individually. | ||
|- | |- | ||
| − | | | + | |06:43 |
|But that's pretty straight forward and I'll just show you the php code for doing it. | |But that's pretty straight forward and I'll just show you the php code for doing it. | ||
|- | |- | ||
| − | | | + | |06:50 |
|Okay and then we'll have a break after each one. | |Okay and then we'll have a break after each one. | ||
|- | |- | ||
| − | | | + | |06:52 |
|So inside here, funnily enough, you might think it's going to put 'file' but instead when you refresh this, you can see we've got a bunch of broken images. | |So inside here, funnily enough, you might think it's going to put 'file' but instead when you refresh this, you can see we've got a bunch of broken images. | ||
|- | |- | ||
| − | | | + | |07:00 |
|The reason is that if I click properties you can see here we've said directory images and image 1. | |The reason is that if I click properties you can see here we've said directory images and image 1. | ||
|- | |- | ||
| − | | | + | |07:07 |
|We need our images directory in here. | |We need our images directory in here. | ||
|- | |- | ||
| − | | | + | |07:10 |
|So we could write images but we already have a variable for that, that's 'dir'. | |So we could write images but we already have a variable for that, that's 'dir'. | ||
|- | |- | ||
| − | | | + | |07:14 |
|So we just say 'dir forward slash file' so this will be images forward slash file. | |So we just say 'dir forward slash file' so this will be images forward slash file. | ||
|- | |- | ||
| − | | | + | |07:19 |
|So now when we refresh you will see that we're basically back to the page I showed you at the start of this tutorial. | |So now when we refresh you will see that we're basically back to the page I showed you at the start of this tutorial. | ||
|- | |- | ||
| − | | | + | |07:27 |
|So that's basically it. There are more advanced ways of doing things, to lay them out, etc. | |So that's basically it. There are more advanced ways of doing things, to lay them out, etc. | ||
|- | |- | ||
| − | | | + | |07:35 |
|But if you are having any trouble then please contact me. I'll be glad to help | |But if you are having any trouble then please contact me. I'll be glad to help | ||
|- | |- | ||
| − | | | + | |07:44 |
|All right then thanks a lot for watching. This is Joshua Mathew dubbing for the Spoken Tutorial Project. | |All right then thanks a lot for watching. This is Joshua Mathew dubbing for the Spoken Tutorial Project. | ||
Revision as of 13:02, 10 July 2014
| Time | Narration |
| 00:00 | Welcome to this short tutorial on how to list images in a directory. |
| 00:07 | This tutorial deals with listing files and manipulating them to use an html code, like an image tag, to echo out the images that are listed in a directory. |
| 00:23 | The end result is going to look something like this. |
| 00:26 | I've created 8 images and they are just going to be listed down a page. These are all separate images here. |
| 00:33 | Let me just show you how I've set up my directory structure - its like this. |
| 00:37 | I've got my 'show dot php' file which is the one we're going to work with here. |
| 00:42 | And then I have my images folder and that's got the images which are listed here, as shown. |
| 00:53 | It doesn't matter what format the are in, at all. |
| 00:56 | They could be mixed format, they could be one format and any format of display or image file via html will work. |
| 01:04 | So here's our 'show dot php'. |
| 01:06 | And at the moment this is pretty much blank inside here. |
| 01:09 | And obviously we'll need our php tags. |
| 01:13 | And the way we'll be doing this is we'll first of all set up a variable with the directory of our images. |
| 01:20 | And as I showed you earlier this is 'images' and we'll just have a forward slash in there. |
| 01:24 | Be careful with these symbols like back-slashes. They are special characters in php that get rid of the character after it. |
| 01:35 | So for example if you have 'images forward slash photos' then this would be writing php as 'images-hotos' because this character here cancels the 'p'. |
| 01:51 | So make sure your using forward slash and obviously we don't have this 'photos' here. |
| 01:57 | Okay the next thing we need to do is use the 'open dir function'. |
| 02:01 | This is basically going to open a directory for us. |
| 02:05 | It's not going to be the contents of the directory. |
| 02:08 | This is just going to open a specific directory namely this directory here. |
| 02:14 | So instead of keeping this as it is what we'll do is say if open dir equals to a new variable called 'open dir' and dir. So we're matching this to this here. |
| 02:27 | And basically all this does is, it says whether this has successfully completed and then it assigns 'open dir' to our open directory so we can manipulate it later on. |
| 02:40 | The reason that we do this is because if your directory doesn't exist, we'll get a bunch of code and lots of errors. |
| 02:47 | This here says if we don't have any errors then we can continue with the code inside and our block here. |
| 02:56 | Okay now the next bit is more complicated. |
| 02:59 | Let's just start annotating this. |
| 03:00 | This is to open the directory. |
| 03:03 | And inside what we'll be doing is we'll be reading the directory so 'read dir'. |
| 03:09 | And we'll do this with a while loop because for each loop around the while loop we want to echo out or rather display the image of each image inside the folder. |
| 03:23 | So we'll start with our while loop, we'll create what will go in it, in a minute and here's our block of code we'll execute, in between here, for our while loop. |
| 03:32 | Okay for this what we'll do is if file equals read directory, that's a new function I've just introduced. |
| 03:44 | And obviously you may have guessed you have to type 'open dir' variable inside here. |
| 03:51 | So this is basically reading the directory that we've already opened using the open dir function. |
| 03:57 | So these are two really useful functions so I can harmonize them with each other. |
| 04:03 | And again we'll validate this here and say if it doesn't equal 'false' or if it's not equal to or if it doesn't open or if it can't be read that means we may run into a few errors later on. |
| 04:17 | And with this we need to start the structure. |
| 04:20 | We'll need to put this into parenthesis. |
| 04:23 | So lets just put that into parenthesis. |
| 04:25 | Okay so that should be our complete while statement. |
| 04:30 | Now inside there's a really easy way to do this because we've created this file variable. |
| 04:35 | And we're inside a while loop so this is gonna dynamically update for each file contained within this directory. |
| 04:40 | So all we really need to do is now say 'echo file' and what we might want to do is add a 'br'to the end of that. |
| 04:50 | So if we open up our browser and refresh, you can see that we've got all our directories listed. |
| 04:55 | Now I do have some other tutorials on directory listing I think I've mentioned this before. |
| 05:00 | We've got a dot and a double dot,this is basically just standard notations for directory structures. |
| 05:05 | dot i think is current directory, two dots is to go back or something like that. |
| 05:13 | but what we need to do now is validate this inside our loop to make sure we don't echo out this dot and this full stop - these two dots, sorry. |
| 05:22 | Reason is that if we are displaying these as images that is not a valid image and that is not a valid image. |
| 05:27 | So we'll need to get rid of these. |
| 05:28 | So what I'll do is I'll say if file doesn't equal dot and - we need an 'and' here instead of an 'or' - and file doesn't equal dot dot. |
| 05:45 | So as we're looping through its going to say "Does this equal dot?" |
| 05:50 | In the first case its going to be 'yes' so we'll completely ignore this statement inside our if - the command inside our if statement. |
| 05:59 | And we're also checking for this simultaneously, so obviously both are going to be true. |
| 06:04 | So now what we'll do is refresh and we see that they have disappeared. |
| 06:07 | Okay so the next thing to do is to manipulate this file variable here to actually make an image. |
| 06:16 | So what we'll do is I'll take away all of this and I'll just write some html code as an omni word. |
| 06:23 | So image source equals something in here. |
| 06:26 | You can specify a height and a width but I'll not do this now because my image is all preset height and width. |
| 06:33 | Obviously if you have images of all different sizes you will want to put them all in the same size and then maybe have a hyper link to them so you can click them to view them individually. |
| 06:43 | But that's pretty straight forward and I'll just show you the php code for doing it. |
| 06:50 | Okay and then we'll have a break after each one. |
| 06:52 | So inside here, funnily enough, you might think it's going to put 'file' but instead when you refresh this, you can see we've got a bunch of broken images. |
| 07:00 | The reason is that if I click properties you can see here we've said directory images and image 1. |
| 07:07 | We need our images directory in here. |
| 07:10 | So we could write images but we already have a variable for that, that's 'dir'. |
| 07:14 | So we just say 'dir forward slash file' so this will be images forward slash file. |
| 07:19 | So now when we refresh you will see that we're basically back to the page I showed you at the start of this tutorial. |
| 07:27 | So that's basically it. There are more advanced ways of doing things, to lay them out, etc. |
| 07:35 | But if you are having any trouble then please contact me. I'll be glad to help |
| 07:44 | All right then thanks a lot for watching. This is Joshua Mathew dubbing for the Spoken Tutorial Project. |
