Build an Advanced “Poll” jQuery Plugin

In this tutorial we’re going to be creating a jQuery plugin from start to finish; this plugin will allow us (or other developers) to easily add a simple poll widget to a web page or blog. By poll widget, I mean an area in which a question is posed which visitors are encouraged to answer. Once they have answered the question the results of the poll will then be displayed.

Final Product

The above video and below screenshot shows what we'’ll be working towards:

The plugin will use jQuery goodness to generate the DOM structure of the widget, as well as capture the answer to the question and pass it to the server for storage. We’ll use a little basic PHP to add the newest vote to a MySQL database and then echo back the new results in a JSON object. jQuery will then be used to process the response and display the results (as shown above) in the widget.

Although installing and configuring a web server, PHP and MySQL is beyond the scope of this tutorial, we will be looking at all of the steps needed including setting up the database. All in all, we’ll be working with CSS, HTML, jQuery, PHP, MySQL and JSON during the course of this tutorial.

Prep Work

We should set up our development area first of all. To run this example on a desktop computer (for development, testing etc) we’ll need to run the example files from a directory our web server can serve content from. I use Apache and have a folder setup on my C drive called apache site. This is the content-serving directory for my localhost. Within this folder (or the equivalent folder on your system) we should create a new folder called poll. This is where all of our example files will be stored.

To create a jQuery plugin, we’re also going to need a copy of jQuery itself; the latest version is 1.31.js and can be found at http://jquery.com. Download it to the poll directory we just created. So far the folder should look like this in Explorer (or equivalent file explorer application):

Next we can set up the database that will be used to store the poll results; we can do this easily enough using the MySQL Command Line Interface(CLI) easily enough, although database front-end GUIs can also be used. Open up the MySQL CLI and create a new database called poll using the following command:

1

2

		CREATE DATABASE poll;

The CREATE DATABASE command does exactly what it says on the tin and creates a new database with the specified name. Once we have a database we’ll need to create a new table in which to store the poll results. Before we can do this we need to select the new database; the USE command will do this:

1

2

		USE poll;

To create a new table we use the CREATE TABLE command, specifying the names for the columns within the table:

1

2

		CREATE TABLE results(choices VARCHAR(20), votes INT);

If we were deploying this on a site we’d start off with an empty table, but so that we can see some results without answering the question ourselves repeatedly, we can enter some dummy data into the table. The quickest and easiest way to do this for small sets of data (just 5 rows in this example) is to do it manually, which we can do with the following series of commands:

1

2

INSERT INTO results VALUES(‘choice0’, 100); 

3

INSERT INTO results VALUES(‘choice1’, 67); 

4

INSERT INTO results VALUES(‘choice2’, 11); 

5

INSERT INTO results VALUES(‘choice3’, 51); 

6

INSERT INTO results VALUES(‘choice4’, 38);

The command should be straight-forward enough, just remember to hit enter after each line. The only point worthy of note is that the first row is choice0 instead of choice1 which is done to make working with the JSON object in our script easier. At this point your CLI should appear something like the following screenshot:

We’re done with the CLI now so we can exit it and move on to our next task – creating the plugin.

Building the Plugin

We have a number of tasks to complete with the plugin code; we need to create the DOM structure for the widget, add a handler that listens for submission of the selection, pass the results to the server and process the response, as well as displaying the results once processed. We can also add some sugar in the form of error messages and animated results.

It’s going to take a few lines of code for sure, but it should be worth it as we’ll get to see how easy it is to make a robust, functional and advanced plugin that provides interactivity and adds value to the page. Let’s make a start; in a new file in your text editor add the following code: