Голосование или звездный рейтинг


voteЕсть такой плагин для jquery, как sexy-vote, это звездная голосовалка. Но сам плагин немного был непрактичным. Он не умел сохранять результат голосования. Решил его немного дописать и добавить Ajax забросов.

Смотрим что получилось: звездный рейтинг или голосуем звездами!

Принцип работы:
При загрузке страницы посылается запрос на сервер, который возвращает результат текущей оценки. Когда происходит оценка, кликом на звездочку, посылаются данные на сервер, происходит пересчет оценки, и возвращается результат.

Итак, на главной странице, index.html:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.sexy-vote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#vote").sexyVote({maxScore:5,  idElement:8});
});
</script>
<style type="text/css">
#vote{
    margin-left: 3px;
    font-size: 0.8em;
}
</style>
</head>

<p id="vote"></p>

<span id="rez"></span> 

Сначала инициализируем jquery.js и сам плагин jquery.sexy-vote.js (строки 01-02).
Потом вызиваем скрипт плагина с параметром maxScore:5, тобишь максимальная оценка 5  и передаем id елемента за который голосуем, в моем случае это  idElement:8  (строка 05).
Стиль контейнера с шкалой голосования (строки 08-12).
Сам контейнер для шкалы голосования (строка 16).
И контейнер для результата голосования (строка 18).

И скрипт с которым обмениваемся Ajax-ом, reqvest.php:

$array = array("","Очень плохо","Плохо","Хорошо, но не совсем","Хорошо","Очень хорошо");

$col=6;
$val=17;

if(isset($_GET["start"]))
{
    $x=$val/$col;
}
else
{
    $col++;
    $val=$val+$_GET['val'];
    $x=$val/$col;
}
echo "<i>Текущая оценка:</i> ".$array[$x]."<br /><i>Количество оценивших: </i>".$col."";

С помощью Ajax, на сервер приходит три переменные:
$_GET["start"] - при загрузку страницы;
$_GET['val'] - при выборе оценки;
$_GET['id'] - при загрузку страницы и при выборе оценки.

В строке 01 объявлен массив с словесной оценкой, которую в результате возвращает сервер.

Стока 03: количество проголосовавших (в примере прописано статикой, а так значение нужно брать с базы по id $_GET['id'] !!!).

Стока 04: текущая оценка (в примере прописано статикой, значение также нужно брать с базы по id $_GET['id'] !!!).

Стока 06: если есть GET переменная start.

Стока 08: вычисляем результат оценки (выполняется при загрузке страницы).

Стока 12: инкрементируем количество проголосовавших (здесь же нужно сохранить новое значение в базу по id $_GET['id'] !!!).

Стока 13: получаем новую оценку (здесь же нужно сохранить новое значение в базу по id $_GET['id'] !!!).

Стока 14:  вычисляем результат оценки.

Стока 16:  ответ сервера с результатом оценки.

Весь пример в архиве можно скачать тут.

, , , , ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 273, в среднем: 4.00 из 5)
Loading ... Loading ...


  1. #1 Антон - Июль 2nd, 2009 at 04:46

    Что автор sexy-vote допустил ошибку, повлекшую “непрактичность”, что вы.

    Ну да, все голосуется, все отправляется, все получается. А за что голосовать то? Голосуют обычно за какой-то динамический элемент. И вот ID этого элемента никак не передается.

    А эта голосовалка годится лишь для голосования за сайт (:

  2. #2 nice - Июль 2nd, 2009 at 09:59

    Согласен, спасибо за замечание… исправлю!

  3. #3 nice - Июль 2nd, 2009 at 10:22

    Готово, теперь id элемента можно передавать через параметр idElement

  4. #4 Антон - Июль 2nd, 2009 at 20:42

    Спасибо просто огромное! Предыдущий пост вчера написал, сейчас вот вернулся к работе и решил поправить сам скрипт. Хорошо что глянул в блог :)

  5. #5 Vova - Июль 6th, 2009 at 10:57

    Большая прозьба администрации (nice) отписать на мое мыло – (потерял ваш емейл)

  6. #6 johnny - Май 29th, 2010 at 21:25

    Неплохо, но нужны доработки. Надо проверку на куки добавить и на ip-адрес, иначе можно голосовать бесконечно – теряется уникальность и интерес! Конечно возможно автор делал акцент именно на сам виджет, а не на серверную часть. Но если уж делать, то я думаю, делать надо до конца.
    А так мне скрипт понравился, простой и понятный!

  7. #7 Сергей - Июнь 25th, 2010 at 14:33

    johnny :
    Неплохо, но нужны доработки. Надо проверку на куки добавить и на ip-адрес, иначе можно голосовать бесконечно – теряется уникальность и интерес! Конечно возможно автор делал акцент именно на сам виджет, а не на серверную часть. Но если уж делать, то я думаю, делать надо до конца.
    А так мне скрипт понравился, простой и понятный!

    делать до конца все-равно каждый будет сам, принцип понятен и это правильно :) а то привыкли все и сразу ;)

  8. #8 andriy - Ноябрь 28th, 2011 at 05:21

    Скажите аожвлуста, я не пойму, что нужно исправить, чтоб количество голосований додавалось.

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.