В процессе создания одного из сайтов появилась необходимость добавить рейтинг со звездочками или как его еще называют звездный рейтинг. После беглого изучения уже имеющихся скриптов рейтингов со звездочками было принято решение написать свой собственный скрипт без излишеств и как можно проще для быстрого его встраивания на любой сайт.
Наш скрипт звездного рейтинга так же как и другие подобные скрипты позволяет оценивать что угодно на сайте, но при этом наш скрипт позволяет это делать сразу по нескольким параметрам и высчитывать общую (среднюю) оценку.
Для демонстрации работы предлагаемого нами скрипта звездного рейтинга, сделанного при использовании jQuery, обратите внимание на рейтинг со звездочками, расположенный ниже:
При перемещении курсора мышки по звездочкам, они визуально показывают текущее значение рейтинга данного параметра в соответствии с текущим положением курсора мышки. Справа от звездочек показывается текущее значение рейтинга данного параметра.
При клике по звездочкам какого-либо параметра значение текущего параметра рейтинга будет зафиксировано. При повторном клике - значение рейтинга данного параметра вновь будет можно изменять. При клике по кнопке "Отправить!", произойдет передача общей оценки на сервер для ее сохранения и дальнейшей обработки.
Для реализации подобного звездного рейтинга на Вашем сайте, Вам потребуется подключение библиотеки jQuery. Сделать это можно следующим образом:
JavaScript код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
Далее Вам потребуется разместить код вывода на экран рейтинга со звездочками:
HTML код:
<div id="rating"> <div class="param">Параметр 1:</div> <div><div class="stars"></div><p class="progress" id="p1"></p></div> <div class="rating" id="param1">5.0</div> <div class="param">Параметр 2:</div> <div><div class="stars"></div><p class="progress" id="p2"></p></div> <div class="rating" id="param2">5.0</div> <div class="param">Параметр 3:</div> <div><div class="stars"></div><p class="progress" id="p3"></p></div> <div class="rating" id="param3">5.0</div> <div class="param">Общая оценка:</div> <div><div id="sum_stars"></div><p id="sum_progress"></p></div> <div id="summ">5.00</div> <input id="el_999" type="submit" value="Отправить!"> <p id="message"></p> </div>
Обращаем Ваше внимание на то, что el_999 - уникальный идентификатор того, что мы будем оценивать! Для каждой темы (комментария или товара), данный идентификатор должен иметь свое цифровое значение, например, el_1 или el_123.
Далее в шапку сайта между тегами <head> и </head> для такого же отображения рейтинга Вам необходимо добавить следующие стили оформления:
HTML код:
<style type="text/css">
#rating {
width: 320px;
border-radius: 4px;
box-shadow: 0 0 2px 1px #333333;
margin: 10px auto;
padding: 10px;
text-align: center;
}
#rating div { float: left; }
#rating p { margin: 0; padding: 0; }
.param {
width: 110px;
margin: 0 20px 0 0;
text-align: right;
}
.param, .rating, #summ { line-height: 28px; }
.stars, #sum_stars { background: url(image/stars.png); }
.stars, #sum_stars, .progress, #sum_progress {
width: 130px;
height: 28px;
cursor: pointer;
}
.progress { background: #FFEE00; }
#sum_progress { background: #00EE00; }
.rating, #summ {
margin: 0 0 0 20px;
font-weight: bold;
}
</style>
В нашем примере в CSS стиле мы указали путь на изображение с пятью прозрачными звездочками, окруженных белым фоном.
Звездный рейтинг
Теперь остается добавить JavaScript код, который будет отвечать за заполнение звездочек, изменение рейтинга, вычисление суммы рейтинга и отправку общего рейтинга на сервер:
JavaScript код:
<script type="text/javascript">
$(document).ready(function(){
function move(e, obj){
var summ=0;
var id = obj.next().attr('id').substr(1);
var progress = e.pageX - obj.offset().left;
var rating = progress * 5 / $('.stars').width();
$('#param'+id).text(rating.toFixed(1));
obj.next().width(progress);
$('.rating').each(function(){ summ += parseFloat($(this).text()); });
summ = summ / $('.rating').length;
$('#sum_progress').width(Math.round($('.stars').width() * summ / 5));
$('#summ').text(summ.toFixed(2));
}
$('#rating .stars').click(function(e){
$(this).toggleClass('fixed');
move(e, $(this));
});
$('#rating .stars').on('mousemove', function(e){
if ($(this).hasClass('fixed')==false) move(e, $(this));
});
$('#rating [type=submit]').click(function(){
summ = parseFloat($('#summ').text());
jQuery.post('change_rating.php', {
obj_id: $(this).attr('id').substr(3),
rating: summ
}, notice);
});
function notice(text){
$('#message').fadeOut(500, function(){ $(this).text(text); }).fadeIn(2000);
}
});
</script>
Для хранения оценок, отправленных на сервер выше приведенным JavaScript кодом, Вам понадобится в MySQL создать таблицу votes:
Цитата:
CREATE TABLE IF NOT EXISTS `votes` ( `id` int(10) unsigned NOT NULL auto_increment, `date` int(10) unsigned NOT NULL, `id_product` int(10) unsigned NOT NULL, `ip` int(10) unsigned NOT NULL, `rating` float unsigned NOT NULL, PRIMARY KEY (`id`) ) ENGINE=Aria DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;
Для хранения рейтинга и количества проголосовавших, в MySQL в таблице, которая содержит то, что оценивается (будь то тема, комментарий или товар), добавьте два столбца: points с типом данных float и votes с типом данных int.
В нашем примере мы будем оценивать рейтинг темы и таблица будет называться themes.
Для обработки полученных результатов на сервере и занесения их в MySQL, создайте файл change_rating.php и добавьте в него следующий код:
PHP код:
<?php
if (is_numeric($_POST["obj_id"])) $obj=$_POST["obj_id"];
else $obj='';
if ($_POST["rating"]>=0 and $_POST["rating"]<=5) $ocenka=$_POST["rating"];
else $ocenka='';
if ($ocenka!='' and $obj>0) {
$time=$_SERVER['REQUEST_TIME'];
$ip=$_SERVER['REMOTE_ADDR'];
$db=mysqli_connect("localhost","Логин","Пароль","Имя_БД") or die();
$res=mysqli_query($db,"DELETE FROM votes WHERE date<".($time-604800));
$res=mysqli_query($db,"SELECT count(id) FROM votes
WHERE id_product=".$obj." and ip=INET_ATON('".$ip."')");
$number=mysqli_fetch_array($res);
if ($number[0]==0) {
$res=mysqli_query($db,"INSERT INTO votes (date,id_product,ip,rating)
values (".$time.",".$obj.",INET_ATON('".$ip."'),".$ocenka.")");
$res=mysqli_query($db,"UPDATE themes
SET points=(points+".$ocenka."),votes=(votes+1) WHERE id=".$obj." LIMIT 1");
echo 'Спасибо, Ваш голос учтен!';
}
else echo 'Вы уже сегодня голосовали!';
}
?>
Данный скрипт звездного рейтинга довольно прост в установке и поможет Вам лучше узнать мнение Ваших посетителей об оцениваемых параметрах указанных Вами объектах.
пусть лежит...... Мобыть пригодится
