Создание стены как ВКонтакте

Решил написать мини-пособие для начинающих как реализовать нечто подобное стене ВКонтакте. И вот я подготовил этот очень простой пример, который поможет вам понять, как сделать такую функцию на своем сайте самостоятельно. Нужно всего-ничего - несколько строк PHP и JavaScript кода.

Имейте ввиду, каждое сообщение ВКонтакте на стене содержит много информации (отправитель, содержание сообщения, дата и т.д.), а как уже я сказал, это руководство предназначено для начинающих Ajax / JQuery / PHP. Поэтому я решил упростить нашу первую стену до минимума, используя только содержание сообщения.

Итак, создадим 3 файла:
- confing.php (содержит параметры подключения к базе данных)
- index.php (форма отправки и список сообщений)
- insert.php ( содержит код для добавления нашего сообщения в базу данных сайта)
- jquery.js - js-фреймворк, можно скачать на jquery.com

Рассмотрим, как наша стена работает.

index.php

В контейнере head html-документа содержится следующий код:

<script type="text/javascript" src="/jquery.js"> </script>  <!-- Не забываем, что эту библиотеку мы качали, поэтому не тупо копируйте код отсюда, а следите, что подключаете - у вас она скорее всего имеет другое имя -->
<script type="text/javascript">
function doit(text){
    $.ajax({
        type: "POST",
        url: "insert.php",
        data:"message_wall=" + text,
        success: function(){
            $("ul#wall").prepend("<li style=\"display: none;\">"+ text +"</li>");
            $("ul#wall li:first-child").fadeIn();
            }
        });
    return false;
};
</script>

В body будет такой:

<form id="submit_wall">
  <p>
    <label for="message_wall">Оставьте свое сообщение на стене:</label>
  </p>
  <p>
    <input type="text" id="message_wall" value="" />
  </p>
  <p>
    <input type="button" value="Оставить сообщение" onclick="doit( document.getElementById('message_wall').value );" />
  </p>
</form>
<br />
<ul id="wall">
<?php

include('config.php');
$result = mysql_query("SELECT * FROM `wall` ORDER BY `id` DESC");
while ( $row = mysql_fetch_array($result) )
{
    echo '<li>'.$row['message'].'</li>';
}

?>
</ul>

index.php содержит форму с id "submit_wall", которая в свою очередь включает input для ввода текста с идентификатором "message_wall". Когда пользователь отправляет новое сообщение, оно добавляется к началу списка с id "wall".

Что касается js-кода, то рассмотрим его поподробнее.

.prepend(...) - является функцией Jquery позволяющей вставлять контент внутрь каждого элемента набора. Добавляемый контент следует перед уже существующим (в данном случае список ul с id 'wall', т.е. пишем так $("ul#wall"), подробнее о синтаксисе - в гугле). Когда добавляется новое сообщение, стиль у него изначально {display: none}. Затем оно плавно появляется из-за строчки: $("ul#wall li:first-child").fadeIn();

ul#wall:first - получает первый li элемент (последнее добавленное сообщение) в ul с идентификатором "#wall".
С помощью функции $.ajax мы отправляем асинхронный запрос нашему скрипту insert.php, который и добавляет нашу запись в базу данных. В параметрах указываем куда, каким методом и какие данные отправляем, и что будем делать после положительного отклика.

insert.php

if( isset($_POST['message_wall']) )
{
    include('config.php');

    $message = strip_tags($_POST['message_wall']); // здесь может быть и mysql_real_escape_string
    
    $sql = "INSERT INTO `wall` (`message`) VALUES( '".$message."')";
    mysql_query($sql);
    
    echo $message;
}
else
{
    echo 0;
}

insert.php просто-напросто содержит несколько строк PHP-кода для вставки новых сообщений в таблицу базы данных. В этом примере я создал таблицу WALL с одним атрибутом "message". И предусматривайте возможные sql- или xss-инъекции (а вообще если есть вопросы, или что-то непонятно, милости прошу комментировать, обязательно отвечу).

Касательно config.php, так это вообще детский сад:

$cnt = mysql_connect('localhost', 'user', 'pass');
if ( $cnt )
    mysql_select_db('wall');
else
    die('Ошибка');

Не забудьте только прописать свои хост, имя бд, логин и пароль в функциях mysql_connect и mysql_select_db.

Вот и все! Наша стена практически не уступает ВКонтактовской =). Для того, чтобы нарастить функционал, необходимо внести некоторые коррективы в базу данных и файл insert.php. Например для фиксации даты сообщения нужно в таблице wall создать еще одно поле, например message_date типа timestamp, и модифицировать sql-запрос следующим образом:
'INSERT INTO `wall` (`message`, `message_date`) VALUES( '".$message."', NOW)';

Как это все работает, можно посмотреть здесь.

Еще раз напоминаю - ЕСЛИ ХОТЬ ЧТО-ТО НЕПОНЯТНО, НАПИШИТЕ В КОММЕНТАРИЯХ, разъясню все беспрекословно =)

Архив с нужными файлами можно скачать отсюда

UPD

Иногда спрашивают, как сделать удаление записей. Вот здесь я написал отдельную статью по расширению возможностей стены.

UPD 2

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

UPD 3

По ссылке можно посмотреть, как сделать отдельные стены для каждого пользователя.

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.