Как правильно внедрить CRM-систему: алгоритм действий и частые ошибки. Комментарии в HTML, CSS, PHP Что такое микроразметка и зачем нужна
На этот раз мы делаем простую AJAX систему добавления комментариев. Этот позволит продемонстрировать, как добиться эффективного взаимодействия между JQuery и PHP / MySQL с помощью JSON. Система работает таким образом, что добавляемые комментарии помещаются на страницу без её полной перезагрузки, давая ощущение работы сайта только на компьютере пользователя, тем самым избегая необходимости ждать некоторое время, необходимое для повторной загрузки страницы с добавленным комментарием.
Вот примерная демонстрация того, что мы планируем реализовать:
Шаг 1 - XHTML
Во-первых, давайте взглянем на разметку комментариев. Этот код генерируется PHP в комментарии, который мы собираемся посмотреть в одно мгновение.
Demo.php
Комментарий
В Div-е класса avatar содержиться гиперссылка соответсвенно с аватаром (если пользователь указал действительную ссылку на аватар при отправке комментария), допустим из gravatar.com. Ну мы еще вернемся к этому когда будем работать с PHP. Наконец, у нас есть имя и время также в DIV-ах, а также комментарий то есть сам текст в параграфе.
Другим важным элементом в части XHTML является сама форма отправки комментария (все поля, кроме поля URL обязательны для заполнения).
Demo.php
Добавить комментарий
Ваше имя? Вашь Email? Ваш аватар? (не обязательно) Что вы хотели сказать?Шаг 2 - PHP
PHP обрабатывает связи с базой данных MySQL и создает разметку комментарий. Кроме того, на приёме в конце стоит AJAX и вставляет комментарий в таблицу комментариев. Вы можете увидеть код, который выводит комментарии к странице, ниже.
Demo.php /* / Выбрать все коммнтарии и заполнить массив $comments */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) { $comments = new Comment($row); }
MySQL запрос выбирает все записи из базы данных и заполняет массив $comments с объектом класса комментарий, который вы видите ниже. Этот массив выводится после выполнения скрипта.
Demo.php /* / Выводим комментарии один за другим */ foreach($comments as $c){ echo $c->markup(); }
Каждый комментарий имеет markup() метод, который генерирует HTML код для печати страницы. Вы можете увидеть этотот метод и класс ниже.
Класс принимает строку из базы данных (fetched with mysql_fetch_assoc()) и сохраняет его в переменной $data. Она доступна только для методов этого класса и не может быть доступна извне.
Comment.class.php – Шаг 1
class Comment
{
private $data = array();
public function __construct($row)
{
/*
/ Конструктор
*/
$this->data = $row;
}
public function markup()
{
/*
/ Этот метод выводит разметки XHTML комментарий
*/
// Создание псевдонима, так что мы не должны писать
// $this->data данные каждый раз:
$d = &$this->data;
$link_open = "";
$link_close = "";
if($d["url"]){
// Если человек заполнил URL при
//добавлении комментария
// Определяем гиперссылку
$link_open = "";
$link_close = "";
}
// Преобразование времени
$d["dt"] = strtotime($d["dt"]);
// Необходим для изображений Gravatar по умолчанию:
$url = "http://".dirname($_SERVER["SERVER_NAME"].
$_SERVER["REQUEST_URI"])."/img/default_avatar.gif";
return "
".$link_open."
submit.php получает данные комментария в виде запроса AJAX. Она проверяет его и выдает JSON объект либо разметки XHTML который успешно выведен, или список сообщений об ошибках. JQuery использует статус собственности определить, следует отображать сообщения об ошибках или добавить комментарий разметки страницы.
Вы можете увидеть два примера ниже.
Шаг 1 - XHTMLСначала посмотрим на разметку комментария. Данный код генерируется PHP с классом Comment .
demo.php
Имя пользователя
30 Jun 2010
Текст комментария
div avatar содержит ссылку (если пользователь ввел правильный URL при размещении комментария) и изображение аватара, которое мы получаем с gravatar.com . Мы вернемся к формированию разметки на шаге PHP. В завершении следуют div name div time и текст комментария.
Другим важным элементом в XHTML является форма комментария. Она отправляется с помощью POST . Все поля, кроме URL, должны быть заполнены.
demo.phpДобавить комментарий
Имя Email Вебсайт (не обязательно) Содержание комментарияФорма отправляется с помощью AJAX. Проверка выполняется в фоновом режиме в submit.php . Каждое поле имеет соответствующий элемент label , с установленным атрибутом for .
PHP обрабатывает коммуникацию с базой данных MySQL и генерирует разметку для комментария. Он также получает окончание запроса AJAX и вставляет данные комментария в таблицу comments .
demo.php /* / Выбираем все комментарии и наполняем массив $comments объектами */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) { $comments = new Comment($row); }Запрос MySQL выбирает все записи из таблицы и заполняет массив $comments объектами класса comment . Данный массив выводится далее при выполнении скрипта.
demo.php /* / Вывод комментариев один за другим: */ foreach($comments as $c){ echo $c->markup(); }Каждый комментарий имеет метод markup() , который генерирует правильный HTML код, готовый для вывода на страницу. Ниже приведены определения класса и метода.
Класс получает строку из базы данных (получаемую с помощью mysql_fetch_assoc() ) и сохраняет ее в переменной $data . Она доступна только методу класса.
comment.class.php - Часть 1 class Comment { private $data = array(); public function __construct($row) { /* / Конструктор */ $this->data = $row; } public function markup() { /* / Данный метод выводит разметку XHTML для комментария */ // Устанавливаем псевдоним, чтобы не писать каждый раз $this->data: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"]){ // Если был введн URL при добавлении комментария, // определяем открывающий и закрывающий теги ссылки $link_open = ""; $link_close = ""; } // Преобразуем время в формат UNIX: $d["dt"] = strtotime($d["dt"]); // Нужно для установки изображения по умолчанию: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; return " ".$link_open."
".$link_close."
".$link_open.$d["name"].$link_close."
".date("d M Y",$d["dt"])."
".$d["body"]."
"; }Скрипт использует gravatar для представления аватара в комментариях. Gravatar - это очень полезный сервис, который устанавливает соответствие аватара с email адресом. Изображение аватара может быть легко получено с помощью передачи кодированного функцией md5() вашего email адреса на gravatar.com.
Скрипт определяет адрес URL, на котором выполняется, и определяет точный адрес изображения default_avatar.gif . Данное изображение передается на параллельно с хэшем md5, и если никакого аватар не было найдено для переданного email адреса, то будет выведено альтернативное изображение.
comment.class.php - Часть 2 public static function validate(&$arr) { /* / Данный метод используется для проверки данных отправляемых через AJAX. / / Он возвращает true/false в зависимости от правильности данных, и наполняет / массив $arr, который преается как параметр либо данными либо сообщением об ошибке. */ $errors = array(); $data = array(); // Используем функцию filter_input, введенную в PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) { $errors["email"] = "Пожалуйста, введите правильный Email."; } if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) { // Если в поле URL был введн неправильный URL, // действуем так, как будто URL не был введен: $url = ""; } // Используем фильтр с возвратной функцией: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) { $errors["body"] = "Пожалуйста, введите текст комментария."; } if(!($data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) { $errors["name"] = "Пожалуйста, введите имя."; } if(!empty($errors)){ // Если есть ошибки, копируем массив $errors в $arr: $arr = $errors; return false; } // Если данные введены правильно, подчищаем данные и копируем их в $arr: foreach($data as $k=>$v){ $arr[$k] = mysql_real_escape_string($v); } // email дожен быть в нижнем регистре: $arr["email"] = strtolower(trim($arr["email"])); return true; }Метод validate() (также часть класса) определен как static . Это означает, что его можно вызвать непосредственно с помощью конструкции Comment::validate() , без создания объекта класса. Данный метод проверяет данные, которые передаются через AJAX.
Метод использует новую функцию фильтра, которая стала доступна в PHP 5.2.0 . Таким образом мы можен легко проверить и отфильтровать данные, которые передаются скрипту. Например, filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL) означает, что мы проверяем, является ли $_POST["url"] правильным адресом URL. Если это так, то функция возвращает значение переменной, в другом случае она возвращает значение false .
До использования такой функции нужно было использовать регулярные выражения для проверки данных (с задействованием серии конструкций if ). Дополнительным преимуществом является то, что мы получаем данные до проведения каких-либо специфических преобразований.
Также возможно задать функцию, которая будет проводить дополнительные модификации данных.
comment.class.php - Часть 3 private static function validate_text($str) { /* / Данный метод используется как FILTER_CALLBACK */ if(mb_strlen($str,"utf8")
