Как сделать рейтинг на сайте
БлогNot. Пишем простой «рейтинг со звёздочками» для сайта
Пишем простой «рейтинг со звёздочками» для сайта
На многих сайтах вы видели систему «рейтинга со звёздочками», позволяющего вашим посетителям легко оценить тот или иной материал одним кликом мыши.
Напишем собственную, по возможности, простейшую форму такого рейтинга.
Предполагается, что Вы умеете работать с локальным хостом, исходниками на HTML и PHP, а также подключаться к серверу баз данных MySQLi, если это не так, почитайте сначала материалы для начинающих.
вид рейтинга со звёздочками в браузере
Создадим на локальном хосте папку stars для файлов скрипта. Весь код будем писать в файле index.html в кодировке Юникода UTF-8 с таким вот обрамлением HTML5:
Это корректный код с точки зрения стандартного валидатора разметки. На самом деле кусочки HTML- и Javascript-кода, которые мы сейчас напишем, могут быть включены куда угодно в ваши файлы типа .html или .php .
Перед закрывающей частью </head> подключим библиотеку JQuery. Для нашей цели хватит возможностей первой её версии, так что не будем гнаться за самой новой:
Внутри тега <body> поместим форму для добавления звёздочек и вывода текущего рейтинга материала:
Важно, что в реальном скрипте идентификатор db_1 должен формироваться программно и получать после префикса db_ номер записи (идентификатор) некоторой страницы, на которой расположен рейтинг и которая сейчас оценивается.
То есть, id этого элемента получает, например, значение db_999 для записи моего блога с идентификатором 999.
Как правило, при использовании базы данных идентификатор записи Вы уже получали, формируя текущую страницу, если предположить, что он хранится в переменной с именем $id , то строчка последнего листинга изменится на
Внутри тега <style> опишем, как должны выглядеть элементы, его можно поместить сразу после <title> :
Здесь многие размеры подогнаны не очень тщательно, можно сделать лучше. Сами пять звёздочек будут фоновой картинкой, расположенной в папке приложения на локальном хосте. «Внутренность» звёздочек при этом прозрачна, а фон изображения — белый.
картинка со звёздочками, файл stars.png
За картинкой мы поместим абзац с id=»progress_id» и жёлтым фоном, а потом будем динамически менять ширину этого абзаца в ситуациях, когда мышь находится поверх звёздочек.
Клик по звёздочкам вызовет выполнение серверного скрипта, где наш выбор будет либо сохранён в базе, либо проигнорирован, если мы уже голосовали.
Внешний вид скрипта готов, можно выполнить в браузере ссылку http://localhost/stars/ и увидеть это.
Теперь добавим логику приложения, которая будет реализована в виде яваскрипта, его также можно добавить перед </head> после тега подключения JQuery:
Как видно из листинга, при клике на выбранном количестве звёздочек скрипт обратится к серверной части rating.php , которая зафиксирует выбор пользователя в базе данных и покажет среднюю текущую оценку материала.
Шаг по оценке равен 0.5, то есть, можно выставить 0 баллов, 0.5, 1, и так далее до 5.
Прежде, чем двигаться дальше, запустим сервер баз данных ( в Denwer — ссылка http://localhost/tools/phpmyadmin ) и создадим в любой удобной для нас базе две таблицы, которые понадобятся нашему серверному скрипту.
Имена таблиц будут starvotes и starballs , а кодировка базы может быть любой, ведь все поля — цифровые.
Кроме того, вторая таблица необязательна, вы можете просто добавить столбцы points и votes в ту таблицу, откуда берутся оцениваемые материалы и их идентификаторы, такие как db_1 выше в коде.
Вот SQL-запрос, который нужно выполнить к выбранной базе:
Наконец, напишем серверный скрипт rating.php и разместим его в папке приложения.
Чтобы не переполнять базу, «очень старые» записи будем стирать, за это отвечает настройка DAYS_LIMIT_TO_REPEAT , в остальном имеем обычный скрипт для работы с БД. Вот его полный листинг, разумеется, на реальном хостинге настройки подключения к базе данных придётся поменять (для удобства они собраны в начале файла в виде констант).
Вы можете посмотреть, что у нас получилось, по ссылке, а также использовать эти наработки для своих скриптов, которые нужно сделать ещё умнее и красивей 🙂
Чтобы не было проблем с Юникодом на Денвере, не забудем добавить в папку скрипта волшебный файл .htaccess
Ну а я себе в блог добавлять такой рейтинг не буду, не хочу каждый раз подгружать JQuery 🙂 Впрочем, помните, что всегда можно переписать код без него, это всего лишь библиотека, а не язык программирования.
Вёрстка "звёздного" рейтинга
Думаю многие сталкивались, на различных сайтах, с возможностью оценить что-либо.
Где-то это лайки (like), где-то «рейтинг», обычно в виде звёздочек.
Предо мной встал вопрос, какие способы есть для вёрстки именно «голосования», т.е. выбора оценки, допустим до пяти балов.
Как-то я делал вот такой вариант:
Хотелось бы увидеть какие ещё есть варианты реализации.
Приветствуется всё: js\jq, svg, и т.д.
Особенности:
Возможность получения оценки (чтобы в дальнейшем можно было обработать).
Звёздный рейтинг: решение с использованием SVG
Для некоторых веб-сайтов и платформ в интернете важно отображать оценку материала пользователями в виде звёздного рейтинга. Недавно мне довелось реализовать для одного проекта компонент звёздного рейтинга со следующими требованиями:
Производительность (без использования картинок)
Адаптивность под разный размер
Частичное заполнение звёзд (например, 3.5 или 3.2)
Легкая поддержка с помощью CSS
Я решил использовать SVG и не пожалел об этом. В данной статье будет рассмотрен данный способ реализации и как он работает в разных сценариях
Дорогой читатель, если ты ищешь другие способы решения данной задачи (не только с помощью SVG), рекомендую прочитать на сайте CSS Tricks статью «Five Methods for Five-Star Ratings» автора Alfred Genkin.
Вступление
Прежде чем мы приступим, я бы хотел продемонстрировать примеры ситуаций, в которых данный компонент должен корректно работать.
Основное внимание будет сосредоточено на создании звезды, для которой можно задать заливку, контур, а также изменить размер и заполнить лишь частично.
Базовая разметка
Во-первых, нам понадобится SVG-код изображения звезды, который можно будет использовать в браузере.
В браузере данный код отрисует чёрную звезду с шириной и высотой, равными 32px.
Доступность
Помните, что для пользователей скринридеров в атрибуте aria-label нужно будет представить рейтинг не в виде изображения, а в виде текста.
Как использовать SVG повторно
Мы можем либо просто пять раз скопировать приведённую выше разметку, либо сохранить SVG-код рисования фигуры «path» в виде шаблона и использовать повторно без дублирования разметки. Давайте сделаем это.
Сначала нужно создать SVG с нулевой шириной и высотой, чтобы он не занимал место
В этом SVG в теге <symbol> нужно задать SVG-код рисования фигуры «path», который нарисует звезду.
Элемент symbol используется для определения шаблона графических объектов, экземпляры которых потом можно многократно отрисовывать с помощью элемента <use>
В элементе <symbol> , кроме кода, который отрисует иконку звезды, важно добавить атрибут id , чтобы на него можно было сослаться позже
После всех этих действий мы сможем переиспользовать символ звезды с помощью элемента <use> . Идея заключается в том, чтобы в атрибуте xlink:href ссылаться на id созданного символа.
Стилизация звезды
Теперь, когда мы получили список звёзд, давайте рассмотрим CSS-стилизацию. Я определил для звезды жёлтый и серый цвета.
Приведённые разметка и стили дадут следующий результат
Частичное заполнение
Использование SVG даёт нам две отличных возможности. Первая — использование SVG-масок, вторая — использование SVG-градиентов.
Половина звезды с помощью SVG-маски
Суть использования масок заключается в использовании тега <mask> , задающего область, внутри которой фигура остаётся видимой, а за пределами — обрезается.
На рисунке выше продемонстрировано применение описанного эффекта, при котором видимой остаётся только часть звезды.
Чтобы реализовать это с помощью SVG, нужно сделать следующее:
Создать SVG-шаблон, который можно повторно использовать
Добавить элемент <mask> в виде прямоугольник, расположенного на оси x , и спозиционированном на 50%
Применить маску к фигуре звезды
В результате получится половина звезды, как на предыдущем изображении.
Далее встаёт вопрос о том, как мы можем с помощью маски отобразить прозрачную звезду? Благодаря SVG, мы можем поместить в <mask> несколько элементов.
После добавления ещё одного элемента, SVG-маска <mask> будет выглядеть следующим образом:
В маске белый элемент представляет то, что мы хотим показать, а чёрный — то, что хотим скрыть. Объединив их, можно создать эффект вырезанной части фигуры.
Рассмотрим следующее изображение, на котором визуально объясняется каждый элемент маски.
Обратите внимание, что белый прямоугольник спозиционирован в точке с координатами 0, 0 , в то время как чёрный — в точке 50%, 0 . Визуально это выглядит следующим образом:
Видите, что произошло? Заштрихованная часть представляет конечный результат — половину звезды. Теперь вы могли подумать о том, как нам добавить ещё одну звезду, чтобы частичное выделение было более понятно.
При использовании более яркого цвета, чем просто чёрный, мы получим эффект прозрачности. Это значит, что правая часть звезды, которая на данный момент полностью скрыта, будет иметь светлый оттенок того же цвета, что и звезда.
Давайте подведём итог с полной разметкой
Таким образом, мы получили звезду с частичной заливкой. Данное решение замечательно тем, что нам не нужно указывать два оттенка цвета. Всю работу делает маска.
Половина звезды с помощью SVG-градиента
Рассмотрим второй способ реализации частичной заливки. Во время поисков решения мне понравился вот этот ответ на Stackoverflow.
Подобно маске, в этом случае в элементе <defs> нужно определить градиент.
Обратите внимание, что у нас есть две точки останова для цвета. Первая обозначает первую половину звезды, а втора — светлый оттенок. Но недостатком данного решения является то, что нам нужно вручную задавать оба цвета.
Вот как мы можем использовать градиент.
Стилизация контура
Нам нужен способ, который будет предусматривать наличие у звезды контура. Кажется, ничего сложного. Давайте разберёмся.
Контур при использовании SVG-маски
Чтобы добавить контур, всё что нам нужно, это добавить SVG-элементу stroke . Это будет хорошо работать для полной звезды. Однако, у частичной звезды контур будет обрезанным из-за маски.
Чтобы решить эту проблему, достаточно просто создать ещё одну фигуру звезды именно для контура. Мы можем сделать это, продублировав элемент <use> , но уже без маски.
Обратите внимание, что у нас стало два элемента <use> . Один — с маской, делающей фон половины звезды полупрозрачным, другой элемент — только с контуром без применения маски.
Контур при использовании SVG-градиента
Для способа с использованием градиента нам не нужно дублировать иконку, поскольку нет маски, которая обрезала бы её. Единственное, что нам нужно сделать, так это добавить обводку.
Размер
Используя CSS-переменные и убедившись, что в SVG задан правильный атрибут viewbox , мы легко можем изменять его размер.
Скрипт звёздного рейтинга для сайта
Скрипт рейтинга может применяться для оценки статей, услуг, товаров, видео, картинок и прочего материала на сайте в виде звёзд. С его помощью можно узнать среднюю оценку пользователей.
Этот скрипт можно привязать к любому материалу. Осуществляется это посредством указания ему некоторого идентификатора посредством атрибута data-id . На одну страницу можно добавить любое количество рейтингов.
Скрипт доступен в виде исходных кодов. Проект этого звёздного рейтинга расположен на GitHub.
Последняя версия данного скрипта — 1.0.4. Эта версия доступна по этой ссылке.
Проект реализован с использованием MySQL, PHP, JavaScript и CSS. При этом скрипт работает полностью через AJAX. Это означает, что его очень просто установить на сайт. Для этого достаточно к страницам просто подключить CSS и JavaScript файлы.
Скрипт звёздного рейтинга по умолчанию имеет защиту от накрутки по IP. Если она не нужна, то её можно отключить. Отметка рейтингов, пользователь которым выставил оценку сохраняется у него на устройстве в LocalStorage. Cookie в этом скрипте не используются.
Изображения звёздочек в этом скрипте выполнено с помощью SVG графики .
По умолчанию данный скрипт настроен на выставления оценки от 1 до 5 . Но при необходимости вы можете установить любое другое количество звёзд.
Подключение скрипта звёздного рейтинга к сайту
- создать таблицы в базе данных MySQL
- поместить «process_star_rating.php» в некоторую папку проекта и указать в нём данные для подключения к базе данных;
- подключить «star_rating.css» и «star_rating.js» к страницам сайта; указать в «star_rating.js» URL к «process_star_rating.php»;
- вставить HTML-код рейтинга в необходимые места страниц сайта; задать им идентификатор с помощью атрибута data-id .
Создание таблиц в базе данных
Для работы звёздного рейтинга необходимо создать в базе данных MySQL две таблицы: star_rating и star_rating_ip .
Это действие, например можно выполнить с помощью инструмента phpmyadmin .
Для этого в phpmyadmin перейдите в вашу базу данных, нажмите на вкладку SQL и вставьте это содержимое:
Нажмите на кнопку «Вперёд».
Таблица star_rating является основной. Она состоит из следующих полей:
- id – первичный ключ, его значение будет генерироваться автоматически (AUTO_INCREMENT);
- rating_id – текстовый идентификатор рейтинга, его значение будет определять в HTML с помощью атрибута data-id ;
- rating_avg – среднее значение рейтинга;
- total_votes – количество пользователей, поставивших оценку.
Таблица star_rating_ip является дополнительной. Она предназначена для хранения IP адресов пользователей. Данная таблица используется для определения того поставил ли оценку пользователь с данным IP за этот материал или нет. Она применяется для защиты рейтинга от накрутки.
Эта таблица состоит из следующих полей:
- id – первичный ключ, его значение будет генерироваться автоматически (AUTO_INCREMENT);
- rating_id – будет определять с каким id таблицы star_rating будет связана эта запись;
- rating_value – значение рейтинга, установленного пользователем;
- rating_ip – IP пользователя.
Настройка и загрузка на сайт PHP скрипта
Для того чтобы PHP файл мог осуществлять запросы к созданным таблицам, в него необходимо внести ваши настройки для подключения к базе данных:
После сохранения настроек, переместите PHP файл «process_star_rating.php» в любую папку вашего проекта.
Включать «process_star_rating.php» в страницы этого сайта не нужно , т.к. этот звёздный рейтинг работает исключительно через AJAX.
Подключение CSS и JavaScript. Настройка URL к PHP файлу
Третий этап – это подключить к своим страницам файлы «star_rating.css» и «star_rating.js» .
При желании вместо этого вы можете включить их содержимое в свои файлы.
Файл «star_rating.css» содержит стили (оформление рейтинга), а «star_rating.js» – логику для обновления данных рейтинга на странице как после загрузки страницы, так и после выполнения оценки. Файл «star_rating.js» написан на JavaScript с применением библиотеки jQuery.
Перед подключением «star_rating.js» его необходимо отредактировать, а именно указать в нём URL к файлу «process_star_rating.php», которое хранится в переменной processURL .
Значение переменной processURL по умолчанию:
Вставка HTML-кода рейтинга в необходимые места страниц
Заключительный этап – это вставить HTML-код рейтинга в определённые места страницы и задать ему с помощью атрибута data-id уникальный идентификатор.
Настройка скрипта звёздного рейтинга
Рассмотрим решения некоторых вопросов для адаптации этого рейтинга под свой проект.
1.Как отключить ограничения по IP?
Для отключения проверки пользователя по IP необходимо в файле «process_star_rating.php» установить константе IS_CHECK_IP значение false :
После этого возможность у пользователя оценить уже оценённый материал будет ограничено только данными находящимися в Local Storage.
2. Как изменить количество звёзд?
Для того чтобы изменить количество звёзд, например на 10, необходимо выполнить следующие действия.
Изменить HTML код, а именно добавить в каждый из элементов .star-rating__bg и .star-rating__live дополнительно по 5 элементов svg . Звёздам (элементам svg ), находящихся в .star-rating__live установить соответствующее значение data-rating .
В «star_rating.js» изменить значение переменной maxStars на 10:
В «process_star_rating.php» изменить значение константы MAX_RATING на 10:
3. Как установить другой цвет звёздам?
Цвет звёздам задаётся в CSS:
Поэтому чтобы изменить цвет звёзд необходимо заменить данные значения на другие.
4. Как изменить размеры звёзд?
Установка размера звёздам выполняется с помощью CSS:
Чтобы уменьшить или увеличить размер звёзд вам нужно просто вместо 32px указать другое необходимое значение.
Исходные коды звёздного рейтинга
Скрипт звёздного рейтинга состоит из 3 файлов: «star_rating.css», «star_rating.js» и «process_star_rating.php»:
Содержимое файла «star_rating.css»:
Содержимое файла «star_rating.js»:
Содержимое файла «process_star_rating.php»:
Комментарии: 76
по 403 ошибке вопрос решился.
Но рейтинг не включается, вкладка network на файле process_star_rating.php показывает
Нашел свой косяк, все работает. Скрипт очень полезный, большое спасибо.
Но, все-таки, если можете, подскажите, пожалуйста, что нужно дописать, чтобы использовать подключение к базе данных средствами Джумлы, без указания имени и пароля?
Инструмент тестирования Google не выполняет JavaScript как Googlebot.
Поэтому ваш ajax-контент не отображается в инструменте.
В этом случае для проверки семантической разметки вам необходимо просто скопировать отрисованный код страницы в инструмент и проверить его.
На данный момент проверить, что Googlebot берёт этот код — это подождать и посмотреть, появиться ли он в отчёте структурированных данных Google или в поиске (в сниппетах).
Доброго дня.
В вашем примере после отрисовки кода itemprop=«ratingValue» сохраняется. А вот в скрипте по этой ссылке github.com/itchief/StarRating/archive/v.1.0.4.zip itemprop=«ratingValue» исчезает. При этом, itemprop=«reviewCount» остается.
Александр, есть ли успешные примеры, где google не ругается на код и выводит в своей выдачи звездочки из рейтинга?
Проверил ссылку из примеры выше cameras-online.ru/Russia/Sankt-Peterburg/Dvortsovaya_ploshchad.php получается вот так yadi.sk/d/3N2SUSotcm3Wrw
Александр, здравствуйте! Отличное руководство, спасибо. Скажите а как в pdoTools и в mFilter2, сортировать по данному рейтингу? Как можно вывести оценку пользователя?
И если возможно, есть ли какие преимущества данного способа в плане скорости работы, перед готовыми компонентами рейтинга, такими как LexRating и подобными, если теоретически?
Привет!
Это решение не связано с какой-то CMS. Его можно добавить на любой сайт, даже если он является статическим. Единственное требование — это наличие на хостинге поддержки PHP и MySQL.
Чтобы этот звёздный рейтинг связать с какими-то объектами CMS, необходимо всё это конечно прописывать самостоятельно. Например, в MODX нужно будет просто создать компонент (модель для этих таблиц). После этого его можно будет использовать с pdoTools и mFilter2.
Про оценку пользователя… Оценку пользователя можно сохранить в Local Storage, а затем её просто выводить. Если нужно сделать это решение именно для авторизированных пользоватей MODX, то это дело конечно нужно дописывать.
Про быстродействие… Решение не связанное с CMS, если оно корректно написанное, в любом случае будет работать быстрее. Т.к. не будут выполняться различные проверки и другие механизмы CMS.
Если заметили, то это решение выполняется только после загрузки страницы через AJAX. Оно вообще не увеличивается время парсинга страницы. Это первое отличие, если конечно его как-то сравнивать с LexRating. Второе — это то, что звёздочки выполнены с помощью SVG графики. Это означает что звёздочки будут выглядеть отлично на любом устройстве. Кроме этого, это решение позволяет очень просто изменить цвет и размер звёздочек.