Skip to main content

Social Networking Site: Simple Uploading of Profile Picture in the Home Page


In this tutorial, I’m going to show you how to upload profile picture in the home area, and this profile picture will still be available even your navigating in different pages. To start with this application, open our project in local server and look for the “home.php” and open it. This home page will you show when you successfully logged in. And most of the common functionality and interfacing is available here at home, one is the profile picture.
First inside the  <div class="well">, add the following code:
This code below will do some searching of photo according to the logged in. And some arrangement of our home and different Tabs.

  1. <div class="row">
  2. <div class="col-xs-6 col-md-2">
  3. <!--This Section is for our Profile Picture-->
  4.  
  5.  
  6. </div>
  7.  
  8. <div class="col-xs-12 col-sm-6 col-md-8">
  9. <div class="page-header">
  10.  
  11. </div>
  12. <!---In this area is for our Tab navigation-->
  13. <ul class="nav nav-tabs">
  14. <li class="active">
  15. <a href="#">Wall</a>
  16. </li>
  17. <li>
  18. <a href="info.php">Info</a>
  19. </li>
  20. <li>
  21. <a href="message.php">Messages</a>
  22. </li>
  23. </ul>
  24. <!-- This area will be used for body of our Tabs-->
  25. <h1>Wall</h1>
  26. </div>
  27. </div>

Next, in the section of profile picture. We’re going to add the following code:
This will simply display the image found in the database based on the logged in user and set the image size to 100 in height and 200 in width. Then it closes the loop the fabric loop above. And as you can observe we added also an anchor tag that is linked to a modal. This modal will discuss after this section.

  1. <a data-target="#myModal" data-toggle="modal" href="" title= "Click here to Change Image.">
  2. <?php
  3.  
  4. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}' and pri='yes'");
  5. $cur = $mydb->loadResultList();
  6. if ($mydb->affected_rows()== 0){
  7. echo '<img src="./uploads/p.jpg" class="img-thumbnail" width="200px" height="100px" />';
  8.  
  9. }
  10. foreach($cur as $object){
  11.  
  12. echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail" width="200px" height="100px" />';
  13.  
  14. }
  15. ?> </a>
  16.  

This modal will appear when the user point the mouse and click on the profile picture. and it looks like as shown below:

modal
At this time, we are going to add a modal. We use this modal to enhance our user interfacing and we save creating another page to handle the choosing the images we want to upload. Before we process it. And here’s the following code:

  1. <!-- Modal -->
  2. <div class="modal fade" id="myModal" tabindex="-1">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button class="close" data-dismiss="modal" type=
  7. "button">×</button>
  8.  
  9. <h4 class="modal-title" id="myModalLabel">Choose Your best
  10. picture for your Profile.</h4>
  11. </div>
  12.  
  13. <form action="save_photo.php" enctype="multipart/form-data" method=
  14. "post">
  15. <div class="modal-body">
  16. <div class="form-group">
  17. <div class="rows">
  18. <div class="col-md-12">
  19. <div class="rows">
  20. <div class="col-md-8">
  21. <input name="MAX_FILE_SIZE" type=
  22. "hidden" value="1000000"> <input id=
  23. "upload_file" name="upload_file" type=
  24. "file">
  25. </div>
  26.  
  27. <div class="col-md-4"></div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33.  
  34. <div class="modal-footer">
  35. <button class="btn btn-default" data-dismiss="modal" type=
  36. "button">Close</button> <button class="btn btn-primary"
  37. name="savephoto" type="submit">Save Photo</button>
  38. </div>
  39. </form>
  40. </div><!-- /.modal-content -->
  41. </div><!-- /.modal-dialog -->
  42. </div><!-- /.modal -->

The data here in the Modal will be processed in the “Save_photo.php”. But before we create this new file, let’s add this following code first in under the  <div class="page-header">.

This code will display the first name and the last name of the user who logged in.

  1. <h3><?php echo $_SESSION['fName']. ' '. $_SESSION['lName'];?></h3>

At this time, to process our submitted data, we are going to create a new PHP file named “Save_photo.php”. And add the following code:

  1. <?php
  2. require_once("includes/initialize.php");
  3.  
  4. $upload_errors = array(
  5. UPLOAD_ERR_OK => "No errors.",
  6. UPLOAD_ERR_INI_SIZE => "Larger than upload_max_filesize.",
  7. UPLOAD_ERR_FORM_SIZE => "Larger than form MAX_FILE_SIZE.",
  8. UPLOAD_ERR_PARTIAL => "Partial upload.",
  9. UPLOAD_ERR_NO_FILE => "No file.",
  10. UPLOAD_ERR_NO_TMP_DIR => "No temporary directory.",
  11. UPLOAD_ERR_CANT_WRITE => "Can't write to disk.",
  12. UPLOAD_ERR_EXTENSION => "File upload stopped by extension.",
  13. );
  14. if (isset($_POST['savephoto'])){
  15.  
  16. $tmp_file = $_FILES['upload_file']['tmp_name'];
  17. @$target_file = basename($_FILES['upload_file']['name']);
  18. $upload_dir = "uploads";
  19. $imgsize = $_FILES['upload_file']['size'];
  20. $imgtype = $_FILES['upload_file']['type'];
  21. $member_id = $_SESSION['member_id'];
  22.  
  23. if ($imgtype == "image/jpeg") {
  24.  
  25. if (move_uploaded_file($tmp_file,$upload_dir."/".$target_file)){
  26. global $mydb;
  27.  
  28. $mydb->setQuery("UPDATE `photos` SET `pri`='no' WHERE member_id ='{$member_id}'");
  29. $mydb->executeQuery();
  30.  
  31. $mydb->setQuery("INSERT INTO `photos`(`filename`, `type`, `size`, `member_id`,`pri`)
  32. VALUES ('{$target_file}', '{$imgtype}', '{$imgsize}', '{$member_id}','yes' )");
  33. $mydb->executeQuery();
  34.  
  35. if ($mydb->affected_rows() == 1) {
  36.  
  37. echo "<script type=\"text/javascript\">
  38. alert(\"Primary photo save.\");
  39. window.location='home.php';
  40. </script>";
  41.  
  42. } else{
  43. echo "<script type=\"text/javascript\">
  44. alert(\"Prima photo uploading Failed!\");
  45. </script>";
  46. }
  47.  
  48. //echo "File uploaded Succesfully";
  49.  
  50. }else{
  51. $error = $_FILES['upload_file']['error'];
  52. $message = $upload_errors[$error];
  53. echo "<script type=\"text/javascript\">
  54. alert(\".{$message}.\");
  55.  
  56. </script>";
  57. }
  58.  
  59. } else {
  60. echo "<script type=\"text/javascript\">
  61. alert(\"Invalid Image format.\");
  62. window.location='home.php';
  63. </script>";
  64.  
  65.  
  66. }
  67.  
  68. }
  69. ?>

If you find difficulties in uploading photos, you can review first our previous tutorial called “Uploading files using PHP”.

And here's the database table structure used for this tutorial:

  1. CREATE TABLE IF NOT EXISTS `photos` (
  2. `id` INT(11) NOT NULL AUTO_INCREMENT,
  3. `filename` VARCHAR(255) NOT NULL,
  4. `type` VARCHAR(100) NOT NULL,
  5. `size` INT(11) NOT NULL,
  6. `caption` VARCHAR(255) NOT NULL,
  7. `member_id` INT(11) NOT NULL,
  8. `pri` VARCHAR(12) NOT NULL DEFAULT 'no',
  9. PRIMARY KEY (`id`)
  10. ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=46 ;

And here are the following code used in "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.  
  93. <div class="container">
  94. <div class="well">
  95. <div class="row">
  96. <div class="col-xs-6 col-md-2">
  97. <!--This Section is for our Profile Picture-->
  98. <a data-target="#myModal" data-toggle="modal" href="" title=
  99. "Click here to Change Image.">
  100. <?php
  101.  
  102. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}' and pri='yes'");
  103. $cur = $mydb->loadResultList();
  104. if ($mydb->affected_rows()== 0){
  105. echo '<img src="./uploads/p.jpg" class="img-thumbnail" width="200px" height="100px" />';
  106.  
  107. }
  108. foreach($cur as $object){
  109.  
  110. echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail" width="200px" height="100px" />';
  111.  
  112. }
  113. ?>
  114. </a>
  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.  
  158. </div>
  159.  
  160. <div class="col-xs-12 col-sm-6 col-md-8">
  161. <div class="page-header">
  162.  
  163. </div>
  164. <!---In this area is for our Tab navigation-->
  165. <ul class="nav nav-tabs">
  166. <li class="active">
  167. <a href="#">Wall</a>
  168. </li>
  169. <li>
  170. <a href="info.php">Info</a>
  171. </li>
  172. <li>
  173. <a href="message.php">Messages</a>
  174. </li>
  175. </ul>
  176. <!-- This area will be used for body of our Tabs-->
  177. <h1>Wall</h1>
  178. </div>
  179. </div>
  180. </div>
  181.  
  182.  
  183.  
  184. </body>
  185. </html>
  186.  
  187. <hr>
  188.  
  189. <footer>
  190. <p align="center">&copy; Philsocial 2013</p>
  191. </footer>
  192. </div> <!-- /container -->
  193.  
  194.  
  195. <!-- Bootstrap core JavaScript
  196. ================================================== -->
  197. <!-- Placed at the end of the document so the pages load faster -->
  198. <script src="assets/js/jquery.js"></script>
  199. <script src="js/bootstrap.min.js"></script>
  200. </body>
  201. </html>

 

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.