Employee Performance Review Website

B. Web Application Assignment Details

B(i) - Background information and description

Dunder Mifflin Paper Company, Inc., is a paper supply company with its corporate office in New York and six branches in eastern states of the USA. The CEO of Dunder Mifflin is David Wallace. David Wallace believes that one of the problems facing the company is a lack of accountability of each staff member. To partially address this issue David requests the creation of a web-based Staff Performance Review system that can be used by corporate office to better track staff performance year on year. The Staff Performance Review system will first be trialled in the most dysfunctional, yet somehow most successful, branch in Scranton, Pennsylvania. Michael Scott, the Scranton branch manager and author of Somehow I Manage, does not like technology, and believes that his current system of using post-it notes on his computer monitor is sufficient. However, David Wallace insists that Michael's current system does sometimes [often] result in staff performance reviews becoming lost and there is a lack of ability to be able to accurately track [at all] when reviews are due to be completed and if they have been completed [never]. David believes that these general problems can be rectified by online lodgement of performance review forms which will enable better tracking by staff supervisors. For the web application project in TWA your task is to implement this simple online Staff Performance Review system that supports the Dunder Mifflin Staff Performance Review process. Michael has nicknamed the system Dunder Mifflin Super Snooper.

In this assignment, you will create a web-based application that supports the Dunder Mifflin performance review process. In general, a performance review involves the supervisor of an employee judging the performance of the employee based upon certain criteria. After the review has been completed by the supervisor, the employee that is the subject of the review is able to view it to determine whether they agree with the review. The system will allow employees to view their own reviews (past and present) and for supervisors to carry out performance reviews of staff members they supervise. The system will utilise a MySQL database, performancereview, to store the data associated with each employee and their performance review(s). For this assignment you need to design and implement the PHP web pages that support the required functionality for the performance review system as described in section B(ii). The Performance Review database is described in section B(iii) of this document.

B(ii) - Functional Requirements

Your Web Application must

• be coded using HTML 5, CSS, JavaScript, and PHP as necessary. Note: all five files described below must be PHP files to achieve the server-side functionality.
• provide easy-to-use navigation for the user as described in the following page descriptions.
• provide the following page content and functionality for each page as described.

Employee login page (index.php).

The purpose of this page is to provide a login facility for employees (both supervisors and other staff) that need to use the Dunder Mifflin Staff Performance Review system. No other pages within the system should be accessible unless the employee has successfully logged in first.

Page content and functionality:

The page will:

1. have no direct hypertext links to any other pages of the system

2. include the following two paragraphs:

The Dunder Mifflin performance planning and review process is intended to assist supervisors to review the performance of staff annually and develop agreed performance plans based on workload agreements and the strategic direction of Dunder Mifflin.

The Performance Planning and Review system covers both results (what was accomplished), and behaviours (how those results were achieved). The most important aspect is what will be accomplished in the future and how this will be achieved within a defined period. The process is continually working towards creating improved performance and behaviours that align and contribute to the mission and values of Dunder Mifflin.

3. include a postback login form that contains

• a text box to capture the employee ID
• a password box to capture the employee password
• a submit/log in button.

When the form is submitted by the user the page will need to authenticate the credentials (employee ID and password) as supplied by the user in the login form against the records in the employee table of the database. Make sure that the user input is sanitised.

The page will allow or deny access to the relevant pages depending on the result of authentication as follows:

a. Successful login attempt: Successful authentication should automatically redirect the user to the Choose Performance Review page.

b. Failed login attempt: Unsuccessful authentication should automatically redirect to the login page so that the user may try to login again. An appropriate error message must be displayed to the user if the login attempt fails. The message display must be implemented using appropriate PHP server-side code; it is not to be a JavaScript alert (or any other browser side component). The message should be displayed in an appropriate location on the login page in a suitable colour.

Note on Employee Login Credentials:

The passwords that are stored in the employee table of the database are encrypted using the sha256 algorithm (the passwords are not salted - to decrease the complexity of implementation). A list of employee employee IDs and (plain text decrypted) passwords can be found in User Credentials in appendix 3.

Choose Performance Review Page (chooseReview.php)

The purpose of this page is to allow the logged-in employee to choose a performance review that they wish to view. The content of the page will be slightly different depending on the type of employee that is logged in (ie, whether they are a supervisor or not); the differences are described below. The page will list performance reviews from the database for the logged-in employee. The performance reviews may be either completed or current (ie, not completed). The logged-in employee will be able to choose a performance review to either process (for current reviews) or view (for completed reviews).

General content that must be displayed on this page:

• Navigation to the other pages of the system as appropriate including a Log Off link (this link must run the logoff.php page).
• current server date
• logged-in user's name

Content that must be displayed on this page for all logged-in employees:

The first section of the page will list all the performance reviews that exist in the database that are about the logged-in employee. To do this display the year of review and the date completed for each performance review of the logged-in employee. Display this data in reverse order of the year of review so that the most recent year is listed at the top. Each year of review is to be a hypertext link to the View Performance Review page. When clicked, the link must pass the review id of the review to the View Performance Review page.

Note 1: from the way that the list is displayed it must be clear to the user which performance reviews are completed and which are still current. This will make it easier for the user to decide which performance review they wish to view.

Note 2: viewing of a performance review does not occur on this page but on the View Performance Review page.

Content that must be displayed on this page for a logged-in employee that is a supervisor:

The second section of the page will only be displayed if the logged-in employee is a supervisor. This section will display summary details of all performance reviews of employees in the database for whom the logged-in employee is the supervisor.

For each performance review that belongs to this logged-in supervisor display the Employee's Surname, Employees Firstname, year of review, review id, employee id, completed status, and date completed. Each Employees Surname is to be a hypertext link to the View Performance Review page. When clicked, the link must pass the review id of the review to the View Performance Review page.

Notes 1 and 2 above also apply to this output data.

Note 3: this section of output should be displayed in two parts/sections/groups. Firstly, list the reviews that are current (not yet completed). Secondly, list those that have been completed. Within each of these groups display the lists in reverse order of review year. The user will then be able to find the performance review more easily they wish to view.

This page must only be accessible by a logged-in user. If a user tries to access this page and they are not logged in, they must be automatically redirected to the logoff.php page (which redirects to the login page) and then display an appropriate error message on the login page indicating that the error has occurred.

View Performance Review page (viewReview.php).

The purpose of this page is to display a single performance review that was chosen by the logged-in employee on the Choose Performance Review page. Both completed and current performance reviews can be displayed on this page but the way they are displayed is slightly different. The choice of performance review to display is made by the logged-in employee on the Choose Performance Review Page (described above). Completed performance reviews cannot be modified by the logged-in employee. Current (ie, not completed) performance reviews can be accepted by the employee on this page (see verification section below).

General content that must be displayed on this page:

• Navigation to the other pages of the system as appropriate including a Log Off link (this link must run the logoff.php page).
• current server date
• logged-in user's name

Content that must be displayed on this page for the chosen performance review:

a) Employee information section: Employee ID, Surname, First name, Employment mode, Review Year

b) Ratings Information section: the rating for each criteria: Job Knowledge, Work Quality, Initiative, Communication, Dependability

c) Evaluation section: Additional Comments, date that the review was completed.

d) Verification section (this section is only displayed if the chosen performance review is current. This section is a small postback form. The data in point ii below can be changed by the user):

i. Display the following two paragraphs:

Thank you for taking part in your Dunder Mifflin Performance Review. This review is an important aspect of the development of our organisation and its profits and of you as a valued employee.

By electronically signing this form, you confirm that you have discussed this review in detail with your supervisor. The fine print: Signing this form does not necessarily indicate that you agree with this evaluation.

ii. an appropriate input device that enables the employee to agree with/accept the above statement,

iii. a Submit button.

Submission of form

The form must use postback (ie, submit to the same page). The form can be submitted by clicking the Submit button. The Submit button updates the acceptance of the performance review by the employee in the database.

This page must only be accessible by a logged-in user. If a user tries to access this page and they are not logged in they must be automatically redirected to the logoff.php page (which redirects to the login page) and then display an appropriate error message on the login page indicating that the error has occurred.

Create Performance Review page (createReview.php).

The purpose of this page is to enable a supervisor to create and edit a performance review about a staff member that they supervise. Only supervisors are allowed to access this page. On this page the supervisor will choose the staff member they wish to create the review for and the year of review. After doing so the supervisor will be able to create a new performance review for the employee by entering data into a second form. Note that not all values in the second form are allowed to be changed by the supervisor - read the information below carefully.

General content that must be displayed on this page:

• Navigation to the other pages of the system as appropriate including a Log Off link (this link must run the logoff.php page).
• current server date
• logged-in user's name

Initial page content:

The page needs a postback form that contains

a) an appropriate input device to choose the employee for whom the performance review is to be created

b) an appropriate input device to enter the year of review

c) a submit button

Validation of user input on first form

Client-side input validation using JavaScript should be implemented as follows:

a) Both inputs are mandatory fields.

b) The year of review must be a number in the range 2022 to 2030

Note 1: Error messages due to the above client-side validation must be DOM notifications (ie, no alert boxes are to be used).

Secondary page content:

When the first form is successfully submitted a second postback form is to be displayed that contains information about the chosen employee. The form will need to contain:

a) Employee information section (the data in this section is retrieved from the database and is not allowed to be changed by the user): Employee ID, Surname, First Name, Job Title, Department Name, Review Year

b) Ratings Information section (the data in this section can be changed by the supervisor): Ratings for: Job Knowledge, Work Quality, Initiative, Communication, Dependability.

c) Evaluation section (the data in this section can be changed by the supervisor): Additional comments

d) Verification section (the data in i below can be changed by the supervisor):

i. an appropriate input device that enables the supervisor to indicate that the review is complete,

ii. a Save Review (Submit) button.

Validation of user input on second form

Client-side input validation using JavaScript should be implemented as follows:

c) Each rating must be a number in the range 1 to 5. Not mandatory field.

Note 2: Error messages due to the above client-side validation must be DOM notifications (ie, no alert boxes are to be used).

Server-side input validation using PHP should be implemented as follows:

a) Each rating must be a number in the range 1 to 5. Not mandatory field.

b) Additional Comments for employee may only contain alphanumeric ["0" to 9, a to z, A to Z] characters, spaces [ ], hyphens [-], commas [,], period [.] and exclamation marks [!]. Not mandatory field.

c) All form data must be sanitised

Note 3: Error messages due to the above server-side validation must be DOM notifications (ie, no alert boxes are to be used).

Note 4: the database must not be updated if there is an error with the user input.

Submission of second form

The form must use postback. The form should only be allowed to submit when all data in the form is valid (according to the above client-side validation rules). The form can be submitted by clicking the Save Review button. The Save Review button enables the supervisor to enter data in the performance review and save it into the database for later editing. If the form data is valid then insert it into the database as a new performance review and display a message indicating that the performance review has been created on the current date, by the logged-in supervisor.

This page must only be accessible by a logged-in user. If a user tries to access this page and they are not logged in, they must be automatically redirected to the logoff.php page (which redirects to the login page) and then display an appropriate error message on the login page indicating that the error has occurred.

Logoff page (logoff.php).

The purpose of this page is to log the user off the system and automatically return them to the login page. The page must not display anything to the user. The page should remove all session variables and end the session (if sessions were used). It should then redirect to the login page. This page can be accessed from any of the pages as detailed above.

B(iii) - Database Description

1. Tables in the performancereview database are described in the Data Dictionary in appendix 1.

2. You have been provided with your own copy of the performancereview database on the TWA server. To access this database, you need to use a username and password. Details on how to connect to your copy of the database are in appendix 2.

3. The tables within the performancereview database have already been populated with some data. Use the allTables.php script to view the data (make sure you use the connection information as indicated above). This script is found in the project zip file.

4. A list of usernames and [plain text decrypted] passwords can be found in User Credentials in appendix 3.

B(iv) - HTML, CSS, JavaScript, and PHP files

All page styling is to be achieved using CSS. Create a CSS file called projectMaster.css. Add your CSS rules to this file. You may create additional CSS files if you wish.

Some functionality in the web site will need to be achieved using JavaScript (eg, the client-side validation). Create a JS file called projectScript.js. Add your JavaScript to this file. You may create additional JavaScript files if you wish.

All pages listed in section B(ii) will need to be PHP files to achieve the required server-side functionality. Additional PHP and HTML files may also be created as part of your solution if desired if doing so does not contradict/negate the stated page requirements.

Appendices

Appendix 1 - Performance Review Data Dictionary

The performancereview database consists of 4 tables. Each table is described below. Primary and foreign keys are also indicated. A description of how to connect to your copy of the database is given at the end of the document.

Table Name: employee

This table provides details about employees that can access the system including their login credentials (employee_id and password) and their personal details which are used in performance reviews.

Note: passwords are encrypted using the sha256 algorithm. For testing purposes, a copy of the plain text passwords is given in the User Credentials document.

Your database credentials only have Select privileges for this table.

Table Name: department

This table identifies the departments that exist in Dunder Mifflin and the head of department (the head of department is also the supervisor for the department) for each department.

Your database credentials only have Select privileges for this table.

Table Name: review

This table gives details of an employee's performance review for a particular year.

Your database credentials have Select, Insert and Update privileges for this table.

Table Name: job

This table provides details about the job that each employee can undertake at Dunder Mifflin.

Your database credentials only have Select privileges for this table.

Appendix 3 - User Credentials for Performance Review web application

User Credentials for Dunder Mifflin Staff Performance Review system.

The passwords stored in the password field of the employee table are encrypted using the sha256 algorithm. Below are the plain text passwords for these users.