Make It Strong with Database

Sebelum mulai, kita siapkan dulu tabelnya. Untuk gampangnya, dari phpMyAdmin, masukkan kode SQL berikut:

[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]

Perubahan yg paling utama adalah pada script sendVote.php. Di dalamnya kita tambahkan kode2 untuk menyimpan nilai rating yg dikirimkan sesuai dng kode votingnya, selanjutnya kita mengambil nilai rata-rata rating yg sudah ada dan mengembalikannya sbg output untuk ditampilkan oleh vote.htm

Berikut kodenya:

[php]< ?php

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

$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]

Perhatikan pada bagian terakhir, jika statusnya gagal, maka ia akan mengembalikan tulisan “failed”.

Sampai di sini sebenarnya kita sudah bisa langsung mencoba pengembangan di atas. Silahkan kalau mau

Selanjutnya kita akan mencoba memodifikasi vote.htm dng menambahkan sebuah trik yg menarik, yaitu memberikan pesan kpd user apabila ia menekan tombol Vote lagi sedangkan voting sebelumnya masih diproses.

Mula2 tambahkan kode berikut di atas fungsi handleHttpResponse()

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

Variabel stillWorking akan kita gunakan sbg penanda apakah proses request sedang berlangsung atau tidak. Pada awalnya kita set sbg false (krn belum ada proses request).

Selanjutnya ubah fungsi handleHttpResponse dan updateVote menjadi spt di bawah ini:

[js]function handleHttpResponse() {
if (http.readyState == 4) {

results = http.responseText.split(”,”);
var result = results[0];
if (result == “failed”) {
window.alert(”Proses voting gagal”);
} else {
document.getElementById(’voteResult’).value = result;
}
stillWorking = false;
}
}

function updateVote() {
if (stillWorking == true) {
window.alert(”Voting sedang diproses. Harap tunggu sebentar”);
} 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]

Pada fungsi handleHttpResponse yg baru ini kita juga menambahkan penanganan thd output “failed”.

Sudah cukup. Monggo dicoba dijalankan lagi. Coba klik 2x pada tombol vote, akan keluar pesan alert. Asik kan?

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

Penggunaan variabel stillWorking kemungkinan besar bisa digantikan dng mengecek langsung nilai atribut readyState. Jika sama dng 0, berarti tidak ada proses request. Silahkan dicoba sendiri, soalnya mysql server di komputer udah terlanjur dimatikan

Pada halaman selanjutnya (bagian terakhir), kita akan menggunakan CSS dan sedikit menambah ilmu ttg DOM.