—»     —»   Мощная система для организации чата – Часть 4
  Раздел: Чаты   Комментариев: 1  

Мощная система для организации чата – Часть 4



Сегодня мы продолжим нашу эпопею, посвященную разработке чата. Наш четвертый этап разработки посвящен следующим элементам: список профайлов (для главной страницы), а также страница профайла. Мы отобразим некоторую основную информацию о пользователях нашего чата, а в следующем руководстве добавим аватары и кое-что ещё.

Сегодня мы выложим для вас обновленные исходники нашего растущего проекта (некоторые файлы были отредактированы). Весь проект разложен по полочкам: системные классы будут в папке «classes», таблицы стилей в папке «css», файлы шаблона в папке «templates», и сегодня мы добавим новую папку «images» для… изображений.

Мощная система для организации чата – Часть 4

Теперь скачайте исходники и давайте приступать к разработке!

Этап 1 – HTML

Мы немного обновили шаблон нашей главной страницы. Как видно, мы добавили новый блок – список профайлов:

templates/main_page.html

<!DOCTYPE html>
<html lang="en" >
<head>
<title>Powerful Chat System - Lesson 4</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<header>
<h2>Powerful Chat System - Lesson 4</h2>
<a href="http://www.script-tutorials.com/powerful-chat-system-lesson-4/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
{form}
</div>
<div class="container">
<h2>Main Chat Block</h2>
<div class="chat_messages">
{chat}
</div>
{input}
</div>
<div class="container">
<h2>Profiles Block</h2>
{profiles}
<script>
$(document).ready(function() { // align profiles on the center
var iAll = $('.profiles div').size();
var iWU = $('.profiles div:first').outerWidth({'margin':true});
var iWC = $('.profiles').width();
var iPerRow = parseInt(iWC/iWU);
var iLeft = (iWC - (iAll > iPerRow ? iPerRow * iWU : iAll * iWU)) / 2;
$('.profiles').css('padding-left', iLeft);
});
</script>
</div>
</body>
</html>

Пожалуйста, обратите внимание на javascript, он помогает нам выровнять пункты списка профайлов по центру блока. И сегодня мы приготовили новый шаблон для страницы профайла:

templates/main_page.html

<!DOCTYPE html>
<html lang="en" >
<head>
<title>Powerful Chat System - Lesson 4</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<header>
<h2>Powerful Chat System - Lesson 4</h2>
<a href="http://www.script-tutorials.com/powerful-chat-system-lesson-4/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="column">
<h3>Name: {name}</h3>
<h3>First name: {fname}</h3>
<h3>Last name: {lname}</h3>
<h3>About: {about}</h3>
<h3>Date Reg: {datereg}</h3>
<h3>Role: {role}</h3>
</div>
<div class="column">
<p><a href="index.php">Back to chat</a></p>
</div>
</div>
</body>
</html>

Этап 2 - CSS

Данный файл был немного обновлен. Мы добавили немного стилей в самом конце него:

css/main.css

/* profiles */
.profiles {
overflow: hidden;
}
.profiles a {
display: block;
}
.profiles div {
float: left;
height: 100px;
margin: 5px;
overflow: hidden;
padding: 5px;
text-align: center;
width: 70px;
}
.profiles div p {
font-size: 12px;
}

Этап 3 - PHP

Теперь давайте рассмотрим исходный код PHP. Наш файл index.php также был обновлен. Мы разместили обработку регистрации в новом классе «CProfiles». Данный класс мы будем использовать для работы с профайлами.

index.php

<?php

// set error reporting level
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('classes/Services_JSON.php');
require_once('classes/CMySQL.php'); // including service class to work with database
require_once('classes/CLogin.php'); // including service class to work with login processing
require_once('classes/CProfiles.php'); // including service class to work with profiles

$sErrors = '';
// join processing
if (! isset($_SESSION['member_id']) && $_POST['Join'] == 'Join') {
$GLOBALS['CProfiles']->registerProfile();
}

// login system init and generation code
$sLoginForm = $GLOBALS['CLogin']->getLoginBox();

$sChat = '<h2>You do not have rights to use chat</h2>';
$sInput = '';
if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active' && $_SESSION['member_role']) {
require_once('classes/CChat.php'); // including service class to work with chat

// get last messages
$sChat = $GLOBALS['MainChat']->getMessages();
if ($_GET['action'] == 'get_last_messages') { // regular updating of messages in chat
$oJson = new Services_JSON();
header('Content-type: application/json');
echo $oJson->encode(array('messages' => $sChat));
exit;
}

// get input form
$sInput = $GLOBALS['MainChat']->getInputForm();

if ($_POST['message']) { // POST-ing of message
$iRes = $GLOBALS['MainChat']->acceptMessage();

$oJson = new Services_JSON();
header('Content-type: application/json');
echo $oJson->encode(array('result' => $iRes));
exit;
}
}

// get profiles list
$sProfiles = $GLOBALS['CProfiles']->getProfilesBlock();

// draw common page
echo strtr(file_get_contents('templates/main_page.html'), array('{form}' => $sLoginForm . $sErrors, '{chat}' => $sChat, '{input}' => $sInput, '{profiles}' => $sProfiles));

И, наш новый класс:

classes/CProfiles.php

<?php

// Profiles class
class CProfiles {

// constructor
function CProfiles() {
}

// profile registration
function registerProfile() {
$sUsername = $GLOBALS['MySQL']->escape($_POST['username']);
$sFirstname = $GLOBALS['MySQL']->escape($_POST['firstname']);
$sLastname = $GLOBALS['MySQL']->escape($_POST['lastname']);
$sEmail = $GLOBALS['MySQL']->escape($_POST['email']);
$sPassword = $GLOBALS['MySQL']->escape($_POST['password']);

if ($sUsername && $sEmail && $sPassword) {
// check if already exist
$aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `email`='{$sEmail}'");
if ($aProfile['id'] > 0) {
$sErrors = '<h2>Another profile with same email already exist</h2>';
} else {
// generate Salt and Cached password
$sSalt = $this->getRandCode();
$sPass = sha1(md5($sPassword) . $sSalt);

// add new member into database
$sSQL = "
INSERT INTO `cs_profiles` SET
`name` = '{$sUsername}',
`first_name` = '{$sFirstname}',
`last_name` = '{$sLastname}',
`email` = '{$sEmail}',
`password` = '{$sPass}',
`salt` = '{$sSalt}',
`status` = 'active',
`role` = '1',
`date_reg` = NOW();
";
$GLOBALS['MySQL']->res($sSQL);

// autologin
$GLOBALS['CLogin']->performLogin($sUsername, $sPassword);
}
}
}

// get random code (for salt)
function getRandCode($iLen = <img src="http://www.script-tutorials.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"> {
$sRes = '';

$sChars = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
for ($i = 0; $i < $iLen; $i++) {
$z = rand(0, strlen($sChars) -1);
$sRes .= $sChars[$z];
}
return $sRes;
}

// get profiles block
function getProfilesBlock($iLim = 16) {
$sSQL = "
SELECT *
FROM `cs_profiles`
WHERE `status` = 'active'
ORDER BY `date_reg` DESC
LIMIT {$iLim}
";
$aProfiles = $GLOBALS['MySQL']->getAll($sSQL);

// create list of messages
$sCode = '';
foreach ($aProfiles as $i => $aProfile) {
$sName = ($aProfile['first_name'] && $aProfile['last_name']) ? $aProfile['first_name'] . ' ' . $aProfile['last_name'] : $aProfile['name'];
$sSName = (strlen($sName) > 32) ? mb_substr($sName, 0, 28) . '...' : $sName;
$iPid = $aProfile['id'];

$sCode .= '<div id="'.$iPid.'" title="'.$sName.'"><a href="profile.php?id='.$iPid.'"><img src="images/member.png" alt="'.$sName.'"><p>'.$sSName.'</p></a></div>';
}

return '<div class="profiles">' . $sCode . '</div>';
}

// get profile info
function getProfileInfo($i) {
$sSQL = "
SELECT *
FROM `cs_profiles`
WHERE `id` = '{$i}'
";
$aInfos = $GLOBALS['MySQL']->getAll($sSQL);
return $aInfos[0];
}

// get role name
function getRoleName($i) {
$sRet = 'Ordinary member';
switch ($i) {
case 4:
$sRet = 'Moderator';
break;
case 5:
$sRet = 'Administrator';
break;
}
return $sRet;
}
}

$GLOBALS['CProfiles'] = new CProfiles();

Здесь вы можете видеть несколько функций: «registerProfile» (для регистрации профайлов), «getRandCode» (который мы будем использовать для получения случайного кода), «getProfilesBlock» (для вывода списка последних профайлов), «getProfileInfo» (для получения информации о профайле) и «getRoleName» для конвертации ролевого ID в обычное текстовое значение).

А теперь, приступаем к новому файлу (который будет отображать информацию о профайле):

profile.php

<?php

// set error reporting level
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('classes/CMySQL.php');
require_once('classes/CLogin.php');
require_once('classes/CProfiles.php');

$iPid = (int)$_GET['id'];
$aInfo = $GLOBALS['CProfiles']->getProfileInfo($iPid);

$sName = $aInfo['name'];
$sFName = $aInfo['first_name'];
$sLName = $aInfo['last_name'];
$sAbout = $aInfo['about'];
$sDate = $aInfo['date_reg'];
$sRole = $GLOBALS['CProfiles']->getRoleName($aInfo['role']);

// draw common page
echo strtr(file_get_contents('templates/profile_page.html'), array('{name}' => $sName, '{fname}' => $sFName, '{lname}' => $sLName, '{about}' => $sAbout, '{datereg}' => $sDate, '{role}' => $sRole));

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Завершение

Надеемся, что наша серия статей о разработке собственного чата полезны и интересны вам. Если вы хотите поделиться собственными идеями по доработке, не стесняйтесь, и пишите нам посредством комментариев или обратной связи. Удачи! Ждем вас!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: ajax, PHP, MySQL, javascript, общение онлайн
Опубликовал Design FactoRy   Прочитано (раз): 4501   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 24 февраля 2012 @ 23:11
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Ммм.... продолжение winked


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031