<html>
<body id="body-login">
<div class="login-header" >
<div class="container">
<div class="logo"><img src="img/logo.png" alt="" title="" ></div>
</div>
</div>
<div class="login-container">
<div class="container">
<h1>Login</h1>
<form method="post" action="action.php">
<div class="login-box">
<div class="form-line">
<label>Username *:</label>
<div class="error_msg">
<?php if(@$_SESSION['username_error']!=''){echo @$_SESSION['username_error'];}?>
<?php if(@$_SESSION['not_found']!=''){echo @$_SESSION['not_found'];}?>
</div>
<input type="text" value="" id="username" name="username" placeholder="">
</div>
<div class="form-line">
<label>Password *:</label>
<div class="error_msg"><?php if(@$_SESSION['userpass_error']!=''){echo @$_SESSION['userpass_error'];}?></div>
<input type="password" value="" id="userpassword" name="userpassword" placeholder="">
</div>
<div class="form-line">
<input name="" type="submit" class="btn btn-inverse" value="Sign In" >
<div class="forgot-link">| <a href="#"> Forgot Your Password</a></div>
</div>
<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Step 2 CSS of html code:
<style>
.login-box {
background: none repeat scroll 0 0 #ffffff;
height: auto;
margin: 65px auto;
max-width: 425px;
padding: 25px;
width: auto;
}
.login-box .form-line {
float: left;
margin: 13px 0 0;
width: 100%;
}
.login-box label {
color: #252525;
float: left;
font-size: 14px;
margin: 17px 0 0;
text-align: left;
width: 150px;
}
label {
display: block;
}
.login-box input[type="text"] {
margin: 10px 0 0;
padding: 8px;
width: 250px;
}
label, input, button, select, textarea {
font-weight: normal;
line-height: 20px;
}
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
cursor: pointer;
}
* {
border: 0 none;
padding: 0;
vertical-align: baseline;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.login-box .btn-inverse {
float: left;
margin: 9px 0 0 150px;
padding: 10px 0;
text-align: center;
width: 132px;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
}
.btn-inverse {
background-color: #363636;
background-image: linear-gradient(to bottom, #444444, #222222);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-image: none;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
display: inline-block;
font-size: 14px;
line-height: 20px;
vertical-align: middle;
}
.login-box .forgot-link a {
color: #3a3a3a;
text-decoration: none;
}
a {
cursor: pointer;
}
.login-box .forgot-link {
color: #3a3a3a;
float: left;
font-size: 12px;
margin: 16px 0 0 8px;
}
#body-login {
/*background: url("img/login-body.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
*/ font-family: Arial,Helvetica,sans-serif;
background-color:#999;
font-size: 14px;
line-height: 19px;
}
.login-container h1 {
color: #3a3a3a;
font-size: 38px;
margin: 46px 0 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.error_msg{ color:red;}
</style>
Output of the above code:
Step 3 Making database:
I suppose you working on localhost. Open localhost/phpmyadmin, make a database named login
within login make a table named users.
Insert dummy user name and password, make sure that password should be convert into md5. I put admin,admin as username and password.
Step 4 making database connection:
Make a connection.php file to connect the php page with database.
Code:
<?php
$username = "root"; // in localhost username is root by default.
$password = ""; // in localhost passowd is blank by default.
$hostname = "localhost";
$db = "login";
//connection to the database
$dbCon = mysqli_connect($hostname, $username, $password,$db)
or die("Unable to connect to MySQL");
?>
Step 5 php code:
Creat action.php file in your file and copy the following code.
Code:
<?php
session_start();
//include database connecton
include "connection.php";
$username = $_POST['username'];
$password = $_POST['userpassword'];
if($username=='' && $password==''){ // if the feilds are blank then show message to user
$_SESSION['username_error'] = 'Username Required!';
$_SESSION['userpass_error'] = 'User Password Required!';
header('Location:login.php');
}else{
unset($_SESSION['username_error']);
unset($_SESSION['userpass_error']);
$query = mysqli_query($dbCon,"select * from users where username='".$username."' and password= '".md5($password)."'"); // query to fetch data from db
$result = mysqli_num_rows($query);
$data = mysqli_fetch_row($query);
if($result==1){ //if user exist put the name of user into session and redirect to home page
$_SESSION['user_id'] = $data[0];
$_SESSION['username'] = $data[1];
header('Location:home.php');
}else{
?> <h1 style="margin-left:200px; margin-top:200px;"><?php echo "Login Failed!";?></h1><?php
}
}
?>
Code description:
First of all include the connection file to connect with database. Then checking is the username and password field is empty or not? If username or password field is empty it shows message.
If user give wrong credentials then it gives error message.
Message will be
The correct credential is admin, admin so if we give the username=admin and password = admin then it will redirect to the home page.
It will redirect to home page
Home.php code:
<!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">
<head>
<style>
.header{ width:1020px; height:160px; background-color:#ccc;}
.content{ width:1017px; height:1020px; border:2px solid #999999;}
.logout{ float:right; margin-right:20px; margin-top:20px;}
</style>
</head>
<body>
<div class="header">
<a class="logout" href="logout.php">Logout</a>
</div>
<div class="content">
<h1>Welcome to Home page</h1>
</div>
</body>
</html>
And when we hit the logout anchor it will go to the logout page where the sessions are unset and redirect to the login page again.
Logout.php code:
<?php
unset($_SESSION['user_id']);
unset($_SESSION['username']);
header("location:login.php");
?>
