diff --git a/chat.php b/chat.php index 8657715..927a881 100644 --- a/chat.php +++ b/chat.php @@ -1,49 +1,52 @@ - - - - ChatLine - Real-time Messaging App - - - - - - - -
-
-
- - Profile photo -
- User -

Active now

-
-
-
-
-
-

- 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! -

-
-
-
- Profile photo -
-

- 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? -

-
-
+ + + + + +
+
+
+ 0) { + $selected_user = mysqli_fetch_assoc($sql); + } + ?> + + " alt="Profile photo"> +
+ + + +

+ +

-
- - -
-
-
- - + +
+
+
+ + + +
+
+
+ + + + \ No newline at end of file diff --git a/chatline.sql b/chatline.sql index 5b94b15..61fb640 100644 --- a/chatline.sql +++ b/chatline.sql @@ -30,8 +30,7 @@ CREATE TABLE `messages` ( `msg_id` int(11) NOT NULL, `get_msg_id` int(255) NOT NULL, `post_msg_id` int(255) NOT NULL, - `msg` varchar(1000) NOT NULL, - `unique_id` int(255) NOT NULL + `msg` varchar(1000) NOT NULL ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci; -- -------------------------------------------------------- -- @@ -57,7 +56,7 @@ CREATE TABLE `users` ( -- ALTER TABLE `messages` ADD PRIMARY KEY (`msg_id`), - ADD KEY `FOREIGN` (`unique_id`) USING BTREE; + ADD KEY `FOREIGN` (`post_msg_id`) USING BTREE; -- -- Indexes for table `users` -- @@ -86,7 +85,7 @@ MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT; -- Constraints for 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; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */ ; diff --git a/css/style.css b/css/style.css index b1a47d0..f9b1158 100644 --- a/css/style.css +++ b/css/style.css @@ -265,7 +265,7 @@ body { color: forestgreen; } -.users a .status-dot .offline { +.users a .status-dot.offline { font-size: 12px; color: gray; } @@ -311,55 +311,54 @@ body { } .chat-box .chat { - margin: 15px 0; + margin: 15px 0; } .chat-box .chat p { - word-wrap: break-word; - padding: 10px 15px; - box-shadow: 0 32px 32px -32px rgba(0, 0, 0, 5%), - 0 -32px 32px -32px rgba(0, 0, 0, 5%); + word-wrap: break-word; + padding: 10px 15px; + box-shadow: 0 32px 32px -32px rgba(0, 0, 0, 5%), + 0 -32px 32px -32px rgba(0, 0, 0, 5%); } .chat-box .post { - display: flex; + display: flex; } .post .details { - margin-left: auto ; - max-width: calc(100% - 100px); + margin-left: auto; + max-width: calc(100% - 100px); } .post .details p { - background: #333; - color: #fff; - border-radius: 15px 15px 0 15px; - + background: #333; + color: #fff; + border-radius: 15px 15px 0 15px; } .chat-box .get { - display: flex; - align-items: flex-end; - margin-top: 15px; + display: flex; + align-items: flex-end; + margin-top: 15px; } .get img { - width: 30px; - height: 30px; - object-fit: cover; - border-radius: 50%; + width: 30px; + height: 30px; + object-fit: cover; + border-radius: 50%; } .get .details { - margin-left: 10px; - margin-right: auto; - max-width: calc(100% - 100px); + margin-left: 10px; + margin-right: auto; + max-width: calc(100% - 100px); } .get .details p { - background: lightgray; - color: black; - border-radius: 15px 15px 15px 0; + background: lightgray; + color: black; + border-radius: 15px 15px 15px 0; } .chat-area .message-input { @@ -368,7 +367,7 @@ body { justify-content: space-between; } -.message-input input{ +.message-input input { height: 40px; width: calc(100% - 50px); font-size: 15px; @@ -388,4 +387,4 @@ body { cursor: pointer; color: #fff; background: #333; -} \ No newline at end of file +} diff --git a/header.php b/header.php new file mode 100644 index 0000000..d93ea99 --- /dev/null +++ b/header.php @@ -0,0 +1,11 @@ + + + + + ChatLine - Real-time Messaging App + + + + + + \ No newline at end of file diff --git a/home.php b/home.php index 1ca0d0d..5d7b434 100644 --- a/home.php +++ b/home.php @@ -1,117 +1,55 @@ - - - - ChatLine - Real-time Messaging App - - - - - - - -
-
-
-
- Profile photo -
- User -

Active now

-
+ + + + + +
+
+
+
+ 0) { + $current_user = mysqli_fetch_assoc($sql); + } + ?> + " alt="Profile photo"> +
+ + + +

+ +

- Logout -
-
- - Who do you want to chat with? - - -
-
- -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- - -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- - -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- - -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- - -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- - -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- - -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- - -
- Profile photo -
- Friend #1 -

This is a test message

-
-
-
- -
-
-
- - + Logout +
+
+ + Who do you want to chat with? + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git a/index.php b/index.php index bebe7b7..93fae6a 100644 --- a/index.php +++ b/index.php @@ -1,52 +1,52 @@ - - - - ChatLine - Real-time Messaging App - - - - - - - -
-
-
Join us at ChatLine!
-
-
-
-
- - -
-
- - -
+ + + + + +
+
+
Join us at ChatLine!
+ +
+
+
+ +
-
-
- - -
-
- - - -
-
- - -
-
- -
+
+ +
- -
Already have an account? Login now!
-
-
- - - +
+
+
+ + +
+
+ + + +
+
+ + +
+
+ +
+
+ +
Already have an account? Login now!
+
+
+ + + + \ No newline at end of file diff --git a/js/chat.js b/js/chat.js new file mode 100644 index 0000000..d87bc1a --- /dev/null +++ b/js/chat.js @@ -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; +} diff --git a/js/home.js b/js/home.js new file mode 100644 index 0000000..b3bc160 --- /dev/null +++ b/js/home.js @@ -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); diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..419389f --- /dev/null +++ b/js/login.js @@ -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); +}; diff --git a/js/register.js b/js/register.js index 5e02182..61b46fc 100644 --- a/js/register.js +++ b/js/register.js @@ -14,7 +14,7 @@ continueBtn.onclick = () => { if (xhr.status === 200) { let data = xhr.response; if (data === "success") { - location.href = "home.php"; + location.href = "start.php"; } else { errorText.style.display = "block"; errorText.textContent = data; diff --git a/js/search-visibility.js b/js/search-visibility.js deleted file mode 100644 index 7b13604..0000000 --- a/js/search-visibility.js +++ /dev/null @@ -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"); -} diff --git a/login.php b/login.php deleted file mode 100644 index 719cb1c..0000000 --- a/login.php +++ /dev/null @@ -1,37 +0,0 @@ - - - - ChatLine - Real-time Messaging App - - - - - - - -
-
-
Login to ChatLine
-
-
-
-
- - -
-
- - - -
-
- -
-
-
-
Don't have an account? Register now!
-
-
- - - \ No newline at end of file diff --git a/assets/default.png b/php/assets/default.png similarity index 100% rename from assets/default.png rename to php/assets/default.png diff --git a/php/config.php b/php/config.php index 07f6fd8..27027c8 100644 --- a/php/config.php +++ b/php/config.php @@ -1,11 +1,11 @@ \ No newline at end of file diff --git a/php/get_msg.php b/php/get_msg.php new file mode 100644 index 0000000..9b2a523 --- /dev/null +++ b/php/get_msg.php @@ -0,0 +1,37 @@ + 0) { + while ($row = mysqli_fetch_assoc($query)) { + ($row['img']) ? $img = $row['img'] : $img = "default.png"; + if ($row['post_msg_id'] === $current_user) { + $output .= '
+
+

' . $row['msg'] . '

+
+
'; + } else { + $output .= '
+ +
+

' . $row['msg'] . '

+
+
'; + } + } + } else { + $output .= '
Send a message to start conversation :)
'; + } + echo $output; +} else { + header("location: ../start.php"); +} +?> \ No newline at end of file diff --git a/php/list.php b/php/list.php new file mode 100644 index 0000000..e913cf4 --- /dev/null +++ b/php/list.php @@ -0,0 +1,30 @@ + 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 .= ' +
+ +
+ ' . $row['first_name'] . " " . $row['last_name'] . ' +

' . $you . $msg . '

+
+
+
+ '; +} +?> \ No newline at end of file diff --git a/php/login.php b/php/login.php new file mode 100644 index 0000000..c4572c2 --- /dev/null +++ b/php/login.php @@ -0,0 +1,55 @@ + \ No newline at end of file diff --git a/php/logout.php b/php/logout.php new file mode 100644 index 0000000..aacfa62 --- /dev/null +++ b/php/logout.php @@ -0,0 +1,18 @@ + 0) { + include_once "list.php"; + } else { + $output .= "User not found :("; + } + echo $output; +} +?> \ No newline at end of file diff --git a/php/send_msg.php b/php/send_msg.php new file mode 100644 index 0000000..9ad16a0 --- /dev/null +++ b/php/send_msg.php @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/php/users.php b/php/users.php new file mode 100644 index 0000000..46c0eec --- /dev/null +++ b/php/users.php @@ -0,0 +1,14 @@ + 0) { + include_once "list.php"; +} +echo $output; +?> \ No newline at end of file diff --git a/start.php b/start.php new file mode 100644 index 0000000..ee8cebf --- /dev/null +++ b/start.php @@ -0,0 +1,38 @@ + + + + + +
+
+
Login to ChatLine
+
+
+
+
+ + +
+
+ + + +
+
+ +
+
+
+
Don't have an account? Register now!
+
+
+ + + + + \ No newline at end of file