(35 points)

Note: While you have a little more time to work on this assignment, there will be additional assignments at the same time. Use your time wisely, and don't wait until the last minute to work on this.

Build a web front-end and back-end for the student-course database we started in class. The main index.html should contain the items below that users click on to get information.

  1. View student info: show information for all of the students stored in the system. (This should provide: Student Name [first and last], Email, and Registration Date.)
  2. View course info: show all of the course information. (This should provide: Department, Number, and Title.)
  3. View student/course info by student: display a table of each student/course registration ordered by the student's last name. Include the final grade, first name, last name, department and course, year, and semester. (This should provide: Student Name [first and last], Department, Number, Semester, Year, and Grade.)
  4. View student/course info by department/course: the same as the previous, but ordered by the department and then the course number within the department.

Each feature in your website should generate a nicely formatted table. Clicking on the heading for any column should allow the table to be sorted in ascending order on that column. Clicking on the same column again should cause the table to sort in descending order on that column. Every subsequent click should toggle the sorting order.

Your web front-end should make AJAX requests to PHP server code to display the required tables. While working on the front-end, you can create stubs for the server back-end. For example, you could create individual JSON files with the information to fill out the tables. Once your front-end is developed, you can then write the server code to replace the stubs. This is a fairly common practice when you are building larger sites, so it's worthwhile gaining some experience developing in this manner.

Requirements:

  1. All of your pages (you can even do this with one page!) should look consistent with the same header and footer.
  2. The tables, headers, and footer should all be nicely styled and display well on mobile devices. While not required, use of the Bootstrap theme is strongly encouraged.
  3. Your database must contain:
    • At least five (5) students.
    • At least three (3) departments.
    • At least three (3) courses per department
    • At least thirty (30) grades.
  4. Supply a createdb.php file linked from your index.html page that is capable of creating the needed tables and inserting the data. A database named hw4 will be provided for you on the grading server. Note that the purpose of this script is just to populate the database; it's sole purpose is for getting your data to the grading server.
  5. Use functions, classes, and the MVC architecture where appropriate in your PHP code. Your view should not contain data and your model should not generate HTML/JSON.
  6. Make use of objects and private member variables (closures) in your JavaScript code. You should have an object that handles AJAX communication/collection of data from the server back-end. Register callbacks with your user interface to interact with this object.
  7. Reduce code duplication in your HTML, CSS, and PHP as much as possible.
  8. Your PHP and JavaScript should be neat, clean, and commented. Each file should have your name and date, and each class and function should be commented with what it does. Additionally, functions should be commented with any preconditions and description of its parameters.
  9. Submit supporting files as described below. In the readme file for this assignment, you will be asked to answer a few questions.

Grading

What to submit

In addition to the files required by the parts above (at least 1 HTML file and 2 PHP files [you definitely want more than that for a full grade!] and supporting resources), submit a text file named references.txt. In this file, provide a citation for each resource you used (excluding class notes, and assigned readings) to complete the assignment. For example, if you found a Stack Overflow answer helpful, provide a link to it. Additionally, provide a brief description of how the resource helped you. Your file should look something akin to:

uvaid: mst3k

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
Helped me to use a glyphicon correctly.

Also provide a readme.txt file that includes your UVA computing ID and directions identifying which files are associated with each part of the assignment. Additionally respond to the following prompts:

  1. Approximately how long did this assignment take you? Was there a particular aspect of this assignment you found challenging?
  2. What was the approach you used for sorting table columns?
  3. Describe the design decisions you made for this project. For example, how did you lay out your MVC architecture? How did you structure your queries? This portion of the response should be at least 250 words long.

Your readme should have a format similar to:

uvaid: mst3k

Homework 4

index.html -> this is the main User Interface

server.php -> this is the main php file for the back-end

Additional resources include: view.php, model.php, ...

Answers to questions

Make a zip archive named with your UVA computing ID and "hw4" that includes all of the required files (zip -r [zipfile.zip] [directory_to_zip]). Upload this to the submission website.

Remember, you may upload your submission multiple times. Try this before the deadline so that there is time to recover from any technical difficulties.