Connected with the Database

First of all, we need to prepare the database (of course!). Create a new database if you like, then, using phpMyAdmin, execute the SQL code below:

[sql]CREATE TABLE `ajax_vote` (
`id` TINYINT( 4 ) NOT NULL AUTO_INCREMENT ,
`vote_id` TINYINT( 4 ) NOT NULL ,
`vote_value` TINYINT( 1 ) NOT NULL ,
PRIMARY KEY ( `id` )
);[/sql]

The biggest modification goes to sendVote.php as this is our back-end to the database process. We’re going to add several extra code, so it will save the inputed rating, and later, throw back the current rating average to vote.php as a return output.

Here’s our new code for sendVote.php file:

[php]< ?php

$voteId = $_GET['id'];
$voteValue = $_GET['value'];

//change below if necesarry
$DB_Host = "localhost";
$DB_User = "root";
$DB_Pass = "";
$DB_Name = "test";

$status = 0;
$voteResult = 0;

if ($voteId && $voteValue && !empty($voteId) && !empty($voteValue)) {

$db = @mysql_pconnect($DB_Host,$DB_User,$DB_Pass);
if (!$db)
$status = 0;
else {
$ok = mysql_select_db($DB_Name,$db);
if (!$ok)
$status = 0;
else
$status = 1;
}

if ($status) {

$res = mysql_query("insert into ajax_vote(vote_id,vote_value) values($voteId,$voteValue)",$db);
if (!$res)
$status = 0;
else {
$res = mysql_query("SELECT avg(vote_value) FROM ajax_vote WHERE vote_id = $voteId",$db);
if ($res) {
$row = mysql_fetch_array($res, MYSQL_NUM);
$voteResult = round($row[0],1);
} else
$status = 0;
}

}

@mysql_close($db);

}

if ($status)
echo $voteResult;
else
echo "failed";

?>[/php]

Look at the last part. If there’s something wrong with the process, it will return “failed” as the output.

Actually, from here, you can already try our new modification if you want. But I suggess we continue a little bit with the frontend modification )

Next, we’re going to modify vote.php and add a nice trick, give a warning message to user if he/she click on the Vote button while the old request still being processed.

First of, we add this code before handleHttpResponse() function.

[js]var stillWorking = false;[/js]

We use stillWorking variabel to indicate whether a request process still active or not. On initialization, we set it to false since there’s no request process yet.

Then we change handleHttpResponse() and UpdateVote() functions like below:

[js]function handleHttpResponse() {
if (http.readyState == 4) {
results = http.responseText.split(”,”);
var result = results[0];
if (result == “failed”) {
window.alert(”Voting Failed”);
} else {
document.getElementById(’voteResult’).value = result;
}
stillWorking = false;
}
}

function updateVote() {
if (stillWorking == true) {
window.alert(”Voting is in progress. Please wait a moment”);
} else {
var voteValue = document.getElementById(”voteValue”).value;
var voteId = document.getElementById(”voteId”).value;
http.open(”GET”, url + voteId + delurl + voteValue, true);
stillWorking = true;
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
}[/js]

Notice that we also “failed” output handler in the handleHttpResponse function.

Okay, that’s enough modification :d Now try to execute it again. Don’t forget to multiple-click the Vote button to see the popup message. Nice, isn’t it?

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote2.php

On the next and final page, we’ll add a small CSS element and use XMLDOM to handle it.

Pages: 1 2 3