Introduction
This tutorial teaches you how to create your own poll. We will go step by step through the important parts of the tutorial. What do we need to accomplish a poll? We need a question asked and
- a yes or no field to choose (The poll fla);
- a database showing the result (The poll result fla);
However, we need a server-side script to get the information and transfer the information. We need a script to feed the database. As you will learn in a second the first task is accomplished by a php script and the second task by a small xml file. So let's get into the details.
The poll fla
We create the poll fla first. We need 2 radiobuttons and a submit button. We also add a textfield to get a message back from the php file to see if voting was successful or not. Check the fla file for details. In frame one we place the script below. We call the Radiobuttongroup "radioPoll". As you can see we create a number of variables to hold yes- or novotes and two LoadVars objects to send and receive data from the php file.
stop ();
import mx.controls.RadioButtonGroup;
import mx.controls.Alert;
//defining variables
var pollCountYes:Number;
var pollCountNo:Number;
var yVotes:Number;
var nVotes:Number;
var votedFor:String;
var radioPoll:RadioButtonGroup;
var messageBox:TextField;
var lv:LoadVars;
lv = new LoadVars ();
var lvAnswer:LoadVars;
lvAnswer = new LoadVars ();
Next we load the xml file and make sure using the below script that the file extension is always unique to get the newest data and not a cached file.
//loading xml to check for the number of yes and no votes var myVote:XML = new XML(); myVote.ignoreWhite = true; myVote.onLoad = function() { //we make the textnodes numbers here and load them into invisible textfields pollCountYes = parseInt(this.firstChild.firstChild.firstChild); pollCountNo = parseInt(this.firstChild.lastChild.firstChild); }; var myPoll:String = "poll.xml"; //this is to bypass the xml cache if (System.capabilities.playerType != "External" && System.capabilities.playerType != "Standalone") { myPoll += "?"+new Date().getTime()+Math.floor(Math.random()*10000); } myVote.load(myPoll);
Then we load the xml file to monitor the status of the votes. Let's look at the xml before we go further.
<poll><yesvotes>1</yesvotes><novotes>1</novotes></poll>
We have a root node poll and childnodes for the votes. We enter 1 for each vote because of the php file parsing, since 0 gives an error. However, we subtract 1 later. Now we continue with the fla file. In order to trigger an event when the radiobuttons are pressed we create an eventhandler for the buttons which we call "pollListener". Now we differentiate between yes and no votes with if statement and increment the number depending on the vote. We also create a var "downLoad", which we need later.
//we create a listener for the radiobutton to increase either number var pollListener:Object = new Object(); pollListener.click = function() { if (radioPoll.selection.label == "Yes") { //we increase the number for the yes votes yVotes = pollCountYes+1; nVotes = pollCountNo; //we have an additional var to trigger an event depending on the vote //see last frame of this clip votedFor = "true"; } if (radioPoll.selection.label == "No") { nVotes = pollCountNo+1; yVotes = pollCountYes; votedFor = "false"; } }; radioPoll.addEventListener("click", pollListener);
Now we need to send the data to the php file using a submit button. We make sure here that all the variables we send are defined. If not an alertbox will open and stop the process. If yes we send the data which have the prefic lv. to the php file. We also add an onLoad event for data coming back. If we had success there will be a message and we will be redirected to either web site to show the result. If not an error message will appear.
submitBut.onRelease = function () {
if (radioPoll.selection.label == null) {
yVotes = undefined;
nVotes = undefined;
Alert.show ("ERROR: Select a vote!");
return yVotes;
} else {
lv.yVotes = yVotes;
lv.nVotes = nVotes;
lv.votedFor = votedFor;
lv.action = "vote";
lv.sendAndLoad ("poll.php", lvAnswer, "POST");
lvAnswer.onLoad = function () {
if (this.myVote == "Okay") {
messageBox.text = "Thank you for voting!";
if (this.message == "true") {
getURL ("pollresult.html", "_self");
} else {
getURL ("noresult.html", "_self");
}
} else {
messageBox.text = "Error: "+this.myErmsg;
}
};
}
};
Now let's have a look at the PHP script. It's a simple script. First we make sure our variables are all defined. Then we create new var for the xml nodes, which will hold the numbers as well. Then we have a switch function, which leads to the actual function "votenow" with arguments. In vote now we create the var $newinfo, which creates the new xml and then all we do is open the xml file and write into it. When everything was successful we exit and pass on the download var and myVote.
<? //testing if var from flash are defined and have contents if (!isset($yVotes) || empty($yVotes) || !isset($nVotes) || empty($nVotes) || !isset($votedFor) || empty($votedFor)) { fail("No vote selected"); } $voteyes = "$yVotes"; $voteno = "$nVotes"; //function to add or delete information switch($action) { case "vote": votenow($voteyes,$voteno,$votedFor); break; default: fail("Unknown action: $action"); } //we test first if we can open the xml file function votenow($voteyes,$voteno,$votedFor) { $filename = "poll.xml"; //test if file can be opened $dataFile = fopen( $filename, "r" ) ; if ( $dataFile ) { while (!feof($dataFile)) { $buffer = fgets($dataFile, 4096); echo $buffer; } //close file now and initiate writing fclose($dataFile); writefile ($filename,$voteyes,$voteno,$votedFor); //in case file cannot be opened } else { fail( "fopen failed for $filename" ) ; } } //we can now open the file for writing function writefile ($filename,$voteyes,$voteno,$votedFor) { //enter the new information $newinfo = "$voteyes$voteno"; $dataFile = fopen( $filename, "w" ) ; if(!$dataFile) { fail( "fopen failed for $filename" ) ; } fwrite($dataFile, "$newinfo"); fclose($dataFile); success($votedFor); } //function in case of failure function fail($myErmsg) { print "&myVote=Fail&myErmsg=$myErmsg"; exit; } //when it was successful... function success($votedFor) { print "&myVote=Okay&message=$votedFor"; exit; } ?>
It is important for reading and writing that the permissions of the xml file are set correctly. Otherwise the file will not open.
pollresult.fla
Now we have to create the fla(s) which will show the voting result. It is very simple, just 2 textfields and a little bit text. In frame 1 we add this script, which basically loads and parses the xml file.
var yVotes:Number;
var yesVotes:TextField;
var nVotes:Number;
var noVotes:TextField;
var myxmlVote:XML = new XML();
myxmlVote.ignoreWhite = true;
myxmlVote.onLoad = function() {
yVotes = parseInt (this.firstChild.firstChild.firstChild);
yVotes = yVotes-1;
yesVotes.text = yVotes.toString ();
nVotes = parseInt (this.firstChild.lastChild.firstChild);
nVotes = nVotes-1;
noVotes.text = nVotes.toString ();
};
myxmlVote.load("poll.xml");
So now it is voting time.