jQuery Ajax & PHP ile Puanlama/Rating Sistemi

jQuery Ajax & PHP ile Puanlama/Rating Sistemi

Aşağıda anlatacağım script sistemini web sitenize kolayca entegre ederek 5 kademeli yıldız puanlama sistemine sahip olabilirsiniz.

Web sitelerinde çokça gördüğümüz yıldız puanlama sistemini nasıl web sitenize entegre edeceğinizi anlatmaya çalışacağım. Bunun için PHP, MYSQL ve biraz JQUERY, AJAX bilgisine sahip olmanız gerekecek.

Yazının sonunda sistemin çalışan bir örneğini indirip detaylı bir şekilde çalışma düzenini inceleyebilirsiniz. Sistemde IP koruması mevcut olduğu için mükerrer oylama yapılamaz. Oylar veritabanına kaydediliyor.

Öncelikle "wcd_rating" adında veritabanınızda tablo açın. Bunun için aşağıdaki kodları kullanabilirsiniz.

CREATE TABLE IF NOT EXISTS `wcd_rate` ( `id` int(11) NOT NULL AUTO_INCREMENT, `id_post` int(11) NOT NULL, `ip` varchar(40) NOT NULL, `rate` int(11) NOT NULL, `dt_rated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)
)

Şimdi oylama sistemini, php sayfanızda gökükmesini istediğiniz yerine aşağıdaki kodları yapıştırın. Ancak öncesinde css kodlarını sayfanın üstüne yapıştırın.

<link type="text/css" rel="stylesheet" href="css/example.css">
<div class="rate-ex1-cnt"> <div id="1" class="rate-btn-1 rate-btn"></div> <div id="2" class="rate-btn-2 rate-btn"></div> <div id="3" class="rate-btn-3 rate-btn"></div> <div id="4" class="rate-btn-4 rate-btn"></div> <div id="5" class="rate-btn-5 rate-btn"></div>
</div>

Sayfa sonuna Js kodlarını ekleyin, sayfa değişkeni için "post_id" seçeneğini eşleştirmeyi unutmayın.

<?php $post_id = 'the post id'; ?>
<script> // rating script $(function(){ $('.rate-btn').hover(function(){ $('.rate-btn').removeClass('rate-btn-hover'); var therate = $(this).attr('id'); for (var i = therate; i >= 0; i--) { $('.rate-btn-'+i).addClass('rate-btn-hover'); }; }); $('.rate-btn').click(function(){ var therate = $(this).attr('id'); var dataRate = 'act=rate&post_id=<?php echo $post_id; ?>&rate='+therate; // $('.rate-btn').removeClass('rate-btn-active'); for (var i = therate; i >= 0; i--) { $('.rate-btn-'+i).addClass('rate-btn-active'); }; $.ajax({ type : "POST", url : "ajax.php", data: dataRate, success:function(){alert('Oyunuz kaydedildi.');} }); }); }); </script>

Ajax.php sayfasını oluşturun. Bu sayfa bilginin işlendiği sayfadır. Bu sayfa ile veritabanına puan ve değişkenler işlenecek.

require_once 'config.php';
if($_POST['act'] == 'rate'){ //search if the user(ip) has already gave a note $ip = $_SERVER["REMOTE_ADDR"]; $therate = $_POST['rate']; $thepost = $_POST['post_id']; $query = mysql_query("SELECT * FROM wcd_rate where ip= '$ip' "); while($data = mysql_fetch_assoc($query)){ $rate_db[] = $data; } if(@count($rate_db) == 0 ){ mysql_query("INSERT INTO wcd_rate (id_post, ip, rate)VALUES('$thepost', '$ip', '$therate')"); }else{ mysql_query("UPDATE wcd_rate SET rate= '$therate' WHERE ip = '$ip'"); }
}

Son olarak index.php'de verilen yıldızların sonuçlarını göstereceğiniz kodlar;

$query = mysql_query("SELECT * FROM wcd_rate");
while($data = mysql_fetch_assoc($query)){ $rate_db[] = $data; $sum_rates[] = $data['rate'];
}
if(@count($rate_db)){ $rate_times = count($rate_db); $sum_rates = array_sum($sum_rates); $rate_value = $sum_rates/$rate_times; $rate_bg = (($rate_value)/5)*100;
}else{ $rate_times = 0; $rate_value = 0; $rate_bg = 0;
}
<h3>The content was rated <strong><?php echo $rate_times; ?></strong> times.</h3>
<hr>
<h3>The rating is at <strong><?php echo $rate_value; ?></strong> .</h3>
<hr>
<div class="rate-result-cnt"> <div class="rate-bg" style="width:<?php echo $rate_bg; ?>%"></div> <div class="rate-stars"></div>
</div>

Hepsi bu kadar. Aşağıdaki linkten örnek uygulamayı indirebilirsiniz. Makalenin orjinal metnine webcodo sayfasından ulaşabilirsiniz.

Dosyayı İndir (111,4 KB)
Daha önce 290 kez indirildi.

Ogznet.com

Yorumlar (1)

Yorum Yaz


yenile