Add ai chatbot in your web application
What is ai chatbot ?
First of all,ai chatbot is automated program that simulates and processes human conversation for example. written and spoken,
ai chatbot gives humans the opportunity to talk to a digital device, to have a conversation as if they were talking to a real person.
ai chatbot computer program designed to simulate conversation with human users, especially over the internet.
Steps for add ai chatbot. –
1 . Create Database
CREATE TABLE `chatbot_hints` ( `id` int(11) NOT NULL, `question` varchar(100) NOT NULL, `reply` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `chatbot_hints` (`id`, `question`, `reply`) VALUES (1, 'HI||Hello||Hii||Hie||hie||hii', 'Hello, how are you.'), (2, 'How are you', 'Good to see you again!'), (3, 'what is your name||whats your name', 'My name is Ashish Bot'), (4, 'what should I call you', 'You can call me Ashish Bot'), (5, 'Where are your from', 'I m from India'), (6, 'Bye||See you later||Have a Good Day', 'Sad to see you are going. Have a nice day');
CREATE TABLE `message` ( `id` int(11) NOT NULL, `message` text NOT NULL, `added_on` datetime NOT NULL, `type` varchar(10) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `message` (`id`, `message`, `added_on`, `type`) VALUES (1, 'Hi', '2020-04-22 12:41:04', 'user'), (2, 'Hello, how are you.', '2020-04-22 12:41:05', 'bot'), (3, 'what is your name', '2020-04-22 12:41:22', 'user'), (4, 'My name is Vishal Bot', '2020-04-22 12:41:22', 'bot'), (5, 'Where are your from', '2020-04-22 12:41:30', 'user'), (6, 'I m from India', '2020-04-22 12:41:30', 'bot'), (7, 'Go to hell', '2020-04-22 12:41:41', 'user'), (8, 'Sorry not be able to understand you', '2020-04-22 12:41:41', 'bot'), (9, 'bye', '2020-04-22 12:41:46', 'user'), (10, 'Sad to see you are going. Have a nice day', '2020-04-22 12:41:46', 'bot'), (11, 'rgw', '2022-10-12 02:07:57', 'user'), (12, 'Sorry not be able to understand you', '2022-10-12 02:07:57', 'bot'), (13, 'hii', '2022-10-12 02:13:22', 'user'), (14, 'Hello, how are you.', '2022-10-12 02:13:22', 'bot'), (15, 'hie', '2022-10-12 02:13:28', 'user'), (16, 'Hello, how are you.', '2022-10-12 02:13:28', 'bot'), (17, 'what is your name', '2022-10-12 02:14:42', 'user'), (18, 'My name is Ashish Bot', '2022-10-12 02:14:42', 'bot'), (19, 'HII', '2022-10-12 02:34:20', 'user'), (20, 'Hello, how are you.', '2022-10-12 02:34:20', 'bot');
2 . create index file
create index.php file in your project folder for ai chatbot
<?php
date_default_timezone_set('Asia/Kolkata');
include('database.inc.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>PHP Chatbot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="style.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #192734;">
<div class="container" style="padding: 20px;">
<center><h2 style="background-color: black; color: white; width: 49%;">Welcome to csssofttech.com</h2></center>
<div class="row justify-content-md-center mb-4">
<div class="col-md-6">
<!--start code-->
<div class="card" style="">
<div class="card-body messages-box">
<ul class="list-unstyled messages-list">
<?php
$res=mysqli_query($con,"select * from message");
if(mysqli_num_rows($res)>0){
$html='';
while($row=mysqli_fetch_assoc($res)){
$message=$row['message'];
$added_on=$row['added_on'];
$strtotime=strtotime($added_on);
$time=date('h:i A',$strtotime);
$type=$row['type'];
if($type=='user'){
$class="messages-me";
$imgAvatar="user1.png";
$name="Me";
}else{
$class="messages-you";
$imgAvatar="bot1.png";
$name="Chatbot";
}
$html.='<li class="'.$class.' clearfix"><span class="message-img"><img src="image/'.$imgAvatar.'" class="avatar-sm rounded-circle"></span><div class="message-body clearfix"><div class="message-header"><strong class="messages-title">'.$name.'</strong> <small class="time-messages text-muted"><span class="fas fa-time"></span> <span class="minutes">'.$time.'</span></small> </div><p class="messages-p">'.$message.'</p></div></li>';
}
echo $html;
}else{
?>
<li class="messages-me clearfix start_chat">
Please start
</li>
<?php
}
?>
</ul>
</div>
<div class="card-header">
<div class="input-group">
<input id="input-me" type="text" name="messages" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-append">
<input type="button" class="btn btn-primary" value="Send" onclick="send_msg()">
</span>
</div>
</div>
</div>
<!--end code-->
</div>
</div>
</div>
<script type="text/javascript">
function getCurrentTime(){
var now = new Date();
var hh = now.getHours();
var min = now.getMinutes();
var ampm = (hh>=12)?'PM':'AM';
hh = hh%12;
hh = hh?hh:12;
hh = hh<10?'0'+hh:hh;
min = min<10?'0'+min:min;
var time = hh+":"+min+" "+ampm;
return time;
}
function send_msg(){
jQuery('.start_chat').hide();
var txt=jQuery('#input-me').val();
var html='<li class="messages-me clearfix"><span class="message-img"><img src="image/user1.png" class="avatar-sm rounded-circle"></span><div class="message-body clearfix"><div class="message-header"><strong class="messages-title">Me</strong> <small class="time-messages text-muted"><span class="fas fa-time"></span> <span class="minutes">'+getCurrentTime()+'</span></small> </div><p class="messages-p">'+txt+'</p></div></li>';
jQuery('.messages-list').append(html);
jQuery('#input-me').val('');
if(txt){
jQuery.ajax({
url:'get_bot_message.php',
type:'post',
data:'txt='+txt,
success:function(result){
var html='<li class="messages-you clearfix"><span class="message-img"><img src="image/bot1.png" class="avatar-sm rounded-circle"></span><div class="message-body clearfix"><div class="message-header"><strong class="messages-title">Chatbot</strong> <small class="time-messages text-muted"><span class="fas fa-time"></span> <span class="minutes">'+getCurrentTime()+'</span></small> </div><p class="messages-p">'+result+'</p></div></li>';
jQuery('.messages-list').append(html);
jQuery('.messages-box').scrollTop(jQuery('.messages-box')[0].scrollHeight);
}
});
}
}
</script>
</body>
</html>
Create database connection
database.inc.php
<?php
$con=mysqli_connect('localhost','root','','youtube');
?>
Create backend code for database.
create get_bot_message.php file i your ai chatbot project folder
<?php
date_default_timezone_set('Asia/Kolkata');
include('database.inc.php');
$txt=mysqli_real_escape_string($con,$_POST['txt']);
$sql="select reply from chatbot_hints where question like '%$txt%'";
$res=mysqli_query($con,$sql);
if(mysqli_num_rows($res)>0){
$row=mysqli_fetch_assoc($res);
$html=$row['reply'];
}else{
$html="Sorry not be able to understand you";
}
$added_on=date('Y-m-d h:i:s');
mysqli_query($con,"insert into message(message,added_on,type) values('$txt','$added_on','user')");
$added_on=date('Y-m-d h:i:s');
mysqli_query($con,"insert into message(message,added_on,type) values('$html','$added_on','bot')");
echo $html;
?>
https://csssofttech.com/blog/index.php/2022/10/11/ai-chatbot-in-php-website/
If You Want no copyright Images use : Unsplash
