Сделаем окно чата/объявлений, форму, добавим отправку сообщения по сочетанию клавиш ctrl + enter.

Чат + форма будут иметь вид:
<h2>Чат</h2>
<form method="post" onkeypress="ctrlEnter(event, this);">
Ваше имя: <input type="text" id="name" name="name" value="" required/>
Сообщение: <textarea id="message" type="text" name="message" class="message form-control" value="" required></textarea>
<input type="submit" id="submit" value="Отправить" class="btn btn-success" />
</form>

<div id="chat"></div>
onkeypress="ctrlEnter(event, this);" - этим добавим отслеживание сочетания клавиш.

Отправка формы будет происходить методом AJAX в файл chat.php, для этого добавим JS:

$(function() {

    $("#submit").click(function() {
        // получаем то, что написал пользователь
        var name    = $("#name").val();
        var message = encodeURIComponent($("#message").val());
if(message != "") {

        // Формируем строку запроса
        var data            = 'name='+ name +'&message='+ message;

        // ajax вызов
        $.ajax({
            type: "POST",
            url: "chat.php",
            data: data,
            success: function(html){ // после получения результата
                $("#chat").slideToggle(500, function(){
                    $(this).html(html).slideToggle(500);
                    $("#message").val("");
                });
          }
        });
}
else 
{
alert("А сообщение ввести?!");
}
        return false;
    });

});
encodeURIComponent() - добавляем для экранирования спецсимволов в сообщении, например знак "+" без этой функции проходить не будет.
Для автоматического обновления чата без обновления страницы добавим:

function refresh_chat() {
    var data = 'refresh=1';

    $.ajax({
            type: "POST",
            url: "chat.php",
            data: data,
            success: function(html){
                $("#chat").html(html);
            }
        });
}

//заполнить страницу в первый раз
refresh_chat();
// обновить каждые 15 секунд
setInterval("refresh_chat()", 15000);
И обработчик chat.php:

<?php
/* mysql хост */
$hostname = 'localhost';

/* mysql пользователь */
$username = 'root';

/* mysql пароль */
$password = '';

$dbname = 'chat';

try {
    $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);
/* Если админ нажал на кнопку удаления записи */
if($_POST['delid']) {
    $sql = "DELETE FROM chat WHERE id =  :id";
    $stmt = $dbh->prepare($sql);
    $stmt->bindParam(':id', $_POST['delid'], PDO::PARAM_INT);   
    $stmt->execute();
}
if($name) {
    $message    = $_POST['message'];
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "INSERT INTO chat (date_time, name, message)
            VALUES (NOW(), :name, :message)";
    $stmt = $dbh->prepare($sql);
    $stmt->bindParam(':name', $name, PDO::PARAM_STR);
    $stmt->bindParam(':message', $message, PDO::PARAM_STR);
    
    if ($stmt->execute()) {
        chat();
    }
}
}
catch(PDOException $e) {
    echo $e->getMessage();
}

if($_POST['refresh']) {
    chat();
}

function chat() {
    global $dbh;
    $sql = "select * from chat order by date_time desc limit 16";
    echo '<ul>';
    foreach ($dbh->query($sql) as $row) {
        echo '<li>';
        echo '<small class="tag tag-pill tag-success">'.date("H:i", strtotime($row['date_time'])).'</small> ';
        echo '<span>'.$row['name'].'</span>';
        echo '<span> '.$row['message'].'</span>';
// Добавим кнопку удаления сообщений для админа с 127.0.0.1 =)
if($_SERVER['REMOTE_ADDR'] == '127.0.0.1')
        {
            echo ' <a class="btn btn-danger" onclick="deletechatmes('.$row['id'].')" style="font-size:9px;padding:3px 5px;">X</a>';        
        }
        echo '</li>';
    }
    echo '</ul>';
}
?>
И дамп MySQL таблицы:

CREATE TABLE `chat` (
  `id` int(11) NOT NULL,
  `date_time` datetime NOT NULL,
  `name` varchar(20) NOT NULL,
  `message` varchar(255) DEFAULT NULL,
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Установить эту доработку на Ваш сайт, стоимость: 800 ₽


Комментировать