Professor WebTodd Alexander

Presentation

• Project Overview• Web Technologies Utilized• Design Issues and Criteria• Website Layout• Software Design• Database Design

Project Overview

• This project involved coming up with a solution to the problem of taking files that are simply stored on a drive and presenting them on a webpage.

• In addition students can sign up for presentations (like this one) scheduled by the professor.

Web Technologies Utilized

• PHP 5• XHTML• CSS 2.0• Asynchronous Javascript and XML (Ajax)• Really Simply History (RSH) for Ajax browser navigation• JSON 2007 needed for use with RSH• David Fowler’s Ajax Proxy Library for making tidy Ajax

calls• Epoch calendar: calendar popup control

Design Issues and Criteria

• Issues– Browsers were not designed to work with Ajax

applications hence the use of the back/forward buttons and the ability to bookmark is a major setback of Ajax applications.

• Criteria– Users should be able to navigate around the website

easily.– Signing up for a presentation should take very little

effort.– Users should know where they are at all times.

Website Layout

Software Design

• DataAccess connected to the database and provided an overridden query function.

• Page contains the majority of the implementation code and can be called directly from an Ajax object.

• TabMenu and Search act as controls, which were used independently.

• The Indexer class is responsible for capturing file/directory information and making database updates.

Database Design

Code Hightlights

An example of adding the to the Ajax history and use of the AjaxHistory objectfunction DisplayProjects(){

CurrentTab = 'Projects';dhtmlHistory.add('projects', 'DisplayProjects()');AjaxMethod.DisplayProjects(CurrentCourse, onDisplayProjects);

}

Updating the right panel with the response textfunction onPageUpdate(res){

$('right-panel').innerHTML = res.text;}

Popup display implementationvar bWidth = GetClientWidth();var hHeight = GetClientHeight();

var pWidth = 300; // width of the popupvar pHeight = 250; // height of the popup

$('popup').style.left = (parseInt(bWidth)/2 - pWidth/2) + 'px'; $('popup').style.top = (parseInt(hHeight)/2 - pHeight/2) + 'px';$('popup').className = 'popup_visible';

$('blur').style.width = bWidth + 'px';$('blur').style.height = hHeight + 'px';$('blur').className = 'blur_on';

Code Hightlights Cont’d

Method from the Page class that get’s user information from a TimeID and Timeprivate function GetUserInfo($timeId, $time){

$sql = "SELECT tb.TimeID, tb.UserID, tb.Time, u.Fullname, u.EmailAddressFROM prj_TimeBlocks tbLEFT JOIN prj_Users u ON tb.UserID = u.UserIDWHERE tb.TimeID = $timeId AND tb.Time = '$time'";

$res = $this->query($sql);return mysql_fetch_array($res);

}

Handling the post data sent by Ajaxfunction cleanArgs($csv){

$args = explode(',', $csv);for ($i=0; $i<count($args); ++$i)

$args[$i] = rawurldecode($args[$i]);

return $args;}

if (in_array($function, $allowed))echo call_user_func_array(array($ajax,$function), cleanArgs($params));

elseecho 'Error! Method does not exist';

Improvements

• Adding in functionality that would be beneficial to the average professor

• Integrating it with the tracks system if permitted, in order to verify the authenticity of students signing up.

References

• www.php.net• www.zend.com• RSH Documentation

Questions?