Simple Chat System Description and Code

Description About the system
This is a Simple Chat System wherein you can discuss about some topic and
implement in real world. This simple system requires users to register and login in
order to join the group discussion. The system is programmed using PHP, MySQL
Database, HTML, CSS, JavaScript (jQuery), and MySQLi procedural method. The
user can also update his/her account details.
Features:
 Login
 Registration
 Send Message to Public
 Update Account Details
The below image is the login form of this system.

And for the registration form. This can be navigate to show by clicking the button with
a pencil icon.
The following scripts are the codes that I have used to build the login and registration
form
Index.php
Source Code :
<?php
session_start();
if (isset($_SESSION['message'])){
echo $_SESSION['message'];
unset ($_SESSION['message']);
?>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>chatME</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-

reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto

:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-

awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>




<div class="pen-title">
<h1></h1>
</div>

<div class="module form-module">
<div class="toggle"><i class="fa fa-times fa-pencil"></i>
<div class="tooltip">Click Me</div>
</div>
<div class="form">
<h2>Login to your account</h2>
<form name="form_login" method="post" action="login.php">
<input type="text" placeholder="Username" name="username" />
<input type="password" placeholder="Password" name="password" />

<button>Login</button>
</form>
</div>
<div class="form">
<h2>Create an account</h2>
<form name="form_register" method="post" action="register.php">
<input type="text" placeholder="Your Name" name="your_name" required="requi

red" />
<input type="text" placeholder="Username" name="username" required="require

d" />
<input type="password" placeholder="Password" name="password" required="re

quired" />
<input type="email" placeholder="Email Address" name="email" />
<input type="phone" placeholder="Phone Number" name="phone" />
<button>Register</button>
</form>
</div>
<div class="cta"><br/>
<textarea id="msg" rows="4" cols="85"></textarea><br/>
<input type="hidden" value="<?php echo $row['chat_room_id']; ?>" id="i

d">
<button type="button" id="send_msg" class="button button2">Send
</button>
</form>
</td>
</tr>
</table>
</body>
</html>
Result
I used the code below for the structure of my "chat" table in the database.
Source Code :
CREATE TABLE IF NOT EXISTS `chat` (
`chatid` int(11) NOT NULL AUTO_INCREMENT,
`chat_room_id` int(11) DEFAULT NULL,
`chat_msg` text,
`userid` int(11) DEFAULT NULL,
`chat_date` varchar(255) DEFAULT NULL,
PRIMARY KEY (`chatid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Result
For building the User Account Details View or the User profile using the below script.
profile.php
<?php
session_start();
exit();
$query=mysqli_query($conn,"SELECT * FROM user WHERE

userid='$_SESSION[userid]' ")or die(mysqli_error($conn));
$username=$row['username'];
$password=$row['password'];
$email=$row['email'];
$phone=$row['phone'];
$your_name=$row['your_name'];
?>
<!DOCTYPE html>
<html>
<head>
<title>chatME - Profile</title>

</head>
<body>
<tr>
<td><a href="home.php">Home</a></td>
</tr>
<tr>
<th><h4>Profile Settings - <a href="logout.php" onclick="return

confirm_logout();">Logout</a></h4></th>
</tr>
<tr>
<td>
<h4>Hi there, <font color="blue"><?php echo $your_name;

?></font></h4>
</td>
</tr>
<tr>
<td><b>Details</b></td>
</tr>
<tr>
<td>Username:    <input type="text"
value="<?php echo $username;?>" disabled /></td>
</tr>
<tr>
<td>Password:     <input
type="password" value="<?php echo $password; ?>" disabled /></td>
</tr>
<tr>
<td>Email:         &nb
sp;<input type="email" value="<?php echo $email; ?>" disabled /></td>
</tr>
<tr>
<td>Phone:         <in
put type="text" value="<?php echo $phone; ?>" disabled/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><a href="edit_details.php?userid=<?php echo

$_SESSION['userid']; ?>">Edit Details</a></td>
</tr>
</table>
</body>
</html>
Result
And below is for updating the user's account details.
edit_details.php
Source Code :
<?php
session_start();
exit();
$query=mysqli_query($conn,"SELECT * FROM user WHERE

userid='$_SESSION[userid]' ")or die(mysqli_error($conn));
$username=$row['username'];
$password=$row['password'];
$email=$row['email'];
$phone=$row['phone'];
$your_name=$row['your_name'];
if(isset($_POST['submit'])){
$userid=$_GET['userid'];
$your_name_edit=mysqli_real_escape_string($conn,$_POST['your_name']);
$username_edit=mysqli_real_escape_string($conn,$_POST['username']);
$password_edit=mysqli_real_escape_string($conn,$_POST['password']);
$email_edit=mysqli_real_escape_string($conn,$_POST['email']);
$phone_edit=mysqli_real_escape_string($conn,$_POST['phone']);
$update_query=mysqli_query($conn,"UPDATE user SET

your_name='$your_name_edit',username='$username_edit',password='$password_
edit',email='$email_edit',phone='$phone_edit' WHERE userid='$userid' ")or
die(mysqli_error($conn));
echo "<script>window.alert('Record successfully updated!')</script>";
echo
"<script>window.location.href='edit_details.php?userid=$_SESSION[userid]'</script>
";
?>
<!DOCTYPE html>
<html>
<head>
<title>chatME - Edit Details</title>
</head>
<body>
<tr>
<td><a href="home.php">Home</a></td>
</tr>
<tr>
<th><h4>Edit Details - <a href="logout.php" onclick="return

confirm_logout();">Logout</a></h4></th>
</tr>
<tr>
<td>
<h4>Hi there, <font color="blue"><?php echo $your_name;

?></font></h4>
</td>
</tr>
<tr>
<td><b>Details</b></td>
</tr>
<form name="form_edit" method="post" action="">
<tr>
<td>Your Name:    <input type="text"

name="your_name" value="<?php echo $your_name;?>" /></td>
</tr>
<tr>
<td>Username:    <input type="text"
name="username" value="<?php echo $username;?>" /></td>
</tr>
<tr>
<td>Password:     <input
type="password" name="password" value="<?php echo $password; ?>" /></td>
</tr>
<tr>
<td>Email:         &nb
sp;<input type="email" name="email" value="<?php echo $email; ?>" /></td>
</tr>
<tr>
<td>Phone:         <in
put type="text" name="phone" value="<?php echo $phone; ?>" /></td>
</tr>
<tr>

<td><input type="submit" name="submit" class="button button2"></td>
</tr>
</form>
<tr>
<td></td>
</tr>
<tr>
<td><a href="profile.php?userid=<?php echo $_SESSION['userid'];

?>">back to Profile</a></td>
</tr>
</table>
</body>
</html>
Result
The system is free to download and for modification for educational purposes. To download
and run this simple chat system, please continue reading and follow the instructions below.
How to Run
Requirements
 Download and Install a local web server like XAMPP/WAMP.
 Text Editor for your modification such as notepad++ or sublime.
Setting Up
 Download and Extract the source code zip file. (download button is located below)
 Start the "Apache" and "MySQL" of your local web server. For XAMPP/WAMP,
open the XAMPP/WAMP's Control Panel to do this.
 Open the PHPMyAdmin in a web browser (http://localhost/phpmyadmin) and create a

new database naming "chatme".
 Locate the SQL file in the extracted folder of the source code located inside the db
folder. The SQL file is known as "chatme.sql".
 If you are using XAMPP, copy the extracted source code folder and paste it into the
xampp's "htdocs" folder. And for the WAMP, paste the folder inside the "www"
folder.
 Open a web browser and browse the system. (http://localhost/chat)

Simple Chat System Description and Code

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Simple Chat System Description and Code

Uploaded by

Copyright:

Available Formats

Description About the system

 Send Message to Public

 Update Account Details

The below image is the login form of this system.

<html lang="en" >

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-

<div class="module form-module">

<div class="toggle"><i class="fa fa-times fa-pencil"></i>

<div class="tooltip">Click Me</div>

<h2>Login to your account</h2>

<form name="form_login" method="post" action="login.php">

<input type="text" placeholder="Username" name="username" />

<input type="password" placeholder="Password" name="password" />

<form name="form_register" method="post" action="register.php">

<input type="text" placeholder="Your Name" name="your_name" required="requi

<input type="text" placeholder="Username" name="username" required="require

<input type="password" placeholder="Password" name="password" required="re

<input type="email" placeholder="Email Address" name="email" />

<input type="phone" placeholder="Phone Number" name="phone" />

<div class="cta"><!-- <a href="#">Forgot your password?</a> --

if($username == "" || $password == ""){

echo "<script>window.alert('Username and Password are required fields!')</script>";

$insert_query=mysqli_query($conn,"INSERT INTO user(username,password,email,p

echo "<script>window.alert('Account successfully created! You can now login with yo

$query=mysqli_query($conn,"select * from `user` where username='$username' and

/* $_SESSION['message']="Login Error. Please Try Again"; */

echo "<script>window.alert('Login Error. Please try again.')</script>";

die("Connection failed: " . mysqli_connect_error());

CREATE TABLE IF NOT EXISTS `user` (

`userid` int(11) NOT NULL AUTO_INCREMENT,

`username` varchar(30) DEFAULT NULL,

`password` varchar(30) DEFAULT NULL,

`your_name` varchar(60) DEFAULT NULL,

`email` varchar(255) DEFAULT NULL,

`phone` varchar(255) DEFAULT NULL,

PRIMARY KEY (`userid`)

ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

if (!isset($_SESSION['userid']) ||(trim ($_SESSION['userid']) == '')) {

$uquery=mysqli_query($conn,"SELECT * FROM `user` WHERE userid='".$_SES

<link rel="stylesheet" href="css/home.css">

$(document).keypress(function(e){ //using keyboard enter key

if(e.which === 13){

alert('Please write message first');

$('#msg').val(''); //clears the textarea after submit

alert('You press enter key!'); */

$(document).ready(function(){ //using send button

alert('Please write message first');

$('#msg').val(''); //clears the textarea after submit

<table id="chat_room" align="center">

<th><h4>Hi, <a href="profile.php?userid=<?php echo $_SESSION['userid']; ?>"><

$query=mysqli_query($conn,"select * from `chat_room`");

<td><?php echo $row['chat_room_name']; ?></td><br><br>

<div id="result" style="overflow-

<br/>

<textarea id="msg" rows="4" cols="85"></textarea><br/>

<input type="hidden" value="<?php echo $row['chat_room_id']; ?>" id="i

<td>Your Name: <input type="text"