Скрипт рейтинга со звездочками
В процессе создания одного из сайтов появилась необходимость добавить рейтинг со звездочками или как его еще называют звездный рейтинг. После беглого изучения уже имеющихся скриптов рейтингов со звездочками было принято решение написать свой собственный скрипт без излишеств и как можно проще для быстрого его встраивания на любой сайт.
Наш скрипт звездного рейтинга так же как и другие подобные скрипты позволяет оценивать что угодно на сайте, но при этом наш скрипт позволяет это делать сразу по нескольким параметрам и высчитывать общую (среднюю) оценку.
Для демонстрации работы предлагаемого нами скрипта звездного рейтинга, сделанного при использовании jQuery, обратите внимание на рейтинг со звездочками, расположенный ниже:
При перемещении курсора мышки по звездочкам, они визуально показывают текущее значение рейтинга данного параметра в соответствии с текущим положением курсора мышки. Справа от звездочек показывается текущее значение рейтинга данного параметра.
При клике по звездочкам какого-либо параметра значение текущего параметра рейтинга будет зафиксировано. При повторном клике - значение рейтинга данного параметра вновь будет можно изменять. При клике по кнопке "Отправить!", произойдет передача общей оценки на сервер для ее сохранения и дальнейшей обработки.
Для реализации подобного звездного рейтинга на Вашем сайте, Вам потребуется подключение библиотеки jQuery. Сделать это можно следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее Вам потребуется разместить код вывода на экран рейтинга со звездочками:
<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> для такого же отображения рейтинга Вам необходимо добавить следующие стили оформления:
<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 код, который будет отвечать за заполнение звездочек, изменение рейтинга, вычисление суммы рейтинга и отправку общего рейтинга на сервер:
<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=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;Для хранения рейтинга и количества проголосовавших, в MySQL в таблице, которая содержит то, что оценивается (будь то тема, комментарий или товар), добавьте два столбца: points с типом данных float и votes с типом данных int.
В нашем примере мы будем оценивать рейтинг темы и таблица будет называться themes.
Для обработки полученных результатов на сервере и занесения их в MySQL, создайте файл change_rating.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 'Вы уже сегодня голосовали!';
}
?>Данный скрипт звездного рейтинга довольно прост в установке и поможет Вам лучше узнать мнение Ваших посетителей об оцениваемых параметрах указанных Вами объектах.
P.S. Если Вам нужен только один ряд звезд, то предлагаем Вам ознакомиться с другим нашим скриптом звездного рейтинга.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Изображение должно иметь пять звезд, прозрачных внутри, но при этом окруженных непрозрачным фоном. Тогда при закрашивании фона под изображением будет закрашиваться только прозрачная часть звездочек. Скачайте приведенное изображение из темы и укажите его в CSS.
Можно ли это учесть как-нибудь в скрипте?
В таблицу themes добавил колонку id int(10)
Для заполнения таблицы themes пришлось в базе данных создать строку с id=999 и каждый раз нужно создавать строку для счетчика каждой страницы.
------------------
Напишите пожалуйста - как сделать на нужной странице микроразметку для рейтинга.
Туда необходимо добавить два новых столбца: points и votes.
А вот вторую таблицу votes необходимо создать при помощи SQL запроса, приведенного в данной теме.
CREATE TABLE IF NOT EXISTS `themes` (
`id` int(10) unsigned NOT NULL auto_increment,
`points` float NOT NULL,
`votes` int(10) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;
Добавьте в данную таблицу столько строк, сколько будет оцениваться тем (или товаров), при этом поле id у всех должно быть разное, а points и votes равны нулю.
Далее в строчке: <input id="el_999" type="submit" value="Отправить!"> вместо el_999 подставляйте el_1, el_2 и т.д. для каждой оцениваемой темы (или товара).
Подскажите, пожалуйста, как сделать, если имеется одна страница article.php и все статьи находятся в базе? Не подскажете, какие изменения надо будет сделать, чтобы скрипт заработал?
У меня также не показывается общие оценки...
Подскажите в чём может быть проблема?
C уважением и заранее спасибо за ответ.
Подскажите как изменить скрипт, у вас на сайте самый толковый скрипт, который я нашла.
Заранее благодарна.
Подскажите, пожалуйста, что такое $_POST["obj_id"]? Это параметр какого поля? Просто у меня этот параметр пустой при нажатии на кнопку.
obj_id: $(this).attr('id').substr(3),
rating: summ - мы передаем идентификатор и рейтинг?
Подскажите, пожалуйста, как сделать по умолчанию пустые звезды, и все по нулям.