Today we are going to learn Simple Login Page Using PHP and MySQL, So lets start. The Features of login page contain input validation using PHP session. There is unique feature also with login page is the logout function, it is unique because in other login page once the user clicks the logout button and then click to the back button of the browser, their system redirects the user to go back as if it still logged out, this is not appropriate for security reason. But here in this login page once the user clicks the logout button, the user will not able to move back to the previous page without login. This login page is also protected with SQL injection.
Table of Contents
Creating Our DataBase
First, we have to create data base to store the data
- Open phpMyAdmin
- Create database
- Then crate the table name
- And then insert the details Or
- After creating a database name, click the SQL and paste the following code.
CREATE TABLE `tbl_users` ( `user_id ` int(4) NOT NULL auto_increment, `email` varchar(65) NOT NULL default '', `password` varchar(65) NOT NULL default '', PRIMARY KEY (`user_id`) ) TYPE=MyISAM AUTO_INCREMENT=2 ;
Main page
This page will appear whenever user open the site, in this page user have to enter the correct email id and password to move on the home page. Else the same page will appear again to re enter the email and password.
main.php
<!DOCTYPE html>
<html >
<head>
<meta >
<title>Login</title>
<style>
.close:hover { background: #00d9ff; }
body{
margin: 0;
padding: 0;
background: #fff;
color: #fff;
font-family: Arial;
font-size: 12px;
}
.body{
position: absolute;
top: -20px;
left: -10px;
right: -20px;
bottom: -40px;
width: auto;
height: auto;
background-image: url(img.jpg);
background-size: cover;
}
.header{
position: absolute;
top: calc(50% - 35px);
left: calc(30% - 255px);
z-index: 2;
}
.header div{
float: left;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 35px;
font-weight: 200;
}
.log{
position: absolute;
top: calc(25% - 35px);
left: calc(60% - 255px);
z-index: 2;
}
.log div{
float: left;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 40px;
font-weight: 200;
}
.header div span{
color: #5379fa ;
}
.login{
position: absolute;
top: calc(50% - 75px);
left: calc(60% - 50px);
height: 150px;
width: 350px;
padding: 10px;
z-index: 2;
}
.login input[type=text]{
width: 250px;
height: 30px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
}
.login input[type=password]{
width: 250px;
height: 30px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
margin-top: 10px;
}
.button {
display: inline-block;
border-radius: 4px;
border: 1px solid rgb(115, 115, 115)
border: none;
color: #404040;
text-align: center;
font-size: 20px;
font-color: #2d43d0;
padding: 8px;
width: 255px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<div class="body"></div>
<div class="header">
<div> <span>TechJunkGigs </span></div>
</div>
<div class="log"><div> Login Page</div></div>
<br>
<form action="db_login.php" method="post" >
<div class="login">
<input type="text" placeholder="Email" name="email" required/><br>
<input type="password" placeholder="password" name="password" required/><br>
<button class="button" name="login" value="Login" style="vertical-align:middle"><span>Login</span></button><br>
</div>
</form>
</body>
</html>
Login PHP page
This page is a connection and the logic page, this page contain all logic and connection to the database.
Db_login.php
<?php
session_start();
$email= $_POST['email'];
$password= $_POST['password'];
//protect from SQL injection
$email= stripcslashes($email);
$password= stripcslashes($password);
$email= mysql_real_escape_string($email);
$password= mysql_real_escape_string($password);
//Database connection
mysql_connect("localhost","root","");
mysql_select_db("login");
$result = mysql_query("select * from tbl_users where email= '$email' and password= '$password'") or die ("failed to query database" .mysql_error());
$row = mysql_fetch_array($result);
if($row['email']==$email && $row['password'] == $password)
{
$_SESSION['email']= $row['email'];
echo ("<SCRIPT LANGUAGE='JavaScript'>
window.location.href='index.php';
</SCRIPT>");
}
else{
echo ("<SCRIPT LANGUAGE='JavaScript'>
window.alert('Login unsuccessful Please Try Again')
window.location.href='main.php';
</SCRIPT>");}
?>
Home Page
Index page will appear if user click the correct email id and password else the system will redirect to the login page again.
Index.php
<?php
session_start();
if(!isset($_SESSION['email'])){
header('Location:main.php');
} ?>
<div class="container">
<div style="vertical-align: middle;">
Welcome to Your Home Page
<a href="logout.php">Click here</a> to Logout.</div>
</div>
Logout page
Logout page will destroy the session so, when user click the logout button user will not able to go back to the previous page without login.
Logout.php
<?php
session_start();
session_destroy();
header("location:main.php");
exit();
?>
Demo Image
Video Demo
Download Link
[sociallocker]login[/sociallocker]
So that’s all for this Simple Login Page Using PHP and MySQL friends. We learned some fundamental things, but you can do whatever you want with the trick. if you found it helpful then, please SHARE. Thank You