The Calvin AJAX Blog » Go There!

About CAB and the Advisory Board

The Calvin AJAX Blog is, as the name suggests, a webblog application written at Calvin that makes extensive use of AJAX. Unlike other available web-based blogging applications, CAB contains nearly all functions within the main page itself.

CAB was written for the "AJAX Web Development" course at the Calvin College computer science department during the Interim term, January 2007. It was created by the "CAB Advisory Board", which consisted of Ryan Holt (project lead), David VandeBunte, Jonathan Lovelace, and Brett Pennings.

CAB was written in three parts: the database server, the presentation engine, and the transformation in between. The database server, or back-end, was written primarily in PHP 5 using the MySQL database system, and the presentation engine, or front-end, was written in XHTML and Javascript, while all content served to the user was transformed using two XSLT stylesheets and rendered dynamically. All communication between the front- and back-ends took place asynchronously, never requiring the user to refresh the page. It also took pains to be compatible across platforms as much as possible, neglecting only browsers that do not support the XMLHttpRequest object, XSLT, or Javascript in general.

The Nuts & Bolts of CAB

Our goal for this project was to take a common application, the weblog, and expand its typical application with new techniques. The most significant technique applied to CAB was a new user interface, requiring AJAX, which brings together previously separated back and front end user interfaces. This allows users to view and edit posts without needing to leave one universal page. These ambitions were kept in mind as we implented the technical aspects of our project.

The overall set-up of the CAB site is a back-end PHP server (written in PHP, XML, and mySQL) and database (containing posts, users, and hashing seeds) communicating by AJAX with the HTML front-end. The front-end handles every user interface, such as those for editing, deleting, adding, or viewing posts. Requests from the front-end are filtered through javascript for errors and security hazards before being passed to the back-end of the blog, and responses from the back-end are wrapped in XML.

Front-End The actual HTML page that users see, communicates with the back-end using JavaScript, and is displayed by HTML and CSS. The intial page-load displays a toolbar showing all available options, a login or register option, and a body that contains the five most recent posts. All users have the authority to display all posts, display the five most recent posts, or view the archives. A logged in user also has the opportunity to use the add post, edit post, and delete post functions.

A typical function in the JavaScript front-end receives its necessary parameters from inputed text or depends on the button clicked (and is initialized by onclick attributes that are assigned on page-load). XMLhttpRequest objects are created (in a cross-browser compatible method) and the necessary information is sent to the server asynchronously. For passwords, the information is hashed, seeded, or md5 encrypted. Information received from the server is interpreted by every function through getPost(), which calls transform, that calls an XSL stylesheet to transform XML from the form it is sent in to XHTML. The XHTML is added to the body of the main HTML page.

Back-End The website server is written in PHP, mySQL, and XML. Transactions typically begin with a method receiving its arguments though the POST method from JavaScript. The arguments received from the front-end are used to generate a request to the database in mySQL. After talking with the database, the response table/row is wrapped in XML and sent back to the front-end by the echo command. Notice that all the functions performed by the server are done asynchronously, and the data is sent back in an XMLHttpRequest for immediate use.

Database storage is necessary for user functions and storing posts. The Apache Database used by CAB has three tables, for posts, users, and seeds. The post table stores title, author, body, creation date, and modification date for every post (along with a unique ID). The user table stores email, password, name, and level information on every user (along with a unique ID). The seed table generates random seeds used for hashing passwords to transfer them over networks.

The original design of the CAB site was cleanly implemented using the technology and languages available. The final result is a website that eliminates the need for a back-end and combines the viewing and editing of pages.

Some CAB Screenshots

CAB Screenshot Simplicity is the word that best characterizes CAB's interface. It is clean, clear and intuative, making both reading and posting easy.
Registration Screenshot Registration is just as easy as any other action in CAB. And once a user has filled out the registration form, all they need to do is login - no wait, no reloads.
New Post Screenshot Newly added posts appear instantly in CAB with no page loads or refreshes. The add post form ducks out and the new post fills the space - simple!
Login Screenshot If a user wants to log in all they have to do is click 'Login' and a simple form will pop into view. This kind of interaction is found throughout CAB, where simple tasks are all brought to once interface.
Add Post Screenshot Adding posts is easy with CAB. Once a user is logged in, they can click 'Add Post' to bring up the editor. After they've written their post, they simply click 'Add Post' again and their post is added to the blog.