Simple login form using PHP and MySQL.

The login form is very much essential in every kind of web application so here we are explaining a simple and best way of doing login system. which mainly includes
1. Connecting to Database
2. Login(Session Start)
3. Logout(Session End)
4. Session Check
5. Login Form
6. CSS

1. Connecting to Database


$DatabaseServer = "localhost";
$DatabaseUsername = "root";
$DatabasePassword = "root";
$DatabaseName = "demo";

$Connection = mysqli_connect($DatabaseServer, $DatabaseUsername, $DatabasePassword, $DatabaseName);

if ($Connection === false) {
    die("ERROR: Could not connect. " . mysqli_connect_error());
}

$DatabaseServer = "localhost";

$DatabaseUsername = "root";

$DatabasePassword = "root";

$DatabaseName = "demo";

$Connection = mysqli_connect($DatabaseServer, $DatabaseUsername, $DatabasePassword, $DatabaseName);

if ($Connection === false) {

die("ERROR: Could not connect. " . mysqli_connect_error());

}

2. Login


session_start();
if (isset($_POST['username']) and isset($_POST['password'])) {
   
    $Username = $_POST['username'];
    $Password = $_POST['password'];
    $query = "SELECT * FROM `user` WHERE FirstName='$Username' and Password='$Password'";
    $result = mysqli_query($Connection, $query) or die(mysqli_error($connection));
    $count = mysqli_num_rows($result);

    if ($count == 1) {
        $_SESSION['username'] = $Username;
    } else {
        $fmsg = "Invalid Login Credentials.";
    }
}

session_start();

if (isset($_POST['username']) and isset($_POST['password'])) {

$Username = $_POST['username'];

$Password = $_POST['password'];

$query = "SELECT * FROM `user` WHERE FirstName='$Username' and Password='$Password'";

$result = mysqli_query($Connection, $query) or die(mysqli_error($connection));

$count = mysqli_num_rows($result);

if ($count == 1) {

$_SESSION['username'] = $Username;

} else {

$fmsg = "Invalid Login Credentials.";

}

3. Logout


session_start();
session_destroy();
header('Location: login.php');

session_start();

session_destroy();

header('Location: login.php');

4. Session Check


if (isset($_SESSION['username'])) {
    
    echo "<div class='session-box'>";
    echo 'Welcome Mr.'.$Username = $_SESSION['username'];
    echo "<br><a href='logout.php'>Logout</a>";
    echo "</div>";
}else{
    
    echo "<div class='session-box'>";
    echo "You are logged out.";
    echo "</div>";

}

if (isset($_SESSION['username'])) {

echo "<div class='session-box'>";

echo 'Welcome Mr.'.$Username = $_SESSION['username'];

echo "<br><a href='logout.php'>Logout</a>";

echo "</div>";

}else{

echo "<div class='session-box'>";

echo "You are logged out.";

echo "</div>";

}

5. Login Form


<form method="POST" class="login-box">

    <div class="form-header">Please Login</div>

    <div class="col-md-12">  
        <label>Username</label>
        <input type="text" name="username" class="form-control" placeholder="Username" required>
    </div>

    <div class="col-md-12">
        <label>Password</label>
        <input type="password" name="password" class="form-control" placeholder="Password" required>
    </div>

    <div class="col-md-6">
        <button class="btn btn-primary" type="submit">Login</button>
    </div>

</form>

<div class="form-header">Please Login</div>

<label>Username</label>

</div>

<label>Password</label>

</div>

<button class="btn btn-primary" type="submit">Login</button>

</div>

</form>

6. CSS


<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            .login-box{
                position: absolute;
                width: 300px;
                height: 270px;
                z-index: 15;
                top: 50%;
                left: 50%;
                margin: -100px 0 0 -150px;
                border: 1px solid #8080804a;
                border-radius: 5px;
                background: #8080804a;
            }
            .session-box{
                position: absolute;
                width: 300px;
                height: 100px;
                z-index: 15;
                top: 10%;
                left: 50%;
                margin: 0px 0 0 -150px;
                border: 1px solid #8080804a;
                border-radius: 5px;
                background: #8080804a;
                padding: 30px;
            }
            .form-control{
                padding: 10px;
                margin-top: 5px;
            }
            .btn-primary{
                margin-top: 20px;
            }
            .form-header{
                width: 299px;
                height:40px;
                background: #004f61;
                color:white;
                text-align: center;
                font-size: 20px;
                margin-bottom: 20px;
                padding: 5px;
            }
        </style>

    </head>

<head>

<style>

.login-box{

position: absolute;

width: 300px;

height: 270px;

z-index: 15;

top: 50%;

left: 50%;

margin: -100px 0 0 -150px;

border: 1px solid #8080804a;

border-radius: 5px;

background: #8080804a;

}

.session-box{

position: absolute;

width: 300px;

height: 100px;

z-index: 15;

top: 10%;

left: 50%;

margin: 0px 0 0 -150px;

border: 1px solid #8080804a;

border-radius: 5px;

background: #8080804a;

padding: 30px;

}

.form-control{

padding: 10px;

margin-top: 5px;

}

.btn-primary{

margin-top: 20px;

}

.form-header{

width: 299px;

height:40px;

background: #004f61;

color:white;

text-align: center;

font-size: 20px;

margin-bottom: 20px;

padding: 5px;

}

</style>

</head>

Create Database Table


CREATE TABLE `user` (
  `UserID` int(12) NOT NULL,
  `FirstName` varchar(48) NOT NULL,
  `LastName` varchar(48) NOT NULL,
  `Email` varchar(128) NOT NULL,
  `Password` varchar(20) NOT NULL,
  `City` varchar(48) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `user` (

`UserID` int(12) NOT NULL,

`FirstName` varchar(48) NOT NULL,

`LastName` varchar(48) NOT NULL,

`Email` varchar(128) NOT NULL,

`Password` varchar(20) NOT NULL,

`City` varchar(48) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Insert data


INSERT INTO `user` (`UserID`, `FirstName`, `LastName`, `Email`, `Password`, `City`) VALUES
(7, 'Rahul', 'Rajshekaran', 'Rahul@zzz.xxx', 'Rahul@123', 'Pune'),
(8, 'Mahesh', 'Krishna', 'Mahesh@xxx.xxx', 'Mahesh@123', 'Delhi');