Difference between revisions of "PHP-and-MySQL/C4/Display-Images-from-a-Directory/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 88: Line 88:
 
|-
 
|-
 
|03:03
 
|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
 
|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
 
|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 and here's our '''block''' of code we'll execute, in between here, for our '''while''' loop.
 
|-
 
|-
 
|03:32
 
|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
 
|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
 
|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
 
|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
 
|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
 
|04:17
Line 118: Line 118:
 
|-
 
|-
 
|04:23
 
|04:23
|So lets just put that into parenthesis.
+
|So, let's just put that into parenthesis.
 
|-
 
|-
 
|04:25
 
|04:25
|Okay so that should be our complete while statement.
+
|Okay, so that should be our complete '''while''' statement.
 
|-
 
|-
 
|04:30
 
|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
 
|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
 
|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
 
|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 here and refresh, you can see that we've got all our directories listed.
 
|-
 
|-
 
|04:55
 
|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
 
|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
 
|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
 
|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
 
|05:22
Line 151: Line 151:
 
|-
 
|-
 
|05:27
 
|05:27
|So we'll need to get rid of these.
+
|So, we'll need to get rid of these.
 
|-
 
|-
 
|05:28
 
|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
 
|05:45
|So as we're looping through its going to say "Does this equal dot?"
+
|So, as we're looping through it's going to say: "Does this equal dot?"
 
|-
 
|-
 
|05:50
 
|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 it's going to be 'yes', so we'll  completely ignore this statement inside our '''if''' - the command inside our '''if''' statement.
 
|-
 
|-
 
|05:59
 
|05:59
Line 166: Line 166:
 
|-
 
|-
 
|06:04
 
|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
 
|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
 
|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
 
|06:23
|So image source equals something in here.
+
|So, '''image''' source equals something in here.
 
|-
 
|-
 
|06:26
 
|06:26
Line 181: Line 181:
 
|-
 
|-
 
|06:33
 
|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
 
|06:43
Line 187: Line 187:
 
|-
 
|-
 
|06:50
 
|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
 
|06:52
Line 193: Line 193:
 
|-
 
|-
 
|07:00
 
|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
 
|07:07
Line 199: Line 199:
 
|-
 
|-
 
|07:10
 
|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
 
|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
 
|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
 
|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
 
|07:35
|But if you are having any trouble then please contact me. I'll be glad to help
+
|And if you are having any trouble then please contact me. I'll be glad to help
 
|-
 
|-
 
|07:44
 
|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 15:04, 6 June 2015

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 - it's 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 they 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 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, let's 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 brto the end of that.
04:50 So, if we open up our browser here 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 it's going to say: "Does this equal dot?"
05:50 In the first case it's 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 And 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.

Contributors and Content Editors

Gyan, PoojaMoolya, Pratik kamble, Sandhya.np14