Доска отзывов на PHP, MySQL, jQuery

Posted Fri, 12/16/2011 - 13:59

Сегодня я вам покажу, как создать подобную систему, используя супер популярную технологию jQuery AJAX. Согласно спецификации, нам необходима форма, в которую пользователь будет вводить своё имя и сообщение. После того как форма будет отправлена, мы отправим введённые данные скрипту через AJAX, который вставит данные в БД и обновит содержимое доски. Но нам также нужно обновить информацию и для других пользователей. Как? Это я вам покажу в конце урока.

В первую очередь, нам необходимо создать базу данных и таблицу, где будет копиться информация:

CREATE TABLE IF NOT EXISTS `shoutbox` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `date_time` datetime NOT NULL,
  `name` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
  `message` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM

Как я сказал ранее, нам необходима самая простая форма:

<h2>Shoutbox</h2>
<form method="post" action="shout.php">
    Name: <input type="text" id="name" name="name" />
    Message: <input type="text" id="message" name="message" class="message" />
    <input type="submit" id="submit" value="Submit" />
</form>

<div id="shout"></div>

Данный код создаст нам форму, которая удовлетворяет всем условиям. Теперь я покажу вам код jQuery, который будет извлекать и отсылать данные:

$(function() {

    $("#submit").click(function() {
        // получаем то, что написал пользователь
        var name    = $("#name").val();
        var message = $("#message").val();
        // Формируем строку запроса
        var data            = 'name='+ name +'&amp;message='+ message;

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

Всё что является на мой взгляд важным, я отметил комментарием. Этот код собирает ту информацию, которую пользователь ввёл в форму, и отправляет в файл shout.php, который в свою очередь вставляет новые данные в БД и возвращает результат. Выражение return false используется для того чтобы определить, была ли отправлена форма.

А теперь я покажу вам, как использовать расширение PDO, для того чтобы обезопасить себя при помощи подготовленных выражений и других вещей.

PHP Data Objects (PDO) - расширение для PHP, предоставляющее разработчику простой и универсальный интерфейс для доступа к различным базам данных.

Вашему вниманию представляю файл shout.php:

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

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

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

$dbname = 'shout';

try {
    $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);

if($_POST['name']) {
    $name         = $_POST['name'];
    $message    = $_POST['message'];
    /*** превратить все ошибки в исключения ***/
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "INSERT INTO shoutbox (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);

    /*** запускаем sql выражение ***/
    if ($stmt->execute()) {
        populate_shoutbox();
    }
}
}
catch(PDOException $e) {
    echo $e->getMessage();
}

/***** Это я объясню позже *****/
if($_POST['refresh']) {
    populate_shoutbox();
}
/********************************/

function populate_shoutbox() {
    // нам не нужно снова подключаться
    global $dbh;
    $sql = "select * from shoutbox order by date_time desc limit 10";
    echo '<ul>';
    foreach ($dbh->query($sql) as $row) {
        echo '<li>';
        echo '<span class="date">'.date("d.m.Y H:i", strtotime($row['date_time'])).'</span>';
        echo '<span class="name">'.$row['name'].'</span>';
        echo '<span class="message">'.$row['message'].'</span>';
        echo '</li>';
    }
    echo '</ul>';
}

Позвольте мне тут немного объяснить. В первую очередь, мы определяем переменную, через которую будет осуществляться соединение базой.

$dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);

Это типичная запись для подключения к базе. В этом контектсе мы также выбираем базу данных, с которой будем работать (вместо mysql_selectdb).

Теперь, когда соединение установлено через PDO, вы должны понять, как PDO осуществляет процесс вставки данных в БД. Если вы никогда не имели дело с подобными системами, то знайте, что они используют 4 фичи: Атомарность, Согласованность, Изолированность и Долговечность (ACID). Если говорить профессиональным языком, то транзакция, даже та, которая осуществляется поэтапно, гарантированно будет выполняться в безопасном режиме, исключая все сторонние вмешательства. Работа транзакций может быть откатана в любой момент при вашем запросе (если вы не закончили сам процесс), что позволяет эффективнее отловить все пойманные ошибки.

Транзакция также позволят вам без особых сложностей применить сразу все обновления; что на самом деле увеличивает эффективность актуализации данных. Другими словами, транзакции могут сделать ваш скрипт быстрым и безопасным (если руки у вас на месте).

Второй момент, который я хотел бы объяснить, - это подготовка выражения для вставки в базу данных. Этот процесс обеспечивает вам высшую степень безопасности. Параметры, которые вы вставляете в выражения не нужно помещать в кавычки; драйвер автоматически сделает это за вас. Если приложение использует подготовленные выражения, то разработчик может быть уверен в том, что никакие SQL инъекции ему не страшны.

Ещё одно преимущество в том, что выражение может быть составлено единожды, а использовано многократно, при чём с таким же или другим числом параметров. Когда выражение будет готово, адаптер проанализирует все данные, скомпилирует и оптимизирует их, а затем создаст запрос. Для очень сложных запросов времени может потребоваться побольше. В общем, используя такие выражения ваши данные пройдут через следующий цикл: анализ/компиляция/оптимизация.

Наша функция populate_shoutbox выбирает последние 10 строк, которые хранятся в таблице и создаёт список, который возвращается на лицевую сторону сайта.

Теперь, если вы помните, я сказал о том, при добавлении, данные отобразятся всем пользователям, которые будут находится на данной странице. Также я упомянул, что при этом мы не будем использовать перезагрузку страницы.

Ну так вот. Метод, который будет заполнять страницу содержимым, запустится один при входе на страницу, а затем будет вызываться каждые 15 секунд. Этого времени вполне хватит – мы же не чат делаем, в конце концов.

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

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

//заполнить страницу в первый раз
refresh_shoutbox();
// обновить каждые 15 секунд
setInterval("refresh_shoutbox()", 15000);

Далее задействуем следующие строки:

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

Если мы получили $_POST['refresh'], то нам просто надо вытащить данные и вернуть их в js код.

Вот и всё. В этом уроке мы создали доску отзывов для своих пользователей. Также я рассказал вам о расширении PDO, которое упрощает безопасное общение с БД. Спасибо за внимание!

  • Categories: