Русский
Русский
English
Статистика
Реклама

Back-end

Пишем комментарии для сайта на чистом PHP MySQL Ajax

05.08.2020 02:22:35 | Автор: admin
Привет всем! Недавно столкнулся с проблемой написания комментариев на сайте. Просмотрел весь интернет в поиске нормальных статей, по поводу написания комментариев на чистом PHP 7. Статьи были, но в основном либо устаревшие, либо не работающие уже совсем. Для написания комментариев Вам необходимо знать PHP 7, MySQL, JavaScript и Ajax. Приступим!



Front-End


Структура


Для начало создаем все нужные файлы и папки.


Далее создаем самую простую форму заполнения комментария.
В comments.php:
<!DOCTYPE html><html lang="ru"><head>  <title>Комментарии</title>  <link rel="stylesheet" href="http://personeltest.ru/aways/habr.com/css/style.css">  <meta http-equiv="content-type" content="text/html; charset=utf-8">  <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script></head><body>  <form action="sendMessage.php" method="post" name="form">    <p class="is-h">Автор:<br> <input name="author" type="text" class="is-input" id="author"></p>    <p class="is-h">Текст сообщения:<br><textarea name="message" rows="5" cols="50" id="message"></textarea></p>    <input name="js" type="hidden" value="no" id="js">    <button type="submit" id='click' name="button" class="is-button">Отправить</button>  </form>  <div class="clear">  </div>  <p>Комментарии к статье</p>  <div id="commentBlock"><!-- Здесь будут высвечиваться комментарии -->  </div></body></html>


Работаем с БД


Подготовка Базы Данных


Сначала создадим нужную нам Базу Данных и таблицу:
Базу данных назовем test.
Далее создаем таблицу:
CREATE TABLE `test`.`messages` ( `id` INT(255) UNSIGNED NOT NULL AUTO_INCREMENT , `author` VARCHAR(30) NOT NULL , `message` TEXT NOT NULL , `date` VARCHAR(25) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB CHARSET=utf8 COLLATE utf8_general_ci;

Она должна быть такой структуры:


Подключение к Базе Данных


Теперь подключимся к самой базе данных. Подключаться будем в отдельном файле, чтобы в дальнейшем каждый раз не подключаться.
В файле connect.php пишем:
<?php$mysql = new mysqli('localhost', 'login', 'password', 'test');?>

Вместо login и password вставляете свои значения (логин и пароль соответственно). Например у меня login root, и пароль root:
<?php$mysql = new mysqli('localhost', 'root', 'root', 'test');?>

test название нашей Базы Данных.

Пишем сам скрипт


Получение и обработка данных из полей


Теперь нам нужно получить данные из полей. Но для начала сделаем нашу форму немного симпатичнее, чтобы было приятнее с ней работать. В style.css пропишем:
* {  max-width: 800px;  margin: 0 auto;}textarea {  resize: none;}.clear {  margin-top: 50px;}#author {  width: 100%;  height: 4%;  font-size: 1.3em;}.is-h {  font-weight: bold;  font-family: cursive;  margin-top: 2%;}#message {  width: 100%;  font-size: 1.5em;}.is-button {  cursor: pointer;  color: white;  background-color: green;  width: 25%;  height: 50px;  margin-top: 1%;  outline: none; /* Убираем линию вокруг кнопки при нажатии */  font-weight: bold;  font-family: cursive;  font-size: 1.2em;  border: none;  transition: all 0.3s ease-out;}.is-button:hover {  color: black;  background: rgb(48, 184, 66);}


Теперь наша форма должна выглядить так:


Обработка данных с помощью AJAX


Теперь получим данные из полей, обработаем их и отправим в PHP на доработку:
В файле comments.php, в теге script пропишем:
$(function() {    $("#send").click(function(){ // При нажатии на кнопку      var author = $("#author").val(); // Получаем имя автора комментария      var message = $("#message").val(); // Получаем само сообщение      $.ajax({ // Аякс        type: "POST", // Тип отправки "POST"        url: "sendMessage.php", // Куда отправляем(в какой файл)        data: {"author": author, "message": message}, // Что передаем и под каким значением         cache: false, // Убираем кеширование        success: function(response){ // Если все прошло успешно          var messageResp = new Array('Ваше сообщение отправлено','Сообщение не отправлено Ошибка базы данных','Нельзя отправлять пустые сообщения');          var resultStat = messageResp[Number(response)];          if(response == 0){             $("#author").val("");            $("#message").val("");            $("#commentBlock").append("<div class='comment'>Автор: <strong>"+author+"</strong><br>"+message+"</div>");}            $("#resp").text(resultStat).show().delay(1500).fadeOut(800);}});return false;});});

Обработка данных и запись их в БД


Теперь приступим к самому интересному. Для начала нам нужно провести самые примитивные проверки и словить данные с AJAX. В sendMessage.php пишем:
<?php include("connect.php"); // Подключаемся к БДheader("Content-type: text/html; charset=UTF-8"); // Устанавливаем кодировку//Если JS у пользователя включенif(empty($_POST['js'])){ if($_POST['message'] != '' && $_POST['author'] != ''){ // Если поля не пустые$author = @iconv("UTF-8", "windows-1251", $_POST['author']);$author = addslashes($author);$author = htmlspecialchars($author);$author = stripslashes($author);$author = mysql_real_escape_string($author); // Обрабатываем данные$message = @iconv("UTF-8", "windows-1251", $_POST['message']);$message = addslashes($message);$message = htmlspecialchars($message);$message = stripslashes($message);$message = mysql_real_escape_string($message); // Обрабатываем данные$date = date("d-m-Y в H:i:s"); // Получаем дату(фиксируем)$result = $mysql->query("INSERT INTO `messages` (`author`, `message`, `date`) VALUES ('$author', '$message', '$date')"); // Передаем в БД значенияif($result == true){echo 0; //Ваше сообшение успешно отправлено}else{echo 1; //Сообщение не отправлено. Ошибка базы данных}}else{echo 2; //Нельзя отправлять пустые сообщения}}// Если отключен JavaScript if($_POST['js'] == 'no'){if($_POST['message'] != '' && $_POST['author'] != ''){$author = $_POST['author'];$author = addslashes($author);$author = htmlspecialchars($author);$author = stripslashes($author);$message = $_POST['message'];$message = addslashes($message);$message = htmlspecialchars($message);$message = stripslashes($message);$date = date("d-m-Y в H:i:s");$result = $mysql->query("INSERT INTO `messages` (`author`, `message`, `date`) VALUES ('$author', '$message', '$date')");if($result == true){echo "Ваше сообшение успешно отправлено"; //Ваше сообшение успешно отправлено}else{echo "Сообщение не отправлено. Ошибка базы данных"; //Сообщение не отправлено. Ошибка базы данных}}else{echo "Нельзя отправлять пустые сообщения"; //Нельзя отправлять пустые сообщения}}?>

Вывод комментариев


Теперь дело за малым. Осталось всего лишь вывести эти комментарии в приятной для глаза форме.
Сначала необходимо подключиться к БД в comments.php. В самом верху пишем:
<?php require 'connect.php'; ?>

В div с id=commentBlock в файле comments.php пишем:
<?php            $result = $mysql->query("SELECT * FROM `messages`"); /*Получаем все данные из таблицы*/            $comment = $result->fetch_assoc(); /* В результирующий массив */            do{echo "<div class='comment' style='border: 1px solid gray; margin-top: 1%; border-radius: 5px; padding: 0.5%;'>Автор: <strong>".$comment['author']."</strong><br>".$comment['message']."</div>"; // Выводим          }while($comment = $result->fetch_assoc());          ?>

По комментариям должно быть все понятно. И теперь у нас должно получиться что-то вроде такого:

Всем спасибо за Внимание! Вот исходники:
comments.php
<?php require 'connect.php'; ?><!DOCTYPE html><html lang="ru"><head>  <title>Комментарии</title>  <link rel="stylesheet" href="http://personeltest.ru/aways/habr.com/css/style.css">  <meta http-equiv="content-type" content="text/html; charset=utf-8">  <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>  <script type="text/javascript">  $(function() {    $("#send").click(function(){      var author = $("#author").val();      var message = $("#message").val();      $.ajax({        type: "POST",        url: "sendMessage.php",        data: {"author": author, "message": message},        cache: false,        success: function(response){          var messageResp = new Array('Ваше сообщение отправлено','Сообщение не отправлено Ошибка базы данных','Нельзя отправлять пустые сообщения');          var resultStat = messageResp[Number(response)];          if(response == 0){            $("#author").val("");            $("#message").val("");            $("#commentBlock").append("<div class='comment'>Автор: <strong>"+author+"</strong><br>"+message+"</div>");}            $("#resp").text(resultStat).show().delay(1500).fadeOut(800);}});return false;});});            </script>          </head>                    <body>            <form action="sendMessage.php" method="post" name="form">              <p class="is-h">Автор:<br> <input name="author" type="text" class="is-input" id="author"></p>              <p class="is-h">Текст сообщения:<br><textarea name="message" rows="5" cols="50" id="message"></textarea></p>              <input name="js" type="hidden" value="no" id="js">              <button type="submit" id='click' name="button" class="is-button">Отправить</button>            </form>            <div class="clear">                          </div>                        <p>Комментарии к статье</p>                        <div id="commentBlock">              <?php              $result = $mysql->query("SELECT * FROM `messages`");              $comment = $result->fetch_assoc();              do{echo "<div class='comment' style='border: 1px solid gray; margin-top: 1%; border-radius: 5px; padding: 0.5%;'>Автор: <strong>".$comment['author']."</strong><br>".$comment['message']."</div>";              }while($comment = $result->fetch_assoc());              ?>            </div>          </body>          </html>


sendMessage.php:
<?php include("connect.php");header("Content-type: text/html; charset=UTF-8");//**********************************************if(empty($_POST['js'])){if($_POST['message'] != '' && $_POST['author'] != ''){$author = @iconv("UTF-8", "windows-1251", $_POST['author']);$author = addslashes($author);$author = htmlspecialchars($author);$author = stripslashes($author);$author = mysql_real_escape_string($author);$message = @iconv("UTF-8", "windows-1251", $_POST['message']);$message = addslashes($message);$message = htmlspecialchars($message);$message = stripslashes($message);$message = mysql_real_escape_string($message);$date = date("d-m-Y в H:i:s");$result = $mysql->query("INSERT INTO `messages` (`author`, `message`, `date`) VALUES ('$author', '$message', '$date')");if($result == true){echo 0; //Ваше сообшение успешно отправлено}else{echo 1; //Сообщение не отправлено. Ошибка базы данных}}else{echo 2; //Нельзя отправлять пустые сообщения}}//**************************************** Если отключен JavaScript ************************************if($_POST['js'] == 'no'){if($_POST['message'] != '' && $_POST['author'] != ''){$author = $_POST['author'];$author = addslashes($author);$author = htmlspecialchars($author);$author = stripslashes($author);$message = $_POST['message'];$message = addslashes($message);$message = htmlspecialchars($message);$message = stripslashes($message);$date = date("d-m-Y в H:i:s");$result = $mysql->query("INSERT INTO `messages` (`author`, `message`, `date`) VALUES ('$author', '$message', '$date')");if($result == true){echo "Ваше сообшение успешно отправлено"; //Ваше сообшение успешно отправлено}else{echo "Сообщение не отправлено. Ошибка базы данных"; //Сообщение не отправлено. Ошибка базы данных}}else{echo "Нельзя отправлять пустые сообщения"; //Нельзя отправлять пустые сообщения}}?>


connect.php:
<?php$mysql = new mysqli('localhost', 'root', 'root', 'test');?>


style.css:
* {  max-width: 800px;  margin: 0 auto;}textarea {  resize: none;}.clear {  margin-top: 50px;}#author {  width: 100%;  height: 4%;  font-size: 1.3em;}.is-h {  font-weight: bold;  font-family: cursive;  margin-top: 2%;}#message {  width: 100%;  font-size: 1.5em;}.is-button {  cursor: pointer;  color: white;  background-color: green;  width: 25%;  height: 50px;  margin-top: 1%;  outline: none; /* Убираем линию вокруг кнопки при нажатии */  font-weight: bold;  font-family: cursive;  font-size: 1.2em;  border: none;  transition: all 0.3s ease-out;}.is-button:hover {  color: black;  background: rgb(48, 184, 66);}

Подробнее..
Категории: Javascript , Php , Js , Mysql , Ajax , Jquery , Back-end , Comments

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru