A chatbot is a bot that has an interaction with something; for example, a user can submit a query and the bot will respond according to the query:
Next, you will find a code that demonstrates this scenario. It is a website of our chatbot using HTML, CSS, and PHP language. Let's go through the code line by line.
The following lines create a page title and link the file with the CSS stylesheet file. The title can be found on the browser tab of the chatbot website. Also, style.css must be located in the same folder as the index.php file. If not, you have to add the full path of the style.css file, as follows:
<title>PI Zero W - Chatbot</title> <link rel="stylesheet" href="style.css" />
Next, we have to write some PHP code. First, we do a check to see whether usertext is set. This means that if the user has typed something and clicked on the button, then the usertext field is set. We get the data using the $_POST method, and then, we check whether the user input is one of the known questions:
<?php
if( isset($_POST['usertext'])) {
$input = $_POST['usertext'];
switch($input) {
case "hello":
$outdata = "Hello there! What can I do for you?";
break;
case "hi":
$outdata = "Hey! What' up?";
break;
case "how are you?":
$outdata = "I am fine! You?";
break;
case "what time is it?":
$timezone = date_default_timezone_get();
date_default_timezone_set($timezone);
$date = date('h:i:s a', time());
$outdata = "The time is: " . $date;
break;
case "who are you?":
$outdata = "I am your lovely chatbot!";
break; default:
$outdata = "Oup's I didn' t get that!";
break;
}
}
?>
Note that with this code, we have not built a smart chatbot or an artificially intelligent bot. To do that, we have to write many more lines of code. In this section, we will see how to create a simple chatbot so that you will be familiar with the idea.
In case we want an advanced chatbot, we have to use a database here. Instead of using the switch statement, we should create a query to our database and ask the question that the user submitted. You can read more about databases in the next section of this chapter.
Our body part consists of two sections or divisions: the header div and the main div. The header div is the main title of our web page and the main div is an HTML form that allows the user to submit a question to the chatbot. Inside the main div, we have an answer div that is actually the invisible box, where the bot answer will be displayed. We print nothing if the question is not set, and we print the bot answer if the page is reloaded and the question is set:
<body>
<div id="header">
Pi Zero W ChatBot v1.0
</div>
<div id="main">
<form method="POST" action="">
<input id="userinput" type="text" name="usertext" value="Type here...">
<br><br>
<input id="submitbutton" type="submit" value="Submit">
</form>
<div id="answer">
ChatBot answer:<br><br><br>
<?php
if(!isset($outdata)) {
echo "";
}else {
echo $outdata;
}
?>
</div>
</div>
</body>
As you have already seen, we created a website and uploaded the files into the Raspberry Pi board www or htdocs folder. Our website is available for all local networks. This means that if you want to access it from anywhere else you will not be able to do that. You have to create a rule in your router settings and port forward an external port to your internal port. The external port can be whatever you want, for example, 2823, but the internal port of your Raspberry Pi must be port 80.