Ross and Trillane

From MWCSWiki

Jump to: navigation, search

Page Is Unavailable Due To Site Maintenance, Please Visit Reserve Copy Page

<h1>Link to Project Site</h1> Project Website

<h1>Initial Concept Design</h1> Image:Project1.jpg <br /><br /> Bread Crumb Area 

* Initial State : Empty
* Active State : Search Item -> Search Criteria

Course Listing Area 

* Initial State : Empty
* Active State : Valid Search : Show Course Listings
* Active State : Invalid Search : Error Message

Current Classes Area 

* Initial State : No Classes : Empty
* Initial State : Existing Classes : "Registered" Class Listings
* Active : "Registered" Class Listings

<h1>Interactions</h1> Bread crumb area

  • updates (using Javascript) on change to existing form

Course listings area <* updates (using Ajax) on changes to existing form

  • Tooltips (using Ajax) display course information on mouse over
  • Clicking ADD attempts to update current courses (using Ajax) (assuming no scheduling conflicts)
  • If list is too long, overflow adds automatic vertical scrollbars.
  • Perhaps also allow clamshell views on courses (would contain same info as tooltips, except wouldn't disappear on mouse out)

Current course listing area

  • updates from clicking REMOVE (using Ajax)

<h1>Notes</h1>

  • Back end should alert the user when they try to add a course that conflicts with one they have already registered for. Perhaps allow them to auto switch (i.e. drop the existing conflicting class and add the new one)
  • Need a dummy login so we can have meaningful database interaction. I.e. when a user returns, the classes they have already registered for should automatically show up. Perhaps limit logins to ones we prepopulate.
  • back end would be standard mysql, data fetched in Ajax calls would be generated using PHP

<h1>Current Work Schedule</h1> Due Date : Monday 6/2 <br /> Ross 

* <strike>Scrape Class data and import into database</strike>

Trillane 

* <strike>Rip existing class registration page</strike>
* <strike>Add new areas</strike>
* <strike>Add basic ajax functionality (using dummy data)</strike>

Things left to do: 

* <strike>Finish bread crumb area</strike>
* Update query and back end php to allow for complete robust search (Ross)
* <strike>Add rollover icon functionality for additional course information</strike>
** <strike>Need to determine what information we want to show</strike>
* <strike>Make the add button work</strike>
** <strike>Which means allow courses to be added to list, and removed from list</strike>
* Do time conflict checking once add button is working (i'll look into this -Ross)

<h1>Input and Div tag ID's</h1> Subject - select - id=subj_id<br /> Course Number - input text - id=crse_id<br /> Title - input text - id=title_id<br /> Credit Range - input text - id=credit_id_from & id=credit_id_to<br /> Campus - select - id=camp_id<br /> Course Level - select - id=levl_id<br /> Part of Term - select - id=ptrm_id<br /> Instructor - select - id=instr_id<br /> Attribute Type - select - id=attr_id<br /> Start Time - select - id=begin_hh_id & id=begin_mi_id & id=begin_ap_id<br /> End Time - select - id=end_hh_id & id=end_mi_id & id=end_ap_id<br /> Days - checkbox - id=sel_day_mon_id & id=sel_day_tue_id <br /> & id=sel_day_wed_id & id=sel_day_thur_id & id=sel_day_fri_id <br /> & id=sel_day_sat_id & id=sel_day_sun_id <br /><br /> <b>div tags (all by ID)</b><br /> mainBox - holds onto other boxes<br /> selectBox - holds onto existing form elements<br /> ajaxBox - holds onto bread and select boxes<br /> breadBox - bread crumb area<br /> resultBox - holds onto the class listings returned by ajax calls<br />

<h1>Prototype</h1> For the prototype we have implemented the bread crumb feature for the majority of items. We have also scraped the database and currently have the ability to search for classes based on subject. We allow the user to highlight multiple subjects and the program will return results for all highlighted subjects. The Ajax functionality behind this is working, and we are actually making calls to the database which returns the results to the server. The server then serves up an XML document which the javascript on the page parses and displays.

We will be changing the display of the course listings to show only the title of the course, days of the week and times. There will also be an icon (not currently shown in the prototype) that when moused over will give a more detailed description of the course in a "pop up". The add button currently lacks functionality but when fully implemented will add a course for registration, this will be displayed below the current search area as shown in the original concept diagram.

<h1>Prototype Comment Review Paragraph</h1> The majority of comments on the prototype specified that the user wanted more course information available to them. This has been addressed by adding a rollover icon that displays detailed course information for each course. This information is also displayed whenever a user decides to add a course listing to the list of courses that he/she would like to register for. There was one other issue raised that didn't have to do with displaying more information. That particular comment noted that it might be possible to improve the appearance and functionality of the original search form. While we do not think that is a bad idea, we more than likely will not address that particular issue due to the time constraints on this project. We feel that it is best that we focus on getting the new functionality working before revisiting the existing interface.

<h1>Beta Testing Comments</h1>

  1. Confusing Pop up after search -> For Testing, has since been removed
  2. Could add unlimited classes, no checking time conflicts -> The final version will have time checking to prevent multiple classes of the same course and won't allow the adding of different courses that would conflict with courses already chosen.
  3. Search list boxes too small -> Throwback from original (i.e. the school's version). Will change select lists to drop down menus. EDIT -> Learned something new today, a select tag with the multiple attribute will not be displayed as a drop down, regardless of the size attribute. Will look for work around.
  4. Could not search all criteria, as some were disabled. -> The disabled items have not been added to the search query, but will be in the final version.
  5. Concern that entire site is wide and that it may not display properly on monitors with low resolution -> This is a legitimate concern. The width of the current site is approximately 950px. On a monitor with 800x600 resolution this would not display "nicely". Having done some preliminary research the percentage of monitors in use today that support an average of 1024x768 or greater is 86% W3C so I feel comfortable with the current size. Making it any smaller would simply lead to reducing the font-size to an unreadable state for the majority of users.
  6. The search doesn't work in Internet Explorer -> Partially Fixed. IE is not recognizing table structure. Will fix for final release.

<h1>Final Group Information for Ross and Trillane</h1>

  1. http://rosemary.umw.edu/~tburlar/Project/frame.htm
  2. Stated Purpose
    1. The purpose of this site is to facilitate the process of searching for and registering for classes. Students can use the service to find available classes based on a variety of criteria, such as the day of the week it is offered, the instructor, the course level, and the time the class is offered. New searches can be performed in real time using AJAX technology without a page refresh. This allows a user's course worksheet to always remain visible as they are browsing for additional classes to add to their schedule.
  3. Guide to using our site:
    1. Navigate your web browser to our site.
    2. In order to search for a class or classes use the form on the right to select your search criteria.
    3. Once you have selected your search criteria, press either of the search buttons.
    4. If your search returned any results those results will be displayed on the right hand side.
    5. You may search as many times as you like.
    6. You may mouse over the icon to view additional information on that course.
    7. If there is course that you want to register for, press add to add it to your selection. As long as the course doesn't conflict with any of the other courses or give you more than 18 credits it will appear in your course listings at the bottom of the page.
    8. If you decide you don't want to sign up for one of the courses in your list at the bottom of the page, you may click remove to take it off the list.
    9. Once you've chosen the courses you want to take, you can press the register button. In a live application, this would attempt to register you for those classes. In our demo, it just gives you an alert.
  4. MySQL Database Structure 
 CREATE TABLE IF NOT EXISTS `courseATC` (
 `CRN` int(11) NOT NULL,
 `ATC` varchar(10) NOT NULL,
 PRIMARY KEY  (`CRN`,`ATC`)
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

 CREATE TABLE IF NOT EXISTS `courseDayTimes` (
 `id` int(11) NOT NULL auto_increment,
 `CRN` int(11) NOT NULL,
 `Day` varchar(2) NOT NULL,
 `StartTime` time NOT NULL,
 `EndTime` time NOT NULL,
 PRIMARY KEY  (`id`,`CRN`,`Day`)
 ) ENGINE=MyISAM  DEFAULT CHARSET=latin1

 CREATE TABLE IF NOT EXISTS `courses` (
 `CRN` int(11) NOT NULL,
 `Subject` varchar(10) NOT NULL,
 `CourseNumber` varchar(10) NOT NULL,
 `Section` int(11) NOT NULL,
 `CO` enum('0','1') NOT NULL,
 `PRE` enum('0','1') NOT NULL,
 `Building` varchar(10) NOT NULL,
 `Room` varchar(10) NOT NULL,
 `Instructor` varchar(100) NOT NULL,
 `AdditionalRequirements` varchar(100) NOT NULL,
 `Credits` int(11) NOT NULL,
 `Semester` enum('1','5','8') NOT NULL,
 `Year` int(11) NOT NULL,
 `Campus` enum('1','2') NOT NULL default '2',
 PRIMARY KEY  (`CRN`)
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1

 CREATE TABLE IF NOT EXISTS `courseTitles` (
 `Subject` varchar(100) NOT NULL,
 `CourseNumber` varchar(10) NOT NULL,
 `Title` varchar(100) NOT NULL,
 PRIMARY KEY  (`Subject`,`CourseNumber`)
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
  1. Operation Documentation: There is only one visible page for this project, so we will document it by major features.
    1. Main Form: This is a modification of the original form used currently by UMW. Ross and Trillane made numerous changes to the form by eliminating unused search options and modifying the page layout to allow a cleaner and more usable interface. It was implemented using standard HTML
    2. Bread Crumb Area: This feature was implemented by Trillane. It is a list that is dynamically updated whenever the user makes changes to the main form. It is designed to let the user know exactly what he/she is searching for at any given time. It was implemented using JavaScript that triggered on events from the Main Form.
    3. Search Result Area: This feature was implemented by Trillane. It is a table structure that holds the results of the ajax call that triggers on the user clicking the search button. The ajax call is generated by sending the contents of the form back to the server, which returns an xml document that contains the courses that match the search criteria. It was implemented using JavaScript and the HTTPRequestObject.
    4. Class Database: This was created and populated by Ross. It is a database of the course listings at the Stafford and Fredericksburg campuses for the fall of 2008. It is implemented in mySQL and the data was scraped by Ross from the UMW website.
    5. http://rosemary.umw.edu/~rserino/search.php: This the page that the ajax function calls and it was created by Ross. The page takes the parameters passed to it from the ajax call and constructs a SQL query which is then executed on the Class database. It then constructs an xml document which is then passed back to the browser. The script was implemented in PHP.
    6. Current Classes Area: This is feature was implemented by Trillane. This is the area that holds the classes that a user has added from the Search Result Area. It will only allow classes to be added that will not put the users credits over 18 or interfere with the time slot of another class. It also provides a remove button that will remove the class from the table structure. It was implemented using JavaScript.
  2. Source Code Links:
    1. http://rosemary.umw.edu/~rserino/search.php
    2. http://rosemary.umw.edu/~tburlar/Project/files/login.htm
    3. http://rosemary.umw.edu/~tburlar/Project/files/searchMain.js
    4. http://rosemary.umw.edu/~tburlar/Project/files/searchBread.js
    5. http://rosemary.umw.edu/~tburlar/Project/files/searchAjax.js
    6. http://rosemary.umw.edu/~tburlar/Project/files/searchBread.js
  3. Challenges of the Project
    1. The first major challenge was getting the data for the courses. The University does not provide an API to the course data, which left us no choice but to screen scrape the data. We did this using cURL and PHP. We wrote a PHP script that contacts the all course listing for a given semester and pulls the html of the page. Next, the PHP uses regular expression matching to find the data that is needed. That data is then transformed into SQL queries and printed to the screen. The result is a SQL file that can be imported into an SQL database.
    2. The second major challenge was using the existing template from the University's website. We wanted the program to feel like it was part of Eaglelink, so we based our design of the actual search page of course lookup. We soon realized that this left us with a very cramped area for the breadcrumb area and search result area on the right side of the page. The header also occupied a large majority of the site. With some feedback of the beta, we got rid of a majority of the top header and made the search options more easily navigable. We varied slightly from the original web site design, but we feel it was a necessary improvement. We also aimed to support all browser resolutions which left us limiting the size of the search area.
Retrieved from "http://rosemary.umw.edu/mediawiki/index.php/Ross_and_Trillane"
Personal tools