D’UH Chatbot – ShadowBlog

Why do you need a chatbot? It is a good project for fun and for your portfolio. For me, it was because I did not want to bother my friend(s) over chats. So I make a chatbot with only one response D’UH.

Prerequisites:

Installed IDE for web development
Knowledge of basics web development or using a Google

Step-by-Step:

There are so many websites with “How to make a chatbot using …” Basically what you need to know is basic Web development such as:

HTML
CSS
JavaScript

Why HTML?
- In code, I used a tag called: “NAME TAG” and generated a response using a script
Why CSS?
- Using CSS for styling is a good opportunity for the expression of the free creative spirit
Why JS?
- For generation a reply response for the user

Final Conclusion:

This was a nice project for my portfolio. Also now I know how to make a chatbot. As a new challenge could be reading answers from some databases. On the other hand, I know how to make a chat application. Now you too.

Code

HTML and JS:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">

    <link rel="stylesheet" href="bot.css"/>

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>

    <title> Chatbot app </title>

    <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="container">
        <h1>D'UH CHAT</h1>
        <div class="form">
            <div class="chatbot">
                Need some help?
            </div> 
        </div>  
            <div class="chat-message">
                <input id="data" placeholder="Type your message here!" type="text" required> 
                <button type="submit" class="fa fa-paper-plane" id="BTN_Send"> </button> 
            </div>                
    </div>
    <script>
       $(document).ready(function(){
          $("#BTN_Send").on("click", function(){
            $value = $("#data").val();
            $msg = '<div class="user"><img src="img/profile.png" alt="profile pic user" class="profilePic"/><div class="response"><p>'+ $value +'</p></div></div>';
            $(".form").append($msg);
            $("#data").val('');
            // start ajax code
            $.ajax({
              url: 'chatbot.php',
              type: 'POST',
              data: 'text='+$value,
              success: function(result){
                $replay = '<div class="chatbot"><div class="response">'+ result +'</div><img src="img/chatbot.png" alt="profile pic bot" class="profilePic"/></div>'; 
                $(".form").append($replay);
                // when chat goes down the scroll bar automatically comes to the bottom
                $(".container").animate({scrollTop: $(".container")[0].scrollHeight}, 2500);
              }
            });
          });
          // add event listener for pressing enter key
          $('#data').keypress(function(event){
            if(event.keyCode == 13){
              event.preventDefault();
              $("#BTN_Send").click();
            }
        });
});
</script>
</body>
</html>

PHP:


<code><?php
$conn = mysqli_connect("localhost", "root", "", "chatbot") 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 response FROM chatbot";
$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['response'];
    echo $replay;
}else{
    echo "Sorry can't be able to understand you!";
}
?></code>