В данном уроке мы создадим собственную систему комментирования (с использованием 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">&nbsp;</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;
}

Добавлено: 02 Мая 2018 14:30:46 Добавил: Андрей Ковальчук Нравится 0

Добавить