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

Submitted by GeePee on Friday, April 17, 2015 - 23:46.

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.

<div class="row">
                                <div class="col-xs-6 col-md-2">
                                        <!--This Section is for our Profile Picture-->          
 
                                        
                                </div>
 
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                        <div class="page-header">
                                                
                                        </div>
                                        <!---In this area is for our Tab navigation-->
                                        <ul class="nav nav-tabs">
                                                <li class="active">
                                                        <a href="#">Wall</a>
                                                </li>
                                                <li>
                                                        <a href="info.php">Info</a>
                                                </li>
                                                <li>
                                                        <a href="message.php">Messages</a>
                                                </li>
                                        </ul>
                                <!-- This area will be used for body of our Tabs-->     
                                        <h1>Wall</h1>
                                </div>
                        </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.

<a data-target="#myModal" data-toggle="modal" href="" title=    "Click here to Change Image.">
                <?php
                                
                                $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}' and pri='yes'");
                                $cur = $mydb->loadResultList();
                                if ($mydb->affected_rows()== 0){
                                        echo '<img src="./uploads/p.jpg" class="img-thumbnail" width="200px" height="100px" />';        
                                
                                } 
                                foreach($cur as $object){
                                   
                                                echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail" width="200px" height="100px" />';
                                        
                                        }       
                                ?>      </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

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:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                        <button class="close" data-dismiss="modal" type=
                        "button">×</button>
 
                        <h4 class="modal-title" id="myModalLabel">Choose Your best
                        picture for your Profile.</h4>
                </div>
 
                <form action="save_photo.php" enctype="multipart/form-data" method=
                "post">
                        <div class="modal-body">
                                <div class="form-group">
                                        <div class="rows">
                                                <div class="col-md-12">
                                                        <div class="rows">
                                                                <div class="col-md-8">
                                                                        <input name="MAX_FILE_SIZE" type=
                                                                        "hidden" value="1000000"> <input id=
                                                                        "upload_file" name="upload_file" type=
                                                                        "file">
                                                                </div>
 
                                                                <div class="col-md-4"></div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
 
                        <div class="modal-footer">
                                <button class="btn btn-default" data-dismiss="modal" type=
                                "button">Close</button> <button class="btn btn-primary"
                                name="savephoto" type="submit">Save Photo</button>
                        </div>
                </form>
        </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</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.

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

<?php
require_once("includes/initialize.php");        
 
$upload_errors = array(
UPLOAD_ERR_OK         => "No errors.",
UPLOAD_ERR_INI_SIZE       => "Larger than upload_max_filesize.",
UPLOAD_ERR_FORM_SIZE  => "Larger than form MAX_FILE_SIZE.",
UPLOAD_ERR_PARTIAL        => "Partial upload.",
UPLOAD_ERR_NO_FILE    => "No file.",
UPLOAD_ERR_NO_TMP_DIR => "No temporary directory.",
UPLOAD_ERR_CANT_WRITE => "Can't write to disk.",
UPLOAD_ERR_EXTENSION  => "File upload stopped by extension.",
);
if (isset($_POST['savephoto'])){
                        
         $tmp_file = $_FILES['upload_file']['tmp_name'];
         @$target_file = basename($_FILES['upload_file']['name']);
         $upload_dir = "uploads";
         $imgsize = $_FILES['upload_file']['size'];     
         $imgtype = $_FILES['upload_file']['type'];
         $member_id = $_SESSION['member_id'];
                
        if ($imgtype == "image/jpeg") {
                
        if (move_uploaded_file($tmp_file,$upload_dir."/".$target_file)){
                        global $mydb;
                        
                        $mydb->setQuery("UPDATE `photos` SET `pri`='no' WHERE   member_id ='{$member_id}'");
                        $mydb->executeQuery();
                        
                        $mydb->setQuery("INSERT INTO `photos`(`filename`, `type`, `size`, `member_id`,`pri`) 
                                VALUES ('{$target_file}', '{$imgtype}', '{$imgsize}', '{$member_id}','yes' )");
                        $mydb->executeQuery();
 
                        if ($mydb->affected_rows() == 1) {
                                
                                echo "<script type=\"text/javascript\">
                                                        alert(\"Primary photo save.\");
                                                        window.location='home.php';
                                                </script>";
                                
                        } else{
                                echo "<script type=\"text/javascript\">
                                                        alert(\"Prima photo uploading Failed!\");
                                                </script>";
                        }
                
                        //echo "File uploaded Succesfully";
                        
                }else{
                        $error = $_FILES['upload_file']['error'];
                        $message = $upload_errors[$error];
                        echo "<script type=\"text/javascript\">
                                                        alert(\".{$message}.\");
                                                        
                                                </script>";
                }
                
                } else {
                echo "<script type=\"text/javascript\">
                                                        alert(\"Invalid Image format.\");
                                                        window.location='home.php';
                                                </script>";
                        
                
                }
        
}
?>

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:

CREATE TABLE IF NOT EXISTS `photos` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `filename` VARCHAR(255) NOT NULL,
  `type` VARCHAR(100) NOT NULL,
  `size` INT(11) NOT NULL,
  `caption` VARCHAR(255) NOT NULL,
  `member_id` INT(11) NOT NULL,
  `pri` VARCHAR(12) NOT NULL DEFAULT 'no',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=46 ;

And here are the following code used in "home.php".

<?php   
require_once("includes/initialize.php");        
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="">
 
    <title>Philsocial</title>
 
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
 
    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
        <?php 
            //login confirmation
                confirm_logged_in();
        ?> 
  </head>
 
  <body>
 
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="home.php"><B>Philsocial</B></a>
        </div>
        <form class="navbar-form navbar-left">
            <div class="form-group">
                        <div class="rows">
              <input type="text" placeholder="Email" class="form-control" size="40">
            </div>
           </div>
          </form>
                <div class="navbar-collapse collapse">
         
          <form class="navbar-form navbar-right">
            <ul class="nav navbar-nav">
            <li class="active"><a href="home.php">Home</a></li>
           <li class="dropdown">
                        
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <?php 
                        //retrieve session variable
                        echo $_SESSION['fName'];?> 
                                <b class="caret"></b>
                        </a>
             
                         <ul class="dropdown-menu">
                <li><a href="#">My Profile</a></li>
                <li><a href="#">Edit profile</a></li>
                <li><a href="#">Edit profile Picture</a></li>
                                <li><a href="#">Customize profile</a></li>
                                <li><a href="#">Edit Work and Education</a></li>
               
              </ul>
            </li>
                        <li class="dropdown">
 
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>
             
                         <ul class="dropdown-menu">
                <li><a href="#">Account Settings</a></li>
                <li><a href="#">Privacy Settings</a></li>
                <li><a href="#">Manage Social Accounts</a></li>
                                <li><a href="#">Manage Credits</a></li>
                                <li><a href="logout.php">Logout</a></li>
               
              </ul>
            </li>
          </ul>
                </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>
 
    <div class="container">
                <div class="well">
                        <div class="row">
                                <div class="col-xs-6 col-md-2">
                                        <!--This Section is for our Profile Picture-->          
                                        <a data-target="#myModal" data-toggle="modal" href="" title=
                                        "Click here to Change Image.">
                    <?php
                                
                                $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}' and pri='yes'");
                                $cur = $mydb->loadResultList();
                                if ($mydb->affected_rows()== 0){
                                        echo '<img src="./uploads/p.jpg" class="img-thumbnail" width="200px" height="100px" />';        
                                
                                } 
                                foreach($cur as $object){
                                   
                                                echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail" width="200px" height="100px" />';
                                        
                                        }       
                                ?>
</a>
                        <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                        <button class="close" data-dismiss="modal" type=
                        "button">×</button>
 
                        <h4 class="modal-title" id="myModalLabel">Choose Your best
                        picture for your Profile.</h4>
                </div>
 
                <form action="save_photo.php" enctype="multipart/form-data" method=
                "post">
                        <div class="modal-body">
                                <div class="form-group">
                                        <div class="rows">
                                                <div class="col-md-12">
                                                        <div class="rows">
                                                                <div class="col-md-8">
                                                                        <input name="MAX_FILE_SIZE" type=
                                                                        "hidden" value="1000000"> <input id=
                                                                        "upload_file" name="upload_file" type=
                                                                        "file">
                                                                </div>
 
                                                                <div class="col-md-4"></div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
 
                        <div class="modal-footer">
                                <button class="btn btn-default" data-dismiss="modal" type=
                                "button">Close</button> <button class="btn btn-primary"
                                name="savephoto" type="submit">Save Photo</button>
                        </div>
                </form>
        </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 
                                </div>
 
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                        <div class="page-header">
                                                
                                        </div>
                                        <!---In this area is for our Tab navigation-->
                                        <ul class="nav nav-tabs">
                                                <li class="active">
                                                        <a href="#">Wall</a>
                                                </li>
                                                <li>
                                                        <a href="info.php">Info</a>
                                                </li>
                                                <li>
                                                        <a href="message.php">Messages</a>
                                                </li>
                                        </ul>
                                <!-- This area will be used for body of our Tabs-->     
                                        <h1>Wall</h1>
                                </div>
                        </div>
                </div>
        
        
     
  </body>
</html>
  
      <hr>
 
      <footer>
        <p align="center">&copy; Philsocial 2013</p>
      </footer>
    </div> <!-- /container -->
 
 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Add new comment

541 views