In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL....

Question

Question

In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL....

In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL. Please watch the attached video for instructions regarding this assignment. NOTE: There is no extra credit although the video indicates that there is. The system you create should work as stated in the extra credit portion of the video. You should fully implement the chat using AJAX, PHP, MYSQL, and SQL.

https://vimeo.com/user105979196/review/377908396/55371fb188

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

index.php:

<?php
include 'db.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>chat system</title>
<link rel="stylesheet" type="text/css" href="styles.css">

<script>
   function ajax(){
       var req = new XMLHttpRequest();
       req.onreadystatechange = function(){
           if(req.readyState == 4 && req.status == 200){
               document.getElementById('chat').innerHTML = req.responseText;
           }
       }
       req.open('GET','chat.php',true);
       req.send();
   }
   setInterval(function(){ajax()},1000);
</script>
</head>

<body onload="ajax();">
   <div id="container">
       <div id="chat">
       </div>

   <div id="chat_box">

       <form method="post" action="index.php">
           <input type="text" name="name" placeholder="enter name">
           <textarea name="msg" placeholder="enter message"></textarea>
           <input type="submit" name="submit" value="submit it">
   </form>

   <?php
   if(isset($_POST['submit'])){
       $name = $_POST['name'];
       $msg = $_POST['msg'];

$query = "INSERT INTO chat (name,msg) VALUES ('$name','$msg')";
$run =$con->query($query);

if($run){
echo "<embed loop='false' src='chat.mp3' hidden ='true' autoplay='true'/>";

       }
   }
   ?>

</div>
</div>

</body>

db.php:

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db_name = "chat";

$con = mysqli_connect($host,$user,$pass,$db_name);

function formatDate($date){
return date('g:i a' , strtotime($date));
}
?>

chat.php:

<?php
include 'db.php';
           $query = "select * from chat order by id ASC";
           $run = $con->query($query);
           while($row = $run->fetch_array()) :
           ?>
           <div id="chat_data">
               <span style="color: green"><?php echo $row['name'];?></span>
               <span style="color: brown"><?php echo $row['msg'];?></span>
               <span style="float: right;"><?php echo formatDate($row['time']);?></span>
           </div>
           <?php endwhile; ?>

styles.css:

*{
   padding:0;
   margin:0;
   border:0;
}
body{
   background: silver;
}
#container{
   width: 40%;
   background: white;
   margin: 0 auto;
   padding: 20px;
}
#chat_box{
   width: auto;
height: 400px;
position: fixed;
bottom: 0;
}
#chat{
   height: 900px;
}
#chat_data{
   width: 100%;
   padding: 5px;
   margin-bottom: 5px;
   border-bottom: 1px solid silver;
   font-weight: bold;
}
input[type='text']{
   width: 100%;
   height: 40px;
   border: 1px solid gray;
   border-radius: 5px;
}
input[type='submit']{
   width: 100%;
   height: 40px;
   border: 1px solid gray;
   border-radius: 5px;
}
textarea{
   width: 100%;
   height: 40px;
   border: 1px solid gray;
   border-radius: 5px;
}

I'll edit this code for better solution...

Add a comment

Answer 2

In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL....

Homework Answers

Add Answer to:
In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL....

Post as a guest

Earn Coins

In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL....

Homework Answers

Add Answer to: In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL....

Post as a guest

Earn Coins

Add Answer to:
In Assignment 5 you will create a Simple Chat Application using AJAX, PHP, MYSQL and SQL....