Social Networking Site: Adding a Sub-comment to a Specific Post

This tutorial is a continuation of our previous topic called “Facebook Wall Script Clone(What’s On Your Mind)”. But this time, we’re going to focus on how to add a sub comment in every shared post of a user. To start with this tutorial, create first a table in your database called “subcomment” and here’s the table structure of this table.
  1. CREATE TABLE IF NOT EXISTS `subcomment` (
  2. `subc_id` INT(11) NOT NULL AUTO_INCREMENT,
  3. `comment_id` INT(11) NOT NULL,
  4. `subauthor` VARCHAR(255) NOT NULL,
  5. `subcontent` text NOT NULL,
  6. `created` datetime NOT NULL,
  7. PRIMARY KEY (`subc_id`)
  8. ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
Then, let's open the home.php file, and on the last part of our code used for displaying the Post of every user. Or after this line of code  echo '<br/><p>'.$comm->content.'</p><br/>';, add the following code: This code is used for displaying a text input for adding a new sub comment.
  1. echo '<table border="0">';
  2. /* this area is for listing of sub-comment*/
  3.  
  4. echo '<tr>';
  5. echo '<form action="save_subcomm.php" method="post">';
  6. echo '<input name="commentid" type="hidden" value="'. $comm->id .'">';
  7. echo '<input name="subauthor" type="hidden" value="'. $_SESSION['fName']. ' '. $_SESSION['lName'] .'">';
  8.  
  9. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  10. $propic = $mydb->loadResultList();
  11. if ($mydb->affected_rows()== 0){
  12. echo '<td><img src="./uploads/p.jpg" class="img-object" width="30px" height=30px" /></td>';
  13.  
  14. }
  15. foreach ($propic as $obj){
  16. echo '<td >';
  17. echo '<img src="./uploads/'. $obj->filename.'" class="img-object" width="30px" height="30px" />';
  18. echo '</td>';
  19. }
  20.  
  21. echo '<td><input name="subcontent" type="text" style="width: 370px;" class="form-control" placeholder="Write a comment...">';
  22. echo '</form>';
  23. echo '</tr>';
  24. echo '</table>';
When you test the code above, it will look like as shown below: Next, we’re going to create a new PHP file called “save_subcomm.php”. This file will process the submitted data by the user and store into the database table name subcommittee. And here’s the following code:
  1. <?php
  2. require_once("includes/initialize.php");
  3.  
  4. $comment_id = $_POST['commentid'];
  5. $content = $_POST['subcontent'];
  6. $author = $_POST['subauthor'];
  7. $created = strftime("%Y-%m-%d %H:%M:%S", time());
  8.  
  9.  
  10. global $mydb;
  11. $mydb->setQuery("INSERT INTO `philsocialdb`.`subcomment` (`subc_id`, `comment_id`, `subauthor`, `subcontent`, `created`)
  12. VALUES (NULL, '{$comment_id}', '{$author}', '{$content}', '{$created}');");
  13. $mydb->executeQuery();
  14.  
  15. if ($mydb->affected_rows() == 1) {
  16.  
  17. echo "<script type=\"text/javascript\">
  18. //alert(\"Comment created successfully.\");
  19. window.location='home.php';
  20. </script>";
  21.  
  22. } else{
  23. echo "<script type=\"text/javascript\">
  24. alert(\"Comment creation Failed!\");
  25. </script>";
  26. }
  27.  
  28.  
  29. ?>
Then after saving the sub comment in the database, we’re now going to display a list of a sub comment under the specific post of a user. To do this, add the following code in the area we provided under the table tag for adding a new sub comment.
  1. /* this area is for listing of sub-comment*/
  2. $mydb->setQuery("SELECT * FROM `subcomment` WHERE `comment_id` = ".$comm->id );
  3. $sub = $mydb->loadResultList();
  4. foreach ($sub as $subcomm){
  5. echo '<tr>';
  6.  
  7. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  8. $propic = $mydb->loadResultList();
  9. if ($mydb->affected_rows()== 0){
  10. echo '<td><img src="./uploads/p.jpg" class="img-object" width="30px" height=40px" /></td>';
  11.  
  12. }
  13. foreach ($propic as $obj){
  14. echo '<td >';
  15. echo '<img src="./uploads/'. $obj->filename.'" class="img-object" width="30px" height="40px" />';
  16. echo '</td>';
  17. }
  18. echo '<td><a href="home.php?id='.$_SESSION['member_id'].'">'.$comm->author.'</a>';
  19. echo '<br/><p>'.$subcomm->subcontent .'</p></td>';
  20. echo '</tr>';
And after executing this code, you can test it in your browser and it will look like as shown below. Here’s now the code for home.php.
  1. <?php
  2. require_once("includes/initialize.php");
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <meta name="description" content="">
  10. <meta name="author" content="">
  11. <link rel="shortcut icon" href="">
  12.  
  13. <title>Philsocial</title>
  14.  
  15. <!-- Bootstrap core CSS -->
  16. <link href="css/bootstrap.css" rel="stylesheet">
  17.  
  18. <!-- Custom styles for this template -->
  19. <link href="jumbotron.css" rel="stylesheet">
  20.  
  21. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  22. <!--[if lt IE 9]>
  23. <script src="../../assets/js/html5shiv.js"></script>
  24. <script src="../../assets/js/respond.min.js"></script>
  25. <![endif]-->
  26. <?php
  27. //login confirmation
  28. confirm_logged_in();
  29. ?>
  30. </head>
  31.  
  32. <body>
  33.  
  34. <div class="navbar navbar-inverse navbar-fixed-top">
  35. <div class="container">
  36. <div class="navbar-header">
  37. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  38. <span class="icon-bar"></span>
  39. <span class="icon-bar"></span>
  40. <span class="icon-bar"></span>
  41. </button>
  42. <a class="navbar-brand" href="home.php"><B>Philsocial</B></a>
  43. </div>
  44. <form class="navbar-form navbar-left">
  45. <div class="form-group">
  46. <div class="rows">
  47. <input type="text" placeholder="Email" class="form-control" size="40">
  48. </div>
  49. </div>
  50. </form>
  51. <div class="navbar-collapse collapse">
  52.  
  53. <form class="navbar-form navbar-right">
  54. <ul class="nav navbar-nav">
  55. <li class="active"><a href="home.php">Home</a></li>
  56. <li class="dropdown">
  57.  
  58. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  59. <?php
  60. //retrieve session variable
  61. echo $_SESSION['fName'];?>
  62. <b class="caret"></b>
  63. </a>
  64.  
  65. <ul class="dropdown-menu">
  66. <li><a href="#">My Profile</a></li>
  67. <li><a href="#">Edit profile</a></li>
  68. <li><a href="#">Edit profile Picture</a></li>
  69. <li><a href="#">Customize profile</a></li>
  70. <li><a href="#">Edit Work and Education</a></li>
  71.  
  72. </ul>
  73. </li>
  74. <li class="dropdown">
  75.  
  76. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>
  77.  
  78. <ul class="dropdown-menu">
  79. <li><a href="#">Account Settings</a></li>
  80. <li><a href="#">Privacy Settings</a></li>
  81. <li><a href="#">Manage Social Accounts</a></li>
  82. <li><a href="#">Manage Credits</a></li>
  83. <li><a href="logout.php">Logout</a></li>
  84.  
  85. </ul>
  86. </li>
  87. </ul>
  88. </form>
  89. </div><!--/.navbar-collapse -->
  90. </div>
  91. </div>
  92. <div class="container">
  93. <div class="well">
  94.  
  95. <div class="row">
  96. <div class="col-xs-6 col-md-2">
  97. <a data-target="#myModal" data-toggle="modal" href="" title=
  98. "Click here to Change Image.">
  99. <?php
  100.  
  101. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  102. $cur = $mydb->loadResultList();
  103. if ($mydb->affected_rows()== 0){
  104. echo '<img src="./uploads/p.jpg" class="img-thumbnail" width="200px" height="100px" />';
  105.  
  106. }
  107. foreach($cur as $object){
  108.  
  109. echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail" width="200px" height="100px" />';
  110.  
  111. }
  112. ?>
  113. </a>
  114.  
  115. <!-- Modal -->
  116. <div class="modal fade" id="myModal" tabindex="-1">
  117. <div class="modal-dialog">
  118. <div class="modal-content">
  119. <div class="modal-header">
  120. <button class="close" data-dismiss="modal" type=
  121. "button">×</button>
  122.  
  123. <h4 class="modal-title" id="myModalLabel">Choose Your best
  124. picture for your Profile.</h4>
  125. </div>
  126.  
  127. <form action="save_photo.php" enctype="multipart/form-data" method=
  128. "post">
  129. <div class="modal-body">
  130. <div class="form-group">
  131. <div class="rows">
  132. <div class="col-md-12">
  133. <div class="rows">
  134. <div class="col-md-8">
  135. <input name="MAX_FILE_SIZE" type=
  136. "hidden" value="1000000"> <input id=
  137. "upload_file" name="upload_file" type=
  138. "file">
  139. </div>
  140.  
  141. <div class="col-md-4"></div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147.  
  148. <div class="modal-footer">
  149. <button class="btn btn-default" data-dismiss="modal" type=
  150. "button">Close</button> <button class="btn btn-primary"
  151. name="savephoto" type="submit">Save Photo</button>
  152. </div>
  153. </form>
  154. </div><!-- /.modal-content -->
  155. </div><!-- /.modal-dialog -->
  156. </div><!-- /.modal -->
  157. </div>
  158.  
  159. <div class="col-xs-12 col-sm-6 col-md-8">
  160. <div class="page-header">
  161. <h3><?php echo $_SESSION['fName']. ' '. $_SESSION['lName'];?></h3>
  162. </div>
  163.  
  164. <ul class="nav nav-tabs">
  165. <li class="active">
  166. <a href="#">Wall</a>
  167. </li>
  168.  
  169. <li>
  170. <a href="info.php">Info</a>
  171. </li>
  172.  
  173. <li>
  174. <a href="message.php">Messages</a>
  175. </li>
  176. </ul>
  177. <div class="well">
  178. <div class="panel-group" id="accordion">
  179. <div class="panel panel-primary">
  180. <div class="panel-heading">
  181. <h5 class="panel-title">
  182. <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" title="What's on your mind?">
  183. Update Status
  184. </a>
  185. </h5>
  186. </div>
  187.  
  188. <form action="save_post.php" method="POST">
  189. <div id="collapseOne" class="panel-collapse collapse">
  190. <div class="panel-body">
  191. <input type="hidden" name="comment_id" value="<?php echo $_SESSION['member_id']; ?>">
  192. <input type="hidden" name="author" value="<?php echo $_SESSION['fName']. ' '. $_SESSION['lName']; ?>">
  193. <input type="hidden" name="to" value="<?php echo $_SESSION['member_id']; ?>">
  194. <textarea class="form-control" name="content" placeholder="What's on your mind?"></textarea>
  195.  
  196. </div>
  197. <div class="panel-footer" align="right">
  198. <button class="btn btn-primary btn-sm" type="submit" name="share">Share</button>
  199. </div>
  200. </div>
  201. </form>
  202. </div>
  203. </div>
  204. <?php
  205. global $mydb;
  206. $mydb->setQuery("SELECT * from comments where comment_id=".$_SESSION['member_id']." ORDER BY created DESC");
  207. $cur = $mydb->loadResultList();
  208.  
  209. echo '<div class="table table-responsive" border="0">';
  210. echo '<table>';
  211. echo '<tr>';
  212.  
  213. foreach ($cur as $comm){
  214. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  215. $propic = $mydb->loadResultList();
  216. if ($mydb->affected_rows()== 0){
  217. echo '<td rowspan="2"><img src="./uploads/p.jpg" class="img-object" width="50px" height=60px" /></td>';
  218.  
  219. }
  220. foreach ($propic as $obj){
  221. echo '<td rowspan="2">';
  222. echo '<img src="./uploads/'. $obj->filename.'" class="img-object" width="50px" height="60px" />';
  223. echo '</td>';
  224. }
  225. echo '</tr>';
  226.  
  227. echo '<tr>';
  228.  
  229. echo '<td><strong><a href="home.php?id='.$_SESSION['member_id'].'">'.$comm->author.'</a></strong>';
  230.  
  231. echo '<br/><p>'.$comm->content.'</p><br/>';
  232.  
  233. echo '<table border="0">';
  234. /* this area is for listing of sub-comment*/
  235. $mydb->setQuery("SELECT * FROM `subcomment` WHERE `comment_id` = ".$comm->id );
  236. $sub = $mydb->loadResultList();
  237. foreach ($sub as $subcomm){
  238. echo '<tr>';
  239.  
  240. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  241. $propic = $mydb->loadResultList();
  242. if ($mydb->affected_rows()== 0){
  243. echo '<td><img src="./uploads/p.jpg" class="img-object" width="30px" height=40px" /></td>';
  244.  
  245. }
  246. foreach ($propic as $obj){
  247. echo '<td >';
  248. echo '<img src="./uploads/'. $obj->filename.'" class="img-object" width="30px" height="40px" />';
  249. echo '</td>';
  250. }
  251. echo '<td><a href="home.php?id='.$_SESSION['member_id'].'">'.$comm->author.'</a>';
  252. echo '<br/><p>'.$subcomm->subcontent .'</p></td>';
  253. echo '</tr>';
  254.  
  255.  
  256.  
  257. }
  258.  
  259. //This area is for creating a new comment
  260.  
  261. echo '<tr>';
  262. echo '<form action="save_subcomm.php" method="post">';
  263. echo '<input name="commentid" type="hidden" value="'. $comm->id .'">';
  264. echo '<input name="subauthor" type="hidden" value="'. $_SESSION['fName']. ' '. $_SESSION['lName'] .'">';
  265.  
  266. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  267. $propic = $mydb->loadResultList();
  268. if ($mydb->affected_rows()== 0){
  269. echo '<td><img src="./uploads/p.jpg" class="img-object" width="30px" height=30px" /></td>';
  270.  
  271. }
  272. foreach ($propic as $obj){
  273. echo '<td >';
  274. echo '<img src="./uploads/'. $obj->filename.'" class="img-object" width="30px" height="30px" />';
  275. echo '</td>';
  276. }
  277.  
  278. echo '<td><input name="subcontent" type="text" style="width: 370px;" class="form-control" placeholder="Write a comment...">';
  279. echo '</form>';
  280. echo '</tr>';
  281. echo '</table>';
  282. //echo '</div>';
  283. /*
  284. End of New sub comment.
  285. */
  286. echo '</div>';
  287. echo '</div>';
  288. echo '</tr>';
  289.  
  290.  
  291. }
  292. echo '</table>';
  293. ?>
  294.  
  295. </div>
  296.  
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301.  
  302.  
  303.  
  304. </body>
  305. </html>
  306.  
  307. <hr>
  308.  
  309. </div> <!-- /container -->
  310. <footer>
  311. <p align="center">&copy; Philsocial 2013</p>
  312. </footer>
  313. <!-- Bootstrap core JavaScript
  314. ================================================== -->
  315. <!-- Placed at the end of the document so the pages load faster -->
  316. <script src="js/tooltip.js"></script>
  317. <script src="assets/js/jquery.js"></script>
  318. <script src="js/bootstrap.min.js"></script>
  319. <script src="js/popover.js"></script>
  320.  
  321.  
  322. </body>
  323. </html>

Comments

Submitted bykefasi jaravaza (not verified)on Fri, 09/22/2017 - 20:44

the code is awesome

Add new comment