Bill Rosener: Hello! This is Dr. Bill. Welcome back in this video. You're going to learn how to create a little shopping cart using. Php, this is going to actually be composed of 2 files for sure, but also some additional images, one being the HTML, which is going to then turn call the Php. And I'm going to get you the code here. We'll be walking through 2 if I take a look at the assignment description
Bill Rosener: before you finish. There, I'm gonna have you add 3 items for sale? I want to make sure you leave here with some code to get 2 items. So here I've got 2 items for sale. Let's go ahead and press on. Add to cart, so I can see it. I'm gonna choose the flashlight.
Bill Rosener: I've got an image of it, and then, when I press, add to cart, tell you what you can see up here. This is assignment 5 finished. When I press, add to cart.
Bill Rosener: It is now going to call another file and pass this information to shopping cart finished, here was the price, and here I can now go ahead and change the quantity.
Bill Rosener: And maybe I want to 4,
Bill Rosener: and it's going to simply recalibrate the prize theorem.
Bill Rosener: Okay? And let me go ahead and take a look at assignment 5. So I'm going to go ahead and give you some images. Here's some flashlight.
Bill Rosener: a travel mode and mouse.
Bill Rosener: but feel free to use your own images. So you're going to. I'm going to get you the code for 2 of them, and you're going to take that code and modify it. So you have 3 items or more for sale. Then I'm going to go ahead and even give you the HTML code for 2. Here it is. It's just create. It's an image. So you're gonna have to still re key it in retype it.
Bill Rosener: And also I'm going to go ahead and give you the Php code.
Bill Rosener: And again, if you talk to the elevators, just go ahead and zoom in on that, then maybe hit the control minus or the control plus until you get it to a size that is, works for you
Bill Rosener: so that you can literally retype that in
Bill Rosener: has your. You can see the code while you're typing it in there. Okay.
Bill Rosener: okay. Now that we know what we want to do, let's get started here. So the very 1st step I'm going to do is. Tell you what. Let me just show you here. I've got my Ftp. All ready to go. We just got done looking at assignment 5.
Bill Rosener: So the
Bill Rosener: when I pressed on that. It then called the shopping cart. And I've also got these images, and they need to be in the same area as the HTML, and as
Bill Rosener: the Phpn.
Bill Rosener: And here it is.
Bill Rosener: case, I have an air and I need to download it, I've got this ready to go. I'm just going to be working on attempt directory on my desktop there.
Bill Rosener: Okay, so the very 1st step I'm gonna do is open up an editor. I'll be using visual studio code, and we'll start off with the HTML.
Bill Rosener: So I'm just gonna come right up here to file new text file.
Bill Rosener: And obviously, you're going to have to type this in yourself, but I'm going to go ahead and run through this a little bit quicker by just copying and pasting. So the very 1st line up there, says HTML, then I'm gonna start the the head tag close the head. It's going to have a title. So if I was to come back here. You can see the title is store items.
Bill Rosener: And sure enough, there it was, store items.
Bill Rosener: Then I'm gonna start the body. I'm gonna have header, 2 tags store items, and then this is going to be one item.
Bill Rosener: And then this is going to be the second item that's going to be a Div. Get a division. I'm going to have a border.
Bill Rosener: and I have a little padding around the outside. You can see here is the price 2099. I'm going to have the flashlight got the width and the height. But now kind of comes the trick. Here, take a look at this code right here. This is really the key for this assignment. I am now going to start a form, close the form. I am going to take this information and pass it to shopping cartphp. And I now need to pass the price
Bill Rosener: and the image file name, which was a flashlight, and it's going to simply say, add to cart
Bill Rosener: and same thing down here. I'm going to have. Now start another item.
Bill Rosener: Oops with the did tag.
Bill Rosener: It's gonna put a border of one pixel solid
Bill Rosener: background border around the outside. Feel free to change the change. Some of these maybe make that a 2, maybe make that some other color. Here's my yeti travel mug. So I'm now going to. That is what's going to be displayed there. And then. Notice this information is hidden.
Bill Rosener: So I'm going to take. I need to take the information in the price
Bill Rosener: and the image file name, and I need to pass that to shopping cart. And this information is going to be hidden, but it's going to be passed to this file right here. So at this point I'm just going to go ahead and come right up here and come up here to file. I'm going to go to save as.
Bill Rosener: and I'm going to go ahead. And
Bill Rosener: well, this one was an HTML file. So I'm gonna call this one assignment 5 dot. HTML,
Bill Rosener: and I'm just going to press, save, okay.
Bill Rosener: And if I came over here
Bill Rosener: and here's the file I just got done creating. Now, what we need to do is create
Bill Rosener: the second file, which is our shopping cart. So this file, when I press on the command button it transfers control to this other file, passing this information with it. So I'm gonna come up here to file new text file.
Bill Rosener: I'm not going to go ahead and get grab the code for my shopping cart.
Bill Rosener: Okay, let's go ahead and take a look at this code. Here. This is going to be the Php, so I'm going to start
Bill Rosener: angle bracket question. Mark Php, that's going to start it. I always do this. I give some default values. Okay, the price file name quantity total.
Bill Rosener: Then this is going to be testing the input, we've gone through this before making sure. No malicious data was entered. That's going to grab the price and the image file name. So I posted that information. So assignment 5 notice. I posted it to shopping cart. So now this information has been posted. I'm going to grab the price, and I'm going to grab the image file name
Bill Rosener: so
Bill Rosener: take a look here, these have to match. Mh, I, mg. File name, notice capital F and the capital N,
Bill Rosener: so that information was passed from the HTML to the Php. Also with quantity. I'm not going to compute a total cost. Now I'm going to come on down here.
Bill Rosener: I'm going to start my form. It's got Php self, so it can call itself over and over. So if I'd want to change the quantity I literally call it, I'm gonna display the total cost I'm going to display the image. Notice. I made this one a little bit smaller. So on the 1st one
Bill Rosener: it was like 200 by 200. But when I came over here, notice that image got a little bit smaller, and how did I do that was by simply changing the height and the width.
Bill Rosener: and you may be wondering what are these slashes for? Well, you got a couple options here, but notice, the Ecclestein starts with a double quote, and ends with a double quote. So if I have double quotes inside, I need to use a slash before another option is, you can put a single quote out here and a single quote
Bill Rosener: over here. And then, at which point you wouldn't need those double quotes. You wouldn't need that backslashes inside.
Bill Rosener: Okay?
Bill Rosener: So anyway, I'm going to display the image a little bit smaller. I'm going to display the quantity. And then I'm going to display
Bill Rosener: the file, the price, and then we're gonna have another button where they can recalculate there.
Bill Rosener: Well, I'm gonna come up here and now come up to
Bill Rosener: Here's the file. I'm gonna come up to file, save as
Bill Rosener: now this one is going to be shopping cart
Bill Rosener: and make sure you put a capital. No, it needs to match, that's all I'm going to say is, if I take a look at assignment 5. I'm trying to find a file in the same directory called shopping Cartphp, and that needs to match with that capital. C there. Okay, so we're ready to check this out. I'm going to hit refresh.
Bill Rosener: And I've now uploaded assignment 5, and I've uploaded. I mean, I finished assignment 5 and shopping cart. I'm gonna right. Click on those upload those. And again, you might want to create a folder and place all of the assignment 5 in one folder. And now what I'm gonna do is go ahead and check it.
Bill Rosener: I'm gonna come back here.
Bill Rosener: That was the finished one.
Bill Rosener: Let me take a look at this other one, and
Bill Rosener: here it is. Assignment 5 dot. HTML. I'm now going to go and choose. Add to cart.
Bill Rosener: Sure enough, it passed the value it passed.
Bill Rosener: So anyway, take a look here. I was at assignment 5 dot HTML. Here's the price 2099. And when I press, add to card, it passed that information and the image at which point I can now go ahead and change the quantity, and it will recalculate the order. So again.
Bill Rosener: big picture
Bill Rosener: I've given, you're going to want to make sure you have 3 images. So you're going to create 2 files assigned with 5 HTML and shopping cartphp. I've given you some images. Here's the flashlight. You'd simply press on those right. Click, save the images. Make sure they're on this. Make sure that
Bill Rosener: HTML. File, the Php. File and all your images are all in the same folder.
Bill Rosener: also giving you the HTML code and image version of it. And I've also given you an image version of the Ph key php, code that I've just used to recreate that. So again, you're going to ever so lightly the Php code. You don't even need to modify. You just need to retype all that in. But the HTML code, you're going to modify because I have
Bill Rosener: 2 items, and you're going to go ahead and add a 3rd item and feel free like I mentioned before to use other images. Well, hopefully, in this video. You learn how to create a little shopping cart using
Bill Rosener: Php and HTML, and I'll catch you next video. Thanks a lot back.