赵强大数据vip课_强大的聊天系统–第5课

最新推荐文章于 2024-04-25 12:26:33 发布
最新推荐文章于 2024-04-25 12:26:33 发布
阅读量289 收藏
点赞数
文章标签： html php python java css
原文链接：https://www.script-tutorials.com/powerful-chat-system-lesson-5/
版权

赵强大数据vip课

Powerful Chat System
Powerful Chat System

Powerful Chat System – Lesson 5 Today we continue a series of articles on the creation of powerful chat system. Our fifth lesson will contain next elements: avatars (which will be reduced with GD library) and some customization (custom background for profile pages). As for color picker, I have decided to use modified version of our Paint Program.

强大的聊天系统–第5课今天，我们继续撰写有关创建强大的聊天系统的系列文章。 我们的第五课将包含下一个元素：化身(将在GD库中减少)和一些自定义(个人资料页面的自定义背景)。 至于拾色器，我决定使用我们的Paint Program的修改版本。

Today I will publish updated sources of our growing project (I have created new folder, several files was modified, several – new, plus I have expanded structure of our database). All project is well structured: system classes is in ‘classes’ folder, all javascript files in ‘js’ folder, stylesheets in ‘css’ folder, images in ‘images’ folder, template files in ‘templates’ folder, and – new folder ‘data’ for avatar images (don’t forget to set proper permission to this folder.

今天，我将发布我们不断发展的项目的更新资源(我创建了新文件夹，修改了几个文件，新建了几个，再加上扩展了数据库的结构)。 所有项目的结构都很好：系统类位于“类”文件夹中，所有javascript文件位于“ js”文件夹中，样式表位于“ css”文件夹中，图像位于“图像”文件夹中，模板文件位于“模板”文件夹中，以及–新文件夹头像图片的“数据”(不要忘记为此文件夹设置适当的权限。

现场演示
打包下载

Now – download the source files and lets start coding !

现在–下载源文件并开始编码！

步骤1. SQL (Step 1. SQL)

I have added new field into table of profiles where we will store its custom color for background. So, please execute next SQL:

我在配置文件表中添加了新字段，我们将在其中存储其自定义颜色作为背景。 因此，请执行下一个SQL： 


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


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

步骤2. HTML (Step 2. HTML)

I have updated template of our main page. As you can see – I have added new {avatar} key here:

我已经更新了我们主页的模板。 如您所见–我在这里添加了新的{avatar}键：

templates / main_page.html (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="https://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>


<!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="https://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>

Next affected file is profile view template:

下一个受影响的文件是配置文件视图模板：

templates / profile_page.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 {
            {custom_styles}
        }
    </style>
</head>
<body>
    <header>
        <h2>Powerful Chat System - Lesson 5</h2>
        <a href="https://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>


<!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 {
            {custom_styles}
        }
    </style>
</head>
<body>
    <header>
        <h2>Powerful Chat System - Lesson 5</h2>
        <a href="https://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>

It contain several new things: avatar image and possibility to customize appearance (background color). The next prepared template file:

它包含了几项新内容：头像图像和自定义外观(背景颜色)的可能性。 下一个准备好的模板文件：

templates / avatar.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>


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

This template we will use at our index page (only for logged members) to upload an image as our avatar.

我们将在索引页面上使用此模板(仅适用于登录成员)，以将图像上传为头像。

步骤3. CSS (Step 3. CSS)

This file has been updated:

此文件已更新：

css / main.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;
}


/* 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 (Step 4. PHP)

Now, lets review php sources. Our index.php file has been updated. I have added here avatar processing functional:

现在，让我们回顾一下php源代码。 我们的index.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);


<?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);

Our next updated file is profile view file (where I have added code and for avatar and for background customization):

我们的下一个更新文件是配置文件视图文件(我在其中添加了代码，用于化身和用于后台自定义)：

profile.php (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,
    '{custom_styles}' => $sCustomBG
);
echo strtr(file_get_contents('templates/profile_page.html'), $aKeys);


<?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,
    '{custom_styles}' => $sCustomBG
);
echo strtr(file_get_contents('templates/profile_page.html'), $aKeys);
classes / CChat.php (classes/CChat.php)

I have made a little change in this file to display actual profile avatar. I have changed:

我对该文件做了一些更改，以显示实际的个人资料头像。 我变了： 


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


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

(at lines 56-57) to next code:

(在第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;


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

The next file that I have updated is our profile class:

我更新的下一个文件是我们的配置文件类：

classes / CProfiles.php (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 = 8) {
        $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();


<?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 = 8) {
        $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();

I have modified ‘getProfilesBlock’ function (to display avatars of members), and then, have prepared next new functions: ‘getProfileAvatarBlock’ (to display block where we can assign new avatar image) , ‘getProfileAvatar’ (this function will return us avatar image path), ‘addAvatar’ (this function is made to accept and resize (with using GD library) uploaded avatar image) and ‘changeColor’ (to save new custom profile background color into DB). Also, please pay attention, that sometimes instead:

我修改了“ getProfilesBlock”功能(以显示成员的头像)，然后准备了下一个新功能：“ getProfileAvatarBlock”(以显示可以分配新头像图像的块)，“ getProfileAvatar”(此函数将返回我们的头像)图像路径)，“ addAvatar”(此功能用于接受和调整大小(使用GD库)上传的头像图像)和“ changeColor”(将新的自定义配置文件背景色保存到DB中)。 另外，请注意，有时反而： 


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


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

we have to use:

我们必须使用： 


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


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

步骤5. Javascript (Step 5. Javascript)

js / customizer.js (js/customizer.js)

This is new file (our new color picker) for our project:

这是我们项目的新文件(我们的新颜色选择器)： 


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


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);
}
现场演示
存档下载

结论 (Conclusion)

I hope that our new series of articles of chat system creation is useful and interesting for you. If you want to share your ideas, or you noticed any weakness – don’t hesitate to contact us. Good luck and welcome back!

我希望我们有关聊天系统创建的新系列文章对您有用和有趣。 如果您想分享自己的想法，或者发现任何弱点，请随时与我们联系。 祝你好运，欢迎回来！

翻译自: https://www.script-tutorials.com/powerful-chat-system-lesson-5/

赵强大数据vip课

cuketao5066
关注
oneapi：强大而易用的OpenAI接口管理和分发系统 大模型 通用接口 ollama
南七小僧的学海无涯
04-29 542
使用One-api代理我所有的各类接口渠道，包括gpt-3.5-trubo、gpt-4等openAI官方模型，azure提供的模型，集成联网知识库等功能的gpt4模型，以及国内模型的一些模型。同时支持openai图像生成接口。
计算机考研考博经典考题汇总(一次刷新世界观-我相信VIP总是有原因的）
weixin_44077556的博客
07-17 4万+
操作系统 操作系统的特点？ – 共享：资源可被多个并发执行的进程使用 – 并发：可以在同一时间间隔处理多个进程，需要硬件支持 – 虚拟：将物理实体映射成为多个虚拟设备 – 异步：进程执行走走停停，每次进程执行速度可能不同，但OS需保证进程每次执行结果相同 进程的三个组成部分？ 程序段、数据段、PCB(Process Control Block) 并发与并行区别？ 并发：同一间隔 并行：同一时刻 进程切换的过程？ 保持处理机上下文 -> 更新PCB -> 把PCB移入相应队列(就绪、阻塞) -&g
爬取微信朋友圈信息-可视化
weixin_39490983的博客
03-20 6955
之前自学了pyecharts就想练一下手，画一下基本的柱状图和地图；用wordcloud 尝试生成词云；爬取微信信息的代码是在网上找的；后面的代码就是基本的信息整理
special gift watches
Radorplica的专栏
04-09 1151
My best friend Willi lost his just 2 weeks ago.2 years as Texi drive  make him tire.Maybe its time to have a rest.He always says he will not drive for others,he want be a big boss.But that is not pos
PHP合成生成GIF动图
羽筠的博客
10-10 1289
主要是针对纯前端生成GIF图片质量问题做的调研；前端把CANVAS处理的每帧图片转成base64图片传至后台，后台生成最终GIF图片返回给前台展示； 环境需要： PHP Imagick 示例： 实现： php针对项目目录下图片集处理： php处理 base64格式 图片集处理：
MySQL简单操作(内置Gif动图)
qq_41142870的博客
09-22 1624
什么是MySQL MySQL结构分为库、表、字段 简单打个比方 库 == 文件夹 表 == Excel文件 字段 == 列名称 字段其实就是对某列数据的概括，比如上面的id、name、age、school、sex就是字段，其实字段还有一些约束(分类)， 比如id是存序号的，那么id就是整型；name是存字符串的，那么name就是字符型； 数据库名字、表名字、字段名字可以随意改 由此我们...
信息安全工程师第二版考试总结+笔记
IT技术
11-29 2万+
信息安全工程师第二版考试总结+笔记
Python爬取WebSocket数据 - 初尝试
Enderman_xiaohei的博客
05-03 5213
参考链接： WebSocket 通信原理【底层】：原来你是这样的Websocket–抓包分析 Python 爬取 WebSocket【顶层】：Python如何爬取实时变化的WebSocket数据的方法 注意：可以直接参考上述链接，解释地很详细。 WebSocket 爬虫 目录 1. WebSocket 介绍 2. 分析 3. 编写爬序 4. 其它 5. 总结 一、WebSocket 介绍 ↶...
运维工程师，总结40个面试题
最新发布
张晨光老师的播客
04-25 1131
下面是一名运维人员求职数十家公司总结的Linux运维面试题，给大家参考下~1、什么是运维？什么是游戏运维？1）运维是指大型组织已经建立好的网络软硬件的维护，就是要保证业务的上线与运作的正常，在他运转的过程中，对他进行维护，他集合了网络、系统、数据库、开发、安全、监控于一身的技术运维又包括很多种，有DBA运维、网站运维、虚拟化运维、监控运维、游戏运维等等2）游戏运维又有分工，分为开发运维、应用运维（业务运维）和系统运维开发运维：是给应用运维开发运维工具和运维平台的。
91sp.vido.ws index.php_index
热门推荐
weixin_42514750的博客
12-30 12万+
Departamentde Filologia Anglesa i Alemanya=o:p>Universitatde =València___________________________________________=__José Santaemilia RuizAssociate Professor of English Language and Linguistics.<...
https://github.com/qiangqiang666/demo
sl_934910684的博客
05-24 2万+
demo/src/main/java/com/monkey/springboot/demo/annotation/AesSecurityParameter.java package com.monkey.springboot.demo.annotation; import org.springframework.web.bind.annotation.Mapping; import java....
赵强老师：大数据从入门到精通（3）搭建Hadoop环境
04-07
本系列课程将基于RedHat Linux 7.4版本、Hadoop 2.7.3、Spark 2 版本全面介绍大数据的整体内容，让学员深入理解并掌握运行机制和原理，从而进一步掌握大数据的相关内容。
css补充
qq_35187942的博客
02-22 9万+
热区 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;base target="_bla
做QQ群霸屏的，我们盯上你了
腾讯技术工程
06-26 1442
今天他二哥给大家介绍一下QQ 群的黑产风云，打击黑产，腾讯一直在路上。腾讯技术工程官号腾讯前沿技术 | 产品 | 行业信息交流发布平台  ...
Maven2 profiles
Focus on JAVA
01-03 201
可以把profiles定义在： A、%M2_HOME%/conf/settings.xml，这是针对该部电脑的所有user的profiles，是global profiles，它会影响所有的maven project build B、user/.m2/settings.xml，这是针对当前user的profiles，是user级的profiles，它会影响当前user的所有ma...
if(version_compare
qq_485114707的博客
08-04 226
// 检测PHP环境 if(version_compare(PHP_VERSION,'5.3.0','&lt;')) die('require PHP &gt; 5.3.0 !'); //小于5.3不运行的，说明thinkphp3.2.2有部分功能是基于5.3版本以上运行的。 ------------------------------其他设置------------------------...
绕过open_basedir读文件脚本
weixin_34375233的博客
05-03 365
绕过open_basedir读文件脚本2016年11月13日 01:28:21阅读数：1221参加了一场2016年的sycsec感觉又学到不少东西废话不多说，首先啥是open_basedir？open_basedir: 将用户可操作的文件限制在某目录下具体的设置方法可以参考：http://blog.csdn.net/white__cat/arti...
数据库系统概论第五版：数据与DBMS详解及优势
总结来说，数据库系统概论第五版强调了数据和数据库的基本概念，以及它们在信息系统中的作用。学习者通过理解这些概念和掌握数据库系统的构成及其优势，可以更好地利用数据库技术来管理和分析数据，提高工作效率和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值