Скрипт звёздного рейтинга для сайта

В этой статье рассмотрим скрипт рейтинга в виде звёзд, построенный на PHP и MySQL, и работающий без обновления страницы.
Обзор скрипта звёздного рейтинга
Скрипт рейтинга может применяться для оценки статей, услуг, товаров, видео, картинок и прочего материала на сайте в виде звёзд. С его помощью можно узнать среднюю оценку пользователей.
Этот скрипт можно привязать к любому материалу. Осуществляется это посредством указания ему некоторого идентификатора посредством атрибута 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 и вставьте это содержимое:
CREATE TABLE `star_rating` ( `id` int(10) UNSIGNED NOT NULL, `rating_id` varchar(20) NOT NULL, `rating_avg` float NOT NULL, `total_votes` int(10) UNSIGNED NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `star_rating_ip` ( `id` int(10) UNSIGNED NOT NULL, `rating_id` int(10) UNSIGNED NOT NULL, `rating_value` tinyint(2) UNSIGNED NOT NULL, `rating_ip` varchar(16) NOT NULL DEFAULT '0.0.0.0' ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ALTER TABLE `star_rating` ADD PRIMARY KEY (`id`); ALTER TABLE `star_rating_ip` ADD PRIMARY KEY (`id`), ADD KEY `rating_id` (`rating_id`); ALTER TABLE `star_rating` MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT; ALTER TABLE `star_rating_ip` MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT;
Нажмите на кнопку «Вперёд».

Таблица 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 файл мог осуществлять запросы к созданным таблицам, в него необходимо внести ваши настройки для подключения к базе данных:
const DB_HOST = 'localhost', // хост DB_NAME = 'mydb', // имя базы данных DB_CHARSET = 'utf8', // кодировка DB_USER = 'root', // имя пользователя MySQL DB_PASSWORD = '', // пароль пользователя MySQL MAX_RATING = 5, IS_CHECK_IP = true;
После сохранения настроек, переместите PHP файл «process_star_rating.php» в любую папку вашего проекта.
Включать «process_star_rating.php» в страницы этого сайта не нужно, т.к. этот звёздный рейтинг работает исключительно через AJAX.
Подключение CSS и JavaScript. Настройка URL к PHP файлу
Третий этап – это подключить к своим страницам файлы «star_rating.css» и «star_rating.js».
... <link rel="stylesheet" href="star_rating.css"> ... <script src="star_rating.js"></script>
При желании вместо этого вы можете включить их содержимое в свои файлы.
Файл «star_rating.css» содержит стили (оформление рейтинга), а «star_rating.js» – логику для обновления данных рейтинга на странице как после загрузки страницы, так и после выполнения оценки. Файл «star_rating.js» написан на JavaScript с применением библиотеки jQuery.
Перед подключением «star_rating.js» его необходимо отредактировать, а именно указать в нём URL к файлу «process_star_rating.php», которое хранится в переменной processURL
.
Значение переменной processURL
по умолчанию:
processURL = '/process_star_rating.php',
Вставка HTML-кода рейтинга в необходимые места страниц
Заключительный этап – это вставить HTML-код рейтинга в определённые места страницы и задать ему с помощью атрибута data-id
уникальный идентификатор.
<!-- star rating data-id="page-1" --> <div class="star-rating__container"> <div class="star-rating__wrapper"> <div class="star-rating__avg"></div> <div class="star-rating" data-id="page-1"> <div class="star-rating__bg"> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> </div> <div class="star-rating__live"> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="1"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="2"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="3"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="4"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="5"> <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"> </path> </svg> </div> </div> <div class="star-rating__votes"></div> </div> </div>
Настройка скрипта звёздного рейтинга
Рассмотрим решения некоторых вопросов для адаптации этого рейтинга под свой проект.
1.Как отключить ограничения по IP?
Для отключения проверки пользователя по IP необходимо в файле «process_star_rating.php» установить константе IS_CHECK_IP
значение false
:
IS_CHECK_IP = false;
После этого возможность у пользователя оценить уже оценённый материал будет ограничено только данными находящимися в Local Storage.
2. Как изменить количество звёзд?

Для того чтобы изменить количество звёзд, например на 10, необходимо выполнить следующие действия.
Изменить HTML код, а именно добавить в каждый из элементов .star-rating__bg
и .star-rating__live
дополнительно по 5 элементов svg
. Звёздам (элементам svg
), находящихся в .star-rating__live
установить соответствующее значение data-rating
.
<div class="star-rating__container"> <div class="star-rating__wrapper"> <div class="star-rating__avg"></div> <div class="star-rating" data-id="page-8"> <div class="star-rating__bg"> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> </div> <div class="star-rating__live"> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="1"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="2"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="3"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="4"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="5"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="6"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="7"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="8"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="9"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> <svg class="star-rating__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-rating="10"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> </div> </div> <div class="star-rating__votes"></div> </div> </div>
В «star_rating.js» изменить значение переменной maxStars
на 10:
maxStars = 10,
В «process_star_rating.php» изменить значение константы MAX_RATING
на 10:
MAX_RATING = 10,
3. Как установить другой цвет звёздам?

Цвет звёздам задаётся в CSS:
.star-rating__bg { color: #e0e0e0; /* фоновый цвет звёздочек */ display: flex; } .star-rating_active:hover .star-rating__live { overflow: auto; width: 100% !important; color: #e0e0e0; /* фоновый цвет звёздочек */ } .star-rating__live { display: flex; color: #ffb74d; /* цвет звёздочек для указания текущего рейтинга */ overflow: hidden; position: absolute; top: 0; left: 0; } .star-rating__item_active { color: #fb8c00; /* цвет звездочек при наведении на них */ cursor: pointer; transition: color 0.1s ease-in-out; }
Поэтому чтобы изменить цвет звёзд необходимо заменить данные значения на другие.
4. Как изменить размеры звёзд?
Установка размера звёздам выполняется с помощью CSS:
.star-rating__item { width: 32px; height: 32px; flex: 0 0 32px; }
Чтобы уменьшить или увеличить размер звёзд вам нужно просто вместо 32px указать другое необходимое значение.
Например, 50px:
.star-rating__item { width: 50px; height: 50px; flex: 0 0 50px; }
Исходные коды звёздного рейтинга
Скрипт звёздного рейтинга состоит из 3 файлов: «star_rating.css», «star_rating.js» и «process_star_rating.php»:
Содержимое файла «star_rating.css»:
.star-rating__container { display: inline-block; } .star-rating__wrapper { position: relative; display: flex; } .star-rating { display: inline-block; position: relative; user-select: none; } .star-rating__bg { color: #e0e0e0; display: flex; } .star-rating__live { display: flex; color: #ffb74d; overflow: hidden; position: absolute; top: 0; left: 0; } .star-rating_active:hover .star-rating__live { overflow: auto; width: 100% !important; color: #e0e0e0; } .star-rating__item_active { color: #fb8c00; cursor: pointer; transition: color 0.1s ease-in-out; } .star-rating__item { width: 32px; height: 32px; flex: 0 0 32px; } .star-rating__avg { display: flex; align-items: center; justify-content: center; font-weight: bold; text-align: center; width: 2em; } .star-rating__votes { display: flex; align-items: center; justify-content: center; padding-left: 0.5em; font-size: 0.875em; }
Содержимое файла «star_rating.js»:
$(function () { var processURL = '/process_star_rating.php', maxStars = 5, output = [], ratingStarClass = '.star-rating_active .star-rating__item'; if (localStorage.getItem('star_rating')) { output = JSON.parse(localStorage.getItem('star_rating')); } $('.star-rating').each(function () { var _this = this, ratingId = $(_this).attr('data-id'); $.post(processURL, { 'action': 'get_rating', 'id': ratingId }) .done(function (data) { if (data['result'] === 'success') { var ratingAvg = parseFloat(data['data']['rating_avg']), totalVotes = data['data']['total_votes']; $(_this).find('.star-rating__live').css('width', ratingAvg.toFixed(1) / maxStars * 100 + '%'); $(_this).closest('.star-rating__wrapper').find('.star-rating__avg').text(ratingAvg.toFixed(1)); $(_this).closest('.star-rating__wrapper').find('.star-rating__votes').text('оценок: ' + totalVotes); if (data['data']['is_vote'] !== undefined) { if (data['data']['is_vote'] === false) { if (output.indexOf(ratingId) < 0) { $(_this).addClass('star-rating_active'); } } } else { if (output.indexOf(ratingId) < 0) { $(_this).addClass('star-rating_active'); } } } }); }); var starRatingItems = $('.star-rating__live .star-rating__item'); starRatingItems.on('mouseover', function () { var rating = $(this).attr('data-rating'), items = $(this).closest('.star-rating__live').find('.star-rating__item'); if (!$(this).closest('.star-rating').hasClass('star-rating_active')) { return; } items.each(function (index, element) { if (index < rating) { if (!$(element).hasClass('star-rating__item_active')) { $(element).addClass('star-rating__item_active'); } else { if ($(element).hasClass('star-rating__item_active')) { $(element).removeClass('star-rating__item_active'); } } } }) }); starRatingItems.on('mouseout', function () { if (!$(this).closest('.star-rating').hasClass('star-rating_active')) { return; } $(this).closest('.star-rating__live').find('.star-rating__item').removeClass('star-rating__item_active'); }); $(document).on('click', ratingStarClass, function (e) { e.preventDefault(); var _this = this, ratingId = $(_this).closest('.star-rating').attr('data-id'), rating = $(_this).attr('data-rating'); $.post(processURL, { 'action': 'set_rating', 'id': ratingId, 'rating': rating }) .done(function (data) { if (!$.isEmptyObject(data)) { if (data['result'] === 'success') { var ratingAvg = parseFloat(data['data']['rating_avg']), totalVotes = data['data']['total_votes'], output = []; $(_this).closest('.star-rating').removeClass('star-rating_active') .find('.star-rating__item_active').removeClass('star-rating__item_active') .end().find('.star-rating__live').css('width', ratingAvg.toFixed(1) / maxStars * 100 + '%'); $(_this).closest('.star-rating__wrapper') .find('.star-rating__avg').text(ratingAvg.toFixed(1)) .end().find('.star-rating__votes').text('оценок: ' + totalVotes); if (localStorage.getItem('star_rating')) { output = JSON.parse(localStorage.getItem('star_rating')); } if (output.indexOf(ratingId) < 0) { output.push(ratingId); } localStorage.setItem('star_rating', JSON.stringify(output)); } } }); }); });
Содержимое файла «process_star_rating.php»:
<?php const DB_HOST = 'localhost', DB_NAME = 'mydb', DB_CHARSET = 'utf8', DB_USER = 'root', DB_PASSWORD = '', MAX_RATING = 5, IS_CHECK_IP = false; function log_write($message) { $log = date('d.m.Y H:i:s') . PHP_EOL . $message . PHP_EOL . '-------------------------' . PHP_EOL; file_put_contents('error.log', $log, FILE_APPEND); } function getIp() { $keys = [ 'HTTP_CLIENT_IP', 'HTTP_X_FORWARDED_FOR', 'REMOTE_ADDR' ]; foreach ($keys as $key) { if (!empty($_SERVER[$key])) { $ip = trim(end(explode(',', $_SERVER[$key]))); if (filter_var($ip, FILTER_VALIDATE_IP)) { return $ip; } } } } if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') { exit(json_encode($output)); } if ($_SERVER['REQUEST_METHOD'] != 'POST') { exit(json_encode($output)); } $output['result'] = 'error'; $count = 0; $totalVotes = 1; if (empty($_POST['id'])) { log_write('Не передан id!'); exit(json_encode($output)); } $ratingId = filter_var($_POST['id'], FILTER_SANITIZE_STRING); if (strlen($ratingId) == 0) { log_write('Параметр id имеет в качестве значения пустую строку!'); exit(json_encode($output)); } try { $conn = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=' . DB_CHARSET, DB_USER, DB_PASSWORD); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { log_write('Подключение не удалось: ' . $e->getMessage()); exit(json_encode($output)); } switch ($_POST['action']) { case 'get_rating': $output['data'] = [ 'rating_avg' => 0, 'total_votes' => 0 ]; try { $sql = 'SELECT id, rating_avg, total_votes FROM star_rating WHERE rating_id = :rating_id LIMIT 1'; $result = $conn->prepare($sql); $data = ['rating_id' => $ratingId]; $result->execute($data); $row = $result->fetch(PDO::FETCH_ASSOC); if ($row) { $output['data'] = [ 'rating_avg' => $row['rating_avg'], 'total_votes' => $row['total_votes'] ]; if (IS_CHECK_IP == true) { $sql = 'SELECT count(*) FROM star_rating_ip WHERE rating_id = :rating_id AND rating_ip = :rating_ip'; $result = $conn->prepare($sql); $data = ['rating_id' => $row[id], 'rating_ip' => getIp()]; $result->execute($data); $countRows = $result->fetchColumn(); if ($countRows == 0) { $output['data']['is_vote'] = false; } else { $output['data']['is_vote'] = true; } } } } catch (PDOException $e) { log_write('Ошибка выборки данных: ' . $e->getMessage()); break; } $output['result'] = 'success'; break; case 'set_rating': if (empty($_POST['rating'])) { log_write('Не получено значение рейтинга!'); break; } $id = 0; $rating = (int)$_POST['rating']; if ($rating < 1 || $rating > MAX_RATING) { log_write('Полученное значение рейтинга ' . $rating . ' лежит вне допустимого диапазона!'); break; } $ratingAvg = $rating; try { $sql = 'SELECT id, rating_avg, total_votes FROM star_rating WHERE rating_id = :rating_id LIMIT 1'; $result = $conn->prepare($sql); $data = ['rating_id' => $ratingId]; $result->execute($data); $row = $result->fetch(PDO::FETCH_ASSOC); if ($row) { $count = 1; $id = $row['id']; $ratingAvg = $row['rating_avg']; $totalVotes = $row['total_votes']; } } catch (PDOException $e) { log_write('Ошибка выборки данных: ' . $e->getMessage()); break; } if ($count == 0) { try { $result = $conn->prepare('INSERT INTO star_rating (rating_id, rating_avg, total_votes) VALUES (:rating_id, :rating_avg, :total_votes)'); $result->execute(['rating_id' => $ratingId, 'rating_avg' => $ratingAvg, 'total_votes' => $totalVotes]); if (IS_CHECK_IP == true) { try { $sql = 'SELECT id FROM star_rating WHERE rating_id = :rating_id LIMIT 1'; $result = $conn->prepare($sql); $data = ['rating_id' => $ratingId]; $result->execute($data); $row = $result->fetch(PDO::FETCH_ASSOC); if ($row) { try { $result = $conn->prepare('INSERT INTO star_rating_ip (rating_id, rating_value, rating_ip) VALUES (:rating_id, :rating_value, :rating_ip)'); $result->execute(['rating_id' => $row['id'], 'rating_value' => $rating, 'rating_ip' => getIp()]); } catch (PDOException $e) { log_write('Ошибка добавления новой записи в таблицу star_rating_ip: ' . $e->getMessage()); break; } } } catch (PDOException $e) { log_write('Ошибка выборки данных: ' . $e->getMessage()); break; } } } catch (PDOException $e) { log_write('Ошибка добавления новой записи в базу: ' . $e->getMessage()); break; } } else { $ratingAvg = ($ratingAvg * $totalVotes + $rating) / ($totalVotes + 1); $totalVotes = $totalVotes + 1; if (IS_CHECK_IP == true) { $ip = getIp(); $sql = 'SELECT count(*) FROM star_rating_ip WHERE rating_id = :rating_id AND rating_ip = :rating_ip'; $result = $conn->prepare($sql); $data = ['rating_id' => $id, 'rating_ip' => $ip]; $result->execute($data); $countRows = $result->fetchColumn(); if ($countRows > 0) { break; } try { $result = $conn->prepare('INSERT INTO star_rating_ip (rating_id, rating_value, rating_ip) VALUES (:rating_id, :rating_value, :rating_ip)'); $result->execute(['rating_id' => $id, 'rating_value' => $rating, 'rating_ip' => $ip]); } catch (PDOException $e) { log_write('Ошибка добавления новой записи в таблицу star_rating_ip: ' . $e->getMessage()); break; } } $sql = 'UPDATE star_rating SET rating_avg=:rating_avg, total_votes=:total_votes WHERE rating_id=:rating_id'; $data = [ 'rating_id' => $ratingId, 'rating_avg' => $ratingAvg, 'total_votes' => $totalVotes ]; try { $conn->prepare($sql)->execute($data); } catch (PDOException $e) { log_write('Ошибка добавления записи с rating_id = ' . $ratingId . ': ' . $e->getMessage()); break; } } $output['result'] = 'success'; $output['data'] = [ 'rating_avg' => $ratingAvg, 'total_votes' => $totalVotes ]; break; } header('Content-Type: application/json'); exit(json_encode($output));
Сама разобраться не могу :(
Файл process_star_rating.php на вкладке network имеет статус 403 forbidden.
Спасибо
Но рейтинг не включается, вкладка network на файле process_star_rating.php показывает
{«result»:«error»,«data»:{«rating_avg»:0,«total_votes»:0}}
Но, все-таки, если можете, подскажите, пожалуйста, что нужно дописать, чтобы использовать подключение к базе данных средствами Джумлы, без указания имени и пароля?
не могу настроить работу звездного рейтинга.
вот код который на сайте.
отображается 5 желтых звезд и все. как статика
Просто замените svg-графику на иконки Font Awesome:
После этого необходимо будет поправить стили, т.к. ширина изменится и размер звездочек уже нужно устанавливать с помощью font-size:
Тут стили уже настраиваете так, как вам нужно.
Где и что необходимо вписать?
К Product
Но возник другой вопрос как сделать, чтобы значения ratingValue и reviewCount вставлялись автоматически? Сейчас они прописаны руками в нужные поля.
если их удалить — возникают ошибки с разметкой.
bienvenidospb.com/tour-2-dias-por-san-petersburgo-en-espanol.html
Выдает 2 ошибки
Поэтому ваш ajax-контент не отображается в инструменте.
В этом случае для проверки семантической разметки вам необходимо просто скопировать отрисованный код страницы в инструмент и проверить его.
На данный момент проверить, что Googlebot берёт этот код — это подождать и посмотреть, появиться ли он в отчёте структурированных данных Google или в поиске (в сниппетах).
Райтинг с микроразметкой AggregateRating находится на GitHub и в архиве проекта в каталоге with_aggregaterating. Рейтинг без микроразметки schema.org находится в корне проекта.
https://search.google.com/structured-data/testing-tool/u/0/
Ссылка на проверку.
В вашем примере после отрисовки кода itemprop=«ratingValue» сохраняется. А вот в скрипте по этой ссылке github.com/itchief/StarRating/archive/v.1.0.4.zip itemprop=«ratingValue» исчезает. При этом, itemprop=«reviewCount» остается.
И если возможно, есть ли какие преимущества данного способа в плане скорости работы, перед готовыми компонентами рейтинга, такими как LexRating и подобными, если теоретически?
Это решение не связано с какой-то CMS. Его можно добавить на любой сайт, даже если он является статическим. Единственное требование — это наличие на хостинге поддержки PHP и MySQL.
Чтобы этот звёздный рейтинг связать с какими-то объектами CMS, необходимо всё это конечно прописывать самостоятельно. Например, в MODX нужно будет просто создать компонент (модель для этих таблиц). После этого его можно будет использовать с pdoTools и mFilter2.
Про оценку пользователя… Оценку пользователя можно сохранить в Local Storage, а затем её просто выводить. Если нужно сделать это решение именно для авторизированных пользоватей MODX, то это дело конечно нужно дописывать.
Про быстродействие… Решение не связанное с CMS, если оно корректно написанное, в любом случае будет работать быстрее. Т.к. не будут выполняться различные проверки и другие механизмы CMS.
Если заметили, то это решение выполняется только после загрузки страницы через AJAX. Оно вообще не увеличивается время парсинга страницы. Это первое отличие, если конечно его как-то сравнивать с LexRating. Второе — это то, что звёздочки выполнены с помощью SVG графики. Это означает что звёздочки будут выглядеть отлично на любом устройстве. Кроме этого, это решение позволяет очень просто изменить цвет и размер звёздочек.