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

В данном уроке мы расскажем и наглядно покажем как сделать отличную систему комментариев для сайта с помощью PHP ,MySQL и AJAX. Также будет использована интеграция с gravatar.com. Для начала рассмотрим построение структуры  Данный код генерируется PHP  с классом Comment.

demo.php

div avatar содержит ссылку (если пользователь ввел правильный URL при размещении комментария) и изображение аватара, которое мы получаем с gravatar.com. Другим важным элементом в XHTML является форма комментария. Она отправляется с помощью POST. Все поля, кроме URL, должны быть заполнены.

demo.php

Форма отправляется с помощью AJAX. Проверка выполняется в фоновом режиме в submit.php. Каждое поле имеет соответствующий элемент label, с установленным атрибутом for.

PHP обрабатывает коммуникацию с базой данных MySQL и генерирует разметку для комментария. Он также получает окончание запроса AJAX и вставляет данные комментария в таблицу comments.

demo.php

Запрос MySQL выбирает все записи из таблицы и заполняет массив $comments объектами класса comment. Данный массив выводится далее при выполнении скрипта.

demo.php

Каждый комментарий имеет метод markup(), который генерирует правильный HTML код, готовый для вывода на страницу. Ниже приведены определения класса и метода. Класс получает строку из базы данных (получаемую с помощью mysql_fetch_assoc() ) и сохраняет ее в переменной  $data. Она доступна только методу класса.

comment.class.php

Скрипт определяет адрес URL, на котором выполняется, и определяет точный адрес изображения default_avatar.gif. Данное изображение передается на параллельно с хэшем md5, и если никакого аватар не было найдено для переданного email адреса, то будет выведено альтернативное изображение.

comment.class.php

Метод validate() (также часть класса) определен как static. Это означает, что его можно вызвать непосредственно с помощью конструкции Comment::validate(), без создания объекта класса. Данный метод проверяет данные, которые передаются через AJAX. Метод использует новую функцию фильтра, которая стала доступна в PHP 5.2.0.. Например, filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL) означает, что мы проверяем, является ли  $_POST['url'] правильным адресом URL. Если это так, то функция возвращает значение переменной, в другом случае она возвращает значение false.

comment.class.php

Последний метод validate_text передаётся в качестве возвратной функции в два вызова filter_input. Он преобразует все специальные символы HTML, что эффективно блокирует атаки XSS. Также он заменяет символы новой строки тегами <br />.

submit.php

submit.php получает комментарий из данных через запрос AJAX. Проверяет его и выводит объект JSON, в котором содержится либо разметка XHTML с вставленным комментарием, либо список ошибок. jQuery использует свойство status для определения того, что нужно выводить - либо сообщение об ошибках, либо добавлять разметку комментария к странице.

Успешный ответ:

Свойство html содержит код комментария.

Ответ об ошибке:

При наличии ошибки jQuery проходит циклом по объекту ошибок и выводит сообщения рядом с полями, в которых есть ошибки.

Теперь, когда разметка правильно генерируется и отображается на странице, мы можем перейти к заданию стилей.

styles.css

div .comment  и #addCommentContainer имеют одинаковый стиль.  Используется несколько правил CSS3 для скругления углов и отражения теней.

styles.css

Во второй части мы задаем стили для комментариев и элементов формы. Отметим селектор input[type=text], который выделяет элементы в зависимости от атрибута type. Теперь рассмотрим jQuery.

script.js

Мы используем вызов функции $(document).ready(), которая привязывает функцию к событию загрузка контента DOM. Переменная working действует как флаг, который сигнализирует о том, что запрос AJAX находится в работе (таким образом предотвращается дублирование одного и того же комментария).

Примечание!

Чтобы запустить скрипт на вашем сервере нужно создать таблицу comments в вашей базе данных MySQL. Вы можете сделать это с помощью кода SQL из файла table.sql, который надо ввести на закладке SQL в phpMyAdmin. Затем нужно установить параметры соединения с базой данных MySQL в файле connect.php.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: