Online Chatting System

Project Report On

Online Chatting System

Submitted By

Daud Sayyed

Vishal Ugale

Moin Mulla

Akshay Wade

Under the guidance of

Shiburaj Pappu

Submitted as a partial fulfilment of

Bachelor of Engineering
B.E. (Semester VIII), Computer [2013 - 2014]

from

Rizvi College of Engineering

New Rizvi Educational Complex, Off-Carter Road,

Bandra(w), Mumbai - 400050

Affiliated to

University of Mumbai
Online Chatting System

ABSTRACT

This project is developed to make an online chatting system. This system name is AppyChat.
This System may address point-to-point communications as well as multicast group message
communications from one sender to many receivers.X

Our system allow the group of peoples to message (or chat) with each other which is great idea
to have fun with friends when they are not closer

Keywords : Online chat

Online Chatting System

Contents

Introduction …………………………………………………………………………………1

Objectives……………………………………………………………………………………1

Technologies Used..............…………………………………………………………………2

Coding Section with snapshot.........…………………………………………………………3

Conclusion…………………………………………………………………………………..11

References

Project Hosting
Online Chatting System

1. Introduction

Online chat may refer to any kind of communication over the Internet that offers a real- time
transmission of text messages from sender to receiver. Chat messages are generally short in
order to enable other participants to respond quickly.X

Thereby, a feeling similar to a spoken conversation is created, which distinguishes chatting from
other text-based online communication forms such as Internet forums and email.X

Online chat may address point-to-point communications as well as multicast communications from
one sender to many receivers and voice and video chat, or may be a feature of a web conferencing
service. Online chat in a less stringent definition may be primarily any direct text-based or video-
based (webcams), one-on-one chat or one-to-many group chat (formally also known as
synchronous conferencing), using tools such as instant messengers, HYPERLINK
"http://en.wikipedia.org/wiki/Internet_Relay_Chat" Internet Relay Chat (IRC), talkers and possibly
MUDs.X

On the Internet, chatting is talking to other people who are using the Internet at the same time
you are. Usually, this "talking" is the exchange of typed-in messages requiring one site as the
repository for the messages (or "chat site") and a group of users who take part from anywhere
on the Internet. In some cases, a private chat can be arranged between two parties who meet
initially in a group chat. Chats can be ongoing or scheduled for a particular time and duration.
Most chats are focused on a particular topic of interest and some involve guest experts or
famous people who "talk" to anyone joining the chat. (Transcripts of a chat can be archived for
later reference.)

Chats are conducted on online services (especially America Online), by bulletin board services, and
by Web sites. Several Web sites, notably Talk City, exist solely for the purpose of conducting chats .A
chat can also be conducted using sound or sound and video, assuming you have the bandwidth
access and the appropriate programming.
2. Objectives
The main objective of this project is to allow each and every person can get connect with each
other. Some of the other objectives are listed below:-

Providing a social platform to users.

To allow each person to share their thoughts & views.

This System can be used as discussion board.

Connecting people together.

Online Chatting System

3. Technologies Used

Languages Used-
For Developing this project, following web technologies are used:-

HTML-Developing application structure.

CSS3-For designing the application Structure.

PHP-For creating connection with database & executing query.

MySql-Storing messages & username in database.
Ajax-Sending & requesting server within a time interval continuously.

Software Used-
Software’s used for implementing web application on server are listed below:-

Xampp control panel-Starting the services for implementation.

Apache-Creating a dummy server on web browser.
Mysql-Storing the values from the web application.

Coding Section

Login Page-
This page is made with help of Html & css3.In this page, User verification is done. If the user is
a verified one it take user to index.php otherwise redirect to login.php only. Code which is used
to make this page is given below:-

<?php

include_once('config.php');

// Check, if username session is NOT set then this page will jump to login page if
(isset($_SESSION['username'])) {

header('Location: index.php');

?>

<!DOCTYPE html> <html lang="en">

<head>

<meta charset="utf-8">

<link href="bootstrap.css" rel="stylesheet"> <title>Simple Chat</title>

</head>
Online Chatting System

<body>

<div class="container" style="width:20%;margin-top:100px;"> <form name="login"

method="post" action="logproc.php"> <fieldset>

<legend><img src="icon.png" style="margin-top:-10px;"/>&nbsp;<i>Appy

Chat</i>&nbsp;</legend>

<div class="row">

<input type="text" name="username" class="form-control" placeholder="User

Name"></div><br/>

<div class="row">

<input type="password" name="password" class="form-control"

placeholder="Password"></div>

<br/>

<div class="row">

<input type="submit" class="btn btn-success col-md-6" value="Login"> <a

href="reg.php" class="btn btn-info col-md-4 pull-right">Register</a> </div>

</fieldset>

</form>

</div>

</body>
</html>

Authentication Verification (logproc.php):-

<?php

include_once('config.php');

$link = mysql_connect(DB_HOST,DB_USER,DB_PASS);

mysql_select_db(DB_DATABASE) or die( "Unable to select database");

// Retrieve username and password from database according to user's input

$login = mysql_query("SELECT * FROM register WHERE (username ='"

.($_POST['username']) . "') and (password = '" .($_POST['password']) . "')");

// Check username and password match

if (mysql_num_rows($login) == 1) {

$_SESSION['username'] = $_POST['username'];

// Jump to secured page

header('Location: index.php');

else {

header('Location: login.php');
}

mysql_close($link);

?>
Online Chatting System

Output-Login.php

II. Register Page:-

This page is similarly made like login page only but it insert new user in database & redirect to
login.php.

<!DOCTYPE html> <html lang="en">

<head>

<meta charset="utf-8">

<link href="bootstrap.css" rel="stylesheet"> <title>Simple Chat</title>

</head>

<body>

<div class="container" style="width:20%;margin-top:100px;"> <form name="myForm"

action="insert.php" method="post"> <fieldset>

<legend><img src="icon.png" style="margin-top:-10px;"/>&nbsp;<i>Appy

Chat</i>&nbsp;</legend>

<div class="row">

<input type="text" name="username" class="form-control" placeholder="Choose your User

Name"></div><br/>

<div class="row">

<input type="password" name="password" class="form-control" placeholder="Pick a

secure Password"></div>

<br/>

<div class="row">

<input type="submit" class="btn btn-warning col-md-6" value="Register"> <a

href="login.php" class="btn btn-danger col-md-4 pull-right">Cancel</a> </div>

</fieldset>
</form>

</div>

</body>

</html>
Online Chatting System

Insertion into Database (insert.php):-

<?php include_once('config.php');

$link = mysql_connect(DB_HOST,DB_USER,DB_PASS); mysql_select_db(DB_DATABASE) or die(

"Unable to select database"); $query = "INSERT INTO ".DB_USERDB."(username,password)

VALUES ('".$_POST['username']."','".$_POST['password']."')"; $data =

mysql_query($query);

if($data){

header('Location: login.php');

}else{

echo "Error";

mysql_close($link);

?>
Output-reg.php

III. Index.php

This page allow user to chat with other group persons. This page is made using several web
technologies which are explained below:-

<?php include_once('config.php');

// Check, if username session is NOT set then this page will jump to login page if (!
isset($_SESSION['username'])) {

header('Location: login.php');

if(isset($_POST['submit']))
{

$con = mysql_connect("localhost","root","");
Online Chatting System

if (!$con)

die('Could not connect: ' . mysql_error());

mysql_select_db("chat", $con); $message=$_POST['message'];

$sender=$_SESSION['username'];

//mysql_query("INSERT INTO message(message, sender)VALUES('$message', '$sender')");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple

Chat</title>

<script language="javascript" src="jquery-1.2.6.min.js"></script> <script

language="javascript" src="jquery.timers-1.0.0.js"></script> <script
type="text/javascript">

$(document).ready(function(){ var j = jQuery.noConflict();

j(".refresh").everyTime(1000,function(i){ j.ajax({

url: "refresh.php", cache: false,

success: function(html){ j(".refresh").html(html);

})

})

j('#post_button').click(function() { $text = j('#textb').val(); j.ajax({

type: "POST", cache: false, url: "save.php",

data: "text="+$text, success: function(data) {

//alert($text);

}); j('#textb').val(''); return false;

});

j( "#textb" ).keypress(function( event ) { if ( event.which == 13 ) {

event.preventDefault();
Online Chatting System

$text = j('#textb').val(); j.ajax({

type: "POST", cache: false, url: "save.php",

data: "text="+$text, success: function(data) {

//alert($text);

}); j('#textb').val(''); return false;

//alert(event.which);

});

j('.refresh').css({color:"green"});

});

</script>

<style type="text/css"> body{margin:0px 0px 0px 0px;}

.refresh {
border: 1px solid #3366FF; border-left: 4px solid #3366FF; color: green;

font-family: tahoma; font-size: 12px; height: 225px; overflow: auto; width: 415px;
padding:10px;

background-color:#FFFFFF;

#post_button{

border: 1px solid #3366FF; background-color:#3366FF; width: 100px; color:#FFFFFF;

font-weight: bold;

margin-left: -105px; padding-top: 4px; padding-bottom: 4px; cursor:pointer;

#textb{

border: 1px solid #3366FF; border-left: 4px solid #3366FF; width: 320px;

margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; width:

415px;

#texta{

border: 1px solid #3366FF; border-left: 4px solid #3366FF; width: 410px;
Online Chatting System

margin-bottom: 10px; padding:5px;

p{

border-top: 1px solid #EEEEEE;

margin-top: 0px; margin-bottom: 5px; padding-top: 5px;

span{

font-weight: bold; color: #3B5998;

#wrap{margin:12em 32em;} </style>

<link href="bootstrap.css" rel="stylesheet">

</head>

<body>

<div id="wrap">

<span class="input-xlarge uneditable-input">&nbsp;&nbsp;<?php echo

$_SESSION['username'];?>
<a href="logout.php" style="margin-left:22em;" >Logout</a> </span>

<div class="refresh"> <?php

$con = mysql_connect("localhost","root",""); if (!$con)

die('Could not connect: ' . mysql_error());

mysql_select_db("chat", $con);

$result = mysql_query("SELECT * FROM message ORDER BY id DESC");

while($row = mysql_fetch_array($result))

echo '<p>'.'<span>'.$row['sender'].'</span>'. '&nbsp;&nbsp;' .

$row['message'].'</p>';

mysql_close($con); ?>

</div>

<input name="message" type="text" id="textb"/> <button name="submit"

id="post_button" >Chat</button>

</div>
</body>

</html>
Online Chatting System

Ajax request to server (Refresh.php):-

<?php

$con = mysql_connect("localhost","root",""); if (!$con)

die('Could not connect: ' . mysql_error());

mysql_select_db("chat", $con);

$result = mysql_query("SELECT * FROM message ORDER BY id DESC");

while($row = mysql_fetch_array($result))

echo '<p>'.'<span>'.$row['sender'].'</span>'. '&nbsp;:&nbsp;' .

$row['message'].'</p>';

mysql_close($con);

?>
Output-index.php
Online Chatting System

5. Conclusion:-
Although, this project is made for Small Scale communication but if we implement new
technologies & features in this system, it will be able to compete with other online chatting
websites or application.

Reference:-

http://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931
http://tutorialzine.com/2010/10/ajax-web-chat-php-mysql/
http://www.script-tutorials.com/how-to-easily-make-a-php-chat-application/
http://forum.codecall.net/topic/58937-simple-chat-system-using-php-mysql-and-ajax/

Project Hosting
The project is hosted at Google Code. The complete source code along with the manual to
operate the project and supplementary files are uploaded.

Project Link: https://

QR CODE: