Web Development Project: Login System

49 Projects
You are not logged in
Web
Development
Project
Project: Login System
Creator:	Graphix
Project type:	Games
Created on:	2010-10-13 15:42:12
Last edit:	2010-11-17 09:02:15
Download:	Start download now
Introduction

Many sites have log in systems, including me own ;) . So I decided to also make a tutorial on how to make one.

This is basically how a login system works:

The user enters his username and password

The user clicks on the submit button

The login script is called and retrieves the username and password

The login script first checks whether the username exists

Then the login script checks whether the password matches the one in the database

If all is good, either redirect or show a message that says 'Access granted' and if not show a message that says 'Access denied'. Also the login script, sets a session variable (for example $_SESSION['login']) to true if the login is succesful, and if not to false.


Database

The only table needed for this project is 'users' :
Code Snippet (Syntax highlighted) - Toggle Wrap

CREATE TABLE users (
user_id INT(11) AUTO_INCREMENT NOT NULL,
user CHAR(255) NOT NULL,
password CHAR(255) NOT NULL,
PRIMARY KEY (user_id) )

Interface

The login consists out of:

A title (for example 'Secure Log In')

A username text input and a lable in front of it ('User:').

A password text input and a lable in front of it ('Password:').

A log in button that submits the form onclick.


That's about it, now onto the programming.
Programming

All of the code snippets are a part of login.php . 

Starting off with the HTML for the log in form:
Code Snippet (Syntax highlighted) - Toggle Wrap

<form action='login.php' method='post' style=''>
 <h2>Secure Log In</h2>
 <table>
  <tr><td>Username:</td><td><input type='text' name='username' /</td>></tr>
  <tr><td>Password:</td><td><input type='password' name='password' /</td>></tr>
 </table>
 <input type='submit' name='subm_login' value='Log In' />
</form>


And now the log in script:
Code Snippet (Syntax highlighted) - Toggle Wrap

<?php
session_start(); /* Starting session */

/* Connecting to the database: */

$dbuser = "root";
$dbpassword = "";
$database = "main";
$dbhost = "localhost";
$dbconnection = mysql_connect($dbhost,$dbuser,$dbpassword)
  or die("Could not connect to MySQL database.");
$db = mysql_select_db($database,$dbconnection) 
  or die("Could not select MySQL database.");

/* If the form is submitted, start the login procedure: */
  
if (isset($_POST['subm_login'])) 
{
 
 /* Retrieving username and password: */
 $username = ((isset($_POST['username'])) ? htmlentities(addslashes($_POST['username'])) : "");
 $password = ((isset($_POST['password'])) ? htmlentities(addslashes($_POST['password'])) : "");
 
 /* Setting login variables to default: */
 $login_succes = 0;
 $login_message = "";
 
 /* Checking whether the form is filled in: */
 if ($username != "" && $password != "")
 {
 
   $query = "SELECT * FROM users WHERE user='".$username."' LIMIT 1";
   
   /* Executing query, the @ means no errors should be echoed when it fails:*/
   if (@$result = mysql_query($query)) {
     
	 /* Fetching row: */
     if ($r = mysql_fetch_array($result)) {
	 
	   /* Checking password, it can be stored hashed in the database, so hash the $password if needed: */
	   if ($r['password'] == md5($password)) {
	     
		 /* If the login is succesful: */
		 
         $login_succes = 1;
         $login_message = "Acces granted, you are now logged in.";
		 $_SESSION['login'] = 1;
		 
	   } else {
	   
		 /* If the login failed (wrong password): */
		 $login_succes = 0;
         $login_message = "Acces denied (4).";
		 
	   }
	 
	 } else {
	 
       /* If the login failed (no row was found): */
	   $login_succes = 0;
       $login_message = "Acces denied (3).";
	   
	 }
	 
   } else {
   
     /* If the login failed (MySQL error): */
	 $login_succes = 0;
     $login_message = "Acces denied (2).";
	 
   }
 } 
 else 
 {
   /* If the login failed (username or password is null): */
   $login_succes = 0;
   $login_message = "Acces denied (1).";
 }
 
}
?>


As you can see, showing the login form everytime the login page is loaded is not very as the user would not know the difference when he is logged in or not, so a change is needed in the display of the login form:

Code Snippet (Syntax highlighted) - Toggle Wrap

<?php 
/* If no log in was performed, set the $login_succes to -1 */
if (!isset($login_succes)) {
 $login_succes = -1;
}

/* Only showing the login message if the login is succesfull */
if ($login_succes == 1) 
{
 echo $login_message;
} 
else 
{

 /* Showing the form if no login was performed or if it failed:  */

 echo "
<form action='LoginSystem.php' method='post' style=''>
 <h2>Secure Log In</h2>
 <table>
  <tr><td>Username:</td><td><input type='text' name='username' /></td></tr>
  <tr><td>Password:</td><td><input type='password' name='password' /></td></tr>
 </table>
 <input type='submit' name='subm_login' value='Log In' />
</form>";

 /* Only showing the login message if the login has failed */
 if ($login_succes == false) {
  echo $login_message;
 }

}
?>

Using this code

Using the log in variables:
Code Snippet (Syntax highlighted) - Toggle Wrap

<?php
session_start();

if (!isset($_SESSION['login'])) {
$_SESSION['login'] = 0;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example page</title>
</head>
<body>
Welcome to this page!<br /><br />
<?php
if ($_SESSION['login'] == 1) {
   echo "You are logged in and are able to see this! <a href='LogoutSystem.php'>Log out?</a>";
} else {
   echo "You are not logged in, <a href='LoginSystem.php'>log in?</a>";
}
?>
</body>
</html>


Log Out
Ofcourse, making a logout script is easy:
Code Snippet (Syntax highlighted) - Toggle Wrap

<?php
session_start(); /* Starting session */

/* Setting the session variable for the login to false: */
$_SESSION['login'] = 0;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Logout System</title>
</head>
<body>
You are logged out.<br />
<a href='LoginSystem.php'>Do you want to log in?</a><br />
<a href='LoginExamplePage.php'>Or do you want to return to the example page?</a>
</body>
</html>



Well that was the login system, I hope you understood what I wrote in this tutorial and if not, leave a comment below so I can adjust it!

You can download the source code using the link below:
http://www.webdevproject.com/zips/LoginSystem.zip
Comments
Options