Script For Login, Logout and View Using PHP, MySQL and Bootstrap

-
I am assuming here that you are familiar with HTML and CSS. I have commented the code with the necessary information in the major part of the code. So you can understand easily. I have also attached the source code so you can download it and use it. Let's start.

Note: I have updating this article on my personal blog.
The following are the points we will be learn in this article:
  1. Creating Database in phpmyadmin.
  2. Create connection with MySQL database.
  3. Insert, delete and view data from MySQL database.
  4. Some Bootstrap components.
  5. Sessions in PHP.
Files and IDE:
  1. Registration
  2. Login
  3. Logout
  4. Welcome
  5. Admin_login
  6. View_users
  7. Db_conection
  8. Delete.php
I am using PHPStorm for the coding and Bootstrap framework for front end development.

Create Database:Create Database

Create Tables:

Create table

Create columns in Users table:Create columns

Crate Admin Table:

Admin Table

Create Admin Columns:

create admin column

Registration.php:
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css">  
    <title>Registration</title>  
</head>  
<style>  
    .login-panel {  
        margin-top: 150px;  
  
</style>  
<body>  
  
<div class="container"><!-- container class is used to centered  the body of the browser with some decent width-->  
    <div class="row"><!-- row class is used for grid system in Bootstrap-->  
        <div class="col-md-4 col-md-offset-4"><!--col-md-4 is used to create the no of colums in the grid also use for medimum and large devices-->  
            <div class="login-panel panel panel-success">  
                <div class="panel-heading">  
                    <h3 class="panel-title">Registration</h3>  
                </div>  
                <div class="panel-body">  
                    <form role="form" method="post" action="registration.php">  
                        <fieldset>  
                            <div class="form-group">  
                                <input class="form-control" placeholder="Username" name="name" type="text" autofocus>  
                            </div>  
  
                            <div class="form-group">  
                                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>  
                            </div>  
                            <div class="form-group">  
                                <input class="form-control" placeholder="Password" name="pass" type="password" value="">  
                            </div>  
  
  
                            <input class="btn btn-lg btn-success btn-block" type="submit" value="register" name="register" >  
  
                        </fieldset>  
                    </form>  
                    <center><b>Already registered ?</b> <br></b><a href="login.php">Login here</a></center><!--for centered text-->  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
  
</body>  
  
</html>  
  
<?php  
  
include("database/db_conection.php");//make connection here  
if(isset($_POST['register']))  
{  
    $user_name=$_POST['name'];//here getting result from the post array after submitting the form.  
    $user_pass=$_POST['pass'];//same  
    $user_email=$_POST['email'];//same  
  
  
    if($user_name=='')  
    {  
        //javascript use for input checking  
        echo"<script>alert('Please enter the name')</script>";  
exit();//this use if first is not work then other will not show  
    }  
  
    if($user_pass=='')  
    {  
        echo"<script>alert('Please enter the password')</script>";  
exit();  
    }  
  
    if($user_email=='')  
    {  
        echo"<script>alert('Please enter the email')</script>";  
    exit();  
    }  
//here query check weather if user already registered so can't register again.  
    $check_email_query="select * from users WHERE user_email='$user_email'";  
    $run_query=mysqli_query($dbcon,$check_email_query);  
  
    if(mysqli_num_rows($run_query)>0)  
    {  
echo "<script>alert('Email $user_email is already exist in our database, Please try another one!')</script>";  
exit();  
    }  
//insert the user into the database.  
    $insert_user="insert into users (user_name,user_pass,user_email) VALUE ('$user_name','$user_pass','$user_email')";  
    if(mysqli_query($dbcon,$insert_user))  
    {  
        echo"<script>window.open('welcome.php','_self')</script>";  
    }  
  
  
  
}  
  
?>  
register

Login.php
<?php  
session_start();//session starts here  
  
?>  
  
  
  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css">  
    <title>Login</title>  
</head>  
<style>  
    .login-panel {  
        margin-top: 150px;  
  
</style>  
  
<body>  
  
  
<div class="container">  
    <div class="row">  
        <div class="col-md-4 col-md-offset-4">  
            <div class="login-panel panel panel-success">  
                <div class="panel-heading">  
                    <h3 class="panel-title">Sign In</h3>  
                </div>  
                <div class="panel-body">  
                    <form role="form" method="post" action="login.php">  
                        <fieldset>  
                            <div class="form-group"  >  
                                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>  
                            </div>  
                            <div class="form-group">  
                                <input class="form-control" placeholder="Password" name="pass" type="password" value="">  
                            </div>  
  
  
                                <input class="btn btn-lg btn-success btn-block" type="submit" value="login" name="login" >  
  
                            <!-- Change this to a button or input when using this as a form -->  
                          <!--  <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a> -->  
                        </fieldset>  
                    </form>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
  
  
</body>  
  
</html>  
  
<?php  
  
include("database/db_conection.php");  
  
if(isset($_POST['login']))  
{  
    $user_email=$_POST['email'];  
    $user_pass=$_POST['pass'];  
  
    $check_user="select * from users WHERE user_email='$user_email'AND user_pass='$user_pass'";  
  
    $run=mysqli_query($dbcon,$check_user);  
  
    if(mysqli_num_rows($run))  
    {  
        echo "<script>window.open('welcome.php','_self')</script>";  
  
        $_SESSION['email']=$user_email;//here session is used and value of $user_email store in $_SESSION.  
  
    }  
    else  
    {  
      echo "<script>alert('Email or password is incorrect!')</script>";  
    }  
}  
?>  
login

Logout.php
<?php  
/** 
 * Created by PhpStorm. 
 * User: Ehtesham Mehmood 
 * Date: 11/21/2014 
 * Time: 2:46 AM 
 */  
  
session_start();//session is a way to store information (in variables) to be used across multiple pages.  
session_destroy();  
header("Location: login.php");//use for the redirection to some page  
?> 
Welcome.php

<?php   session_start();      if(!$_SESSION['email'])   {          header("Location: login.php");//redirect to login page to secure the welcome page without login access.   }      ?>      <html>   <head>          <title>           Registration       </title>   </head>      <body>   <h1>Welcome</h1><br>   <?php   echo $_SESSION['email'];   ?>         <h1><a href="logout.php">Logout here</a> </h1>         </body>      </html>  Admin_login.php

<html>   <head lang="en">       <meta charset="UTF-8">       <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css">       <title>Admin Login</title>   </head>   <style>       .login-panel {           margin-top: 150px;      </style>      <body>      <div class="container">       <div class="row">           <div class="col-md-4 col-md-offset-4">               <div class="login-panel panel panel-success">                   <div class="panel-heading">                       <h3 class="panel-title">Sign In</h3>                   </div>                   <div class="panel-body">                       <form role="form" method="post" action="admin_login.php">                           <fieldset>                               <div class="form-group"  >                                   <input class="form-control" placeholder="Name" name="admin_name" type="text" autofocus>                               </div>                               <div class="form-group">                                   <input class="form-control" placeholder="Password" name="admin_pass" type="password" value="">                               </div>                                     <input class="btn btn-lg btn-success btn-block" type="submit" value="login" name="admin_login" >                                 </fieldset>                       </form>                   </div>               </div>           </div>       </div>   </div>         </body>      </html>      <?php   /**   * Created by PhpStorm.   * User: Ehtesham Mehmood   * Date: 11/24/2014   * Time: 3:26 AM   */   include("database/db_conection.php");      if(isset($_POST['admin_login']))//this will tell us what to do if some data has been post through form with button.   {       $admin_name=$_POST['admin_name'];       $admin_pass=$_POST['admin_pass'];          $admin_query="select * from admin where admin_name='$admin_name' AND admin_pass='$admin_pass'";          $run_query=mysqli_query($dbcon,$admin_query);          if(mysqli_num_rows($run_query)>0)       {              echo "<script>window.open('view_users.php','_self')</script>";       }       else {echo"<script>alert('Admin Details are incorrect..!')</script>";}      }      ?>  

View_users.php
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css"> <!--css file link in bootstrap folder-->  
    <title>View Users</title>  
</head>  
<style>  
    .login-panel {  
        margin-top: 150px;  
    }  
    .table {  
        margin-top: 50px;  
  
    }  
  
</style>  
  
<body>  
  
<div class="table-scrol">  
    <h1 align="center">All the Users</h1>  
  
<div class="table-responsive"><!--this is used for responsive display in mobile and other devices-->  
  
  
    <table class="table table-bordered table-hover table-striped" style="table-layout: fixed">  
        <thead>  
  
        <tr>  
  
            <th>User Id</th>  
            <th>User Name</th>  
            <th>User E-mail</th>  
            <th>User Pass</th>  
            <th>Delete User</th>  
        </tr>  
        </thead>  
  
        <?php  
        include("database/db_conection.php");  
        $view_users_query="select * from users";//select query for viewing users.  
        $run=mysqli_query($dbcon,$view_users_query);//here run the sql query.  
  
        while($row=mysqli_fetch_array($run))//while look to fetch the result and store in a array $row.  
        {  
            $user_id=$row[0];  
            $user_name=$row[1];  
            $user_email=$row[2];  
            $user_pass=$row[3];  
  
  
  
        ?>  
  
        <tr>  
<!--here showing results in the table -->  
            <td><?php echo $user_id;  ?></td>  
            <td><?php echo $user_name;  ?></td>  
            <td><?php echo $user_email;  ?></td>  
            <td><?php echo $user_pass;  ?></td>  
            <td><a href="delete.php?del=<?php echo $user_id ?>"><button class="btn btn-danger">Delete</button></a></td> <!--btn btn-danger is a bootstrap button to show danger-->  
        </tr>  
  
        <?php } ?>  
  
    </table>  
        </div>  
</div>  
  
  
</body>  
  
</html>  
user status

Db_conection.php
<?php  
/** 
 * Created by PhpStorm. 
 * User: Ehtesham Mehmood 
 * Date: 11/21/2014 
 * Time: 1:13 AM 
 */  
$dbcon=mysqli_connect("localhost","root","");  
mysqli_select_db($dbcon,"users");  
?> 
Delete.php

<?php   /**   * Created by PhpStorm.   * User: Ehtesham Mehmood   * Date: 11/24/2014   * Time: 11:55 PM   */   include("database/db_conection.php");   $delete_id=$_GET['del'];   $delete_query="delete  from users WHERE id='$delete_id'";//delete query   $run=mysqli_query($dbcon,$delete_query);   if($run)   {   //javascript function to open in the same window        echo "<script>window.open('view_users.php?deleted=user has been deleted','_self')</script>";   }      ?>





Comments

Post a Comment

Popular posts from this blog

Customize radio buttons and checkboxes with CSS sprites

-
Image
To replace a radio button or a checkbox with a sprite, you first need to create the sprite image. For this free tutorial, we use the following sprites: Create the HTML Once you’ve created your sprite images, you will need to create the HTML. Below you will find the HTML we created for this demo. If you need more information about this, consult the following article:  Customize radio buttons and checkboxes with only CSS Radio buttons HTML: <input type="checkbox" id="checkbox-default-1" name="checkbox-default" class="default"> <label for="checkbox-default-1">Checkbox 1</label> <input type="checkbox" id="checkbox-default-2" name="checkbox-default" class="default"> <label for="checkbox-default-2">Checkbox 2</label> <input type="checkbox" id="checkbox-default-3" name="checkbox-default" class="default&
Read more

Real-Time Web Interface to MQTT using Socket.io and Node.js

-
Image
Real-Time Web Interface to MQTT using Socket.io and Node.js First, all credit for this tutorial goes to  Robert Hekkers Blog .  I've altered it slightly to pick up newer versions of the various javascript libraries. If you've followed along with my  earlier post , you now have MQTT running on your Raspberry Pi, and an Arduino IoT client that can publish and subscribe to MQTT packets.  The next step is developing a real-time web interface that can control your MQTT network. Why Socket.io and Node.js? Web browsers typically operate by pulling data from a server when you click on a link.  Servers don't usually keep an open connection to the browsers it has serviced, so if some event happens on the server side, the server cannot push that event to your browser, unless you refresh the page. That's where Socket.io comes in handy.  Socket.io maintains an open connection between the server and the browser, which enables the server to push updates to the browser as they
Read more