Создаем систему комментирования
В данном уроке мы создадим собственную систему комментирования (с использованием AJAX) разных пунктов списка (может быть все что угодно на вашем сайте - статьи, товары, фотографии и так далее) с применением PHP. В системе будет использоваться простая защита от спама - можно размещать только один комментарий в течении 10 минут. В проекте также задействован jQuery.
Для демонстрации используется две SQL таблицы. Первая таблица хранит записи о пунктах списка и содержит следующие поля: заголовок, описание, время добавления в список и количество комментариев. Другая таблица содержит все комментарии.
Шаг 1. SQL
В базу данных надо добавить 2 таблицы:
CREATE TABLE IF NOT EXISTS `s163_items` (
`id` int(10) unsigned NOT NULL auto_increment,
`title` varchar(255) default '',
`description` text NOT NULL,
`when` int(11) NOT NULL default '0',
`comments_count` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `s163_items` (`title`, `description`, `when`, `comments_count`) VALUES
('Пункт #1', 'Описание пункта #1', UNIX_TIMESTAMP(), '0'),
('Пункт #2', 'Описание пункта #2', UNIX_TIMESTAMP()+1, '0'),
('Пункт #3', 'Описание пункта #3', UNIX_TIMESTAMP()+2, '0'),
('Пункт #4', 'Описание пункта #4', UNIX_TIMESTAMP()+3, '0'),
('Пункт #5', 'Описание пункта #5', UNIX_TIMESTAMP()+4, '0');
CREATE TABLE IF NOT EXISTS `s163_items_cmts` (
`c_id` int(11) NOT NULL AUTO_INCREMENT ,
`c_item_id` int(12) NOT NULL default '0',
`c_ip` varchar(20) default NULL,
`c_name` varchar(64) default '',
`c_text` text NOT NULL ,
`c_when` int(11) NOT NULL default '0',
PRIMARY KEY (`c_id`),
KEY `c_item_id` (`c_item_id`)
) ENGINE=MYISAM DEFAULT CHARSET=utf8;
Первая таблица - для пунктов списка, вторая - для комментариев.
Шаг 2. PHP
Код основного файла:
index.php
<?php
// Отключаем возможные предупреждения
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // Включаем сервисный класс для работы с базой данных
$sCode = '';
$iItemId = (int)$_GET['id'];
if ($iItemId) { // Просматриваем данные
$aItemInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s163_items` WHERE `id` = '{$iItemId}'"); // Получаем информацию из базы данных
$sCode .= '<h1>'.$aItemInfo['title'].'</h1>';
$sCode .= '<h3>'.date('d/m/Y', $aItemInfo['when']).'</h3>';
$sCode .= '<h2>Описание:</h2>';
$sCode .= '<h3>'.$aItemInfo['description'].'</h3>';
$sCode .= '<h3><a href="'.$_SERVER['PHP_SELF'].'">Назад</a></h3>';
// Выводим 5 последних комментариев
$sComments = '';
$aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
foreach ($aComments as $i => $aCmtsInfo) {
$sWhen = date('d/m/Y H:i', $aCmtsInfo['c_when']);
$sComments .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
<p>Автор: {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
<p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
}
ob_start();
?>
<div class="container" id="comments">
<h2>Комментарии</h2>
<script type="text/javascript">
function submitComment(e) {
var sName = $('#name').val();
var sText = $('#text').val();
if (sName && sText) {
$.post('comment.php', { name: sName, text: sText, id: <?= $iItemId ?> },
function(data){
if (data != '1') {
$('#comments_list').fadeOut(1000, function () {
$(this).html(data);
$(this).fadeIn(1000);
});
} else {
$('#comments_warning2').fadeIn(1000, function () {
$(this).fadeOut(1000);
});
}
}
);
} else {
$('#comments_warning1').fadeIn(1000, function () {
$(this).fadeOut(1000);
});
}
};
</script>
<div id="comments_warning1" style="display:none">Пожалуйста, заполните оба поля (Имя и комментарий)</div>
<div id="comments_warning2" style="display:none">Вы можете размещать только один комментарий каждые 10 минут (защита от спама)</div>
<form onsubmit="submitComment(this); return false;">
<table>
<tr><td class="label"><label>Ваше имя: </label></td><td class="field"><input type="text" value="" title="Введите ваше имя" id="name" /></td></tr>
<tr><td class="label"><label>Комментарий: </label></td><td class="field"><textarea name="text" id="text"></textarea></td></tr>
<tr><td class="label"> </td><td class="field"><input type="submit" value="Отправить" /></td></tr>
</table>
</form>
<div id="comments_list"><?= $sComments ?></div>
</div>
<?
$sCommentsBlock = ob_get_clean();
} else {
$sCode .= '<h1>Список пунктов:</h1>';
$aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items` ORDER by `when` ASC"); // Получаем информацию обо всех пунктах из базы данных
foreach ($aItems as $i => $aItemInfo) {
$sCode .= '<h2><a href="'.$_SERVER['PHP_SELF'].'?id='.$aItemInfo['id'].'">'.$aItemInfo['title'].'</a></h2>';
}
}
?>
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title>Система комментирования | Материалы сайта RUSELLER.COM</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
</head>
<body>
<div class="container">
<?= $sCode ?>
</div>
<?= $sCommentsBlock ?>
<footer>
<h2>Создаем систему комментирования</h2>
<a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a>
</footer>
</body>
</html>
По умолчанию данный скрипт выводит список пунктов. Каждый пункт имеет свою страницу. На данной странице выводится название пункта, дата добавления в список, описание и блок комментариев. В блоке содержится форма для добавления нового комментария и выводится 5 последних комментариев.
Следующий файл PHP:
comment.php
<?php
// Отключаем возможные предупреждения
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // Включаем сервисный класс
$iItemId = (int)$_POST['id']; // Получаем необходимую информацию
$sIp = getVisitorIP();
$sName = $GLOBALS['MySQL']->escape(strip_tags($_POST['name']));
$sText = $GLOBALS['MySQL']->escape(strip_tags($_POST['text']));
if ($sName && $sText) {
// Проверка - размещался недавно комментарий или нет
$iOldId = $GLOBALS['MySQL']->getOne("SELECT `c_item_id` FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' AND `c_ip` = '{$sIp}' AND `c_when` >= UNIX_TIMESTAMP() - 600 LIMIT 1");
if (! $iOldId) {
// Если нет - добавляем комментарий
$GLOBALS['MySQL']->res("INSERT INTO `s163_items_cmts` SET `c_item_id` = '{$iItemId}', `c_ip` = '{$sIp}', `c_when` = UNIX_TIMESTAMP(), `c_name` = '{$sName}', `c_text` = '{$sText}'");
$GLOBALS['MySQL']->res("UPDATE `s163_items` SET `comments_count` = `comments_count` + 1 WHERE `id` = '{$iItemId}'");
// и выводим последние 5 комментариев
$sOut = '';
$aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
foreach ($aComments as $i => $aCmtsInfo) {
$sWhen = date('d/m/Y H:i', $aCmtsInfo['c_when']);
$sOut .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
<p>Автор: {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
<p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
}
echo $sOut;
exit;
}
}
echo 1;
exit;
function getVisitorIP() {
$ip = "0.0.0.0";
if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
} elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
$ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
$ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
} elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
$ip = $_SERVER['REMOTE_ADDR'];
}
}
return $ip;
}
?>
Данный файл принимает комментарии, переданные запросом POST, и сохраняет их базе данных.
В проекте также есть еще один PHP файл:
classes/CMySQL.php
В нем содержится класс для работы с базой данных. Именно в этом файле надо внести данные для связи с сервером баз данных:
$this->sDbName = 'ИМЯ_БАЗЫ_ДАННЫХ';
$this->sDbUser = 'ИМЯ_ПОЛЬЗОВАТЕЛЯ';
$this->sDbPass = 'ПАРОЛЬ';
Класс достаточно универсальный и его можно использовать в других проектах.
Шаг 3. Включаем jQuery
В проекте используется jQuery, одна из версий которого содержится в файловой структуре:
js/jquery-1.5.2.min.js
Шаг 4. CSS
Осталось определиться с используемыми стилями:
css/main.css
*{
margin:0;
padding:0;
}
body {
background-repeat:no-repeat;
background-color:#bababa;
background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
color:#fff;
font:14px/1.3 Arial,sans-serif;
min-height:600px;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
border:3px #111 solid;
color:#000;
margin:20px auto;
padding:15px;
position:relative;
text-align:center;
width:500px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
#comments form {
background-color: rgba(255, 255, 255, 0.4);
margin:10px 0;
padding:10px;
text-align:left;
}
#comments table td.label {
color: #000;
font-size: 13px;
padding-right: 3px;
text-align: right;
width: 105px;
}
#comments table label {
color: #000;
font-size: 16px;
font-weight: normal;
vertical-align: middle;
}
#comments table td.field input, #comments table td.field textarea {
border: 1px solid #96A6C5;
font-family: Verdana,Arial,sans-serif;
font-size: 16px;
margin-top: 2px;
padding: 6px;
width: 250px;
}
#comments_list {
background-color: rgba(255, 255, 255, 0.4);
margin:10px 0;
padding:10px;
text-align:left;
}
#comments_list .comment {
border-top:1px solid #000;
padding:10px 0;
}
#comments_list .comment:first-child {
border-top-width:0px;
}
#comments_list .comment span {
font-size:11px;
}