Simple ChatBox Using PHP/MYSQL

0
512

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.

  1. 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;

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

  1. <?php
  2.  
  3. include 'connection.php';
  4.  
  5. ?>
  6.  
  7. <!DOCTYPE html>
  8.  
  9. <html>
  10.  
  11. <head>
  12.  
  13. <meta charset="UTF-8">
  14.  
  15. <title>ChatBox</title>
  16.  
  17. <link rel="stylesheet" href="chat-style.css">
  18.  
  19. </head>
  20.  
  21. <body>
  22.  
  23. <div class="chat-panel">
  24.  
  25. <b>Simple ChatBox Panel in PHP and MYSQL [ItSourceCode.Com]</b>
  26.  
  27. </div>
  28.  
  29. <div class="chat-panel">
  30.  
  31. <form method="post" action="post_chat.php">
  32.  
  33.  
  34.  
  35. <label>Your Name:</label><br>
  36.  
  37. <br>
  38.  
  39. <label>Your Message</label><br>
  40.  
  41. <textarea name="msg"></textarea><br>
  42.  
  43.  
  44.  
  45.  
  46.  
  47. </form>
  48.  
  49. </div>
  50.  
  51. <div class="chat-panel">
  52.  
  53. query("SELECT * FROM chats");
  54.  
  55. ?&gt;
  56.  
  57.  
  58.  
  59. <b>num_rows; ?&gt;</b> total chats
  60.  
  61.  
  62.  
  63. fetch_assoc()) { ?&gt;
  64.  
  65. <table width="100%">
  66.  
  67. <tr>
  68.  
  69. <td width="5%">
  70.  
  71. <img src="avatar.png" class="ava" width="30px" alt="avatar" />
  72.  
  73. </td>
  74.  
  75. <td valign="top" width="95%">
  76.  
  77. <div class="msg">
  78.  
  79. <b>
  80.  
  81.  
  82.  
  83. </b>
  84.  
  85.  
  86.  
  87. </div>
  88.  
  89. &lt;/td&gt;
  90.  
  91. &lt;/tr&gt;
  92.  
  93. &lt;/table&gt;
  94.  
  95. &lt;?php }
  96.  
  97. ?&gt;
  98.  
  99. &lt;/div&gt;
  100.  
  101. &lt;/body&gt;
  102.  
  103. &lt;/html&gt;

 

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

  1. &lt;?php
  2.  
  3. include 'connection.php';
  4.  
  5. if (isset($_POST['post_chat'])) {
  6.  
  7. $name = $_POST['name'];
  8.  
  9. $msg = $_POST['msg'];
  10.  
  11. $date = date("Y-m-d H:i:s");
  12.  
  13. $chat = $mysqli-&gt;query("INSERT INTO chats (chat_user, chat_msg, chat_time) VALUES ('$name', '$msg', '$date')");
  14.  
  15. if ($chat) {
  16.  
  17. header("Location: index.php");
  18.  
  19. } else {
  20.  
  21. echo $mysqli-&gt;error;
  22.  
  23. }
  24.  
  25. }
  26.  
  27. ?&gt;

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

  1. &lt;?php
  2.  
  3. $mysqli = new mysqli('localhost', 'root', '', 'itsourcecode');
  4.  
  5. ?&gt;

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

  1. body {
  2.  
  3. background-color: #666;
  4.  
  5. width: 50%;
  6.  
  7. margin: 0px auto;
  8.  
  9. padding-top: 20px;
  10.  
  11. color: #323232;
  12.  
  13. font: 15px Calibri;
  14.  
  15. }
  16.  
  17. .chat-panel {
  18.  
  19. background-color: #cbcbcb;
  20.  
  21. padding: 10px;
  22.  
  23. margin-bottom: 2px;
  24.  
  25. }
  26.  
  27. input[name='name'] {
  28.  
  29. background-color: #efefef;
  30.  
  31. border: 1px solid #c0c0c0;
  32.  
  33. padding: 5px;
  34.  
  35. border-radius: 5px;
  36.  
  37. }
  38.  
  39. textarea {
  40.  
  41. background-color: #efefef;
  42.  
  43. border: 1px solid #c0c0c0;
  44.  
  45. padding: 5px;
  46.  
  47. border-radius: 5px;
  48.  
  49. width: 200px;
  50.  
  51. }
  52.  
  53. input[name='post_chat'] {
  54.  
  55. background-color: #efefef;
  56.  
  57. border: 1px solid #c0c0c0;
  58.  
  59. padding: 10px;
  60.  
  61. border-radius: 5px;
  62.  
  63. }
  64.  
  65. input[name='post_chat']:hover {
  66.  
  67. background-color: #7a7a7a;
  68.  
  69. padding: 10px;
  70.  
  71. border-radius: 5px;
  72.  
  73. color: #ffffff;
  74.  
  75. }
  76.  
  77. .msg {
  78.  
  79. background-color: #ffffff;
  80.  
  81. padding: 10px;
  82.  
  83. border-radius: 5px;
  84.  
  85. }
  86.  
  87. .ava {
  88.  
  89. background: #ffffff;
  90.  
  91. border: 1px solid #c0c0c0;
  92.  
  93. border-radius: 3px;
  94.  
  95. }

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
(Visited 564 times, 8 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here