Every programmer wants to make a chat application once in his life, be any technology stack he/she might be using. Making a simple chat application is not difficult but is a bit tricky for beginners. Now many would ask why use PHP? Well if you are a beginner then you should always choose scripting language like PHP to make tricky applications like this one.
Setting up the Server in your local system
So before we get started on how to make such an application, you need to have a server like Xampp or Wampserver. This helps to create a local environment for you to work when you are coding in PHP. Once you have setup the xampp server, go to the htdocs folder and create a folder for your application, I am going to name my application "Wassup", cause I am not that creative :( .I am using xampp and it looks something like this :
Let's Code!
Let's first think what are the pages our API is gonna have. For now we are gonna make a login page, a registration page, a dashboard page, a search results page and a message page.
Here is the sql dump for this project :
-- phpMyAdmin SQL Dump
-- version 5.0.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 20, 2020 at 11:58 PM
-- Server version: 10.4.11-MariaDB
-- PHP Version: 7.3.18
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: `wassup`
--
-- --------------------------------------------------------
--
-- Table structure for table `messages`
--
CREATE TABLE `messages` (
`id` int(100) NOT NULL,
`sent_by` varchar(255) CHARACTER SET latin1 NOT NULL,
`received_by` varchar(255) CHARACTER SET latin1 NOT NULL,
`message` varchar(255) CHARACTER SET latin1 NOT NULL,
`createdAt` varchar(255) CHARACTER SET latin1 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE `users` (
`id` int(100) NOT NULL,
`name` varchar(255) CHARACTER SET latin1 NOT NULL,
`email` varchar(255) CHARACTER SET latin1 NOT NULL,
`password` varchar(255) CHARACTER SET latin1 NOT NULL,
`dp` varchar(255) CHARACTER SET latin1 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `messages`
--
ALTER TABLE `messages`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `messages`
--
ALTER TABLE `messages`
MODIFY `id` int(100) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` int(100) 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 */;
The file structure for this project is :
We have to also setup the database for this project and this is the code for db connection :
<?php
// connection to DB
$conn = mysqli_connect("localhost","root","","wassup") or die(mysqli_error($conn));
?>
In the registration page we are gonna register the new user, and if he/she already exists in the database we are gonna pass them a message that the account exists. Here is the back-end code for the registration page :
<?php
// session start
session_start();
// include DB connection
include('./db.php');
// declaring variables
$name = "";
$email = "";
$password = "";
$cpassword = "";
// get form data
if(isset($_POST['name'])) {
$name = $_POST['name'];
}
if(isset($_POST['email'])) {
$email = $_POST['email'];
}
if(isset($_POST['password'])) {
$password = $_POST['password'];
}
if(isset($_POST['password'])) {
$cpassword = $_POST['password'];
}
// setting up the target directory where you want to upload your images!
$target_dir = "../dp/";
$target_file = $target_dir . basename($_FILES["dp"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["dp"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["dp"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["dp"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["dp"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
if($name != "" && $email != "" && $password != "" && $cpassword != "") { // if the form fields are not empty!
$checkUser = "SELECT * FROM users WHERE email = '$email'";
$checkUserStatus = mysqli_query($conn,$checkUser) or die(mysqli_error($conn));
if(mysqli_num_rows($checkUserStatus) > 0) { // if user exists!
header('Location: ../index.php?message=You have already registered!');
} else {
if($password == $cpassword) { // if the password fields match!
$image = basename($_FILES["dp"]["name"]);
$insertUser = "INSERT INTO users(name,email,password,dp) VALUES('$name','$email','$password','$image')";
$insertUserStatus = mysqli_query($conn,$insertUser) or die(mysqli_error($conn));
if($insertUserStatus) { // if the user is successfully registered!
header('Location: ../index.php?message=You have registered successfully!');
} else { // if user is not registered successfully!
header('Location: ../register.php?message=Unable to register!');
}
} else { // if password fields dont match!
header('Location: ../register.php?message=Password fields do not match!');
}
}
} else { // if any of the fields are empty!
header('Location: ../register.php?message=Please fill the fields properly!');
}
?>
Now for the login page the code looks something like this :
<?php
// session start
session_start();
// include DB connection
include('./db.php');
// declaring variables
$email = "";
$password = "";
// getting form data!
if(isset($_POST['email'])) {
$email = mysqli_real_escape_string($conn,strip_tags($_POST['email']));
}
if(isset($_POST['password'])) {
$password = mysqli_real_escape_string($conn,strip_tags($_POST['password']));
}
if($email != "" && $password != "") { // if the fields are not empty!
$checkUser = "SELECT * FROM `users` WHERE BINARY `email` = '$email' AND BINARY `password` = '$password'";
$checkUserStatus = mysqli_query($conn,$checkUser) or die(mysqli_error($conn));
if(mysqli_num_rows($checkUserStatus) > 0) { // if user exists!
header('Location: ../chats.php?message=You have logged in!');
} else {
header('Location: ../index.php?message=Unable to login into your account!');
}
} else { // if the fields are empty!
header('Location: ../index.php?message=Please fill all the fields!');
}
$_SESSION['email'] = $email;
?>
Once the user logs into his/her account, the user will be redirected to the dashboard page where an user can see all the previous conversations and this page will also have a search bar to search for any particular user via their email or name.The code for the dashboard page :
<?php
// session start
session_start();
// include DB connection
include('scripts/db.php');
if(!isset($_SESSION['email'])) { // if user not logged in!
header('Location: ./index.php');
} else {
$email = $_SESSION['email'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wassup</title>
<!-- external stylesheets -->
<link rel="stylesheet" href="assets/css/chats.css">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Wassup</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="./chats.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./logout.php">Logout</a>
</li>
<?php
$getUser = "SELECT * FROM users WHERE email = '$email'";
$getUserStatus = mysqli_query($conn,$getUser) or die(mysqli_error($conn));
$getUserRow = mysqli_fetch_assoc($getUserStatus);
?>
<li class = "nav-item">
<img src="./dp/<?=$getUserRow['dp']?>" alt="Profile image" width = "40" class = "dropdown"/>
</li>
</div>
</nav>
<!-- chats section -->
<div class="container mt-4">
<div class="card">
<div class="card-title text-center">
<form class="form-inline mt-4" style = "display : inline-block" method = "POST" action = "scripts/search-users.php">
<input class="form-control mr-sm-2" type="search" name = "search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<div class="card-body mb-4">
<?php
$lastMessage = "SELECT DISTINCT sent_by FROM messages WHERE received_by = '$email'";
$lastMessageStatus = mysqli_query($conn,$lastMessage) or die(mysqli_error($conn));
if(mysqli_num_rows($lastMessageStatus) > 0) {
while($lastMessageRow = mysqli_fetch_assoc($lastMessageStatus)) {
$sent_by = $lastMessageRow['sent_by'];
$getSender = "SELECT * FROM users WHERE email = '$sent_by'";
$getSenderStatus = mysqli_query($conn,$getSender) or die(mysqli_error($conn));
$getSenderRow = mysqli_fetch_assoc($getSenderStatus);
?>
<div class="card">
<div class="card-body">
<h6><strong><img src = "./dp/<?=$getSenderRow['dp']?>" alt = "dp" width = "40"/> <?=$lastMessageRow['sent_by'];?></strong><a href="./message.php?receiver=<?=$sent_by?>" class="btn btn-outline-primary" style = "float:right">Send message</a></h6>
</div>
</div><br/>
<?php
}
} else {
?>
<div class="card-body text-center">
<h6><strong>No conversations yet!</strong></h6>
</div>
<?php
}
?>
</div>
</div>
</div>
<!-- Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Now when the user clicks on the send message option placed to the right side of receiver, then the user is redirected to a message box where he/she can send message to the concerned user. When the user clicks on the send message option, the email id of the receiver is sent as a request to the url and can be used to get the details of the receiver so that the data can be stored in the database along-with the message. The code for chat box between sender and receiver looks something like this :
<?php
// session start
session_start();
// include DB connection
include('scripts/db.php');
error_reporting(0);
if(!isset($_SESSION['email'])) { // if user not logged in!
header('Location: ./index.php');
} else {
$email = $_SESSION['email'];
}
$receiver = $_GET['receiver'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wassup</title>
<!-- external stylesheets -->
<link rel="stylesheet" href="assets/css/chats.css">
<link rel="stylesheet" href="assets/css/message.css">
<!-- Fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Wassup</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="./chats.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./logout.php">Logout</a>
</li>
<?php
$getUser = "SELECT * FROM users WHERE email = '$email'";
$getUserStatus = mysqli_query($conn,$getUser) or die(mysqli_error($conn));
$getUserRow = mysqli_fetch_assoc($getUserStatus);
?>
<li class = "nav-item">
<img src="./dp/<?=$getUserRow['dp']?>" alt="Profile image" width = "40" class = "dropdown"/>
</li>
</div>
</nav>
<div class="container">
<?php
$getReceiver = "SELECT * FROM users WHERE email = '$receiver'";
$getReceiverStatus = mysqli_query($conn,$getReceiver) or die(mysqli_error($conn));
$getReceiverRow = mysqli_fetch_assoc($getReceiverStatus);
$received_by = $getReceiverRow['email'];
?>
<div class="card mt-4">
<div class="card-header">
<h6><img src="./dp/<?=$getReceiverRow['dp']?>" alt="Profile image" width = "40"/><strong> <?=$receiver?></strong></h6>
</div>
<?php
$getMessage = "SELECT * FROM messages WHERE sent_by = '$receiver' AND received_by = '$email' OR sent_by = '$email' AND received_by = '$receiver' ORDER BY createdAt asc";
$getMessageStatus = mysqli_query($conn,$getMessage) or die(mysqli_error($conn));
if(mysqli_num_rows($getMessageStatus) > 0) {
while($getMessageRow = mysqli_fetch_assoc($getMessageStatus)) {
$message_id = $getMessageRow['id'];
?>
<div class="card-body">
<h6 style = "color: #007bff"><?=$getMessageRow['sent_by']?></h6>
<div class="message-box ml-4">
<p class="text-center"><?=$getMessageRow['message']?></p>
</div>
</div>
<?php
}
} else {
?>
<div class="card-body">
<p class = "text-muted">No messages yet! Say 'Hi'</p>
</div>
<?php
}
?>
<div class="card-footer text-center">
<form action="scripts/send.php" method = "POST" style = "display: inline-block">
<input type="hidden" name = "sent_by" value = "<?=$email?>"/>
<input type="hidden" name = "received_by" value = "<?=$receiver?>"/>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<input type="text" name = "message" id = "message" class="form-control" placeholder = "Type your message here" required/>
</div>
</div>
<div class="col-md-2">
<button type = "submit" class="btn btn-primary">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Now when the sender sends some message, then in the back-end there is a process going on which fetches the details of the sender and the receiver and it also fetches the message and the date and time the message was sent and enters this data into the database. The reason we are using date and time here is to arrange the messages in an ascending order, otherwise the messages will look jumbled up. The code for sending messages from the chat box is :
<?php
// session start
session_start();
// include db connection
include('./db.php');
// declaring variables
$sent_by = "";
$received_by = "";
$message = "";
$createdAt = date("Y-m-d h:i:sa");
// get data from form
if(isset($_POST['sent_by'])) {
$sent_by = $_POST['sent_by'];
}
if(isset($_POST['received_by'])) {
$received_by = $_POST['received_by'];
}
if(isset($_POST['message'])) {
$message = $_POST['message'];
}
if($message != "") { // if message box is not empty!
// send message
$sendMessage = "INSERT INTO messages(sent_by,received_by,message,createdAt) VALUES('$sent_by','$received_by','$message','$createdAt')";
$sendMessageStatus = mysqli_query($conn,$sendMessage) or die(mysqli_error($conn));
if($sendMessageStatus) {
header("Location: ../message.php?receiver=$received_by");
} else {
header("Location: ../message.php?receiver=$received_by");
}
}
?>
Here is a demo video for the Chat API I created :
Uff! That was too much code for today. Here is the github repo for this project :
rupeshmohanty
/
chat-api
This is a chat application using Core PHP
chat-api
This is a chat application using Core PHP
Hope you guys liked it! If you did, do tell me in the comment section.
Top comments (29)
This post is a good example of why PHP is bashed by the whole programming community.
I don't wanna sound rude but new programmers are going to see this and think this is OK. Please do not deploy this code to production.
Yeah we can use md5 and salt to make the password protected. This is just an experiment on how to make a chat application with PHP.
Please, don't use MD5 either. It's insecure. Don't try it in production.
Yeah that's why we can use md5 and salt which can generate an unique Id hence encrypting the password field.
No, seriously. Never use MD5 to encrypt a password. The are other methods more secure available php.net/manual/en/function.passwor...
Okay I will look into it. Thank you for the suggestion 😇
You can use sha256 joining the string with an application token or salt, or a cookie hash and it will be ok. If you want more security you can use 512-bit encrypt such whirlpool, sha-512 and so
I was going to use uniqid() in php and join it with the password string. I will try your approach too. Thank you for the suggestion 😇
Please do not create your own auth implementation, you will regret it eventually ( there's a big yellow box in uniqid manual that says you should never use it to salt passwords).
Use one of the many well-known, tested and audited auth libraries.
If you really wanna learn how to implement a custom authentication I suggest you to browse the source code of said libraries and see how they handle it.
There's nothing bad on implementing own auth if you're a senior dev and you know all about what it implies. Specially when working on a big company and being in need to create a self implemented auth to avoid extra costs of Auth APIs (Oauth, Oauth2, SSO ...), you just need to pass a security audit and the tests after building it and before linking your services to it on production
That is definitely a state-of-the-art PHP implementation of a chat API, however you might want to turn to other languages which have more structured approaches.
By example, Python + Django is a fantastic way to learn web development, with neatly separated concerns and it makes it hard/unnatural to turn to bad practices (although I've seen them done too).
I am unsure, if that is a state-of-the-art PHP implementation.
I guess such an implementation would more refer to an object oriented approach.
Using mysql_real_string_escape (there are also a lot of places, where those are missing.) is kind of outdated too. If you are writing raw querys, it is more common to use prepared statements these days.
The whole procedural programming approach, which was taken here, is in my eyes absolutely not state-of-the art.
There are quite modern PHP Frameworks like Symfony, wich could do the job well.
I don't know Django, but I guess the concepts are quite similar to frameworks like Symfony.
I would recommend staying with PHP for know. Just because it's more difficult to switch a language if someone is at the beginning of his programming carrier.
It's true that PHP is not that usable in some modern web-development scenarios (websockets, realtime-apps etc.), but it's relatively easy to use (like python) and still gets the job done in most classic web-dev scenarios.
I would also suggest Python as a good language to lern next, but maybe spend some more time to get to know modern programming concepts better, with a language you already know.
I would HIGHLY recommend to learn object oriented programming and concepts like Model-View-Controller.
Thank you for your suggestion😇. I will try this project again using Laravel or Symfony for sure.
Yeah sure I will try that out too. Thank you for the suggestion 😇
I understood the proposal of this post, but to make it clear for most of people that are starting in the programming world, that kind of stuff is for beginners only, in real life applications this way to do things like that is a bad practice;
This post is for beginners only.
As mentioned before, good efforts for practising PHP, but this isn’t something you want in production.
Reinventing the wheel for a lot of things as well. I suggest you try to use a framework next time, this is what’s mostly use din the industry as well. For example, try Symfony, which uses the doctrine dbal.
It also has a security component, and components for basically everything you’re doing here.
Okay I will work on it. Thanks!
Use reactphp or swoole to handle sockets, use redis to temporary save chats before saving to database?
I will make this again using react, this one is for beginners
how can i make the message sent from one mail to be moved to the person email address or that of the admin
Sorry I didn't get your question 😅
Can I make it into a website? I can’t find any web app hoster
Yeah sure!
That's true but the number of bad php examples out numbers every other language by many orders of magnitude.
What about Laravel? Some good practices baked in there :)
I will implement this chat api using Laravel too. Thanks for the suggestion 😇
It was awesome, keep it up ! more ideas and knowledge to do more .
Thank you