MYSQL
PHP
HTML
CSS
JS

Создание PHP чата. С использованием MySQL, jQuery (ajax)

Перед созданием самого чата нужно создать базу данных "messages_db" и таблицу "messages" на Вашем сервере. Поля таблицы "messages":
  • id - INTEGER index autoincrement (индекс с автоинкрементом),
  • author - TEXT,
  • message - TEXT
?
1
2
3
4
5
6
7
CREATE TABLE messages
(
    id INT PRIMARY KEY AUTO_INCREMENT,
    author TEXT,
    message TEXT
);
CREATE UNIQUE INDEX messages_id_uindex ON messages (id);
Теперь можно приступить к самому программированию. Подключаемся к db (создаём файл db.php):
?
1
2
3
4
5
6
7
8
9
<?php
//db.php
function db() {
    $dsn = "mysql:dbname=messages_db;host=127.0.0.1;port=3306";
    $user = "root";
    $password = "";
    return new \PDO($dsn, $user, $password);
}
?>

Выводить существующие сообщения и отправлять новые будем из index.php Для вывода используем table, для ввода form c ajax запросом, вместо стандартного редиректа.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
    //index.php
    require __DIR__ . '/db.php';
    $pdo = db();
    //Текст запроса для получения всех сообщений
    $query =  'SELECT * FROM `messages`';
?>
<table id="messages">
<?php //Получение всех сообщений и вывод в цикле ?>
<?php foreach ($pdo->query($query) as $message) { ?>
    <tr>
        <td><?php echo $message['author']; ?></td>
        <td><?php echo $message['message']; ?></td>
    </tr>
<?php } ?>
</table>
 
<form id='post-message' action="post-message.php" method="post">
    <label>Введите Ваше имя: </label>
    <input type="text" name="author"><br>
    <label>Введите сообщение: </label>
    <input type="text" name="message"><br>
    <input type="submit" value="Отправить"><input type="reset">
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
Для ввода новых сообщений используем Ajax. Создадим файл script.js:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//script.js
$("#post-message").on( "submit", function( event ) {
  event.preventDefault();
  var form = this;
  $.ajax({
    url: $(form).attr("action"),
    data: $(form).serialize(),
    method: "POST",
    success: function () {
      $("#messages").append(
        "<tr><td>"
        + $(form).find("input[name=author]").val()
        + "</td><td>"
        + $(form).find("input[name=message]").val()
        + "</td></tr>"
      );
      $(form).find("input[name=author]").val("");
      $(form).find("input[name=message]").val("");
    }
  });
});
Форма создана, сообщение отправляется - осталось принять и сохранить данные. Создаём файл post-message.php:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
//post-message.php
 
if(isset($_REQUEST["author"]) && isset($_REQUEST["message"]) ){
    require __DIR__ . '/db.php';
    $pdo = db();
    $sql = "INSERT INTO messages (author, message) VALUES (:author, :message)";
    $messageSvr = $pdo->prepare($sql);
    $messageSvr->bindParam(':author', $_REQUEST["author"]);
    $messageSvr->bindParam(':message', $_REQUEST["message"]);
 
    if (!$messageSvr->execute()) {
    throw new \Exception("Cannot save message");
    }
} else {
   throw new \Exception("There is no author or message");
}
В такой чат Ваше сообщение будет добавляться сразу. Но если кто-то другой напишет в него сообщение, то у Вас оно отобразится только после перезагрузки страницы. Будет отлично, если Вы добавите возможность видеть новые сообщения сразу (для самостоятельной тренировки). p.s. Урок и так получился нагруженный. Весь код - проверен и работоспособен. Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Устанавливаем Laravel через composer Как установить PHP, MySQL сервер на Windows и Ubuntu MySQL+PHP, SELECT запросы. Вывод таблицы. Передача данных от пользователя в PHP Интерфейсы и абстрактные классы в PHP
↑