Examples of PHP Programs to Create Login and Logout Pages using Sessions

PHP is one of the most widely used programming languages since its inception back in 1995. Once you master it, you can fuel up your career as one of the best web developers. However, for newbies, understanding the concepts of PHP can be a little tricky. Particularly, Sessions and Cookies are two of the most tricky concepts to master as a PHP beginner.

While both concepts are related to data management, the significant difference between them is that sessions store user data in the server, while cookies store it in the browser. Session data can only be accessed during the current session.

In PHP, a user session starts with a successful login and ends with a logout. These two sessions are essential for any website. So, in this tutorial, we will be going to share with you examples of PHP programs to create login and logout using sessions. Let’s first understand the importance of sessions in website development.

Sessions allow accessibility to user data across the entire website.
Session data is saved on a temporary file in a server temporary directory – php.ini file.
It automatically destroys the data when the user closes the browser.

Steps for Creating Login and Logout

When a user logs in successfully, create a session variable to store their information.
On the home page, check if the session variable is set or not. If it is not set, redirect the user to the login page.
When a user logs out, destroy the session variable to clear their information.

PHP Program Examples for Creating Login and Logout Pages Using Session

Login Page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Login Form</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<style>

.login-form {

    width: 340px;

    margin: 50px auto;

    font-size: 15px;

}

.login-form form {

    margin-bottom: 15px;

    background: #f7f7f7;

    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

    padding: 30px;

}

.login-form h2 {

    margin: 0 0 15px;

}

.form-control, .btn {

    min-height: 38px;

    border-radius: 2px;

}

.btn {        

    font-size: 15px;

    font-weight: bold;

}

</style>

</head>

<body>

<div class="login-form">

    <form name="frmUser" method="post" action="loginProcess.php" align="center">

        <h2 class="text-center">Log in</h2>       

        <div class="message text-danger"><?php if($message!="") { echo $message; } ?></div>

        <div class="form-group">

            <input type="text" class="form-control" name="username" placeholder="Username" required="required" autocomplete="off">

        </div>

        <div class="form-group">

            <input type="password" autocomplete="off" class="form-control" placeholder="Password" name="password" required="required">

        </div>

        <div class="form-group">

            <button type="submit" class="btn btn-primary btn-block" value="Submit">Log in</button>

        </div>      

    </form>

</div>

</body>

</html>

```
Login Process
```

loginProcess.php

<?php

    session_start();

    $message="";

    if(count($_POST)>0) {

        $con = mysqli_connect('localhost','root','root','login') or die('Unable To connect');

        $result = mysqli_query($con,"SELECT * FROM user WHERE username='" . $_POST["username"] . "' and password = '". $_POST["password"]."'");

        $row  = mysqli_fetch_array($result);

        if(is_array($row)) {

        $_SESSION["id"] = $row['id'];

        $_SESSION["name"] = $row['name'];

        } else {

            $message = "Invalid Username or Password!";

        }

    }

    if(isset($_SESSION["id"])) {

    header("Location:index.php");

    }

?>

After the successfully login to the session then redirect to the index.php file.

Index Page

index.php

<?php

    session_start();

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Login Success</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<style>

.login-form {

    width: 340px;

    margin: 50px auto;

    font-size: 15px;

}

</style>

</head>

<body>

<div class="login-form">

<?php

if($_SESSION["name"]) {

?>

Welcome <?php echo $_SESSION["name"]; ?>. Click here to <a href="logout.php" tite="Logout">Logout.

<?php

}else echo "<h1>Please login first .</h1>";

?>

</div>

</body>

</html>

Logout Page

logout.php

<?php

    session_start();

    unset($_SESSION["id"]);

    unset($_SESSION["name"]);

    header("Location:login.php");

?>

Conclusion

In this tutorial, we have provided some sample codes for the PHP program to create login and logout pages using the sessions. Hope this guide helped you understand the topic. Login and logout sessions are essential elements of the PHP program. Therefore, having a good understanding of these elements will help you in ensuring the data security of your website.