Lecture Notes - Week 7

Readings

Chapters:
- 19 - Working With Files and Feature Additions to Existing Code

Screencast - Week 7

Outline of Topics

Design Considerations for Adding File Upload Capabilities
Add Field for File Information to Database Table
Create a Folder for Uploaded Image Files
The $_FILES Superglobal Variable
Create Separate Functions for Handling Image File Uploads
Modify Form to Allow File Uploads

Lecture

Design Considerations for Adding File Upload Capabilities

Often we want to add the capability to upload files with a web application. In this case, we want to allow a user to upload an image for a student and for that image to be displayed. We also want to be able to display a thumbnail of the image in the main Student Listing page, along with the capability to upload a different image.

Considering the features listed above, we need to think about what modifications we need to make to the Student Listing application. Here's a list:

Add a field to the studentListing database table for holding the file information.
Create an images/ folder for holding images for students.
Modify addstudent.php so users can upload an image of a student and add it to the student details entry in the database. Also, display the image on the Add a Student page after adding the student. The uploading of an image should be optional as well.
Modify index.php to display a thumbnail image of the student at the beginning of each student row.
Modify studentdetails.php to display the image on the Student Details page to better identify the student.
Modify editstudent.php so that a user can upload a different image of a student (or not) and modify the student details entry in the database.
Modify removestudent.php to show the image on the Remove a Student page to identify the student better.

We'll focus on the first three items in this lecture. Chapter 19 will guide you through the rest of the features for the Movie Listing/Reservation application.

Add Field for File Information to Database Table

We're going to need to store our uploaded image file. We could use the database, however, the database was designed for quick access. If we store large binary data in our database, that could potentially slow down the access time. It is a best practice to store the image file on the server, and store a path to the file in the database.

Let's add a field to our studentListing table in our Student database to hold the file path location of all uploaded image files:

Add a field named image_file right after email:

image_file field:
- Enter image_file under Column name
- Keep the Type as varchar
- Enter 100 for the length

Create a Folder for Uploaded Image Files

Since we know we're going to store the image file on the server, create a folder in the folder your Student Listing application is running and call it images/.

By default the webserver does not have access to your file folders

Note, your web server (Apache) must have privileges to write files into this folder. All applications on a Unix Operating system must have access rights (or privileges) to run. The Apache web server runs as the user www-data. Therefore, since files are getting uploaded using the Apache webserver, you have to grant access to the user www-data to the images/ folder. In the folder where your PHP scripts are (the parent of images/), enter the following commands:

$ cd /var/www/html/StudentListing
$ sudo chgrp www-data images
$ sudo chmod g+w images

The `$_FILES` Superglobal Variable

The ability to upload files is typically done with a form. All the information about and including the file is contained in the $_FILES super global variable. The $_FILES superglobal variable is a two-dimensional associative array. The first dimension is set to the name attribute of the file input element, which is image in this case. PHP sets the second dimension to different attributes about the uploaded file:

Attribute Name	Attribute Meaning	Attribute Value
`$_FILES['image']['name']`	the name of file	marge_simpson.jpg
`$_FILES['image']['type']`	the image type	image/jpg
`$_FILES['image']['size']`	the image size in bytes	21480
`$_FILES['image']['tmp_name']`	the temporary storage location of the file on the server	`/tmp/phpV9CAHI`
`$_FILES['image']['error']`	the error code for the file upload; 0 is good	`0`

Refer to Error Messages Explained in the PHP manual for a complete list file handling errors.

Create Separate Functions for Handling Image File Uploads

It's a good idea to create a separate script and encapsulate the functions we need to handle file operations for our Student Listing Application. Let's create studentlistingfileconstants.php and studentimagefileutil.php for some constants, and handling the file operations.

Modify Form to Allow File Uploads

In order to add file upload capabilities, you have to make to modifiations to a form:

Add a multipart/form-data encryption type to the <form> element.

<form enctype="multipart/form-data"
        class="needs-validation"
        novalidate method="POST"
        action="<?= $_SERVER['PHP_SELF'] ?>">

Add the file input filed to the form.

<form>
    ...
    <input type="file" class="form-control-file"
            id="student_image_file" name="student_image_file">
    ...
</form>

Now let's add file uploading capabilities to our Add a Student (addstudent.php)script.