How to Create a Chatbot using PHP, Ajax, Jquery

How to Create a Chatbot using PHP, Ajax, Jquery

Today in this blog you'll learn how to create a Simple Chatbot using PHP with MySQL & jQuery (Ajax).

A chatbot is a computer program designed to simulate human conversation. These chatbots reply to you instantly according to your queries because programmers have inserted thousands of inputs/replies/queries into the database that can be asked by the user. To make an advanced chatbot we've to code more and more but I tried to make a simple chatbot with few lines of codes and queries which help you to get an idea about how a chatbot actually works.

 

Dp.php

<?php $host = "localhost"; $user = "root"; $pass = "root"; $db_name = "chat"; $con = new mysqli($host, $user, $pass, $db_name); ?>

 

Index.php

<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
               <head>
                               <title>My Chat App</title>
                               <link rel="stylesheet" href="style.css" media="all" />
               </head>
               <body>
                               <div id="container">
                                              <div id="chat_box">
                                                             <?php include 'db.php'; 
                                                             $query = "SELECT * FROM chat ORDER BY id"; 
                                                             $run = $con->query($query); 
                                                             while($row = $run->fetch_array()) : ?>
                                                             <div id="chat_data">
                                                                            <span style="color:green;"><?php echo $row['name']; ?> : </span>
                                                                            <span style="color:brown;"><?php echo $row['msg']; ?></span>
                                                                            <span style="float:right;"><?php echo $row['date']; ?></span>
                                                                            </div>
                                                             <?php endwhile; ?>

 
                                              </div>
                                              <form method="post" action="index.php">
                                                             <input type="text" name="name" placeholder="Enter Name: " />
                                                             <textarea name="enter message" placeholder="Enter Message"></textarea>
                                                             <input type="submit" name="submit" value="Send!" />
                                              </form>
                               </div>
                               <?php if(isset($_POST['submit'])){ $name = $_POST['name']; $msg = $_POST['enter_message']; $query = "INSERT INTO chat (name,msg) VALUES ('$name','$msg')"; $run = $con->query($query); } ?>
               </body>
</html>
<script> function chat_ajax(){ var req = new XMLHttpRequest(); req.onreadystatechange = function() { if(req.readyState == 4 &&req.status == 200){ document.getElementById('chat').innerHTML = req.responseText; } } req.open('GET', 'chat.php', true); req.send(); } setInterval(function(){chat_ajax()}, 1000) </script>

 

 

Style.css

*{ padding: 0; margin: 0; border: 0; }
 body{ background: silver; } 
#container{ width: 40%; background: white; margin: 0 auto; padding: 20px; }
 #chat_box{ width: 90%; height: 400px; } 
#chat_data{ width: 100%; padding: 5px; margin-bottom: 5px; border-bottom: 1px solid silver; font-weight: bold; } 
input[type="text"]{ width: 100%; height: 40px; border: 1px solid grey; border-radius: 5px; } 
input[type="submit"]{ width: 100%; height: 40px; border: 1px solid grey; border-radius: 5px; } 
textarea{ width: 100%; height: 40px; border: 1px solid grey; border-radius: 5px; }

 
Read more: http://mrbool.com/building-a-chat-application-with-php-javascript-and-ajax/34044#ixzz6VYdlaHcp

 

Click on the below link to download the source code

 

How to Create a Chatbot using PHP, Ajax, Jquery


Please Share this course

It Looks like you have completed your course!! We have created Online series based on the above content. You can give a test and check your skill.




Be a Part of CollegeSpike by giving your precious comment here and help us in improving our content.