Skip to main content

Social Networking Site: Login Page


This tutorial is a continuation of our project called “How to Create a Social Networking Site Tutorial”. At this time we’re going to focus on creating login-logout system in a secure way using session. Logging in or signing in or on is the process by which individual access to a computer system is controlled by identifying and authenticating the user through the credentials presented by the user.

To start in this tutorial, let’s create first a new PHP file called “session.php”. Then save it inside the inludes folder. Then add the following code:
In this code we are creating a session variable that will hold the information of member who logged in our site, and this information willl be available to all pages in one application.

  1. <?php
  2. //before we store information of our member, we need to start first the session
  3.  
  4. //create a new function to check if the session variable member_id is on set
  5. function logged_in() {
  6. return isset($_SESSION['member_id']);
  7.  
  8. }
  9. //this function if session member is not set then it will be redirected to index.php
  10. function confirm_logged_in() {
  11. if (!logged_in()) {?>
  12. <script type="text/javascript">
  13. window.location = "index.php";
  14. </script>
  15.  
  16. <?php
  17. }
  18. }
  19. ?>

Next open the “initialize.php” inside the includes folder. Then under "require_once(LIB_PATH.DS."functions.php");", add the following code:
  1. require_once(LIB_PATH.DS."session.php");

We put this code inside the initialize.php file so that we don’t need to call the session.php file all over again in all pages.

And the initialize.php file will now look like as shon below:

  1. <?php
  2. /**
  3. * Description: This includes for basic and core configurations.
  4. * Author: Joken Villanueva
  5. * Date Created: NA
  6. * Revised By:
  7. */
  8.  
  9. //define the core paths
  10. //Define them as absolute peths to make sure that require_once works as expected
  11.  
  12. //DIRECTORY_SEPARATOR is a PHP Pre-defined constants:
  13. //(\ for windows, / for Unix)
  14. defined('DS') ? null : define('DS', DIRECTORY_SEPARATOR);
  15.  
  16. defined('SITE_ROOT') ? null : define ('SITE_ROOT', $_SERVER['DOCUMENT_ROOT'].DS.'philsocial');
  17.  
  18. defined('LIB_PATH') ? null : define ('LIB_PATH',SITE_ROOT.DS.'includes');
  19.  
  20. // load config file first
  21. require_once(LIB_PATH.DS."config.php");
  22. //load basic functions next so that everything after can use them
  23. require_once(LIB_PATH.DS."functions.php");
  24. //later here where we are going to put our class session
  25. require_once(LIB_PATH.DS."session.php");
  26.  
  27.  
  28. //Load Core objects
  29. require_once(LIB_PATH.DS."database.php");
  30.  
  31. //Load database-related classes
  32.  
  33.  
  34. ?>

Next step,open our “index.php”. and on above of all the codes add the following code:
This code will get all the database connection, classes, objects and functions inside the includes folder.

  1. <?php
  2. require_once("includes/initialize.php");
  3. ?>

Then, on the head area of our html tags. Add the following code:

This code will check if session variable is set, then it will be redirected to ” home.php”.

  1. <?php
  2. if (logged_in()){?>
  3. <script type="text/javascript">
  4. window.location = "home.php";
  5. </script>
  6. <?php
  7. }
  8.  
  9. ?>

And under the body, here’s the modified login form:

In this code, we add method to “POST” and action to “index.php”. and for the email input tag we add name as “log_eamil” then for password tag we add name as “log_pword”, and finally for button we set the name to “btnlogin”.

  1. <form class="navbar-form navbar-right" method="POST" action="index.php">
  2. <div class="form-group">
  3. <input type="text" placeholder="Email" class="form-control" name="log_email">
  4. </div>
  5. <div class="form-group">
  6. <input type="password" placeholder="Password" class="form-control" name="log_pword">
  7. </div>
  8. <button type="submit" class="btn btn-success" name="btnlogin">Sign in</button>
  9. </form>

At this time, let’s add above some PHP code for login. And here’s the following code:

  1. <?php
  2. if (isset($_POST['btnlogin'])) {
  3. //form has been submitted1
  4.  
  5. $email = trim($_POST['log_email']);
  6. $upass = trim($_POST['log_pword']);
  7.  
  8. $h_upass = sha1($upass);
  9. //check if the email and password is equal to nothing or null then it will show message box
  10. if ($email == '') {
  11. ?> <script type="text/javascript">
  12. alert("Username or Password Not Registered! Contact Your administrator.");
  13. </script>
  14. <?php
  15.  
  16. } elseif ($upass == '') {
  17. ?> <script type="text/javascript">
  18. alert("Username or Password Not Registered! Contact Your administrator.");
  19. </script>
  20. <?php
  21. } else {
  22. //create some sql statement
  23. $sql = "SELECT * FROM `user_info` WHERE `email`='" . $email . "' and `pword`='" . $h_upass . "'";
  24. $result = mysql_query($sql) or die;
  25. //get the number of results based n the sql statement
  26. $numrows = mysql_num_rows($result);
  27. //check the number of result, if equal to one
  28. if ($numrows == 1) {
  29. //store the result to a array and passed to variable found_user
  30. $found_user = mysql_fetch_array($result);
  31. //store the result to session variables
  32. $_SESSION['member_id'] = $found_user['member_id'];
  33. $_SESSION['fName'] = $found_user['fName'];
  34. $_SESSION['lName'] = $found_user['lName'];
  35. $_SESSION['email'] = $found_user['email'];
  36. $_SESSION['pword'] = $found_user['pword'];
  37. $_SESSION['mm'] = $found_user['mm'];
  38. $_SESSION['dd'] = $found_user['dd'];
  39. $_SESSION['yy'] = $found_user['yy'];
  40. $_SESSION['gender'] = $found_user['gender'];
  41. ?> <script type="text/javascript">
  42. //then it will be redirected to home.php
  43. window.location = "home.php";
  44. </script>
  45. <?php
  46.  
  47.  
  48. } else {
  49. ?> <script type="text/javascript">
  50. alert("Username or Password Not Registered! Contact Your administrator.");
  51. window.location = "home.php";
  52. </script>
  53. <?php
  54. }
  55.  
  56. }
  57. } else {
  58.  
  59. $email = "";
  60. $upass = "";
  61.  
  62. }
  63.  
  64. ?>

And this time were going to create a “home.php” file as our final output for this tutorial. And add the following code:

  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.  
  96. </div>
  97.  
  98.  
  99.  
  100. </body>
  101. </html>
  102.  
  103. <hr>
  104.  
  105. <footer>
  106. <p align="center">&copy; Philsocial 2013</p>
  107. </footer>
  108. </div> <!-- /container -->
  109.  
  110.  
  111. <!-- Bootstrap core JavaScript
  112. ================================================== -->
  113. <!-- Placed at the end of the document so the pages load faster -->
  114. <script src="assets/js/jquery.js"></script>
  115. <script src="js/bootstrap.min.js"></script>
  116. </body>
  117. </html>

Take note, I modified the "user_info" table. Here's the query and you can use this to modify yours also.

  1. ALTER TABLE `USER_INFO` CHANGE `USER_ID` `MEMBER_ID` INT( 11 ) NOT NULL AUTO_INCREMENT

Here’s some refference you can use for creating a secure login system:

How to Create Login Page in PHP and MySQL with Session
How to Create Secure Registration Page in PHP/MySQL Part I
How to Create Secure Registration Page in PHP/MySQL Part II
How to Create Secure Registration Page in PHP/MySQL Part III

If you want to see more of my works, new Source Code or Application and Tutorials Just click here.

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.

Submitted byTajir Network (not verified)on Thu, 12/19/2019 - 07:48

New social services create new account profile page

Add new comment

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