DarkWebCode is a place where you can find a lot of exciting and inspiring stuff about Web Development, Blogging, SEO and many more

Breaking

Online Chat Application Project in PHP using ajax jquery With Full Source Code

Chat System or Chat application is mainly used to communicate with people like friends, customers, colleagues etc. Chat App is a favorite application which every programmer want to be make their own chat application in their programming career. It is an important part of any business as most of company have their chat system integrated into their websites to communicate with their clients to assist them regarding services and resolve issues So, it is very important application which required in every website or web application. In this tutorial you will learn how to develop live chat system with Ajax, PHP and MySQL. In the real web world, we have generally use HTTP request GET and POST method for communication done between client and server side. In this PHP Chat application we have use Ajax Jquery to communicate with the server. Below you can find complete step by step process for create Chat Application in PHP using Ajax. 
 Step1: Create Database Tables

 -- -- Database: `chat` -- -- -------------------------------------------------------- -- -- Table structure for table `chat_message` -- CREATE TABLE `chat_message` ( `chat_message_id` int(11) NOT NULL, `to_user_id` int(11) NOT NULL, `from_user_id` int(11) NOT NULL, `chat_message` text NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `status` int(1) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -------------------------------------------------------- -- -- Table structure for table `login` -- CREATE TABLE `login` ( `user_id` int(11) NOT NULL, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `login` -- INSERT INTO `login` (`user_id`, `username`, `password`) VALUES (1, 'johnsmith', '$2y$10$4REfvTZpxLgkAR/lKG9QiOkSdahOYIR3MeoGJAyiWmRkEFfjH3396'), (2, 'peterParker', '$2y$10$4REfvTZpxLgkAR/lKG9QiOkSdahOYIR3MeoGJAyiWmRkEFfjH3396'), (3, 'davidMoore', '$2y$10$4REfvTZpxLgkAR/lKG9QiOkSdahOYIR3MeoGJAyiWmRkEFfjH3396'); -- -------------------------------------------------------- -- -- Table structure for table `login_details` -- CREATE TABLE `login_details` ( `login_details_id` int(11) NOT NULL, `user_id` int(11) NOT NULL, `last_activity` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `is_type` enum('no','yes') NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Indexes for dumped tables -- -- -- Indexes for table `chat_message` -- ALTER TABLE `chat_message` ADD PRIMARY KEY (`chat_message_id`); -- -- Indexes for table `login` -- ALTER TABLE `login` ADD PRIMARY KEY (`user_id`); -- -- Indexes for table `login_details` -- ALTER TABLE `login_details` ADD PRIMARY KEY (`login_details_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `chat_message` -- ALTER TABLE `chat_message` MODIFY `chat_message_id` int(11) NOT NULL AUTO_INCREMENT; -- -- AUTO_INCREMENT for table `login` -- ALTER TABLE `login` MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; -- -- AUTO_INCREMENT for table `login_details` -- ALTER TABLE `login_details` MODIFY `login_details_id` int(11) NOT NULL AUTO_INCREMENT;

Step 2: Connect Database to our Project.

Once you have make chat database and above table in your mysql database then you have to make database connection. For making database connection using PHP PDO we have to write following code.
Create database_connection.php file and Copy Paste bellow code.

<?php
  //database_connection.php 
 $connect = new PDO("mysql:host=localhost;dbname=chat", "root", "");  
?>

Step 3:Create Login and Logout page for chat application using PHP and Jquery

Once you have to make a database connection then we want to make a login and logout page for our PHP Mysql Chat system. We all know Login into a system is one type of process in which a user can gain access to our web application by identifying their authenticating their identity to the system. So here for using our Live Chat Application, we have to make a Login and logout process, so we can authenticating user identity and get access to them to gain our chat application. And by clicking on the logout link they can leave our Chat app

Create login.php file and Copy Paste below code

<!-- //login.php !--> 
 <?php  include('database_connection.php');  session_start();  $message = '';  if(isset($_SESSION['user_id'])) {  header('location:index.php'); }  if(isset($_POST["login"])) {  $query = "    SELECT * FROM login      WHERE username = :username  ";  $statement = $connect->prepare($query);  $statement->execute(     array(       ':username' => $_POST["username"]      )   );   $count = $statement->rowCount();   if($count > 0)  {   $result = $statement->fetchAll();     foreach($result as $row)     {       if(password_verify($_POST["password"], $row["password"]))       {         $_SESSION['user_id'] = $row['user_id'];         $_SESSION['username'] = $row['username'];         $sub_query = "         INSERT INTO login_details          (user_id)          VALUES ('".$row['user_id']."')         ";         $statement = $connect->prepare($sub_query);         $statement->execute();         $_SESSION['login_details_id'] = $connect->lastInsertId();         header("location:index.php");       }       else       {        $message = "<label>Wrong Password</label>";       }     }  }  else  {   $message = "<label>Wrong Username</labe>";  } }  ?>  <html>       <head>           <title>Chat Application using PHP Ajax Jquery</title>     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>     </head>       <body>           <div class="container">    <br />        <h3 align="center">Chat Application using PHP Ajax Jquery</a></h3><br />    <br />    <div class="panel panel-default">       <div class="panel-heading">Chat Application Login</div>     <div class="panel-body">      <form method="post">       <p class="text-danger"><?php echo $message; ?></p>       <div class="form-group">        <label>Enter Username</label>        <input type="text" name="username" class="form-control" required />       </div>       <div class="form-group">        <label>Enter Password</label>        <input type="password" name="password" class="form-control" required />       </div>       <div class="form-group">        <input type="submit" name="login" class="btn btn-info" value="Login" />       </div>      </form>     </div>    </div>   </div>     </body>   </html>