1
Lorem Framework Tutorials – Part 3
XI – Authentication
Let’s create our login form first, create a file called “login_form.php” and save it in the “elements” folder. Then add the
following codes:
<form method="post">
<input type="hidden" name="action" value="validate_user">
<label>Username</label>
<input type="text" name="username"><br>
<label>Password</label>
<input type="password" name="password"><br>
<input type="submit" name="" value="Login">
</form>
Next, create a page called “login.php” and save it in the “pages” folder. Add the code below:
<?php if( ! defined( 'ACCESS' ) ) die( 'DIRECT ACCESS NOT ALLOWED' ); ?>
<?php element( 'header' ); ?>
<?php
if( isset( $_GET[ 'invalid' ] ) ) {
echo "<h2>Invalid Username or Password. Please try again.</h2>";
}
if( isset( $_GET[ 'restricted' ] ) ) {
echo "<h2>You need to login to access that page.</h2>";
}
?>
<h1>Login</h1>
<?php element( 'login_form' ) ?>
<?php element( 'footer' ); ?>
Lastly, create a file called “validate_user.php” and save it in the “actions” folder. Add the following code:
<?php
$username = $_POST[ 'username' ];
$password = md5( $_POST[ 'password' ] );
$res = $DB->query( "SELECT * FROM users WHERE username = '$username' AND password =
'$password'" );
if( $res && $res->num_rows ) {
$user = $res->fetch_object();
$_SESSION[ AUTH_ID ] = $user->id;
$_SESSION[ AUTH_NAME ] = $user->username;
$_SESSION[ AUTH_TYPE ] = $user->utype;
header( "Location: " . SITE_URL . "/" );
} else {
header( "Location: " . SITE_URL . "/?page=login&invalid=1" );
}
To enable authentication, you will need to edit the file “config.php” and look for:
$restricted_pages = array();
This variable will handle which page will have restriction. If you don’t want your pages retricted, then just leave the
variable as it is.
For this exercise, let’s add restriction to the page “products” and “users”. You can update the variable to this:
$restricted_pages = array( "users", "products" );
Lorem Framework. Loreto G. Gabawa Jr. 2018
2
After saving, let’s test it! Now open your browser and enter this URL: localhost/mysite/?page=users. You’ll notice that
you’ll be redirected to the login page just like the screenshot below:
Please take note that in the query string, you’ll see “restrited=1”. This tells us that the previously accessed page is only
available for logged in users.
Let’s make our menu dynamic, this means that the menu items will change if the user has login or logout. In the
“elements” folder, update “header.php” and change the code below:
<?php if( ! defined( 'ACCESS' ) ) die( 'DIRECT ACCESS NOT ALLOWED' ); ?>
<!DOCTYPE html>
<html>
<head>
<title>Awesome Site</title>
<link rel="stylesheet" type="text/css" href="<?php echo SITE_URL
?>/assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="header col-lg-12">
<div class="page-header">
<h1>My Awesome Site <small>Subtext for
header</small></h1>
</div>
</div>
<div class="menu col-lg-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile
display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
Lorem Framework. Loreto G. Gabawa Jr. 2018
3
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content
for toggling -->
<div class="collapse navbar-collapse" id="bs-example-
navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="./">Home <span
class="sr-only">(current)</span></a></li>
<?php if( isset( $_SESSION[ AUTH_ID ] ) ) { ?>
<li><a href="./?page=products">Products</a></li>
<li><a href="./?page=users">Users</a></li>
<li><a href="./?action=logout">Logout</a></li>
<?php } else { ?>
<li><a href="./?page=login">Login</a></li>
<?php } ?>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="main-content row">
<div class="col-lg-8 col-md-8">
<!-- START OF CONTENT -->
You’ll notice that part of the code is bolded, this is where magic happens. You see that this line:
<?php if( isset( $_SESSION[ AUTH_ID ] ) ) { ?>
Checks if the session exists, if yes then we will display the restricted pages else display the Login link.
The constant AUTH_ID can be found in “config.php”.
If someone logs in then you’ll see this:
If not then:
Lorem Framework. Loreto G. Gabawa Jr. 2018
4
Finally, let’s create a way for our users to logout. Create a file called “logout.php” and save it in the “actions” folder.
Then add the following code:
<?php
session_start();
session_destroy();
header( "Location: " . SITE_URL );
exit;
The session will be deleted by using session_destroy() function.
Lorem Framework. Loreto G. Gabawa Jr. 2018
