Design Document

Prepared by Team Aquarius
for a UCI ICS course listings webpage proposed by Professor Michael Carey.

Kyle Chong
Danny Kim
Derek Lyons

March 13, 2011

Release Information

Project: UCI ICS Course Listing Replacement
Revision: 3.0.6
Related Documents:

Revision History

Version 3.0.6
-Added code outline to Low-Level Architecture.
Version 3.0.5
-Updated entity-relationship model and description.
-Updated prototype screenshot.
Version 3.0.4
-Spelling fix on sequence diagrams
Version 3.0.3
-Minor changes to overall sequence diagram
-Updated the “Administrator Sequence Diagram� to include the functionality of importing/exporting Excel spreadsheets
Version 3.0.2
-Created a new overall sequence diagram
-Created sequence diagrams according to Use Cases found in the Software Design Document
Version 3.0.1
-Added column toggle to High Level Architecture's section regarding a user's options after receiving query results.
-Added "Category" to the list of class information viewed in Low-Level Architecture.
-Added "horizontal line" separator to the Results Table description to reflect the sponsor meeting on 2/10/11.
-Added example custom instructor webpage link to Instructor Links in Low-Level Architecture.
Version 3.0.0
-Updated High-Level Architecture with a polished sequence diagram and its description.
Version 2.1.0
-Updated prototype screenshot.
Version 2.0.0
-Updated database EER diagram.
-Added database description.
-Added prototype details.
-Added general sequence diagram.
Version 1.3.0
-Added descriptions to the individual components in Low-Level Architecture.
-Added descriptions to High-Level Architecture.
Version 1.2.0
-Added database schema to Low Level Architecture.
Version 1.1.0
-Added individual components to Low Level Architecture.
Version 1.0.0
-Initial release

Purpose of the Document

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.

Project Scope

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.

High-Level Architecture

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.

  1. The user makes a search of classes that will be offered in Fall 2011. The search is translated into a query by our interface.
  2. Once the database receives the query, it returns a list of courses that correspond to the filter.
  3. The system interface generates the course listings and sends the information to the user's web browser to display the results.
  4. Once the user receives a list of results, they have several options:
    • Enter a search term
    • Sort by columns
    • Toggle column view (enable/disable fall, spring, summer, and summer)
    • Toggle titles
    • View additional information on a course
  5. If a user is an administrator at the Donald Bren School of ICS, he/she may log on to the ICS Course Listings webpage to make modifications to any course listings on the database. The administrator may also import or export course listings in the format of an Excel spreadsheet.

Low-Level Architecture

Individual components:

  • Results Table
    • This holds all results from the user's search parameters. Data is displayed in the following columns: Course, Fall <class year>, Winter <class year>, Spring <class year>, Summer <class year>. Each cell under Fall, Winter, Spring, and Summer will contain a list of instructors teaching the course during that quarter. Every cell will contain a link to either more detailed information (course cells) or the instructor's webpage (F, W, S, Sum cells).
    • Each column will have the same width; determined as follows: Number of columns / result table width = column width.
    • To facilitate readability, every row will alternate between 2 colors (ex: 1st row = green, 2nd row = yellow, etc). Additionally, each column will be separated by a vertical line with each row separated by a horizontal line.
  • Search filters
    • Year: The user will specify which academic year they wish to search. This will consist of the current academic year until more data is obtained.
    • Level: The use will be able to choose between Lower-Division, Upper-Division, and Graduate courses to be displayed in the search results.
    • Department: The user will be able to choose between CompSci, CSE, ICS, Informatics and Statistics to filter their results further.
  • Course Links
    • Each course name will link to a page providing the following details: Title, Level, Units, Prerequisites, Category, and Description.
  • Instructor Links
    • These will link to the instructor's webpage. Default links will be Default links do not need to be valid and can be customized to accommodate an instructor's personal website (ex:

Database Enhanced Entity-Relationship Model:

  • Cores: This table stores relations between courses and a program, indicating that the course is a core requirement of the program.
    • course_id: The course identifier.
    • program: The program that the course is a core requirement of.
    • isGraduate: A boolean that indicates if the core requirement is for the graduate version of the major.
  • Courses: This table stores course information.
    • course_id: The course identifier.
    • department: The department the course belongs to.
    • number: The number of the course.
    • title: The title of the course.
    • description: The description of the course.
    • level: The level of the course.
    • units: The number of units of the course.
    • prerequisites: The list of prerequisites for the course.
    • category: The category the course fulfills for UCI's breadth requirements.
  • Departments: This table stores the departments that courses may belong to.
    • department: The department identifier.
    • name: The full name of the department.
  • Instructors: This table stores instructor information.
    • UCInetID: The UCInetID of the instructor.
    • firstName: The first name of the instructor.
    • middleName: The middle name of the instructor.
    • lastName: The last name of the instructor.
    • url: The url of the instructor's website, if available.
  • Levels: This table stores the levels that a course may belong to.
    • level: The full name of the level ('Lower-Division','Upper-Division','Graduate').
  • Prerequisites: This table stores prerequisites for courses.
    • course_id: The course identifier.
    • prerequisite_group: The group of courses that are equivalent prerequisites.
    • prerequisite_id: The course identifier of the prerequisite course; "0" represents a prerequisite not in the database.
    • other: Text to represent prerequisites that are not courses in the database.
  • Programs: This table stores the programs that courses can be related to as core requirements.
    • program: The program identifier.
    • name: The full name of the program
    • isGraduate: A boolean that indicates if the core requirement is for the graduate version of the major.
  • Quarters: This table stores the quarters in which an instructor may teach a course.
    • quarter: The full name of the quarter ('Fall','Winter','Spring','Summer').
  • Schedule: This table stores relations between courses and instructors, where the quarter field indicates during which quarter the instructor is teaching the course and likewise for the year field.
    • course_id: The course identifier.
    • UCInetID: The UCInetID of the instructor.
    • year: The year of the instruction.
    • quarter: The quarter ('Fall','Winter','Spring','Summer') of the instruction.
    • quantity: The number of times the instructor is teaching the course for the same quarter.

Code Outline:

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.                  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.                               Include that contains common footer html.
FormHandler.class.php                    Class that handles edit_course.php and edit_instructor forms.                Specific includes (javascript, css) for browse_courses.php.            Specific includes (javascript, css) for browse_instructors.php.                          Specific includes (javascript) for edit_*.php.                           Include that contains common header html (Bren ICS header images and such).                       Specific includes (javascript, css) for listing.php.                         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.
datatables.min.js                        Minimized javascript containing ColVis.js and jquery.dataTables.js to save bandwidth.
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

Team Aquarius.