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.


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

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

Yorum Yaz

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
" jQuery Ajax & PHP ile Puanlama/Rating Sistemi konulu makalemizde Ogznet.com olarak sizlere jQuery Ajax & PHP ile Puanlama/Rating Sistemi ile ilgili bilgiler aktarmak istedik. Hemen yukarıda jQuery Ajax & PHP ile Puanlama/Rating Sistemi ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "
Reklam Ver instagram takipçi satın al