- → Программирование
- → PHP
- → Статьи
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).
Вот так будет выглядеть наш блок комментариев:
А вот так раскрытая форма добавления комментария:
Этот файл имеет 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 реклама
Development — Taras Moroz