chat v0.1

SYSTEMSGT · Apr 19, 2021 · 84ae91a · 84ae91a
commit 84ae91a
Show file tree

Hide file tree

Showing 21 changed files with 1,101 additions and 0 deletions.
diff --git a/chat.php b/chat.php
@@ -0,0 +1,43 @@
+<?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>
+        <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="Escribe un mensaje" autocomplete="off">
+        <button><i class="fab fa-telegram-plane"></i></button>
+      </form>
+    </section>
+  </div>
+
+  <script src="javascript/chat.js"></script>
+
+</body>
+</html>
diff --git a/chatapp.sql b/chatapp.sql
@@ -0,0 +1,89 @@
+-- phpMyAdmin SQL Dump
+-- version 5.0.4
+-- https://www.phpmyadmin.net/
+--
+-- Host: 127.0.0.1
+-- Generation Time: Feb 18, 2021 at 11:44 AM
+-- Server version: 10.4.17-MariaDB
+-- PHP Version: 7.3.26
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Database: systemsg_chat
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `messages`
+--
+
+CREATE TABLE `messages` (
+  `msg_id` int(11) NOT NULL,
+  `incoming_msg_id` int(255) NOT NULL,
+  `outgoing_msg_id` int(255) NOT NULL,
+  `msg` varchar(1000) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `users`
+--
+
+CREATE TABLE `users` (
+  `user_id` int(11) NOT NULL,
+  `unique_id` int(255) NOT NULL,
+  `fname` varchar(255) NOT NULL,
+  `lname` varchar(255) NOT NULL,
+  `user` varchar(255) NOT NULL,
+  `password` varchar(255) NOT NULL,
+  `img` varchar(255) NOT NULL,
+  `status` varchar(255) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+--
+-- Indexes for dumped tables
+--
+
+--
+-- Indexes for table `messages`
+--
+ALTER TABLE `messages`
+  ADD PRIMARY KEY (`msg_id`);
+
+--
+-- Indexes for table `users`
+--
+ALTER TABLE `users`
+  ADD PRIMARY KEY (`user_id`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `messages`
+--
+ALTER TABLE `messages`
+  MODIFY `msg_id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT for table `users`
+--
+ALTER TABLE `users`
+  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT;
+COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
diff --git a/header.php b/header.php
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="es">
+<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>Chat | SYSTEMSGT</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,50 @@
+<?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>Chat</header>
+      <form action="#" method="POST" enctype="multipart/form-data" autocomplete="off">
+        <div class="error-text"></div>
+        <div class="name-details">
+          <div class="field input">
+            <label>Nombre</label>
+            <input type="text" name="fname" placeholder="Nombre" required>
+          </div>
+          <div class="field input">
+            <label>Apellido</label>
+            <input type="text" name="lname" placeholder="Apellido" required>
+          </div>
+        </div>
+        <div class="field input">
+          <label>Usuario</label>
+          <input type="text" name="user" placeholder="Usuario" required>
+        </div>
+        <div class="field input">
+          <label>Contraseña</label>
+          <input type="password" name="password" placeholder="Contraseña" required>
+          <i class="fas fa-eye"></i>
+        </div>
+        <div class="field image">
+          <label>Seleccionar imagen</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="Continuar">
+        </div>
+      </form>
+      <div class="link">¿Ya tienes una cuenta? <a href="login.php">Inicia sesión.</a></div>
+    </section>
+  </div>
+
+  <script src="javascript/pass-show-hide.js"></script>
+  <script src="javascript/signup.js"></script>
+
+</body>
+</html>
diff --git a/javascript/chat.js b/javascript/chat.js
@@ -0,0 +1,63 @@
+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/javascript/login.js b/javascript/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/javascript/pass-show-hide.js b/javascript/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");
+  }
+}
diff --git a/javascript/signup.js b/javascript/signup.js
@@ -0,0 +1,27 @@
+const form = document.querySelector(".signup 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/signup.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/javascript/users.js b/javascript/users.js
@@ -0,0 +1,51 @@
+const searchBar = document.querySelector(".search input"),
+searchIcon = document.querySelector(".search button"),
+usersList = document.querySelector(".users-list");
+
+searchIcon.onclick = ()=>{
+  searchBar.classList.toggle("show");
+  searchIcon.classList.toggle("active");
+  searchBar.focus();
+  if(searchBar.classList.contains("active")){
+    searchBar.value = "";
+    searchBar.classList.remove("active");
+  }
+}
+
+searchBar.onkeyup = ()=>{
+  let searchTerm = searchBar.value;
+  if(searchTerm != ""){
+    searchBar.classList.add("active");
+  }else{
+    searchBar.classList.remove("active");
+  }
+  let xhr = new XMLHttpRequest();
+  xhr.open("POST", "php/search.php", true);
+  xhr.onload = ()=>{
+    if(xhr.readyState === XMLHttpRequest.DONE){
+        if(xhr.status === 200){
+          let data = xhr.response;
+          usersList.innerHTML = data;
+        }
+    }
+  }
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.send("searchTerm=" + searchTerm);
+}
+
+setInterval(() =>{
+  let xhr = new XMLHttpRequest();
+  xhr.open("GET", "php/users.php", true);
+  xhr.onload = ()=>{
+    if(xhr.readyState === XMLHttpRequest.DONE){
+        if(xhr.status === 200){
+          let data = xhr.response;
+          if(!searchBar.classList.contains("active")){
+            usersList.innerHTML = data;
+          }
+        }
+    }
+  }
+  xhr.send();
+}, 500);
+