jQuery Ajax & PHP ile Puanlama/Rating Sistemi
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.

::

0 Yorum ::

Webmaster ::

16 Mar 2016

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ı 62 kez değerlendirilmiş ve ortalama 4 yıldız verilmiş.



Etiketler:

PHP


Bu yazı daha önce 2022 kez okundu.

Ogznet.com

Zaman buldukça siteye yeni ve faydalı yazılar yazmaya çalışıyorum. 2004'ten bu yana web siteler yapıp yönetiyorum.

Benzer Konular

PHP ile Yandex Üzerinden Mail Gönderme
06 Kas 2017

PHP ile Yandex Üzerinden Mail Gönderme

Yandex Üzerinden Phpmailer ile nasıl smtp mail gönderebilirsiniz? Yazımızda verdiğimiz kodlar ile bu mümkün.

7 Adet Ücretsiz Fotoğraf Optimize Aracı
02 Kas 2017

7 Adet Ücretsiz Fotoğraf Optimize Aracı

Web sitelerinde büyük resimlerin yüklenmesinin çok uzun sürdüğü ve yavaş yüklenen web sayfalarının hemen terk edildiğinin farkındasınızdır. Bu durumda resimlerinizi optimize etmeniz gerekir.

Windows ve Mac için En İyi 10 FTP İstemcisi
31 Eki 2017

Windows ve Mac için En İyi 10 FTP İstemcisi

Windows ve Mac için en iyi FTP İstemcisini arıyorsanız, burada amacınıza uygun en iyi programların bulunduğu bir program listesi bulacaksınız.

Joomla vs WordPress En İyi CMS Seçimi
20 Ağ 2017

Joomla vs WordPress En İyi CMS Seçimi

Bu yazıda, web siteniz için en iyi CMS'yi seçebilmeniz için Joomla ve WordPress'in derinlemesine bir analizini yapıyoruz. Size en iyi CMS'yi seçmenize yardımcı olmak için bir Joomla vs WordPress yazısıdır.

Facebook Yorum Yaz

Yorum Yaz

guvenlik

Hemen mail adresinle kaydol

Yeni Yazılardan İlk Senin Haberin Olsun

feedburner
stats
Engelleyiciyi kapattım!