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

[qrzba]

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.

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(\"
    
    );
    
20. window.location='home.php';
    
21. </script>"
    
    ;
    
22. 
    
23. }
    
    else
    
    {
    
24. echo
    
    "<script type=\"
    
    text/javascript\"
    
    >
    
25. alert(\"
    
    );
    
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:

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>