ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание блока комментариев на сайте с использованием Ajax

Создание блока комментариев на сайте с использованием Ajax

Одним из атрибутов, без которых сегодня не обходится практически ни один сайт является блок комментариев. Для демонстрации возможностей PHP, MySQL и Ajax в реализации задачи создания комментариев с асинхронным выводом их на страницу будет посвящена эта статья. Для демонстрации работы скрипта создадим файл, у меня будет называться test2.php, где будет размещена форма ввода данных, с помощью которой будут создаваться комментарии.

Но прежде чем поступать к реализации поставленной задачи, создадим в базе данных test, таблицу comments, структура которой показана ниже.

CREATE TABLE IF NOT EXISTS `comments` (
`id` int(11) NOT NULL,
  `login` tinytext NOT NULL,
  `message` text NOT NULL,
  `data_add` datetime NOT NULL,
  `moderation` tinyint(1) NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Таблица содержит 5 полей.

Где:

  • id - первичный ключ таблицы, набженный атрибутом AUTO_INCREMENT, позволяющий автоматически назначать уникальные значения новым записям таблицы.
  • login - автор сообщения.
  • message - текст сообщения.
  • data_add - дата размещения сообщения.
  • moderation - статус сообщения, поле принимает значение 0 для скрытых сообщений и 1 доступных для просмотра.

Файл test2.php с точкой ввода сообщения:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?= $pagename="Форма размещения комментариев" ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>
#form{margin:10px 0 10px 20px}
#img
{
display:none;
position:absolute;
top:330px;
left: 25%;
right:25%;
}
#info{
margin-top:45px

}
.content{
list-style:none;
border:#CFCBCB solid 1px;
border-radius:5px;
margin:6px 0 0 -15px;
padding:2px 10px 2px 10px;

}
.message{margin:4px;}
.author{float:left; margin:4px; font-size:12px; font-weight:600}
.date{float:right; margin:4px; font-size:12px; font-weight:600}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#submit_id").on("click", function(){
//Проверяем корректность заполнения полей и удаляем крайние пробелы $.trim()
if($.trim($("#login").val())=== "")
{
alert("Вы не заполнили поле Автор");
}
if($.trim($("#message").val())=== "")
{
alert("Вы не заполнили поле Сообщение");
}

$.ajax({
url:"addcom.php",
data:{
login:$("#login").val(),
message:$("#message").val()
},
type:"POST",
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

}
}).done(function(data){
$("#info").html(data);
//очищаем поля формы
$("#login").val('');
$("#message").val('');

})

})
});
</script>
</head>

<body>

<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="min-height:950px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i><?= $pagename ?></h2>
<div id="form">
<p>
<label for="login">Автор:</label><br>
<input type="text" id="login" ><br>
<label for="message">Сообщение:</label><br>
<textarea id="message" rows="5" cols="60"></textarea><br>
</p>
<p>
<label for="submit_id">
<input type="submit" id="submit_id" value="Отправить">
</label>
</p>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>

<div id="info">
<h3>Комментарии</h3>
<?php require_once("addcom.php")?>
</div>
</div>
</div>
</div>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</body>
</html>

НТМL-форма для отправки сообщений состоит из текстового поля для имени автора с идентификатором login, текстовой области для сообщения с идентификатором message и кнопки для отправки сообщений с идентификатором suЬmit_id. Именно этой кнопке назначается обработчик click, в котором проверяется корректность заполнения полей формы, и в случае успеха данные из них отправляются методом POST файлу addcom.php.

Для того чтобы отправить POST-залрос серверу, задействуется метод $.ajax библиотеки jQuery, которому передается:

  1. адрес обработчика addcom.php;
  2. HTTP-метод, в нашем случае POST;
  3. объект, содержащий имена POST-параметров {login и message), а также POST-данные, которые извлекаются из текстового поля login и текстовой области message при помощи метода val().

Полученный ответ (текущий список сообщений) размещается в div-тere с идентификатором info. Чтобы не было повторного отправления данных, поля формы очищаются с помощью не хитрого метода $("#login").val(''); и $("#message").val('');

Файл addcom.php


<?php
// Устанавливаем соединение с базой данных
$pdo = new PDO("mysql:host=localhost; dbname=srv73637_test","srv73637_admin","tktyf");
sleep(3);
function test_input($data) {//функция проверки переменных формы
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
try{
if(!empty($_POST)){
$error = [];
if(empty($_POST['login'])){
$error[]= "Отсутствует автор";
}
if(empty($_POST['message'])){
$error[]= "Отсутствует сообщение";
}

if(empty($error)){

$query = "INSERT INTO comments VALUES(NULL, :login, :message, NOW(), 1)";
$usr = $pdo->prepare($query);
$usr->execute(['login' =>test_input($_POST['login']), 'message' => test_input($_POST['message'])]);

}
}
$query = "SELECT * FROM comments WHERE moderation = 1 ORDER BY data_add DESC";
$com = $pdo->query($query);
//Выводим колличество комментариев
$count = $com->rowCount();
echo "<h3>Комментарии(".$count.")</h3>";
while($comments = $com->fetch()){
echo "<ul class='content'>
<li class='author'> автор: "
.$comments['login']."</li>
<li class='date'> дата публикации: "
.$comments['data_add']."</li><br style='clear:both'>
<li class='message'>"
.$comments['message']."</li>
</ul> "
;
}

}catch(PDOException $e){
echo "Ошибка в выполнении запроса ".$e->getMessage();
}

?>

Файл addcom.php условно можно разбить на две части: регистрация сообщений и вывод ленты сообщений. Если файл addcom.php получает какие-либо POST-параметры, считается, что происходит попытка добавить сообщение в базу данных. В любом случае скрипт возвращает список текущих сообщений, отсортированных по времени добавления.

Мы уже знаем, по предыдущей статье, что запросы, в которых используются параметры, передаются специальному методу prepare() $usr = $pdo->prepare($query);. Запрос содержит два параметра login и message, которые заполняются на этапе выполнения методом execute().

Извлечение данных из таблицы comments производится с помощью уже знакомого нам метода fetch(). Новый для нас метод rowCount() возвращает количество строк, которые были затронуты в ходе выполнения последнего запроса, например DELETE, INSERT или UPDATE. Строки выведенные методом соответствуют количеству сделанных комментариев.

Протестируем наши скрипты.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?= $pagename="Форма размещения комментариев" ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>
#form{margin:10px 0 10px 20px}
#img
{
display:none;
position:absolute;
top:330px;
left: 25%;
right:25%;
}
#info{
margin-top:45px

}
.content{
list-style:none;
border:#CFCBCB solid 1px;
border-radius:5px;
margin:6px 0 0 -15px;
padding:2px 10px 2px 10px;

}
.message{margin:4px;}
.author{float:left; margin:4px; font-size:12px; font-weight:600}
.date{float:right; margin:4px; font-size:12px; font-weight:600}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#submit_id").on("click", function(){
//Проверяем корректность заполнения полей и удаляем крайние пробелы $.trim()
if($.trim($("#login").val())=== "")
{
alert("Вы не заполнили поле Автор");
}
if($.trim($("#message").val())=== "")
{
alert("Вы не заполнили поле Сообщение");
}

$.ajax({
url:"addcom.php",
data:{
login:$("#login").val(),
message:$("#message").val()
},
type:"POST",
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

}
}).done(function(data){
$("#info").html(data);
//очищаем поля формы
$("#login").val('');
$("#message").val('');

})

})
});
</script>
</head>

<body>
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="min-height:950px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i><?= $pagename ?></h2>
<div id="form">
<p>
<label for="login">Автор:</label><br>
<input type="text" id="login" ><br>
<label for="message">Сообщение:</label><br>
<textarea id="message" rows="5" cols="60"></textarea><br>
</p>
<p>
<label for="submit_id">
<input type="submit" id="submit_id" value="Отправить">
</label>
</p>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>

<div id="info">
<?php require_once("addcom.php")?>
</div>
</div>
</div>
</div>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</body>
</html>

<?php
// Устанавливаем соединение с базой данных
$pdo = new PDO("mysql:host=localhost; dbname=srv73637_test","srv73637_admin","tktyf");
sleep(3);
function test_input($data) {//функция проверки переменных формы
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
try{
if(!empty($_POST)){
$error = [];
if(empty($_POST['login'])){
$error[]= "Отсутствует автор";
}
if(empty($_POST['message'])){
$error[]= "Отсутствует сообщение";
}

if(empty($error)){

$query = "INSERT INTO comments VALUES(NULL, :login, :message, NOW(), 1)";
$usr = $pdo->prepare($query);
$usr->execute(['login' =>test_input($_POST['login']), 'message' => test_input($_POST['message'])]);

}
}
$query = "SELECT * FROM comments WHERE moderation = 1 ORDER BY data_add DESC";
$com = $pdo->query($query);
//Выводим колличество комментариев
$count = $com->rowCount();
echo "<h3>Комментарии(".$count.")</h3>";
while($comments = $com->fetch()){
echo "<ul class='content'>
<li class='author'> автор: "
.$comments['login']."</li>
<li class='date'> дата публикации: "
.$comments['data_add']."</li><br style='clear:both'>
<li class='message'>"
.$comments['message']."</li>
</ul> "
;
}

}catch(PDOException $e){
echo "Ошибка в выполнении запроса ".$e->getMessage();
}

?>

Мы создали простой блок комментариев, в котором показан принцип создания подобных модулей. При желании его можно усовершенствовать: добавить дополнительные функции, такие как ответы на комментарии, оценки комментариев, во избежание спама, связать блок комментариев с регистрацией пользователей на сайте или в социальных сетях, добавить аватар.