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 work on our web application for the mock store that we have been developing.0004

We are going to be integrating the material we learned in our last lesson on arrays.0009

In today's lecture, we are going to have four different versions of the web application store that we are going to go through.0016

The first one, version 3.0, is going to upgrade from our last one, which was 2.1.0023

What that is going to do is: we are going to create a new type of include file that is just a PHP file.0029

It is going to centralize all of our product information, like the item information,0036

such as the name of the product, its image, the description, and so forth.0042

We will see, that becomes quite useful.0047

After we do that...when we centralize it, we are going to be creating an array in a PHP file, and so we are going to, in version 3.1,0049

improve the readability of our application by making an array an associative array.0059

Then, we are going to, in 3.2, make use of a multidimensional array; and finally, in version 3.3,0065

we are going to make use of include files again, as we will find out that there is another opportunity for us to use code reuse.0072

Let's take a look at application version 3.0.0080

Actually, this is version 2.1, which is the last version we went over; and as you can see, this is the store.php page.0086

It is the same as it was in the last lesson.0096

What you can see is that we have things like "100% Cotton T-shirt" and "42" LCD Television" hard-coded as links into our homepage.0098

The homepage is going to look like this, if you remember.0110

For example, if we click on 100% Cotton T-shirt, it goes to the cotton T-shirt page.0121

Well, this 100% Cotton T-shirt phrase is hard-coded into the page, so if we want to change the name of the T-shirt, we have to change it here.0125

And then, because we used the name here on the actual product page, we have to change it here, as well.0134

We are going to make it easier to do that by creating a...we're going to call it a configuration file...that is going to contain all of the item's information.0138

Instead of having hard-coded values like this (for example, this is the store page--we have hard-coded all the names of the different products),0151

on the item page, like item-101 (oops, I want that closed)...0160

For example, item-1001.php from the last version--all of the information about the T-shirt is hard-coded:0168

the item number, the price, the name of the image, the description.0178

What we are going to do now is: we are going to create new versions of these pages.0183

To start off with, let's look at the store.php, which is the homepage.0189

If you'll notice, there is a new line at the beginning here--there is a new include statement that says include catalog.php.0194

What catalog.php is: it's a PHP file that contains information about all of the items in our store, sort of like a central repository.0201

If we look at catalog.php, we can see that it contains three arrays, and we have created an array for each item in our store.0213

Right now, we only have three items, and we have called each array item, followed by the item number (so we have item-1001).0223

And then, in the array, in the same order for each of the different arrays (and these are numerically indexed arrays),0232

the first value is the item number; the second value is going to be the name of that particular item.0240

So, item number 1001 has the name 100% Cotton T-shirt.0247

It has the price 14.99; its image is 1001.jpg; and then, the description that we are going to use is "This 100% cotton T-shirt is built for comfort."0252

We have a similar thing that happens for both item 2001 and item 2003.0265

So, what that is going to allow us to do: because we have included that at the beginning of our store.php page,0272

now all of those variables that were included in that file are available in the rest of our PHP page.0279

So, when we go down here and we want to list the name of item 1001,0286

we can use a PHP echo statement that makes reference to the item-1001 array defined in catalog.0294

We are going to get the second item out of that array, which happens to be the name.0302

So, if we go back here, we can look, and we can see the item-1001; the 1 index refers to 100% Cotton T-shirt.0305

And what that is going to do is allow us to access that information.0315

This is in contrast to in our last one, where it was hard-coded; we just had 100% Cotton T-shirt written in there.0322

Now, we have it stored in one file, and so, anytime we want to access the name of that particular item, we can just access that array.0331

Similarly, on the previous item-1001.php page, all of the information about that item was hard-coded--the name, the item number, the price, and so forth.0338

Well, in our new version, we are going to add that include file again to the top of the page,0353

which is going to make all of those arrays that we defined in catalog.php available in this script.0358

What we are going to do is: we are going to echo the different values contained in those arrays.0367

So, for example, the item name is the second item we are going to reference.0374

Because this is the page for item-1001, we are going to reference the item-1001 array, the second element, which is the name, and so forth.0377

And so, down here, we are going to access the item ID; we are going to output the price.0388

Within this image tag, we are going to output the name of the image file, and that is useful for...0395

if we want to change an image file, maybe from a GIF to a JPEG, we can just update it in the catalog.php file.0402

And any page that uses that product's image, we can update using this array.0408

And then also, down here, we output the product's description.0417

This was the old version, and then this was the new version; and we actually can even improve on this further.0429

But before we talk about that, let's go ahead and look at...this is what the old website looked like,0438

and the new website is going to look exactly the same--version 3.0--it is just going to be making use of these arrays.0442

Just to verify that, we are going to go up here and take a look at it; and you can see, it's the same website.0450

I think the name of the store changed, because we played around with that in the last lesson.0457

And, if we click on each of the different product pages, we can see that all the information for that product is output.0462

If we read the page source, we can see that all of that information about the item that was output by accessing those arrays0470

in catalog.php has been output to the file.0483

We can improve on this even a little more, and that is going to take us to version 3.1, and we are going to make use of associative arrays.0488

Let's go back here and go to version 3.1.0499

OK, now what we have done is: for version 3.0, we had numerically indexed arrays for each item.0517

And what we have done in version 3.1 is: we have updated catalog.php and turned them into associative arrays.0527

And so, what we have done (bring that up) is: instead of having to access the different values in this array using numeric indexes,0535

which don't have much semantic meaning to them, we associate each value with a particular key that has meaning.0548

So, we are associating the item ID with a key named itemID; we are associating the name of the item with the name key; and so forth.0556

We have price, imageFile, and description--the other keys we are going to use in each of these different arrays.0565

And so, what that is going to do is: it makes our code a little bit easier to read, because when we reference, for example, the name of item 2001,0570

we are going to, using square bracket notation, see item-2001 array name with the square bracket with the string name on the inside.0578

So, it is going to kind of intuitively tell us, "OK, we are getting the name of that," as opposed to before,0587

when it was just the number 1, which doesn't have as much meaning.0591

If we go and look at the new...for example, store.php page, we still have the include up at the top--the catalog.0595

But now, whereas before we had...when we wanted to, for example, output the name of item 1001,0607

we used this array in catalog.php, which is numerically indexed.0618

In the new version of it, it becomes item-1001 name, and so it's a little more intuitive, and we can instantly grasp some meaning0623

as to what the value we are going out and outputting is used for.0631

Similarly, on the product pages, we still have the include for catalog; it's going to include for the new associative array catalog.0637

Now, when we go ahead and output information about it, such as the name, its ID, its price, and image file,0646

we are going to access the arrays in catalog.php, using the string keys.0652

What that is going to do, again, is: it adds a little more semantic meaning to our code.0661

So, we can look down here and know, when we are editing this code, "OK, here is some HTML that is outputting the phrase price and a dollar sign."0666

And then, I am going to echo from PHP an array called item-1001, which intuitively tells you, "OK, this is probably item-1001 in the catalog."0673

And then, we are going to output a value that is associated with the key price.0683

Likely, it is going to be a price; and so, it gives meaning to our script and makes it easier to read.0688

This website is going to look exactly the same as the last one did.0695

We haven't changed any of the code--it's just that we have used an associative array to sort of improve things.0698

We are actually going to take it one step further now, and for 3.2, we are going to make use of multidimensional arrays.0703

That is going to clean things up a little bit.0710

The way that is going to work is (let's go back here and close down some of these older versions...OK, and go to version 3.2):0713

now, let's take a look at catalog.php again...0745

This time, we only have one array to find in here; it is called items, and it is a multidimensional array.0748

Let's clean these lines up; I don't know why they changed.0758

And so, basically, it has the same content of the previous catalog.php, except instead of having three different arrays0761

that we needed to reference using the particular variable identifier we assigned to the array,0771

we are going to combine all three of those arrays into one array called items.0781

It is going to be a numerically indexed array, and it is going to contain all the information for each item--so it's going to contain...0786

Actually, this formatting is off, so it makes it a little harder to read; I'll just fix this really quickly.0801

In the items array, it is going to have three elements in it, and the key for each element is going to be the item ID.0822

So, the key 1001 is going to refer to information about item 1001.0831

To each item ID, we are going to assign a value, which is an array,0838

that contains the name, price, image file, and description information related to that item.0843

If we go back and we look at store.php, and we include catalog.php, now the way we access things is using the multidimensional square bracket syntax.0851

We reference...for example, here we want to output the name of item 1001; so, this right here tells us0866

to pull up item-1001 from the items array, and then get the name value associated with item-1001.0872

This is opposed to the previous version, where we actually had an array created for each different item.0883

Item 1001 needed its own array created in catalog.php; item 2001 needed its own array created in catalog.php.0893

Now, we simply use the same array for all of the different item numbers, and we simply add an additional square bracket in there0903

to refer to the item number in the multidimensional array.0913

If we look at the product pages, we can see the same thing is done.0917

We have the catalog.php inclusion, and what we have done is accessed the 1001 item number.0923

We are going to output the name associated with product ID 1001; we are going to output the price; and so forth.0934

We are accessing it using square bracket notation for multidimensional arrays.0944

And you can see up here, too, that the title which essentially gets passed to the header file to be output as the HTML title--0950

we are going to set it equal to the name of the particular item.0962

So before, we have done that in previous examples--we dynamically set the name of each page.0970

Now, we are doing it using the array; and actually, in the other two versions that we talked about (3.0 and 3.1),0976

we did the same thing, using the different syntax.0981

For example, in the last one, because we still had the individual item arrays, this is how we set the title.0985

One interesting thing we can do here is: you look at, for example, item-1001.php;0994

we can see that we have this number 1001 output several times throughout the script.1000

And so, any time we see code that is redundant like that, we want to take advantage of the opportunity to reuse it,1006

because what that is going to do is eliminate the number of errors, because every time we need to reference item 1001,1012

we need to type this string; and each additional time we do that, that gives us one more chance for an error.1018

So actually, what we can do is create, at the top of the page, a new variable called itemID; and we are going to set it to 1001.1024

What we can do now is: everywhere where we have 1001, we can go through and replace it with the variable itemID.1042

I'll use the Search and Replace feature to do that.1056

And, as you can see, what we have done is replaced all of these 1001's that were referenced down here with itemID up here.1077

So now, any time you want to update the item number, we only have to do in one spot, not in (in this case) 1, 2, 3, 4, 5 different places.1083

Additionally, because we are going to be passing the name of the item on to the header include file, we're going to get rid of this 1001, too.1091

And so, we include itemID here; and what is key to notice is that, because we use itemID in the creation of the variable title,1103

we have to have itemID defined ahead of time.1113

If we had defined it below it, then we would get an undefined variable error, and the title would not be able to be properly output.1115

Let's set that back to normal.1126

And so, we actually could do this for every single page in version 3.2.1132

For example, for item 2001, we can create variable itemID, and then we are going to go through and replace all of the 2001's with itemID.1143

And we have the same thing as on the 1001 page.1165

We are going to go ahead and do that for 3001; and there is an important reason1172

why I am walking through and doing this individually, and you will see it in one second.1176

Actually, I need to replace the original one...oops, I had an extra apostrophe in there.1200

OK, so now, for item 3001 page, we define the number up here; itemID is 3001, and then we reference it down here1212

in the body of HTML that outputs information about that item.1220

Now, if you actually look (after we have made this adjustment) at item-2001.php, we can see that this whole file1228

is exactly the same, except for this number up here.1236

And if we look at item-1001, the content is the same except for the 1001 up here.1240

So again, we have another opportunity for code reuse; and so, that is what we are going to do as we move on to1245

the next version of the website, and the last version we are going to go over today, which is version 3.3.1254

What we are going to do is place all of this common text into an include file, and it is going to simplify our website again,1258

because it is going to move content that might be in, in this case, three different pages.1265

And if we want to make a change to it, instead of having to change three pages individually,1270

we simply go and update the include file that we are going to create.1274

Let me close some of these down; and let's go pull up the file for 3.3.1279

In this version, we have the same exact associative array containing all of our items in catalog.php, so that has not changed.1317

Let me close these.1326

store.php is exactly the same as before, except here--we didn't do it on the last one, but--we could actually update this...1328

Actually, we couldn't do the same thing with the itemID, because it references different items in this.1340

So, store.php is going to stay exactly the same; however, item-1001.php, which used to look like this,1346

which has all of this common code here, is now going to be changed to look like this.1357

It has a lot less information in it; and what it is going to do is: it's going to take out the HTML1363

that outputs information about the particular item, and it's going to put it in an include file, and we've created a new include file called itemListing.phtml.1369

It is called .phtml because it contains both HTML and PHP code.1378

We have taken that and removed it there; and then now, on each of our item pages,1383

whereas before we would have this code after the include for the header file, we simply add another include statement for listing .phtml.1388

Now, the itemListing.phtml is going to reference this itemID defined in the beginning of the file.1400

And as we can see here, we use this itemID as we had described it in the last lesson.1409

So, itemID, again, has to be defined before this file is called, so that the variable is available.1414

So now, if we look at the three pages we have for our three products, item-1001, 2001, and 3001--1423

they are exactly the same, except for the item number listed.1430

So again, what that has done is consolidated our code into one spot, so if we want to change something, for example--1436

like...let's say that we want to place the image instead...well, right now, let's take a look at the web app.1443

In version 3.2, which is our last version, for the Baseball Bat, 1001, this is what our product page looks like.1455

We have the baseball bat above the description; and that is the same for the T-shirt and the LCD television; the picture is above the description.1463

Let's say that now we decide we want to actually put the description above the image.1475

What we can do is...now, we go back to our itemListing.phtml page, and what we can do is take this image tag and move it below the description.1480

What that is going to do is: it is going to put the image below the description in every single one of our product pages.1497

So basically, any time we want to change the layout of how the product pages look, we only have to do it in one file, in this one include file.1502

If we save this and we browse to version 3.3, and we go to Cotton Shirt, we can see that the shirt now is below the description.1510

It has done that for every single one of our products.1523

And likewise, if we decide we want to take it back--simply undo the change--make the change in one spot,1529

and it is going to replicate to all of our different pages.1537

And we go back, and things are back the way that they were.1540

So, this is another example of code reuse, using an include file1549

And we are going to continue to use that theme of extracting out redundant code, and putting it in one place,1553

so that you edit it once, and then it has effects throughout different parts of the website--multiple pages at once.1559

It increases the ease of management and your efficiency, because you only have to manage and update one file,1565

instead of maybe...let's say our store had 1,000 products in it; you might have to update 1,000 HTML pages or 1,000 PHP pages.1572

Now we just have to update one, and it reduces the risk of errors,1580

because instead of having a possible 1,000 chances to make an error, you only have one spot to make that error.1584

That ends our discussion for going over the web application--the changes that we are going to make.1592

I just want to also give you a homework challenge for this lesson.1598

Basically, what I would like you to do is: you can download the web application files and the new versions from the Educator.com website.1603

What you should do is go through and look through the web application files,1614

making sure that you understand what changes were made from one version to the next.1617

For one, we went from a numeric array to an associative array, and we went from an associative array to a multidimensional array.1621

Then we changed things to make an include file.1628

Equally important as noticing the changes, I want you to try and understand why the changes were made1632

and how they serve to improve the site--how they improve things,1637

as far as the efficiency and reduction in opportunities for errors, and also just in code readability.1641

And hopefully, that will give you a better idea of the purposes behind why we are making these changes to the web application.1650

That ends today's lesson; thank you for watching.1656