Prepared by Team Aquarius
for a UCI ICS course listings webpage proposed by Professor Michael Carey.
March 13, 2011
|Project:||UCI ICS Course Listing Replacement|
This document describes the design and architecture of our web application. This document will be used to guide the developers in development, testing, and deployment. The document contains information illustrating the high-level architecture of the system as well as the low-level architecture. The high-level architecture will outline the system as a whole. This architecture will show how the different components are interconnected and how they interact with each other. The low-level architecture will act as a guide for showing the internal processes of the system such as data flow.
A more robust, and informative web page layout is proposed to replace the current layout used by the Bren School of ICS course listings webpage. Our system will redesign the current layout, as well as implementations of several additional features to address the needs of our users. The additional features will comprise of hyperlinks to more information regarding each course such as links to the instructor, course website, and the bookstore to purchase required textbooks. With the addition of these features on a more intuitive and informative layout, the course listings webpage on the Bren School of ICS can make course planning for the users of the system much simpler.
The architecture of our system will consist of a database to house all the course listings information and a web interface that the users will interact with. Users will access three pages: One in which users will choose their filters for their search of course listings, another that will show the results of their search, and third will present more detailed information on a selected course. When the users input their search parameters into our web interface, a single SQL query will return the results of the search.
Web browsers will communicate directly with the web interface by fetching searches executed by the user. Pages sent from our interface will be rendered by the user's web browser.
The following sequence diagram is a general overview of the system flow:
The system sequence diagram describes the passing of information between the user, our interface system, and our course listings database.
Database Enhanced Entity-Relationship Model:
administration.php Index for administrative pages: browse_courses.php, browse_instructors.php, import_schedule.php, export_schedule.php
browse_courses.php Listing of all courses in database with corresponding add, edit, and delete links.
browse_instructors.php Listing of all instructors in database with corresponding add, edit, and delete links.
details.php Page structure for course details page; initializes and uses corresponding Details object.
edit_core.php Page containing form for editing which programs a course is a core requirement of.
edit_course.php Page containing form for editing course records.
edit_instructor.php Page containing form for editing course records.
edit_prerequisite.php Page containing form for editing course prerequisites.
edit_schedule.php Page containing form for editing scheduled instructions of a course.
export.php Export script that generates a spreadsheet based on filters from a form.
export_schedule.php Page containing form for exporting a spreadsheet in administration mode (includes UCInetID in spreadsheet).
import_schedule.php Page containing form for importing a spreadsheet.
index.php Adapted from original entry page on ICS website with appropriate form fields.
kch0ng_ics.sql Database dump of dummy data.
listing.php Page structure for course listing page; initializes and uses corresponding Listing object.
PrerequisitesParser.zip Stop-gap solution we used for populating the prerequisites table of the database.
datatables.css Cascading Style Sheet that defines look and formatting of Datatables-specific structure.
stylesheet.css Cascading Style Sheet that defines look and formatting of the site.
details-close.png Image for closing individual title rows.
details-open.png Image for opening individual title rows.
sort-asc.png Image for sorting columns in ascending order.
sort-desc.png Image for sorting columns in descending order.
Collection.class.php Class that represents a collection.
CoreFormHandler.class.php Class that handles edit_core.php form.
Course.class.php Class that represents a course.
dbconnect.php Database connection details and query.
Details.class.php Class that represents the course details page.
footer.inc Include that contains common footer html.
FormHandler.class.php Class that handles edit_course.php and edit_instructor forms.
header_end.inc Include that contains common header html (Bren ICS header images and such).
header_start.inc Include that contains common header html.
InstructionFormHandler.class.php Class that handles edit_schedule.php form.
Listing.class.php Class that represents the course listing page.
PHPExcel.php Class that represents PHPExcel object; part of PHPExcel package that uses \PHPExcel
PrerequisiteFormHandler.class.php Class that handles edit_prerequisite.php form.
ScheduleParser.class.php Class that handles import_schedule.php form; imports schedule spreadsheet into database.
StringTokenizer.class.php Java-like StringTokenizer class.
auxiliary.js Include with auxiliary functions: open title row, close title row, natural sort.
ColVis.js Handles column hide/show functionality. Minimized as part of datatables.min.js.
jquery.dataTables.js Handles dataTables functionality (sorting, filtering/searching). Minimized as part of datatables.min.js.
There is an evolutionary prototype in place. It uses "dummy" data in that the data is contained in our test database, but the data itself is as correct as possible given our current data sources (e.g. existing database for the original course listing and Bren scheduling spreadsheet). The following is a screenshot of the most recent stable state of the prototype, and the prototype itself is available at http://aquarius.kylechong.com/prototype/.