Introduction to PHP Web Application Development

Hello, and welcome back to Educator.com's Introduction to PHP course.0000

In today's lesson, we are going to be continuing development of our web store application.0004

We are going to be adding a bare-bones shopping cart that is going to make use of the arithmetic operators that we had learned about in the last lesson.0008

In today's lesson, we are going to do a couple of things.0016

We are going to just quickly review what the last web application version was, and the features that it had,0019

so we can see the changes that we are going to progress to.0025

And then, we are going to make two updates to our web app; we are going to have a version 5 and a version 5.1.0027

Let's take a look at...this is web app version 4.1, which was the last version we worked at.0034

That is where we had added a checkout page where you can add your name and so forth, and submit it,0041

and it will say "Thank you" for submitting your information.0050

We also have the item.php that uses the query strings, so we have one page for all of our items.0054

That was done in the last two versions.0063

In this version, as mentioned, we are going to be adding a shopping cart page.0066

It is not going to be a full shopping cart, because we don't have all the tools to really do that yet.0069

But it is going to be part of our process of building up to that.0075

We are going to make a static shopping cart page, which is the page where you go, and it lists all of the items in the store,0079

and the user can select how many they want and then click Check Out.0085

What they are going to do is have a page where they can go and do that, and when they check out, it's going to forward0089

the items they selected onto the checkout page, which before had the shipping information form and billing information form.0098

When it gets passed over to that page, it is going to calculate the total and output it at the top of the screen.0107

It will say "your total was this," and it's going to ask you to please enter your shipping and billing information.0111

So, we are going to be altering the checkout page a little bit, in addition to creating a new page.0118

The new page is going to be called viewCart.php; we are going to be altering checkout.php, as well as the footer and the CSS.0124

In the footer, we are basically updating to add a link to this new Cart page.0132

Let's take a look at what this new version looks like.0138

This is version 5.0, and as you can see, we have the links at the bottom, and we have the new link down here.0142

Everything else is the same, but we have the link View Cart.0150

What it does is: it lists all of the items in the store and their price, and then this is an HTML form0153

that uses the GET method to pass the input along to the next script.0158

And what it allows you to do is set a quantity; so let's just say we want to get one of each of these.0164

We hit Checkout; this script calculates our total--we altered the checkout script so it calculates your total; it says "Your shopping cart total is this."0171

And then, it outputs the same form that we had before, for example, to output your shipping information.0180

Let's take a look at what is going on behind the scenes in this Shopping Cart page.0187

If we look at the HTML source (let's make this a little bit bigger), what we have done is: in the middle of the page0194

(this is the content section of the HTML page), we have added a title, and we have created a form.0211

And the form uses the GET method; it is going to pass the data you entered, which is the quantity of items desired,0219

to checkout.php, and this is just a table that formats what this is going to look like.0225

As you can see, what it does is: it has a row in the table for each item.0238

This HTML isn't the prettiest HTML, because to do that with PHP, you kind of have to get fancy with new lines and tabs and so forth.0242

So, sometimes it doesn't always come out the nicest.0251

But what it does is creates one row in the table for each item; and so, we have a row for item-1001...0254

It lists...this is a link, and an image to the item's page; so you can click on 100% Cotton T-shirt, and it would take you to that page.0262

It outputs the price, and then it outputs a text box that is where the user can enter the quantity that they want for that particular item.0271

What we are doing is: we are using this array syntax again within the name attribute of the input text box.0280

We are creating an array...we are going to have PHP, when this form is submitted, create an array called items.0288

It is going to be an associative array; the key of the array is going to be the item number.0297

So, for each item that we have, it's going to create a key and value in the items array,0303

where the key is the item number, and then the value is going to be the quantity that the user selects.0310

And so, when the form is submitted, it is going to pass, on the checkout.php, an array with each item as the key,0316

and then, as the value for that ID, it is going to have the quantity.0329

Let's look at the PHP code behind this: this is the beginning of the form, which is just HTML, and down here is where it's for the first item, item-1001.0333

And what we have done is gone through and manually created a row of information for each item.0349

What we are going to learn, as we progress in the course and learn about loops and stuff like that:0355

we are going to be able to do this repetitively and only have to write this code once.0358

But because we are not there yet, we have gone and manually output the information for each item; and this is how it looks.0362

Basically, for item-1001, we set the current ID of the item, or we set a variable called currentID; so for this one, we are going to output the data for item-1001.0370

Then, we load the associative array that contains all that item's information from the item catalog, which is in our include file, catalog.php.0380

We are saying, "From the item catalog, give me the associative array associated with ID 1001, and store it in currentItem."0389

And just to make things easy, we are going to create some short versions for the different values that we are going to pull from that items array.0399

We are going to get the name, the price, and the image file extension, and we are going to store them0408

in these variables curName, curPrice, and curExt to represent those three things.0412

Then, if we look at the page, we can see there are three columns;0420

and the first one is a small picture of the item and a link, and then the price and the quantity box.0424

So, the first thing we are going to do is output this image and link; and that is what this section of code does, down here.0432

In PHP code, we have a bunch of echo statements, and they are outputting the link to the item page.0440

And we have it set up so you can click on the image or the item's name to go to the item page.0450

Basically, the way that works is using GET query strings, just like on our homepage, store.php.0456

We had updated to use query strings to look up different items, so this would be item.php?itemID=1001.0460

Well, that is how we are going to do that here: we are going to do the same thing, except we are going to create them dynamically.0470

So, we are going to output using double-quoted strings, item.php, a question mark, and we are going to say itemID=.0475

And then, if you notice, here we have our concatenation operator, which we just learned about, as well.0485

And to this, we are going to concatenate the current item ID, which would be 1001, and we are going to urlencode it.0491

And as mentioned in the last web application lesson, we didn't use urlencode function before,0499

because we were hard-coding the value, and we knew that it was a safe value.0506

But typically, any time you are going to be outputting variables that may come from other sources0509

(maybe it comes from functions other people have written if you are programming on a team, for example),0515

this will ensure that anything that gets output will be output appropriately.0519

That is just good practice; so it is going to output the item ID, so that is going to create the link to the items page.0522

Here, we have an image tag where we are dynamically creating the image name.0531

The image name for each item is the item's ID with the image extension as the end of it, so it would be like 1001.jpg.0535

And then, down here, so that things look neater, we separated the links out; we made one link around the image tag,0546

and then we also created a separate link just for the name.0553

So, if we look at the body of this link tag, it's currentName.0558

So, this would be the body of that link tag; and then, this image is a link, as well as an image.0564

So then, in the next column over on the table, we are going to output the current price.0577

And then, the key part is: we are going to then create a text box, and as mentioned, we are going to, as we saw,0582

use the name attribute to have PHP create an array when the form submitted.0591

It is going to create an array called items, and you can see the square bracket notation.0598

What we are doing is dynamically inserting the current item ID; instead of hard-coding it in there,0602

we already have it listed up here in the top of our file.0609

And that is the point of the variable: so that we can refer to it all at once, and if we need to change it, we only change it in one spot.0614

We could just hard-code in here like this--erase this and just do 1001--but then, every time we have to change the item on the page,0619

we have to go through and manually edit it.0628

This way, we can change things in one spot; so that is another example of code reuse.0629

That outputs a text box with a quantity, and we set it up with an initial value of 0.0635

And we repeat this process three times for item 1002 and item 1003, so it creates three rows in the table.0641

And again, we do this manually, because we don't know about the loops and things so far in the course.0651

But later on, we are going to be able to automate this, where we can write this code once, and it will loop through three times for each item number.0658

We don't actually have three sections of code; and that is good, because since I have typed this section of code in here three times,0665

there are three chances for me to make a mistake again; so that is another important thing that we will get to about code reuse.0671

Especially if you have something that recurs over and over, you only want to have to write it one time.0679

That is what the shopping cart looks like; and as mentioned, when you go to checkout, you can see,0686

at the top of the page, in the URL, it has the items array listed as name/value pairs.0696

It has items-1001=1; items-1002=1; those are the quantities we selected.0701

And so, checkout has changed; before, when you went to check out, it just showed the form (this was in the last version).0707

Now, when we go to check out from the new cart, it's going to have a little message that is going to say what the shopping cart total was.0715

Let's look at checkout.php, which has been changed, because we are going to be doing the calculations for the shopping cart in there.0721

The first thing we do in all our pages is include the catalog.0728

And then, we are going to create a short variable for the items array that was passed from the View Cart form,0733

which, again, has one key entry for each item ID, and then the corresponding value to that key is the quantity selected by the user.0739

This items is an associative array with ID as the key, and the value being the quantity chosen.0750

Now, we are going to make use of these arithmetic functions that we learned about.0756

We are going to start off with a variable called currentTotal; it is going to represent the current total; and we are going to set it to 0.0760

You should always initialize your variables to a default value.0768

And in this case, because we want our total to start off at 0 (we are going to add up to it as we add items to it), we give it the value 0.0773

And then, here, we have three steps where we manually go through and pull the price for the item that was selected0779

(for example, 1001) out of the item catalog; we look it up in item catalog, pull its price out, and then multiply it times the quantity the user entered.0789

So, you can see, for item 1001, we go to the itemCatalog array in catalog.php;0798

we select the 1001 element; and then we select the price value from that.0805

And then, what we do is: cartItems is the short form of this GET query that we had at the top of the screen, and we are going to say,0815

"Multiply it times the value associated with the key 1001," and as we mentioned,0826

the value associated with the keys in this cartItems array is the quantity.0831

So, this is basically saying, "Take the price of the item 1001; multiply it times the quantity0835

that was chosen by the user; and then add it to the current total."0841

And here, we are making use of the combined assignment operator.0844

So, instead of doing curTotal plus this equation right here, and then setting it equal to curTotal,0847

we can just use the += operator that automatically is going to take this right here, perform the operation, and add it to current total.0855

This is updating current total, so now current total is going to reflect the amount of the first item on the list, item-1001, and what quantity was chosen.0863

And then, we go through and do the same thing for item 1002 and 1003.0878

We simply look up the price for each one, and then multiply it times the quantity that the user selected on the form.0882

And we use += again, and what that is going to do is: that keeps adding it to the last value of current total, so it adds up.0888

And once we get to the end of this line here, we are going to add up the current total of the cart,0895

which is the prices of all the items, multiplied times the quantity selected, added together.0898

Now, what we have done is added a little message at the beginning here of checkout.php, which wasn't on the last form,0903

that just outputs the total that we had calculated, which is going to echo current total.0910

And then, after that, what it does is goes and lists the same shipping and billing form that we had before.0916

And so, that is what this little message is up here; this is the new message that has been added.0924

The calculation is done in checkout.php, and we have made use of our arithmetic functions.0928

That is version 5.0 of the store; we are also going to make, in this lesson, one more modification to the web store.0934

We are going to call it version 5.1; and what we are going to do is: on the previous version, when you checked out0944

(actually, it didn't do it on this current version), we have our total that has been calculated from the View Cart page.0956

And then, it brings us to the shipping page, and we enter our shipping information.0967

And we go to Complete Order, and it says, "Thank you; your order has been completed, and will be shipped to..."0978

What would be nice is: when you are done with your order, and you have completed your order, you would like to see the final total again.0985

I mean, typically, when you go to a website, they say "Thank you for your order," and then they show you a total.0992

So, we are going to make it so that we can output the total on this Thank You page, as well.0995

In version 5.1, what we are going to do is: when we view our cart to add an item to it and checkout, there is the total being output, and then...1000

And now, when we do Complete Order, and we go to the Thank You page, it is going to say the same thing:1028

"Thank you; it has been shipped to [the address we entered]," but it is also going to say,1033

"Your order has been completed with a final total of $644.98."1036

What that does is: we are going to use a technique of hidden input fields in order to pass...1042

Basically, what we are doing is receiving the total on checkout.php, and we are going to forward along to Thank You.1047

So, in version 5.1, as said, we are going to add a hidden input field to checkout.php,1054

and that is going to take that total that was calculated at the top of checkout.php, and it's going to forward it on to the Thank You page.1061

When the user submits the shipping form--when they enter in their name and their address--it is going to also forward along the total.1068

And then, that way, thankYou.php has access to that variable.1074

We are going to make modifications to both checkout.php and thankYou.php.1080

I'll pull up the 5.1 version; so version 5.1...we are going to look at checkout and thankYou.1088

On the checkout page, it is all the same as in the last version, except, at the very bottom of the shipping form, we add a hidden input field.1103

We have decided to name it orderTotal; and then, what we are going to do is: the value, currentTotal, that was calculated1115

all the way up here at the beginning on these lines--we are going to forward it on.1123

The way to do that is through this hidden form.1130

So, when the user submits this shipping form, it is going to submit a name/value pair1132

where the name is orderTotal and the value is going to be the current total that was calculated.1138

And so, then the thankYou.php has to be ready to accept that total, or be able to print it out.1144

And so, what we have done is created a short variable where we get the value associated with the orderTotal name1152

that was the name of the hidden input tag, and in this case, it's going to be the total value that was calculated.1161

We are going to set it into this variable orderTotal, just as a shorter version, instead of using this longer GET version.1166

And now, we have changed the output message a little bit: it says, "Your order has completed with a final total of__," and we output the order total.1174

And then, the rest of it is just outputting the address, just as before.1182

What that has done is: that is a common technique that you can use for when you have a form or a process of forms1187

where data is going from one form to the next--sometimes you need to pass that information along,1196

because HTTP is a stateless protocol, and it doesn't know about what happened before.1199

You can continue to pass things along by using hidden input fields.1205

For the homework challenge, I just want you to look over the arithmetic operations that we did at the beginning of checkout.php,1211

so you can see the use of the combined assignment operator and the multiplication operator,1219

and just make sure that you understand what is going on in the material from the last lesson--you can kind of see it in action.1223

And then also, make sure you understand how the hidden input element can be used to forward input data1230

that is received at one script--to forward it on to another, so you have a chain of events as we go from View Cart to checkout.php to thankYou.php.1236

We can pass that order total along.1244

That ends today's lesson; thanks for watching Educator.com--I look forward to seeing you at the next lesson.1247