Хотіли б ви мати на своєму сайті міні-чат? Думаю, багато хто скаже "ТАК". Сьогодні ми розглянемо чудовий міні-чат Shoutbox, він працює на php, mysql і jQuery. Перш ніж почати роботу, подивіться Демо (після раджу до кінця прочитати урок, щоб не робити поспішних висновків)
Чи не правда класно? Тепер про те, як таку річ реалізувати.
Скрипт для роботи використовує БД Mysql. Давайте створимо в базі таблицю shoutbox для спрощення завдання Вам і собі привожу готовий SQL-запит:
Обробляє повідомлення файл shoutbox.php. Знайдіть в ньому такі рядки і відредагуйте:
Думаю, з цим складнощів бути не повинно :) Ще пара налаштувань в цьому ж файлі:
header - Тут ми відправляємо недбайливих користувачів, які намагаються безпосередньо викликати роботу файлу, shoutbox.php на сторінку index.html.
getContent ($ link, 50) - кількість повідомлень на сторінку. В даному прикладі буде вибрано 50 останніх повідомлень.
Тепер в потрібному місці вставляємо форму відправки повідомлення і div-контейнер, який буде містити останні повідомлення чату:
Звичайна форма з трьома input. Після форми йде div # container, нехай вас не бентежить наявність самотнього тега p. Всі повідомлення виводяться у вигляді
Ім'я - повідомлення
(Див. Файл shoutbox.php). І в кінці ми підключаємо jQuery і сам скрипт shoutbox.js (можете це зробити і традиційно між тегами head)CSS тут відповідає тільки за зовнішній вигляд чату. Тому детально розглядати його в цьому уроці не будемо. Просто не забудьте включити стилі з файлу css / general.css на вашу сторінку, або, що ще краще, зробіть індивідуальний дизайн. Єдине що варто пам'ятати, id і class з наведеного вище коду використовує і скрипт shoutbox.js. тому якщо ви будете змінювати імена id і class на свої, не забудьте зробити це також в shoutbox.js
P.S. Для тих хто хоче з цього скрипта отримати більш повноцінний чат, злегка доопрацюємо оригінальний скрипт:
everyTime (30000) - час в мілісекундах, через яке вміст вікна буде оновлюватися. У прикладі коштує 30 секунд.
Завантажити плагін з виправленим shoutbox.js тут. Демка працює за первісним варіантом, але ви можете легко протестувати оновлений скрипт у себе на сайті.
P.P.S виправляємо проблему букв "И" та "ш"
Я вирішив ці літери просто замінити на їх символи з "Таблиця символів Unicode". Знайдіть рядок case "insert": (66-а рядок) в файлі shoutbox.php і замініть вміст case на цей код: напишіть наступне правило:
Рішення досить просте: ми просто перед тим як нове повідомлення Додати в БД, замінюємо проблемні літери на них же, але в символьному варіанті
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!