Login page with PHP

Thetutorialsway October 31, 2020

In almost every website, user login system is an essential feature. Creating login page with PHP is very easy and it is a way to secure one or more pages from anonymous users .

I have shared frontend design and as well as backend codes for user login page with PHP. Follow these steps to create a login page with PHP -


Step - 1: Create a new page login.php and paste the code

<html>
    <head>
        <title>User login</title>
    </head>
    <body>
        <div class="form-container">
    <div class="form-heading">
User login
    </div>
    <div class="form-body">
<form action="validate.php" method="post" accept-charset="utf-8">
    <div class="form-group">
<label for="Email">Email</label>
<input class="form-control" type="text" name="email">
    </div>
    <div class="form-group">
<label for="Name">Password</label>
<input class="form-control" type="text" name="password">
    </div>
    <div class="form-group">
        <input class="btn-primary" type="submit" name="submit"                                             value="Login">
    <div class="form-link">
Not Registered yet? <a href="#">Create new account</a>
    </div>
                 </div>
    </form>
        </div>
    </div>
</body>
</html>


Step - 2:  Now add CSS code inside head section(between <head> CSS code </head>)

<style>
.form-container{
background:#EDEFEF;
max-width:650px;
box-shadow:0 0 2px #A6A7A8;
margin:auto;
margin-top:50px;
}
.form-heading{
background:#096CAB;
color:#EEF4FA;
padding:15px;
}
.form-body{
padding:25px;
}
label{
display:block;
color:#424344;
margin-bottom:2px;
font-weight:normal;
font-size:14px;
}
.form-group{
width:90%;
margin:auto;
margin-bottom:20px;
}
.form-control{
width:100%;
border:none;
background:transparent;
border-bottom:2px solid #C3C4C4;
box-sizing: border-box;
}
.form-group input[type=text]:focus{
outline:none;
border-bottom:2px solid #70A7E0;
color:#565757;
padding-top:15px;
}
.btn-primary{
padding:10px 20px 10px 20px;
background:#096CAB;
color:#ffffff;
border:none;
box-shadow:0 0 2px #2267C6;
cursor:pointer;
}
.form-link{
color:#626363;
font-size:13px;
margin-top:15px;
}
.form-link a{
color:#076EB0;
text-decoration: none;
}
.error{
color:#F50505;
font-size:12px;
}
.success{
background:#7CC02C;
color:#DCFAA1;
font-size:13px;
padding:12px;
text-align:center;
margin-bottom:20px;
}
</style>


Step - 3: Create a new page validate.php and paste the code

<?php
session_start()
$con = mysqli_connect('localhost', 'root', '',' database_name');
if(isset($_POST['submit']))
{
$email = mysqli_real_escape_string($con, $_POST['email']);
$password = md5($_POST['password']);
$query = "select * from users where email='$email' && password='$password'";
$run = mysqli_query($con,$query) or die(mysqli_error($con));
$row = mysqli_num_rows($run);
if($row>0)
{
$data = mysqli_fetch_assoc($run);
$_SESSION['email'] = $data['email'];
$_SESSION['uid'] = $data['id'];
header("location:dashboard.php");
}
else
echo  "<script>alert('Login failed, Please try again');</script>";
                        echo "<script>location.href='login.php';</script>";
 }
} 
 ?>

Important - Make sure that your MySQL database has user table.
                        Rename your database width database_name in mysqli_connect()
                        In user table there must be email and password columns.
                        
 
Tags
Reactions

Post a Comment

0 Comments