Login, Logout and Dashboard Using PHP and with MySQL database

Login, Logout and Dashboard Using PHP and with MySQL database

Steps :
           1. Create database and insert (database.php)

CREATE TABLE IF NOT EXISTS `users` (

`id` int(11) NOT NULL,

  `first_name` varchar(200) NOT NULL,

  `last_name` varchar(200) NOT NULL,

  `email` varchar(100) NOT NULL,

  `password` varchar(100) NOT NULL,

  `status` varchar(50) NOT NULL,

  `created_at` datetime NOT NULL,

  `updated_at` datetime NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

--

-- Dumping data for table `users`

--

INSERT INTO `users` (`id`, `first_name`, `last_name`, `email`, `password`, `status`, `created_at`, `updated_at`) VALUES

(1, 'ABC', 'XYZ', 'abc@fff.com', '789456', 'active', '2018-03-01 00:00:00', '2018-03-01 00:00:00');

2. Create config.php file for database configuration.(config.php)

<?php

define('DB_SERVER', 'localhost');

define('DB_USERNAME', 'root');

define('DB_PASSWORD', '');

define('DB_DATABASE', 'basicphp');

$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

?>

3.  Create lock file for restrict to access welcome page.(lock.php)

<?php

include('config.php');

session_start();

$email=$_SESSION['email'];

$ses_sql=mysqli_query($db,"select email from users where email='$email' ");

$row=mysqli_fetch_array($ses_sql,MYSQLI_ASSOC);

$login_session=$row['email'];

if(!isset($login_session))

{

            header("Location: login.php");

}

?>

            

          4. Create login page(login.php)

<?php

require_once 'config.php';

if($_SERVER["REQUEST_METHOD"] == "POST")

{

// username and password sent from Form

    $email=mysqli_real_escape_string($db,$_POST['email']);

    $password=mysqli_real_escape_string($db,$_POST['password']);

    $passwordSecure=md5($password);

    $sql="SELECT * FROM users WHERE email='$email' and password='$password'";

    $result=mysqli_query($db,$sql);

    $row=mysqli_fetch_array($result,MYSQLI_ASSOC);

    $email = $row['email'];

    $count=mysqli_num_rows($result);

// If result matched $username and $password, table row count must be 1 row

    if($count==1)

    {

        session_start();

        $_SESSION['email']  =$email;

        header("location: dashboard.php");

    }

    else

    {

        $error="Your Login Email or Password is invalid";

    } Include

}

?>

     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <link href="style.css" rel="stylesheet">

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">      </script>

   <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <!------ Include the above in your HEAD tag ---------->

    <div class = "container">

    <div class="wrapper">

    <form action="" method="post" name="Login_Form" class="form-signin">

   <h3 class="form-signin-heading">Welcome Back! Please Sign In</h3>

   <hr class="colorgraph"><br>

   <input type="text" class="form-control" name="email" placeholder="Email"      required="" autofocus="" />

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

  <button class="btn btn-lg btn-primary btn-block"  name="Submit" value="Login" type="Submit">Login</button>

   </form>

 </div>

        5. dashboard.php after login successfully open this page(dashboard.php)

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<!------ Include the above in your HEAD tag ---------->

<div class="navbar">

  <div class="navbar-inner">

    <div class="container">

      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </a>

      <a class="brand" href="#">WebApp</a>

      <div class="nav-collapse">

        <ul class="nav">

          <li class="active"><a href="#">Home</a></li>

        </ul> 

        <h4></h4>   

            <ul class="nav pull-right">

          <li class="divider-vertical"></li>

          <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $_SESSION['email']; ?> <b class="caret"></b></a>

            <ul class="dropdown-menu">

              <li><a href="logout.php">Logout</a></li>

            </ul>

          </li>

        </ul>

      </div><!-- /.nav-collapse -->

    </div>

  </div><!-- /navbar-inner -->

</div>

<div><h3>Welcome</h3></div>

     6. logout.php for logout your session after login(logout)

     <?php

     session_start();

     if(session_destroy())

    {

      header("Location: login.php");

    }

    ?>

    7. Style for login page (style.css) 

.wrapper {    

  margin-top: 80px;

  margin-bottom: 20px;

}

.form-signin {

  max-width: 420px;

  padding: 30px 38px 66px;

  margin: 0 auto;

  background-color: #eee;

  border: 3px dotted rgba(0,0,0,0.1); 

  }

.form-signin-heading {

  text-align:center;

  margin-bottom: 30px;

}

.form-control {

  position: relative;

  font-size: 16px;

  height: auto;

  padding: 10px;

}

input[type="text"] {

  margin-bottom: 0px;

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

}

input[type="password"] {

  margin-bottom: 20px;

  border-top-left-radius: 0;

  border-top-right-radius: 0;

}

.colorgraph {

  height: 7px;

  border-top: 0;

  background: #c4e17f;

  border-radius: 5px;
         }