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 working on web application development, and we are going to be continuing0004

to add features to our store web application, making use of what we learned in the last few lessons,0008

as far as using GET data and input data from forms.0014

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

First of all, we are going to review the last version of the web app that we had gone over, so that we can0023

see the changes that we are going to make, and see where they are coming from.0029

And then, we are going to have two new versions; we are going to have version 4.0 and version 4.1.0033

Let's take a look back at the last version of our web app, version 3.3.0039

And as you can see, it is our store, as we have seen before.0045

When you click on the links, you have item pages.0052

And the thing to notice, in particular, is that each item has its own page.0056

You can see here at the top of the browser, item 1002 in the store has its own PHP page called item-1002.php.0060

We are going to change that, so that you don't have a separate page to manage for each individual item.0069

If we go and look at the code again--let's look at item--1001.php.0076

If you remember, what it does is includes the catalog, which was our include file that has an associative array0081

containing all of the information about the items in our catalog--the name, the price, the description, the file extension, and so forth.0091

We include that, and then we give the current ID variable the ID of the item that we are going to be showing the page for.0100

Give the page a title; include the header and the footer; and then, what we had done on our last version was:0110

we created a new include file, itemListing.phtml, which basically included all of the HMTL and PHP code we used to output the item's information.0115

And basically, what we did is: we put that in one file, and we use that in each item's page.0127

So, item-1001.php, item-1002.php, and so on all included this.0132

And so, we are making use of code reuse; and today, we are going to go one step further and make it0138

so that, instead of having a separate page for each item which we include in itemListing.phtml, we are going to have0143

one page that we are going to use GET query strings to send the item ID of the item we want to view, and it's all going to be in one page.0150

Let's go and take a look at that; let's see what changes we are going to make.0160

So, the new version is going to be item 4.0, and what we have done in this version is: we are making use of GET query strings,0165

which, as you remember, is if you have the name of a page--the URL--for example, item.php, which is the page we are going to be creating today,0174

at the end of it you put a question mark with a query string on the end; I ran out of room, but then we put the item number on the end.0185

And so, what we are going to make use of that new functionality that we have learned about, about how to process GET data.0197

We are going to be adding a page called item.php, and what that is going to do is0204

take the place of item-1001, item-1002, and item-1003.php, as well as itemListing.phtml.0210

Additionally, because on our home page of the store, we have links to all of the different items,0222

we're going to have to alter the links on that page, because we are obviously getting rid of these pages, and so,0227

to link to them is going to be different; and so, we are also going to be editing store.php.0232

Let's go take a look at the code for these.0237

First, let's look at item.php: what this file does is the same thing as maybe item-1001.php in the last version,0241

except what it does is calls itself item.php, and what item-1001 had included in itemListing.phtml, which was here--item.php just has that all in one page.0253

So, as you can see, it includes the catalog--some new stuff up here--but what it does is: it loads the current item0265

(and we are going to get to more of that in a second) before it was hard-coded in the page, and then it includes the HTML header right here0274

and the HTML footer, just as before.0284

And this section in here is what was in itemListing.phtml; before, we had that included in each item's page.0286

Now, what we are going to do is: we are going to set it up (item.php), and we are going to pass it an item ID by a GET query string.0294

And when that page loads, at the beginning of the page (because now we know how to access GET data from PHP),0302

we are going to grab from the _get array that we just learned about.0309

We are going to grab the value associated with itemID, which is going to be the ID of the item we want to view,0316

and we are going to set it to a local variable--in this case, currentItemID.0323

And then, what we are going to do is: after we have the item ID, we are going to use our item catalog,0329

which is in catalog.php, and we are going to use the item ID to look up the particular item that is being requested0335

and pull of the information about it.0343

Basically, this is an associative array; so when the user requests itemID 1001, we are going to go and pull out this array from catalog.php.0346

And so, that is what this line does, right here.0355

It goes into the item catalog, which is accessible because we have included catalog.php up here.0358

It uses the current item ID, which is passed in by GET, to load that item.0363

And then, here we set the page title using the current item and getting its name number from the associative array.0369

And then, down here is the same code as before that we had, except we are using a new variable currentItem.0379

And all this is doing is outputting the different information about the item, so here it is putting its name, the itemID, its price...0386

Down here, it is outputting the image, which is a combination of the item ID and the image file extension...and also description.0395

Let's take a look at this in action.0406

This is version 4.0, and if we go to store.php and we click on one of the links, if you can see at the top of the browser here,0409

in our address, we have item.php, and then we have a question mark indicating a query string.0419

And the name/value pair that we are passing in is itemID=1001.0425

What we are doing is passing to this script--we are saying we want to see the information for item ID 1001.0430

And we can do the same thing as this with the other links on the home page, too, by putting in item 1002, for example.0437

That is going to go out; it is going to load the information from the item catalog array, and then show it for item 1002.0446

We go back to the home page; you can see that it does that for all three of the different items.0455

Now, because we are using query strings, the links to get to the pages are different.0463

Whereas, in the previous version, on store.php, we had the links to each item's page coded as individual pages...0467

As I mentioned, each item had its own particular page; so in this case, item 1001--all of its information was contained0480

on its own PHP page, called item-1001.php; and as you can see, that was the same for item-1002 and item-1003...0489

Now, those pages don't exist anymore; so what we are going to do is: we are going to change those to an item.php link with a query string.0499

So, if we look at the new version of store.php, we can see that the links now have become item.php,0506

and you have the question mark to indicate the beginning of a query string, and then the name itemID equal to the item ID of the item we want to see.0514

And you can see, we have done that for both the item 1002 and item 1003.0526

One thing that we had talked about when we were talking about query strings was using the urlencode method.0532

That was a way to encode query strings on the URL, or append query strings to a URL in an encoded form,0538

so that they would follow appropriate URL syntax.0546

We haven't used that function here; and the reason is because here we know that this is a valid URL.0550

We know that there are no spaces, for example; there are no special characters that need to be replaced.0559

Typically, when you use the urlencode is when maybe we would, instead of having 1001 here, be passing in variable itemID.0566

Usually, any time you pass in a variable, you are not necessarily guaranteed as to what the value is going to be.0576

There could be some strings that need to be encoded in there.0581

So, in this case, if we had a variable, we would use urlencode, for example.0586

This isn't actually proper syntax, but it is just to demonstrate what it would look like.0594

And I just wanted to mention that we had talked about that; but the reason that we aren't using that now0600

is because we know that this is a valid query string.0605

That is all of the changes that we made to get to version 4.1; and again, this is what the store looks like,0612

and all of our links have the query string with the item ID appended to them.0619

We are also going to add another thing to our web store, to make it a little more feature-rich.0626

We are going to be adding a checkout page.0633

And so, if we look at the change log from going from version 4.0 to 4.1, we can see that we are adding a checkout page0636

where a customer can enter billing and shipping information.0646

And after they submit, a customer will go and (I'll show you in a minute) they will submit their information.0649

They will be forwarded to a Thank You page that says "Thank you for your order," and it will output their shipping information that they had entered.0655

So, we're going to forward to a Thank You page.0663

One other thing we are going to do is: because this is a checkout page, we want it to be accessible anywhere on the site.0667

We are going to add a link to the footer, in footer.html, to this new checkout page.0673

We are going to be changing that.0677

So basically, we are adding two new pages: checkout.php and thankYou.php.0679

And we are going to be editing footer.html, and we are also going to be making some edits to store.css,0685

because we are adding some new tables that need special formatting or different formatting from what we already had available.0692

So, there are some minor changes to add, which we are not really going to go into and focus on the CSS.0699

Let's take a look at what this new source is going to look like--the store with this added checkout page.0706

We go to store.php; you can see down here, now we have a checkout link; and if you click on that, it is going to bring up a form.0714

It says, "Please enter your information to complete your order."0721

Now, we are slowly building up this store as we work through this course, and we are going to continue to work on this site in the advanced course.0725

So, this isn't a fully functional thing; but what it does is...0732

We are just starting to expand, so this form doesn't actually save your billing or shipping information anywhere.0736

But what it is doing, and the reason I have included it in this web application lesson, is: it is going to demonstrate how to access GET data0743

that is sent to a web server by an HTML form, because in the last few lessons, we went over getting GET input data from a query string,0752

and also from an HTML form; this is going to demonstrate getting it from an HTML form.0762

If I just type in some sample data here, and hit Complete Order, there are a couple things to note.0769

One is: if you look up at the URL, if you are able to see that, you can see that we are going to the link thankYou.php,0796

and there is GET data appended to the end of the URL that contains all the information we had entered in our form.0806

That is because our form uses the GET method.0813

You can see a Thank You message, and what we have done is echoed the information that I had just put, the shipping and billing address.0817

And the reason for that is: it is going to give us practice with accessing the GET array, the _GET global array, and outputting the data.0828

Let's actually take a look at the code.0839

Close some of these down and go to version 4.1...we are going to load up checkout.php and thankYou.php,0844

which were the new pages we've added, and also footer.html.0859

I'll start with footer.html, because as you saw, there is a link at the bottom of every page now that goes to checkout.php.0867

So, all we have done is edited our footer.html include file and added an additional link down here to the checkout page, which is checkout.php.0874

That is it--that is a pretty minor change.0884

Now, if we look at checkout.php itself, we have our usual include for the catalog.0888

We include that on every page; we create the page title and include the HTML header.0895

And then, what we have is the form--the HTML form that uses the GET method, because that is how we are going to access...0901

on thankYou.php, when we echo the information the user entered back to the user, we are going to access it by the GET array.0909

So, the form method we have chosen is GET.0917

The action, and where this form is going to submit the data to you, is thankYou.php.0920

And as you can see, it is just a table that has been created to give some formatting, and it has a text input field0925

for all of the different information that a customer would enter.0932

And as you can see here, we have used the array syntax within the name attribute of all of the different input elements.0936

And what that does is tell PHP to create a customer array.0948

And in this example, it is going to create a key with the name firstName, and then it is going to associate with that key0952

whatever value was submitted on this text box.0960

So, when this form is submitted, we have a customer associative array that we can go to and access all of the different information in one spot.0962

And so, that is what this form looks like; and if we look at the HTML code for it, you can see the (I'll blow this up a little bit)0972

same form as we had just shown with the arrays as the names of all the different input elements.0988

Now, when we click Complete Order, again, it goes to thankYou.php, so let's take a look at that page.0997

thankYou.php...now, because it had information submitted to it by the GET method, by an HTML form,1003

we are going to access that information using the _GET array.1013

And basically, what we are doing here is just creating a short variable, because we are going to want access to1018

all of the information that was submitted on the form.1024

And instead of having to use this long name each time we want to access a different piece of data that was entered,1026

we can use the shorter variable name.1033

In this case here, we are taking from the GET array; we are loading from the value that was associated with the key customer,1037

which is, in this case, an associative array that has things like first name, last name, city, street, address, and so forth.1046

And then, when we go down here, put a little Thank You message.1054

And in this section right here, we are echoing the information that they submitted;1057

and that is to get practice with accessing the stuff from the GET array.1064

As you can see here, it is just another table that we use for formatting; and in each of, for example, the table cells, we have output different information.1069

We have output the customer's first name, last name, street, apartment, and so forth.1080

As you can see, here we have used the curly brace or complex syntax within double quotes in an echo statement.1085

And that is in order to be able to access the value of this variable.1093

So here, we are accessing the value that is associated with the key firstName in the customerData array,1098

which, as we saw up here...the customerData array was taken from the GET array, which contains all of the information that is passed in.1105

And so, that is how the echoing of that form works.1118

That finishes our review of the different changes that we made.1126

For today's homework challenge, I just want you to go out and just try to get an understanding of what is going on,1130

and understand how one of the nice things about using the GET query strings is: now, we have one page called item.php,1137

and that one page, we can use to display all of the items in the store, by submitting a query string with the item ID.1146

Now, before, we had three items, so we had three separate PHP pages to maintain; so, what this is going to do1153

is improve our site maintainability, because we only have one PHP page to manage, item.php.1158

And just try and understand how the query strings work to enable us to do that.1166

Also, just look over the form that we had, the HTML form for the shipping information,1173

to look again at the syntax that we used for making sure that data submitted on the form is loaded into an array by PHP.1181

In this case, it was loaded into the customer array, and that was using this syntax in each of the input elements.1188

And again, that is just to make sure that you understand that syntax, because we are going to be using it a lot throughout the course.1203

That ends today's lesson; thank you for watching Educator.com--I look forward to seeing you next time.1215