16 марта 2012, 12:30 Раздел: Чаты Комментариев: 2

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

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

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

Посмотреть демо | Скачать архивом

Внимание! У вас нет прав для просмотра скрытого текста.

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

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

Этап 1 – SQL

В таблицу profiles мы добавили новое поле, в котором мы будем хранить пользовательский цвет фона. Итак, пожалуйста, выполните следующий SQL-запрос:

ALTER TABLE `cs_profiles` ADD `color` varchar(6) NOT NULL AFTER `date_reg`;

Этап 2 – HTML

Мы слегка обновили шаблон нашей основной страницы. Как видно, мы добавили сюда новый ключ {avatar}:

templates/main_page.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Powerful Chat System - Lesson 5</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 5</h2>
        <a href="http://www.script-tutorials.com/powerful-chat-system-lesson-5/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
    </header>
    <div class="container">
        {form}
        {avatar}
    </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>

Далее изменения коснулись шаблона страницы просмотра профайлов:

templates/profile_page.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Powerful Chat System - Lesson 5</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/customizer.js"></script>
    <style>
        .container {
            &#123;custom_styles}
        }
    </style>
</head>
<body>
    <header>
        <h2>Powerful Chat System - Lesson 5</h2>
        <a href="http://www.script-tutorials.com/powerful-chat-system-lesson-5/" 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>
            <h3>Avatar: <img src="{avatar}" style="vertical-align:middle" /></h3>
        </div>
        <div class="column">
            <p><a href="index.php">Back to chat</a></p>
        </div>
    </div>
    <div class="container">
        <h2>You can customize your profile page</h2>
        <div class="column">
            <canvas id="color_canvas" width="370" height="60"></canvas>
        </div>
        <div class="column">
            <div class="customizer_buttons">
                <div id="preview"></div>
            </div>

            <form action="profile.php" method="GET" target="change_color_result">
                <input type="hidden" value="{id}" name="id">
                <input type="hidden" value="color" name="color" id="color">
                <input type="hidden" value="change_color" name="action">
                <input id="submit" type="submit" name="submit" value="Apply">
            </form>
            <iframe class="avatar_iframe" name="change_color_result">

        </div>
    </div>
</body>
</html>

Теперь здесь у нас можно видеть несколько новых элементов: изображение аватара и возможность оформить внешний вид страницы (изменить цвет фона). Давайте рассмотрим следующий подготовленный шаблон:

templates/avatar.html

<div class="clear"></div>
<hr />
<h2>My avatar</h2>
<div class="column">
    <div class="profiles">
        <div title="{name}">
            <a href="profile.php?id={id}">
                <img alt="{name}" src="{image}" />
                <p>{name}</p>
            </a>
        </div>
    </div>
</div>
<div class="column">
    <form id="wrapper" target="upload_result" method="POST" action="index.php" enctype="multipart/form-data">
        <input id="avatar" type="file" name="avatar">
        <input type="hidden" name="action" value="add_avatar">
        <input id="submit" type="submit" value="Upload" name="submit">
    </form>
    <iframe name="upload_result" class="avatar_iframe">
    </iframe>
</div>

Данный шаблон мы будем использовать на нашей главной странице (только для авторизованных пользователей) для загрузки изображения аватара.

Этап 3 – CSS

Также изменения коснулись следующего файла:

css/main.css

/* page layout */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

/* main styles */
a {
    color: #fff;
    outline: none;
    text-decoration: none;
}
a:hover,a:active {
    outline: 0;
    text-decoration: none;
}
.container {
    background-color: #222;
    color: #bbb;
    margin: 20px auto;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 800px;
}
.container h2 {
    color: #fff;
    margin-bottom: 10px;
}
.column {
    float: left;
    width: 48%;
}
.column:first-child {
    margin-right: 4%;
}
.column > * {
    color: #ddd;
    margin-bottom: 10px;
}
.clear {
    clear: both;
    font-size: 1px;
}

/* tabs section */
.tabs_container {
    margin: 0;
}
.tabs {
    overflow: hidden;
}
.tabs li {
    float: left;
    list-style: none;
}
.tabs li h3:first-child {
    margin-left: 10px
}
.tabs li h3 {
    border: 1px solid #ddd;
    border-bottom-width: 0;
    display: block;
    margin: 0 2px 0 0;
    padding: 6px 10px 4px
}
.tabs li.active h3 {
    background-color: #555;
    border: 1px solid #ddd;
    border-bottom-width: 0;

    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
.tabs li h3:hover {
    background-color: #666;
    cursor: pointer;
}
.tabs li.active h3:hover {
    background-color: #555;
    cursor: normal;
}
.nav_container form {
    background-color: #555;
    display: block;
    padding: 15px;
}
.column h3 {
    color: #fff;
}
.login_form input,.login_form label,
.join_form input,.join_form label {
    display: block;
    margin-bottom: 10px;
}
input[type=text], input[type=password], input[type=submit] {
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
input[type=text], input[type=password] {
    font-size: 16px;
    height: 25px;
    margin-right: 10px;
    width: 200px;
}
input[type=submit],
input[type=file]{
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    height: 35px;
    padding: 5px;
}
.avatar_iframe {
    border: 2px dashed #FFFFFF;
    margin-top: 25px;
    width: 330px;
}

/* chat block */
.chat_messages {
    border: 1px solid #888;
    box-shadow: 0 0 5px #AAA;
    color: #000;
    padding: 10px;
}
.chat_messages a {
    color: #000;
}
.chat_messages a img {
    margin-right: 10px;
    vertical-align: middle;
    width: 22px;
}
.chat_messages h2 {
    color: #fff;
}
.chat_messages .message {
    background-color: #fff;
    margin: 5px;
    padding: 5px;

    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.chat_messages .message span {
    color: #444;
    font-size: 10px;
    margin-left: 10px;
}
.chat_submit_form {
    margin: 10px 0px;
}
.chat_submit_form div {
    float: left;
    width: 49%;
}
.chat_submit_form .error, .chat_submit_form .success, .chat_submit_form .protect {
    display: none;
}
.chat_submit_form .error {
    color: #f55;
}
.chat_submit_form .success {
    color: #5f5;
}
.chat_submit_form .protect {
    color: #55f;
}

/* 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;
}

/* customize profile page */
.customizer_buttons #preview, .customizer_buttons #pick {
    border: 1px solid #888;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 2px 3px 3px #888;
    height: 40px;
    margin-bottom: 10px;
    width: 80px;
}

Этап 4 - PHP

Теперь давайте рассмотрим исходные PHP-файлы. Наш index.php также был изменен. Сюда мы добавили функционал обработки аватаров:

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;
    }

    // add avatar
    if ($_POST['action'] == 'add_avatar') {
        $iAvRes = $GLOBALS['CProfiles']->addAvatar();
        header('Content-Type: text/html; charset=utf-8');
        echo ($iAvRes == 1) ? '<h1 style="color:#fff;text-align:center">New avatar has been accepted, refresh main window to see it</h1>' : '';
        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();

// get profile avatar
$sAvatar = $GLOBALS['CProfiles']->getProfileAvatarBlock();

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

Далее мы обновили файл просмотра профайла (сюда мы внесли код и для аватара и для оформления фона):

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'];

if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active' && $_SESSION['member_role']) {
    if ($_GET['action'] == 'change_color') {
        $iRes = $GLOBALS['CProfiles']->changeColor($_GET['color']);
        header('Content-Type: text/html; charset=utf-8');
        echo ($iRes == 1) ? '<h1 style="color:#fff;text-align:center">New color has been accepted, refresh main window to see it</h1>' : '';
        exit;
    }
}

$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']);
$sAvatar = $GLOBALS['CProfiles']->getProfileAvatar($iPid);
$sCustomBG = ($aInfo['color']) ? 'background-color:#'.$aInfo['color'] : '';

// draw common page
$aKeys = array(
    '{id}' => $iPid,
    '{name}' => $sName,
    '{fname}' => $sFName,
    '{lname}' => $sLName,
    '{about}' => $sAbout,
    '{datereg}' => $sDate,
    '{role}' => $sRole,
    '{avatar}' => $sAvatar,
    '&#123;custom_styles}' => $sCustomBG
);
echo strtr(file_get_contents('templates/profile_page.html'), $aKeys);

classes/CChat.php

В этом файле мы также кое-что поменяли таким образом, чтобы отображать текущее изображение аватара. Давайте рассмотрим изменения:

$sWhen = date("H:i:s", $aMessage['when']);
$sMessages .= '<div class="message" id="message_'.$aMessage['id'].'" '.$sExStyles.'><b><a href="profile.php?id='.$aMessage['pid'].'" target="_blank">' . $aMessage['name'] . ':</a></b> ' . $aMessage['message'] . '<span>(' . $sWhen . ')</span></div>' . $sExJS;

(на строках 56-57) до кода:

$sWhen = date("H:i:s", $aMessage['when']);
$sAvatar = $GLOBALS['CProfiles']->getProfileAvatar($aMessage['pid']);
$sMessages .= '<div class="message" id="message_'.$aMessage['id'].'" '.$sExStyles.'><b><a href="profile.php?id='.$aMessage['pid'].'" target="_blank"><img src="'. $sAvatar .'">' . $aMessage['name'] . ':</a></b> ' . $aMessage['message'] . '<span>(' . $sWhen . ')</span></div>' . $sExJS;

Далее мы изменили файл класса профайла:

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'];
            $sAvatar = $this->getProfileAvatar($iPid);

            $sCode .= '<div id="'.$iPid.'" title="'.$sName.'"><a href="profile.php?id='.$iPid.'"><img src="'.$sAvatar.'" 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;
    }

    // get profile avatar block
    function getProfileAvatarBlock() {
        if ($_SESSION['member_id']) {
            $aInfo = $this->getProfileInfo((int)$_SESSION['member_id']);
            if (is_array($aInfo) && count($aInfo)) {
                $sName = ($aInfo['first_name'] && $aInfo['last_name']) ? $aInfo['first_name'] . ' ' . $aInfo['last_name'] : $aInfo['name'];

                $aKeys = array(
                    '{id}' => $aInfo['id'],
                    '{image}' => $this->getProfileAvatar($aInfo['id']),
                    '{name}' => $sName
                );
                return strtr(file_get_contents('templates/avatar.html'), $aKeys);
            }
        }
    }

    function getProfileAvatar($i) {
        $sPath = 'data/' . $i . '.jpg';
        return (file_exists($sPath)) ? $sPath : 'images/member.png';
    }

    // add avatar (upload image)
    function addAvatar() {
        $iPid = (int)$_SESSION['member_id'];
        if ($iPid) {
            $sFileTmpName = $_FILES['avatar']['tmp_name'];
            $sDstFilename = 'data/' . $iPid . '.jpg';

            if (file_exists($sFileTmpName) && filesize($sFileTmpName) > 0) {
                $aSize = getimagesize($sFileTmpName);
                if (! $aSize) {
                    @unlink($sFileTmpName);
                    return;
                }

                $bGDInstalled = extension_loaded('gd');

                // resize if GD is installed
                if (! $bGDInstalled)
                    return;

                $iWidth = $iHeight = 48; // width and height for avatar image
                define('IMAGE_TYPE_GIF', 1);
                define('IMAGE_TYPE_JPG', 2);
                define('IMAGE_TYPE_PNG', 3);

                $gdInfoArray = gd_info();
                switch($aSize[2]) {
                    case IMAGE_TYPE_GIF:
                        if (! $gdInfoArray['GIF Read Support'] || ! $gdInfoArray['GIF Create Support'])
                            return;
                        $vSrcImage = @imagecreatefromgif($sFileTmpName);
                        break;
                    case IMAGE_TYPE_JPG:
                        if (! $gdInfoArray['JPEG Support'])
                            return;
                        $vSrcImage = @imagecreatefromjpeg($sFileTmpName);
                        break;
                    case IMAGE_TYPE_PNG:
                        if (! $gdInfoArray['PNG Support'])
                            return;
                        $vSrcImage = @imagecreatefrompng($sFileTmpName);
                        break;
                    default:
                        return;
                }
                if (! $vSrcImage)
                    return;

                // calculate destination rate and sizes
                $fSrcRate = (float)($aSize[0] / $aSize[1]);
                $fDstRate = (float)($iWidth / $iHeight);
                $fResizeRate = ($fSrcRate > $fDstRate) ? (float)($iWidth / $aSize[0]) : (float)($iHeight / $aSize[1]);
                $iDstWidth = (int)($fResizeRate * $aSize[0]);
                $iDstHeight = (int)($fResizeRate * $aSize[1]);

                if (function_exists('imagecreatetruecolor') && $aSize[2] != IMAGE_TYPE_GIF) {
                    // resize if need (if size is larger than needed)
                    if ($aSize[0] > $iWidth || $aSize[1] > $iHeight) {
                        $vDstImage = imagecreatetruecolor($iDstWidth, $iDstHeight);
                        $vConvRes = imagecopyresampled($vDstImage, $vSrcImage, 0, 0, 0, 0, $iDstWidth, $iDstHeight, $aSize[0], $aSize[1]);
                    } else {
                        $vDstImage = $vSrcImage;
                        $vConvRes = true;
                    }
                } else { // for old GD versions and for GIF images
                    if ($aSize[0] > $iWidth || $aSize[1] > $iHeight) {
                        $vDstImage = imagecreate( $iDstWidth, $iDstHeight );
                        $vConvRes = imagecopyresized($vDstImage, $vSrcImage, 0, 0, 0, 0, $iDstWidth, $iDstHeight, $aSize[0], $aSize[1]);
                    } else {
                        $vDstImage = $vSrcImage;
                        $vConvRes = true;
                    }
                }

                if (! $vConvRes)
                    return;

                $bRes = imagejpeg($vDstImage, $sDstFilename);

                // memory cleanup
                if ($vDstImage != $vSrcImage) {
                    imagedestroy($vSrcImage);
                    imagedestroy($vDstImage);
                } else {
                    imagedestroy($vSrcImage);
                }
                return ($bRes && file_exists($sDstFilename)) ? 1 : '';
            }
        }
    }

    function changeColor($sColor = '') {
        $iPid = (int)$_SESSION['member_id'];
        $sColor = $GLOBALS['MySQL']->escape($sColor);
        if ($iPid && $sColor) {
            if (strlen($sColor) == 4) {
                $sColor = '00' . $sColor;
            }
            $sSQL = "
                UPDATE `cs_profiles` SET
                `color` = '{$sColor}'
                WHERE `id` = '{$iPid}'
            ";
            $GLOBALS['MySQL']->res($sSQL);
            return 1;
        }
        return;
    }
}

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

Мы изменили функцию 'getProfilesBlock' (для отображения аватаров пользователей), а затем подготовили несколько новых функций: 'getProfileAvatarBlock' (для отображения блока для загрузки нового изображения аватара), 'getProfileAvatar' (данная функция будет возвращать путь до файла изображения), 'addAvatar' (данная функция сделана для реализации возможности масштабировать загруженный аватар посредством библиотеки GD), а также 'changeColor' (для сохранения нового пользовательского цвета фона в базе данных). Также учтите, что порой вместо:

if (! $gdInfoArray['JPEG Support'])

Нам следует использовать:

if (! $gdInfoArray['JPG Support'])

Этап 5 – javascript

js/customizer.js

Это и есть наш новый файл (наш новый функционал для выбора цвета) для нашего проекта:

var canvasColor;
var ctxColor;
var bMouseDown = false;

$(function(){

    // create canvas and context objects
    canvasColor = document.getElementById('color_canvas');
    ctxColor = canvasColor.getContext('2d');

    drawGradients(ctxColor);

    $('#color_canvas').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);

        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;

        var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
        $('#preview').css('backgroundColor', pixelColor);
    });

    $('#color_canvas').click(function(e) { // mouse click handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);

        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;

        var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
        $('.container').css('backgroundColor', pixelColor);

        var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
        $('#color').val(dColor.toString(16));
    }); 

    $('#panel').mousedown(function(e) { // mouse down handler
        bMouseDown = true;
    });
    $('#panel').mouseup(function(e) { // mouse up handler
        bMouseDown = false;
    });
});

function drawGradients() {
    var grad = ctxColor.createLinearGradient(20, 0, canvasColor.width - 20, 0);
    grad.addColorStop(0, 'red');
    grad.addColorStop(1 / 6, 'orange');
    grad.addColorStop(2 / 6, 'yellow');
    grad.addColorStop(3 / 6, 'green')
    grad.addColorStop(4 / 6, 'aqua');
    grad.addColorStop(5 / 6, 'blue');
    grad.addColorStop(1, 'purple');
    ctxColor.fillStyle=grad;
    ctxColor.fillRect(0, 0, canvasColor.width, canvasColor.height);
}

Завершение

Надеемся, что вы следите за нашей серией статей о создании чата, и также надеемся, что вам интересно.

Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.

Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: PHP, MySQL, javascript, общение онлайн

Опубликовал Design FactoRy Прочитано (раз): 8294 | Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать

Комментарий #1: 30 марта 2012 @ 17:11

Написал: Denito — группа: Гости

На сайте с: -- | Публикаций: 0 | Комментариев: 0

ICQ: --- не указано ---

Я сделал все как сказано в этой статье. Залил на phpMyAdmin sql документ, внутри поменял localhost и db name и прочее, все вроде бы славно. Но когда я ввожу данные в поля для регистрации, после клика на саму кнопку регистрации, тупо выкидывает на index.php, а данные не отправляются в таблицу в phpMyAdmin.

В чем проблема? sad