Social Networking Site: Facebook like “Discover People You May Know”

Submitted by GeePee on Friday, March 20, 2015 - 16:26.
In this tutorial, I’m going to show you how to create page Facebook like “Discover People You May Know”. This page will display a list of all people you may know or you want to know and this page also is a preparation for our next lesson on how to add friends. To start in this lesson, open a “home.php” file, then under the first “
”, change the first div into this following code. This code below will also display some basic information of a user, and we have also added a new option under “View Photos” which is a “Friends You May Know” and this option when access will show the page of “Discover People You May Know”. And we have also added a panel below the Basic Information panel that will be used for a list of our friends.
  1. <div class="col-xs-6 col-md-3">
  2.                 <a data-target="#myModal" data-toggle="modal" href="" title=
  3.                 "Click here to Change Image.">
  4. <?php
  5.  
  6. $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}' and `pri`='yes'");
  7. $cur = $mydb->loadResultList();
  8. if ($mydb->affected_rows()== 0){
  9.         echo '<img src="./uploads/p.jpg" class="img-thumbnail"/>';     
  10.  
  11. }
  12. foreach($cur as $object){
  13.    
  14.                 echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail"  />';
  15.        
  16.         }      
  17. ?>
  18.         </a>   
  19.        
  20. <!-- Modal -->
  21.         <div class="modal fade" id="myModal" tabindex="-1">
  22.                 <div class="modal-dialog">
  23.                         <div class="modal-content">
  24.                                 <div class="modal-header">
  25.                                         <button class="close" data-dismiss="modal" type=
  26.                                         "button">×</button>
  27.  
  28.                                         <h4 class="modal-title" id="myModalLabel">Choose Your best
  29.                                         picture for your Profile.</h4>
  30.                                 </div>
  31.  
  32.                                 <form action="save_photo.php" enctype="multipart/form-data" method=
  33.                                 "post">
  34.                                         <div class="modal-body">
  35.                                                 <div class="form-group">
  36.                                                         <div class="rows">
  37.                                                                 <div class="col-md-12">
  38.                                                                         <div class="rows">
  39.                                                                                 <div class="col-md-8">
  40.                                                                                         <input name="MAX_FILE_SIZE" type=
  41.                                                                                         "hidden" value="1000000"> <input id=
  42.                                                                                         "upload_file" name="upload_file" type=
  43.                                                                                         "file">
  44.                                                                                 </div>
  45.  
  46.                                                                                 <div class="col-md-4"></div>
  47.                                                                         </div>
  48.                                                                 </div>
  49.                                                         </div>
  50.                                                 </div>
  51.                                         </div>
  52.  
  53.                                         <div class="modal-footer">
  54.                                                 <button class="btn btn-default" data-dismiss="modal" type=
  55.                                                 "button">Close</button> <button class="btn btn-primary"
  56.                                                 name="savephoto" type="submit">Save Photo</button>
  57.                                         </div>
  58.                                 </form>
  59.                         </div><!-- /.modal-content -->
  60.                 </div><!-- /.modal-dialog -->
  61.         </div><!-- /.modal -->
  62.  
  63.         <div class="list-group">
  64.                 <a href="gallery.php" class="list-group-item">
  65.                   <span class="badge pull-right">
  66.                         <?php $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  67.                                 $cur = $mydb->executeQuery();
  68.                                 echo $row_count = $mydb->num_rows($cur);
  69.                         ?>
  70.                 </span>
  71.                  View photos
  72.                 </a>
  73.                 <a href="addfriend.php" class="list-group-item">
  74.                   <span class="badge pull-right">
  75.                         <?php $mydb->setQuery("SELECT * FROM user_info");
  76.                                 $cur = $mydb->executeQuery();
  77.                                 echo $row_count = $mydb->num_rows($cur);
  78.                         ?>
  79.                 </span>
  80.                  Friends you may know
  81.                 </a>
  82.  
  83.         </div>
  84.         <div class="panel panel-success">
  85.         <?php
  86.                 $mydb->setQuery("Select * from basic_info where member_id=".$_SESSION['member_id']);
  87.                 $info = $mydb->loadSingleResult();
  88.        
  89.         ?>
  90.         <div class="panel-heading"><h3 class="panel-title">Information</h3></div>
  91.            <div class="panel-body">    
  92.                         <p class="text-muted">Networks:</p>     <p><?php echo $info->networks; ?></p>
  93.                         <p class="text-muted">Relationship Status:</p><p><?php echo $info->rel_stats; ?></p>
  94.                         <p class="text-muted">Birthday:</p>     <p><?php echo bdate_toText($_SESSION['bday']); ?></p>
  95.                                                                                                                                                                
  96.                 </div>
  97.                          
  98.         </div>
  99.  
  100.         <div class="panel panel-default">
  101.           <div class="panel-heading"> <h3 class="panel-title">Friends</h3></div>
  102.           <div class="panel-body">
  103.            <?php
  104.                 $mydb->setQuery("Select * from user_info ");
  105.                 $cur = $mydb->loadResultList();
  106.                 foreach($cur as $object):
  107.        
  108.                 ?>
  109.                
  110.  
  111.                 <?php endforeach;?>
  112.           </div>
  113.         </div>
  114.  
  115. </div>
After adding the code above, the home will now look like as shown below. home Then we will do the same process to all our pages, example for the gallery, here’s all the code of our gallery.php file.
  1. <?php  
  2. require_once("includes/initialize.php");       
  3. include 'header.php';
  4. ?>
  5.  
  6. <div class="container">
  7.                 <div class="well">
  8.        
  9.                         <div class="row">
  10.                                 <div class="col-xs-6 col-md-3">
  11.                                                 <a data-target="#myModal" data-toggle="modal" href="" title=
  12.                                                 "Click here to Change Image.">
  13.                                 <?php
  14.                                
  15.                                 $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}' and `pri`='yes'");
  16.                                 $cur = $mydb->loadResultList();
  17.                                 if ($mydb->affected_rows()== 0){
  18.                                         echo '<img src="./uploads/p.jpg" class="img-thumbnail"/>';     
  19.                                
  20.                                 }
  21.                                 foreach($cur as $object){
  22.                                    
  23.                                                 echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail"  />';
  24.                                        
  25.                                         }      
  26.                                 ?>
  27.                                         </a>   
  28.                                        
  29.                                 <!-- Modal -->
  30.                                         <div class="modal fade" id="myModal" tabindex="-1">
  31.                                                 <div class="modal-dialog">
  32.                                                         <div class="modal-content">
  33.                                                                 <div class="modal-header">
  34.                                                                         <button class="close" data-dismiss="modal" type=
  35.                                                                         "button">×</button>
  36.  
  37.                                                                         <h4 class="modal-title" id="myModalLabel">Choose Your best
  38.                                                                         picture for your Profile.</h4>
  39.                                                                 </div>
  40.  
  41.                                                                 <form action="save_photo.php" enctype="multipart/form-data" method=
  42.                                                                 "post">
  43.                                                                         <div class="modal-body">
  44.                                                                                 <div class="form-group">
  45.                                                                                         <div class="rows">
  46.                                                                                                 <div class="col-md-12">
  47.                                                                                                         <div class="rows">
  48.                                                                                                                 <div class="col-md-8">
  49.                                                                                                                         <input name="MAX_FILE_SIZE" type=
  50.                                                                                                                         "hidden" value="1000000"> <input id=
  51.                                                                                                                         "upload_file" name="upload_file" type=
  52.                                                                                                                         "file">
  53.                                                                                                                 </div>
  54.  
  55.                                                                                                                 <div class="col-md-4"></div>
  56.                                                                                                         </div>
  57.                                                                                                 </div>
  58.                                                                                         </div>
  59.                                                                                 </div>
  60.                                                                         </div>
  61.  
  62.                                                                         <div class="modal-footer">
  63.                                                                                 <button class="btn btn-default" data-dismiss="modal" type=
  64.                                                                                 "button">Close</button> <button class="btn btn-primary"
  65.                                                                                 name="savephoto" type="submit">Save Photo</button>
  66.                                                                         </div>
  67.                                                                 </form>
  68.                                                         </div><!-- /.modal-content -->
  69.                                                 </div><!-- /.modal-dialog -->
  70.                                         </div><!-- /.modal -->
  71.  
  72.                                         <div class="list-group">
  73.                                             <a href="gallery.php" class="list-group-item active">
  74.                                               <span class="badge pull-right">
  75.                                                 <?php $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  76.                                                         $cur = $mydb->executeQuery();
  77.                                                                 echo $row_count = $mydb->num_rows($cur);
  78.                                                 ?>
  79.                                             </span>
  80.                                              View photos
  81.                                             </a>
  82.                                             <a href="addfriend.php" class="list-group-item">
  83.                                               <span class="badge pull-right">
  84.                                                 <?php $mydb->setQuery("SELECT * FROM user_info");
  85.                                                         $cur = $mydb->executeQuery();
  86.                                                                 echo $row_count = $mydb->num_rows($cur);
  87.                                                 ?>
  88.                                             </span>
  89.                                              Friends you may know
  90.                                             </a>
  91.                                
  92.                                         </div>
  93.                                         <div class="panel panel-success">
  94.                                         <?php
  95.                                                 $mydb->setQuery("Select * from basic_info where member_id=".$_SESSION['member_id']);
  96.                                                 $info = $mydb->loadSingleResult();
  97.                                        
  98.                                         ?>
  99.                                         <div class="panel-heading"><h3 class="panel-title">Information</h3></div>
  100.                                            <div class="panel-body">    
  101.                                                         <p class="text-muted">Networks:</p>     <p><?php echo $info->networks; ?></p>
  102.                                                         <p class="text-muted">Relationship Status:</p><p><?php echo $info->rel_stats; ?></p>
  103.                                                         <p class="text-muted">Birthday:</p>     <p><?php echo bdate_toText($_SESSION['bday']); ?></p>
  104.                                                                                                                                                                
  105.                                                 </div>
  106.                                                  
  107.                                         </div>
  108.  
  109.                                         <div class="panel panel-default">
  110.                                           <div class="panel-heading"> <h3 class="panel-title">Friends</h3></div>
  111.                                           <div class="panel-body">
  112.                                            <?php
  113.                                                 $mydb->setQuery("Select * from user_info ");
  114.                                                 $cur = $mydb->loadResultList();
  115.                                                 foreach($cur as $object):
  116.                                        
  117.                                                 ?>
  118.                                                
  119.  
  120.                                                 <?php endforeach;?>
  121.                                           </div>
  122.                                         </div>
  123.  
  124.                                 </div>
  125.                 <div class="col-xs-12 col-sm-6 col-md-8">
  126.                         <div class="panel panel-default">
  127.                            <div class="panel-heading"><h3 class="panel-title">List of Photos</h3></div>
  128.                                 <div class="panel-body">               
  129.        
  130.    
  131.                                         <?php
  132.                                        
  133.                                         $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  134.                                         $cur = $mydb->loadResultList();
  135.                                         foreach($cur as $object): ?>
  136.                                                         <a data-target="#myModall" data-toggle="modal" >
  137.                                                         <img src="./uploads/<?php echo $object->filename; ?> " class="img-thumbnail" width="200" height="200" />
  138.                                                         </a>
  139.                                         <?php endforeach;?>
  140.  
  141.                                         <!-- Modal -->
  142.  
  143.                                                 <div class="modal fade" id="myModall" tabindex="-1">
  144.                                                         <div class="modal-dialog">
  145.                                                                 <div class="modal-content">
  146.                                                                         <div class="modal-body">
  147.                                                                
  148.                                                                                 </div>
  149.  
  150.                                                                 </div><!-- /.modal-content -->
  151.                                                         </div><!-- /.modal-dialog -->
  152.                                                 </div><!-- /.modal -->
  153.                                 </div>
  154.                                 </div>         
  155.                         </div>
  156.                
  157.     </div> <!-- /container -->
  158.  
  159.         <footer>
  160.         <p align="center">&copy; Philsocial 2013</p>
  161.     </footer>
  162.     <!-- Bootstrap core JavaScript
  163.     ================================================== -->
  164.     <!-- Placed at the end of the document so the pages load faster -->
  165.      <script src="js/tooltip.js"></script>
  166.         <script src="assets/js/jquery.js"></script>
  167.     <script src="js/bootstrap.min.js"></script>
  168.          <script src="js/popover.js"></script>
  169.          <script>
  170.                 $(document).ready(function(){
  171.            $('a img').on('click',function(){
  172.                 var src = $(this).attr('src');
  173.                 var image = '<img src="' + src + '" class="img-responsive"/>';
  174.                 $('#myModall').modal();
  175.                 $('#myModall').on('shown.bs.modal', function(){
  176.                     $('#myModall .modal-body').html(image);
  177.                 });
  178.                 $('#myModall').on('hidden.bs.modal', function(){
  179.                     $('#myModall .modal-body').html('');
  180.                 });
  181.            });  
  182.         })
  183.         </script>
  184.        
  185.   </body>
  186. </html>
And the photo gallery will now look like as shown below. At this time, we’re going to create a new PHP file called “addfriend.php”. This page will show if the user wants to find a new friend the user can click the “Friends you may know”option. And here’s the following code for “addfriend.php” file.
  1. <?php  
  2. require_once("includes/initialize.php");       
  3. include 'header.php';
  4. ?>
  5.  
  6. <div class="container">
  7.                 <div class="well">
  8.        
  9.                         <div class="row">
  10.                                 <div class="col-xs-6 col-md-3">
  11.                                                 <a data-target="#myModal" data-toggle="modal" href="" title=
  12.                                                 "Click here to Change Image.">
  13.                                 <?php
  14.                                
  15.                                 $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}' and `pri`='yes'");
  16.                                 $cur = $mydb->loadResultList();
  17.                                 if ($mydb->affected_rows()== 0){
  18.                                         echo '<img src="./uploads/p.jpg" class="img-thumbnail"/>';     
  19.                                
  20.                                 }
  21.                                 foreach($cur as $object){
  22.                                    
  23.                                                 echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail"  />';
  24.                                        
  25.                                         }      
  26.                                 ?>
  27.                                         </a>   
  28.                                        
  29.                                 <!-- Modal -->
  30.                                         <div class="modal fade" id="myModal" tabindex="-1">
  31.                                                 <div class="modal-dialog">
  32.                                                         <div class="modal-content">
  33.                                                                 <div class="modal-header">
  34.                                                                         <button class="close" data-dismiss="modal" type=
  35.                                                                         "button">×</button>
  36.  
  37.                                                                         <h4 class="modal-title" id="myModalLabel">Choose Your best
  38.                                                                         picture for your Profile.</h4>
  39.                                                                 </div>
  40.  
  41.                                                                 <form action="save_photo.php" enctype="multipart/form-data" method=
  42.                                                                 "post">
  43.                                                                         <div class="modal-body">
  44.                                                                                 <div class="form-group">
  45.                                                                                         <div class="rows">
  46.                                                                                                 <div class="col-md-12">
  47.                                                                                                         <div class="rows">
  48.                                                                                                                 <div class="col-md-8">
  49.                                                                                                                         <input name="MAX_FILE_SIZE" type=
  50.                                                                                                                         "hidden" value="1000000"> <input id=
  51.                                                                                                                         "upload_file" name="upload_file" type=
  52.                                                                                                                         "file">
  53.                                                                                                                 </div>
  54.  
  55.                                                                                                                 <div class="col-md-4"></div>
  56.                                                                                                         </div>
  57.                                                                                                 </div>
  58.                                                                                         </div>
  59.                                                                                 </div>
  60.                                                                         </div>
  61.  
  62.                                                                         <div class="modal-footer">
  63.                                                                                 <button class="btn btn-default" data-dismiss="modal" type=
  64.                                                                                 "button">Close</button> <button class="btn btn-primary"
  65.                                                                                 name="savephoto" type="submit">Save Photo</button>
  66.                                                                         </div>
  67.                                                                 </form>
  68.                                                         </div><!-- /.modal-content -->
  69.                                                 </div><!-- /.modal-dialog -->
  70.                                         </div><!-- /.modal -->
  71.  
  72.                                         <div class="list-group">
  73.                                                
  74.                                                     <a href="gallery.php" class="list-group-item ">
  75.                                                       <span class="badge pull-right">
  76.                                                         <?php $mydb->setQuery("SELECT * FROM photos WHERE `member_id`='{$_SESSION['member_id']}'");
  77.                                                                 $cur = $mydb->executeQuery();
  78.                                                                         echo $row_count = $mydb->num_rows($cur);
  79.                                                         ?>
  80.                                                     </span>
  81.                                                      View photos
  82.                                                     </a>
  83.                                                     <a href="gallery.php" class="list-group-item active" >
  84.                                                       <span class="badge pull-right">
  85.                                                         <?php $mydb->setQuery("SELECT * FROM user_info");
  86.                                                                 $cur = $mydb->executeQuery();
  87.                                                                         echo $row_count = $mydb->num_rows($cur);
  88.                                                         ?>
  89.                                                     </span>
  90.                                                      Friends you may know
  91.                                                     </a>
  92.                                                
  93.                                         </div>
  94.                                         <div class="panel panel-success">
  95.                                         <?php
  96.                                                 $mydb->setQuery("Select * from basic_info where member_id=".$_SESSION['member_id']);
  97.                                                 $info = $mydb->loadSingleResult();
  98.                                        
  99.                                         ?>
  100.                                         <div class="panel-heading"><h3 class="panel-title">Information</h3></div>
  101.                                            <div class="panel-body">    
  102.                                                         <p class="text-muted">Networks:</p>     <p><?php echo $info->networks; ?></p>
  103.                                                         <p class="text-muted">Relationship Status:</p><p><?php echo $info->rel_stats; ?></p>
  104.                                                         <p class="text-muted">Birthday:</p>     <p><?php echo bdate_toText($_SESSION['bday']); ?></p>
  105.                                                                                                                                                                
  106.                                                 </div>
  107.                                                  
  108.                                         </div>
  109.  
  110.                                         <div class="panel panel-default">
  111.                                           <div class="panel-heading"> <h3 class="panel-title">Friends</h3></div>
  112.                                           <div class="panel-body">
  113.                                            <?php
  114.                                                 $mydb->setQuery("Select * from user_info ");
  115.                                                 $cur = $mydb->loadResultList();
  116.                                                 foreach($cur as $object):?>
  117.                                                
  118.  
  119.                                                 <?php endforeach;?>
  120.                                           </div>
  121.                                         </div>
  122.  
  123.                                 </div>
  124.  
  125.                                 <div class="col-xs-12 col-sm-6 col-md-8">
  126.                                         <h3 class="text-primary">Discover People You May Know</h3>
  127.                                         <div class="panel panel-default">
  128.                                        
  129.                                           <div class="panel-body">
  130.                        
  131.                                                
  132.                                            <?php
  133.  
  134.  
  135.  
  136.  
  137.  
  138.                                                 $mydb->setQuery("SELECT *
  139.                                                                                         FROM  `user_info`
  140.                                                                                         WHERE  `member_id` !='{$_SESSION['member_id']}'");
  141.                                                 $cur = $mydb->loadResultList();
  142.                                                 foreach($cur as $info):
  143.                                                         $mydb->setQuery("SELECT * FROM photos WHERE `member_id`=".$info->member_id ."
  144.                                                                 AND `member_id`!='{$_SESSION['member_id']}' and `pri`='yes'");
  145.                                                         $pho = $mydb->loadResultList();
  146.                                                 ?>
  147.                                         <p class="pull-left">
  148.                                                 <?php
  149.                                                         if ($mydb->affected_rows()== 0){
  150.                                                                 echo '<a href="#">';
  151.                                                                 echo '<img src="./uploads/p.jpg" class="img-thumbnail" width="140" height="120"/>';    
  152.                                                                 echo '</a>';
  153.                                                         }
  154.                                                                 foreach($pho as $object){      
  155.                                                                         echo '<a href="#">';
  156.                                                                         echo '<img src="./uploads/'. $object->filename.'" class="img-thumbnail" width="140" height="120" />';
  157.                                                                         echo '</a>';
  158.                                                                 }
  159.                                                         ?>  
  160.                                         <br/>
  161.                                                         <strong><?php echo $info->fName. ' ' .$info->lName;?></strong><br/><a>Add as Friend</a></p>
  162.                                                 <?php  endforeach;?>
  163.  
  164.  
  165.                                         </div>
  166.                                        
  167.                                        
  168.                                         </dl>
  169.                                
  170.                                 </div>
  171.         </div>
  172.  
  173.        
  174.      
  175.   </body>
  176. </html>
  177.  
  178.       <hr>
  179.    
  180.     </div> <!-- /container -->
  181.         <footer>
  182.         <p align="center">&copy; Philsocial 2013</p>
  183.     </footer>
  184.     <!-- Bootstrap core JavaScript
  185.     ================================================== -->
  186.     <!-- Placed at the end of the document so the pages load faster -->
  187.      <script src="js/tooltip.js"></script>
  188.         <script src="assets/js/jquery.js"></script>
  189.     <script src="js/bootstrap.min.js"></script>
  190.          <script src="js/popover.js"></script>
  191.          
  192.        
  193.   </body>
  194. </html>
And this will now look like as shown below. If you want to see more of my works, new Source Code or Application and Tutorials Just click here.
Tags
Facebook like
Discover People You May Know
PHP/MySQL
Twitter Bootstrap
Social Networking Site

Add new comment

About text formats
  • 792 views