PHP скрипт оцінки на PHP jQuery AJAX

На прохання користувачів, вихідні файли скрипту оцінок: demo_stars.zip

Крок 1 – Побудова дизайнуHTML +CSS

Ми створимо просту сторінку, на якій перелічені два матеріали, які ми оцінюватимемо. Це означає, що нам необхідно знайти картинки п'яти зірок, щоб мати можливість оцінки за 5 бальною шкалою. Також нам необхідно вивести область максимально можливої оцінки, та й сам рейтинг матеріалу з точністю до одного знака після коми.

Давайте подивимося на HTML і CSS код системи оцінок:

Слід зазначити, що графіки HTML немає. Вона є у CSS коді. Ми використовуємо HTML лише для прикладу для створення робочого середовища, щоб протестувати систему оцінок. Давайте подивимося CSS код:

Цей код CSS служить для кількох речей:

Визначає місце за промовчанням для кожної порожньої зірки
Встановлює класи для заповнених (активних) зірок та класи для постійних активних зірок. Далі зрозумієте про що я.
Визначає стиль контейнера зірок.

Ви можете скористатися нашими вихідними джерелами або створити власні. Тільки повинні бути зображення трьох типів: порожня оцінка, виконана, що підсвічує.

Крок 2 - Створюємо інтерактивність в інтерфейсі

На даний момент ми маємо просто набір зірок, які при наведенні в конкретну точку оцінювання не реагують ні на що. Це ми виправимо за допомогою jQuery.

Нашою першою справою буде створення оброблювачів подій, що ми отримаємо. Але, щоб виділялися поточна зірка і всі попередні зірки.

Користуючись методами prevAll() та NextAll(), отримуємо попередні та наступні зірки в реальному часіпри наведенні миші ними. Вище наданий код додає та видаляє класи при наведенні та відведенні миші від зірок, таким чином підсвічуючи їх.

Що робить set_votes()?

Це функція, яка визначає, які зірки мають бути залиті до певного рівня, а які після цього порожні. Вона отримує дані віддаленого сервера.

Крок 3 – Отримання даних із сервера

Зараз ми реалізуємо виділення поточного рейтингу оцінок, а точніше зробимо червоними зірки, що показують поточну позицію в рейтингу оцінок. Щоб це вдалося нам необхідно отримати дані з сервера і обробити їх кількома функціями javascript.

Це JavaScript код, який пишеться в тілі документа. Він виконується відразу: надсилає запит до сервера та отримує інформацію для кожного з блоків рейтингу оцінок.

На початку коду ми створюємо об'єкт out_data, який містить інформацію, яку ми надсилаємо на сервер. Також вказуємо наш PHP скрипт, який буде виконатися при запиті отримання даних із сервера. Також вказуємо ID конкретного контейнера оцінок, який дозволяє серверній стороні знати, які дані необхідно вислати. Коли виконається функція у відповідь на сервері, javascript отримує об'єкт, який виглядає таким чином:

Якщо уважно подивіться код, то побачите, що ми беремо цей об'єкт (він зберігається у змінної INFO) і щось робимо з ним через метод data(). Цей метод дозволяє пов'язати довільні дані з об'єктом DOM. У цьому випадку ми зберігаємо дані в div блок кожного контейнера рейтингу оцінок. Пізніше ми можемо отримати дані до них таким чином:

Після отримання даних із сервера передаємо їх у функцію set_votes(), про яку вже згадувалося раніше. Нижче код цієї функції:

Перші три рядки, длякомпактності коду, вони пишуть дані у змінні.

7 рядок: avg це ціле число від 1 до 5, яке використовується для заповнення зірок, що відображають середньостатистичну оцінку.

8 рядок: за синтаксисом схожа з 7 рядком, тільки в цьому випадку ми заповнюємо інші зірки графіка.

9 рядок: Оновлює інформацію у сірому блоці під рейтингом оцінок, показує загальну кількість голосів та більш точну оцінку конкретного матеріалу.

Крок 4 – Оцінюємо матеріал

Останнім кроком створення інтерфейсу користувача є надання можливості оцінювання. Ми створимо обробник подій натискання на кожну зірок. Цей обробник клацання буде відповідати за відправлення даних на сервер. Нижче код цього оброблювача:

Цей код ми починаємо писати зі створення деяких змінних, не тільки для чистоти коду, але в цьому випадку вони використовуються всередині .post. Також у цих змінних вказується яка зірка і з якого блоку рейтингу оцінок натиснута. Далі ми визначаємо дані для відправки на сервер (clicked_data): визначаємо який клас стилю у зірки, він містить порядковий номер зірки і само собою оцінку користувача, також отримуємо ID блоку рейтингу оцінок.

Наприкінці обробника ми надсилаємо дані на сервер. Серверна сторона програми додає голос (оцінку) і повертає інформацію до браузера, який має оновлені дані. Ці дані виводяться з допомогою функції set_votes().

Крок 5 –PHP: створюємо клас системи оцінок

Ми створимо дуже простий клас у PHP, який називається Ratings. Як ви вже здогадалися, він оброблятиме запити в нашій системі скрипту оцінок. Використання нашого класу буде приблизно таким:

Далі ми створимо клас та конструктор:

У цьому невеликому шматку PHP коду дуже багато відбувається, а точніше:

Рядок 3: Встановлюємо шлях до нашого txt файлу, де ви хочете зберігати рейтинг оцінок. Як ми вже згадували, ми не будемо використовувати базу даних. Якщо вам це потрібне, ви з легкістю можете переписати код.

Рядок 7: Конструктор. Створюємо об'єкт та зберігаємо ідентифікатор конкретного блоку рейтингу оцінок.

Рядок 11: Пробуємо завантажити текстовий файл. Якщо файлу не існує, це погано, його необхідно створити та встановити права доступу до нього, щоб PHP міг зчитувати та записувати до нього.

Рядок 14: На цій ділянці отримуємо дані з файлу та за допомогою unserialize() ми перетворюємо складний PHP набір у текстове уявлення. Також функція serialize(), яка перетворює дані для зберігання файлу. Ці функції дозволяють зберігати дані у текстовому файлі як масивів.

Крок 6 - Створюємо методget_ratings()

Цей метод викликається сам собою, або від vote() методу. Він знаходить дані для конкретного блоку рейтингу оцінок за ідентифікатором і повертає на сторінку, що запитується в JSON форматі.

Крок 7 - Створюємоvote() метод

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

На початку коду ми отримуємо значення оцінки, використовуючи регулярний вираз. Далі встановлюємо ідентифікатор блоку рейтингу оцінок і оновлюємо записи оцінок або у разі відсутності створюємо новий масив для оцінок конкретного блоку. Далі обчислюємо загальну кількість оцінок та середнє значення оцінок. Кладемо все це назад у файл, використовуючи раніше згадану функцію serialize().