Advanced PHP Web Application Development

Hello again, and welcome back to Educator.com's Advanced PHP with MySQL course.0000

In today's lesson, we are going to be continuing development of our web application.0005

In particular, we are going to be adding a new version called version 4.0.0011

And the main feature we are going to be adding is allowing...when we add an item to the store on our admin website,0014

we are going to allow the user to upload an item image file along with the form.0023

As you saw in our last example of the web application (our last web development lesson), if we look at our old admin site,0029

and we go to add an item to the store, it adds the item to the store.0038

However, when we go to view it, it doesn't actually have an image for it.0057

And these are the two items we added from the last time we did the web application lesson.0064

And so, we are going to fix that problem today; we are going to allow you to upload an image.0070

And we are going to make use of what we learned in our last lesson about file uploads using the HTTP POST method.0074

What we need to do is alter addItem.php, which is our admin form that allows us to add a new item to the store.0083

Specifically, we need to change the encoding type of that form.0091

It's a POST form; we need to change it to multipart/form-data, because as we learned in our last lesson,0096

when you are doing file uploads, you need to set the encoding type to that value.0101

We are going to add a file input tag, which we are going to be using to have that input element to upload an image file.0106

And then, what we are also going to do is remove the image file extension dropdown box, where we can pick GIF, JPEG, or PNG,0113

because what we are going to do is: now that we are uploading the file, we are going to write it into our code0120

so that it is going to be able to dynamically figure out what the extension of that image file is.0124

If we look at addItem.php, and we look at the new version of it down in our form, we can see that we have added0130

this enctype attribute and set it to multipart/form-data, and then we have also added a file input tag.0139

And we are setting the name of it equal to itemImage.0152

And we have gotten rid of that image file extension dropdown menu.0156

In order to upload an image for a new item to the file, what we are going to be doing is updating our insertItem function,0166

which, in our last lesson, we saw added a new file to our items.txt file, and also update the lastAdded.txt file.0174

But we are going to alter this, so that it is going to be able to handle the image file upload.0182

And we are going to do that by providing information to it that is provided from the FILES superglobal that PHP provides for us.0187

For example, if we look at our new addItem.php script, we can see, at the beginning here,0195

that we have added a new line for processing form variables that is going to test if a file input element was submitted0202

that was named itemImage, which was the name that we gave to our file input element on this form.0213

And if so, it is going to return the associative array associated with that file upload,0218

which, as we saw in our last lesson, contains things like the name, the temporary location of the file, how big it is, content type, and so forth.0224

And if not, we are going to set it equal to null--sort of the same thing we do for processing all of our form variables.0230

And then, what we are going to do is: if we look at our old data processing section of addItem.php,0238

we can see that our insertItem function just took an associative array containing the information submitted on the form for that new item.0246

Well, in our new version, because we are uploading an image, insertItem is going to take that same new item information,0255

but it is also going to provide to insertItem a copy of the information provided in the FILES array.0262

And in order to use this updated insertItem function, we are going to be creating a couple of helper functions.0273

One is called getFileExtension, and what that is going to do is: we are going to use that to extract0281

the extension of the image file that was uploaded.0287

So, as before we had a dropdown box where we would select the extension of the image file;0290

now we are going to create this helper function in utilLIB.php that is going to,0294

from the name of the file that was uploaded, be able to figure out what its extension is.0298

We are going to create a helper function called moveUploadedFile, which is going to take the process of moving0302

the item's image that was temporarily uploaded to our tmp directory, and moving it into the item images directory in our web application.0310

And one thing to note, that we are going to go over, is: in the getFileExtension method, we are going to be using a new PHP function called pathinfo.0320

Let's take a look at our new insertItem method.0330

And as we can see, it takes two parameters now: it takes an associative array with information about the new item,0341

and then it also takes a copy of that information in the FILES superglobal for a particular image that was uploaded.0348

The beginning is basically the same: we are getting the new item ID for this particular item.0357

But then, what we are also going to do is supply to this getFileExtension function the value associated with the name key in the FILES superglobal.0365

So, for example, for our itemImage uploaded file, we are going to get the name of that, which is the name of that file0380

on the client machine where it was updated from; for example, if we are updating baseball.gif, then what we are going to be doing0389

is supplying to getFileExtension that name, baseball.gif; and then, we are going to be setting the associative array associated with our item;0398

we are going to set the image file extension key equal to that extension.0407

We take a look at getFileExtension: what it does is takes the file name that we are providing it, which is going to be0413

something like baseball.gif, basketball.gif, whatever; and we are going to use this pathinfo function provided by PHP.0419

What pathinfo does is takes in a file, or a path to a file, and then returns an associative array of information about that particular file.0429

Specifically, it provides a couple of keys, like the dirname (the directory name of the file), the name of the file,0440

and what we are most interested in: the extension of the file.0448

What this is going to do is return an array of information about that particular file.0455

And then, we are going to test and see if an extension key exists in that array (which it will for an image file we have uploaded).0459

And if so, it is going to set our file extension equal to that.0469

And then, this is just some conditional text to return the file extension, if it existed.0472

So now, this first thing we have done is: we have set the file extension for our particular item, using this getFileExtension helper function.0482

The next thing we are going to do is move that uploaded image from the temporary directory into our application's image directory.0493

We are going to make use of this new function I created, called move_uploaded_image.0500

And what that does is: it is going to take two parameters.0505

The first one is going to be the absolute path to the temporarily uploaded file.0510

And, as we learned in our lesson on file uploads, that is contained under the tmp name key in our FILES array for our particular uploaded image.0516

And then, it also takes what we want to rename the file to.0529

And this move_uploaded_image is going to know the directory where to store the file, but we need to provide it the file name.0533

So, what we are going to do, as we have been doing for all of our items, is: the name of the item's image is just going to be the item's ID.0538

In this case, it is the new item ID, followed by the image file extension that was returned from getFileExtension.0545

If we go to our move_uploaded_image function, we can see that it takes two parameters:0555

the source path (which is the path to the temporary uploaded file),0562

and then the destination name (which is the name we want to give to this item's image file).0567

Now, move_uploaded_file is the function provided by PHP that we talked about.0573

And what it does is takes two absolute paths: it takes the absolute path to the temporary file0578

and the absolute path to the destination file where you are going to move the file to.0582

Instead of just providing the name of the file, we also have to provide the location of it.0591

And so here, we are creating a variable called destPath, which uses the SERVER root, along with our IMAGE_DIR constant0595

to set the path of the image directory, and then append to that the name that we provide for our item image.0606

This is going to be a path that is going to point to the image directory,0618

and it is going to have the file name being 1007.jpg, for example, if an item 1007 was added.0622

Then, we just go ahead and call the move_uploaded_file; it will move it to the image directory and return true or false on whether that was successful or not.0631

After we have done that--we moved the uploaded image--the rest of this function is the same.0640

It goes ahead and updates our items.txt file with all the information about the new item.0646

For example, it is going to add a new row to this file.0653

It is going to update our lastAdded.txt file with the item number of the new item that we have added.0655

The difference is in the beginning, where it is going to extract the file extension of the file we uploaded, and then also move that file.0663

If we go and try out our new version of this admin site, version 4.0...let's create a new item and call it Basketball #2.0671

And then, we are going to browse to a basketball image; we actually already have an image...0688

Well, actually, let's do a baseball bat; and I am just pulling this image from our current images directory, because we already have that.0700

Let's call it Bat #2.0708

So now, when we click Add Item, it is going to add the item to our items.txt file--add all the information about it.0715

It is also going to move this baseball bat image into our items directory.0722

So, if we go to addItem, it is going to say the item was successfully added; it was assigned item 1007.0727

If we go and look at a version of the store, and we click on View Cart, all the way at the bottom,0733

we can see our new item, and now it actually has an image that we can click on--0738

whereas, in our previous version of the web app, we didn't have an item image.0741

So now, we have gone and are able to upload an image.0746

If we click on it, it goes to the item.php page, and it works just as well--it is able to pull that image out.0749

If we go and look at our images directory in version 4.0, we can see that we have created a file called item-1007.gif,0757

which is a copy of that baseball bat image that we uploaded.0766

We can see that it is appropriately named: it is item-1007, which is the ID of that new item.0770

And it has the appropriate extension, which is .gif, because the image that we uploaded was a GIF file.0775

And so, our code was able to extract that from the file.0779

One other small change we made to this version of the web app is: we also updated the isValidItem function,0785

which validates that data that is submitted on our addItem form.0794

And we updated it so that it would also check and make sure there were no errors in uploading the image file for our item.0799

If we go and look at (and this is in our utilLIB file) isValidItem, we can see that now it takes two parameters.0807

And if we go back and look at addItem.php, we can see that we pass isValidItem not only the information0817

in the associative array about the new item, but also that item image data that is taken from the FILES superglobal.0830

And this is opposed to our last version, where we just passed it non-image information about the file.0836

In our new isValidItem, we take two parameters, the second one being information about the image data file.0847

We just have a test here to make sure that both of them are not null.0853

We have the same test for the non-image information that we provided.0856

We just test that the name, price, and description are all provided, that the name and description are strings, and that price is numeric.0861

We have also removed the test to make sure that the image file extension was a string,0868

because we are automatically pulling that on our own; it is not being supplied anymore.0875

If we go and look at our last version of this function, we can see that it tested to see that the image file extension was a string.0880

But we are not providing that on the form anymore, so we don't include that as part of our test.0890

And then, what we have done is added a test called imageTest that just tests0894

that the error key that is set in the FILES superglobal for our uploaded image is equal to 0.0898

As we learned, 0 means that there was no error in uploading the file.0908

And then, assuming that all of these tests pass, our item is valid.0912

And so, that is the validation we have added for this addItem.php form.0919

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