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 799 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ı 95 kez değerlendirilmiş ve ortalama 4 yıldız verilmiş.
Bu yazı daha önce 2865 kez okundu.

Bu yazıyı beğendiniz mi? Bültenimize katılın ve bizi takip ederek yeni yazılardan haberdar olun!

Facebook Yorumları

Yorumlar

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

Yorum Yaz

İstanbul Firma, İlan, Gezi Rehberi ve Haberleri instagram takipçi satın alreklamreklam
Daily ShikakuDaily BridgesDiscover PetraSlide and Roll
Photo Slide Show

Photo Slide Show

23 May 2018 / Multimedya
Folder Lock

Folder Lock

20 May 2018 / Güvenlik
Fake Webcam

Fake Webcam

19 May 2018 / Multimedya
Wall Photo Maker

Wall Photo Maker

19 May 2018 / Multimedya
Photo Slide Show

Photo Slide Show

23 May 2018 / Multimedya
Folder Lock

Folder Lock

20 May 2018 / Güvenlik
Emsisoft Anti-Malware

Emsisoft Anti-Malware

19 May 2018 / Güvenlik
Fake Webcam

Fake Webcam

19 May 2018 / Multimedya