Facebook Wall Script Clone (What’s On Your Mind)

Submitted by: 
Language: 
Visitors have accessed this post 3404 times.

In this tutorial I’m going to show you how to add a Facebook-like Activity Stream or commonly known as “What’s on your mind?”. This will application will allow the user to enter their thoughts or and post it into the site wall. To start in this tutorial, we’re going to set up first our database table. And this table name comment, and here’s the table structure.

  1. CREATE TABLE IF NOT EXISTS `comments` (
  2. `id` INT(11) NOT NULL AUTO_INCREMENT,
  3. `comment_id` INT(11) NOT NULL,
  4. `content` text NOT NULL,
  5. `author` VARCHAR(255) NOT NULL,
  6. `to` INT(11) NOT NULL,
  7. `created` datetime NOT NULL,
  8. PRIMARY KEY (`id`)
  9. ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=20 ;

Next, open the home.php file. Then under the Navigation Tab, and inside the well class. Add the following code:

This code will display the panel with accordion that extend the panel component. This will be available when the user click the Update Status link. And this panel also holds our form and text area for the some comment or share post of the user.

  1. input type="hidden" name="comment_id" value="<?php echo $_SESSION['member_id']; ?>">
  2. <input type="hidden" name="author" value="<?php echo $_SESSION['fName']. ' '. $_SESSION['lName']; ?>">
  3. <input type="hidden" name="to" value="<?php echo $_SESSION['member_id']; ?>">
  4. <textarea class="form-control" name="content" placeholder="What's on your mind?"></textarea>
  5.  
  6. </div>
  7. <div class="panel-footer" align="right">
  8. <button class="btn btn-primary btn-sm" type="submit" name="share">Share</button>
  9. </div>
  10. </div>
  11. </form>
  12. </div>
  13. </div>

After adding the code inside the well class, we will test it using our browser. And it should look like as shown below.

screenshot

Next, we’re going to create a new PHP file called “save_post.php”. And this file will process the submitted data of the user and save it to the database. And the following code:

  1. <?php
  2. require_once("includes/initialize.php");
  3.  
  4. $comment_id = $_POST['comment_id'];
  5. $content = $_POST['content'];
  6. $author = $_POST['author'];
  7. $destination = $_POST['to'];
  8. $created = strftime("%Y-%m-%d %H:%M:%S", time());
  9.  
  10.  
  11. global $mydb;
  12. $mydb->setQuery("INSERT INTO `philsocialdb`.`comments` (`id`, `comment_id`, `content`, `author`, `to`, `created`)
  13. VALUES (NULL, '{$comment_id}', '{$content}', '{$author}', '{$destination}', '{$created}');");
  14. $mydb->executeQuery();
  15.  
  16. if ($mydb->affected_rows() == 1) {
  17.  
  18. echo "<script type=\"text/javascript\">
  19. //alert(\"Comment created successfully.\");
  20. window.location='home.php';
  21. </script>";
  22.  
  23. } else{
  24. echo "<script type=\"text/javascript\">
  25. alert(\"Comment creation Failed!\");
  26. </script>";
  27. }
  28.  
  29.  
  30. ?>

At this time, we will now add code for listing the user post on the social networking site wall. And here’s the following code:

  1. <?php
  2. global $mydb;
  3. $mydb->setQuery("SELECT * from comments where comment_id=".$_SESSION['member_id']." ORDER BY created DESC");
  4. $cur = $mydb->loadResultList();
  5.  
  6. echo '<div class="table table-responsive" border="0">';
  7. echo '<table>';
  8. echo '<tr>';
  9.  
  10. foreach ($cur as $comm){
  11. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  12. $propic = $mydb->loadResultList();
  13. if ($mydb->affected_rows()== 0){
  14. echo '<td rowspan="2" width="70px" height="70px"><img src="./uploads/p.jpg" class="img-object" width="50px" height=50px" /></td>';
  15.  
  16. }
  17. foreach ($propic as $obj){
  18. echo '<td rowspan="2" width="70px" height="70px">';
  19. echo '<img src="./uploads/'. $obj->filename.'" class="img-object" width="50px" height="50px" />';
  20. echo '</td>';
  21. }
  22. echo '</tr>';
  23.  
  24. echo '<tr>';
  25. echo '<td><strong><a href="home.php?id='.$_SESSION['member_id'].'">'.$comm->author.'</a></strong>';
  26. echo '<br/>'.$comm->content.'</td>';
  27. echo '</tr>';
  28.  
  29. }
  30. echo '</table>';
  31. ?>

When you finish adding the code above, you can test it and it will look like as shown below:

s2

After completing the code above, here’s all 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" width="70px" height="70px"><img src="./uploads/p.jpg" class="img-object" width="50px" height=50px" /></td>';
  218.  
  219. }
  220. foreach ($propic as $obj){
  221. echo '<td rowspan="2" width="70px" height="70px">';
  222. echo '<img src="./uploads/'. $obj->filename.'" class="img-object" width="50px" height="50px" />';
  223. echo '</td>';
  224. }
  225. echo '</tr>';
  226.  
  227. echo '<tr>';
  228. echo '<td><strong><a href="home.php?id='.$_SESSION['member_id'].'">'.$comm->author.'</a></strong>';
  229. echo '<br/>'.$comm->content.'</td>';
  230. echo '</tr>';
  231.  
  232. }
  233. echo '</table>';
  234. ?>
  235.  
  236. </div>
  237.  
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242.  
  243.  
  244.  
  245. </body>
  246. </html>
  247.  
  248. <hr>
  249.  
  250. </div> <!-- /container -->
  251. <footer>
  252. <p align="center">&copy; Philsocial 2013</p>
  253. </footer>
  254. <!-- Bootstrap core JavaScript
  255. ================================================== -->
  256. <!-- Placed at the end of the document so the pages load faster -->
  257. <script src="assets/js/tooltip.js"></script>
  258. <script src="assets/js/jquery.js"></script>
  259. <script src="js/bootstrap.min.js"></script>
  260. </body>
  261. </html>

Comments

how can I remove that error "Fatal error: Call to a member function setQuery() on a non-object in C:\xampp\htdocs\carlos\home.php on line 83"?

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.