<MyRusakov.ru />

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Видеокурс "Фреймворк Yii 2.0 с нуля. Пример создания сайта" обучит Вас созданию профессиональных сайтов с использованием фреймворка Yii. В курсе есть 2 раздела: теоретический и практический. В теоретическом разделе будут разобраны возможности фреймворка Yii с примерами их использования, а в практической части будет создан сайт Blog.MyRusakov.ru с помощью полученных знаний из теоретического раздела.

Так же почти ко всем урокам идут упражнения для закрепления материала из урока на практике.

После прохождения курса Вы без труда сможете создавать любые сайты с использованием фреймворка Yii, причём делать это будете быстро и качественно.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать чат

Как сделать чат

Думаю, что каждый из Вас знает, что такое чат. И очень часто на сайтах можно встретить либо маленькие чаты, либо достаточно большие и сложные. В этой статье я опишу принцип создания чата. Обратите внимание, что в этой статье не будет готового кода "скопировал-вставил", а только алгоритм, с помощью которого Вы, обладая необходимыми знаниями, сможете сделать чат.

Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.

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

  • id - уникальный идентификатор.
  • name - имя, оставившего сообщение. Здесь также может быть, например, user_id, означающий id пользователя из другой таблицы.
  • message - сам текст сообщения.
  • date - дата отправления сообщения.

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

Теперь необходимо вывести HTML-код:

<div id="chat">
  <table>
    <tr>
      <td>Имя</td>
      <td>Сообщение</td>
      <td>Дата</td>
    </tr>
    <tr>
      <td>Имя</td>
      <td>Сообщение</td>
      <td>Дата</td>
    </tr>
  </table>
</div>
<p>
  <input type="text" name="message" id="message" />
  <input type="button" value="Отправить" onclick="send()" />
</p>

В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка "Отправить".

Обязательно для блока chat поставьте фиксированную высоту, чтобы при добавлении новых сообщений, у Вас этот блок не вырастал, также поставьте полосу прокрутки у него, чтобы можно было просмотреть все сообщения. Всё это делается с помощью CSS.

Теперь займёмся JavaScript:

<script type="text/javascript">
  function send() {
    var message = document.getElementById("message").value;
    var name = "Гость";
    /* Здесь блок отправки POST-запроса с данными (например, через Ajax) */
  }
  function update() {
    /* Здесь отправка запроса на получение всех сообщений (например, через Ajax) */
    /* Здесь вывод сообщений в определённом формате прямо в HTML-код с использованием DOM, либо JQuery. */
  }
  setInterval("update()", 1000); // Обновление окна чата каждую секунду
</script>

И, наконец, PHP-код (добавление новых сообщений):

<?php
  /* Получаем данные, полученные из JavaScript */
  $message = $_POST["message"];
  $name = $_POST["name"];
  $date = date(); // Узнаём текущее время и дату
  /* Здесь добавляем в таблицу новую запись */
?>

И последний файл, которые потребуется - это получение всех сообщений из таблицы:

<?php
  /* Вытаскиваем все записи из таблицы */
  /* Получаем двумерный массив из полученных данных */
  /* Преобразуем массив в json-формат и возвращаем его в javascript, где он уже будет выводиться */
?>

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (22):

Arthur Arthur 16.04.2012 15:02:51

Спасибо за статью, Михаил! Но ведь можно сделать и без применения js?

Ответить

Admin Admin 16.04.2012 15:04:43

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

Ответить

Inferno Inferno 18.04.2012 15:42:13

Spasiba za statiu Mixail..Vapros: Shtob Sozdat Chatik na znat PHP ? i JavScript? obizatelna ? a mojna li vot suda postavit http://remzi.mail2k.ru/ ? Zarane spasiba ..

Ответить

Admin Admin 18.04.2012 18:40:22

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

Ответить

wanderer wanderer 16.08.2012 14:38:09

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

Ответить

Admin Admin 16.08.2012 19:01:05

Отправлять вместе с запросом id последнего сообщения, например. Если новое появилось, то возвращать результат.

Ответить

wanderer wanderer 16.08.2012 22:03:49

А лучше ли будет передавать хэш id ? или лучше будет сделать специально отдельно колонку в таблице, с рандомным значением (и сделать и его хэш)чтоб исключить подстановку?!

Ответить

Admin Admin 17.08.2012 11:27:36

Если беспокоитесь о безопасности, то можете и так сделать. Как альтернатива, можете передавать не id, а время последнего обновления. Тогда выводить только сообщения, отправленные позже этого времени.

Ответить

malina95 malina95 16.01.2013 18:45:04

Можно сделать асинхронную подгрузку сообщений если не беспокоетесь о нагрузке

Ответить

aidarbek aidarbek 21.08.2012 19:56:08

Я сделал чат по такому же принципу, только я не знал как обновлять и узнал здесь. Спасибо.

Ответить

Alexei Alexei 02.04.2013 21:05:43

Михаил, а как сделать так, чтобы при обновлении страницы все сообщения из окна чата исчезали? Т.е. каждый новый пользователь не видел сообщений старых. И если это вообще возможно, то где хранить сообщения в БД или в файлах… Спасибо

Ответить

Admin Admin 02.04.2013 21:08:04

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

Ответить

q3ta q3ta 04.06.2013 22:57:22

у меня вопрос) я не разбирал код честно говоря, просмотрел поверхностно) но как быть в случае когда нужно показывать 100 сообщений, тогда контент страницы требует прокрутку) и вид вовсе не компактный, как решить эту проблему? просто не хочу курить форумы))

Ответить

Admin Admin 05.06.2013 04:19:15

Через CSS у блока можно поставить максимальную высоту и прокрутку.

Ответить

q3ta q3ta 05.06.2013 17:23:20

спасибо) просто не сталкивался с прокруткой) обязательно попробую)

Ответить

AntDant AntDant 16.06.2013 06:01:03

Михаил, вы пишите статьи для людей или для поисковиков?

Ответить

Admin Admin 16.06.2013 11:13:27

В первую очередь, для людей. Для поисковиков только <b> ставлю.

Ответить

tan tan 09.01.2014 14:21:52

Михаил, спасибо за статью. Вопрос: мне нужно установить, уже готовый чат Mibew Messenger.Все понятно, но там нужно создать БД MySQL и БД пользователя, где это создавать и как? управление сайта через самописную cms. В примере БД создаются в phpMyAdmin.

Ответить

tikkiwiki tikkiwiki 09.01.2014 15:24:48

Для создания пользователя и БД используйте все тот же phpMyAdmin

Ответить

tan tan 09.01.2014 16:59:27

Спасибо.

Ответить

Great Great 07.06.2015 15:36:50

Как можно реализовать без постоянного автообновления?

Ответить

sanda sanda 18.11.2015 17:46:46

А можно ли сделать без AJAX, DOM, JQuery и т.д. и т.п.?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.