William Rosener: Host Dr. Joe, welcome back. In this video, you'll learn how to create a little shopping cart. As we learn how to pass information from one form to another. Here's my a working model. I can see I'm on assignment five, a
William Rosener: I can see the price 2099 when I hit Add to Cart. It's going to call a PHP file. And it's going to pass the information, the price and the image at this one. I can go ahead and increase the quantity and recalculate the order
William Rosener: And now let me come back and do one more here. Here's some assignment five be. This is a little Yeti TRAVEL MUG 1599 one hit the add to cart. So here's the URL.
William Rosener: And then watch as a hit Add to Cart. It's going to call the shopping cart. It's going to pass the value of the price and the image, I can now go ahead and increase the quantity and recalculate the order there.
William Rosener: Okay, that was assignment five completed and will be recreating this from scratch here. So the very first step you want to do is open up some editor, maybe Notepad Word Pad.
William Rosener: notepad plus plus, definitely, if you start running into areas where you need to know the line number I found Notepad works great just to keep the form really simpler in them.
William Rosener: And the interface them. So the very first step we're going to do is I'm just going to go ahead and do a copy here I've opened up a blank document and I'm going to paste
William Rosener: And here's kind of my basic generic framework here. I'm gonna start my HTML. I'm gonna close the HTML start the head, close the head, maybe up here. I'll go ahead and put a flashlight.
William Rosener: For the title down here. I'm going to go ahead and also type in a flashlight.
William Rosener: Near I'm not even going to go ahead and put the price, and I believe that was a 29 to nine.
William Rosener: Okay, so nothing too exciting here so far, kind of our head or HTML start the head, close the Head Start the body, close the body. I've got a little Patty and there's a little breathing room around the perimeter start a header to tag closer to to tag.
William Rosener: I'll tell you what we can do. Let's go ahead and save this and then I'll come along and add some more information here something to come up here to a file. I'm going to go to Save As. I'm going to go ahead and call this one assignment.
William Rosener: Five a dot HTML. And so, three things there. Make sure you know where you're saving it. Give it a filename that ends with HTML assignment five HTML text document and press save them.
William Rosener: Okay, so I came here I could actually click on it. I'll go ahead and actually just uploaded. Well this one I can view locally here. But let's say, but I'll go ahead and upload that
William Rosener: Probably the very first step, you're going to want to do is create a folder so you can put all the images in the various HTML files and the PHP.
William Rosener: All in one directory something to come right over here. I can see them under an instructor. I'm just going to right click and I'm gonna hit Create directory. And I'm just going to call this one assignment five
William Rosener: And if I was to hit the refresh button up here I can see here's my son with five. I'm a double click in here. Here's my sign of five, and I'm going to hit upload
William Rosener: And so now I've got assignment five on the website. So if I come up here by hit refresh. Here's my assignment five, and here's what we've just
William Rosener: Added so far. Now let's go ahead and work with the image. So I'm gonna come back over here. I'm going to take a look in that image is called flashlight Dot jpg in my case here.
William Rosener: Okay, it's always a really good idea to have an alt tag, I'm just going to type a flashlight. This is if someone is visually impaired or have images turned off.
William Rosener: Then when you want to insert the width and the height and I know what these are. But if you if you need to find out. Make sure right there. I can see 383 by 200 and other ways to right click on it, go to properties come up here to details and I can see the dimensions of this image here.
William Rosener: So the width is going to be 383 and 200 for the height. Okay, now I need to come down in here will be working at the form and then I'll be explaining this one more time here. So the price was 2099
William Rosener: So I want to pass this information along with the image to my shopping cart, and this was just called a flashlight.
William Rosener: Dot jpg okay so here's what's happening. Let's just kind of run through the whole thing. I'm gonna start my HTML. I'm a close it start my head close my head flashlight. I'm gonna start the body, close the body.
William Rosener: Here I've got my header to tag. I've got the image flashlight Dot jpg I've got an alt tag. So if someone against visually impaired, the width and the height.
William Rosener: Now I'm going to start my form. I'm going to close the form when I press on this here button submit, which has the
William Rosener: Caption had to tax, it's going to call shopping cart dot PHP in the same directory and this case, it's going to pass to
William Rosener: In effect, parameters or values to this, it's going to pass the price 2099 and the image name flashlight to this PHP the shopping cart dot PHP. So let me go ahead and save this.
William Rosener: I'm going to go ahead and upload that
William Rosener: And make sure I'm going, I always use almond overwrite that
William Rosener: And now let's go ahead and take a look at this and I'm gonna hit refresh.
William Rosener: Ups. I also need to upload those images so I can so far I've only uploaded the HTML, I need to grab the images as well, in which you can even do is
William Rosener: Use the Shift key to highlight more than one and just simply hit upload. So now I actually haven't uploaded the HTML, which just to make sure they're okay let me hit refresh. And here we go. Okay, so I've got this one finished. Let's go ahead and create a another one.
William Rosener: I'm just going to come right up here. I'll tell you what, if you want to you can just copy this.
William Rosener: code right here.
William Rosener: We come right up here to File, New, I'm going to paste and now we're just going to make some changes to this.
William Rosener: This is going to be a Yeti.
William Rosener: TRAVEL MUG for the title.
William Rosener: TRAVEL MUG in my H2 and we'll put a different price here.
With
William Rosener: We'll make sure we change the price down here.
William Rosener: The image.
William Rosener: Make sure I get well even
William Rosener: Several things here.
Come on.
William Rosener: I need to specify the new image.
William Rosener: A new ALT tag.
William Rosener: Then we also need to make sure we get the correct width and height. I'm gonna come along. Take a look at that.
William Rosener: Okay, I can see it's one AD by 200
William Rosener: And there we go. So this is take a look here. Make sure I bet, everything changed. I think I'm pretty close. Here I've changed the title.
William Rosener: The H2 YET TO TRAVEL MUG, I've got a different price here I've changed the image here, this case my I've got Yeti trout. Whoops, I need to make sure I get my jpg here.
William Rosener: YEAH, THE TRAVEL MUG Dot jpg I've got my ALT tag. I've got my new with same hide.
William Rosener: Here's my form. So when I press on the submit button. It's going to look for a PHP form called shopping cart. I'm going to pass notices this in
William Rosener: But these are hidden. I'm going to pass these hidden values in effect be posting these values to shopping cart and in fact I'm posts that 1599 and the image name as well.
William Rosener: Okay, so at this point. Let's go ahead and save this. I'm going to come up here to File, Save As. I'm going to call this one.
William Rosener: Assignment five b dot HTML. So the three things there. Make sure you know where you're saving it save it save all of these images and everything.
William Rosener: In the same directory. You could have many different directory, but almost simplify this code here. So everything is looking relative in the same directory there. So Simon five be and let me hit save them.
William Rosener: Okay, let's go ahead and upload this I'm gonna hit refresh. Here's my assignment five be and I'm going to upload that. So now I should have assignment five, eight and five be let's just go ahead and take a look here.
William Rosener: Here's five be
William Rosener: And there we go. Add to Cart. Okay, so now what we need to do is work on our PHP code here.
William Rosener: Okay. So next step is I'm going to come up here to File, New, and now we start working on our shopping cart here.
William Rosener: So let me just go ahead and grab a little code here, paste it. So at the very top.
William Rosener: And let me just for forget I will close the PHP. So at the very top here. I'm going to put some default values the prices zero the image file name, and if I was to go back. I should have had left that open there we were to saw that
William Rosener: Well maybe see if I can open that up here. Well, let me just tell you what, let me I'll save this and then I'll come back and show you that we're passing price and image file name, and I'm set the quantity. These are kind of like my default values or my initial state them.
William Rosener: Okay, let me go ahead and grab a little more code here.
William Rosener: This is just kind of our generic testing to make sure no malicious data has been entered
William Rosener: And then the side, go ahead and I'm going to grab. Oh, let's just grab these lines right here on Michelin
William Rosener: And I'll tell you what, let me just throw the price. Well, the prices aren't here. So here's what's going to happen is we're going to post that information.
William Rosener: In we're going to be posting the price and the file name. Okay, let's say this is a little PHP this come on down here. I'm going to grab a little code here. As far as the shopping cart is concerned.
William Rosener: So I'm going to come. Below that was my closing PHP tag, I'm going to insert a header to tag here with my shopping cart. I'm gonna start my body if I want, I can go ahead make this a close that body.
William Rosener: Okay, this for a little bit here on the shopping cart. Once we get a little bit more here well save it and upload to some we've actually got something there somebody grabbed some my code here to start to form.
William Rosener: And move forward we close for forget. We'll go ahead and close it. I'll tell you what, more go ahead and save this. Now, then we'll take a look
William Rosener: So nothing too exciting here is going on. I've got my default or mission initial values in case I'm calling this form by itself. I've got price image file name here, typically
William Rosener: Assignment another file is going to call this shopping cart and I set the quantity to one little error checking. Here's the information posted and here's my
William Rosener: Form. I'm gonna start the form close the form, I can see that this information has been posted in what we're going to be doing, just like we did. Otherwise, we'll be calling this same form if we press them recalculate button, it calls itself. So, so come up here.
William Rosener: I'm going to go to a file. I'm going to go to save as
William Rosener: And same directory here. I'm going to call this shopping cart that has to match.
William Rosener: What we call an extra audience with extension PHP some know where you're saving it a temp shopping cart dot PHP and tax and let me hit save them.
William Rosener: Okay, let me just come back here. Let me see if I can open up one of these other ones.
William Rosener: Okay, here's. Let me just take a look at the assignment five m. Okay, so taking a look when I I'm going to pass two pieces of information to my PHP. I'm going to pass the price.
William Rosener: And the image file name, and when I press that button. It's going to look for fall called shopping cart and notice I've got the capital. See here shopping cart dot PHP. OK.
William Rosener: Now let's come back here to
William Rosener: Our shopping cart. OK. So again, we got some initial values, the price the image filename we're gonna take a look. Was that information posted to this file. If so, we're going to
William Rosener: Test it. We're going to test it. Make sure there's no malicious data and then store it in a variable called price. Same thing with filename make sure no malicious data has been entered, and if so, stored in here.
William Rosener: Okay then. We've just come down here. We've got quite a bit of work to do, but let's go ahead and save this.
William Rosener: And I'm going to go ahead and upload that
William Rosener: I'll hit refresh. Here's my shopping cart. I'm going to go ahead and hit upload
William Rosener: And there's probably I probably got some error messages that would get in here but
William Rosener: We just got to kind of start here somewhere. So it's like, here's my shopping cart. So now here's my son of 5am I'm gonna hit Add to Cart, and it's called the shopping cart here, but let's go ahead and I just helped me out. I probably got some nothing really is happening here so far.
William Rosener: But let's go ahead and just keep plugging away here. So I'm gonna start my close it and the reason I didn't get anything here. I was wondering that. Why is I needed to close my angle bracket. So I'm gonna start the PHP.
William Rosener: Sure what that question marks doing their clothes the PHP here. So this is going to close my PHP script. This here angle bracket was necessary to close this here. So I've got
William Rosener: If information has been posted. I'm going to start to take a look, see if I can extract a price in an image file name and close that. So let's go ahead and save this. I'm gonna go ahead and upload it.
William Rosener: And now let's take a look. And we should have at least it should hopefully display shopping cart. So let's take a look here. I'm going to come back.
William Rosener: I'm gonna hit Add to Cart here. And sure enough, or at least now get in shopping cart. Okay, well, we need to kind of keep plugging away up here.
William Rosener: So now what I'm going to do is come on down here and I've got, I've started my form inside the forum. Let's go ahead and display the price. Where to start off with that.
William Rosener: One little step at a time here. So I'm going to take a look. So again, if this
William Rosener: This is my default value, but hopefully that's not what I'm using I'm gonna be taking a look what price was posted
William Rosener: To this form to shopping cart dot PHP and I'm going to store that in a variable called price. Some, what is this going to do
William Rosener: This is just not going to start a PHP script. I'm gonna close the PHP script. I'm going to display, in effect, ECHO.
William Rosener: devalue price, but I'm also going to do a string concatenation, and I'm going to put $1 sign in front of it. So I'm going to put $1 sign caffeinated with the price. So, so go ahead and save this. Take a look at it now.
William Rosener: I'm gonna upload my shopping cart.
William Rosener: Come back here. I'm gonna hit advocate. So here's the 2099 hit Add to Cart. And sure enough, I've now passed that to my shopping cart.
William Rosener: Okay, we're just going to kind of keep plugging away here this now go ahead and pass that image.
William Rosener: Okay, I'm going to insert a paragraph break. I'm going to take a look to make sure the image name does not equal know some hopefully I've passed a legitimate image to this. So again, if I was using if I just happened to call my shopping cart.
William Rosener: Without going through assignment five, a or Simon fi be it's going to have a it's going to be the knowledge string there.
William Rosener: Someone. Take a look. Okay. Is it, is it not the knowledge string. If so, I'm going to go display and effect echo image source equal
William Rosener: I'm going to pass the source is going to be image file name that's right here in this file name, and you're going to notice that I've got to put the slashes here.
William Rosener: So typically, here's what I would want to, but in the fact, since I've now got this within a quotes. I'm going to use a slash to say, Okay, those are quotes need to remain there.
William Rosener: Then I'm going to go ahead and I'm going to resize this just a little bit and I'ma say the max height in the max with us in the cascading style sheet is 125 pixels. Let's go ahead and save this.
William Rosener: And we'll take a look, see what we got here so far.
William Rosener: I'm gonna hit upload
William Rosener: I'm gonna come back can add to cart and sure enough, I'm now passing the price and the image.
William Rosener: And it doesn't matter even if I was on assignment five beam when I hit. So this is 1599 I'm going to pass that to my shopping cart.
William Rosener: Ok ok okay let's keep plugging away here. Now what we need to start working on is we're going to add the quantity
William Rosener: And I've already going ahead. I probably have we've done this before, but I want to make sure that when I call this form over and over. It keeps displaying that same quantity. So now what I've done is inserted a quantity and I not need to come up here and make sure that information.
William Rosener: Gets passed.
William Rosener: Okay, so when I press the button to recalculate it when I call itself. I'm gonna come up here.
William Rosener: When I post that information. I'm going to take what's in quantum what has been posted to quantity and place it in a variable called quantity and that's just going to simply go right here. So it's going to display the quantity there.
William Rosener: Okay, let's go ahead and and just step calculate a price here.
William Rosener: So take a look up here we had just been using the price. Now we're going to actually combine the price times the quantity
William Rosener: Okay. And I think we're getting reduction of one last step here and then we'll be finished with this thing, let's say, go ahead and save this.
William Rosener: I'm going to come along and come to my shopping cart upload that to my server.
William Rosener: And I'm going to hit
William Rosener: Add to Cart.
William Rosener: And now I have passed the value I have passed the image. Actually, we need to get a command button here otherwise I can't even go on there. Okay, we've got a couple of steps left here, so I need to insert a command button.
William Rosener: And my form.
William Rosener: I'm just going to paste this appear towards the end. And so now what happens is I can enter quantity. When I press the submit button. What does it do it calls itself.
William Rosener: Okay, and that's going to pass. We're going to pass. In effect, the price in the image actually wouldn't be passing the quantity and we're going to see we got to make a few more little changes here.
William Rosener: Okay, let's save this. I'm gonna come along. Come back here, hit Add to Cart. Oops, I need to upload that
William Rosener: Shopping Cart upload
William Rosener: Okay that's come back, click on one of these. I'm going to choose the flashlight.
William Rosener: Now I've got my command button or my button there recalculate order and watch this and we still got one less step to do and that is my head too. I think it probably will pass the correct price.
William Rosener: Actually, I didn't even do that. Okay.
William Rosener: Let's say, go ahead and we're going to fix that. Because what we have to do is be passing this information.
William Rosener: To our forum here. Okay, and what's going to happen is
William Rosener: So when I call itself right now.
William Rosener: It's only passing the quantity. So I need to go ahead and paste right here. I'm going to take the image found him and the price.
William Rosener: So I have put these in variables. The price and image file name. And now what happens when I hit submit.
William Rosener: It's going to be able within this form, it's going to, I'm going to pass the quantity and I image file name and the price all get passed to my
William Rosener: When I call it a second time to my PHP self there. Okay, let's take a look at this. I'm going to save it. I'm gonna go ahead and upload the shopping cart.
William Rosener: I'm gonna come along, hit the back button here.
William Rosener: I'm gonna hit the refresh button. Actually, I don't even have to hit the refresh to sit them.
William Rosener: If you ever want if you feel like think some things are in cash. Go ahead and hit reload your rubbish on half day or I'm just going to sign the 5am I'm hit Add to Cart.
William Rosener: I got 2099 I'm now going to change the quantity to two and recalculate and now what happens is, I've got a new total
William Rosener: And the quantity and notice how those values are staying there and that is because I've added this hidden information. So now,
William Rosener: When I call itself a second time or third time, every time I possibly reach age that quantity, it's going to pass the image file name and the price.
William Rosener: Will also be posted right back to this form. So then it can come up here when I post it again. It can grab the
William Rosener: Price and image file name, along with possibly a new quantity. So that information just going to kind of get posted back and forth. Let's do one last thing here just to make sure I'm going to come back here.
William Rosener: To the assignment five be I'm gonna hit Add to Cart. Here's the price. I've got the image and let's say put a little to here and calculate order. And sure enough, that work correctly fun challenge yourself a little bit, feel free to throw some tax in there as well.
William Rosener: Okay, well, hopefully, that concludes this video let's just maybe take a look here at the shopping cart one last time things maybe to look for him so
William Rosener: Irish places the very top here angle bracket, question mark, PHP, that's going to start the PHP. This is going to close it.
William Rosener: Make sure you got this little closing curly bracket and that is start closing this so this if I post the information
William Rosener: That's going to be taking a look here, and the time I press on the command button, it's going to post the information to this PHP.
William Rosener: And it's going to take a look. Okay, what information has been posted or submitted. It's going to take the price. Okay. The price was so
William Rosener: test it to make sure there's accurate data no malicious data stored in a variable called price. Same thing with file name and quantity
William Rosener: Placing those and anytime we got the dollar sign that's a variable name. Now what I'm gonna do is I'm gonna take the price. This is the multiplication sign times quantity and store that back into price.
William Rosener: Okay, let's should pretty well do it.
William Rosener: There's any questions, holler. Otherwise, I'll catch the next video. Thank you. Bye.