Шаг 1 - XHTML
Сначала посмотрим на разметку комментария. Данный код генерируется PHP с классом Comment .
demo.php
div avatar содержит ссылку (если пользователь ввел правильный URL при размещении комментария) и изображение аватара, которое мы получаем с gravatar.com . Мы вернемся к формированию разметки на шаге PHP. В завершении следуют div name div time и текст комментария.
Другим важным элементом в XHTML является форма комментария. Она отправляется с помощью POST . Все поля, кроме URL, должны быть заполнены.
demo.php
Добавить комментарий
Форма отправляется с помощью AJAX. Проверка выполняется в фоновом режиме в submit.php . Каждое поле имеет соответствующий элемент label , с установленным атрибутом for .
Шаг 2 - PHP
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_close."
".$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")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. etc) и преобразуем // символ новой строки в тег: $str = nl2br(htmlspecialchars($str)); // Удаляем все оставщиеся символы новой строки $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; }
Последний метод validate_text
передаётся в качестве возвратной функции в два вызова filter_input
. Он преобразует все специальные символы HTML, что эффективно блокирует атаки XSS. Также он заменяет символы новой строки тегами
.
submit.php
/* / Данный массив будет наполняться либо данными, / которые передаются в скрипт, / либо сообщениями об ошибке. /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) { /* Все в порядке, вставляем данные в базу: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", "".$arr["url"]."", "".$arr["email"]."", "".$arr["body"]."")"); $arr["dt"] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Данные в $arr подготовлены для запроса mysql, / но нам нужно делать вывод на экран, поэтому / готовим все элементы в массиве: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Вывод разметки только-что вставленного комментария: */ echo json_encode(array("status"=>1,"html"=>$insertedComment->markup())); } else { /* Вывод сообщений об ошибке */ echo "{"status":0,"errors":".json_encode($arr)."}"; }submit.php получает комментарий из данных через запрос AJAX. Проверяет его и выводит объект JSON, в котором содержится либо разметка XHTML с вставленным комментарием, либо список ошибок. jQuery использует свойство status для определения того, что нужно выводить - либо сообщение об ошибках, либо добавлять разметку комментария к странице.
Ниже приводятся два примера.
Успешный ответ
{ "status": 1, "html": "Html Code Of The Comment Comes Here..." }Свойство html содержит код комментария.
Ответ об ошибке
{ "status": 0, "errors": { "email": "Please enter a valid Email.", "body": "Please enter a comment body.", "name": "Please enter a name." } }При наличии ошибки jQuery проходит циклом по объекту ошибок и выводит сообщения рядом с полями, в которых есть ошибки.
Шаг 3 - CSS
Теперь, когда разметка правильно генерируется и отображается на странице, мы можем перейти к заданию стилей.
styles.css - Часть 1
.comment, #addCommentContainer{ /* Стиль для комментариев */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; /* Скругленные углы и тени CSS3 */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 0 #c2c2c2; -webkit-box-shadow:2px 2px 0 #c2c2c2; box-shadow:2px 2px 0 #c2c2c2; } .comment .avatar{ /* / Аватар позиционируется абсолютно. / Внешнее смещение для div комментария /*/ height:50px; left:-70px; position:absolute; width:50px; background:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Центрируем вертикально: */ margin-top:-25px; top:50%; -moz-box-shadow:1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2; box-shadow:1px 1px 0 #c2c2c2; }div .comment и #addCommentContainer имеют одинаковый стиль. Используется несколько правил CSS3 для скругления углов и отражения теней.
styles.css - Часть 2
.comment .avatar img{ display:block; } .comment .name{ font-size:20px; padding-bottom:10px; color:#ccc; } .comment .date{ font-size:10px; padding:6px 0; position:absolute; right:15px; top:10px; color:#bbb; } .comment p, #addCommentContainer p{ font-size:18px; line-height:1.5; overflow-x:hidden; } #addCommentContainer input, #addCommentContainer textarea{ /* Стиль для ввода */ display:block; border:1px solid #ccc; margin:5px 0 5px; padding:3px; font-size:12px; color:#555; font-family:Arial, Helvetica, sans-serif; } #addCommentContainer textarea{ width:300px; } label{ font-size:10px; } label span.error{ color:red; position:relative; right:-10px; } #submit{ /* Кнопка "Отправить" */ background-color:#58B9EB; border:1px solid #40A2D4; color:#FFFFFF; cursor:pointer; font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #submit:hover{ background-color:#80cdf5; border-color:#52b1e2; }Во второй части мы задаем стили для комментариев и элементов формы. Отметим селектор input, который выделяет элементы в зависимости от атрибута type .
Шаг 4 - jQuery
Теперь перейдем к jQuery.
script.js
$(document).ready(function(){ /* Следующий код выполняется только после загрузки DOM */ /* Данный флаг предотвращает отправку нескольких комментариев: */ var working = false; /* Ловим событие отправки формы: */ $("#addCommentForm").submit(function(e){ e.preventDefault(); if(working) return false; working = true; $("#submit").val("Working.."); $("span.error").remove(); /* Отправляем поля формы в submit.php: */ $.post("submit.php",$(this).serialize(),function(msg){ working = false; $("#submit").val("Submit"); if(msg.status){ /* / Если вставка была успешной, добавляем комментарий / ниже последнего на странице с эффектом slideDown /*/ $(msg.html).hide().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); } else { /* / Если есть ошибки, проходим циклом по объекту / msg.errors и выводим их на страницу /*/ $.each(msg.errors,function(k,v){ $("label").append(""+v+""); }); } },"json"); }); });Мы используем вызов функции $(document).ready() , которая привязывает функцию к событию . Переменная working действует как флаг, который сигнализирует о том, что запрос AJAX находится в работе (таким образом предотвращается дублирование одного и того же комментария).
В возвратной функции для запроса POST AJAX мы проверяем свойство status , чтобы определить, был ли успешно вставлен комментарий. Если да, мы добавляем полученную разметку на страницу после последнего комментария с анимацией slideDown .
Если были проблемы, то мы выводим сообщения об ошибках, добавляя span error к соответствующему элементу label (атрибут элемента label содержит id ввода, который имеет ошибку).
Готово!
Заключение
Чтобы запустить скрипт на вашем сервере нужно создать таблицу comments в вашей базе данных MySQL. Вы можете сделать это с помощью кода SQL из файла table.sql , который надо ввести на закладке SQL в phpMyAdmin. Затем нужно установить параметры соединения с базой данных MySQL в файле connect.php .
В данном уроке я расскажу о том, как делаются комментарии в HTML, CSS, PHP . Комментарии представляют собой текст, который не виден на веб-странице. Они используется для разного рода пояснений, напоминаний, описаний для вебмастеров, что позволяет структурировать документ. Комментарии незаменимы при отладке кода, позволяют быстро сориентироваться в разметке веб-страницы и найти нужный блок. Часто комментарии применяются для отладки кода HTML. К примеру, можно временно закомментировать конкретный блок кода, чтобы он не исполнялся, а в случае необходимости легко его восстановить.
Комментарии в HTML
В HTML комментарии формируются с помощью символов: . Таким образом, любой текст, находящийся между этими символами, является комментарием. Рассмотрим пример:
Пример комментариев в HTML
Комментарии в CSS
Комментарии в CSS создаются с помощью символов: /* и */. Для создания комментария нужно просто поместить код-веб страницы между этими символами:
/* Начало блока со стилями для Body*/ body { background: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; } /* Конец блока со стилями для Body*/
Комментарии в PHP
Комментарии в PHP могут быть однострочными и многострочными:
1) Однострочные комментарии в PHP создаются с помощью символов: //. Достаточно просто поставить этот символ перед строкой и она будет закомментирована.Такой вариант применятся в том случае, когда комментарий состоит только их одной строки.
2) Для реализации многострочных комментариев используются символы: /* и */. Такой вариант полезен, если комментарий занимает несколько строк.
Таким образом, мы научились делать
Сейчас стало модным заменять привычную систему комментариев WordPress на комментарии одной из самых популярных социальных сетей Facebook. Ранее мы уже публиковали , но с тех пор прошло много времени, и сейчас эта процедура заметно упростилась благодаря готовому WordPress плагину. Так что на этот раз все будет гораздо проще.
Как внедрить комментарии Facebook на свой сайт мы расскажем немного позже, а для начала попытаемся определить все «за» и «против» такой замены.
Комментарии с Facebook: «за» и «против»
К тому же, исчезает фактор так называемой анонимности . Маловероятно, что с Facebook будут добавляться спам комментарии, так как все они привязаны к реальным аккаунтам пользователей.
Но вместе с тем можно найти и минусы такой системы. Многие пользователи предпочитают анонимность и совсем не потому, что они хотят написать что-то плохое или оставить спам. Нет. Дело исключительно в психологическом моменте и в чувстве дискомфорта и смущения, которое они испытывают, высказываясь публично. Этот фактор может сократить активность пользователей.
В отличие от других систем комментариев, как например Disqus, комментарии Facebook не синхронизируются с родными комментариями WordPress. Они полностью их заменяют. Если в старых записях уже есть комментарии WordPress, то они будут отображаться до или после новых комментариев, добавленных через форму Facebook.
Вот, пожалуй, и все плюсы и минусы Facebook-комментариев.
Если вы еще не передумали установить их на своем сайте WordPress, то читайте ниже, как это сделать.
Плагин Facebook Comments для WordPress
Для начала установим и активируем плагин Facebook Comments и настроим его в появившемся меню в разделе Настройки → Комментарии Facebook.
Чтобы начать использовать комментарии на сайте, нужно для сначала создать приложение Facebook.
Если вы ранее уже создавали приложение, то можете использовать его данные ID прямо сейчас. Иначе вам придется создать новое на странице Facebook Apps :
В панели управления только что созданного приложения отобразится его ID, которое нужно скопировать и вставить в настройки плагина. Но перед этим настройте приложение на своем сайте в «Настройках» с помощью кнопки «Add Platform».
Появится новое окно, в котором нужно кликнуть на веб-сайт и выбрать его в качестве своей платформы.
Так на странице настроек приложения появится новый раздел «Веб-сайт», в котором можно указать адрес своего сайта.
Сохраните изменения, скопируйте ID приложения и разместите его в настройках плагина своего сайта.
Если вы не разобрались с настройкой приложения Facebook, то вот еще одна краткая инструкция на английском языке с примером для нашего сайта:
Этот плагин Facebook-комментариев имеет очень много параметров для настроек. Стандартные настройки должны работать с большинством сайтов. Однако можно их изменить на собственное усмотрение и сохранить изменения.
Теперь можете протестировать, корректно ли работает новая система комментариев на вашем сайте.
Модерация комментариев
Так как у вас есть админские права, вам будут приходить уведомления о новых комментариях. Вы можете ими управлять и решать, публиковать их или нет.
А еще в настройках можно добавить нового модератора:
Надеемся, эта инструкция внесла ясность и помогла вам самостоятельно установить комментарии Facebook для вашего сайта не WordPres.
Здравствуйте, друзья и гости блога! Сегодня расскажу при помощи PHP и MySQL. А также мы с вами поговорим о системах комментирования для сайта и выберем из предложенных мной лучшую для вашего сайта.
Вопрос первый : с помощью PHP и MySQL ?
Для этого нам с вами нужно перво на перво создать таблицу в базе данных вашего сайта, которая будет носить название — comments . В этой созданной таблице будут храниться комментарии в полях с такими обозначениями:
id
— это уникальный идентификатор.
page_id
— в этом поле будет хранится идентификатор страницы сайта, на которой располагается данный комментарий.
name
— это имя того комментатора, который оставил данный комментарий.
text_comment
— соответственно это текст текущего комментария.
Следующим этапом, после создания таблицы для комментариев в базе данных, нам нужно внедрить специальный код для наших будущих комментариев на сайт. Этот код на сайте позволит нашим комментаторам добавить свои комментарии к нашим статьям. Вот этот код:
Это простая HTML форма комментариев для сайта. Вы ее располагаете на своем сайте в том месте, где это удобно для оставления комментария к посту — естественно под самим постом.
query("INSERT INTO `comments` (`name`, `page_id`, `text_comment`) VALUES ("$name", "$page_id", "$text_comment")");// Добавляем комментарий в таблицу header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект обратно?>
Последний шаг в создании формы комментариев для сайта на PHP и MySQL — Делаем вывод наших комментариев на странице сайта. Вот код для этого:
query("SELECT * FROM `comments` WHERE `page_id`="$page_id""); //Вытаскиваем все комментарии для данной страницы
while ($row = $result_set->fetch_assoc()) {
print_r($row); //Вывод комментариев
echo "
";
}
?>
Вот и все! Наша простая форма комментариев ля сайта создана и может работать на сайте.
Но это конечно не для новичка, который не станет копаться со всеми этими кодами HTML, PHP и MySQL. Также не станет изучать, как создать базу данных. Ему нужно все сразу, быстро и без головной боли. Я прав? Конечно прав!
Тогда давайте перейдем к следующему разделу моего материала и узнаем все об уже готовых системах комментариев для сайта и выберем наиболее удобную, функциональную и приемлемую для вашего сайта …
Системы комментариев для сайта. Какую выбрать?
Как сделать комментарии на сайте — это вопрос важный потому, что комментарии на сайте играют важную роль не только для общения владельца сайта и посетителя, но также комментарии важны для сео продвижения и раскрутки.
С помощью комментариев на сайте повышаются позиции сайта в поисковой выдаче, улучшаются поведенческие факторы, растет трафик на сайт, а следственно и увеличивается ваш заработок. Вот видите, как важны комментарии для сайта!
Поэтому давайте рассмотрим как сделать комментарии на сайте и какую систему комментирования выбрать, как наиболее оптимальный вариант?
Вообще комментарии на сайтах выводятся многими способами. Это и специальные плагины для wordpress движков и комментарии от социальных сетей всевозможные, такие как например Вконтакте , Facebook , Disqus . Также есть независимые сервисы, которые предлагают свои системы комментариев для сайта, например .
Я сейчас вам приведу одну табличку, которая сразу расставит все на свои места и вопросов уже не возникнет по поводу выбора системы комментариев для сайта:
Здесь все четко и ясно видно какая система комментариев является лучшей и нескольких представленных, которые чаще всего используются вебмастерами на своих ресурсах. Думаю, что пояснения здесь излишни и выбор остается только за Вами!
Текст комментария