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.