Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Создание 5-и звёздочной рейтинговой системы с помощью jQuery, AJAX и PHP

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

В этом уроке вы узнаете как создать рейтинговую систему с помощью AJAX, PHP и jQuery. Голоса будут регистрироваться и обновляться в режиме реального времени с помощью волшебства AJAX, также мы используем всю мощь PHP и вам даже не понадобится база данных!


Шаг 1. Создание HTML

Мы создадим простую страницу, на которой будут списки двух фильмов и возможность оценить их. Это значит, что нам понадобятся звезды, чтобы показать текущий рейтинг и разрешить голосование. Нам также необходимо создать область, чтобы отобразить количество голосов и текущий рейтинг округлённый до одной десятой.

Давайте взглянем на HTML/CSS

Вы заметили, что в нашем HTML нет графики? Она будут добавлена при помощи CSS. Мы используем HTML для создания фрэймворка в котором будет работать наш виджет. Теперь пора добавить CSS.

Первая часть CSS будет выполнять следующее:

  • Создает "пустое" пространство для расположения каждой звезды
  • Задает классы для заполненных звёзд и выделенных звёзд
  • Определяет и стилизует контейнеры для звёзд.

Можно использовать графику размещённую в разделе загрузки создать свою. Должен быть графический объект для каждого из трех состояний объекта: пустой, заполненный и выделенный.

Затем мы добавляем ещё немного CSS для определения места расположения общего количества голосов и центрируем виджеты, так чтобы страница соответствовала рисунку в начале урока.


Шаг 2. Добавление интерактивности

На данный момент у нас есть кучка очень простых пустых звёзд, но они пока не делают ничего важного. Здесь к нам на помощь приходит jQuery.

Нашим первым шагом будет создание mouseover и mouseout обработчиков для звезд. Нам нужно выделить звезду при наведении на неё мышью, а также все предыдущие звезды.

Мы используем преимущество jQuery методов .prevAll() и .nextAll() чтобы отследить звезду на которую наведён курсор.

Приведенный выше код добавляет и удаляет классы которые выделят звезду с наведённым на неё курсором мыши, а другие звезды останутся в обычном состоянии.

Как насчет set_votes()?

Это функция, которая проверяет, какие звезды должны быть в состоянии "заполненных", и приближает нас к следующему шагу, где мы получим данные с удалённого сервера.


Шаг 3. Получение данных с сервера

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

Этот блок кода - фактически весь написан на JavaScript - идет в блоке document.ready. Этот код выполняется сразу. Он отправляет запрос на сервер и получает информацию о каждом виджете голосования на странице.

Сначала мы создадим объект, out_data, который содержит информацию, которую мы посылаем на сервер. Наш скрипт PHP ожидает команду 'fetch' когда он будет обрабатывать данные, поэтому мы разместим её здесь. Мы также укажем ID виджета, который позволяет узнать, какие данные мы получили на стороне сервера. Когда ответ функции будет вызван, он будет содержать объект JavaScript, который выглядит следующим образом:

Метод .data() это волшебство jQuery, которое позволит привязать полученные данные к DOM
объекту.

Если вы внимательно посмотрите на код, вы увидите, что мы берем этот объект (хранящийся в переменной INFO) и
делаем что-то с ним с помощью .data () method.

.data () метод - это метод, который содержит немного магии jQuery, она позволяет вам связывать произвольные данные с DOM
object В этом случае мы сохраняем данные в div widget. К нему можно получить доступ позже:

Наконец, set_votes().

После того, как данные были возвращены с сервера, они передаются косвенно на set_votes ().

Первые три строки предназначены для чтения, так как эти имена переменных довольно длинные. Итак, давайте посмотрим, что здесь происходит.

Строка 7: 'avg' - это целое число, представляющее округлённое среднее значение голосования для данного виджета. Так как, это
число 1-5, мы можем использовать его чтобы найти соответствующую звезду в виджете и обработать их
заполнив графикой в состояние 'заполненных'. Обратите внимание, что мы используем .andSelf() чтобы включить звезду,
которую мы выбрали.

Строка 8: Очень похожа на предыдущую строку, здесь мы удаляем заполненность из новых звёзд. Это
необходимо в случае, если среднее значение для этого виджета уменьшилось с момента последнего голосования.

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


Шаг 4. Голосование начинается

Последним шагом для пользовательского интерфейса является включение голосования. Мы собираемся добавить обработчик кликов к каждой из звезд. Этот обработчик кликов будет отвечать за отправку данных голосования на сервер.

Здесь вы видите обработчик кликов.

В этом блоке кода мы начинаем с создания некоторых переменных не только для ясности, но и в этом случае, для использования их в обратном вызове .post. Помните, что для звезд назначен обработчик на событие нажатия, поэтому нам нужна вторая переменная, виджет, чтобы получить объект, содержащий данные.

Сначала мы настраиваем наши исходные данные, которые мы размещаем в объекте clicked_data. Мы получаем класс, с именем в формате star_#, который определяет какой голос получен, и готовим его к отправке на сервер, а также идентифицируем виджет.

ID виджета это краеугольный камень нашей системы. Это позволяет нам найти наши данные и легко отображать эти данные для посетителей.

И наконец, мы отправляем эту информацию на сервер. Сервер добавит текущие итоги голосования и отправит информацию содержащую обновленные данные, обратно в браузер. Значения, отображаемые в виджете затем обновляются с помощью set_votes().


Шаг 5. PHP: Создание класса

Теперь, когда пользовательский интерфейс завершён, нам нужно создать сценарий на сервере для хранения и получения данных голосования.

Мы собираемся создать очень простой класс на PHP, который будет называться 'Ratings', и использовать его для обработки запросов сервера в нашей рейтинговой системе. В нём будет всего два метода, а также вызов. Использование нашего класса будет выглядеть примерно так:

Если мы вернёмся к четвёртому разделу, мы увидим, что набор данных полученных с переменной 'fetch' - это то, что мы ищем здесь, в пятой строке. Если этого нет, мы обрабатываем голос.

Первое, на что мы обратим внимание, это начало класса, а если говорить точнее, конструктор.

Функиции serialize() и unserialize, это отличный способ легко сохранять
PHP данные на диск.

Много всего происходит здесь, на нескольких строках кода, поэтому я расскажу только о самых важных моментах.

Строка 3: Нам нужно подготовить текстовый файл, который мы будем использовать для хранения данных. Мы не используем базы данных для этого проекта, хотя это можно легко осуществить. Простого файла будет достаточно для выполнения наших задач.

Строка 7: Конструктор. Мы вызываем его, когда мы создали наш объект и сохраняем ID виджета.

Строка 11: Пытаемся загрузить текстовый файл. Если файл не существует, ничего страшного, но на некоторых системах вам нужно будет создать его заранее и предоставить разрешения для чтения и записи в PHP.

Строка 14: Важная строка. Она получает данные из текстового файла - если такой есть - и выполняет функцию unserializes(). Этот файл содержит сложный PHP-массив, который преобразуется в обычный текст, с помощью функции serialize(), позволит нам его сохранить и прочитать как массив позже.


Шаг 6. Метод get_ratings().

Этот метод вызывается как собственный, или из метода vote(). Он находит данные для ID виджета и возвращает его на запрашиваемую страницу, в формате JSON.

Это только выглядит сложно, на самом деле это довольно просто. Первое, что мы сделаем, это проверим, имеется ли у массива, хранящегося в $this->data, ключ, соответствующий ID нашего виджета. Если это так, мы просто возвращаем эту информацию, поскольку это данные виджета, которые запрашиваются на странице.

Мы не будем ничего делать с этими данными, потому что они уже в массиве. $this->data - это просто массив содержащий массивы. Мы кодируем массив, который нам нужен с помощью json_encode() и отправляем его обратно в браузер.

Если нет данных для виджета, который мы запросили, мы создаём запись с нулевыми значениями и отправляем её обратно в браузер.

Шаг 7.  Метод Vote()

Далее, нам нужно создать метод для обработки входящих голосов. Когда метод завершается, он должен вызвать get_ratings(), чтобы отправить обновленные данные обратно в браузер.

Начало метода

Первое, что мы делаем, это получаем результат голосования. Вспомните, что где-то в 'clicked_on' было имя класса в формате star_#. "star_4", например. Чтобы получить это значение, мы используем регулярное выражение и получаем значение для $match[1].

Середина метода

Здесь мы сохраняем $this->widget_id в $ID для ясности - иначе, следующий код будет непонятным.

Мы проверяем, существует ли информация для ID, и, если и если это так, мы прибавляем голос к общему числу и добавляем баллы полученного голоса. Это запускает обработку всех голосов; так что, если один человек дает пять звезд и еще один, три, всего будет восемь очков.

Если запись не существует, мы создаем таковую, с одним голосом, и добавляем баллы из полученного голосования.

Завершение

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

В четвертой строке мы сохраним измененные данные обратно на диск после его обработки функцией serialize(). После того, как данные сохранены, мы вызываем $this->get_ratings(), чтобы отправить новые, обновленные данные в браузер.


Заключение

Простоты ради скажу, что это не 100% готовое решение. Чтобы усовершенствовать проект, мы должны сохранять файлы cookie или записывать IP-адрес, чтобы убедиться в том, что пользователи голосовали только один раз. Также возможна ситуация в которой два одновременных нажатия пользователем должны быть сохранены как один голос. Однако, это отличное начало и проект прекрасно подойдёт для учёта голосов на вашем сайте в большинстве случаев. Появились идеи? Спасибо за чтение!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.