Continue Session From Login to Landing
PHP Login Script with Session
by Vincy. Last modified on August 25th, 2022.
In this tutorial, let us create a login script with a session in PHP. It has a simple example of implementing user authentication. This example uses a standard login form to get the user login details. And it preserves the login state with PHP sessions.
Login would be the first step of many applications. Sometimes, part of the privileged functionalities of the application will ask users to log in.
So, the login script is an integral part of an application. I will present to you the implementation of the login system with minimal code.
Authentication will help us to identify genuine users. By enabling authentication, we can protect our website from anonymous access.
What is inside?
- Ways to create an authentication system
- About this example
- File structure
- User login interface
- PHP code to process login
- Get logged-in user profile data to show a welcome message
- Handling logout code in PHP
- Database script
- Test login details
- PHP login script with session output
Ways to create an authentication system
There are different ways of implementing an authentication system. The most popular way is to get the username and password via a login form and authenticate based on them.
Recently, authentication using OTP is also becoming the norm. The OTP will be dynamic and allowed for one-time.
For OTP authentication, the application sends it via wither via SMS or email. In a previous article, we have seen an example code in PHP to log in by sending OTP via email.
About this example
In this example, it has the user's database with name, email, password and more details. It has an HTML form with inputs to get the user login credentials.
When the user submits their login details, then the PHP code will receive the posted data. It compares the entered data against the user database.
If a match is found, then it sets the user login session. This authentication code preserves the user id in a PHP session. The existence of this session will state the user authentication status.
After authentication, the PHP $_SESSION super global variable will contain the user id. That is, the $_SESSION["member_id"] is set to manage the logged-in session. It will remain until log out or quit the browser.
While logout, we unset all the session variables using the PHP unset() function.
File structure
The below screenshot shows the organized file structure of this user login example. The Member.phpis the model class with authentication functionalities.
TheDataSource.php file contains functions to get a connection and access the database.
In aviewdirectory, I have created all the UI-related files for the login and the dashboard interface. It also contains a stylesheet used for this UI.
Theindex.php is the landing page that checks the user's logged-in session. Then it redirects users either to log in or to the dashboard.
The login-action.phpandlogout.phpfiles are the PHP endpoints. They handle actions as requested by the users via the interactive authentication Interface.
User login interface
Creating an HTML form to log in is the first step. It is to get the login details from users.
In this example, it has two fields username and password for user login.
I have specified the validation function and the PHP endpoint with the form tag.
The HTML contains elements to display client-side validation error. Also, it has the code to show a server-side error response based on the login result.
<html> <head> <title>User Login</title> <link href="./view/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <form action="login-action.php" method="post" id="frmLogin" onSubmit="return validate();"> <div class="demo-table"> <div class="form-head">Login</div> <?php if(isset($_SESSION["errorMessage"])) { ?> <div class="error-message"><?php echo $_SESSION["errorMessage"]; ?></div> <?php unset($_SESSION["errorMessage"]); } ?> <div class="field-column"> <div> <label for="username">Username</label><span id="user_info" class="error-info"></span> </div> <div> <input name="user_name" id="user_name" type="text" class="demo-input-box"> </div> </div> <div class="field-column"> <div> <label for="password">Password</label><span id="password_info" class="error-info"></span> </div> <div> <input name="password" id="password" type="password" class="demo-input-box"> </div> </div> <div class=field-column> <div> <input type="submit" name="login" value="Login" class="btnLogin"></span> </div> </div> </div> </form> </div> </body> </html> and the styles are,
body { font-family: Arial; color: #333; font-size: 0.95em; } .form-head { color: #191919; font-weight: normal; font-weight: 400; margin: 0; text-align: center; font-size: 1.8em; } .error-message { padding: 7px 10px; background: #fff1f2; border: #ffd5da 1px solid; color: #d6001c; border-radius: 4px; margin: 30px 10px 10px 10px; } .demo-table { background: #ffffff; border-spacing: initial; margin: 15px auto; word-break: break-word; table-layout: auto; line-height: 1.8em; color: #333; border-radius: 4px; padding: 30px; width: 380px; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; } .demo-table .label { color: #888888; } .demo-table .field-column { padding: 15px 10px; } .demo-input-box { padding: 13px; border: #CCC 1px solid; border-radius: 4px; width: 100%; } .btnLogin { padding: 13px; background-color: #5d9cec; color: #f5f7fa; cursor: pointer; border-radius: 4px; width: 100%; border: #5791da 1px solid; font-size: 1.1em; } .response-text { max-width: 380px; font-size: 1.5em; text-align: center; background: #fff3de; padding: 42px; border-radius: 3px; border: #f5e9d4 1px solid; font-family: arial; line-height: 34px; margin: 15px auto; } .terms { margin-bottom: 5px; } .dashboard { background: #d2edd5; text-align: center; margin: 15px auto; line-height: 1.8em; color: #333; border-radius: 4px; padding: 30px; max-width: 400px; border: #c8e0cb 1px solid; } .error-info { color: #FF0000; margin-left: 10px; } a.logout-button { color: #09f; } Login form validation
This script is for validating the login data at the client-side. If the users submit the login with empty fields then this script will return a boolean false.
When it returns false, it displays a validation error message to the users. By returning boolean 0, the form validation script prevents login to proceed further.
function validate() { var $valid = true; document.getElementById("user_info").innerHTML = ""; document.getElementById("password_info").innerHTML = ""; var userName = document.getElementById("user_name").value; var password = document.getElementById("password").value; if (userName == "") { document.getElementById("user_info").innerHTML = "required"; $valid = false; } if (password == "") { document.getElementById("password_info").innerHTML = "required"; $valid = false; } return $valid; } PHP code to process login
The login-action.php file receives and handles the posted login data. It sends the username and password to the processLogin() function.
This method gets the login details and compares them with the user database.
It prepares a query and binds the login parameters with it to find the match from the database. If a match is found the processLogin will return the result.
On successful login, the login-action.php sets the logged-in user session. Otherwise, it will return an error by saying "Invalid Credentials".
<?php namespace Phppot; use \Phppot\Member; if (! empty($_POST["login"])) { session_start(); $username = filter_var($_POST["user_name"], FILTER_SANITIZE_STRING); $password = filter_var($_POST["password"], FILTER_SANITIZE_STRING); require_once (__DIR__ . "./class/Member.php"); $member = new Member(); $isLoggedIn = $member->processLogin($username, $password); if (! $isLoggedIn) { $_SESSION["errorMessage"] = "Invalid Credentials"; } header("Location: ./index.php"); exit(); } ?> Get logged-in user profile data to display a welcome message
This code is to display the dashboard after login. The PHP code embedded with this HTML is for getting the user session and the user data from the database.
It displays the welcome message by addressing the user with their display name.
The dashboard contains a logout link in addition to the welcome text.
<?php namespace Phppot; use Phppot\Member; if (! empty($_SESSION["userId"])) { require_once __DIR__ . './../class/Member.php'; $member = new Member(); $memberResult = $member->getMemberById($_SESSION["userId"]); if (! empty($memberResult[0]["display_name"])) { $displayName = ucwords($memberResult[0]["display_name"]); } else { $displayName = $memberResult[0]["user_name"]; } } ?> <html> <head> <title>User Login</title> <link href="./view/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <div class="dashboard"> <div class="member-dashboard"> Welcome <b><?php echo $displayName; ?></b>, You have successfully logged in!<br> Click to <a href="./logout.php" class="logout-button">Logout</a> </div> </div> </div> </body> </html> Member.php
This is the PHP class created in this example to handle the login process. The getMemberById method request DataSource to fetch the member results.
<?php namespace Phppot; use Phppot\DataSource; class Member { private $dbConn; private $ds; function __construct() { require_once "DataSource.php"; $this->ds = new DataSource(); } function getMemberById($memberId) { $query = "select * FROM registered_users WHERE id = ?"; $paramType = "i"; $paramArray = array( $memberId ); $memberResult = $this->ds->select($query, $paramType, $paramArray); return $memberResult; } public function processLogin($username, $password) { $passwordHash = md5($password); $query = "select * FROM registered_users WHERE user_name = ? AND password = ?"; $paramType = "ss"; $paramArray = array( $username, $passwordHash ); $memberResult = $this->ds->select($query, $paramType, $paramArray); if (! empty($memberResult)) { $_SESSION["userId"] = $memberResult[0]["id"]; return true; } } } ?> Redirect users to log in or Dashboard based on Session
A landing page index.php contains code to check logged-in sessions and route users accordingly. The following code shows how to redirect users based on the session.
<?php session_start(); if (! empty($_SESSION["userId"])) { require_once './view/dashboard.php'; } else { require_once './view/login-form.php'; } ?> Handling logout in PHP
By clicking the logout link from the dashboard, it calls this PHP script. This script clears the current login session and redirects users back to the login. The logout code is,
<?php session_start(); $_SESSION["user_id"] = ""; session_destroy(); header("Location: index.php"); ?> DataSource.php
This class establishes a connection object to access the database based on the request. It has theselect function to prepare a fetch query to return the results. This class is available in the project download zip linked at the end of this tutorial.
Database script
This script contains the CREATE statement for theregistered_userstable. Also, it has the data dump to check the example with test login details.
-- -- Table structure for table `registered_users` -- CREATE TABLE `registered_users` ( `id` int(8) NOT NULL, `user_name` varchar(255) NOT NULL, `display_name` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `email` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `registered_users` -- INSERT INTO `registered_users` (`id`, `user_name`, `display_name`, `password`, `email`) VALUES (1, 'kate_91', 'Kate Winslet', 'ad5611358209efdc202d35127a160748', 'kate@wince.com'); -- -- Indexes for table `registered_users` -- ALTER TABLE `registered_users` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for table `registered_users` -- ALTER TABLE `registered_users` MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; COMMIT; Test login details
After setting this example code and database in your computer, use the following test data to check the example login system.
Username: kate_91 Password: kate@03 PHP login script with session output
This output screenshot shows the login form interface. It has the input fields to get the user login details.
This is the screenshot of the welcome message. Once logged in, then the user will see this response in the browser.
This view will show a welcome message by addressing the logged-in user. It also has a link to logout as shown below.
Download
↑ Back to Top
whitfieldfortiont.blogspot.com
Source: https://phppot.com/php/php-login-script-with-session/
0 Response to "Continue Session From Login to Landing"
Post a Comment