Friday, 20 November 2015

chat-Application-in-php

04:08

Step 1. HTML
As usual, we start with the HTML.

This main chat window.

index.html   file code :

<frameset rows="65%,35%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF0000">

    <frame src="messages.php" name="main_frame">

    <frame src="main.php" name="login_frame" scrolling="no" noresize target="middle">

</frameset>
This is login form code.

login_form.html  file code :

<link type="text/css" rel="stylesheet" href="styles.css" />



<form class="login_form" method="post" action="main.php">

 <div>Username: <input type="text" name="username" /></div>

 <div>Password: <input type="password" name="password" /></div>

 <div><input type="submit" value="Login" name="Login" /></div>

</form>

<div>You can use username "User1" or "User2" or "User3" and password "qwerty" to login in system</div>
Here are new 3 template files to chat (2 to messages box and 1 to send message form):

chat_begin.html file code:
<link type="text/css" rel="stylesheet" href="styles.css" />



<div class="chat_main">

 <h3>Chat</h3>
chat_end.html file code:


</div>
chat_input.html file code:

<link type="text/css" rel="stylesheet" href="styles.css" />



<form class="submit_form" method="post" action="main.php">

 <div><input type="text" name="s_message" /><input type="submit" value="Say" name="s_say" /></div>

</form>

<div>You can type anything in chat</div>
Step 2. CSS
Here are used CSS styles.

styles.css  file   code:

.login_form {

 border: 1px solid #AAA;

 padding:10px;

}



h3 {margin-top:3px;}



.chat_main {

 border:1px solid #AAA;

 -moz-box-shadow:0 0 10px #ccc;

 -webkit-box-shadow: 0 0 10px #ccc;

 width:350px;

 padding:10px;

 background:#f3f3f3;

}



.message {

 border:1px solid #AAA;

 margin:4px;

 padding:5px;

 -moz-border-radius:7px;

 -webkit-border-radius:7px;

 background:#ffffff;

}



.textf {

-moz-box-shadow:0 0 10px #CCCCCC;

-webkit-box-shadow:0 0 10px #CCCCCC;

border:1px solid #CCCCCC;

height:40px;

}



.submit {

-moz-border-radius:7px;

-webkit-border-radius:7px;

background:#F3F3F3;

border:1px solid #CCCCCC;

font-size:16px;

font-weight:bold;

height:35px;

margin-left:10px;

padding:5px;

}

.message span {

 font-size:10px;

 color:#888;

 margin-left:10px;

}



.submit_form {

 margin:10px 0px;

}

Step 3.  SQL
We will need to execute next SQL in our database.


CREATE TABLE  `s_chat_messages` (

`id` INT(11) NOT NULL AUTO_INCREMENT ,

`user` VARCHAR(255) NOT NULL ,

`message` VARCHAR(255) NOT NULL ,

`when` INT(11) NOT NULL ,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 4. PHP
As you remember – we had ready easy authentication system. I moved it to external library file (inc/login.inc.php). This will useful for us – now code more structured and it comfortable to use in different places of code.

After I created new library to work with chat (inc/chat.inc.php). This class have next functions:

acceptMessages – function accept sent messages and store it in DB table

getMessages – return list of last 15 messages

After I created 2 last files: messages.php and main.php. First file used to draw list of messages. It have autoupdate each 5 second (I thing this is enough to our chat). Second draw login form and input field of chat. Where we due logged able to post text in chat.

Ok, here are all used PHP files:

main.php  file code:

<?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('inc/login.inc.php');

require_once('inc/chat.inc.php');



// initialization of login system and generation code

$oSimpleLoginSystem = new SimpleLoginSystem();



$oSimpleChat = new SimpleChat();



// draw login box

echo $oSimpleLoginSystem->getLoginBox();



// draw chat application

$sChatResult = 'Need login before using';

if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {

 if ($oSimpleLoginSystem->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {

 $sChatResult = $oSimpleChat->acceptMessages();

 }

}

echo $sChatResult;



?>

messages.php file code:

<meta http-equiv="refresh" content="5">

<?php



require_once('inc/chat.inc.php');

$oSimpleChat = new SimpleChat();

echo $oSimpleChat->getMessages();



?>

Inc/chat.inc.php   file code:



<?php

// simple chat class
class SimpleChat {

    // DB variables
    var $sDbName;
    var $sDbUser;
    var $sDbPass;

    // constructor
    function SimpleChat() {
        //mysql_connect("localhost","username","password");
        $this->sDbName = 'amrapali';
        $this->sDbUser = 'root';
        $this->sDbPass = '';
    }

    // adding to DB table posted message
    function acceptMessages() {
        if ($_COOKIE['member_name']) {
            if(isset($_POST['s_say']) && $_POST['s_message']) {
                $sUsername = $_COOKIE['member_name'];

                //the host, name, and password for your mysql
                $vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);

                //select the database
                mysql_select_db($this->sDbName);

                $sMessage = mysql_real_escape_string($_POST['s_message']);
                if ($sMessage != '') {
                    mysql_query("INSERT INTO `s_chat_messages` SET `user`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
                }

                mysql_close($vLink);
            }
        }

        ob_start();
        require_once('chat_input.html');
        $sShoutboxForm = ob_get_clean();

        return $sShoutboxForm;
    }

    function getMessages() {
        $vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);

        //select the database
        mysql_select_db($this->sDbName);

        //returning the last 15 messages
        $vRes = mysql_query("SELECT * FROM `s_chat_messages` ORDER BY `id` ASC LIMIT 15");

        $sMessages = '';

        // collecting list of messages
        if ($vRes) {
            while($aMessages = mysql_fetch_array($vRes)) {
                $sWhen = date("H:i:s", $aMessages['when']);
                $sMessages .= '<div class="message">' . $aMessages['user'] . ': ' . $aMessages['message'] . '<span>(' . $sWhen . ')</span></div>';
            }
        } else {
            $sMessages = 'DB error, create SQL table before';
        }

        mysql_close($vLink);

        ob_start();
        require_once('chat_begin.html');
        echo $sMessages;
        require_once('chat_end.html');
        return ob_get_clean();
    }
}

?>
Inc/login.inc.php  chat code:


<?php

// class SimpleLoginSystem
class SimpleLoginSystem {

    // variables
    var $aExistedMembers; // Existed members array

    // constructor
    function SimpleLoginSystem() {
        $this->aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
            'User3' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
                                               
        );
    }

    function getLoginBox() {
        ob_start();
        require_once('login_form.html');
        $sLoginForm = ob_get_clean();

        $sLogoutForm = '<a href="'.$_SERVER['PHP_SELF'].'?logout=1">logout</a>';

        if ((int)$_REQUEST['logout'] == 1) {
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
                $this->simple_logout();
        }

        if ($_REQUEST['username'] && $_REQUEST['password']) {
            if ($this->check_login($_REQUEST['username'], MD5($_REQUEST['password']))) {
                $this->simple_login($_REQUEST['username'], $_REQUEST['password']);
                return 'Hello ' . $_REQUEST['username'] . '! ' . $sLogoutForm;
            } else {
                return 'Username or Password is incorrect' . $sLoginForm;
            }
        } else {
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
                    return 'Hello ' . $_COOKIE['member_name'] . '! ' . $sLogoutForm;
                }
            }
            return $sLoginForm;
        }
    }

    function simple_login($sName, $sPass) {
        $this->simple_logout();

        $sMd5Password = MD5($sPass);

        $iCookieTime = time() + 24*60*60*30;
        setcookie("member_name", $sName, $iCookieTime, '/');
        $_COOKIE['member_name'] = $sName;
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
        $_COOKIE['member_pass'] = $sMd5Password;
    }

    function simple_logout() {
        setcookie('member_name', '', time() - 96 * 3600, '/');
        setcookie('member_pass', '', time() - 96 * 3600, '/');

        unset($_COOKIE['member_name']);
        unset($_COOKIE['member_pass']);
    }

    function check_login($sName, $sPass) {
        return ($this->aExistedMembers[$sName] == $sPass);
    }
}


?>

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

PHP Training Mumbai, PHP MySQL Training Mumbai, PHP Course Mumbai, PHP Institute Mumbai

 

© 2013 PHP TRAINING IN MUMBAI BY OM SIR . All rights resevered. Designed by OM SIR

Back To Top