• We just launched and are currently in beta. Join us as we build and grow the community.

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

chujusajras

Chuckle Catalyst
C
C Rep
0
0
0
Rep
0
C Vouches
0
0
0
Vouches
0
Posts
169
Likes
98
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 200 XP
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

, 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-->


  6. </

    div>

  8. <

    div class

    =

    "col-xs-12 col-sm-6 col-md-8"

    >
  9. <

    div class

    =

    "page-header"

    >

  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

  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" />'

    ;

  9. }
  10. foreach

    (

    $cur

    as

    $object

    )

    {

  12. echo

    '<img src="./uploads/'

    .

    $object

    ->

    filename

    .

    '" class="img-thumbnail" width="200px" height="100px" />'

    ;

  14. }
  15. ?>

    </a>


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

modal.png

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>

  9. <

    h4 class

    =

    "modal-title"

    id=

    "myModalLabel"

    >

    Choose Your best
  10. picture for

    your Profile.</

    h4>
  11. </

    div>

  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>

  27. <

    div class

    =

    "col-md-4"

    ></

    div>
  28. </

    div>
  29. </

    div>
  30. </

    div>
  31. </

    div>
  32. </

    div>

  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

.

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"

    )

    ;

  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'

    ]

    )

    )

    {

  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'

    ]

    ;

  23. if

    (

    $imgtype

    ==

    "image/jpeg"

    )

    {

  25. if

    (

    move_uploaded_file

    (

    $tmp_file

    ,

    $upload_dir

    .

    "/"

    .

    $target_file

    )

    )

    {
  26. global

    $mydb

    ;

  28. $mydb

    ->

    setQuery

    (

    "UPDATE `photos` SET `pri`='no' WHERE member_id ='{$member_id}

    '"

    )

    ;
  29. $mydb

    ->

    executeQuery

    (

    )

    ;

  31. $mydb

    ->

    setQuery

    (

    "INSERT INTO `photos`(`filename`, `type`, `size`, `member_id`,`pri`)
  32. VALUES ('{$target_file}

    ', '{$imgtype}

    ', '{$imgsize}

    ', '{$member_id}

    ','yes' )"

    )

    ;
  33. $mydb

    ->

    executeQuery

    (

    )

    ;

  35. if

    (

    $mydb

    ->

    affected_rows

    (

    )

    ==

    1

    )

    {

  37. echo

    "<script type=\"

    text/javascript\"

    >
  38. alert(\"

    Primary photo save.\"

    );
  39. window.location='home.php';
  40. </script>"

    ;

  42. }

    else

    {
  43. echo

    "<script type=\"

    text/javascript\"

    >
  44. alert(\"

    Prima photo uploading Failed!\"

    );
  45. </script>"

    ;
  46. }

  48. //echo "File uploaded Succesfully";

  50. }

    else

    {
  51. $error

    =

    $_FILES

    [

    'upload_file'

    ]

    [

    'error'

    ]

    ;
  52. $message

    =

    $upload_errors

    [

    $error

    ]

    ;
  53. echo

    "<script type=\"

    text/javascript\"

    >
  54. alert(\"

    .{$message}

    .\"

    );

  56. </script>"

    ;
  57. }

  59. }

    else

    {
  60. echo

    "<script type=\"

    text/javascript\"

    >
  61. alert(\"

    Invalid Image format.\"

    );
  62. window.location='home.php';
  63. </script>"

    ;


  66. }

  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="">

  13. <title>Philsocial</title>

  15. <!-- Bootstrap core CSS -->
  16. <link href="css/bootstrap.css" rel="stylesheet">

  18. <!-- Custom styles for this template -->
  19. <link href="jumbotron.css" rel="stylesheet">

  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>

  32. <body>

  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">

  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">

  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>

  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>

  72. </ul>
  73. </li>
  74. <li class="dropdown">

  76. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>

  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>

  85. </ul>
  86. </li>
  87. </ul>
  88. </form>
  89. </div><!--/.navbar-collapse -->
  90. </div>
  91. </div>

  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

  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" />'

    ;

  107. }
  108. foreach

    (

    $cur

    as

    $object

    )

    {

  110. echo

    '<img src="./uploads/'

    .

    $object

    ->

    filename

    .

    '" class="img-thumbnail" width="200px" height="100px" />'

    ;

  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>

  123. <h4 class="modal-title" id="myModalLabel">Choose Your best
  124. picture for your Profile.</h4>
  125. </div>

  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>

  141. <div class="col-md-4"></div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>

  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 -->

  158. </div>

  160. <div class="col-xs-12 col-sm-6 col-md-8">
  161. <div class="page-header">

  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>



  184. </body>
  185. </html>

  187. <hr>

  189. <footer>
  190. <p align="center">&copy; Philsocial 2013</p>
  191. </footer>
  192. </div> <!-- /container -->


  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>


Download
You must upgrade your account or reply in the thread to view hidden text.
 
You must log in or register to reply here.

452,292

323,526

323,535

R rathi
Top