Sistem voting biasa digunkan untuk menentukan pilihan, dalam tutorial kali ini saya akan membuat sistem voting icon like dan dislike menggunakan PHP dan jQuery Ajax. Dalam contoh ini, saya memiliki dua icon like dan dislike untuk membuat event berikut. Event ini akan dipanggial memggunakan jquery ajax untuk menampilkan hasil voting. Setiap kali icon diklik maka sistem akanmemperbarui data dalam database kemudian akan menampilkan data tersebut.
Script untuk Membuat Icon Like dan Dislike
Script ini berisi kode PHP untuk mendapatkan nilai untuk atribut icon like dan dislike. Nilai-nilai ini akan bervariasi berdasarkan status klik yang dilakukan user.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div id="links-<?php echo $links["id"]; ?>"> <input type="hidden" id="votes-<?php echo $links["id"]; ?>" value="<?php echo $links["votes"]; ?>"> <?php $vote_rank = 0; $query ="SELECT SUM(vote_rank) as vote_rank FROM ipaddress_vote_map WHERE link_id = '" . $links["id"] . "' and ip_address = '" . $ip_address . "'"; $row = $db_handle->runQuery($query); $up = ""; $down = ""; if(!empty($row[0]["vote_rank"])) { $vote_rank = $row[0]["vote_rank"]; if($vote_rank == -1) { $up = "enabled"; $down = "disabled"; } if($vote_rank == 1) { $up = "disabled"; $down = "enabled"; } } ?> <input type="hidden" id="vote_rank_status-<?php echo $links["id"]; ?>" value="<?php echo $vote_rank; ?>"> <div class="btn-votes"> <input type="button" title="Up" class="up" onClick="addVote(<?php echo $links["id"]; ?>,'1')" <?php echo $up; ?> /> <div class="label-votes"><?php echo $links["votes"]; ?></div> <input type="button" title="Down" class="down" onClick="addVote(<?php echo $links["id"]; ?>,'-1')" <?php echo $down; ?> /> </div> </div> |
jQuery Voting Handler
Fungsi jQuery ini memanggil PHP untuk memperbarui status dari icon yang telah dipilih berdasarkan pilihan dari user. Dan kemudian, menghitung total jumlah data yang telah dipilih oleh user. ,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
function addVote(id,vote_rank) { $.ajax({ url: "add_vote.php", data:'id='+id+'&vote_rank='+vote_rank, type: "POST", beforeSend: function(){ $('#links-'+id+' .btn-votes').html("<img src='LoaderIcon.gif' />"); }, success: function(vote_rank_status){ var votes = parseInt($('#votes-'+id).val()); var vote_rank_status; switch(vote_rank) { case "1": votes = votes+1; break; case "-1": votes = votes-1; break; } $('#votes-'+id).val(votes); $('#vote_rank_status-'+id).val(vote_rank_status); var up,down; if(vote_rank_status == 1) { up="disabled"; down="enabled"; } if(vote_rank_status == -1) { up="enabled"; down="disabled"; } var vote_button_html = '<input type="button" title="Up" class="up" onClick="addVote('+id+',\'1\')" '+up+' /><div class="label-votes">'+votes+'</div><input type="button" title="Down" class="down" onClick="addVote('+id+',\'-1\')" '+down+' />'; $('#links-'+id+' .btn-votes').html(vote_button_html); } }); } |
Script PHP untuk Mengupdate Hasil Voting
Kode ini menerima string data AJAX dan meneruskan nilai-nilai ini ke dalam database untuk memperbarui status dari voting.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php if(!empty($_POST["id"])) { require_once("dbcontroller.php"); $db_handle = new DBController(); $query = "INSERT INTO ipaddress_vote_map (ip_address,link_id,vote_rank) VALUES ('" . $_SERVER['REMOTE_ADDR'] . "','" . $_POST["id"] . "','" . $_POST["vote_rank"] . "')"; $result = $db_handle->insertQuery($query); if(!empty($result)) { $query = "SELECT SUM(vote_rank) as vote_rank FROM ipaddress_vote_map WHERE link_id = '" . $_POST["id"] . "' and ip_address = '" . $_SERVER['REMOTE_ADDR'] . "'"; $row = $db_handle->runQuery($query); switch($_POST["vote_rank"]) { case "1": $update_query ="UPDATE links SET votes = votes+1 WHERE id='" . $_POST["id"] . "'"; break; case "-1": $update_query ="UPDATE links SET votes = votes-1 WHERE id='" . $_POST["id"] . "'"; break; } $result = $db_handle->updateQuery($update_query); print $row[0]["vote_rank"]; } } ?> |
Berikut hasil dari script di atas,
Oke itulah tadi pembahasan saya tentang Cara Membuat Sistem Voting PHP dengan jQueri Ajax, semoga bermanfaat.