Skip to content
Snippets Groups Projects
Commit 41a58dd4 authored by Suriya Ravichandran's avatar Suriya Ravichandran
Browse files

Add chats

parent 5aa0f861
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
chat.php
+ 7
− 37
View file @ 41a58dd4
......@@ -28,42 +28,12 @@
</header>
<div class="chatbox">
<div class="chat-outgoing">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-incoming">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-outgoing">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-incoming">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-outgoing">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-incoming">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<p>hello suriya</p>
</div>
</div>
</div>
<form action="#" class="typing-area">
<input type="text" placeholder="type a message here....">
<form action="#" class="typing-area" autocomplete="off">
<input type="text" name="outgoing_id" value="<?php echo $_SESSION['unique_id'];?>" hidden>
<input type="text" name="incoming_id" value="<?php echo $user_id;?>" hidden>
<input type="text" name="message" class="input-field" placeholder="type a message here....">
<button><i class="fas fa-paper-plane"></i></button>
</form>
......@@ -72,6 +42,6 @@
</div>
</div>
<script src=""async defer></script>
<script src="javascript/chat.js"></script>
</body>
</html>
\ No newline at end of file
</html>
javascript/chat.js 0 → 100644
+ 41
− 0
View file @ 41a58dd4
const form = document.querySelector(".typing-area"),
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button"),
chatBox = document.querySelector(".chatbox");
form.onsubmit = (e)=>{
e.preventDefault(); //preventing form from submitting
}
sendBtn.onclick = ()=>{
//let's start Ajax
let xhr = new XMLHttpRequest(); //creating xml object
xhr.open("POST", "php/insert-chat.php",true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
inputField.value = ""; //once message insert into database message field is empty
}
}
}
//we have to send the form data thought ajax to php
let formData = new FormData(form);//creating new formData object
xhr.send(formData);//sending the form data to php
}
setInterval(()=>{
//let's start ajax
let xhr = new XMLHttpRequest(); //create xml object
xhr.open("POST","php/get-chat.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
chatBox.innerHTML = data;
}
}
}
//we have to send the form data thought ajax to php
let formData = new FormData(form);//creating new formdata object
xhr.send(formData);//sending the form data to php
}, 500);
\ No newline at end of file
php/get-chat.php 0 → 100644
+ 38
− 0
View file @ 41a58dd4
<?php
session_start();
if(isset($_SESSION['unique_id'])){
include_once "config.php";
$outgoing_id = mysqli_real_escape_string($conn, $_POST['outgoing_id']);
$incoming_id = mysqli_real_escape_string($conn, $_POST['incoming_id']);
$output = "";
$sql = "SELECT * FROM messages
LEFT JOIN users ON users.unique_id = messages.incoming_msg_id
WHERE (outgoing_msg_id = {$outgoing_id} AND incoming_msg_id = {$incoming_id})
OR (outgoing_msg_id = {$incoming_id} AND incoming_msg_id = {$outgoing_id}) ORDER BY msg_id ";//ASC";
$query = mysqli_query($conn, $sql);
if(mysqli_num_rows($query) > 0){
while($row = mysqli_fetch_assoc($query)){
if($row['outgoing_msg_id'] === $outgoing_id){
$output .='<div class="chat-outgoing">
<div class="details">
<p>'. $row['msg'] .'</p>
</div>
</div>';
}else{//he is a msg receiver
$output .='<div class="chat-incoming">
<img src="php/images/'. $row['img'] .'" alt="">
<div class="details">
<p>'. $row['msg'] .'</p>
</div>
</div>';
}
}
echo $output;
}
}else{
header("../login.php");
}
?>
\ No newline at end of file
php/images/1704790212profile.jpg 0 → 100644
+ 0
− 0
View file @ 41a58dd4
php/images/1704790212profile.jpg

1.12 KiB

php/insert-chat.php 0 → 100644
+ 16
− 0
View file @ 41a58dd4
<?php
session_start();
if(isset($_SESSION['unique_id'])){
include_once "config.php";
$outgoing_id = mysqli_real_escape_string($conn, $_POST['outgoing_id']);
$incoming_id = mysqli_real_escape_string($conn, $_POST['incoming_id']);
$message = mysqli_real_escape_string($conn, $_POST['message']);
if(!empty($message)){
$sql = mysqli_query($conn, "INSERT INTO messages (incoming_msg_id, outgoing_msg_id, msg)
VALUES ({$incoming_id}, {$outgoing_id}, '{$message}')") or die();
}
}else{
header("../login.php");
}
?>
\ No newline at end of file
style/chat.css
+ 4
− 1
View file @ 41a58dd4
......@@ -79,6 +79,7 @@ header .details p {
/* Style outgoing messages */
.chat-outgoing {
display: flex;
flex-direction: column; /* Change from row to column */
margin-bottom: 10px;
}
......@@ -93,9 +94,10 @@ header .details p {
border-radius: 8px;
}
/* Style incoming messages */
.chat-incoming {
display: flex;
display: block; /* Change from flex to block */
margin-bottom: 10px;
}
......@@ -117,6 +119,7 @@ header .details p {
margin-right: 10px;
}
/* Style the typing area */
.typing-area {
display: flex;
......
style/test.css 0 → 100644
+ 95
− 0
View file @ 41a58dd4
/* Combine both CSS styles */
/* Chat Area CSS Start */
.chat-area header {
background-color: #007bff; /* Updated color */
color: #fff;
padding: 15px;
display: flex;
align-items: center;
}
/* Updated back-icon style */
.chat-area header .back-icon {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
/* Updated image style */
.chat-area header img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
/* Updated details style */
.chat-area header .details {
display: flex;
flex-direction: column;
}
/* Updated details span style */
.chat-area header .details span {
font-weight: bold;
}
/* Updated details p style */
.chat-area header .details p {
font-size: 12px;
}
/* Updated chat-box style */
.chat-box {
max-height: 400px;
overflow-y: auto;
padding: 15px;
background: #f7f7f7; /* Updated background color */
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
/* Updated outgoing style */
.chat-box .outgoing p {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border-radius: 8px;
}
/* Updated incoming style */
.chat-box .incoming p {
padding: 10px;
background-color: #3498db; /* Updated color for incoming messages */
color: #fff;
border-radius: 8px;
}
/* Updated incoming img style */
.chat-box .incoming img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
/* Updated typing-area style */
.typing-area {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: #fff;
}
/* Updated button style */
.typing-area button {
background-color: #007bff;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
\ No newline at end of file
users.php
+ 1
− 1
View file @ 41a58dd4
......@@ -26,7 +26,7 @@
</div>
</div>
<a href="#" class="logout">Logout</a>
<a href="login.php" class="logout">Logout</a>
</header>
<div class="search">
<span class="text">Select an user to start chat</span>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment