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());
}
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.";
}
}
3. Logout
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>";
}
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>
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>
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;
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');
Result
