THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create Admin Login and Logout Page using Session in PHP and MySQL Database

Create Admin Login and Logout Page using Session in PHP and MySQL Database


Welcome, We will complete view on how to create admin login and logout page using session in PHP and MySQL Database.





I will suggest you watch the video, It will surely help you.

Admin Login Page

Here, we will have our admin login page. Where the admin already knows it's username and password. So, our main aim here is to make sure admin enter correct data. So, for that, we will take help of the database. Where we set a query if Admin enters the username and password that is already set in Database, then only admin can go to the main page of the admin panel. Else, be on the same page.

Don't forget to add the links. Here is the link

Link page


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Admin Page Code


<?php
session_start();

$con = mysqli_connect('localhost', 'root' );
if($con){
// echo "conenction successful";
}else{
echo "no connection";
}


?>


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<?php  include 'links.php' ?> 
</head>
<body>

<header>
<div class="container center-div shadow ">
<div class="heading text-center mb-5 text-uppercase text-white"> ADMIN LOGIN PAGE </div>
<div class="container row d-flex flex-row justify-content-center mb-5">
<div class="admin-form shadow p-2 ">
<form action="logincheck.php" method="POST">
<div class="form-group">
<label>Email ID</label>
<input type="text" name="user" value="" class="form-control" autocomplete="off">
</div>
<div class="form-group">
<label>Password</label>
<input type="text" name="pass" value="" class="form-control" autocomplete="off">
</div>
<input type="submit" class="btn btn-success" name="submit" >
</form>
</div>
</div>
</div>
</header>

</body>
</html>



PHP page for checking: Login Check Page 


Here we are also, setting the Session. Using, the session we can use the admin name throughout our pages. Also, when admin login into the page then we will use to the username to be shown on the main page of admin and that is possible by using session.


<?php
session_start();

$con = mysqli_connect('localhost', 'root' );
if($con){
echo "conenction successful";
}else{
echo "no connection";
}

$db = mysqli_select_db($con, 'youtubeadmin');

if(isset($_POST['submit'])){
$username = $_POST['user'];
$password = $_POST['pass'];

$sql = " select * from  admintable where user='$username' and pass='$password' ";
$query = mysqli_query($con,$sql);

$row = mysqli_num_rows($query);
if($row == 1){
echo "login successful";
$_SESSION['user'] = $username;
header('location:adminmainpage.php');
}else{
echo "login failed";
header('location:adminlogin.php');
}

}


?>

Admin Main Page:



<?php
session_start();
if(!isset($_SESSION['user'])){
header('location:adminlogin.php');
}

?>

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<?php  include 'links.php' ?> 
</head>
<body>

<div class="container center-div shadow">
<div class="heading text-center text-uppercase text-white mb-5"> Guys, Share with ur friends and subscribe my 
<?php echo $_SESSION['user']?>Technical channel :) </div>
<a href="logout.php" class="btn btn-danger">  Logout</a>
</div>



</body>
</html>



Logout Page:


<?php
session_start();
session_destroy();

header('location:adminlogin.php');

?>



Style.css


*{
margin: 0;
padding: 0;
}

.center-div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.heading{
width: 100%;
line-height: 80px;
font-size: 1.4rem;
background: -webkit-linear-gradient(left, #0072ff, #8811c5);
font-family: 'Staatliches', cursive;
}

form{
width: 400px;

}

2 comments: