Simple ChatBox Using PHP/MYSQL

0
2461

In this tutorial, we will create a very Simple ChatBox Using PHP/MYSQL. It has a very simple and easy to learn CSS design which could give more ideas to web dev beginners in developing their chatbox.

Let’s start now our tutorial.

So first, create a database then name it as any name you desire. In my case, I use the “itsourcecode” as the name of the database.

Then create a table, name it as “chats”. Then put the following attributes.

[sql]

CREATE TABLE chats ( chat_id int(11) NOT NULL, chat_user text NOT NULL, chat_msg text NOT NULL, chat_time datetime NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

[/sql]

Create an “index.php” file then put the following codes.

[php]

<?php

include ‘connection.php’;

?>

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>ChatBox</title>

<link rel=”stylesheet” href=”chat-style.css”>

</head>

<body>

Simple ChatBox Panel in PHP and MYSQL [ItSourceCode.Com]

 

query(“SELECT * FROM chats”);

?>

num_rows; ?> total chats

fetch_assoc()) { ?>

avatar

 

 

</td>

</tr>

</table>

<?php }

?>

</div>

</body>

</html>

[/php]

 

Create “post-chat.php” file then put the following codes.

[php]

<?php

include ‘connection.php’;

if (isset($_POST[‘post_chat’])) {

$name = $_POST[‘name’];

$msg = $_POST[‘msg’];

$date = date(“Y-m-d H:i:s”);

$chat = $mysqli->query(“INSERT INTO chats (chat_user, chat_msg, chat_time) VALUES (‘$name’, ‘$msg’, ‘$date’)”);

if ($chat) {

header(“Location: index.php”);

} else {

echo $mysqli->error;

}

}

?>

[/php]

Create “connection.php” file, then put the following codes.

[php]

<?php

$mysqli = new mysqli(‘localhost’, ‘root’, ”, ‘itsourcecode’);

?>

[/php]

Then, create a “chat-style.css” for styling the page. Then put the following css.

[css]

body {

background-color: #666;

width: 50%;

margin: 0px auto;

padding-top: 20px;

color: #323232;

font: 15px Calibri;

}

.chat-panel {

background-color: #cbcbcb;

padding: 10px;

margin-bottom: 2px;

}

input[name=’name’] {

background-color: #efefef;

border: 1px solid #c0c0c0;

padding: 5px;

border-radius: 5px;

}

textarea {

background-color: #efefef;

border: 1px solid #c0c0c0;

padding: 5px;

border-radius: 5px;

width: 200px;

}

input[name=’post_chat’] {

background-color: #efefef;

border: 1px solid #c0c0c0;

padding: 10px;

border-radius: 5px;

}

input[name=’post_chat’]:hover {

background-color: #7a7a7a;

padding: 10px;

border-radius: 5px;

color: #ffffff;

}

.msg {

background-color: #ffffff;

padding: 10px;

border-radius: 5px;

}

.ava {

background: #ffffff;

border: 1px solid #c0c0c0;

border-radius: 3px;

}

[/css]

Final Output:

If you have any questions or suggestion about Simple ChatBox Using PHP/MYSQL, please feel free to contact me at our contact page.

The suggested article you may like:

Facebook Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.