Introduction

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 posted this PHP Registration Script on my personal blog. You can also check it.
The following are the points we will be learning in this article,
  1. Creating a Database in PHPMyAdmin.
  2. Create a connection with the 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 the Users table
Create columns
Crate Admin Table
Admin Table
Create Admin Columns
create admin column
Registration.php
  1. <html>
  2. <head lang="en">
  3. <meta charset="UTF-8">
  4. <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css">
  5. <title>Registration</title>
  6. </head>
  7. <style>
  8. .login-panel {
  9. margin-top: 150px;
  11. </style>
  12. <body>
  14. <div class="container"><!-- container class is used to centered the body of the browser with some decent width-->
  15. <div class="row"><!-- row class is used for grid system in Bootstrap-->
  16. <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-->
  17. <div class="login-panel panel panel-success">
  18. <div class="panel-heading">
  19. <h3 class="panel-title">Registration</h3>
  20. </div>
  21. <div class="panel-body">
  22. <form role="form" method="post" action="registration.php">
  23. <fieldset>
  24. <div class="form-group">
  25. <input class="form-control" placeholder="Username" name="name" type="text" autofocus>
  26. </div>
  28. <div class="form-group">
  29. <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
  30. </div>
  31. <div class="form-group">
  32. <input class="form-control" placeholder="Password" name="pass" type="password" value="">
  33. </div>
  36. <input class="btn btn-lg btn-success btn-block" type="submit" value="register" name="register" >
  38. </fieldset>
  39. </form>
  40. <center><b>Already registered ?</b> <br></b><a href="login.php">Login here</a></center><!--for centered text-->
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  47. </body>
  49. </html>
  51. <?php
  53. include("database/db_conection.php");//make connection here
  54. if(isset($_POST['register']))
  55. {
  56. $user_name=$_POST['name'];//here getting result from the post array after submitting the form.
  57. $user_pass=$_POST['pass'];//same
  58. $user_email=$_POST['email'];//same
  61. if($user_name=='')
  62. {
  63. //javascript use for input checking
  64. echo"<script>alert('Please enter the name')</script>";
  65. exit();//this use if first is not work then other will not show
  66. }
  68. if($user_pass=='')
  69. {
  70. echo"<script>alert('Please enter the password')</script>";
  71. exit();
  72. }
  74. if($user_email=='')
  75. {
  76. echo"<script>alert('Please enter the email')</script>";
  77. exit();
  78. }
  79. //here query check weather if user already registered so can't register again.
  80. $check_email_query="select * from users WHERE user_email='$user_email'";
  81. $run_query=mysqli_query($dbcon,$check_email_query);
  83. if(mysqli_num_rows($run_query)>0)
  84. {
  85. echo "<script>alert('Email $user_email is already exist in our database, Please try another one!')</script>";
  86. exit();
  87. }
  88. //insert the user into the database.
  89. $insert_user="insert into users (user_name,user_pass,user_email) VALUE ('$user_name','$user_pass','$user_email')";
  90. if(mysqli_query($dbcon,$insert_user))
  91. {
  92. echo"<script>window.open('welcome.php','_self')</script>";
  93. }
  94. }
  95. ?>
register
Login.php
  1. <?php
  2. session_start();//session starts here
  4. ?>
  6. <html>
  7. <head lang="en">
  8. <meta charset="UTF-8">
  9. <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css">
  10. <title>Login</title>
  11. </head>
  12. <style>
  13. .login-panel {
  14. margin-top: 150px;
  16. </style>
  18. <body>
  20. <div class="container">
  21. <div class="row">
  22. <div class="col-md-4 col-md-offset-4">
  23. <div class="login-panel panel panel-success">
  24. <div class="panel-heading">
  25. <h3 class="panel-title">Sign In</h3>
  26. </div>
  27. <div class="panel-body">
  28. <form role="form" method="post" action="login.php">
  29. <fieldset>
  30. <div class="form-group" >
  31. <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
  32. </div>
  33. <div class="form-group">
  34. <input class="form-control" placeholder="Password" name="pass" type="password" value="">
  35. </div>
  38. <input class="btn btn-lg btn-success btn-block" type="submit" value="login" name="login" >
  40. <!-- Change this to a button or input when using this as a form -->
  41. <!-- <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a> -->
  42. </fieldset>
  43. </form>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </body>
  51. </html>
  53. <?php
  55. include("database/db_conection.php");
  57. if(isset($_POST['login']))
  58. {
  59. $user_email=$_POST['email'];
  60. $user_pass=$_POST['pass'];
  62. $check_user="select * from users WHERE user_email='$user_email'AND user_pass='$user_pass'";
  64. $run=mysqli_query($dbcon,$check_user);
  66. if(mysqli_num_rows($run))
  67. {
  68. echo "<script>window.open('welcome.php','_self')</script>";
  70. $_SESSION['email']=$user_email;//here session is used and value of $user_email store in $_SESSION.
  72. }
  73. else
  74. {
  75. echo "<script>alert('Email or password is incorrect!')</script>";
  76. }
  77. }
  78. ?>
login
Logout.php
  1. <?php
  2. /**
  3. * Created by PhpStorm.
  4. * User: Ehtesham Mehmood
  5. * Date: 11/21/2014
  6. * Time: 2:46 AM
  7. */
  9. session_start();//session is a way to store information (in variables) to be used across multiple pages.
  10. session_destroy();
  11. header("Location: login.php");//use for the redirection to some page
  12. ?>
Welcome.php
  1. <?php
  2. session_start();
  4. if(!$_SESSION['email'])
  5. {
  7. header("Location: login.php");//redirect to the login page to secure the welcome page without login access.
  8. }
  10. ?>
  12. <html>
  13. <head>
  15. <title>
  16. Registration
  17. </title>
  18. </head>
  20. <body>
  21. <h1>Welcome</h1><br>
  22. <?php
  23. echo $_SESSION['email'];
  24. ?>
  25. <h1><a href="logout.php">Logout here</a> </h1>
  26. </body>
  28. </html>
Admin_login.php
  1. <html>
  2. <head lang="en">
  3. <meta charset="UTF-8">
  4. <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css">
  5. <title>Admin Login</title>
  6. </head>
  7. <style>
  8. .login-panel {
  9. margin-top: 150px;
  11. </style>
  13. <body>
  15. <div class="container">
  16. <div class="row">
  17. <div class="col-md-4 col-md-offset-4">
  18. <div class="login-panel panel panel-success">
  19. <div class="panel-heading">
  20. <h3 class="panel-title">Sign In</h3>
  21. </div>
  22. <div class="panel-body">
  23. <form role="form" method="post" action="admin_login.php">
  24. <fieldset>
  25. <div class="form-group" >
  26. <input class="form-control" placeholder="Name" name="admin_name" type="text" autofocus>
  27. </div>
  28. <div class="form-group">
  29. <input class="form-control" placeholder="Password" name="admin_pass" type="password" value="">
  30. </div>
  31. <input class="btn btn-lg btn-success btn-block" type="submit" value="login" name="admin_login" >
  32. </fieldset>
  33. </form>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. </body>
  41. </html>
  43. <?php
  44. /**
  45. * Created by PhpStorm.
  46. * User: Ehtesham Mehmood
  47. * Date: 11/24/2014
  48. * Time: 3:26 AM
  49. */
  50. include("database/db_conection.php");
  52. if(isset($_POST['admin_login']))//this will tell us what to do if some data has been post through form with button.
  53. {
  54. $admin_name=$_POST['admin_name'];
  55. $admin_pass=$_POST['admin_pass'];
  57. $admin_query="select * from admin where admin_name='$admin_name' AND admin_pass='$admin_pass'";
  59. $run_query=mysqli_query($dbcon,$admin_query);
  61. if(mysqli_num_rows($run_query)>0)
  62. {
  64. echo "<script>window.open('view_users.php','_self')</script>";
  65. }
  66. else {echo"<script>alert('Admin Details are incorrect..!')</script>";}
  68. }
  70. ?>
View_users.php
  1. <html>
  2. <head lang="en">
  3. <meta charset="UTF-8">
  4. <link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css"> <!--css file link in bootstrap folder-->
  5. <title>View Users</title>
  6. </head>
  7. <style>
  8. .login-panel {
  9. margin-top: 150px;
  10. }
  11. .table {
  12. margin-top: 50px;
  13. }
  14. </style>
  16. <body>
  18. <div class="table-scrol">
  19. <h1 align="center">All the Users</h1>
  21. <div class="table-responsive"><!--this is used for responsive display in mobile and other devices-->
  22. <table class="table table-bordered table-hover table-striped" style="table-layout: fixed">
  23. <thead>
  25. <tr>
  27. <th>User Id</th>
  28. <th>User Name</th>
  29. <th>User E-mail</th>
  30. <th>User Pass</th>
  31. <th>Delete User</th>
  32. </tr>
  33. </thead>
  35. <?php
  36. include("database/db_conection.php");
  37. $view_users_query="select * from users";//select query for viewing users.
  38. $run=mysqli_query($dbcon,$view_users_query);//here run the sql query.
  40. while($row=mysqli_fetch_array($run))//while look to fetch the result and store in a array $row.
  41. {
  42. $user_id=$row[0];
  43. $user_name=$row[1];
  44. $user_email=$row[2];
  45. $user_pass=$row[3];
  47. ?>
  49. <tr>
  50. <!--here showing results in the table -->
  51. <td><?php echo $user_id; ?></td>
  52. <td><?php echo $user_name; ?></td>
  53. <td><?php echo $user_email; ?></td>
  54. <td><?php echo $user_pass; ?></td>
  55. <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-->
  56. </tr>
  58. <?php } ?>
  60. </table>
  61. </div>
  62. </div>
  63. </body>
  65. </html>
user status
Db_conection.php
  1. <?php
  2. /**
  3. * Created by PhpStorm.
  4. * User: Ehtesham Mehmood
  5. * Date: 11/21/2014
  6. * Time: 1:13 AM
  7. */
  8. $dbcon=mysqli_connect("localhost","root","");
  9. mysqli_select_db($dbcon,"users");
  10. ?>
Delete.php
  1. <?php
  2. /**
  3. * Created by PhpStorm.
  4. * User: Ehtesham Mehmood
  5. * Date: 11/24/2014
  6. * Time: 11:55 PM
  7. */
  8. include("database/db_conection.php");
  9. $delete_id=$_GET['del'];
  10. $delete_query="delete from users WHERE id='$delete_id'";//delete query
  11. $run=mysqli_query($dbcon,$delete_query);
  12. if($run)
  13. {
  14. //javascript function to open in the same window
  15. echo "<script>window.open('view_users.php?deleted=user has been deleted','_self')</script>";
  16. }
  18. ?>