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
1 2 3 4 5 6 7 8 9 10 11 12 |
$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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
1 2 3 4 5 |
session_start(); session_destroy(); header('Location: login.php'); |
4. Session Check
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<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
1 2 3 4 5 6 7 8 9 10 |
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
1 2 3 4 5 |
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: