Introduction to PHP Web Application Development

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

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

and we are going to be incorporating what we learned in our last lesson on optional function parameters.0007

The new version that we are going to be upgrading to is called version 12.0, and as part of version 12.0,0015

we are going to be making an update to our outputLink function, which we have been using to output HMTL anchor, or <a>, tags.0021

to accept optional parameters for ID and class attributes, which can be used for CSS and Javascript.0031

We are also going to be adding an outputImg function, which is going to be used to output image tags.0039

That is also going to allow optional parameters to be provided that allow you to set the ID and class attributes of the image tag.0046

As mentioned, we are going to have an update to outputLink, which is going to allow for optional parameters, and outputImg,0058

which is going to allow us to image tags.0067

The changes to these functions, and the addition of the outputImg function, are going to happen in outputLIB.php;0070

because they output HTML, they go in our output function library.0076

We are making a small change to config.php, just updating the version number.0082

And then, also, we are going to be updating header.phtml and item.php to make use of this new output image function0086

for outputting, for example, the Educator logo at the top of our page, and then also for outputting the items' images.0096

As mentioned, outputLink has been updated in this version to allow you to optionally provide ID and class attributes0106

that can be included in the HTML anchor tag that outputLink generates.0115

Adding this function to our website is going to demonstrate the use of optional parameters,0123

and it is also, again, going to use the empty construct that we have come across before.0129

This function outputLink is also going to be used to update our outputItemLink function, because, within outputItemLink,0135

we have two links that we output: one for the link to the item's image, and one for the link that is the item's name.0143

And we are going to make use of our new outputLink function, allowing us to reuse that function over,0150

which is one of the points for creating new functions.0157

Let's go take a look at our old version 11.0, and go look at our old outputLink function down at the bottom of outputLIB.php.0161

You can see, the function takes two parameters: a url and a body parameter.0173

And url sets the href attribute of our anchor tag; the body gets set to what will be output as the body of the link on our page.0179

And then, we simply return that string.0190

So, what is going to happen in outputLIB.php, version 12.0: our function is going to change a little bit.0195

We still have the url and body required function parameters, but then we have added two new optional parameters,0205

which, hopefully, you will recognize, because they have assigned default values, which optional parameters are required to have.0212

In this case, we have designed the optional parameter ID and the optional parameter class the value null.0220

What we do in our function now is: we begin building up this anchor tag,0227

this <a> tag that we are going to be returning back to whatever script calls this function.0233

So, we start in the same way we have before, where we set the href attribute equal to the URL provided.0238

Then, what we do is: we test to see if either the ID or class attribute was provided.0247

And we do that using the empty function; and the empty function, as we know,0255

tests whether a variable is equal to null, the empty string, or just doesn't have a value at all.0260

So, if the user doesn't provide either the ID or class parameter to this function when calling it, they will be set to null; so empty is going to return true.0270

Or, if they provide, for example, an empty string, this is going to also return true.0283

And because we are using the NOT operator, it is going to return false; and this if statement won't be executed.0289

If ID is provided (meaning that ID is not empty--it is not equal to null), we are going to go ahead and add to the inside of our still-open <a> tag.0295

We are going to add the ID attribute, and we are going to set its value equal to the value of ID that was passed into the function.0306

We do the same thing down here for the class attribute; we test to see if the class parameter was provided to the function.0314

And if it was, we add the class attribute to our anchor tag and set its value equal to whatever was passed in.0323

Then, down here, we just close the anchor tag's beginning; we output the body of the tag, using the body parameter, just as we had done before.0331

And then, we close the anchor tag and return it to our page.0340

Now that we have done this, what we can do is: if we look up at our outputItemLink function,0346

which we created in our last web application, 11.0, what it is used for is: on our viewCart page (we had better take a look at that)...0353

I made some alterations to the script, which we are going to go over in a second, which is why it is not showing up...0367

If we go and look at the older version, this is what outputItemLink outputs.0370

It outputs this link that is an image, and a link that is the name of the item, and it links to the item's information page--here, for example, item-1001.0382

Well, let's go look at outputItemLink in version 11.0...what it does is creates a link here for the image.0399

It has an anchor tag, and the body of the anchor tag is the image.0408

It also creates a span, and then, within the span, it outputs a link to the item ID.0415

But what we are going to do in our new version of outputItemLink is make use of this updated outputLink function.0421

And the reason for that is: if we look back here, we can see that this second link, the link that is the item's name,0427

actually has a class attribute associated, which we use to perform CSS operations on that link as we format it.0438

So, now that we have an outputLink function that can optionally accept a class attribute,0445

we can go ahead and use our outputLink function to output both this link, and this link up here, as well.0451

So, in our new version, what we can do is go ahead and make use of this new function.0459

And I am going to go ahead and create that.0477

In this first part here, what I am doing is creating outputLink; the first parameter it takes is the url,0492

so this is the URL to item.php for the item ID specified as a parameter to this outputItemLink function.0499

The second parameter is the body of the link; because this is an image, we output the image tag.0510

And the way we had done that before (it would be quicker if I just cut and paste from version 11.0): we have the image tag0520

that we set its source attribute using our SOURCE_DIR constant, and then the name of the image,0536

which is the item ID, followed by the item ID's extension.0544

That is going to be the body of our anchor tag.0548

And we don't actually use either of the optional attributes for this new outputLink function; we don't have an ID or a class attribute that we need to specify.0551

So, we simply close that out...and it looks like I'm going to be missing a closing double quote...0561

And then, if we go down here to where we output a link that is the item's name, and we look back at our old version,0582

it has the optional attribute class specified; and it outputs, as the body, itemName.0592

So, what we can do (actually, I realized I left one thing out here) is: we are going to use the same function that we just updated, outputLink.0598

But we are going to make use of that optional class parameter, which is the third parameter.0614

I'll just copy this, because I keep using it.0619

And the body of the link is going to be the item's name, so we are just going to use the itemName.0630

Now, as we learned when we worked with functions with optional parameters, if you are providing an optional parameter0636

(in this case, we look down--we are providing the class parameter, which is the second optional parameter),0645

we know that when you provide an optional parameter that is later in the list than other optional parameters,0651

and you don't wish to provide those values, you still have to provide values for it.0658

So in this case, we are going to provide a null value for ID when we call this function up here.0663

For our third parameter, we are going to specify null, because we don't want an ID attribute added to this anchor tag.0671

And then, what we are going to do is: we do want to specify the class attribute on this anchor tag, so we are going to...0678

I'll just double-check with it; see, it says "attribute"; it says "class" for this link--it's called itemLink.0686

Now, if we go ahead and look, for example, at viewCart.php, whereas before, when I tried to look at it, it was empty;0704

if we go to viewCart.php, we can see that the links are outputted.0712

And they use that updated outputItemLink function, which makes use of our updated outputLink function.0717

If you go and look at the source here, we can see, for example, for item-1001, it has all the required output.0724

It has the first anchor tag, which is a link to the item-1001 page; it contains in the body the image of the item.0736

And then, here we have our span, which includes our link to the item, that has the name of the item as the body.0746

But as you will notice, the class attribute has been added with the value we specified, which was itemLink,0756

which is why it formats it the way it is supposed to be formatted, using CSS.0763

And if we click on any of these links, it takes you to the item page.0768

And the reason the image isn't here is because we are going to be creating an outputImg function in a minute.0772

And so, we are going to be updating that page, as well.0778

And one thing to note is that, if we look at store.php, which is our homepage (let's just look at it in the code),0784

we have used outputLink before to output the links to the item pages on this store.php page.0801

However, even though we have updated outputLink, we don't actually have to change these function calls at all,0808

because we don't wish to provide any optional parameters, and that is what the point of optional parameters are.0814

You don't need to provide them if you don't need them.0821

So here, because we don't need an ID or a class attribute added to these links,0824

we just don't provide anything, and this function is still going to work the same as it did before.0830

The next function that we will be adding to this version of the web application is called outputImg.0838

What that is going to allow us to do, as mentioned, is to output HTML image tags within our PHP code.0844

The function is going to take one required parameter called imageFile, and what that is going to be is the name of the image file0851

that is going to be used within the source attribute of our image tag.0858

So, that is how our image tag is going to be able to find the image that we want loaded.0863

It is also going to take two optional parameters, corresponding to the possible attributes of an image tag, ID and class, just like our outputLink function.0867

If we need to specify an ID or a class attribute for the image tag0877

for use in CSS purposes or Javascript purpose, we are going to have the option to do that.0881

This function is going to give us practice with using optional parameters again,0887

and it is going to talk about using constants within the local function scope.0892

And that is because we are going to be using the IMAGE_DIR constant within the function.0896

We are going to use this new function to update our outputItemLink, and that is because our itemLink function that we just created0901

outputs a small image of the item, and so we can use this new outputImg function in order to create that HTML.0913

We are also going to update item.php and header.phtml, because item.php outputs the image of the item,0922

and header.phtml outputs the image for the Educator logo at the top of each page.0929

If we go take a look at outputLIB.php, and we look at this new function that we have created, called outputImg,0937

as mentioned, it takes the one required parameter, imageFile, which is going to be used to set the source attribute of our image tag.0945

And then, it is going to have two optional parameters, just as outputLink had.0951

It is going to have ID and class, which are both going to correspond to the ID and class attributes of an HTML tag.0955

Here, the default value, again, is set to null; and then, what we do is: within the function, we build up this image tag.0962

And as part of building up the source attribute, we use our IMAGE_DIR constant, so there is going to be a dependency on the global constant IMAGE_DIR.0969

And then, what we do is append to that the name of the image file that was passed in, in the first required parameter of this function.0977

Then, we optionally add the ID or class attributes to this image tag, if they are provided up here as optional parameters.0985

Down here, we just close the image tag, and then we return this built-up image tag to the calling script.0996

The first place we are going to use that is in our outputItemLink function.1005

In outputItemLink function, the first link that we output, that we make use of, is where we output the image and make that a link.1010

And if you see here, this outputLink function--we included the URL of the item's page.1019

And then, as the body of that link, we have hard-coded the image tag for the image that we want output.1027

What we can do now, instead, is update this function to use our new function, outputImg.1035

And because this doesn't need any optional attributes, ID or class, we can just input the name of the image file to the function.1047

which is just the item ID, followed by a dot, followed by the item's image extension.1060

And so, now we have made use of this outputImg function; and if we go and reload version 12.0 to the page...1071

I left out a parentheses--again, this makes use of what we call function chaining,1083

where you are using the output of one function as an argument to another function.1088

And because both of these functions have parameter lists, and you declare a function with parentheses,1093

you need to close the parentheses for both the inner function that is the argument and the outer function; I left out the parentheses there.1100

I'll go ahead and reload the page; you can see that the image is output.1109

And if we look at the page source (let's pull it up), we can see that, within each of these (let's go to item 1001) first links1114

that outputItemLink generates, we can see that the image tag is generated as part of the body of that first link.1128

And so, it works just as before, but now we have made use of the function.1138

The other spot that we can use this is in item.php, because we output, in item.php, a large image of the item.1148

And if we look at version 11.0 for item.php, we can see that this is the section that outputs all of the information about an item.1156

There is an image tag that outputs the current item's image.1168

And as you can see, it has an ID attribute that is set to itemImage, which is used for CSS to style the size of the image.1173

So, what we can do, now that we have this outputImg function, is: we can replace that in item.php version 12.0.1182

So, what we can do is use our new outputImg function, and just copy the filename here...1191

And, as the first parameter to it, we provide the file name of the image you want to output.1207

Now, if we go back and look at outputImg, we can see that the second parameter is the optional parameter for ID.1220

So, because we want to provide ID, we will go ahead and provide that.1233

We don't want to provide class, and because class is after ID in the parameter list, we don't need to provide everything for it.1236

What we can do is...the value of the item ID we want to set is called the item image.1243

So now, when we go to our item page, we can see that the image is output.1257

And if we look at the page source, we can see that the image tag was successfully generated by our outputImg function.1263

You also see that the optional parameter itemImage that we provided for the ID attribute is output, as well,1276

which is the image is sized and styled the way we specify in our style sheet.1282

One other thing to note is that, in header.phtml, from version 11.0--in that page, that is where we output our image for our logo.1287

And as you can see, in the header row, we have an image tag hard-coded that says to output educator.png image.1299

Well, now we can make use of this new function that we have.1311

And so, in version 12.0, it is replaced with just a call to the outputImg function, and we specify the name of the image, which is educator.png.1313

For today's homework challenge, I just want to make sure that you understand1327

how we are using optional parameters within this updated outputLink function, and also in this new outputImg function,1329

specifically when you are calling these functions with optional parameters, and noting that if you specify1338

a (for example) second optional parameter, but not the first,1345

you still have to provide a value for that first optional parameter.1348

On the other hand, if you are providing only the first optional parameter, you don't need to provide anything for the last optional parameter.1351

So, that is going to give you some practice with that.1357

And just notice how adding optional parameters to these functions has increased the flexibility of these functions,1360

because now we can add CSS attributes--attributes can be used for CSS or Javascript--to our anchor and image tags.1366

So, it makes our application a little bit more flexible--a little bit more robust.1377

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