Bill Rosener: This is Dr. Bill. Welcome back this
Bill Rosener: create a web page that randomly displays an image, and in particular we'll have that randomly display. One of 5 pictures. Here, let's start by taking a look at the assignment description. Then we'll take a look at a working example. So I'm going to go ahead and give you the Php. Code, and I'll be walking through that here in a second, describing in more detail what this code does. I'm also going to give you the code used to create any one of the HTML files.
Bill Rosener: and here is one of them, and also going to be included, is going to be one line of code which is an Img. It's going to have an image specify the source, maybe an Alt tag and a width and a height.
Bill Rosener: taking a look at all the files used to create this. So we're going to have the Php file, and it's going to include one of these 5 HTML files, which in turn includes.
Bill Rosener: has an image tag in there which is going to include or display an image. So here is image one
Bill Rosener: image 2, 3 for and 5.
Bill Rosener: Okay, so there are the 5 images and feel free to definitely use different images in your example. So now let's come back here and take a look at it, and I'm gonna go ahead and press on view a working example.
Bill Rosener: And here was the 1st image that would randomly appeared. But if I go ahead and press the reload button.
Bill Rosener: there was a chance I'd get that exact same image. But here I've got the BA campus.
Bill Rosener: And here's Seminary hall, etc, there. So I'm going to randomly get a different picture depending on the second, that that page was loaded there.
Bill Rosener: Okay, so the very 1st step we need to do if I take a look here, I pretty well got this thing set up. I've got. Here's Nsu 1, 2, 3, 4. I've got my images. Notice, I've got one file. HTML, 2, 3, 4, 5. So I need to create 8 Nsu. One. And then the Php, file. Let's go ahead and start with that HTML file. So I'm gonna go ahead and open up a visual studio code.
Bill Rosener: I'm gonna go ahead and highlight, one line of code. Here, I'm gonna come right up here to file new text file.
Bill Rosener: I'm going to paste. And all that this is gonna do is, it's gonna have an image source. Here you would specify your
Bill Rosener: the the image or the path to the image. I'm gonna have an alt tag, so that. So if someone is visually impaired, they could at least view something, specify the width and the height that I want that image to appear. So in this case I'm gonna come right up here to a file. I'm gonna go to save as.
Bill Rosener: And I'm going to call mine Nsu one.
Bill Rosener: And I've already got 2, 3, 4, and 5 here, just so I don't have to save a little time in this video here.
Bill Rosener: Okay.
Bill Rosener: So if I came over here, took a look at this. I now have an issue 1, 2, 3, 4, 5, and issue one. It's got one line of code in there, and it's just going to simply have an image tag which displays that image within the HTML
Bill Rosener: itself. Okay, now, moving on, let's go ahead and take a look at
Bill Rosener: work on the jobs in the Php.
Bill Rosener: so I'm gonna go ahead and come right up here to file. I'm going to new new text file.
Bill Rosener: Go ahead and grab some code here
Bill Rosener: and paste.
Bill Rosener: Okay? So taking a look here, nothing to exciting at the top.
Bill Rosener: Start our HTML, start the head, close the head, start the body, go, and maybe put your name here.
Bill Rosener: Okay? Then it's gonna actually display some static text, display random picture press, reload or refresh. Here is where the magic takes place, and in particular, let me just go ahead and show you
Bill Rosener: right here.
Bill Rosener: So right now it's like 4 0 6, 44, 45, 46, 47, 48, 49 50. Okay, you get the idea there.
Bill Rosener: What is going to happen is I am going to use the MoD operator. And that's gonna tell me the remainder. So if that was
Bill Rosener: if it ended in
Bill Rosener: point 0 5, right? And let's say 5 seconds, 5 divided by 5 is 0. So it's going to display an issue one. But if it was 6 seconds, 6 divided, MoD. 5, it's going to give me a remainder of one
Bill Rosener: 7 would give me a remainder of 2, 8, give me a remainder of 3, 3, and then 9 would give me a remainder of 4, which point this one would be displayed. Once I get back to 1010, divided by 5 is going to be perfect. There's going to be no remainder. So then I could start displaying in issue one.
Bill Rosener: Okay, let me go ahead and save this. And if I take a look here, actually, I can call it whatever I want. I don't have a Php file here, but let me go ahead and just call this one assignment.
Bill Rosener: Come right up here to file, save as.
Bill Rosener: and I'm gonna call this one assignment 13 dot. Psp.
Bill Rosener: okay, so assignment 13 dot. Php, and here's nsu one
Bill Rosener: dot. HTML. So if I take a look here, I now I've got my Php file and I've got this.
Bill Rosener: So you're obviously going to have to find some images. Then you're gonna have to create your HTML files. So I called mine an issue 1, 2, 3, 4 made it really easy. So if yours was something else, you would probably have to give this a different name rather than an issue. One. Maybe that would be
Bill Rosener: sports.
Bill Rosener: one sports, 2 sports, 3. Whatever images you're working with, maybe fishing or kayaking, or hiking, or yoga whatever, and then also that you would have to make sure that your image is correctly here. So I've called mine and issue one dot. Jpeg, okay, we're ready to check this out. I'm going to hit refresh here. Now. I've got all the
Bill Rosener: files in place. I'm gonna highlight, all of them, and upload them to my temporary directory.
Bill Rosener: I'm gonna come right back up here to
Bill Rosener: here, was my index of temp. I'm gonna hit a refresh.
Bill Rosener: I'm gonna go ahead and press on assignment 13, and there is an image.
Bill Rosener: and if I hit well, I'm always using the keyboard shortcuts. But if I hit reload.
Bill Rosener: I'm gonna get a different image.
Bill Rosener: And every time I click, I'm gonna get one of those 5 images again, depending on the very split second. So I've got 5. So, depending on again that exact second.
Bill Rosener: I'm going to get one of those 5 images there.
Bill Rosener: Well, hopefully, in this video, you learned how to display random pictures on a website using Php, and I'll catch you next. Video. Thanks a lot. Bye.