AndrewTrieu/chatline
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalize

Browse Source
This commit is contained in:
Andrew Trieu
2023-02-10 19:20:34 +02:00
parent c717c9e4c1
commit 5f98bab91e
23 changed files with 586 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
chat.php
View File

@@ -1,49 +1,52 @@
<!DOCTYPE html> <?php
<html lang="en"> session_start();
<head> include_once "php/config.php";
<title>ChatLine - Real-time Messaging App</title> if (!isset($_SESSION["unique_id"])) {
<meta charset="utf-8" /> header("location: start.php");
<meta name="viewport" content="width=device-width, initial-scale=1" /> }
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ?>
<link rel="stylesheet" href="css/style.css" />
<link <?php include_once "header.php"; ?>
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" <body>
/> <div class="wrapper">
</head> <section class="chat-area">
<body> <header>
<div class="wrapper"> <?php
<section class="chat-area"> $user_id = mysqli_real_escape_string($conn, $_GET['user_id']);
<header> $sql = mysqli_query(
<a href="#" class="back-icon"><i class="fas fa-arrow-left"></i></a> $conn,
<img src="assets/default.png" alt="Profile photo" /> "SELECT * FROM users WHERE unique_id = {$user_id}"
<div class="details"> );
<span>User</span> if (mysqli_num_rows($sql) > 0) {
<p>Active now</p> $selected_user = mysqli_fetch_assoc($sql);
</div> }
</header> ?>
<div class="chat-box"> <a href="home.php" class="back-icon"><i class="fas fa-arrow-left"></i></a>
<div class="chat post"> <img src="php/assets/<?php if ($selected_user["img"]) {
<div class="details"> echo $selected_user["img"];
<p> } else {
This is an outgoing message. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam facilis fugiat reiciendis adipisci iste assumenda error nemo quos nisi asperiores officiis voluptatibus, cumque laudantium. Praesentium aperiam rerum quisquam voluptate tempore! echo "default.png";
</p> } ?>" alt="Profile photo">
</div> <div class="details">
</div> <span>
<div class="chat get"> <?php echo $selected_user['first_name'] . " " . $selected_user['last_name'] ?>
<img src="assets/default.png" alt="Profile photo" /> </span>
<div class="details"> <p>
<p> <?php echo $selected_user["status"]; ?>
This is an incoming message. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consectetur illo nam! Veritatis odio consectetur delectus doloribus dolores rem, hic, id molestias odit cupiditate laboriosam, facere commodi eius officia repudiandae? </p>
</p>
</div>
</div>
</div> </div>
<form action="#" class="message-input"> </header>
<input type="text" placeholder="Send a message..." /> <div class="chat-box">
<button type="submit"><i class="fab fa-telegram-plane"></i></button> </div>
</form> <form action="#" class="message-input">
</section> <input type="text" class="selected-id" name="selected_id" value="<?php echo $user_id; ?>" hidden>
</div> <input type="text" class="message-text" name="message_text" placeholder="Send a message..." />
</body> <button type="submit"><i class="fab fa-telegram-plane"></i></button>
</html> </form>
</section>
</div>
<script src="js/chat.js"></script>
</body>
</html>

7
chatline.sql
View File

@@ -30,8 +30,7 @@ CREATE TABLE `messages` (
`msg_id` int(11) NOT NULL, `msg_id` int(11) NOT NULL,
`get_msg_id` int(255) NOT NULL, `get_msg_id` int(255) NOT NULL,
`post_msg_id` int(255) NOT NULL, `post_msg_id` int(255) NOT NULL,
`msg` varchar(1000) NOT NULL, `msg` varchar(1000) NOT NULL
`unique_id` int(255) NOT NULL
) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci; ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci;
-- -------------------------------------------------------- -- --------------------------------------------------------
-- --
@@ -57,7 +56,7 @@ CREATE TABLE `users` (
-- --
ALTER TABLE `messages` ALTER TABLE `messages`
ADD PRIMARY KEY (`msg_id`), ADD PRIMARY KEY (`msg_id`),
ADD KEY `FOREIGN` (`unique_id`) USING BTREE; ADD KEY `FOREIGN` (`post_msg_id`) USING BTREE;
-- --
-- Indexes for table `users` -- Indexes for table `users`
-- --
@@ -86,7 +85,7 @@ MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT;
-- Constraints for table `messages` -- Constraints for table `messages`
-- --
ALTER TABLE `messages` ALTER TABLE `messages`
ADD CONSTRAINT `FOREIGN_MESSAGES_USERS` FOREIGN KEY (`unique_id`) REFERENCES `users` (`unique_id`) ON DELETE CASCADE ON UPDATE CASCADE; ADD CONSTRAINT `FOREIGN_MESSAGES_USERS` FOREIGN KEY (`post_msg_id`) REFERENCES `users` (`unique_id`) ON DELETE CASCADE ON UPDATE CASCADE;
COMMIT; COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */ /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */
; ;

55
css/style.css
View File

@@ -265,7 +265,7 @@ body {
color: forestgreen; color: forestgreen;
} }
.users a .status-dot .offline { .users a .status-dot.offline {
font-size: 12px; font-size: 12px;
color: gray; color: gray;
} }
@@ -311,55 +311,54 @@ body {
} }
.chat-box .chat { .chat-box .chat {
margin: 15px 0; margin: 15px 0;
} }
.chat-box .chat p { .chat-box .chat p {
word-wrap: break-word; word-wrap: break-word;
padding: 10px 15px; padding: 10px 15px;
box-shadow: 0 32px 32px -32px rgba(0, 0, 0, 5%), box-shadow: 0 32px 32px -32px rgba(0, 0, 0, 5%),
0 -32px 32px -32px rgba(0, 0, 0, 5%); 0 -32px 32px -32px rgba(0, 0, 0, 5%);
} }
.chat-box .post { .chat-box .post {
display: flex; display: flex;
} }
.post .details { .post .details {
margin-left: auto ; margin-left: auto;
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
} }
.post .details p { .post .details p {
background: #333; background: #333;
color: #fff; color: #fff;
border-radius: 15px 15px 0 15px; border-radius: 15px 15px 0 15px;
} }
.chat-box .get { .chat-box .get {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
margin-top: 15px; margin-top: 15px;
} }
.get img { .get img {
width: 30px; width: 30px;
height: 30px; height: 30px;
object-fit: cover; object-fit: cover;
border-radius: 50%; border-radius: 50%;
} }
.get .details { .get .details {
margin-left: 10px; margin-left: 10px;
margin-right: auto; margin-right: auto;
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
} }
.get .details p { .get .details p {
background: lightgray; background: lightgray;
color: black; color: black;
border-radius: 15px 15px 15px 0; border-radius: 15px 15px 15px 0;
} }
.chat-area .message-input { .chat-area .message-input {
@@ -368,7 +367,7 @@ body {
justify-content: space-between; justify-content: space-between;
} }
.message-input input{ .message-input input {
height: 40px; height: 40px;
width: calc(100% - 50px); width: calc(100% - 50px);
font-size: 15px; font-size: 15px;
@@ -388,4 +387,4 @@ body {
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
background: #333; background: #333;
} }

11
header.php Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>ChatLine - Real-time Messaging App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

166
home.php
View File

@@ -1,117 +1,55 @@
<!DOCTYPE html> <?php
<html lang="en"> session_start();
<head> include_once "php/config.php";
<title>ChatLine - Real-time Messaging App</title> if (!isset($_SESSION["unique_id"])) {
<meta charset="utf-8"> header("location: start.php");
<meta name="viewport" content="width=device-width, initial-scale=1"> }
<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <?php include_once "header.php"; ?>
</head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<section class="user"> <section class="user">
<header> <header>
<div class="content"> <div class="content">
<img src="assets/default.png" alt="Profile photo"> <?php
<div class="details"> $sql = mysqli_query(
<span>User</span> $conn,
<p>Active now</p> "SELECT * FROM users WHERE unique_id = {$_SESSION["unique_id"]}"
</div> );
if (mysqli_num_rows($sql) > 0) {
$current_user = mysqli_fetch_assoc($sql);
}
?>
<img src="php/assets/<?php if ($current_user["img"]) {
echo $current_user["img"];
} else {
echo "default.png";
} ?>" alt="Profile photo">
<div class="details">
<span>
<?php echo $current_user['first_name'] . " " . $current_user['last_name'] ?>
</span>
<p>
<?php echo $current_user["status"]; ?>
</p>
</div> </div>
<a href="#" class="logout">Logout</a>
</header>
<div class="search">
<span class="text">
Who do you want to chat with?
</span>
<input type="text" placeholder="Enter name to search...">
<button><i class="fas fa-search"></i></button>
</div> </div>
<div class="users"> <a href="php/logout.php?logout_id=<?php echo $current_user['unique_id']; ?>" class="logout">Logout</a>
<a href="#"> </header>
<div class="content"> <div class="search">
<img src="assets/default.png" alt="Profile photo"> <span class="text">
<div class="details"> Who do you want to chat with?
<span>Friend #1</span> </span>
<p>This is a test message</p> <input type="text" placeholder="Enter name to search...">
</div> <button><i class="fas fa-search"></i></button>
</div> </div>
<div class="status-dot"><i class="fas fa-circle"></i></div> <div class="users">
</a> </div>
<a href="#"> </section>
<div class="content"> </div>
<img src="assets/default.png" alt="Profile photo"> <script src="js/home.js"></script>
<div class="details"> </body>
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
</div>
</section>
</div>
<script src="js/search-visibility.js"></script>
</body>
</html> </html>

98
index.php
View File

@@ -1,52 +1,52 @@
<!DOCTYPE html> <?php
<html lang="en"> session_start();
<head> if (isset($_SESSION['unique_id'])) {
<title>ChatLine - Real-time Messaging App</title> header("location: home.php");
<meta charset="utf-8"> }
<meta name="viewport" content="width=device-width, initial-scale=1"> ?>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css"> <?php include_once "header.php"; ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head> <body>
<body> <div class="wrapper">
<div class="wrapper"> <section class="register form">
<section class="register form"> <header>Join us at ChatLine!</header>
<header>Join us at ChatLine!</header> <form action="#" method="POST" enctype="multipart/form-data" autocomplete="off">
<form action="#" method="POST" enctype="multipart/form-data" autocomplete="off"> <div class="error"></div>
<div class="error"></div> <div class="names">
<div class="names"> <div class="field">
<div class="field"> <label>First name</label>
<label>First name</label> <input type="text" name="first_name" placeholder="First name" required>
<input type="text" name="first_name" placeholder="First name" required>
</div>
<div class="field">
<label>Last name</label>
<input type="text" name="last_name" placeholder="Last name" required>
</div>
</div> </div>
<div> <div class="field">
<div class="field"> <label>Last name</label>
<label>Email</label> <input type="text" name="last_name" placeholder="Last name" required>
<input type="text" name="email" placeholder="Enter your email" required>
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password" placeholder="Enter new password" required>
<i class="fas fa-eye"></i>
</div>
<div class="image">
<label>Profile photo</label>
<input type="file" name="image" accept="image/x-png,image/jpeg,image/jpg">
</div>
<div class="button">
<input type="submit" value="Register">
</div>
</div> </div>
</form> </div>
<div class="link">Already have an account? <a href="login.html">Login now!</a></div> <div>
</section> <div class="field">
</div> <label>Email</label>
<script src="js/password-visibility.js"></script> <input type="text" name="email" placeholder="Enter your email" required>
<script src="js/register.js"></script> </div>
</body> <div class="field">
<label>Password</label>
<input type="password" name="password" placeholder="Enter new password" required>
<i class="fas fa-eye"></i>
</div>
<div class="image">
<label>Profile photo</label>
<input type="file" name="image" accept="image/x-png,image/jpeg,image/jpg">
</div>
<div class="button">
<input type="submit" value="Register">
</div>
</div>
</form>
<div class="link">Already have an account? <a href="start.php">Login now!</a></div>
</section>
</div>
<script src="js/password-visibility.js"></script>
<script src="js/register.js"></script>
</body>
</html> </html>

63
js/chat.js Normal file
View File

@@ -0,0 +1,63 @@
const form = document.querySelector(".message-input"),
selectedId = form.querySelector(".message-input .selected-id").value,
inputField = form.querySelector(".message-input .message-text"),
sendButton = form.querySelector(".message-input button"),
chatBox = document.querySelector(".chat-box");
form.onsubmit = (e) => {
e.preventDefault();
};
inputField.focus();
inputField.onkeyup = () => {
if (inputField.value != "") {
sendButton.classList.add("active");
} else {
sendButton.classList.remove("active");
}
};
sendButton.onclick = () => {
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/send_msg.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_msg.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("selected_id=" + selectedId);
}, 1000);
function scrollToBottom() {
chatBox.scrollTop = chatBox.scrollHeight;
}

48
js/home.js Normal file
View File

@@ -0,0 +1,48 @@
const searchElement = document.querySelector(".user .search"),
searchBar = document.querySelector(".user .search input"),
searchButton = document.querySelector(".user .search button"),
usersList = document.querySelector(".user .users");
searchElement.onmouseover = () => {
searchButton.classList.toggle("active");
searchBar.classList.toggle("active");
};
searchElement.onmouseout = () => {
searchButton.classList.remove("active");
searchBar.classList.remove("active");
};
searchBar.onkeyup = () => {
let query = searchBar.value;
if (query != "") {
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("query=" + query);
}
};
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();
}, 1000);

27
js/login.js Normal file
View File

@@ -0,0 +1,27 @@
const form = document.querySelector(".login form"),
continueBtn = form.querySelector(".button input"),
errorText = form.querySelector(".error");
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 = "home.php";
} else {
errorText.style.display = "block";
errorText.textContent = data;
}
}
}
};
let formData = new FormData(form);
xhr.send(formData);
};

2
js/register.js
View File

@@ -14,7 +14,7 @@ continueBtn.onclick = () => {
if (xhr.status === 200) { if (xhr.status === 200) {
let data = xhr.response; let data = xhr.response;
if (data === "success") { if (data === "success") {
location.href = "home.php"; location.href = "start.php";
} else { } else {
errorText.style.display = "block"; errorText.style.display = "block";
errorText.textContent = data; errorText.textContent = data;

14
js/search-visibility.js
View File

@@ -1,14 +0,0 @@
const searchElement = document.querySelector(".user .search");
const searchBar = document.querySelector(".user .search input");
const searchButton = document.querySelector(".user .search button");
searchElement.onmouseover = () => {
searchButton.classList.toggle("active");
searchBar.classList.toggle("active");
}
searchElement.onmouseout = () => {
searchButton.classList.remove("active");
searchBar.classList.remove("active");
}

37
login.php
View File

@@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>ChatLine - Real-time Messaging App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<div class="wrapper">
<section class="register form">
<header>Login to ChatLine</header>
<form action="#" >
<div class="error"></div>
<div>
<div class="field">
<label>Email</label>
<input type="text" placeholder="Enter your email" required>
</div>
<div class="field">
<label>Password</label>
<input type="password" placeholder="Enter your password" required>
<i class="fas fa-eye"></i>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</div>
</form>
<div class="link">Don't have an account? <a href="register.html">Register now!</a></div>
</section>
</div>
<script src="js/password-visibility.js"></script>
</body>
</html>

0
assets/default.png → php/assets/default.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

16
php/config.php
View File

@@ -1,11 +1,11 @@
<?php <?php
$hostname = "localhost:3200"; $hostname = "localhost:3200";
$username = "root"; $username = "root";
$password = ""; $password = "";
$dbname = "chatline"; $dbname = "chatline";
$conn = mysqli_connect($hostname, $username, $password, $dbname); $conn = mysqli_connect($hostname, $username, $password, $dbname);
if(!$conn){ if (!$conn) {
echo "Database connection error".mysqli_connect_error(); echo "Database connection error" . mysqli_connect_error();
} }
?> ?>

37
php/get_msg.php Normal file
View File

@@ -0,0 +1,37 @@
<?php
session_start();
if (isset($_SESSION['unique_id'])) {
include_once "config.php";
$current_user = $_SESSION['unique_id'];
$selected_user = mysqli_real_escape_string($conn, $_POST['selected_id']);
$output = "";
$sql = "SELECT * FROM messages LEFT JOIN users ON users.unique_id = messages.post_msg_id
WHERE (post_msg_id = {$current_user} AND get_msg_id = {$selected_user})
OR (post_msg_id = {$selected_user} AND get_msg_id = {$current_user}) ORDER BY msg_id";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
while ($row = mysqli_fetch_assoc($query)) {
($row['img']) ? $img = $row['img'] : $img = "default.png";
if ($row['post_msg_id'] === $current_user) {
$output .= '<div class="chat post">
<div class="details">
<p>' . $row['msg'] . '</p>
</div>
</div>';
} else {
$output .= '<div class="chat get">
<img src="php/assets/' . $img . '" alt="">
<div class="details">
<p>' . $row['msg'] . '</p>
</div>
</div>';
}
}
} else {
$output .= '<div class="text">Send a message to start conversation :)</div>';
}
echo $output;
} else {
header("location: ../start.php");
}
?>

30
php/list.php Normal file
View File

@@ -0,0 +1,30 @@
<?php
while ($row = mysqli_fetch_assoc($query)) {
$sql2 = "SELECT * FROM messages WHERE (get_msg_id = {$row['unique_id']}
OR post_msg_id = {$row['unique_id']}) AND (post_msg_id = {$current_user}
OR get_msg_id = {$current_user}) 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 = "No message available";
(strlen($result) > 20) ? $msg = substr($result, 0, 20) . '...' : $msg = $result;
if (isset($row2['post_msg_id'])) {
($current_user == $row2['post_msg_id']) ? $you = "You: " : $you = "";
} else {
$you = "";
}
($row['status'] == "Offline") ? $offline = "offline" : $offline = "";
($current_user == $row['unique_id']) ? $hide_me = "hide" : $hide_me = "";
($row['img']) ? $img = $row['img'] : $img = "default.png";
$output .= '<a href="chat.php?user_id=' . $row['unique_id'] . '">
<div class="content">
<img src="php/assets/' . $img . '" alt="">
<div class="details">
<span>' . $row['first_name'] . " " . $row['last_name'] . '</span>
<p>' . $you . $msg . '</p>
</div>
</div>
<div class="status-dot ' . $offline . '"><i class="fas fa-circle"></i></div>
</a>';
}
?>

55
php/login.php Normal file
View File

@@ -0,0 +1,55 @@
<?php
session_start();
include_once "config.php";
function escape($conn, $value)
{
return mysqli_real_escape_string($conn, $value);
}
function isValidEmail($email)
{
return filter_var($email, FILTER_VALIDATE_EMAIL);
}
function fetchUserByEmail($conn, $email)
{
$sql = mysqli_query($conn, "SELECT * FROM users WHERE email = '{$email}'");
return mysqli_fetch_assoc($sql);
}
function encryptPassword($password)
{
return md5($password);
}
function updateStatus($conn, $user)
{
return mysqli_query($conn, "UPDATE users SET status = 'Active now' WHERE unique_id = {$user["unique_id"]}");
}
function loginUser($user)
{
$_SESSION["unique_id"] = $user["unique_id"];
echo "success";
}
if (!empty($_POST["email"]) && !empty($_POST["password"])) {
$email = escape($conn, $_POST["email"]);
$password = escape($conn, $_POST["password"]);
if (isValidEmail($email)) {
$existingUser = fetchUserByEmail($conn, $email);
if ($existingUser) {
$encrypt_pass = encryptPassword($password);
if ($encrypt_pass === $existingUser["password"]) {
if (updateStatus($conn, $existingUser)) {
loginUser($existingUser);
} else {
echo "An error occurred while logging in!";
}
} else {
echo "The email or password is incorrect!";
}
} else {
echo "The email address $email does not exist!";
}
} else {
echo "The email address $email is not valid!";
}
} else {
echo "All input fields are required!";
}
?>

18
php/logout.php Normal file
View File

@@ -0,0 +1,18 @@
<?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)) {
$sql = mysqli_query($conn, "UPDATE users SET status = 'Offline' WHERE unique_id={$_GET['logout_id']}");
if ($sql) {
session_unset();
session_destroy();
header("location: ../start.php");
}
} else {
header("location: ../home.php");
}
} else {
header("location: ../start.php");
}

44
php/register.php
View File

@@ -1,34 +1,36 @@
<?php <?php
session_start(); session_start();
include_once "config.php"; include_once "config.php";
function escape($conn, $value) { function escape($conn, $value)
{
return mysqli_real_escape_string($conn, $value); return mysqli_real_escape_string($conn, $value);
} }
function isValidEmail($email) { function isValidEmail($email)
{
return filter_var($email, FILTER_VALIDATE_EMAIL); return filter_var($email, FILTER_VALIDATE_EMAIL);
} }
function moveUploadedFile($tempFileName, $newFileName) { function moveUploadedFile($tempFileName, $newFileName)
return move_uploaded_file($tempFileName, "images/" . $newFileName); {
return move_uploaded_file($tempFileName, "assets/" . $newFileName);
} }
function generateUniqueUserId() { function generateUniqueUserId()
{
return rand(time(), 100000000); return rand(time(), 100000000);
} }
function encryptPassword($password) { function encryptPassword($password)
{
return md5($password); return md5($password);
} }
function fetchUserByEmail($conn, $email) { function fetchUserByEmail($conn, $email)
$email = escape($conn, $email); {
$sql = mysqli_query($conn, "SELECT * FROM users WHERE email = '{$email}'"); $sql = mysqli_query($conn, "SELECT * FROM users WHERE email = '{$email}'");
return mysqli_fetch_assoc($sql); return mysqli_fetch_assoc($sql);
} }
function insertUser($conn, $unique_id, $first_name, $last_name, $email, $encrypt_pass, $new_img_name, $status) { function insertUser($conn, $unique_id, $first_name, $last_name, $email, $encrypt_pass, $new_img_name)
return mysqli_query($conn, "INSERT INTO users (unique_id, first_name, last_name, email, password, img, status) VALUES ({$unique_id}, '{$first_name}','{$last_name}', '{$email}', '{$encrypt_pass}', '{$new_img_name}', '{$status}')"); {
return mysqli_query($conn, "INSERT INTO users (unique_id, first_name, last_name, email, password, img, status) VALUES ({$unique_id}, '{$first_name}','{$last_name}', '{$email}', '{$encrypt_pass}', '{$new_img_name}', 'Offline')");
} }
function loginUser($user) { if (!empty($_POST["first_name"]) && !empty($_POST["last_name"]) && !empty($_POST["email"]) && !empty($_POST["password"])) {
$_SESSION["unique_id"] = $user["unique_id"];
echo "success";
}
if (!empty($_POST["first_name"]) || !empty($_POST["last_name"]) || !empty($_POST["email"]) || !empty($_POST["password"])) {
$first_name = escape($conn, $_POST["first_name"]); $first_name = escape($conn, $_POST["first_name"]);
$last_name = escape($conn, $_POST["last_name"]); $last_name = escape($conn, $_POST["last_name"]);
$email = escape($conn, $_POST["email"]); $email = escape($conn, $_POST["email"]);
@@ -44,12 +46,11 @@ if (!empty($_POST["first_name"]) || !empty($_POST["last_name"]) || !empty($_POST
$temp_file_name = $_FILES["image"]["tmp_name"]; $temp_file_name = $_FILES["image"]["tmp_name"];
$img_ext = pathinfo($img_name, PATHINFO_EXTENSION); $img_ext = pathinfo($img_name, PATHINFO_EXTENSION);
$allowedExtensions = ["jpeg", "png", "jpg"]; $allowedExtensions = ["jpeg", "png", "jpg"];
if (in_array($img_ext, $allowedExtensions) && in_array($img_type, ["image/jpeg", "image/jpg", "image/png", ])) { if (in_array($img_ext, $allowedExtensions) && in_array($img_type, ["image/jpeg", "image/jpg", "image/png",])) {
$time = time(); $time = time();
$new_img_name = $time . $img_name; $new_img_name = $time . $img_name;
if (moveUploadedFile($temp_file_name, $new_img_name)) { if (moveUploadedFile($temp_file_name, $new_img_name)) {
$unique_id = generateUniqueUserId(); $unique_id = generateUniqueUserId();
$status = "Active now";
$encrypt_pass = encryptPassword($password); $encrypt_pass = encryptPassword($password);
} else { } else {
echo "An error occurred while uploading the image."; echo "An error occurred while uploading the image.";
@@ -61,15 +62,14 @@ if (!empty($_POST["first_name"]) || !empty($_POST["last_name"]) || !empty($_POST
} }
} else { } else {
$unique_id = generateUniqueUserId(); $unique_id = generateUniqueUserId();
$status = "Active now";
$encrypt_pass = encryptPassword($password); $encrypt_pass = encryptPassword($password);
} }
if (insertUser($conn, $unique_id, $first_name, $last_name, $email, $encrypt_pass, $new_img_name, $status)) { if (insertUser($conn, $unique_id, $first_name, $last_name, $email, $encrypt_pass, $new_img_name)) {
$loggedInUser = fetchUserByEmail($conn, $email); $loggedInUser = fetchUserByEmail($conn, $email);
if ($loggedInUser) { if (!$loggedInUser) {
loginUser($loggedInUser);
} else {
echo "An error occurred. Please try again."; echo "An error occurred. Please try again.";
} else {
echo "success";
} }
} else { } else {
echo "An error occurred. Please try again."; echo "An error occurred. Please try again.";

17
php/search.php Normal file
View File

@@ -0,0 +1,17 @@
<?php
session_start();
include_once "config.php";
$current_user = $_SESSION["unique_id"];
if (isset($_POST["query"])) {
$query = mysqli_real_escape_string($conn, $_POST["query"]);
$sql = "SELECT * FROM users WHERE NOT unique_id = {$current_user} AND (first_name LIKE '%{$query}%' OR last_name LIKE '%{$query}%') ";
$output = "";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
include_once "list.php";
} else {
$output .= "User not found :(";
}
echo $output;
}
?>

15
php/send_msg.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
session_start();
if (isset($_SESSION['unique_id'])) {
include_once "config.php";
$current_user = $_SESSION['unique_id'];
$selected_user = mysqli_real_escape_string($conn, $_POST['selected_id']);
$message = mysqli_real_escape_string($conn, $_POST['message_text']);
if (!empty($message)) {
$sql = mysqli_query($conn, "INSERT INTO messages (get_msg_id, post_msg_id, msg)
VALUES ({$selected_user}, {$current_user}, '{$message}')") or die();
}
} else {
header("location: ../start.php");
}
?>

14
php/users.php Normal file
View File

@@ -0,0 +1,14 @@
<?php
session_start();
include_once "config.php";
$current_user = $_SESSION['unique_id'];
$sql = "SELECT * FROM users WHERE NOT unique_id = {$current_user} ORDER BY user_id DESC";
$query = mysqli_query($conn, $sql);
$output = "";
if (mysqli_num_rows($query) == 0) {
$output .= "No users are available to chat";
} elseif (mysqli_num_rows($query) > 0) {
include_once "list.php";
}
echo $output;
?>

38
start.php Normal file
View File

@@ -0,0 +1,38 @@
<?php
session_start();
if (isset($_SESSION['unique_id'])) {
header("location: home.php");
}
?>
<?php include_once "header.php"; ?>
<body>
<div class="wrapper">
<section class="login form">
<header>Login to ChatLine</header>
<form action="#">
<div class="error"></div>
<div>
<div class="field">
<label>Email</label>
<input type="text" name="email" placeholder="Enter your email" required>
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password" placeholder="Enter your password" required>
<i class="fas fa-eye"></i>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</div>
</form>
<div class="link">Don't have an account? <a href="index.php">Register now!</a></div>
</section>
</div>
<script src="js/password-visibility.js"></script>
<script src="js/login.js"></script>
</body>
</html>