PHP Very Basic Authentication 

We can Make any page secure in the php by using SuperGlobal $_SESSION variable.
Basically In This Tutorials we have five pages, these are as listed below:
  1. index.php
  2. login_script.php
  3. profile.php
  4. secure_page.php
  5. logout.php
  • When user enter its email and password from index.php  it send email/password to login_script.php.
  • Here login_script.php check that user name and  password of user are correct with database.
  • When it find a row in members table in the testdb named database, it start  session by calling session_start() method of php and register id of the row with session  of server with the help of $_SESSION['id'] and redirect to profile.php page.
  • Profile page get id from session and collect complete row from database.
  • Securepage simply check that session has some id attached and shows content of secure_page.php.
  • For Destroying session we have logout.php page which destroy session and attached value of id and redirect to indexpage.
Now Lets Do Some Practical Work.
Step 1:  First of all start your wamp/xampp server and open phpmyadmin tool For this open  http://localhost/phpmyadmin  in your browser.

Step 2:  Second  click on SQL tab and create a database  named testdb and insert two values in it with following script :-

create database testdb;
use  testdb;
create table members(id int primary key auto_increment,name varchar(100),email varchar(200),password varchar(100));
insert into members(name,email,password)values('raggu','raggu@gmail.com','1234'),
('hardik','hardik@gmail.com','1234');

Step 3: create a new php document and name it as index.php and save it in server root /lec14 folder, in case using wamp save it in www directory or in htdoc when using xampp.

index.php

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Login</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container-fluid">
  <div class="row">
   <nav class="navbar navbar-inverse">
  <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="#mynav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <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="mynav">
      <ul class="nav navbar-nav">
         <li><a href="profile.php">profile</a></li>
       <li><a href="secure_page.php">Secure Page</a></li>
         <li><a href="logout.php">logout</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  </div>
   <div class="row">
   <div class="col-sm-2"></div>
   <div class="col-sm-8">
   <form action="login_script.php"method="post" class="">
   <input type="email" name="email" placeholder="Youremail@mail.com"/>
   <br/>
      <input type="password" name="password" placeholder="password"/>
   <br/>
      <input type="submit"  value="Login" class="btn btn-primary"/>
   <br/>
      <br/>
   </form>
   </div>
   <div class="col-sm-2"></div>
   </div>
  </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Step 4: create a new php document and name it as login_script.php and save it in server's  www /lec14 folder.
login_script.php


<?php
session_start();
$email=$_POST['email'];
$password=$_POST['password'];
$conn=mysqli_connect('localhost','root','','testdb');
$query="select * from members where email='$email' and password='$password'";
$rs=mysqli_query($conn,$query);
while($row=mysqli_fetch_array($rs)){
 $_SESSION['id']=$row['id'];
header("location:profile.php");
}
?>
Step 5: create a new php document and name it as profile.php and save it in server's  www/lec14 folder.
profile.php
<?php 
session_start();
if(!isset($_SESSION['id']))
   {
    header("location:index.php");
   }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>User Profile</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container-fluid">
  <div class="row">
  <nav class="navbar navbar-inverse">
  <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="#mynav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <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="mynav">
      <ul class="nav navbar-nav">
    <li><a href="profile.php">profile</a></li>
    <li><a href="secure_page.php">Secure Page</a></li>
         <li><a href="logout.php">logout</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  </div>
   <div class="row">
   <div class="col-sm-2"></div>
   <div class="col-sm-8">
  <h1>Profile</h1>
   <?php 
   $id=$_SESSION['id'];
   $conn=mysqli_connect('localhost','root','','testdb');
 $query="select * from members where id='$id'";
 $rs=mysqli_query($conn,$query);
  while($row=mysqli_fetch_array($rs)){
 $_SESSION['id']=$row['id'];
  echo "Member Id : $row[0] <br/>Name $row[1] <br/> Email $row[2]"; 
 }
   ?>
   </div>
   <div class="col-sm-2"></div>
   </div>
  </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>
Step 6:create a new php document and name it as secure_page.php and save it in server's  www/lec14 folder.
secure_page.php
<?php 
session_start();
if(!isset($_SESSION['id']))
   {
    header("location:index.php");
   }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Secure Page</title>
    <!-- Bootstrap -->
   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body> 
  <div class="container-fluid">
  <div class="row">
     <nav class="navbar navbar-inverse">
  <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="#mynav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <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="mynav">
      <ul class="nav navbar-nav">
        <li><a href="profile.php">profile</a></li>
    <li><a href="secure_page.php">Secure Page</a></li>
     <li><a href="logout.php">logout</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  </div>
<div class="row">
   <div class="col-sm-2"></div>
   <div class="col-sm-8">
<h1>This is another secure page</h1>
<p>Only Registerd users can see this</p>
 </div><div class="col-sm-2"></div>
</div>
  </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
  </body>
</html>
Step 7:  create a new php document and name it as logout.php and save it in server's  www/lec14 folder.
logout.php
<?php
session_start();
 session_unset();
 session_destroy();
 header("location:index.php");
?>

Tags:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Copyright 2017, HardikTech. All rights Reserved.
| Designed by Harhiktech