jQuery Ajax & PHP ile Puanlama/Rating Sistemi
jQuery Ajax & PHP ile Puanlama/Rating Sistemi

jQuery Ajax & PHP ile Puanlama/Rating Sistemi

Dikkat! Bu yazı yayınlandığından beri 712 gün geçmiş. Yazının içeriği güncelliğini kaybetmiş veya indirme linkleri bozuk olabilir.

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.

Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 82 kez değerlendirilmiş ve ortalama 4 yıldız verilmiş.
Bu yazı daha önce 2344 kez okundu.

Facebook Yorumları

Yorumlar

Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

Tenis OyunuKare YapmacaBlobs1010 Hex
Online TV Player

Online TV Player

23 Şu 2018 / Multimedya
Any Video Converter Free Edition

Any Video Converter Free Edition

23 Şu 2018 / Multimedya
Pazera Free FLV to AVI Converter

Pazera Free FLV to AVI Converter

23 Şu 2018 / Multimedya
Multiple Image Resizer .NET

Multiple Image Resizer .NET

23 Şu 2018 / Multimedya
GameHike

GameHike

23 Şu 2018 / Oyun
Pazera Free FLV to AVI Converter

Pazera Free FLV to AVI Converter

23 Şu 2018 / Multimedya
Resize

Resize

23 Şu 2018 / Multimedya
Online TV Player

Online TV Player

23 Şu 2018 / Multimedya
Any Video Converter Free Edition

Any Video Converter Free Edition

23 Şu 2018 / Multimedya
Multiple Image Resizer .NET

Multiple Image Resizer .NET

23 Şu 2018 / Multimedya