Simple Posting Status Updates With Comment Like Facebook Using PHP/MYSQL

0
436

This is a simple tutorial for creating a Posting Status Updates with Comment Like Facebook Using PHP/MySQL. But not only for posting, in this tutorial will you also learn on how to create a comment on the post being posted. This tutorial also contains a very easy to customize cascading style sheet (CSS).

 

Let’s start our tutorial.

Posting Status Updates with Comment Like Facebook Using PHP/MySQL Steps:

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

 

Then create table then name it as “posts” then put the following attributes.

  1. CREATE TABLE <code>posts</code> (
  2.  
  3. <code>post_id</code> int(11) NOT NULL,
  4.  
  5. <code>post_name</code> text NOT NULL,
  6.  
  7. <code>post_msg</code> text NOT NULL
  8.  
  9. ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

 

Create another table then name it as “comments” then put the following attributes.

  1. CREATE TABLE <code>comments</code> (  <code>comment_id</code> int(11) NOT NULL,  <code>post_id</code> int(11) NOT NULL,  <code>user_name</code> text NOT NULL,  <code>user_comment</code> text NOT NULL) ENGINE=MyISAM DEFAULT CHARSET=latin1;

For the CSS, create a “styles.css” file then put the following CSS codes.

  1. body {
  2.  
  3. background-color: #5E5E5E;
  4.  
  5. color: #000000;
  6.  
  7. width: 70%;
  8.  
  9. margin: auto;
  10.  
  11. font: 15px Calibri;
  12.  
  13. padding-top: 20px;
  14.  
  15. }
  16.  
  17. .body {
  18.  
  19. background-color: #E5E5E5;
  20.  
  21. padding: 10px;
  22.  
  23. margin-top: 5px;
  24.  
  25. }
  26.  
  27. textarea {
  28.  
  29. background-color: #ffffff;
  30.  
  31. padding: 10px;
  32.  
  33. border-radius: 3px;
  34.  
  35. border: 1px solid #c0c0c0;
  36.  
  37. margin: 3px;
  38.  
  39. margin-bottom: 0px;
  40.  
  41. }
  42.  
  43. input[name='uname'] {
  44.  
  45. background-color: #ffffff;
  46.  
  47. padding: 10px;
  48.  
  49. border-radius: 3px;
  50.  
  51. margin: 3px;
  52.  
  53. margin-bottom: 4px;
  54.  
  55. margin-top: 0px;
  56.  
  57. border: 1px solid #c0c0c0;
  58.  
  59. width: 154px;
  60.  
  61. }
  62.  
  63. .post-panel {
  64.  
  65. background-color: #FFFFFF;
  66.  
  67. border: 1px solid #c0c0c0;
  68.  
  69. margin-bottom: 10px;
  70.  
  71. border-radius: 5px;
  72.  
  73. }
  74.  
  75. .post-header {
  76.  
  77. padding: 10px;
  78.  
  79. }
  80.  
  81. .post-body {
  82.  
  83. padding: 10px;
  84.  
  85. border-top: 1px solid #c0c0c0;
  86.  
  87. }
  88.  
  89. .post-footer {
  90.  
  91. padding: 10px;
  92.  
  93. border-top: 1px solid #c0c0c0;
  94.  
  95. }
  96.  
  97. input[type='submit'] {
  98.  
  99. background-color: #FFFFFF;
  100.  
  101. border: 1px solid #c0c0c0;
  102.  
  103. padding: 10px;
  104.  
  105. border-radius: 3px;
  106.  
  107. margin: 3px;
  108.  
  109. margin-top: 0px;
  110.  
  111. }
  112.  
  113. a {
  114.  
  115. color: #0005FF;
  116.  
  117. text-decoration: none;
  118.  
  119. }

 

For the connection to the database.  Create a “connection.php” file then put the following codes.

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

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

  1. &lt;?php include ("connection.php");?&gt;
  2.  
  3. &lt;!doctype html&gt;
  4.  
  5. &lt;html&gt;
  6.  
  7. &lt;head&gt;
  8.  
  9. &lt;meta charset="utf-8"&gt;
  10.  
  11. &lt;title&gt;Comment to Post&lt;/title&gt;
  12.  
  13. &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
  14.  
  15. &lt;/head&gt;
  16.  
  17. &lt;body&gt;
  18.  
  19. &lt;div class="body"&gt;
  20.  
  21. Simple Posting Updates With Comment in PHP and MYSQL
  22.  
  23. &lt;/div&gt;
  24.  
  25. &lt;div class="body"&gt;
  26.  
  27. &lt;form method="post" action="post-action.php"&gt;
  28.  
  29. &lt;label&gt;Add Post:&lt;/label&gt;&lt;br&gt;
  30.  
  31. &lt;textarea name="post_msg" required&gt;&lt;/textarea&gt;&lt;br&gt;
  32.  
  33. &lt;input type="text" name="uname" placeholder="type your name here..." required /&gt;&lt;br&gt;
  34.  
  35. &lt;input type="submit" name="post" value="Post" /&gt;
  36.  
  37. &lt;/form&gt;
  38.  
  39. &lt;?php
  40.  
  41. if (isset($_GET['post_action'])) {
  42.  
  43. if ($_GET['post_action'] == "posted") {
  44.  
  45. echo 'Successfully Posted!';
  46.  
  47. }
  48.  
  49. }
  50.  
  51. ?&gt;
  52.  
  53. &lt;/div&gt;
  54.  
  55. &lt;?php
  56.  
  57. $posts = $mysqli-&gt;query("SELECT * FROM posts ORDER BY post_id DESC");
  58.  
  59. ?&gt;
  60.  
  61. &lt;div class="body"&gt;
  62.  
  63. &lt;b&gt;&lt;?php echo $posts-&gt;num_rows ?&gt;&lt;/b&gt; total posts
  64.  
  65. &lt;/div&gt;
  66.  
  67. &lt;div class="body" style="padding-bottom: 1px;"&gt;
  68.  
  69. &lt;?php
  70.  
  71. if ($posts-&gt;num_rows == null) {
  72.  
  73. echo 'no posts yet';
  74.  
  75. } else if ($posts-&gt;num_rows != null) {
  76.  
  77. while ($post_data = $posts-&gt;fetch_assoc()) { ?&gt;
  78.  
  79. &lt;div class="post-panel"&gt;
  80.  
  81. &lt;div class="post-header"&gt;
  82.  
  83. &lt;b&gt;&lt;?php echo $post_data['post_name'] ?&gt;&lt;/b&gt;
  84.  
  85. &lt;/div&gt;
  86.  
  87. &lt;div class="post-body"&gt;
  88.  
  89. &lt;?php echo $post_data['post_msg'] ?&gt;
  90.  
  91. &lt;/div&gt;
  92.  
  93. &lt;?php
  94.  
  95. $comments = $mysqli-&gt;query("SELECT * FROM comments WHERE post_id = ".$post_data['post_id']."");
  96.  
  97. ?&gt;
  98.  
  99. &lt;div class="post-footer"&gt;
  100.  
  101. &lt;a href="view-post.php?post_id=&lt;?php echo $post_data['post_id'] ?&gt;"&gt;Comment (&lt;?php echo $comments-&gt;num_rows ?&gt;)&lt;/a&gt;
  102.  
  103. &lt;/div&gt;
  104.  
  105. &lt;/div&gt;
  106.  
  107. &lt;?php }
  108.  
  109. }
  110.  
  111. ?&gt;
  112.  
  113. &lt;/div&gt;
  114.  
  115. &lt;/body&gt;
  116.  
  117. &lt;/html&gt;

For posting, create a “post-action.php” file then put the following codes.

  1. &lt;?php
  2.  
  3. include ("connection.php");
  4.  
  5. if (isset($_POST['post'])) {
  6.  
  7. $post_msg = $_POST['post_msg'];
  8.  
  9. $uname = $_POST['uname'];
  10.  
  11. $post = $mysqli-&gt;query("INSERT INTO posts (post_name, post_msg) VALUES ('$uname', '$post_msg')");
  12.  
  13. if ($post) {
  14.  
  15. header("Location: index.php?post_action=posted");
  16.  
  17. } else {
  18.  
  19. echo $mysqli-&gt;error;
  20.  
  21. }
  22.  
  23. }
  24.  
  25. ?&gt;

 

For viewing and commenting on the post, create a “view-post.php” file then put the following codes.

  1. &lt;?php
  2.  
  3. include ("connection.php");
  4.  
  5. if (isset($_GET['post_id'])) {
  6.  
  7. $id = $_GET['post_id'];
  8.  
  9. $post = $mysqli-&gt;query("SELECT * FROM posts WHERE post_id = $id");
  10.  
  11. $post_data = $post-&gt;fetch_assoc();
  12.  
  13. } else {
  14.  
  15. header("Location: index.php");
  16.  
  17. }
  18.  
  19. ?&gt;
  20.  
  21. &lt;!doctype html&gt;
  22.  
  23. &lt;html&gt;
  24.  
  25. &lt;head&gt;
  26.  
  27. &lt;meta charset="utf-8"&gt;
  28.  
  29. &lt;title&gt;&lt;?php echo $post_data['post_name'] ?&gt;'s Status Update&lt;/title&gt;
  30.  
  31. &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
  32.  
  33. &lt;/head&gt;
  34.  
  35. &nbsp;
  36.  
  37. &lt;body&gt;
  38.  
  39. &lt;div class="body"&gt;
  40.  
  41. &lt;a href="index.php"&gt;Home&lt;/a&gt; | &lt;b&gt;&lt;?php echo $post_data['post_name'] ?&gt;'&lt;/b&gt;s Status Update
  42.  
  43. &lt;/div&gt;
  44.  
  45. &lt;div class="body"&gt;
  46.  
  47. &lt;div class="post-panel"&gt;
  48.  
  49. &lt;div class="post-body" style="border: none;"&gt;
  50.  
  51. &lt;?php echo $post_data['post_msg'] ?&gt;
  52.  
  53. &lt;/div&gt;
  54.  
  55. &lt;div class="post-footer"&gt;
  56.  
  57. &lt;?php
  58.  
  59. $comments = $mysqli-&gt;query("SELECT * FROM comments WHERE post_id = $id");
  60.  
  61. ?&gt;
  62.  
  63. &lt;b&gt;&lt;?php echo $comments-&gt;num_rows ?&gt;&lt;/b&gt; total comments&lt;br&gt;&lt;br&gt;
  64.  
  65. &lt;?php
  66.  
  67. while ($comment_data = $comments-&gt;fetch_assoc()) { ?&gt;
  68.  
  69. &lt;div class="post-panel"&gt;
  70.  
  71. &lt;div class="post-header"&gt;
  72.  
  73. &lt;b&gt;&lt;?php echo $comment_data['user_name'] ?&gt;&lt;/b&gt;
  74.  
  75. &lt;/div&gt;
  76.  
  77. &lt;div class="post-body"&gt;
  78.  
  79. &lt;?php echo $comment_data['user_comment'] ?&gt;
  80.  
  81. &lt;/div&gt;
  82.  
  83. &lt;/div&gt;
  84.  
  85. &lt;?php }
  86.  
  87. ?&gt;
  88.  
  89. &lt;form method="post" action="comment-action.php?post_id=&lt;?php echo $id ?&gt;"&gt;
  90.  
  91. &lt;label&gt;Quick Comment:&lt;/label&gt;&lt;br&gt;
  92.  
  93. &lt;textarea name="comment" required&gt;&lt;/textarea&gt;&lt;br&gt;
  94.  
  95. &lt;input type="text" name="uname" placeholder="enter your name here..." required /&gt;&lt;br&gt;
  96.  
  97. &lt;input type="submit" name="post_comment" /&gt;
  98.  
  99. &lt;/form&gt;
  100.  
  101. &lt;/div&gt;
  102.  
  103. &lt;/div&gt;
  104.  
  105. &lt;/div&gt;
  106.  
  107. &lt;/body&gt;
  108.  
  109. &lt;/html&gt;

 

For posting a comment on the post, create a “comment-action.php” file then put the following codes.

 

  1. &lt;?php
  2.  
  3. include 'connection.php';
  4.  
  5. if (isset($_POST['post_comment'])) {
  6.  
  7. $post_id = $_GET['post_id'];
  8.  
  9. $comment = $_POST['comment'];
  10.  
  11. $uname = $_POST['uname'];
  12.  
  13. $comment = $mysqli-&gt;query("INSERT INTO comments (post_id, user_name, user_comment) VALUES ($post_id, '$uname', '$comment')");
  14.  
  15. if ($comment) {
  16.  
  17. header("Location: view-post.php?post_id=$post_id");
  18.  
  19. } else {
  20.  
  21. echo $mysqli-&gt;error;
  22.  
  23. }
  24.  
  25. }
  26.  
  27. ?&gt;

 

If you have any questions or suggestion about Posting Status Updates with Comment Like Facebook Using PHP/MySQL, please feel free to contact me at our contact page.

Facebook Comments

LEAVE A REPLY

Please enter your comment!
Please enter your name here