Description

Purpose

• Explore MySQL using PHP
• Upload your website to a Web server

• This lab must be handed in:
Assessment

• This Lab is worth 2% of your total course mark.
Estimated Time

• This Lab is estimated to take 4 hours.

This is only an estimate of the time required to complete this Lab. I would encourage you to work at your own pace and if at all possible obtain a laptop so that you can work on your assignments from anywhere

The following chapters of ‘Fundamentals of Web Development’ will be useful in completing this exercise:

• Chapter 11
Lab Supplies

To complete this lab you will require the following lab supplies:

• Textbook: Fundamentals of Web Development
• EasyPHP, or other WAMP server
• Eclipse, Notepad (or other text editor, or IDE)
• FileZilla (or other FTP client)

Summary of Tasks

1. Gather MySQL Information
2. Understanding your database
3. Develop the logic to display your web application
4. Upload your website to the webserver
5. View your webpage using a web browser
6. Submit Assignment Link on Blackboard
7. Submit Source Code of all PHP files on Blackboard
Task 1

Before we can get started using MySQL on the webserver we need a few pieces of information.

• Host
o The host variable should contain the value “localhost”. o Example: $host = “localhost”;
o NOTE: Localhost is a networking term meaning ‘this computer’

• Username
o The Username to access YOUR database is to be structured as follows:
o Example: $username = “<your-username>_Lab9”;
• Password o The password is any legitimate password you choose
• Database Name
o The name of your database is to be structured as follows: o Example: $database = “<your-username>_Lab9”
Task 2
To create your database, username, password and tables on the Hebergement Web server, please review the following document on Blackboard:

Course Content -> Module 5 – Advanced Web Programming -> Part 2- PHP and
MySQL -> PHP, MySQL CRUD Example-Hebergement.zip ->
Instruction_MySQL_Hebergement.docx
Task 3

Now that we have a database we have to understand the tables inside it. Your database must contain a single table named: Employee

The ‘Employee’ table has the following columns.

• EmployeeId, INT, Primary Key, NOT NULL, AUTO INCREMENT
• FirstName, VARCHAR(50), NULL
• LastName, VARCHAR(50), NULL
• EmailAddress, VARCHAR(255), NULL
• TelephoneNumber, VARCHAR(20), NULL
• SocialInsuranceNumber, VARCHAR(11), NULL
• Password, VARCHAR(50), NULL
Task 4

Before getting started with the following tasks, review the ‘Common Look and Feel’ video provided on Blackboard (under: Course Content → Extra Materials). Using the knowledge gained in these materials, implement the following Design Pattern to create a ‘Common Look and Feel’ to be used on every page of your website.

Your web site will include the following PHP scripts:

• Header.php
• Footer.php
• Menu.php
• CreateAccount.php
• Login.php
• ViewAllEmployees.php

NOTE: CreateAccount.php, Login.php and ViewAllEmployees.php, all must include the Common look and feel implemented in Header.php, Footer.php and Menu.php.

Header.php
Header.php must contain a script to display a Common Header that will appear on every page. The header must contain a banner (images, css, etc).
Footer.php

Footer.php must contain a script to display a Common Footer that will appear on every page. The footer must contain Student Number, First Name, Last Name, and Email Address

Menu.php

Menu.php must contain a script to display a Common Menu to be show on every page.
The menu must contain links to CreateAccount.php, Login.php and
ViewAllEmployees.php

CreateAccount.php

Create a form that will create employee accounts in the ‘Employee’ table of your database.

Details:
1. Use ‘input’ tags to accept the information listed in Task 3. Your form must populate all the columns of the ‘Employee’ table.
2. After the information has been submitted to the database, save each of the values from the form in the Session State.
3. Once the employee data is stored in the Session, automatically redirect the user to ‘ViewAllEmployees.php’

NOTE: EmployeeId is listed as ‘AUTO INCREMENT’ meaning that the database will automatically populate this field.

NOTE: Session_StoreValues.php (posted on Blackboard) has an example of programmatically sending an employee information to another page in your website.

Sample Screenshot for CreateAccount.php is as follows:

Login.php

The form Login.php allows the user to log into your application.

Details:
1. Create a form to accept the employees’s EmailAddress and Password as credentials to your site. Use an SQL Query to determine if the person has an account.
2. If the user has an account, store ALL of their personal information in the Session State and then redirect the user to ‘ViewAllEmployees.php’. Display an error if the user cannot log into the system.

Sample Screenshot for Login.php is as follows:

ViewAllEmployees.php

This page pulls information from both the Session and the Database and displays the information to the user.

Details:

1. If the employee tries to navigate to this page without having logged in – the employee should be redirected to the login page.
2. If the employee has successfully logged into the application and is directed to the page, then display the following information
a. Divide the content of the page into 2 sections (One on top of the other)
b. The top section of the page will display all details of the employee stored in the Session State
c. The bottom section of the page will display a HTML table containing all rows and columns of the ‘Employee’ table of your database. The HTML table must also contain a header row that identifies the column name of the database table.
d. Provide H1 HTML headers so that both sections (Session State Data and Database Data) are clearly marked

NOTE: To verify that an employee has successfully logged in, check for valid information in the Session State. If the Session State does not contain valid information redirect to the login page, otherwise, the user has logged in successfully.

NOTE: The Blackboard file ‘PHP, MySQL CRUD Example-Hebergement.zip’ contains a detailed example of the things you are expected to do in this lab.

Sample Screenshot for ViewAllEmployees.php is as follows:

Task 5

Upload your website to the Web server. Use an FTP client to connect to your Web server.

Once you connect to the webserver using an FTP client, create a directory called ‘/CST8238/Lab9’. Once your course directory has been created navigate to that new directory. Add your PHP files to this location.

We recommend the FTP client Filezilla. The program is provided for free (and open source for those who are interested in such things) by the Mozilla Foundation; the makers of Firefox and Thunderbird.

For more information on using FileZilla please navigate to the following material in
Blackboard: Course Content → Extra Material → FileZilla Guide (Video)
Task 6

View your website using a web browser. Open a web browser and navigate to the following web address:

http://web-server_domain_name/CST8238/Lab9/<filename>

For example, the web address to my page is:

http://profrejaul.com/CST8238/Lab9/index.php

Where ‘profrejaul.com’ is the domain name of the Web server, ‘ /CST8238/Lab9’ is the name of the directory I created in the Web server using FTP client and ‘index.php’ is the web page I created for this lab.
Task 7

Once you have confirmed that your webpage is available online, you are ready to hand in your lab.

To hand in your lab go to Blackboard and navigate to Content → Labs and click on ‘Lab 9 – PHP and MySQL’ link.

Under “Assignment Submission”, in the Submission text box write out the following Information:

• Student Number
• First Name
• Last Name
• The URL, or hyperlink, prepared in Task 5

Under “Assignment Submission”, submit (attach) source code of the following PHP files:
• Header.php
• Footer.php
• CreateAccount.php
• Login.php
• ViewAllEmployees.php

Finally, once the Submission section is complete, click the ‘Submit’ button to send the lab to your professor.

IMPORTANT NOTE:
If the URL, or hyperlink, does not direct the professor to the lab you will receive a ZERO for the lab assignment.

IMPORTANT NOTE: