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