Article
About the Author
Jack Herrington
Jack Herrington is an engineer, author, and presenter who lives and works in San Francisco, USA. He writes regularly on the topics of Flex, Ajax, Silverlight, PHP, and Ruby on Rails at http://jackherrington.com.
Build A Web 2.0 Voting Widget With Flex: Part II
Building practical Flash widgets, like ones that record users votes and display the results, is easy in Flex. In my previous article I demonstrated how to set up Flex Builder and create vote tally widgets. In this second article, I’ll show you how we can upgrade that widget to not only read votes, but post them as well. And I’ll demonstrate how to configure Flex projects to build lightweight Flash applications, which are perfect for deployment as widgets.
Download the code archive for this article if you'd like to play along at home.
Pay attention! Once again, there will be a quiz at the end of the article. The first 100 people to complete the quiz will receive a copy of my book, Getting Started With Flex 3, for FREE, delivered to your door. For a limited time, the book is also available as a FREE PDF, thanks to Adobe.
Building the Voting Service
Upgrading the widget from one that reads vote tallies to one that can post votes means upgrading the server backend. To do this, we’ll create a very simple MySQL database that stores the vote topics and the options for each voting topic along with their vote count.
This is the MySQL code we use to create the tables and to preload it with a question:
DROP TABLE IF EXISTS topics;
CREATE TABLE topics (
id INT NOT NULL AUTO_INCREMENT,
text VARCHAR( 255 ) NOT NULL,
PRIMARY KEY ( id ) );
DROP TABLE IF EXISTS options;
CREATE TABLE options (
id INT NOT NULL AUTO_INCREMENT,
topic_id INT NOT NULL,
text VARCHAR( 255 ),
votes INT NOT NULL,
PRIMARY KEY ( id ) );
INSERT INTO topics VALUES ( 0, 'Which is the best Star Wars movie?' );
INSERT INTO options VALUES ( 0, 1, 'Episode I', 10 );
INSERT INTO options VALUES ( 0, 1, 'Episode II', 20 );
INSERT INTO options VALUES ( 0, 1, 'Episode III', 50 );
INSERT INTO options VALUES ( 0, 1, 'Episode IV', 150 );
INSERT INTO options VALUES ( 0, 1, 'Episode V', 250 );
INSERT INTO options VALUES ( 0, 1, 'Episode VI', 30 );
It’s necessary to use mysqladmin to create the database, like so:
% mysqladmin --user=root create votes
… and then load the schema into it using the mysql command:
% mysql --user=root votes < vote.sql
If you’re using PHPMyAdmin to manage your database, you can create the database using PHPMyAdmin, and then use the database restore function to load these tables into the database.
The next step is to upgrade the AMFPHP service code for the vote system. The complete new code is shown here:
<?php
require_once("MDB2.php");
include_once(AMFPHP_BASE . "shared/util/MethodTable.php");
class VoteService2
{
function getTopics()
{
$dsn = 'mysql://root@localhost/votes';
$mdb2 =& MDB2::factory($dsn);
$sth =& $mdb2->prepare( "SELECT * FROM topics" );
$res = $sth->execute();
$rows = array();
while ($row = $res->fetchRow(MDB2_FETCHMODE_ASSOC)) { $rows []= $row; }
return $rows;
}
function getOptions( $topic )
{
$dsn = 'mysql://root@localhost/votes';
$mdb2 =& MDB2::factory($dsn);
$sth =& $mdb2->prepare( "SELECT * FROM options WHERE topic_id=?" );
$res = $sth->execute( $topic );
$rows = array();
while ($row = $res->fetchRow(MDB2_FETCHMODE_ASSOC)) { $rows []= $row; }
return $rows;
}
function addVote( $option )
{
$dsn = 'mysql://root@localhost/votes';
$mdb2 =& MDB2::factory($dsn);
$sth =& $mdb2->prepare( "SELECT * FROM options WHERE id=?" );
$res = $sth->execute( $option );
$rows = array();
while ($row = $res->fetchRow(MDB2_FETCHMODE_ASSOC)) {
$sth2 =& $mdb2->prepare( "UPDATE options SET votes=? WHERE id=?" );
$row['votes'] = $row['votes'] + 1;
$res = $sth2->execute( array( $row['votes'], $option ) );
return $row;
}
return null;
}
}
I won’t get into the weeds on this code, because it’s beyond the focus of this article, but I will point out that the script uses the MDB2 extension to access the MySQL database for the votes. The MDB2 library is the new standard for database-agnostic access with PHP.
The three methods are getTopics, which returns the list of available vote topics, then getOptions, which returns an array of options for the specified topic. Each option includes the option text and the count of votes. Finally, addVote adds a single vote to a particular option.
To test these functions, let’s bring up the AMF service browser that comes with the AMFPHP project and use it to inspect the service, as shown here.
This screenshot shows what happens when we run the getTopics function. It returns an array of objects, each of which has the id of the topic and the text of the topic.
Next we can check the getOptions function, as shown.
We see that this function returns another array of objects where each object has the text of the option, the unique id of the option, the associated topic’s id, and the current count of votes.
The final service function to test is addVote. Here it is in action.
In this screenshot we specify that we’re adding a vote for the option with the id of 1, which is “Episode I” (seriously). The return is a single object with the new values for the option record with the id of 1.
That’s about all we need concern ourselves with for the web server side. Now comes the fun part: wrapping our application in a nice Flex interface.