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

0
342

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 `posts` (
  2.  
  3. `post_id` int(11) NOT NULL,
  4.  
  5. `post_name` text NOT NULL,
  6.  
  7. `post_msg` 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 `comments` (  `comment_id` int(11) NOT NULL,  `post_id` int(11) NOT NULL,  `user_name` text NOT NULL,  `user_comment` 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. <?php
  2.  
  3. $mysqli = new MySQLi('localhost', 'root', '', 'itsourcecode');
  4.  
  5. ?>

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

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

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

  1. <?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->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->error;
  20.  
  21. }
  22.  
  23. }
  24.  
  25. ?>

 

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

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

 

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

 

  1. <?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->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->error;
  22.  
  23. }
  24.  
  25. }
  26.  
  27. ?>

 

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
(Visited 374 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here