For more information, please see full course syllabus of Introduction to PHP
For more information, please see full course syllabus of Introduction to PHP
Discussion
Download Lecture Slides
Table of Contents
Transcription
Related Services
Web Application Development
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
- Intro 0:00
- Versions 0:14
- Version 3.0
- Version 3.1
- Version 3.2
- Version 3.3
- Homework Challenge 26:31
- Homework Challenge
Introduction to PHP
Transcription: 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
0 answers
Post by Kitt Parker on December 31, 2014
Brilliant item consolidation. Just took a web design course at my local University and this approach was not mentioned.
0 answers
Post by Shachar A on November 21, 2013
What is the include_once that you have in version 3.3?
0 answers
Post by Guan Yao Ng on June 25, 2012
Hi, I'm upgrading my web pages from html to php as learn from the courses up to now. I found some ? symbol displayed in my new pages which is not the original content.
When I look at the source code, the symbol is made of:
<td>�</td>
But the original html file is:
<td> </td>
When in html page, there is no ? symbol display. Once the page is php, those symbol will come out to replace any space before or after the html code.
May I know how to solve this problem? Here is the pages that I'm talking about: http://www.conceptforall.com/redemption/NSS.php
0 answers
Post by Chudamuni Dahal on June 14, 2012
Very informative! I taught myself basic PHP, but when I started to watch your video, not only did it helped me brush my previous skills, it also made me a better php coder. I am really going to utilize all of your technique and built the base of coding on it.
1 answer
Wed Apr 11, 2012 3:58 PM
Post by David L on March 4, 2012
Why is the training files source code different than the lecture codes? I'm at 15:48 and just noticed that the HTML in the training files are done with div tags and div ID whereas the HTML at 15:48 for the item-1001.php, item-1002.php, etc. files have span tags and paragraph tags. Is the training file newer and more updated?