Статьи

Ajax і XML: Застосування Ajax для створення рейтингів та коментарів

  1. Серія контенту:
  2. Цей контент є частиною серії: Ajax і XML
  3. система рейтингування
  4. Лістинг 1. rating.sql
  5. Лістинг 2. index.php
  6. Малюнок 1. Список фільмів
  7. Лістинг 3. rate.php
  8. Лістинг 4. ratemovie.php
  9. Малюнок 2. Сторінка оцінки
  10. Лістинг 5. index2.php
  11. Малюнок 3. Оновлена ​​сторінка фільмів
  12. коментування
  13. Лістинг 6. comments.sql
  14. Лістинг 7. rate2.php
  15. Лістинг 8. addcomment.php
  16. Малюнок 4. Оновлена ​​сторінка рейтингу, тепер з коментарями
  17. Додавання каналів RSS
  18. Лістинг 9. rss.php
  19. Малюнок 5. Канал RSS в браузері
  20. Лістинг 10. Фрагмент RSS
  21. Ресурси для скачування

Ajax і XML

Додайте в ваше додаток зручні функції оцінки і коментування за допомогою Ajax

Серія контенту:

Цей контент є частиною # з серії # статей: Ajax і XML

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=ajax+и+xml

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Ajax і XML

Слідкуйте за виходом нових статей цієї серії.

Всі ми любимо оцінювати. Я думаю, це закладено в наших генах. Ми з дочкою любимо ходити в кіно; раніше їй подобалося все підряд, але тепер, коли їй виповнилося чотири роки, вона стала значно чіткіше. Я навчив її використовувати систему рейтингів "добре" і "погано" (великий палець вгору і вниз) à як в програмі Ebert and Roeper. (Вона дала Шреку Третьому оцінку «палець вгору».) Я думаю, саме тому в Інтернеті так популярні оцінки та рецензування продуктів, статей і т.п.

У цій статті показується, як за допомогою поєднання MySQL, PHP, Prototype.js і асинхронного JavaScript ™ і XML (Ajax) додати на будь-який сайт прості функції оцінки і коментування.

система рейтингування

Хоча моя дочка використовує оцінки «добре» і «погано», я розумію, що більшість людей використовують кілька більш складну систему: п'ятизірковий шкалу, в якій одна зірка позначає «дуже погано», п'ять зірок - «дуже добре», а три зірки - «середньо». У цьому прикладі я буду застосовувати п'ятизірковий систему для оцінки фільмів. Ви можете спокійно замінити мої фільми всім, що вашій душі завгодно - статтями, продуктами або впорядкування файлів.

У лістингу 1 показана схема для цього прикладу, починаючи з таблиці для фільмів. Вона дуже проста: ідентифікатор фільму з автоінкрементом і назва фільму. Всі голоси за фільми зберігаються в таблиці рейтингів. Ця таблиця зв'язується з таблицею фільмів за допомогою movie_id і містить всього одне додаткове поле - оцінку, виражену числом від 1 до 5.

Лістинг 1. rating.sql
DROP TABLE IF EXISTS movies; CREATE TABLE movies (movie_id INTEGER NOT NULL AUTO_INCREMENT, name VARCHAR (128) NOT NULL, PRIMARY KEY (movie_id)); DROP TABLE IF EXISTS ratings; CREATE TABLE ratings (movie_id INTEGER NOT NULL, rating INTEGER NOT NULL);

Якщо ви хочете реалізувати систему «одна людина - один голос», вам потрібно буде додати до таблиці ratings ідентифікатор користувача, а також зробити так, щоб один користувач міг віддати за один фільм тільки один голос. Я хотів зробити цей приклад простішим, тому опустив цю частину.

Щоб реалізувати цю схему в базі даних, потрібно спочатку створити базу даних, а потім - додати в неї схему. Це можна зробити, виконавши в командному рядку наступні команди:

% Mysqladmin create comments% mysql comments <ratings.sql

Залежно від типу установки MySQL може знадобитися вказівку імені користувача та пароля.

Далі, нам знадобиться сторінка, в якій будуть виводитися доступні фільми і вказуватися посилання на сторінку оцінки кожного з них. Ця індексна сторінка показана в лістингу 2 .

Лістинг 2. index.php
<Html> <body> <? Php require_once ( "DB.php"); $ Db = & DB :: Connect ( 'mysql: // root @ localhost / comments', array ()); if (PEAR :: isError ($ db)) {die ($ db-> getMessage ()); } $ Res = $ db-> query ( 'SELECT * FROM movies'); while ($ res-> fetchInto ($ row)) {?> <a href="rate.php?id=<?php echo($row[0]) ?&gt; "> <? php echo ($ row [1 ])?&gt; </a> <br/> <? php}?> </ body> </ html>

Щоб полегшити собі роботу, я додав в таблицю movies кілька відомих фільмів за допомогою SQL-запиту, який ви можете завантажити з розділу Матеріали для завантаження . Список фільмів на контрольному аркуші показаний на малюнку 1 .

Малюнок 1. Список фільмів

Якщо в результаті виконання наведеного коду ви не отримали цього списку, швидше за все, у вас не встановлений модуль баз даних DB зі сховища PEAR. Щоб встановити його, просто запустіть в командному рядку наступну команду:

% Pear install DB

Тепер, коли ми показали список фільмів, настав час створити сторінку, яка дозволить вам оцінювати фільми і виводити сумарні дані по вже відданим голосам і середнє значення рейтингу. У лістингу 3 показано, як все це можна зробити на сторінці rate.php.

Лістинг 3. rate.php
<? Php require_once ( "DB.php"); $ Db = & DB :: Connect ( 'mysql: // root @ localhost / comments', array ()); if (PEAR :: isError ($ db)) {die ($ db-> getMessage ()); } $ Id = $ _GET [ 'id']; $ Title = ''; $ Res = $ db-> query ( 'SELECT name FROM movies WHERE movie_id =?', Array ($ id)); while ($ res-> fetchInto ($ row)) {$ title = $ row [0]; }?> <Html> <head> <title> <? Php echo ($ title); ?> </ Title> <script src = "prototype.js"> </ script> <script> function rate (value) {new Ajax.Updater ( 'rating', 'ratemovie.php? Id = <? Php echo ( $ id)?> & v = '+ value); } </ Script> </ head> <body> <h1> <? Php echo ($ title); ?> </ H1> <div id = "rating"> <img src = "star_off.gif" onclick = "rate (1)"> </ img> <img src = "star_off.gif" onclick = "rate ( 2) "> </ img> <img src =" star_off.gif "onclick =" rate (3) "> </ img> <img src =" star_off.gif "onclick =" rate (4) "> </ img> <img src = "star_off.gif" onclick = "rate (5)"> </ img> <br/> <br/> <? php $ res2 = $ db-> query ( 'SELECT count (rating) , sum (rating) FROM ratings WHERE movie_id =? ', $ id); while ($ res2-> fetchInto ($ row)) {?> Votes: <? php echo ($ row [0]); ?> <br/> Average Rating: <? Php echo ($ row [1] / $ row [0]); ?> <? Php}?> </ Div> </ body> </ html>

На самому початку файлу ми отримуємо назва фільму за отриманим в якості параметра ідентифікатором. У середній частині сценарію ми включаємо файл бібліотеки prototype.js і створюємо функцію JavaScipt rate (), яка викликає сторінку ratemovie.php за допомогою Ajax, використовуючи бібліотеку Prototype. Після цього додаємо кілька зображень із зірками, при натисканні кожної з яких викликається функція rate ().

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

Сценарій ratemovie.php, наведений в лістингу 4 , Виконує додавання оцінки в базу даних, після чого повертає фрагмент HTML-коду, що заміщує зірочки і лічильник голосів вихідної сторінки.

Лістинг 4. ratemovie.php
<? Php require_once ( "DB.php"); $ Db = & DB :: Connect ( 'mysql: // root @ localhost / comments', array ()); if (PEAR :: isError ($ db)) {die ($ db-> getMessage ()); } $ V = $ _GET [ 'v']; $ Id = $ _GET [ 'id']; $ Sth = $ db-> prepare ( 'INSERT INTO ratings VALUES (?,?)'); $ Db-> execute ($ sth, array ($ id, $ v)); ?> <Img src = "star _ <? Php echo (($ v> 0)? 'On': 'off')?>. Gif"> </ img> <img src = "star _ <? Php echo (( $ v> 1)? 'on': 'off')?>. gif "> </ img> <img src =" star _ <? php echo (($ v> 2)? 'on': 'off') ?>. gif "> </ img> <img src =" star _ <? php echo (($ v> 3)? 'on': 'off')?>. gif "> </ img> <img src = "star _ <? php echo (($ v> 4)? 'on': 'off')?>. gif"> </ img> <br/> <br/> <? php $ res2 = $ db-> query ( 'SELECT count (rating), sum (rating) FROM ratings WHERE movie_id =?', $ id); while ($ res2-> fetchInto ($ row)) {?> Votes: <? php echo ($ row [0]); ?> <br/> Average Rating: <? Php echo ($ row [1] / $ row [0]); ?> <? Php}?>

Сторінка рейтингу в дії показана на малюнку 2 .

Малюнок 2. Сторінка оцінки

Коли ви натискаєте на одну із зірок, голос додається в базу даних, HTML-код для зірок, кількості голосів і середньої оцінки змінюється, відображаючи додавання голосу.

В ідеалі мені б хотілося бачити всі оцінки для фільмів на домашній сторінці. У лістингу 5 показана нова версія індексного сторінки, де ця мета досягнута.

Лістинг 5. index2.php
<Html> <body> <table> <? Php require_once ( "DB.php"); $ Db = & DB :: Connect ( 'mysql: // root @ localhost / comments', array ()); if (PEAR :: isError ($ db)) {die ($ db-> getMessage ()); } $ Res = $ db-> query ( 'SELECT * FROM movies'); while ($ res-> fetchInto ($ row)) {$ res2 = $ db-> query ( 'SELECT count (rating), sum (rating) FROM ratings WHERE movie_id =?', $ row [0]); $ Rating = 0.0; while ($ res2-> fetchInto ($ row2)) {$ rating = $ row2 [1] / $ row2 [0]; }?> <Tr> <td align = "center"> <? Php echo ($ rating> 0? $ Rating: 0)?> <Td> <td> <a href = "rate2.php? Id = <? php echo ($ row [0])?&gt; "> <? php echo ($ row [1])?> </a> </ td> </ tr> <? php}?> </ table> </ body> </ html>

Нова версія індексного сторінки з рейтингами для кожного фільму показана на малюнку 3 .

Малюнок 3. Оновлена ​​сторінка фільмів

І це все, що потрібно для реалізації голосування за допомогою Ajax, PHP, MySQL і вкрай зручною бібліотеки JavaScript Prototype.js.

В наступній частині прикладу ми реалізуємо коментарі або рецензії для фільмів.

коментування

В Інтернеті існує безліч систем коментування, від найпростіших - як в більшості блогів, де є просто рядок коментарів до запису блогу - до інтелектуальних систем розгалужених коментарів, приклад яких можна побачити на Slashdot.

У цьому прикладі ми будемо реалізувати систему простіше. Залежно від ваших потреб ви зможете згодом ускладнити її.

Почнемо з додавання в існуючу схему бази даних ще однієї таблиці, як показано в лістингу 6 .

Лістинг 6. comments.sql
DROP TABLE IF EXISTS comments; CREATE TABLE comments (movie_id INTEGER NOT NULL, email VARCHAR (255) NOT NULL, name VARCHAR (255) NOT NULL, comment TEXT NOT NULL);

Ця таблиця comments, яка зв'язується з фільмом по полю movie_id. У ній також містяться адреса електронної пошти, ім'я коментатора і текст коментаря. Це елементарна система коментування, схожа на ту, що входить до складу програмного забезпечення блогів, таких як WordPress і MoveableType.

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

Щоб додати можливість коментування на сторінку оцінки, нам потрібно включити в нижню частину сторінки ще один невеликий сценарій. У лістингу 7 показаний новий код PHP.

Лістинг 7. rate2.php
... <h2> Comments </ h2> <div id = "comments"> <? Php $ res3 = $ db-> query ( 'SELECT * FROM comments WHERE movie_id =?', $ Id); while ($ res3-> fetchInto ($ row3)) {?> <div> <a href="mailto:<?php echo($row3[1]) ?&gt; "> <? php echo ($ row3 [2] )?> </a> says: '<? php echo ($ row3 [3])?>' </ div> <? php}?> </ div> <div style = "margin-top: 20px;" > Add your own comment: </ div> <form id = "cform"> <input type = "hidden" name = "id" value = "<? php echo ($ id)?>"> <table> <tr > <td> Name: </ td> <td> <input type = "text" name = "name"> </ td> </ tr> <tr> <td> Email: </ td> <td> < input type = "text" name = "email"> </ td> </ tr> <tr> <td> Comment: </ td> <td> <textarea name = "comment" id = "comment_text"> </ textarea> </ td> </ tr> </ table> </ form> <button onclick = "addcomment ()"> Add Comment </ button> <script> function addcomment () {new Ajax.Updater ( 'comments' , 'addcomment.php', {method: 'post', parameters: $ ( 'cform'). serialize (), onSuccess: function () {$ ( 'comment_text'). value = '';}}); } </ Script> </ body> </ html>

Сценарій починає з заповнення тега <div> "comments" поточними коментарями до цього фільму з бази даних. Після цього вказується стандартний HTML-тег <form>, що містить поля для імені коментатора, адреси його електронної пошти і власне коментаря. У формі також міститься приховане значення (ідентифікатор проглядається на даний момент фільму), щоб сценарій, який додає коментар, знав, якого фільму цей коментар зіставити.

Кнопка Add Comment, розташована під формою, викликає функцію JavaScript addcomment (). Ця функція через об'єкт Ajax.Updater бібліотеки Prototype.js викликає сценарій addcomment.php. Вона упаковує ім'я, адреса електронної пошти та коментар з допомогою дуже зручною функції serialize (), яка також входить до складу Prototype.js.

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

У лістингу 8 показаний сценарій addcomment.php.

Лістинг 8. addcomment.php
<? Php require_once ( "DB.php"); $ Id = $ _POST [ 'id']; $ Db = & DB :: Connect ( 'mysql: // root @ localhost / comments', array ()); if (PEAR :: isError ($ db)) {die ($ db-> getMessage ()); } $ Sth = $ db-> prepare ( 'INSERT INTO comments VALUES (?,?,?,?)'); $ Db-> execute ($ sth, array ($ id, $ _POST [ 'email'], $ _POST [ 'name'], $ _POST [ 'comment'])); $ Res = $ db-> query ( 'SELECT * FROM comments WHERE movie_id =?', $ Id); while ($ res-> fetchInto ($ row)) {?> <div> <a href="mailto:<?php echo($row[1]) ?&gt; "> <? php echo ($ row [2] )?> </a> says: '<? php echo ($ row [3])?>' </ div> <? php}?>

Спочатку сценарій додає коментар, зазначений в запиті POST, в базу даних. Після цього він виводить всі коментарі в HTML-коді, точно так же, як це було зроблено на вихідній сторінці, з тим лише винятком, що на цей раз виводиться коментар, доданий користувачем.

Нова сторінка оцінки показана на малюнку 4 .

Малюнок 4. Оновлена ​​сторінка рейтингу, тепер з коментарями

Така система коментування дає користувачеві негайну зворотний зв'язок. Коли користувач натискає кнопку Add Comment, новий запис відразу ж додається до коментарів. Система також покаже всі коментарі, додані в цей час іншими користувачами.

При бажанні ви можете розширити цей приклад і регулярно опитувати сервер, оновлюючи розділ коментарів свіжими даними. Звичайно ж, для цього не потрібно викликати сценарій addcomment.php. Вам потрібен інший сценарій, який буде просто повертати коментарі, не додаючи нові. Щоб спростити цю процедуру, в Prototype.js реалізований клас Ajax.PeriodicalUpdater, який - за заданим ідентифікатором, частотою оновлення і URL - буде оновлювати будь-яку частину Web-сторінки з вказаною частотою.

Додавання каналів RSS

Інший простий спосіб розширення цього прикладу - експорт списку фільмів з оцінками у вигляді каналу RSS. В лістингу 9 представлений код, який робить це.

Лістинг 9. rss.php
<? Php header ( "content-type: text / xml"); ?> <Rss version = "0.91"> <channel> <title> Movie rankings </ title> <link> http: //localhost/comments/rss.php </ link> <? Php require_once ( "DB.php" ); $ Db = & DB :: Connect ( 'mysql: // root @ localhost / comments', array ()); if (PEAR :: isError ($ db)) {die ($ db-> getMessage ()); } $ Res = $ db-> query ( 'SELECT * FROM movies'); while ($ res-> fetchInto ($ row)) {$ res2 = $ db-> query ( 'SELECT count (rating), sum (rating) FROM ratings WHERE movie_id =?', $ row [0]); $ Rating = 0.0; while ($ res2-> fetchInto ($ row2)) {if ($ row2 [0]> 0) $ rating = $ row2 [1] / $ row2 [0]; }?> <Item> <title> <? Php echo ($ row [1])?> - <? Php echo ($ rating> 0? $ Rating: 0)?> Stars </ title> <link> http: //localhost/commentsts/rate2.php?id=<?php echo ($ row [0])?> </ link> <description> <? php echo ($ row [1])?> </ description> < / item> <? php}?> </ channel> </ rss>

Код, наведений в лістингу 9 , Є альтернативою виведення даних в форматі HTML. Замість тегів <table>, <tr> і <td> я використовував теги <title>, <description> і <link>, що вказують на сторінку кожного фільму. Коли я переходжу на цю сторінку в браузері Firefox, я бачу щось схоже на малюнок 5 .

Малюнок 5. Канал RSS в браузері

Все досить просто. Отримати канали XML з PHP нескладно.

Коли я запускаю цей код локально, використовуючи наступну команду:

% Php rss.php

я можу бачити безпосередньо XML-код каналу RSS. Фрагмент цього RSS-канал показаний в лістингу 10 .

Лістинг 10. Фрагмент RSS
<Rss version = "0.91"> <channel> <title> Movie rankings </ title> <link> http: //localhost/comments/rss.php </ link> <item> <title> Star Wars - 4.5 stars < / title> <link> http: //localhost/commentsts/rate2.php? id = 1 </ link> <description> Star Wars </ description> </ item> <item> ...

висновок

Всі багато говорять про контент, формованому користувачами, і про те, що він є рушійною силою Web 2.0. Як ми побачили з прикладів, наведених в цій статті, можна з легкістю створювати додатки Ajax за допомогою таких чудових інструментів, як бібліотека Prototype.js. Функції, які дають відвідувачам можливість оцінювати та коментувати матеріали вашого сайту, надають вам відмінний контент, що формується користувачами.

Ресурси для скачування

Схожі теми

  • оригінал статті Ajax for ratings and comments (EN) .
  • IBM® DB2® Enterprise 9 (EN) Завантажте пробну версію DB2 9 або DB2 Express-C 9 (EN) - безкоштовну версію сервера даних DB2 Express 9.
  • Домашня сторінка PHP : Відвідайте безцінний ресурс для програмістів PHP, де можна знайти інформацію про це широко поширеному мовою сценаріїв. (EN)
  • бібліотека Prototype Відкрийте для себе цю середу розробки JavaScript, призначену для полегшення розробки динамічних Web-додатків. (EN)
  • Бібліотека JavaScript Scriptaculous : У цій бібліотеці, побудованої на базі Prototype, містяться кошти і ефекти виведення, які дозволять зробити ваш сайт більш ефектним. (EN)
  • Сторінка документування Prototype.js Знайдіть додаткову інформацію про бібліотеку JavaScript Prototype, з посиланнями на офіційний блог Prototype і безліч інших ресурсів. (EN)
  • jQuery : Ще одна бібліотека JavaScript, яка надає функціональні можливості, схожі з Prototype.js. (EN)
  • Бібліотека інтерфейсів Yahoo : Спробуйте інструментарій Yahoo! для роботи з Ajax. (EN)
  • Розділ XML на developerWorks (EN) : Дізнайтеся все про XML в розділі XML сайту developerWorks.
  • Сертифікація по XML корпорації IBM : Дізнайтеся, як ви можете стати сертифікованим розробником IBM в області XML і пов'язаних з ним технологій. (EN)
  • Ajaxian : Вивчіть цей чудовий ресурс, щоб йти в ногу з розвитком Ajax і використовують його віджетів. (EN)

Підпишіть мене на повідомлення до коментарів

Jsp?
Php?
Id=<?
Php echo($row[0]) ?
Gt; "> <?
Php echo ($ row [1 ])?
Gt; </a> <br/> <?
Php}?

Новости