В данной статье представлен система чата, которая обладает следующими возможностями: Система регистрации пользователей. Интерфейс чата использует jQuery для переключения к последенему сообщению. Упорядоченная внутрення структура кода. Все библиотеки содержатся в папке inc, все скрипты JavaScript помещены в папку js, все файлы связанные с шаблоном находятся в папке templates. Структура классов также упорядочена: есть класс для работы с базой данных, класс для системы регистрации пользователя, класс чата. Код имеет некоторый уровень безопасности. Примером может служить использование функции process_db_input в классе базы данных. Шаг 1. HTML Шаблон для формы ввода текста в чат: templates/chat_input.html <form class="submit_form" method="post" action="" target="chat_res"> <div><input type="text" name="s_message" /><input type="submit" value="Say" name="s_say" /></div> </form> <div>Вы можете ввести что-нибудь в чат:</div> <iframe name="chat_res" style="display:none;"></iframe> Шаблон для формы регистрации пользователя: templates/login_form.html <form class="login_form" method="post" action=""> <div>Имя пользователя: <input type="text" name="username" /></div> <div>Пароль: <input type="password" name="password" /></div> <div><input type="submit" value="Login" name="Login" /></div> </form> <div>Вы можете использовать имя пользователя "User1" или "User2" и пароль "qwerty" для входа в систему</div> <hr /> Шаг 2. CSS templates/css/styles.css .login_form { border: 1px solid #AAA; padding:10px; } h3 {margin-top:3px;} .chat_main { border:1px solid #AAA; -moz-box-shadow:0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; width:350px; padding:10px; background:#f3f3f3; } .message { border:1px solid #AAA; margin:4px; padding:5px; -moz-border-radius:7px; -webkit-border-radius:7px; background:#ffffff; } .textf {-moz-box-shadow:0 0 10px #CCCCCC; -webkit-box-shadow:0 0 10px #CCCCCC; border:1px solid #CCCCCC; height:40px;} .submit { -moz-border-radius:7px; -webkit-border-radius:7px; background:#F3F3F3; border:1px solid #CCCCCC; font-size:16px; font-weight:bold; height:35px; margin-left:10px; padding:5px; } .message span { font-size:10px; color:#888; margin-left:10px; } .submit_form { margin:10px 0px; } Шаг 3. SQL Нужно выполнить следующие запросы SQL для базы данных, на которой Вы будете тренироваться: CREATE TABLE `s_ajax_chat_messages` ( `id` INT( 11 ) NOT NULL AUTO_INCREMENT , `member_id` INT( 11 ) NOT NULL , `member_name` VARCHAR( 255 ) NOT NULL , `message` VARCHAR( 255 ) NOT NULL , `when` INT( 11 ) NOT NULL , PRIMARY KEY ( `id` ) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; CREATE TABLE `s_members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `pass` varchar(40) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `s_members` (`id`, `name`, `pass`) VALUES (NULL, 'User1', 'd8578edf8458ce06fbc5bb76a58c5ca4'), (NULL, 'User2', 'd8578edf8458ce06fbc5bb76a58c5ca4'); Шаг 4. JavaScript js/main.js $(function() { getMessages = function() { var self = this; var _sRandom = Math.random(); $.getJSON('index.php?action=get_last_messages' + '&_r=' + _sRandom, function(data){ if(data.messages) { $('.chat_main').html(data.messages); } // Запускаем снова; setTimeout(function(){ getMessages(); }, 5000); }); } getMessages(); }); js/jquery-1.4.2.min.js Это библиотека jQuery. Она всегда доступна для скачивания. Шаг 5. PHP index.php <?php // Устанавливаем уровень контроля ошибок if (version_compare(phpversion(), "5.3.0", ">=") == 1) error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); else error_reporting(E_ALL & ~E_NOTICE); require_once('inc/db.inc.php'); require_once('inc/login.inc.php'); require_once('inc/ajx_chat.inc.php'); if ($_REQUEST['action'] == 'get_last_messages') { $sChatMessages = $GLOBALS['AjaxChat']->getMessages(true); require_once('inc/Services_JSON.php'); $oJson = new Services_JSON(); echo $oJson->encode(array('messages' => $sChatMessages)); exit; } // Выводим секцию ввода логина и пароля echo $GLOBALS['oSimpleLoginSystem']->getLoginBox(); // Выводим включение необходимых внешних файлов echo '<link type="text/css" rel="stylesheet" href="templates/css/styles.css" />'; echo '<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>'; echo '<script type="text/javascript" src="js/main.js"></script>'; // Выводим сообщения чата $sChatMessages = $GLOBALS['AjaxChat']->getMessages(); // Выводим форму ввода + принимаем введенный текст $sChatInputForm = 'Нужно войти в систему прежде, чем можно будет использовать ее'; if ($GLOBALS['bLoggedIn']) { $sChatInputForm = $GLOBALS['AjaxChat']->getInputForm(); $GLOBALS['AjaxChat']->acceptMessages(); } echo $sChatMessages . $sChatInputForm; require_once('templates/footer.html'); ?> inc/ajx_chat.inc.php <?php /** * Простой класс чата AJAX */ class SimpleAjaxyChat { /** * Конструктор */ function SimpleAjaxyChat() {} /** * Добавляем введенное сообщение в базу данных */ function acceptMessages() { $sUsername = $GLOBALS['aLMemInfo']['name']; $iUserID = (int)$GLOBALS['aLMemInfo']['id']; if($sUsername && isset($_POST['s_message']) && $_POST['s_message'] != '') { $sMessage = $GLOBALS['MySQL']->process_db_input($_POST['s_message'], A_TAGS_STRIP); if ($sMessage != '') { $GLOBALS['MySQL']->res("INSERT INTO `s_ajax_chat_messages` SET `member_id`='{$iUserID}', `member_name`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()"); } } } /** * Выводим форму ввода текста */ function getInputForm() { ob_start(); require_once('templates/chat_input.html'); return ob_get_clean(); } /** * Возвращаем 15 последних сообщений */ function getMessages($bOnlyMessages = false) { $aMessages = $GLOBALS['MySQL']->getAll("SELECT `s_ajax_chat_messages`.*, `s_members`.`name`, UNIX_TIMESTAMP()-`s_ajax_chat_messages`.`when` AS 'diff' FROM `s_ajax_chat_messages` INNER JOIN `s_members` ON `s_members`.`id` = `s_ajax_chat_messages`.`member_id` ORDER BY `id` DESC LIMIT 15"); $sMessages = ''; // Выбираем сообщения из базы foreach ($aMessages as $iID => $aMessage) { $sExStyles = $sExJS = ''; $iDiff = (int)$aMessage['diff']; if ($iDiff < 7) { $sExStyles = 'style="display:none;"'; $sExJS = "<script> $('#message_{$aMessage['id']}').slideToggle('slow'); </script>"; } $sWhen = date("H:i:s", $aMessage['when']); $sMessages .= '<div class="message" id="message_'.$aMessage['id'].'" '.$sExStyles.'>' . $aMessage['name'] . ': ' . $aMessage['message'] . '<span>(' . $sWhen . ')</span></div>' . $sExJS; } if ($bOnlyMessages) return $sMessages; return '<h3>Ajaxy Chat</h3><div class="chat_main">' . $sMessages . '</div>'; } } $GLOBALS['AjaxChat'] = new SimpleAjaxyChat(); ?> inc/db.inc.php, inc/login.inc.php, inc/Services_JSON.php Широко используемы классы. Доступны для скачиваня в интернете.