По сравнению со своими более ранними модификациями, современные чаты сильно изменились: в них появилась gif-анимация, другие технические и дизайнерские «фишки». Но сделать чат, даже со всеми упомянутыми техническими новшествами, по-прежнему очень просто для любого человека, хоть немного разбирающего в программировании.
Чтобы создать чат, необходимо знание азов HTML
Разработка чата любой сложности начинается с создания HTML-документа. Его каркас должен состоять из самого обычного объявления тегов так называемого DOCTYPE – html, head, body. В теге head необходимо указать название чата, а также прикрепить каскадную страницу стилей – style.css. После этого в теге body прописывается объект #wrapper div. Этот объект очень важен, так как отвечает за создание сразу 3 блоков: простого меню, экрана чата и соответствующих div и id для каждого пользователя, вводящего свои сообщения.
Затем в документ необходимо добавить еще несколько стандартных, но очень важных элементов – #menu div, #chatbox div и #wrapper div. Элемент #menu div будет состоять из двух параграфов, причем первый из них отвечает за приветствие, второй – за ссылку Выход. Объект #chatbox div полностью состоит из записей чата. Их можно будет загружать из отдельного файла при помощи системы jQuery's ajax. Элемент #wrapper div очень важен для чата, так как формирует его основную форму. Она, в свою очередь, состоит из поля для ввода и кнопки Отправить.
Если вы разобрались с этими элементами, значит, работа по созданию чата уже наполовину готова. Чтобы сделать чат, вам осталось настроить систему скриптов и немного поработать над его формой.
Чтобы создать чат, необходимо вставить два важных скрипта
Для того чтобы страницы чата загружались намного быстрее, в них нужно добавить соответствующие скрипты. Так как для создания чата используется библиотека jQuery, обязательно импортируйте скрипт Google jQuery CDN. Он будет ответственен за загрузку всего кода чата после готовности документа.
Затем в файл style.css следует добавить немного css кода в произвольной форме – это сделает интерфейс чата более привлекательным. После этого необходимо приступить к созданию формы, в которую нужно вводить имя перед началом работы в чате. В HTML-коде она обозначается как loginForm(). Для ее фиксации необходимо использовать оператора if-else, а также переменную $_SESSION['name'].
Особое внимание стоит обратить и на использование функции htmlspecialchars(). Она конвертирует специальные символы в элементы HTML и защищает переменную имени от межсайтового скриптинга – так называемого Cross-site scripting, или XSS.
Для того чтобы создать чат, осталось лишь тщательно проверить весь его HTML-код и правильность оформления основных скриптов. Как только финальная ревизия будет завершена, простейший чат станет пригодным для использования.
