Войти Регистрация

PHP скрипт комментариев + AJAX + JS + MYSQL + CSS


В данной статье мы создадим PHP скрипт для реализации системы комментариев на сайте. Наш скрипт комментариев в основном будет реализован, как вы уже догадались на языке программирования PHP. Как сопутствующие языки программирования будут: MySQL, JavaScript, а также технология Ajax (Асинхронный javascript), он используется для реализации обмена данными с сервером без перезагрузки страницы, что очень удобно при создании системы комментариев. Само собой, нам понадобятся HTML и CSS, для реализации внешнего вида системы комментариев.

ВНИМАНИЕ! По многочисленным просьбам пользователей созданы исходники. Которые вы можете скачать с этой страницы: demo_comments.rar [26,1 kb] - исходники тестировались на Denwer.

Шаг 1 – Создание таблицы для комментариев в БД

Создание PHP скрипта комментариев следует начать из создания таблицы в БД. Для этого воспользуемся следующим MySQL запросом:

CREATE TABLE `comments` (

  `id` int(11) NOT NULL auto_increment,

  `id_article` varchar(11) NOT NULL,

  `name` varchar(60) NOT NULL,

  `mail` varchar(60) NOT NULL,

  `text` varchar(500) NOT NULL,

  `date_add` varchar(18) NOT NULL,

  `public` int(1) NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=75 DEFAULT CHARSET=cp1251 AUTO_INCREMENT=75 ;

Теперь, разберемся:

id – это идентификатор самого комментария, имеет значение NOT NULL auto_increment, он обязателен, думаю, вам понятно почему. Ведь это ключ для доступа к конкретному комментарию.

id_article – это идентификатор материала, к которому относится комментарий. В нашем случае это статья, в вашем, можете назвать его как угодно.

name – имя пользователя, который будет добавлять комментарий.

mail – e-mail пользователя.

text – текст комментария, или собственно сам комментарий.

date_add – дата добавления комментария, максимальное значение поля установлено 18 символов, это для того чтобы дата добавления комментария имела вид: 22.07.2011 в 14:03. То есть, получается, что в строке даты у нас 18 символов. А больше нам и не надо, поэтому устанавливаем значение varchar(18).

public – это будет нашим администраторским допуском к публикации комментария. Данное поле будет иметь всего 1 символ, причем цифровой: 1 или 0. (1 – публикуем, 2 – не публикуем).

Шаг 2 – PHP скрипт системы комментариев

Для реализации системы комментариев нам необходимо создать следующие функции:

1.       Вывода комментариев

2.       Добавления комментариев

Добавление комментариев

Для этого создадим файл add_comment.php. Для начала напишем функцию добавления комментариев. Для этого вставьте в ваш файл, следующий код:

<?php

// Этот блок кода нужен для корректной работы Ajax скрипта

sleep(1); 

header("Content-type: text/plain; charset=windows-1251");

header("Cache-Control: no-store, no-cache, must-revalidate");

header("Cache-Control: post-check=0, pre-check=0", false);

// Преобразуем полученые данные в нужную кодировку

while(list ($key, $val) = each ($_POST)){$_POST[$key] = iconv("UTF-8","CP1251", $_POST[$key]);}

// Устанавливаем значение даты

$date = date('d.m.Yв H:i');

// Устанавливаем параметры валидации                                       

$nl = strlen($_POST['name']);

$ml = strlen($_POST['mail']);

$tl = strlen($_POST['text']);

$id_article = $_GET['id_article'];

$name = $_POST['name'];

$mail = $_POST['mail'];

$text = $_POST['text'];

if($nl<0 or $nl>60 or $ml<0 or $ml>60 or $tl<0 or $tl>500 or $_POST['nr']!='nerobot')

{$validate = false;}

elseif(!eregi('^[a-z0-9]+(([a-z0-9_.-]+)?)@[a-z0-9+](([a-z0-9_.-]+)?)+\.+[a-z]{2,4}$',$_POST['mail']))

{$validate = false;}

else{$validate = true;}

// Если прошли валидацию

if($validate)

{

// Добавляем комментарий

include("config.php");

mysql_query("insert into comments (id_article, name, mail, text, date_add, public) values ('{$id_article}', '{$name}', '{$mail}', '{$text}', '{$date_add}', '0')") or die ("Error! query - add_comment");

echo '<font color="green">Комментарий добавлен и ожидает проверки!</font>';

}

else

{

echo '<font color="red">Заполните правильно поля ввода!</font>';

}

?>

Немножко обговорим этот php скрипт. Верхний блок кода нужен для корректной работы ajax скриптов. Что происходит в этом блоке кода? Сначала идет задержка работы php скрипта на 1 секунду, это для того, чтобы увидеть анимацию ожидания, при добавлении комментария. Далее выводятся header, которые определяют кодировку контента и т.д. После мы преобразуем в нужную кодировку все входящие данные методом POST. Потому что они будут отосланы средствами ajax, и будут иметь  другую кодировку.

Следующими строками php кода, мы устанавливаем параметры валидации . Чтобы все поля формы были заполнены корректно, и если валидация пройдена (true), то сохраняем комментарий в БД, и выводим сообщение, если нет, то выводим сообщение, что поля нужно заполнять верно.

Думаю с этим все понятно.

Вывод комментариев

Теперь напишем вывод комментариев. Для удобства создадим еще один файл show_comments.php

И поместим в него следующий код:

<?php

function show_comments($id_article)//выводвсехкомментариевкстатье

{

 include("config.php");

 $res = mysql_query("select * from comments where id_article like $id_article and public = 1 order by id", $con) or die ("Error! query – show comments");

 while($arr = mysql_fetch_array($res, MYSQL_NUM))

 {

                echo "

<div class=main>

                               <img src=images/comentator.jpg>

                                               <div class=block_name>

                                                               <span class=name>[2]</span>

                                                               <span class=date>[5]</span>

                                               </div>

                                               <div class=coment>

                                                               <div>$arr[4]</div>

                                               </div>

                </div>

                ";

}

}

?>

Вот это уже настоящая функция для вывода комментариев. Здесь все просто. В предыдущем коде, я не объяснил об файле config.php, который подключается с помощью строки include("config.php"); Этот файл нам необходим для работы с БД. В нем записаны параметры подключения, вот пример кода этого файла:

<?php

                $hostname="localhost"; // Имя хоста

                $login="root"; // Логин для подкл. к серверу баз даных

                $pwd=""; // Пароль для подкл. к серверу баз даных

                $db_name="yourbasename";  // Название базы даных

                //подключение к базе

                $con = @mysql_connect($hostname, $login, $pwd) or die("Error! connect-database");

                mysql_select_db($db_name, $con) or die ("Error! select-database");                 

?>

Как видите, здесь прописаны настройки подключения, и собственно подключение к БД. Вернемся к нашей функции show_comments($id_article). Она принимает один аргумент, это ид статьи, к которой относятся комментарии, вы должны будете посылать его туда сами. Надеюсь, с этим не будет вопросов. Еще рассмотрим строку: $res = mysql_query("select * from comments where id_article like $id_article and public = 1 order by id", $con) or die ("Error! query – show comments");

В этой строке записан элементарный запрос к БД, где указывается, что мы выбираем комментарии, относящиеся только к данной статье ($id_article), и те которые одобрил администратор (public = 1).

Шаг 3 – Визуальный вывод комментариев

Для отображения списка комментариев создадим файл comments.php. Данный файл можно будет подключать в нужное место (низ статьи, или иного контента).

Вставьте в файл comments.php следующий код:

<script Language="JavaScript" src="js_comments.js"> </script>

<div id="coments">

<div class="title">

                                <span>

                                               <h2>Комментарии по теме:</h2>

                                                               <ahref="#вставьте сюда ид блока статьи">

Вмонтируйте название вашей статьи сюда

</a>

                               </span>

</div>

<div class="top">

<img id="addcomentbutton"  onClick="toggle('addcoment'); location.href='#coments';" src="images/add_coment.png"/>

</div>

<div id="addcoment" class="addcoment" style="display:none;">

<form name="comment" method="post" action="add_comment.php?id_article=Вмонтируйтеидвашейстатьи ">

<div id="statusbox">Комментарий должен быть по теме и составлен корректно!</div>

<input id="name" type="text" name="name" value="Имя (Обязательно)" maxlength="60" onfocus="clearText(this)" onblur="clearText(this)"/>

<input id="mail" type="text" name="mail" value="Почта (Обязательно, непубликуется)" maxlength="60" onfocus="clearText(this)" onblur="clearText(this)"/>

<textarea id="text" name="text" onfocus="clearText(this)" onblur="clearText(this)"></textarea>

<span>

<input id="nr" onClick="document.getElementById('nr').value='nerobot';" type="checkbox" name="nr"/>

<b>я не робот...</b>

</span>

<img class="button_add" src="images/button_add.png" onclick='ajax({

url:" add_comment.php ?id_article=Вмонтируйтеидвашейстатьи",

                statbox:"statusbox",

method:"POST",

                data:

                                {

                               name:document.getElementById("name").value,

                               mail:document.getElementById("mail").value,

                               text:document.getElementById("text").value,

                               nr:document.getElementById("nr").value,

                               success:function(data){document.getElementById("statusbox").innerHTML=data;}

                               })'

/>

</form>

</div>

<?php

include("show_comments.php");

show_comments(Вмонтируйте сюда ид вашей статьи);

?>

</div>

Вот так будет выглядеть наш файл, отвечающий за визуальное отображение блока комментариев, а также формы добавления комментариев. Если вы заметили, то дизайн будет подобным к дизайну системы комментариев на нашем сайте (sitear.ru).

Вот так будет выглядеть наш блок комментариев:

Пример работы php скрипта комментариев

А вот так раскрытая форма добавления комментария:

Форма добавления комментариев

Этот файл имеет HTML код, который не нужно объяснять веб-программисту. Единственное  что нужно,  внимательно просмотрите код, и там где подсказки типа: «Вмонтируйте…», вставьте свои значения для корректной работы php скрипта комментариев.

В этом коде есть элементы javascript кода, которые не нужно объяснять. В следующем шаге рассмотрим js функции, и тогда все станет понятней. 

Шаг 4 – Вспомогательные Javascript и Ajax функции

Все эти функции хранятся в файле js_comments.js. Ниже предоставлена его исходная структура:

/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
 
function ajax(param)
{
      var req = createObject();
      method=(!param.method ? "POST" : param.method.toUpperCase());
      
      if(method=="GET")
      {
          send=null;
          param.url=param.url+"&ajax=true";
      }
      else
      {
          send="";
          for (var i in param.data) send+= i+"="+param.data[i]+"&";
          send=send+"ajax=true";
       
      }
      
      req.open(method, param.url, true);
      if(param.statbox)document.getElementById(param.statbox).innerHTML = '<img src="images/wait.gif"> Пожалуйста подождите...';
      req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      req.send(send);
      req.onreadystatechange = function()
      {
          if (req.readyState == 4 && req.status == 200) //если ответ положительный
          {
          if(param.success)param.success(req.responseText);
          }
      }
}
function toggle(id)
{
      var e = document.getElementById(id);
      var dh = gh(id);
      var elems = e.getElementsByTagName('*');
      
      if (e.style.display == "none")
      {
          for(var i=0; i=0;i-=5)
          {
          (function()
               {
              var pos=i;
              setTimeout(function()
              {
                   e.style.height = (pos/100)*dh+"px";
                   if (pos<=0)
                   {
                   e.style.display = "none";
                   e.style.height=lh;
                   }
              },1000-(pos*5));
               }
          )();
          }
          return true;
      }
      return false;
}
 
function vhe(obj, vh){obj.style.visibility=vh;}
 
function gh(id)
{
      var e = document.getElementById(id);
      if(e.style.display == "none")
      {
          e.style.visibility = "hidden";
          e.style.display = "block";
          dh = e.clientHeight||e.offsetHeight+5; // Высота
          e.style.display = "none";
          e.style.visibility = "visible";
      }
      else
      {
          dh = e.clientHeight||e.offsetHeight+5; // Высота
      }
      return dh;
}
function clearText(field)
{
      if(field.defaultValue == field.value)field.value = '';else if(field.value == '')field.value = field.defaultValue;
}

Файл большой, но здесь все понятно. Начнем с самого простого, а самое интересное, оставим на потом.

functionclearText(field) – очищает поле ввода при фокусе, предназначена для удобства и дизайна.

functiontoggle(id) – сворачивает и разворачивает div блоки. Также имеет вспомогательные функции gh(), vhe(). Мы уже рассматривали о функции сворачивания и разворачивания блоков, в другой статье.

functioncreateObject() – создает объект XMLHTTPRequest, который будет производить обмен данными с сервером по технологии ajax.

functionajax(param) – функция принимает многомерный массив param, в котором указывается: куда отправлять данные (url), где выводить статус работы скрипта (statbox), метод отправки данных (method), data – все, что мы отправляем на сервер, success– указание на функцию, которая будет принимать ответ сервера и обрабатывать присланные данные.

Вот так вкратце о вспомогательном файле php скрипта комментариев. Как видите, если рассматривать php скрипт комментариев в одиночку, то он может показаться не сложным, но сложно связать вместе разные языки программирования. Только связав несколько языков программирования, получится все красиво и интересно.

Шаг 5 – другие вспомогательные файлы скрипта комментариев

Мы подходим к завершающей части нашей статьи, и рассмотрим CSS файл. Я дам пример его кода, но объяснять, у меня уже нет сил. Если вас не устраивает дизайн блока комментариев, вы легко можете поменять css файл.

style.css:

*{ margin: 0; padding: 0; }* 

a {color: #266ba8; text-decoration: none; cursor:pointer;}

a:hover { color: #995;text-decoration: none; }

h2 {font-size: 18px; font-weight:bold; color:#133b5e; padding:4px; margin-bottom:12px; border-bottom:1px solid #CCC;}

#coments {position:relative; left:0px;}

#coments  .title{position:relative; left:-12px; width:594px; height:70px; background: #EEE }

#coments  .title h2{margin:0;}

#coments  .title .left{float:left; padding:5px; width:500px;}

#coments .addcoment {position:relative; top:-15px; background: #EEE; border:5px solid #93afbc; display:none;}

#coments .addcoment img:hover{cursor:pointer;}

#coments  textarea{ width:535px; font-size:14px; height: 180px; margin:10px; overflow:hidden; background:#FFF; border:1px solid #DDD;}

#coments  input[type="text"]{padding-left:10px; width:525px; height:25px; font-size:15px; line-height: 1.8em; margin:10px 5px 0px 10px; border:1px solid #DDD;}

#coments  .addcoment span{position:relative; top:-10px; margin-right:180px; left:180px; font-size:20px; color:#292;}

#coments  #statusbox{padding-left:10px; line-height:55px; color:#888; font-size:18px; height:50px;}

#coments  img.button_add{margin:10px 5px 0px 10px; padding:0; border:0; float:none;}

#coments .top {font-size:15px; height:47px; padding:15px 15px 0px 195px; color:#9e9968;}

#coments .main {position:relative;}

#coments .block_name {height:40px; position:relative; left:10px; top:10px;}

#coments .name {height:40px; font-size:17px; font-weight:normal; color: #070; float:left;}

#coments .date {height:40px; font-size:10px; position:relative; left:-10px; float:right; color: #555;}

#coments img{ float:left;}

#coments .coment{position:relative; left:-12px; width:554px; padding:19px 20px 10px 20px; border-bottom:1px solid #DDD; font-size:12px; background: #f7f4ca url(images/coment_top.png) left top no-repeat; text-align:justify;}

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

Аватар комментатора

Скачать и установить скрипт комментариев

По многочисленным просьбам пользователей, написан скрипт, который нужно только установить и настроить под стиль своего сайта. Обзор скрипта, демо-версия, скачать, а также почитать, как его установить можно в статье: Скрипт Ajax комментариев. Если вам тяжело разобраться, как самому написать систему комментариев, настоятельно советую установить готовый срипт и не мучится.

Заключение

Данный пример системы комментариев не до конца реализован. Вам самим необходимо дописать администраторскую сторону: Одобрения комментариев, Удаление комментариев и т.д. Но теперь у вас есть основы и понимание как создать php скрипт системы комментариев на вашем сайте.

Надеюсь вам все понятно о php скрипте комментариев. Если есть еще вопросы по поводу создания php скрипта комментариев, обращайтесь через комментарии снизу статьи.



Дальше: Wordpress реклама


Дискуссия по теме   323 Комментария 
Добавить комментарий
Евгений 23.03.2017 ? 15:43
Добрый день. Подскажите пож-ста у меня система выдает ошибку на валидацию при добавлении комментария в базу. elseif(!eregi('^[a-z0-9] (([a-z0-9_.-] )?)@[a-z0-9 ](([a-z0-9_.-] )?) \. [a-z]{2,4}$',$_POST['mail'])) как исправить ?
Комментарий ожидает проверки администратора
Andrey 09.12.2016 ? 01:06
ahref у вас в коде - это ошибка, или так и должно быть?
alex 06.12.2016 ? 16:42
<a href="#1"> Что должен знать каждый копирайтер? </a> правильно так написать id блока статьи?
alex 05.12.2016 ? 22:14
Как добавить id блока, где его искать?
Алексей 28.07.2016 ? 00:34
В описании на эту функцию (eregi) сказано, что она устарела и в следующих версиях её не будет. Они там предлагают вместо неё использовать preg_match у меня, видимо, версия php сервера не соответствует. C аналогом тоже не работает, говорит: Warning: preg_match() [function.preg-match]: No ending delimiter '^' found in
Taras 18.08.2016 ? 09:23
http://www.php.su/php/?migration53 там описано что можно сделать. функция устаревшая.
Алекей 28.07.2016 ? 00:16
Добрый! Подскажите пожалуйста, когда нажимаю "Комментировать" - выскакивает окно с ошибкой строки 21 в файле add_comment.php <img src="https://pp.vk.me/c626722/v626722974/19055/nmgYIeq_XZU.jpg"/> https://pp.vk.me/c626722/v626722974/19055/nmgYIeq_XZU.jpg Второй скрин, сдвинул и скрыл пару блоков что бы увидеть какая ошибка: <img src="https://pp.vk.me/c626722/v626722974/1905e/f1gi9HgIK5Y.jpg"/> https://pp.vk.me/c626722/v626722974/1905e/f1gi9HgIK5Y.jpg
ivanK 27.06.2016 ? 17:10
А вывод комментов получается не динамический?
Taras 28.06.2016 ? 16:58
Получается что не динамический.
Эдуард 16.01.2016 в 04:35
А можно сюда прикрутить авторизацию социальных сетей от сервиса ulogin
Иван 20.02.2017 ? 17:34
Добрый день! А что подскажет по поводу готовых систем комментирования: Disqus, Cackle, Getrate? По каким критериям выбирать? Или может у вас есть подобный пост на сайте, а то я не нашел...
Филателист 07.11.2015 в 10:05
Улыбнуло "ОбЬязательно". Как буд-то инопланетяне за звездных войн))) Вспомнил, как они говорили: "Нашьи дройдьеки нье справьльяются"))
Егор 18.10.2015 в 15:10
Ну круто, спасибо!
evgenkur 13.10.2015 в 12:51
неплохобы добавить пояснение к статье, абзац в начало: "Обратите также внимание, что код приведенный ниже - учебный (т.е. его цель показать как оно работает). Не используйте его в реальных проектах! т.к. он не соответсвует стандартам PSR, используется устаревшее расширение mysql, и соотв. конструкция mysql_connect() or die(), используется голый яваскрипт вместо jquery, используется оператор @ хтмл код вперемешку с пхп кодом, а include использовался на скорую руку (в реальных проектах используйте require или лучше автозагрузчик из композера)" (либо возможно в комментариях к коду это прописать)
Roman228 10.10.2015 в 15:19
Спасибо!
Анатолий 09.10.2015 в 14:14
Странно, вроде все верно сделано, данные из базы данных берет, отзывы показываются, но не добавляются. Бесконечно показывает "Пожалуйста подождите..."
Vuqar 07.10.2015 в 15:23
Добрый день ..а как это добавить на свой сайт? базу данный создал... как добавить на index.php? у моего сайта тоже есть index.php
proger228 22.09.2015 в 20:18
Хорошая статья. Спасибо!
Rasul 12.09.2015 в 22:52
Нормально я попробую сделать.
Володимир 11.08.2015 в 09:31
Класс!
Андрей 20.07.2015 в 19:37
Не плохо
Данил 11.07.2015 в 08:29
Круто
жанс 10.06.2015 в 13:02
Spasibo
Дмитий 30.07.2015 в 16:23
Хороший модуль
Дмитри1Dmirty 08.06.2015 в 20:12
вроде хороший модуль
Вла 14.05.2015 в 17:49
Интересно
Артем 21.04.2015 в 17:48
У меня при отправки комментария ошибка: Error! query - add_comment Помогите исправить!
Алексей 09.04.2015 в 12:45
Уважаемый админ, как к этому скрипту комментариев прикрутить возможность загрузки картинок с компьютера и по URL.
admins 26.03.2015 в 13:40
Попробуйем, спасибо
admin 09.02.2015 в 08:56
Обязательно протестируем, Спасибо!
Web 14.01.2015 в 23:28
Хорошо пойдет
Shi 28.12.2014 в 19:47
Неплохо
Петр 09.12.2014 в 17:39
Спасибо! Пробуем
Лариса 24.11.2014 в 15:36
Всё)) Нашла причину.В архиваторе нет файла submit.php
Показать более ранние комментарии (289) →
Добавить комментарий
Просмотров: 104595