Система рейтинга на php

Обработка и вывод рейтинга в PHP

В продолжении статьи о верстки рейтинга, рассмотрим PHP-скрипты системы отзывов и рейтинга в интернет-магазине.

Важно! Скрипты приведены для ознакомления и требуют болле детальной обработки входящих данных, также не стоит публиковать отзывы на сайте без модерации.

Форма добавления отзыва

На странице товара, в форме клиент пишет отзыв и ставит рейтинг, тут понадобятся звезды для формы.

Оставьте отзыв о товаре

Внешний вид формы:

Форма добавления отзыва

if (isset($_POST['send'])) < $form['prod_id'] = intval($_POST['prod_id']); // ID товара $form['rating'] = intval($_POST['rating']); // Оценка $form['name'] = $_POST['name']; // Имя $form['text'] = $_POST['text']; // Отзыв $dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль'); $sth = $dbh->prepare(" INSERT INTO `reviews` SET `prod_id` = :prod_id, `rating` = :rating, `name` = :name, `text` = :text, `date` = UNIX_TIMESTAMP() "); $sth->execute($form); >

Вывод рейтинга в товаре

Итак, отзывы и оценки собираются формой, теперь нужно вывести результат. Обычно в верху страницы выводится общая среднеарифметическая оценка.

$sth = $dbh->prepare("SELECT * FROM `reviews` WHERE `prod_id` = ? AND `rating` > 0"); $sth->execute(array($prod_id)); $data = $sth->fetchAll(PDO::FETCH_ASSOC); if (!empty($data)) < $rating = 0; $count = count($data); foreach ($data as $row) < $rating += $row['rating']; >$rating = $rating / $count; ?> 

Средний рейтинг

= 1) echo 'active'; ?>"> = 2) echo 'active'; ?>"> = 3) echo 'active'; ?>"> = 4) echo 'active'; ?>"> = 5) echo 'active'; ?>">

На основе оценок

Вывод рейтинга в товаре

Отзывы

Оставить отзыв

= 1) echo ‘active’; ?>»> = 2) echo ‘active’; ?>»> = 3) echo ‘active’; ?>»> = 4) echo ‘active’; ?>»> = 5) echo ‘active’; ?>»>

Вывод отзывов клиентов с их оценками

Рейтинг в листинге товаров

Для вывода рейтинга в списке товаров понадобится мини версия звезд, а из данных общая оценка и количество отзывов.

 
prepare(" SELECT SUM(`rating`) AS `total`, COUNT(`id`) AS `count` FROM `reviews` WHERE `prod_id` = ? AND `rating` > 0 "); $sth->execute(array($prod['id'])); $data = $sth->fetch(PDO::FETCH_ASSOC); $rating = ceil($data['rating'] / $data['count']); ?>
= 1) echo 'active'; ?>"> = 2) echo 'active'; ?>"> = 3) echo 'active'; ?>"> = 4) echo 'active'; ?>"> = 5) echo 'active'; ?>">
">

Рейтинг в листинге товаров

Сортировка по рейтингу

SELECT *, (SELECT SUM(`rating`) / COUNT(`id`) FROM `reviews` WHERE `prod_id` = `prod`.`id`) AS `rating` FROM `prod` ORDER BY `rating` DESC

Источник

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

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

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

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

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

Rate: Raiders of the Lost Ark
 class="star_1 ratings_stars">
 class="star_2 ratings_stars">
 class="star_3 ratings_stars">
 class="star_4 ratings_stars">
 class="star_5 ratings_stars">
 class="total_votes">vote data 
Rate: The Hunt for Red October
 class="star_1 ratings_stars"> 
 class="star_2 ratings_stars"> 
 class="star_3 ratings_stars"> 
 class="star_4 ratings_stars"> 
 class="star_5 ratings_stars"> 
 class="total_votes">vote data 

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

background: url('star_empty.png') no-repeat; 
background: url('star_full.png') no-repeat; 
background: url('star_highlight.png') no-repeat; 

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

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

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

font: 10px verdana, sans-serif;

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

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

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

$(this).prevAll().andSelf().addClass('ratings_over'); 
$(this).nextAll().removeClass('ratings_vote'); 
$(this).prevAll().andSelf().removeClass('ratings_over'); 

Мы используем преимущество 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. К нему можно получить доступ позже:

$('#one_of_your_widgets).data('fsr').widget_id; 

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

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

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’ — это целое число, представляющее округлённое среднее значение голосования для данного виджета. Так как, это
число 1-5, мы можем использовать его чтобы найти соответствующую звезду в виджете и обработать их
заполнив графикой в состояние ‘заполненных’. Обратите внимание, что мы используем .andSelf() чтобы включить звезду,
которую мы выбрали.

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

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

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

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

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

$('.ratings_stars').bind('click', function()  
clicked_on : $(star).attr('class'), 

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

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

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

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

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

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

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

$rating = new ratings($_POST['widget_id']); 
# either return ratings, or process a vote 
isset($_POST['fetch']) ? $rating->get_ratings() : $rating->vote(); 

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

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

private $data_file = './ratings.data.txt'; 
$all = file_get_contents($this->data_file); 

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

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

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

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

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

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

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

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

public function get_ratings()  

Источник

Читайте также:  Build site with python
Оцените статью