Create Simple Chatbox with Send Photo Feature Using PHP/MYSQL

0
252

Good day everyone! Today! I am going to teach on “CREATING A SIMPLE CHATBOX With SEND PHOTO FEATURE IN PHP/MYSQL”. 

This is for developers who wants to develop a website which is for communicating purposes. And this tutorial is a big help for them for starting up it.

Common tutorials in creating a chatbox are for posting only a message. But here, in my tutorial, I add a twist. You can now develop you simple chatbox in which users can post a message only, they can send a message with a photo or they can send or post photo only.

But before we start, make sure you already finished in developing your simple chatbox. I already have an article regarding this. And this may help you for starting up. Just >> click here << to visit my article.

Now if you are already done in the first step in developing your first simple chatbox. We can now add our added feature.

So first, just update the “index.php” file by putting the codes below.

  1. &lt;?php
  2. include 'connection.php';
  3. ?&gt;
  4. &lt;!DOCTYPE html&gt;
  5. &lt;html&gt;
  6. &lt;head&gt;
  7. &lt;meta charset="UTF-8"&gt;
  8. &lt;title&gt;ChatBox&lt;/title&gt;
  9. &lt;link rel="stylesheet" href="chat-style.css"&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. <div class="chat-panel">
  13. <b>Simple ChatBox Panel in PHP and MYSQL [ItSourceCode.Com] </b>
  14. </div>
  15. <div class="chat-panel">
  16. <form method="post" action="post_chat.php" enctype="multipart/form-data">
  17.  
  18. <label>Your Name:</label><br>
  19. <br>
  20. <label>Your Message</label><br>
  21.  <br>
  22. Add Photo:<br>
  23. <i /> <b>
  24. <i />
  25.  
  26. </form>
  27. </div>
  28. <div class="chat-panel">
  29. query("SELECT * FROM chats ORDER BY chat_id DESC");
  30. ?&gt;
  31.  
  32. <b>num_rows; ?&gt;</b> total chats
  33.  
  34. fetch_assoc()) { ?&gt;
  35. <table width="100%">
  36. <tr>
  37. <td valign="top" width="5%">
  38. <i />
  39. </td>
  40. <td valign="top" width="95%">
  41. <div class="msg">
  42. <b>
  43.  
  44. </b>
  45.  
  46.  
  47. <br>
  48. <i> "   s t y l e = " w i d t h :   8 0 % ; "  / &gt;
  49.  
  50. </div>
  51. &lt;/td&gt;
  52. &lt;/tr&gt;
  53. &lt;/table&gt;
  54. &lt;?php }
  55. ?&gt;
  56. &lt;/div&gt;
  57. &lt;/body&gt;
  58. &lt;/html&gt;

Then on the “post-chat.php” file, update it by putting the following codes.

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

Screenshots:

If you have questions about “Create Simple Chatbox w/ Send Photo Feature in PHP/MYSQL” feel free to ask us by commenting below or visit on our contact page. Thank you.

Related Article you may like:

Facebook Comments

LEAVE A REPLY

Please enter your comment!
Please enter your name here