Создаем систему комментирования
В данном уроке мы создадим собственную систему комментирования (с использованием 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; }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-9K2E69mUuQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.