Chatbot with PHP, MySQL and AJAX

Einfach Dinge, die nichts mit XAMPP, Apache Friends, Apache, MySQL, PHP und alle dem zu tun haben. Allerlei halt. ;)

Chatbot with PHP, MySQL and AJAX

Postby ricphil » 11. October 2022 03:44

We recently used XAMPP to build a small but efficient chatbot system. The process is really easy because XAMPP comes bundled with services like Apache and MySQL. But the issue we faced was that It could not be integrated into our existing ERP solutions. We created the html markup for the page as bot.php file and went on to set up the boilerplate HTML in it. One of my team members generated the HTML boilerplate with Emmet by typing ! followed by enter. After creating the boilerplate code, we created the markup for the chat page which goes inside the <body> tags. But with all the data present in the database, and the PHP script written, the AJAX request from our front-end to insert new messages from both the user and bot, all using JavaScript were having some issues and we still cannot find out what it is. We were unable to pull data from the backend.
The code i've shown below:
Code: Select all
<script type="text/javascript">

      // When send button gets clicked
      document.querySelector("#send").addEventListener("click", async () => {

        // create new request object. get user message
        let xhr = new XMLHttpRequest();
        var userMessage = document.querySelector("#userInput").value


        // create html to hold user message.
        let userHtml = '<div class="userSection">'+'<div class="messages user-message">'+userMessage+'</div>'+
        '<div class="seperator"></div>'+'</div>'


        // insert user message into the page
        document.querySelector('#body').innerHTML+= userHtml;

        // open a post request to server script. pass user message as parameter
        xhr.open("POST", "query.php");
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(`messageValue=${userMessage}`);


        // When response is returned, get reply text into HTML and insert in page
        xhr.onload = function () {
            let botHtml = '<div class="botSection">'+'<div class="messages bot-reply">'+this.responseText+'</div>'+
            '<div class="seperator"></div>'+'</div>'

            document.querySelector('#body').innerHTML+= botHtml;
        }

      })

  </script>



Here we built a chatbot with some CSS styling, made front-end AJAX calls with JavaScript, handled queries with PHP script, and stored all messages in a MySQL database. But we don't know if anything more has to be added, the chatbot development services (https://thinkpalm.com/products/chat-bot/) page shows some toolkit and technologies used, will these be enough?
ricphil
 
Posts: 1
Joined: 11. October 2022 03:32
XAMPP version: 7.4.30
Operating System: Windows

Return to Allerlei

Who is online

Users browsing this forum: No registered users and 21 guests