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 Name | Use |
|---|
| index.php | a front controller and router |
| color_controller.php | a controller |
| color_model.php | a model for the data |
| color_view.php | a view for the user |
| json_view.php | a json view for xmlhttp request |
| colors_dao_pdo_sqlite.php | a DAO for SQLite 3 |
| colors_db.sqlite | the database(SQLite 3) |
| color_ajax.js | a JS library for XMLHTTP requests |
| json2.js | MSIE needs this |
| |
The database tables behind the scenes are:
| The colors table |
|---|
| red |
| orange |
| yellow |
| green |
| blue |
| indigo |
| violet |
| The votes table |
|---|
| City | Color | Votes |
|---|
| anchorage | blue | 10000 |
| anchorage | yellow | 15000 |
| brooklyn | red | 100000 |
| brooklyn | blue | 250000 |
| detroit | red | 160000 |
| selma | yellow | 15000 |
| selma | violet | 5000 |
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
