Codex360-ops · Codex360-ops · Jan 17, 2026
diff --git a/chat.js b/chat.js
@@ -0,0 +1,62 @@
+const form = document.querySelector(".typing-area"),
+incoming_id = form.querySelector(".incoming_id").value,
+inputField = form.querySelector(".input-field"),
+sendBtn = form.querySelector("button"),
+chatBox = document.querySelector(".chat-box");
+
+form.onsubmit = (e)=>{
+    e.preventDefault();
+}
+
+inputField.focus();
+inputField.onkeyup = ()=>{
+    if(inputField.value != ""){
+        sendBtn.classList.add("active");
+    }else{
+        sendBtn.classList.remove("active");
+    }
+}
+
+sendBtn.onclick = ()=>{
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", "php/insert-chat.php", true);
+    xhr.onload = ()=>{
+    if(xhr.readyState === XMLHttpRequest.DONE){
+        if(xhr.status === 200){
+            inputField.value = "";
+            scrollToBottom();
+        }
+        }
+    }
+    let formData = new FormData(form);
+    xhr.send(formData);
+}
+chatBox.onmouseenter = ()=>{
+    chatBox.classList.add("active");
+}
+
+chatBox.onmouseleave = ()=>{
+    chatBox.classList.remove("active");
+}
+
+setInterval(() =>{
+    let xhr = new XMLHttpRequest();
+    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;
+            if(!chatBox.classList.contains("active")){
+                scrollToBottom();
+            }
+        }
+    }
+    }
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.send("incoming_id="+incoming_id);
+}, 500);
+
+function scrollToBottom(){
+    chatBox.scrollTop = chatBox.scrollHeight;
+}
diff --git a/chat.php b/chat.php
@@ -0,0 +1,49 @@
+<?php 
+  session_start();
+  include_once "php/config.php";
+  if(!isset($_SESSION['unique_id'])){
+    header("location: login.php");
+  }
+?>
+
+<?php include_once "header.php"; ?>
+<body>
+  <div class="wrapper">
+    <section class="chat-area">
+      <header>
+
+        <?php 
+          $user_id = mysqli_real_escape_string($conn, $_GET['user_id']);
+          $sql = mysqli_query($conn, "SELECT * FROM users WHERE unique_id = {$user_id}");
+          if(mysqli_num_rows($sql) > 0){
+            $row = mysqli_fetch_assoc($sql);
+          }else{
+            header("location: users.php");
+          }
+        ?>
+
+        <a href="users.php" class="back-icon"><i class="fas fa-arrow-left"></i></a>
+        <a href="users.php">Retour</a>
+        <img src="php/images/<?php echo $row['img']; ?>" alt="">
+
+        <div class="details">
+          <span><?php echo $row['fname']. " " . $row['lname'] ?></span>
+          <p><?php echo $row['status']; ?></p>
+        </div>
+
+      </header>
+      <div class="chat-box">
+
+      </div>
+      <form action="#" class="typing-area">
+        <input type="text" class="incoming_id" name="incoming_id" value="<?php echo $user_id; ?>" hidden>
+        <input type="text" name="message" class="input-field" placeholder="Ecrivez votre message ici..." autocomplete="on">
+        <button><i class="fas fa-telegram-plane"></i></button>
+      </form>
+    </section>
+  </div>
+
+  <script src="javascript/chat.js"></script>
+
+</body>
+</html>
diff --git a/config.php b/config.php
@@ -0,0 +1,11 @@
+<?php
+  $hostname = "sql100.infinityfree.com";
+  $username = "if0_40512385";
+  $password = "DCg88KYlV9UQ7Sl";
+  $dbname = "chatapp";
+
+  $conn = mysqli_connect($hostname, $username, $password, $dbname);
+  if(!$conn){
+    echo "Erreur de connexion à la base de données".mysqli_connect_error();
+  }
+?>
diff --git a/data.php b/data.php
@@ -0,0 +1,31 @@
+<?php
+while ($row = mysqli_fetch_assoc($query)) {
+    $sql2 = "SELECT * FROM messages WHERE (incoming_msg_id = {$row['unique_id']}
+                OR outgoing_msg_id = {$row['unique_id']}) AND (outgoing_msg_id = {$outgoing_id} 
+                OR incoming_msg_id = {$outgoing_id}) ORDER BY msg_id DESC LIMIT 1";
+
+    $query2 = mysqli_query($conn, $sql2);
+    $row2 = mysqli_fetch_assoc($query2);
+
+    (mysqli_num_rows($query2) > 0) ? $result = $row2['msg'] : $result = "Pas de message disponible";
+    (strlen($result) > 28) ? $msg =  substr($result, 0, 28) . '...' : $msg = $result;
+
+    if (isset($row2['outgoing_msg_id'])) {
+        ($outgoing_id == $row2['outgoing_msg_id']) ? $you = "You: " : $you = "";
+    } else {
+        $you = "";
+    }
+    ($row['status'] == "Déconnecter") ? $offline = "line" : $offline = "";
+    ($outgoing_id == $row['unique_id']) ? $hid_me = "hide" : $hid_me = "";
+
+    $output .= '<a href="chat.php?user_id=' . $row['unique_id'] . '">
+                    <div class="content">
+                    <img src="php/images/' . $row['img'] . '" alt="">
+                    <div class="details">
+                        <span>' . $row['fname'] . " " . $row['lname'] . '</span>
+                        <p>' . $you . $msg . '</p>
+                    </div>
+                    </div>
+                    <div class="status-dot ' . $offline . '"><i class="fas fa-circle"></i></div>
+                </a>';
+}
diff --git a/get-chat.php b/get-chat.php
@@ -0,0 +1,37 @@
+<?php 
+    session_start();
+    if(isset($_SESSION['unique_id'])){
+        include_once "config.php";
+        $outgoing_id = $_SESSION['unique_id'];
+        $incoming_id = mysqli_real_escape_string($conn, $_POST['incoming_id']);
+        $output = "";
+        $sql = "SELECT * FROM messages LEFT JOIN users ON users.unique_id = messages.outgoing_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";
+        $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{
+                    $output .= '<div class="chat incoming">
+                                <img src="php/images/'.$row['img'].'" alt="">
+                                <div class="details">
+                                    <p>'. $row['msg'] .'</p>
+                                </div>
+                                </div>';
+                }
+            }
+        }else{
+            $output .= '<div class="text">Aucun message disponible. Si vous envoyer un message il apparaitra ici.</div>';
+        }
+        echo $output;
+    }else{
+        header("location: ../login.php");
+    }
+
+?>
diff --git a/header.php b/header.php
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Solola</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
+</head>
diff --git a/index.php b/index.php
@@ -0,0 +1,64 @@
+<?php
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+?>
+<?php 
+  session_start();
+  if(isset($_SESSION['unique_id'])){
+    header("location: users.php");
+  }
+?>
+
+<?php include_once "header.php"; ?>
+
+<body>
+
+  <div class="wrapper">
+    <section class="form signup">
+      <header>Solola</header>
+
+      <form action="login.php" method="POST" enctype="multipart/form-data" autocomplete="off">
+        <div class="error-text"></div>
+        <div class="name-details">
+          <div class="field input">
+            <label>Prenom</label>
+            <input type="text" name="fname" placeholder="Prenom" required>
+          </div>
+
+          <div class="field input">
+            <label>Nom de famille</label>
+            <input type="text" name="lname" placeholder="Nom de fammille" required>
+          </div>
+        </div>
+
+        <div class="field input">
+          <label>Address email</label>
+          <input type="text" name="email" placeholder="Entrez votre Adresse email" required>
+        </div>
+
+        <div class="field input">
+          <label>Mot de passe</label>
+          <input type="password" name="password" placeholder="Entrez un nouveau mot de passe" required>
+          <i class="fas fa-eye"></i>
+        </div>
+
+        <div class="field image">
+          <label>Choisissez l'Image</label>
+          <input type="file" name="image" accept="image/x-png,image/gif,image/jpeg,image/jpg" required>
+        </div>
+
+        <div class="field button">
+          <input type="submit" name="submit" value="Continuer à discueter">
+        </div>
+      </form>
+
+      <div class="link">Déjà connecter? <a href="login.php">Se connecter</a></div>
+    </section>
+  </div>
+
+  <script src="javascript/pass-show-hide.js"></script>
+  <script src="javascript/signup.js"></script>
+
+</body>
+</html>
diff --git a/insert-chat.php b/insert-chat.php
@@ -0,0 +1,21 @@
+<?php 
+
+    session_start();
+    if(isset($_SESSION['unique_id'])){
+        include_once "config.php";
+
+        $outgoing_id = $_SESSION['unique_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("location: ../login.php");
+    }
+
+
+
+?>
diff --git a/login.js b/login.js
@@ -0,0 +1,27 @@
+const form = document.querySelector(".login form"),
+continueBtn = form.querySelector(".button input"),
+errorText = form.querySelector(".error-text");
+
+form.onsubmit = (e)=>{
+    e.preventDefault();
+}
+
+continueBtn.onclick = ()=>{
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", "php/login.php", true);
+    xhr.onload = ()=>{
+      if(xhr.readyState === XMLHttpRequest.DONE){
+          if(xhr.status === 200){
+              let data = xhr.response;
+              if(data === "success"){
+                location.href = "users.php";
+              }else{
+                errorText.style.display = "block";
+                errorText.textContent = data;
+              }
+          }
+      }
+    }
+    let formData = new FormData(form);
+    xhr.send(formData);
+}
diff --git a/login.php b/login.php
@@ -0,0 +1,34 @@
+<?php 
+    session_start();
+    include_once "config.php";
+
+    $email = mysqli_real_escape_string($conn, $_POST['email']);
+    $password = mysqli_real_escape_string($conn, $_POST['password']);
+
+    if(!empty($email) && !empty($password)){
+        $sql = mysqli_query($conn, "SELECT * FROM users WHERE email = '{$email}'");
+        if(mysqli_num_rows($sql) > 0){
+
+            $row = mysqli_fetch_assoc($sql);
+            $user_pass = md5($password);
+            $enc_pass = $row['password'];
+
+            if($user_pass === $enc_pass){
+                $status = "En ligne";
+                $sql2 = mysqli_query($conn, "UPDATE users SET status = '{$status}' WHERE unique_id = {$row['unique_id']}");
+                if($sql2){
+                    $_SESSION['unique_id'] = $row['unique_id'];
+                    echo "success";
+                }else{
+                    echo "Quelques chose ce mal passer. Essayer plutard!";
+                }
+            }else{
+                echo "Email ou mot de passe est Incorrect!";
+            }
+        }else{
+            echo "$email - Cet email n'existe pas!";
+        }
+    }else{
+        echo "Tout le champ son requis !";
+    }
+?>
diff --git a/logout.php b/logout.php
@@ -0,0 +1,24 @@
+<?php
+    session_start();
+
+    if(isset($_SESSION['unique_id'])){
+        include_once "config.php";
+
+        $logout_id = mysqli_real_escape_string($conn, $_GET['logout_id']);
+        if(isset($logout_id)){
+
+            $status = "Déconnecter";
+            $sql = mysqli_query($conn, "UPDATE users SET status = '{$status}' WHERE unique_id={$_GET['logout_id']}");
+
+            if($sql){
+                session_unset();
+                session_destroy();
+                header("location: ../login.php");
+            }
+        }else{
+            header("location: ../users.php");
+        }
+    }else{  
+        header("location: ../login.php");
+    }
+?>
diff --git a/pass-show-hide.js b/pass-show-hide.js
@@ -0,0 +1,12 @@
+const pswrdField = document.querySelector(".form input[type='password']"),
+toggleIcon = document.querySelector(".form .field i");
+
+toggleIcon.onclick = () =>{
+  if(pswrdField.type === "password"){
+    pswrdField.type = "text";
+    toggleIcon.classList.add("active");
+  }else{
+    pswrdField.type = "password";
+    toggleIcon.classList.remove("active");
+  }
+}