Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по AJAX / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Звездный рейтинг своими руками

Здравствуйте, уважаемые читатели! В данном уроке мне хотелось бы показать, как можно самому с нуля сделать скрипт рейтинга у себя на сайте. Есть конечно и готовые решения данной проблемы, но так ведь не очень интересно) Взгляните на результат и сами все поймете. Итак приступим к созданию.

Результат

Для начала в базе данных нужно добавить к таблицы со статьями 3 поля total_votes – всего голосов (int 5), total_value – общий рейтинг (int 5), used_ips – поля для блокировки пользователя по ip (longtext). Теперь на страницу подключаем jquery, если это еще не сделано:

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

Создадим каркас для нашего рейтинга:

<div id="ratingBar">
<div
id="rating">
<div
id="ratZero"></div>
<div
id="ratDone"></div>
<div
id="ratHover"></div>
</div>
<div
id="ratBlocks"></div>
<div
id="ratStat"></div>
</div>

Блок с id ratZero это блок, в котором будут располагаться пустые звезды, ratDone – текущий рейтинг и ratHover – рейтинг при наведении. Так же нам понадобится картинка со звездочками, которая есть в исходных материалах. Теперь добавим немного стилей. Все размеры будем задавать относительно нашей картинки (сама она 17х75 пикселей с тремя типами звезд), т.е. одна звезда 17х25 пикселей. Сам рейтинг будет иметь 10 звезд (может быть любое количество на ваше усмотрение, главное не запутаться в размерах), следовательно основной блок будет размером 170х25. Приведу сразу весь css код:

body {
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
#rating{
width:170px;
height: 25px;
}
#ratBlocks{
width:172px;
height: 25px;
margin-top:-25px;
display:none;
}
#ratZero{
width:170px;
background: url(stars.png) repeat-x 0 0;
height: 25px;
}
#ratDone{
width:0;
background: url(stars.png) repeat-x 0 -50px;
height: 25px;
margin-top:-25px;
}
#ratHover{
width:0px;
background: url(stars.png) repeat-x 0 -25px;
height: 25px;
margin-top:-25px;
}

Блок с идентификатором ratBlocks будет появляться после голосования, тем самым заблокировав повторное голосование. Теперь я приведу основной код на jquery и немного поясню его:

<script type="text/javascript">
$(document).ready(function() {
var starsAll = 30;//Всего звезд
var voteAll = 5;//Всего голосов
var idArticle = 234;//id статьи
var starWidth = 17;//ширина одной звезды
var rating = (starsAll/voteAll); //Старый рейтинг
rating = Math.round(rating*100)/100;
if(isNaN(rating)){
rating = 0;
}
var ratingResCss = rating*starWidth; //старый рейтинг в пикселях
$("#ratDone").css("width", ratingResCss);
$("#ratStat").html("Рейтинг: <strong>"+rating+"</strong> Голосов: <strong>"+voteAll+"</strong>");

<?php
$used_ips = $sql["used_ips"];
$ipsArray = explode("|",$used_ips);
$ip = $_SERVER['REMOTE_ADDR'];
if(!in_array($ip,$ipsArray)){
?>
var coords;
var stars; //кол-во звезд при наведении
$("#rating").mousemove(function(e){
var offset = $("#rating").offset();
coords = e.clientX - offset.left; //текушая координата
stars = Math.ceil(coords/starWidth);
starsCss = stars*starWidth;
$("#ratHover").css("width", starsCss).attr("title", stars+" из 10");
});
$("#rating").mouseout(function(){
$("#ratHover").css("width", 0);
});
$("#rating").click(function(){
starsNew = stars + starsAll; //новое количество звезд
voteAll += 1;
var ratingNew = starsNew/voteAll;
ratingNew = Math.round(ratingNew*100)/100;
var razn = Math.round((rating - ratingNew)*200);
razn = Math.abs(razn);

var total = Math.round(ratingNew*starWidth);
$.ajax({
type: "GET",
url: "action.php",
data: {"id": idArticle, "rating": stars},
cache: false,
success: function(response){
if(response == 1){
$("#ratHover").css("display", "none");
$("#ratDone").animate({width: total},razn);
$("#ratBlocks").show();
$("#ratStat").html("Рейтинг: <strong>"+ratingNew+"</strong> Голосов: <strong>"+voteAll+"</strong>");
}else{
$("#ratStat").text(response);
}
}
});
return false;
});
<?php
}
?>
});
</script>

В начале у нас задается несколько переменных, значения которых должны браться из базы, но для простоты я взял конкретные цифры. Далее мы рассчитываем текущий рейтинг и выводим его в виде звезд и надписи. Далее идут строки кода, которые непосредственно отвечают за сам процесс голосования, поэтому мы добавляем небольшую проверку на php на то, что наш пользователь еще не голосовал, в противном случае просто не выводим их. Все ip адреса будут хранится в таком виде в базе 127.0.0.1|34.45.1.123|89.456.12.1 поэтому мы разбиваем эту строку на массив и проверяем есть ли ip адрес пользователя в этом массиве.

Далее идет функция, которая срабатывает при наведении мышки на блок рейтинга. В ней мы вычисляем координаты курсора, тем самым определив сколько звезд хочет поставить пользователь за статью и сразу же отображаем это наглядно изменив длину блока ratHover. Затем идет функция, когда пользователь убирает курсор мыши с рейтинга. В этом случае мы обнуляем длину блока ratHover.

Теперь самая важная часть кода, которая будет передавать в обработчик наш результат и обновлять его на странице. Здесь мы вычисляем новый рейтинг для вывода на странице, подсчитываем разницу между старым и новым рейтингом для анимации и самое важное отправляем ajax запрос обработчику (его мы рассмотрим чуть позже). В нем мы передаем число звезд, поставленное пользователем, и id нашей статьи. Далее если все прошло успешно, то обновляем результат на странице.

Теперь рассмотрим, как устроен обработчик action.php. Код я сдесь приводить не буду, а расскажу в нескольких словах, что там происходит. В начале у нас идут простенькие проверки на пришедшие данные, люди разные бывают)) Затем мы вытаскиваем старый результат из базы, обновляем его и затем уже обновляем в базе. Так же мы дописываем ip нашего пользователя чтобы он не смог проголосовать еще раз за данную статью. В демо примере я не буду делать блокировку по ip, но в исходниках это есть. Ну вот и все, в принципе при желании код можно усовершенствовать для своих нужд.

Автор: Евгений Бочкарев Урок добавлен: 25 Января 2012 в 13:25 Просмотров: 25839

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (47)

#48 grabko 12-08-2014 в 17:17
Почту дай

#49 Reegit 23-01-2015 в 23:56
А если нет базы данных? я только создаю сайт на локалке
#50 Reegit 23-01-2015 в 23:56
Для начала в базе данных нужно добавить к таблицы со статьями 3 поля total_votes – всего голосов (int 5), total_value – общий рейтинг (int 5), used_ips – поля для блокировки пользователя по ip (longtext).
#51 SasoryDex 03-02-2015 в 12:29
Скажите пожалуйста, для рейтинга нужна обязательна база данных ???
#52 Dr.SergeyP 06-02-2015 в 14:58
А есть уже готовое решение, которое я могу поставить на сайт Joomla?
Я новичок в этом деле!
#53 dim 04-09-2015 в 02:44
Все настроил под себя, кроме одного... В полной новости работает как надо но, на главной и прочих страницах с превью - засада. Поменял id на классы ,но все равно отображается одно и тоже ... С ID только в первой новости нормально - остальные пустота. Как сделать что-бы на страницах где отображаются несколько новостей, у каждой был свой рейтинг?
#54 http://ajaxs.ru/loadFile/code/ 19-01-2016 в 02:59
#55 БО 01-06-2016 в 13:36
Он почему то высчитывает не правильно,чем больше голосуешь тем меньше рейтинг и ip в базу не улетает
#56 dr 20-06-2016 в 02:48
Почему то ip в базу не вносится
#57 Gex 16-03-2017 в 11:46
имя таблицы надо поменять, в скачанном архиве таблица называется photos,
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки