Building a chat application with php javascript and ajax

June 18, 2021

In this article, we are showing how to create a simple chat application with PHP javascript and ajax.

Here what we need first we need to install XAMPP On our local machine to enable us to run PHP. if you don't know how to install XAMPP on Windows or Linux then go to this link where we explain all things step to step. I hope it's very helpful for you.

https://www.softwarequery.com/2018/01/how-to-install-wordpress-in-xampp.html

When your XAMPP is installed here is the control panel

Make sure Apache and MySql servers are running. now we go to the XAMPP folder in our drive c

Firstly we are going to create an index.php file with the help of Xampp localhost. Go to htdoc folder inside the htdoc folder. Create our project with the name chatbox folder then inside a chatbox folder create an index.php file. Now we can start with the UI for our chat on the main page. we can start to create the UI for our chatbox main page. Now let's have a short explanation. we have to input the field

for the chat name and the message. Now we can create a link with the help of the javascript function then we have the div section to load all chat messages to load all our database.

<?php
?>
<html>
<head>
<title>Chat box</title>
<link rel= "stylesheet" type="text/css" href="chat.css"/>
<script>
function submitChat(){
  
  if(form1.uname.value == ''|| form1.msg.value == ''){

aleart('ALL FIELDS ARE MANDATORY!!');
  return;
  }
  form1.uname.readonly = true;
  form1.uname.style.border = 'none';
  $('#imageload').show();
  var uname = form1.uname.value;
  var msg = form1.uname.value;
  var xmlhttp = new XHLHttpRequest();
  xmlhttp.onreadystatechange = function()
  {
  if(xmlhttp.readyState==&&xmlhttp.status==200){

document.getElementByID(chatlogs).innerHTML = xmlhttp.responseText;
  $('#imageload').hide();
  }
  }
  xmlhttp.open('GET,'insert.php?uname= '+uname+&msg='+msg,true);
  xmlhttp.send();
}
$(doccument).ready(function(e))
{
  
  $.ajaxsetup({cache:false});
  setInterval(function()$(#chatlogs).load(logs.php);}, 2000);
}};

</script>
</head>
<body>
<form name="form1">
Enter Your Chatname:<input type="text" name="uname" style="width:200px;"/><br/>
Your Message:<br/>
<textarea name="msg" style="width:200px; height:70px">

send

Create a javascript function that will have an XML HTTP request instance this will allow us to execute a PHP script with allows without refreshing the page. This function is executed once then the script the send link is click.

The line is which highlighted the function to exit if one of the fields is blank and it gives an alert message as well.

Now let's create a chat.css file inside a css folder.

In the chatbox, we have to need a table for which will hold my chat message in this table. I will need 3 columns for id username and chat message now we will start adding the table. The database is ready we will proceed to inster.php

Now we will create the inser.php page but before that, we need to have our database. we will create our chatbox database using PHPMyAdmin. this is also included once you installed the XAMPP server. to launch PHPMyAdmin then we go XAMPP control panel.

We stored the values of the fields into javascript variables which will be passed later on to the insert.php page then we create an HTTP instance and then we use the class to create a function that displays the content of insert.php once successful loaded. the chatlogs from the DB will be displayed inside the div section. After we open and send the HTTP request. Now we need to pass the two variables using the query string.

insert.php

We are open to two windows to simulate the chat. if you see it works like you're really in a chatroom.

(adsbygoogle = window.adsbygoogle || []).push({});

In this article, we are showing how to create a simple chat application with PHP javascript and ajax.

insert.php

Comments