Ciao lettori, oggi in questo blog imparerai come creare un semplice Chatbot utilizzando PHP con MySQL e jQuery (Ajax). In precedenza ho condiviso un blog su come inviare e-mail con PHP da Localhost utilizzando il server XAMPP e ora è il momento di creare un chatbot funzionante in PHP.
Un chatbot è un programma informatico progettato per simulare la conversazione umana. Questi chatbot ti rispondono istantaneamente in base alle tue domande perché i programmatori hanno inserito nel database migliaia di input, risposte e domande che possono essere poste dall’utente.
Per creare un chatbot avanzato dobbiamo codificare sempre di più, ma ho provato a creare un chatbot semplice con poche righe di codice e domande che ti aiutano a farti un’idea di come funziona effettivamente un chatbot.
Nella pagina web di questo chatbot è presente un modulo di chat con un campo di input e un pulsante etichettato “invia” per digitare un messaggio e inviarlo al bot. Se fai una domanda al bot e se la query esiste nel database, il bot risponde immediatamente con un messaggio basato sulla tua query; se la query non corrisponde ad alcuna query del database, il bot risponde con un messaggio etichettato “Spiacenti, non riusciamo a capirti!”
In questo processo di chat, la pagina web non viene ricaricata perché ho utilizzato jQuery (Ajax) per questo. Se ti senti difficile capire quello che sto dicendo. Puoi guardare un tutorial video completo su questo programma [Chatbot semplice con PHP].
Chatbot semplice che utilizza PHP con MySQL [Codici sorgente]
Per creare questo programma [Chatbot semplice utilizzando PHP]. Innanzitutto, devi creare tre file, due file PHP e un altro file CSS. Dopo aver creato questi file, incolla i seguenti codici nel tuo file.
Ricorda che, se scaricherai file di codice, devi creare un nome di database “bot” e un nome di tabella “chatbot” e all’interno di questa tabella devi creare tre righe (id, query, risposte ). Altrimenti, puoi sostituire il nome del database, della tabella e delle righe della tabella con i dettagli della tabella del database nei file specificati.
tipo id int(11) auto_increment
tipo query varchar(300)
tipo risposte varchar(300)
Innanzitutto, crea un file PHP con il nome bot.php e incolla i codici forniti nel tuo file PHP. Ricorda, devi creare un file con estensione .php.
<!-- Created By CodingNepal -->
<!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 | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<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>
In secondo luogo, crea un file CSS con il nome style.css e incolla i codici forniti nel tuo file CSS. Ricorda, devi creare un file con estensione .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;
}
Infine, crea un file PHP con il nome message.php e incolla i codici forniti nel tuo file PHP. Ricorda, devi creare un file con estensione .php.
<!-- Created By CodingNepal -->
<?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!";
}
?>
Questo è tutto, ora hai creato con successo un semplice Chatbot utilizzando PHP con MySQL e jQuery (Ajax). Se il tuo codice non funziona o hai riscontrato errori/problemi, scarica i file del codice sorgente dal pulsante di download indicato. È gratuito e verrà scaricato un file .zip, quindi dovrai estrarlo.
