|
|
Шаг 1. Построение HTML
Давайте создадим простую страницу, на которой представлены два фильма, и возможность их оценки. Для этого нам нужны звезды, чтобы показать рейтинг и с их помощью позволить голосовать. Также нам нужно, чтобы было видно общее количество голосов, и текущий рейтинг с точностью до одной десятой.
Давайте посмотрим на HTML/CSS
| <div class='movie_choice'> Rate: Raiders of the Lost Ark <div id="r1" class="rate_widget"> <div class="star_1 ratings_stars"></div> <div class="star_2 ratings_stars"></div> <div class="star_3 ratings_stars"></div> <div class="star_4 ratings_stars"></div> <div class="star_5 ratings_stars"></div> <div class="total_votes">vote data</div> </div> </div> <div class='movie_choice'> Rate: The Hunt for Red October <div id="r2" class="rate_widget"> <div class="star_1 ratings_stars"></div> <div class="star_2 ratings_stars"></div> <div class="star_3 ratings_stars"></div> <div class="star_4 ratings_stars"></div> <div class="star_5 ratings_stars"></div> <div class="total_votes">vote data</div> </div> </div> |
Заметили, что в HTML нет никаких графических элементов? Они будут добавлены с CSS. Мы используем HTML только чтобы создать структуру. Теперь добавим CSS.
| .rate_widget { border: 1px solid #CCC; overflow: visible; padding: 10px; position: relative; width: 180px; height: 32px; } .ratings_stars { background: url('star_empty.png') no-repeat; float: left; height: 28px; padding: 2px; width: 32px; } .ratings_vote { background: url('star_full.png') no-repeat; } .ratings_over { background: url('star_highlight.png') no-repeat; } |
Это первая часть CSS кода, которая выполняет следующие действий:
- Определяет начальное место каждой звезды
- Устанавливает классы для заполненных и выделенных звезд
- Определяет стили контейнера звезд
Вы можете использовать изображения предусмотренные в загрузке или создать свои собственные. Если Вы решили создать свой рисунок, то не забывайте о трех состояниях картинки: пустое, заполненное, и выделенное.
Далее добавляем CSS, чтобы позиционировать блок голосов, так чтобы страница соответствовала изображению приведенному в начале данного раздела.
| .total_votes { background: #eaeaea; top: 58px; left: 0; padding: 5px; position: absolute; } .movie_choice { font: 10px verdana, sans-serif; margin: 0 auto 40px auto; width: 180px; } |
Шаг 2. Добавление пользовательского интерфейса
Сейчас мы видим простую связку пустых звезд. В этой ситуации jQuery приходит к нам на помощь.
Нашим первым шагом является добавление в обработчик выделенных звезд при наведении курсора на них.
| $('.ratings_stars').hover( function() { $(this).prevAll().andSelf().addClass('ratings_over'); $(this).nextAll().removeClass('ratings_vote'); }, function() { $(this).prevAll().andSelf().removeClass('ratings_over'); set_votes($(this).parent()); } ); |
Воспользуемся jQuery, с помощью .prevAll() и .nextAll() получим звезды до и после наведения курсора мыши на них. Этот код добавляет и удаляет классы, при наведении курсора до и после.
set_votes()
Эта функция проверяет какие звезды должны быть в «заполненном» состоянии, а также тесно связана со следующим шагом, в котором берутся данные с удаленного сервера.
Шаг 3. Получение данных с сервера
Когда Вы перемещаете курсор мыши над звездами, то они выделяются. Но как насчет красной звезды, показывающие текущий голос? Для того чтобы этого достичь нам нужно получить информацию с сервера, а также написать обработчик при помощи JavaScript.
| $('.rate_widget').each(function(i) { var widget = this; var out_data = { widget_id : $(widget).attr('id'), fetch: 1 }; $.post( 'ratings.php', out_data, function(INFO) { $(widget).data( 'fsr', INFO ); set_votes(widget); }, 'json' ); }); |
Данный код выполняется сразу. Запрос поступает прямо на сервер, который получает полную информацию о каждом голосе.
|
{ $('#one_of_your_widgets).data('fsr').widget_id; |
set_votes(), окончание
После того как данные будут возвращены с сервера они передаются в set_votes().
| function set_votes(widget) { var avg = $(widget).data('fsr').whole_avg; var votes = $(widget).data('fsr').number_votes; var exact = $(widget).data('fsr').dec_avg; $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote'); $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' ); } |
Давайте разберемся:
Строка 7: ‘avg’ является целым числом представляющее округление голосов.
Строка 8: Эта строчка похожа на 7ю, но здесь мы удаляем графическое изображение добавленное раньше. Это нужно в случае падния или увеличения рейтинга.
Строка 9: Обновление для того чтобы пользователь знал более точный рейтинг и количество учтенных голосов.
Шаг 4. Начало голосования
Заключительным шагом для интерфейса пользователя это «разрешить» ему участвовать в голосовании. Мы собираемся добавить кнопку-обработчик каждой звезды. Этот обработчик будет посылать данные голосования на сервер.
Наш обработчик
| $('.ratings_stars').bind('click', function() { var star = this; var widget = $(this).parent(); var clicked_data = { clicked_on : $(star).attr('class'), widget_id : widget.attr('id') }; $.post( 'ratings.php', clicked_data, function(INFO) { widget.data( 'fsr', INFO ); set_votes(widget); }, 'json' ); }); |
Шаг 5. PHP: Создание класса
Теперь когда интерфейс закончен, мы должны создать сценарий для сервера, чтобы хранить и восстанавливать данные голосования.
Мы собираемся создать простой класс c помощью PHP, так называемой «Оценки» и использовать его чтобы обращаться к серверу с запросом о рейтинге. Используемые нами классы будут выглядеть так:
|
# New Object |
| class ratings { private $data_file = './ratings.data.txt'; private $widget_id; private $data = array(); function __construct($wid) { $this->widget_id = $wid; $all = file_get_contents($this->data_file); if($all) { $this->data = unserialize($all); } } |
Шаг 6. get_ratings()
get_ratings() предназначен для того, чтобы выводить текущие результаты для заданной статьи.
| public function get_ratings() { if($this->data[$this->widget_id]) { echo json_encode($this->data[$this->widget_id]); } else { $data['widget_id'] = $this->widget_id; $data['number_votes'] = 0; $data['total_points'] = 0; $data['dec_avg'] = 0; $data['whole_avg'] = 0; echo json_encode($data); } } |
Шаг 7. vote()
Далее мы обрабатываем входящие голоса.
| public function vote() { # Get the value of the vote preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match); $vote = $match[1]; |
Первое что нам нужно это получить значение голоса.
| $ID = $this->widget_id; # Update the record if it exists if($this->data[$ID]) { $this->data[$ID]['number_votes'] += 1; $this->data[$ID]['total_points'] += $vote; } # Create a new one if it does not else { $this->data[$ID]['number_votes'] = 1; $this->data[$ID]['total_points'] = $vote; } |
Окончание
| $this->data[$ID]['dec_avg'] = round( $this->data[$ID]['total_points'] / $this->data[$ID]['number_votes'], 1 ); $this->data[$ID]['whole_avg'] = round( $this->data[$ID]['dec_avg'] ); file_put_contents($this->data_file, serialize($this->data)); $this->get_ratings(); } |
Заключение
Это не является 100% решением. Чтобы расширить данный проект мы можем сохранять куки, для того чтобы люди голосовали только один раз или даже возможно делать запись IP адреса. Так же есть вероятность того что запись двух первых голосов произошла одновременно, а ведь только один голос должен быть зарегистрированным. И все же это отличный старт для начала отслеживания голосов на Ваших сайтах.
Источник урока: http://net.tutsplus.com/
Данный урок подготовлен для Вас командой сайта http://web-master4ree.com/
