Retrieving Votes for a Color by Ajax
Home
ColorVotes
red
orange
yellow
green
blue
indigo
violet
Total


This demo is a simple MVC design pattern which demonstrates retrieving values through XMLHTTP Requests (Ajax).

This requirement was to retrieve each the votes for each color by an xmlhttp request, and update the view.
Further, to total the votes which have been retrieved on the page without performing an additional xmlhttp request.

The application contains a database of colors, and a database of votes for each color by city. Clicking on a color name will generate an XMLHTTP request to retrieve the total votes for that color from all cities, and update the table. Clicking on "Total" will generate a local total for the votes that are displayed on the page.


The application does not use any framework, it uses pure PHP and javascript classes and libraries. It is composed of:

File NameUse
index.phpa front controller and router
color_controller.phpa controller
color_model.phpa model for the data
color_view.phpa view for the user
json_view.phpa json view for xmlhttp request
colors_dao_pdo_sqlite.phpa DAO for SQLite 3
colors_db.sqlitethe database(SQLite 3)
color_ajax.jsa JS library for XMLHTTP requests
json2.jsMSIE needs this


The database tables behind the scenes are:

The colors table
red
orange
yellow
green
blue
indigo
violet

The votes table
CityColorVotes
anchorageblue10000
anchorageyellow15000
brooklynred100000
brooklynblue250000
detroitred160000
selmayellow15000
selmaviolet5000


This demo is made without the use of frameworks.
That made it a bit more work to complete, but now anyone can download and run it without respect to having either a PHP framework like Codeignitor or a Javascript framework like jQuery.

Most well-formed frameworks today will take care of things like XSS, SQL Injection, CSRF, and user-input validation, so I have not bothered with them in the code for this small application.

Many things might have been quicker to do if I had used a JS framework like jQuery. Its concept of selectors for DOM elements, event binding through delegates, and xmlhttp request functions are very convenient.



Download the source code