Главная » Полезные статьи » Язык JavaScript » PHP скрипт комментариев + AJAX + JS + MYSQL + CSS
Распечатать статью

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

Июнь 17th, 2012 Archi

В данной статье мы создадим 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;}

Источник:  sitear.ru

Опубликовано в рубрике Язык JavaScript Метки: , , , ,
«
»
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи

Шаблоны Joomla  |  Шаблоны phpBB  |  Темы Wordpress  |  Скачать Joomla  |  Скачать Wordpress  |  Скачать phpBB  |  Скачать Drupal