Shoutbox - міні-чат на ваш сайт

Хотіли б ви мати на своєму сайті міні-чат? Думаю, багато хто скаже "ТАК". Сьогодні ми розглянемо чудовий міні-чат Shoutbox, він працює на PHP, mysql і jQuery. Перш ніж розпочати роботу, перегляньте Демо (після раджу до кінця прочитати урок, щоб не робити поспішних висновків)
Чи не правда класно? Тепер про те, як таку річ реалізувати.

Скрипт для роботи використовує БД Mysql. Давайте створимо в базі таблицю shoutbox для спрощення завдання Вам і собі привожу готовий SQL-запит:

CREATE TABLE `shoutbox` (
`Id` INT (5) NOT NULL AUTO_INCREMENT,
`Date` TIMESTAMP NOT NULL,
`User` VARCHAR (25) NOT NULL,
`Message` VARCHAR (255) NOT NULL,
PRIMARY KEY (`id`)
) CHARACTER SET = utf8;


Обробляє повідомлення файл shoutbox.php. Знайдіть у ньому такі рядки і відредагуйте:

define ("HOST", "Ваш MySql-хост - зазвичай це localhost");
define ("USER", "ім'я користувача MySql");
define ("PASSWORD", "пароль до вашої MySql");
define ("DB", "Ім'я БД");


Думаю, з цим складнощів бути не повинно:) Ще пара налаштувань в цьому ж файлі:
header ("Location: index.html");
$Res = getContent ($link, 50);


header - Тут ми відправляємо недбайливих користувачів, які намагаються безпосередньо викликати роботу файлу, shoutbox.php на сторінку index.html.
getContent ($link, 50) - кількість повідомлень на сторінку. У даному прикладі буде вибрано 50 останніх повідомлень.

Тепер в потрібному місці вставляємо форму відправки повідомлення та div-контейнер, який міститиме останні повідомлення чату:
<form method="post" id="form">
<table>
<tr>
<td> <label> Ваше ім'я </ label> </ td>
<td> <input class="text user" id="nick" type="text" MAXLENGTH="25" /> </ td>
</ Tr>
<tr>
<td> <label> Повідомлення </ label> </ td>
<td> <input class="text" id="message" type="text" MAXLENGTH="255" /> </ td>
</ Tr>
<tr>
<td> </ td>
<td> <input id="send" type="submit" value="Отправіть" /> </ td>
</ Tr>
</ Table>
</ Form>
<div id="container">
<div class="content">
<h1> Останні повідомлення </ h1>
<div id="loading"> <img src = "<a href="http://www.newbie.com.ua/css.html" target="_blank" title="CSS">CSS</a> / images / loading.gif" alt = "Завантаження ..." /> </ Div>
<ul>
</ Div>
</ Div>
<script type="text/javascript" src="/jquery.js"> </ script>
<script type="text/javascript" src="/shoutbox.js"> </ script>


Звичайна форма з 3-ми input. Після форми йде div # container, нехай вас не бентежить наявність самотнього тега p. Всі повідомлення виводить у вигляді <p> Ім'я - повідомлення </ p> (див. файл shoutbox.php). І в кінці ми підключаємо jQuery і сам скрипт shoutbox.js (можете це зробити і традиційно між тегами head)

CSS тут відповідає тільки за зовнішній вигляд чату. Тому докладно розглядати його в цьому уроці не будемо. Просто не забудьте включити стилі з файлу css / general.css на вашу сторінку, або, що ще краще, зробіть індивідуальний дизайн. Єдине що варто пам'ятати, id і class з наведеного вище коду використовує і скрипт shoutbox.js, тому якщо ви будете змінювати імена id і class на свої, не забудьте зробити це також в shoutbox.js

На сьогодні це все. Нехай цей урок стане для вас подарунком на першотравневі свята, думаю, цей міні-чат ви знайдете куди прилаштувати;)

P.S. Для тих хто хоче з цього скрипта отримати більш повноцінний чат, злегка допрацюємо оригінальний скрипт:

Сенс в тому, що ми будемо оновлювати зміст віконця чату через певний час. Для цього нам знадобиться плагін, який суттєво спростить завдання jquery.timers.js. Його підключаємо як зазвичай, а в shoutbox.js додаємо наступні рядки:
$(". Content> p"). EveryTime (30000, function () {
$.Ajax ({
type: "POST", url: "shoutbox.php", data: "action = update",
complete: function (data) {
loading.fadeOut ();
messageList.html (data.responseText);
messageList.fadeIn ("fast");
}
});
 
});



everyTime (30000) - час в мілісекунди, через яке вміст вікна буде оновлюватися. У прикладі коштує 30 секунд.
Завантажити плагін з виправленим shoutbox.js тут. Демка працює за первісним варіантом, але ви можете легко протестувати оновлений скрипт у себе на сайті.

PPS виправляємо проблему букв "И" та "ш"
Я вирішив ці літери просто замінити на їхні символи з "Таблиця символів Unicode". Знайдіть рядок case "insert": (66-й рядок) у файлі shoutbox.php і замініть вміст case на цей код: напишіть наступне правило:
$Message = str_replace ("ш", "ш", $_POST ['message']);
$Message = str_replace ("І", "І", $message);
$Nick = str_replace ("ш", "ш", $ _POST ['nick']);
$Nick = str_replace ("І", "І", $nick);
echo insertMessage ($nick, $message);

Рішення досить просте: ми просто перед тим як нове повідомлення додати в БД, замінюємо проблемні літери на них же, але в символьному варіанті

< Попередня   Наступна >
 
Останні статтіВипадкові статті по темі

Newbie.com.ua сайт на якому розміщено інформацію про хостинги, різні CMS Joomla, Wordpress, Typo3, та інші. Корисна інформація про PHP та CSS та багато іншого, що стане в нагоді як досвідченим майстра так і початківцям, які зможуть досягти From newbie to pro. Навіьт не маючи спеціалізованих знань, ви дізнаєтесь, що таке онлайн бізнес, про створення сайтів, розкрутку вебсайтів та їх монетизацію. Ви знатимете, що значить СЕО та пошукова оптимізація. Все це на нашому інтернет-журналі.