M/s VIKASH TECH - Simple Chatbot using PHP with MySQL & jQuery (Ajax)
Hello readers, Today in this blog you'll learn how to create a Simple Chatbot using PHP with MySQL & jQuery (Ajax) <
Hello readers, 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 chatbot actually works.
In this program [Simple Chatbot using PHP], on the webpage, there is a chat form with an input field and a button labeled as "send" for typing a message and send to the bot. When you ask something to the bot and that query exists in the database then the bot replay a message according to your query instantly but if your query not matched to the database queries then the bot replays a message labeled as "Sorry can't be able to understand you!". In this chatting process, the webpage isn't reloaded because I used jQuery (Ajax) for that.
If you’re feeling difficult to understand what I am saying. You can try Own with below code copy and paste it.
PHP chatbot.php
<!-- Created By praveen kumar -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Simple Chatbot in PHP | VikashTech</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="title">Simple Online Chatbot</div>
<div class="form">
<div class="bot-inbox inbox">
<div class="icon">
<i class="fas fa-user"></i>
</div>
<div class="msg-header">
<p>Hello there, how can I help you?</p>
</div>
</div>
</div>
<div class="typing-field">
<div class="input-data">
<input id="data" type="text" placeholder="Type something here.." required>
<button id="send-btn">Send</button>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#send-btn").on("click", function(){
$value = $("#data").val();
$msg = '<div class="user-inbox inbox"><div class="msg-header"><p>'+ $value +'</p></div></div>';
$(".form").append($msg);
$("#data").val('');
// start ajax code
$.ajax({
url: 'message.php',
type: 'POST',
data: 'text='+$value,
success: function(result){
$replay = '<div class="bot-inbox inbox"><div class="icon"><i class="fas fa-user"></i></div><div class="msg-header"><p>'+ result +'</p></div></div>';
$(".form").append($replay);
// when chat goes down the scroll bar automatically comes to the bottom
$(".form").scrollTop($(".form")[0].scrollHeight);
}
});
});
});
</script>
</body>
</html>
PHP message.php
<!-- Created By praveen kumar-->
<?php
// connecting to database
$conn = mysqli_connect("localhost", "root", "", "bot") or die("Database Error");
// getting user message through ajax
$getMesg = mysqli_real_escape_string($conn, $_POST['text']);
//checking user query to database query
$check_data = "SELECT replies FROM chatbot WHERE queries LIKE '%$getMesg%'";
$run_query = mysqli_query($conn, $check_data) or die("Error");
// if user query matched to database query we'll show the reply otherwise it go to else statement
if(mysqli_num_rows($run_query) > 0){
//fetching replay from the database according to the user query
$fetch_data = mysqli_fetch_assoc($run_query);
//storing replay to a varible which we'll send to ajax
$replay = $fetch_data['replies'];
echo $replay;
}else{
echo "Sorry can't be able to understand you!";
}
?>
CSS style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
}
::selection{
color: #fff;
background: #007bff;
}
::-webkit-scrollbar{
width: 3px;
border-radius: 25px;
}
::-webkit-scrollbar-track{
background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
background: #ddd;
}
::-webkit-scrollbar-thumb:hover{
background: #ccc;
}
.wrapper{
width: 370px;
background: #fff;
border-radius: 5px;
border: 1px solid lightgrey;
border-top: 0px;
}
.wrapper .title{
background: #007bff;
color: #fff;
font-size: 20px;
font-weight: 500;
line-height: 60px;
text-align: center;
border-bottom: 1px solid #006fe6;
border-radius: 5px 5px 0 0;
}
.wrapper .form{
padding: 20px 15px;
min-height: 400px;
max-height: 400px;
overflow-y: auto;
}
.wrapper .form .inbox{
width: 100%;
display: flex;
align-items: baseline;
}
.wrapper .form .user-inbox{
justify-content: flex-end;
margin: 13px 0;
}
.wrapper .form .inbox .icon{
height: 40px;
width: 40px;
color: #fff;
text-align: center;
line-height: 40px;
border-radius: 50%;
font-size: 18px;
background: #007bff;
}
.wrapper .form .inbox .msg-header{
max-width: 53%;
margin-left: 10px;
}
.form .inbox .msg-header p{
color: #fff;
background: #007bff;
border-radius: 10px;
padding: 8px 10px;
font-size: 14px;
word-break: break-all;
}
.form .user-inbox .msg-header p{
color: #333;
background: #efefef;
}
.wrapper .typing-field{
display: flex;
height: 60px;
width: 100%;
align-items: center;
justify-content: space-evenly;
background: #efefef;
border-top: 1px solid #d9d9d9;
border-radius: 0 0 5px 5px;
}
.wrapper .typing-field .input-data{
height: 40px;
width: 335px;
position: relative;
}
.wrapper .typing-field .input-data input{
height: 100%;
width: 100%;
outline: none;
border: 1px solid transparent;
padding: 0 80px 0 15px;
border-radius: 3px;
font-size: 15px;
background: #fff;
transition: all 0.3s ease;
}
.typing-field .input-data input:focus{
border-color: rgba(0,123,255,0.8);
}
.input-data input::placeholder{
color: #999999;
transition: all 0.3s ease;
}
.input-data input:focus::placeholder{
color: #bfbfbf;
}
.wrapper .typing-field .input-data button{
position: absolute;
right: 5px;
top: 50%;
height: 30px;
width: 65px;
color: #fff;
font-size: 16px;
cursor: pointer;
outline: none;
opacity: 0;
pointer-events: none;
border-radius: 3px;
background: #007bff;
border: 1px solid #007bff;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.wrapper .typing-field .input-data input:valid ~ button{
opacity: 1;
pointer-events: auto;
}
.typing-field .input-data button:hover{
background: #006fef;
}
No comments yet. Login to start a new discussion Start a new discussion