Web Project Assignment 2

CSS Design and PhP Implementation

You may not use any toolkit, IDE, or framework for completing this assignment. I want you to learn how to code html, css, and php without the benefit of a crutch.
In this homework assignment you will accomplish two tasks:
  1. create a mock-up of your web interface.
  2. design the php backend for your web-site.

Mock-up Of Your Web Interface

In this portion of the assignment you will design .html and .css files to implement several portions of your ABET data collection web-site. The web pages you create should look roughly like mine--I have not given you exact dimensions because the idea is to approximate my layout and appearance, not duplicate it down to the last pixel. The names of the .html and .css files I want you to create are in parentheses. Finally the trashcan, person, and caret-down icons that you need for this assignment can be found in /home/bvanderz/cs465/web_project/img. By playing with the CSS filter and background-color attributes you can pretty much match the color of the trash icon in my screenshots.

  1. Login page (login.html, login.css): Create an html file and css stylesheet that approximates the web page shown in this image. It is acceptable for you to use the login.html file I gave you in class. You should move the css commands from the file you submitted to a separate login.css file.

  2. Data collection page (abet.html, abet.css): Create an html file and css stylesheet that approximates the web page shown in these three images: results section, assessment plan section, and narrative summary section. You can use either the flex or grid container layout that you started in class. The three images are all part of the same web page, with the results section first, then the assessment plan section, and finally the narrative summary section. I have slightly overlapped the images so you can get an idea of how the whole page flows. Here are a few requirements for your widgets:
    1. The number widgets being used in the results and assessment plan section are an input html widget of type "number". The ones in the assessment plan section should have a min value of 1 and a max value of 100. The ones in the results section should have a min value of 0 and no max value.
    2. The description of each assessment should be limited to 400 characters.
    3. The strengths, weaknesses, and recommended actions in the narrative summary should each be limited to 2000 characters.
    4. We are not concerned with users being able to interact with your forms in this assignment. They can press on buttons but nothing will happen. You will tie together the web interface with the php backend in your final project assignment.

PHP Backend

In this portion of the assignment you are going to write a number of php scripts that you will use to support the front end in the next homework assignment. Please observe the following constraints on your php scripts:

  1. You will test your php scripts from the command line by invoking them with the php-cgi command. For example: 
      php-cgi -f login.php email='coyote@utk.edu' password='password'
    The -f option tells php-cgi which script to execute and the name=value pairs will be translated into $_GET parameters that your script can access via the $_GET array. When you hand in the scripts in the final assignment you will change some of your submissions to use POST, but for this assignment you must use GET parameters since we will be testing your scripts using automated scripts.

  2. Your scripts should print any output in JSON format.

  3. Use prepared SQL statements to avoid issues associated with malicious attacks and special characters in the input data, like double quotes (") and single quotes (').
  4. In the following description, all $GET parameters to your php scripts are underlined.

You need to write the following .php scripts:

  1. login.php: Print the instructorId, sectionId, courseId, major, semester, and year of all sections taught by an instructor with a given email address and password (remember that you will need to convert the password string to a hash string using MySQL's PASSWORD function). Note that the same sectionId could appear twice in the results because that section might be used to assess both EE and CpE majors or both CS and CpE majors. The results should be ordered by year in descending order and secondarily by semester in ascending order.
  2. outcomes.php: Print the outcomeIds and outcomeDescriptions of all outcomes assessed by a sectionId for a given major. Order the output by outcomeIds.
  3. results.php: Print all outcome results for a given major and outcome that were assessed by sectionId. Print the performance description (e.g., Meets Expectations) and number of students that achieved that performance description. Order the results by performanceLevel. Note that you are printing the performance description, not the performanceLevel, but you are ordering the results by the performance Level.
  4. assessment.php: Print all assessment plans for a given major and outcome that was assessed by sectionId. Print the assessment description and weight. Order the results by weight in descending order and secondarily by assessment description in ascending order.
  5. narrative.php: Print the narrative summary for a given major and outcome that was assessed by sectionId. Print the strengths, weaknesses, and actions.
  6. checkWeight.php: Print the sectionId, instructor email, outcomeId, major, and sum of the weight fields (name it weightTotal) for any outcome whose assessments' weights for that outcome and major do not exactly equal 100. As one example, the sum of the assessment weights for EE majors for outcome 1 in section 7 is 70, so you would print the requested information for this section. Order the results by instructor email in ascending order, then by major in ascending order, and finally by outcome in ascending order.
  7. updateResults.php: Update the results relation with the given sectionId, outcomeId, major, performanceLevel, and numberOfStudents. If this tuple is not yet in the relation, then insert it rather than updating it (you need to figure out what the primary key is). You can use MySQL's INSERT INTO ... ON DUPLICATE KEY UPDATE statement to perform either the insert or update in one statement.
  8. updateAssessment.php: update the Assessments relation with the given assessmentId, sectionId, assessmentDescription, weight, outcomeId, and major. If this tuple is not yet in the relation, then insert it rather than updating it (you need to figure out what the primary key is).
  9. updateNarrative.php: update the Narratives relation with the given sectionId, major, outcomeId, strengths, weaknesses, and actions. If this tuple is not yet in the relation, then insert it rather than updating it (you need to figure out what the primary key is).
  10. deleteAssessment.php: delete the assessment with the given assessmentId.
  11. updatePassword.php: update the password of the instructor with the given email. Make sure that you use MySQL's PASSWORD function to encrypt the password. You may assume that the tuple is already in the relation.

What To Submit

Submit a zipped file with the .html, .css, and .php files specified in this assignment. If you are working with someone, please make only one submission and list the name of the other person in the submission comments.