In This Tutorial, I will show you step by step, how to create a chat application using PHP and MySQL. It's very easy and the result is awesome
Setup the project
For this tutorial, I will use EasyPHP, because it's very easy to use and simple to configure.
you can download it by this link: Easy PHP
Now that you have installed easy PHP, open your favorite text editor, and open the eds-www folder and you can create your project folder name, you can call it what you want and let's start coding.
you can download it by this link: Easy PHP
Now that you have installed easy PHP, open your favorite text editor, and open the eds-www folder and you can create your project folder name, you can call it what you want and let's start coding.
Index Page
Before we start, I am not going to use any login user here, so we will simulate a user login by using the get method and we will add the user name in the URL, so don't forget to add ?user = user name at the end of the URL.
now let's start coding the index.php page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Application</title>
<!-- Use the Jquery CDN you can find it in the description -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css?v=1.1">
</head>
<body>
<header>
<h1>Welcome, <?php echo $_GET['user']?></h1>
</header>
<div class="container">
<form method="POST" name="chat_form" <?php echo 'action = "send.php?user='.$_GET['user'].'"'?>>
<textarea name="message" placeholder ="Write a Message"></textarea><br>
<button type="submit">Send</button>
</form>
<!-- Create the chat room section -->
<div id="room" class="room">
<?php
//Now let's Try to simulate a conversation
//we have a problem, as you can see for the other side of the conversation we need to refrech to display
// the new data, so we need to use jquery to solve this
include('fetch.php');
?>
</div>
</div>
<!-- Now we need to create a script -->
<script>
setInterval(() => {
//we have selected our chat div and every 0.5 seconds we will load the fecth page
//let's test
$("#room").load('fetch.php')
}, 500);//this function will refrech every 0.5 seconds
</script>
</body>
</html>
I added the JQuery CDN because we will need it for asynchronous coding.
now let's style our page.
now let's style our page.
@import url('https://fonts.googleapis.com/css?family=Nunito|Roboto&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
header{
width: 100%;
padding: 22px 0;
background-color: #37474f;
border-bottom: 3px solid #f4511e;
color: #fafafa;
font-family: "Roboto",sans-serif;
}
header h1{
margin: 0 22px;
}
.container{
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%);
min-width: 600px;
}
textarea{
width: calc(100% - 24px);
height: 100px;
padding: 12px;
border-radius: 6px;
resize: none;
font-family: "Nunito";
font-size: 1.2rem;
}
button{
padding: 8px 28px;
margin: 4px 0 12px 0;
border-radius: 4px;
background-color: #00b8d4;
color: #fafafa;
border: none;
}
.room{
border: 1px solid #a2a2a2;
border-radius: 4px;
padding: 12px;
}
.room b{
color: #212121;
font-family: 'Roboto', sans-serif;
}
.room .date{
color: #a2a2a2;
font-family: 'Nunito',sans-serif;
letter-spacing: 0.1rem;
}
.room p{
padding: 4px 0;
font-family: 'Nunito',sans-serif;
}
Now let's Create the Page that will allow us to insert data into our database
<?php
//Now let's first crete a new data base and a new Table
//Now that we have created our database let's connect using PDO
//DB connection code
try{
$db = new PDO("mysql:host=localhost;dbname=chat_tutorial","root","");
//Now we need to write the code to insert the message into our database
$date = date("D M Y g a");
$user = $_GET['user'];
$message = $_POST["message"];
//Now we will Add the sql query that will insert to message into our db
$sql = "INSERT INTO messages (user_name,date,message_body) VALUES ('$user','$date','$message')";
//Now let's Execute this query
$db->exec($sql);
echo "Message sent succefully";
//now let's test it
//Now it should work
//Now we want to redirect to our index page without seeing this page
header("location:index.php?user=$user");
//Now let's fetch our database data
}catch(PDOException $e){
echo "Connection Failed: ". $e->getMessage();
}
?>
Now let's add the fetch function that will allow us to fetch the messages.
<?php
//let's copy our db connection code
try{
$db = new PDO("mysql:host=localhost;dbname=chat_tutorial","root","");
}catch(PDOException $e){
echo "Connection Failed: ". $e->getMessage();
}
//Now that we are connected to our database let's create the SELECT query
$sql = "SELECT * FROM messages ORDER BY id DESC";
$result = $db->query($sql);
while($data = $result->fetch()){
echo "<b>".$data['user_name']." :</b><p>".$data['message_body']."</p><span class='date'>[".$data['date']."]</span><br><br>";
}
//Now let's Refrech our index page and see
//Now let's style our code
?>
Make a Chat Application using PHP and MySQL
Reviewed by Medics
on
May 08, 2020
Rating:
Reviewed by Medics
on
May 08, 2020
Rating:
Hey! Thanks for the tutorial. I wish to know if the above code is all that's needed.
ReplyDelete