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 continue working on our web application,0004

incorporating some of the information that we learned in our last few lectures on functions and constants.0007

We are going to quickly just talk about some of the things from the last web application version, which is 5.1.0015

And then, we are going to go through three new revisions of the web application.0022

In version 6.0, we are going to be adding a web application configuration file, which is going to include0027

a lot of different constants, which is going to make managing the application easier.0036

In version 6.1, we are going to make use of the constants in order to move our image directory up one level from the directory tree,0042

which is going to make it easier in developing future versions of the application, as you will see.0050

And then, in the third version, 6.2, we are going to be making use of constants and functions to output the date and time0055

that an order was created, as well as doing some sales tax calculations.0067

If we go and look at version 5.1, this is the store as we know it: it has a View Cart function0075

where you can select different quantities, go ahead and check out, and so forth.0084

And when you complete your order and enter in your shipping information, it will say your order was completed.0093

What we are going to do is create a configuration file that is going to make managing all these different pages within here easier.0099

In version 6.0, we are going to create a configuration file called config.php.0106

We are going to store it in the version_6.0 in the includes directory; we are going to create a new file called config.php, and that is where it's stored.0112

And in this file, we are going to do a couple of things: we are mainly going to be defining a bunch of useful constants0121

that we can use in all of the web page, because what is going to happen is: we are going to include this configuration file0127

in all of our web pages, and then we are also going to move the catalog.php include that was in all of the pages,0134

and move it here into this one config file, because this is already being included in all the files, so we can locate all of the includes in one spot.0142

The couple of different constants that we are going to define: the first one we are going to define is a version number.0154

And it is just a string, and what that is used for is: we are going to be creating a constant called IMAGE_DIR,0159

which is going to be the location of the image directory for our web application.0167

We are going to build this IMAGE_DIR constant up from what is called the root URI, which is the base URI, or URL, of our web application.0173

As we know from working with it previously (let me go back to Home), we can see that, for example, for version 5.1,0185

the URI after the host name is intro2php/web_app, and then the version number.0196

That is the root URI for that version of the web application.0203

What we are going to do here is: we are going to create a ROOT_URI constant, and we are going to define it as we do here,0208

except that, for each configuration file, or each version as we update, we are going to update the version number.0215

And that is going to update the root URI, because every root URI has a different URL, because they are stored in a different version folder.0221

Then, we are going to create this IMAGE_DIR constant, which is the root URI.0231

And as we know from what we have done in our previous web application,0235

the images are all stored in a folder called Images in the root directory of the web application.0239

That is what the IMAGE_DIR constant is going to do.0245

Additionally, we are also going to be creating a constant that has a path to the include directory, where we store all of our include files.0248

And in our web application, we store all of the include files in a folder called includes in the base folder of the application directory.0258

What we do is: we create a constant called DOC_ROOT, which makes use of the $_SERVER ['DOCUMENT_ROOT'] variable,0267

which gives you the document root of the entire web server that the script is running on.0276

We are going to append to that the root URI that we created up here.0282

It is going to add to document root the path to the folder of the current version of the web application.0287

And then, we are going to create an INCLUDE_DIR constant that is going to append to this document root,0300

which (the document root) is going to be version-sensitive, because, as up here, we defined...the root URI depends on the version number.0307

And then, what we are going to do is...we have created the document root, and the INCLUDE_DIR is just going to be0319

that document root for this particular version of the web app, which is just going to be an absolute file length.0323

And we are going to add to it the file path includes/, and that is going to say0330

that the include directory is at our web application's document root in the includes directory.0337

Then, we are going to define two constants called HTML_HEADER and HTML_FOOTER.0344

What they are going to do is: instead of having to explicitly, in each of our files,0349

have an include statement that says include/header.phtml, for example, we are going to create that all in one constant.0356

And then, we are going to use that constant in all of our different pages.0364

And what that is going to allow us to do is: let's say we decide to change the name of header.phtml that we want to use for a header file;0367

well, the way we currently have it, we would have to go through every page and update that header.phtml include statement.0375

By creating a constant called HTML_HEADER, which is the path to the include directory, and then the name0382

that we want to use for our HTML header, and by setting that to this constant HTML_HEADER, we can use the HTML_HEADER constant0390

in the include statements in all of our files.0398

So, if we ever need to change what we want to use as our header include file, all we do is update it once in this configuration script,0400

by updating this constant, and all of the different pages will receive the updates.0408

Additionally, at the bottom here, we just have include the catalog, which all of the pages have included normally.0414

But we put it all in this one config file; and catalog.php is located in our include directory.0421

So, if we look previously, for example, at store.php, as mentioned, you can see that we have an include file0429

that has hard-coded into it include/header.phtml.0437

And in every one of the web pages in our previous version of the web, an application has this hard-coded in there.0442

So, if header.phtml changed, you would have to update all of the changes.0448

Now, what we have done in store.php is: at the beginning of each page, we include the new include file config.php0453

that we just created, that defines all of these constants.0461

And now, our include statement changes to just include, followed by the HTML_HEADER constant.0464

So now, any time we update this HTML_HEADER constant, if the header file changes,0470

what we are going to do is: we update all of the include statements in all of our files to use this constant,0478

so that change will get propagated to all of the different files.0482

And also, if you look at the bottom, you can see that we have replaced the include/footer.html with the HTML_FOOTER constant.0486

The other thing that we have done is: because we created the IMAGE_DIR constant, anywhere we have an image...0497

an image tag in the source...for example, in header.phtml is where the image tag for the logo is placed...0507

what we can do is: in the image tag source attribute, we can just specify to output the image directory, or the IMAGE_DIR,0517

which is the image directory for this particular web app version, and then just specify the image name.0529

What that does is: like with using the HTML_HEADER constant, it allows us to change the location of our image directory.0536

We only need to update it in one spot: we update it in our config.php file.0545

And then, because all of the different files that are going to access images are going to use this IMAGE_DIR constant,0550

by making the change in our config file, all of the pages will get updated accordingly.0556

And so, you can see, we have done that here in header.phtml.0561

In item.php, we output the item's image, and so, you can see, we have used the IMAGE_DIR constant here, as well.0565

And then, in viewCart.php, where we output the list of all the items in the store, it outputs a small version of the image.0576

And you can see that you use the IMAGE_DIR constant here.0583

Now, what that does is: if we pull up the older version of item.php, for example, from version 5.1, our last version,0586

we can see that, in our image tag, the images folder was hard-coded into there.0601

Now, that has been replaced with this IMAGE_DIR constant, so that we can update and change the image directory folder, if we choose.0607

Now, that is also going to change how the links appear in our source coding for HTML.0617

So, if we go and look at index...for example, this is version 5.1; if we view the source of this page,0622

we can see that (let's get this up) the source for our image is this hard-coded string, images/educator.png.0630

Well, in our new version in app 6.0, we go to store.php, and we view the source; we can see that the image source0641

has now been updated to this absolute URL, which is specified by IMAGE_DIR.0653

And so, this is output everywhere the IMAGE_DIR constant is used.0659

So now, the URL becomes the full path to the image directory for the version 6.0 web app.0663

And we are basically saying "load educator.png from this image directory."0670

So, this page right here--this slide--shows all of the changes that we had talked about.0686

We created a config file, config.php, that contains a bunch of application-wide constants that we can use in all of our different files.0691

We have done this; we have updated all of our files to use the HTML_HEADER and HTML_FOOTER constants.0699

So, if we need to change the header or footer file, we can do it in one location.0705

And then, we have updated all of our places where we have used image tags to use the IMAGE_DIR constant0710

to find where the images are located.0716

In our next version, version 6.0, we are going to take advantage of this IMAGE_DIR constant.0720

We are going to show how it's beneficial, in that we are going to change the location of the image directory.0726

Now that we have included the IMAGE_DIR constant as the path for all of our image tags, by updating that once in our configuration file,0731

it will update it for all of the different pages that include images.0741

So, if we move the image directory, which is what we are going to do in this particular version of the web application,0744

just by updating the config file, all of the pages will be able to find those images.0750

And what that is going to do is: right now, every time we create a new web application,0755

we are copying the images directory over from one version to the next.0760

for example, in version 5.1, we have all of our files in the folder, and then we have an images directory that contains all of the images.0764

Well, in version 6.0, we have that same image directory with all of those images, and so we are copying them over and over.0772

What we can do is: we copy this directory and move it up one level0779

outside of the version directory, and just create an images file here.0786

Now, we can reference this directory in all future versions of our web application, and we don't have to copy it into each version folder.0790

Now, this is one that saves disk space, but the other thing that it does is:0798

it is also showing us the power of being able to use constants to make these changes.0804

So, if we go to our web app (let's close down some of these pages), and we go to version 6.1,0810

first of all, you will notice that the image directory is no longer here--we moved it up one level.0826

If we look at our includes directory, and we look at catalog.php...I'm sorry, not catalog.php; if we look at config.php,0832

which is our updated config file, you can see that we have updated the IMAGE_DIR constant.0840

So now, instead of being intro2phpwebappversionxxx/images, it's just intro2phpwebapp/images.0845

That will be the same for all future versions of our web application.0854

So, if we go and look at the version 6.0 version of the pages, and we view the source, for example,0860

we can see that the source has been updated so that it uses this new image directory.0873

And if we look at, for example, the source code for the header.phtml page, we can see that, as before,0879

we have included this IMAGE_DIR constant to specify the image directory.0894

And because we updated it in our config file, and the config file is included in all of our pages,0900

this header file will always know where to be able to find the different images.0905

Those are the changes for our version 6.1.0915

The final version we are going to talk about today is moving on to version 6.2.0919

What we are going to do is: we are going to take advantage of what we have learned about constants,0923

and also what we have learned about functions, particularly date functions, to add a little bit of improvement to our web application.0927

First of all, we are going to include a sales tax calculation for the user's shopping cart when they go to check out.0935

And as part of doing that, we are going to introduce the function called round,0942

which you can look up in the PHP Function Reference, which you now know how to use.0947

And we are going to use that to round out our total to two decimal places, because sometimes,0952

when you do math...like we are going to be calculating based on sales tax...you can get some really long decimal numbers.0956

This is going to round it down to two values, which is what dollars are typically shown in.0964

In order to do this, we are going to be adding a constant sales tax rate.0970

That is going to allow us to set the sales tax rate we want to use for all of our calculations in the whole store, and put it in one place.0974

We are also going to be creating a constant called ORDER_DATE_FORMAT.0981

And what that is going to do is: we are going to be adding to our thankYou page a timestamp0984

that says "Thank you for your order; it was completed at this date and time."0991

And we are going to be using the date function for that; and as we learned, for using the date function,0995

we know that the first argument that it takes is a string that specifies the format of how you want the date output.0999

We are going to make that format a constant; we are going to set ORDER_DATE_FORMAT to a string1006

that is equal to the format that we want to use.1013

So, for example, let's say we have the format that just shows the month, the day, and the time that the order was purchased.1016

Well, maybe, in the future, we want to update it so that it includes the year, as well.1024

We can go to our config.php file and update ORDER_DATE_FORMAT, so that the string is this new format that includes the year.1027

And then, that change is made.1035

And in this particular version of the web app, we are only using that order date in one spot,1036

so we could technically just hard-code it in that one spot in thankYou.php.1042

But, if, let's say, we want to use this format in other parts of our web page--maybe we want to output the order creation1048

date and time in other web pages--by creating this constant in the config file, we can then use that formatting in many different spots,1056

and only have to update it in one spot, if we decide to change it.1065

As mentioned, we are going to output on the thankYou page the order creation date and time.1069

We are also going to output what the sales tax rate was that was used to calculate the total.1075

And then, the other thing we are going to do is: we are going to make use of the strtoupper function that we learned about1079

so that the state abbreviation the user enters in the checkout form is always going to be capitalized,1085

because sometimes they might, for example, for California, type ca in lowercase.1090

And to properly format it, we are going to capitalize it to capital CA.1094

Let's go and take a look at some of the code for version 6.2.1100

First, let's look at the config file; and you can see in the config file, one thing we did is: we have updated the version number,1108

so that all of our include URL's will refer to the right version directory.1117

I've also added a section here of miscellaneous application-wide constants.1127

Here is where we define order date format, and this is a string with date formatting constants in it1131

that you can learn about on the date function's web page at the Function Reference at php.net.1142

Also, we have defined a sales tax rate constant; in this case, we are defining it to .1, which is a 10% sales tax.1149

So now, if we go and look at checkout.php...1158

Actually, before we do that, let's go to version 6.2.1166

We'll go to the store; we are going to view the cart; and let's place an order for one of each item; and we go to check out.1171

As you can see, the total has changed from the way it was last time--last time it just outputted the subtotal of all the items.1189

Here, it says, "Your total was 709.48" rounded to two decimal places, and it says "with sales tax."1196

So, we have added to checkout.php sales tax, to our calculation for the total.1202

So, if we go and look back at the new checkout.php, we can see what we have from the other version, version (I guess it would have been) 6.1.1208

And what we have done is: we have updated the variable that used to be called currentTotal to currentSubtotal,1224

because that is often what a total is called before you add sales tax to it.1230

And then, we have updated all of the three operations that add the price and quantity of each item to the subtotal.1234

Basically, we have multiplied the price of each item by the quantity selected and added it up.1245

These are the same operations as before, except they are adding it to the value currentSubtotal.1252

Then, what we are doing here that is new is: we are creating a new variable called currentTotal.1256

which was in the last one, but now it's going to have a different purpose here, because it's going to include the current subtotal, plus any sales tax.1261

The way that we calculate that is: we add to the current subtotal the current subtotal times sales tax rate, which is our constant we defined.1268

So, if we want to ever change the sales tax rate to, let's say, 9.75%, we can update that in our configuration file,1277

and it will get updated here, and this calculation will change.1286

Then, you can see that we have gone ahead and used this new function that we talked about, called round.1292

It takes a float number as its first parameter, and then the number of decimal places you want rounded to is the second parameter.1297

We are going to round this total to two decimal places, because that is what dollar amounts are represented in.1304

And then simply, as before, we are going to output the current total, and then just have a mention that it says "with sales tax."1310

Now, if we go back and proceed with the checkout, notice, I'm going to use lowercase letters here for this date...1320

Scroll down a little bit, and then go to Complete Order, and you will see a couple of things.1343

You can see "your order was completed on___," and we have added the order completion time1348

that shows the date, the time, and the time zone.1353

And we also output, as before, the final total, but we mention that it included sales tax at a rate of 10%.1358

And also, down here, you can see that the user had entered (in this case, I had entered) a lowercase state abbreviation,1364

but to properly output that (we capitalize it), we use the strtoupper function.1370

If we go and look at the thankYou.php page, we can see a couple of changes that were made.1377

First, in the section at the top that outputs information about the order total, you can see that we have used the date function,1390

which by default, if you only specify one parameter, outputs the current date and time1399

(that would be the date and time this order was created).1403

And we are going to format that date according to the ORDER_DATE_FORMAT constant, which we have defined and declared in our config.php file.1406

And so, if we ever wanted to change it, we could go change it in that one spot, and it would propagate here, as well.1415

The other thing that we have done is: we have output a little message that says,1421

"with the final total of" and then we output the order total, "including" and then we do a calculation that outputs the sales tax rate,1427

which is basically...to do it in a percent, we multiply the sales tax rate times 100; and in this case, it's going to output to 10%.1435

The other change we had made was down here in the table that outputs all of the address information.1443

We can see that we have used the strtoupper function to capitalize any state abbreviation that was provided by the user.1451

One thing you will notice is that we have used the concatenation operator here, and that is because of what we had talked about before with functions.1461

Functions can't be included within double-quoted strings, as you can variables;1467

and so, we have to use that to concatenate this value to the city and ZIP code value.1472

And so, this is what our final page looks like; and to give an example of the flexibility this provides,1481

let's say we go back to our config file, and let's say we don't want to output the time zone anymore.1487

So, for example, t is the timezone in the date function format; so if we delete that, and we save it, and we go back to here,1495

right now, we have PDT, which is an abbreviation for Pacific Standard Time, and we update the page.1505

We can see that it has eliminated the time zone identifier.1514

And so, that shows you how...let's say we had used this date formatting in a couple different spots on our website;1518

we just went ahead and updated it in one spot.1522

So, for today's homework challenge, I just want you to, as usual, go through and make sure you can identify and understand1527

the changes that we made in progressing from version 5.1 to version 6.2.1532

In particular, I want you to consider how the changes we made have increased the flexibility and maintainability1537

of the web application, by using constants in a common config file.1546

We have seen how now, for example, with the include statements for our headers,1550

if we ever want to change the header file that we are going to include, we only need to change it in one spot, as opposed to every page.1555

That increases the ease that we can maintain our web applications, because we don't have to update each page individually.1560

Additionally, these constants provide some flexibility, because now we showed how we could move the image directory1568

to whatever directory we wanted to, and by using a constant to define that, we update the new image directory in one spot,1574

and all of the different pages are now able to find the images.1580

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