Creating a Simple Login Form with User Levels in PHP/MySQLi Tutorial

Language

Hello guys, I have here an example of a login form with different user levels using PHP/MySQLi. This is easy and simple. To learn how to create a simple Login Form with user levels, please continue reading and I will show you how.

Getting Started

First, you have setup the following into your local machine:

  • Download and Install the latest XAMPP
  • Download Bootstrap
  • Download jQuery
  • Download and Install any text editor such as notepad++.

Setup the Database

Follow the following step:

  1. Open the XAMPP Control Panel and start the "Apache" and "MySQL".
  2. Open a web browser and browse the PHPMyAdmin. (http://localhost/phpmyadmin)
  3. Click the "Database" located at the top-left of the page or the click the "New" hyperlink located at the side navigation bar of the page.
  4. Enter "levels" in the "Database name" input and click "Create".
  5. Navigate to SQL page. To do this, click the "SQL" Navigation Menu in the menu bar.
  6. Copy and paste the code below.
    1. CREATE TABLE `user_levels` (
    2. `username` varchar(20) NOT NULL,
    3. `password` varchar(20) NOT NULL,
    4. `userlevel` varchar(20) NOT NULL,
    5. PRIMARY KEY (`id`)
    6. ) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
    7.  
    8. INSERT INTO `user_levels` VALUES ('1', 'user1', 'user1', '1');
    9. INSERT INTO `user_levels` VALUES ('2', 'user2', 'user2', '2');
    10. INSERT INTO `user_levels` VALUES ('3', 'user3', 'user3', '3');
    11. INSERT INTO `user_levels` VALUES ('4', 'user4', 'user4', '4');
    12.  
  7. Click the "Go" button.

Creating the Pages Layout.

First, open the "htdocs" directory of xampp and create a new folder. In my case, I named my folder as "user_levels". Then extract the bootsrap zip file inside the folder. All files that will be created below must be saved in this directory.

Creating a Database connection

Create a new php file naming "connect.php". Copy and paste the following script.

  1. <?php
  2. $conn = mysqli_connect("localhost","root","","levels") or die(mysqli_error()."Cannot connect to the database.");
  3. ?>
After that, create a new file "index.php". The script/code below must be contained in your "index.php" file.
  1. <?php include("connect.php"); ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <meta name="description" content="">
  9. <meta name="author" content="">
  10. <link rel="icon" href="../../favicon.ico">
  11. <title>User - Levels</title>
  12. <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  13. <link href="css/bootstrap.min.css" rel="stylesheet">
  14.  
  15. </head>
  16. <body>
  17.  
  18. <div class="container">
  19. <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 offset-md-3 col-sm-8 offset-sm-2">
  20. <div class="card card-info" >
  21. <div class="card-header bg-info">
  22. <h5 class="card-title text-white">Sign In</h5>
  23.  
  24. </div>
  25.  
  26. <div style="padding-top:30px" class="card-body" >
  27. <form action="login_action.php" method="post">
  28.  
  29. <div class="input-group py-1">
  30. <span class="input-group-text"><i class="fa fa-user"></i></span>
  31. <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username">
  32. </div>
  33.  
  34. <div class="input-group py-1">
  35. <span class="input-group-text"><i class="fa fa-lock"></i></span>
  36. <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
  37. </div>
  38.  
  39. <div style="margin-top:10px" class="form-group">
  40. <!-- Button -->
  41.  
  42. <div class="col-sm-12 controls">
  43. <button type="submit" class="btn btn-success float-end"><span class="fa fa-check"></span> Login</button>
  44.  
  45. </div>
  46. </div>
  47. </form>
  48. </div>
  49. </div>
  50. </div>
  51. </div> <!-- /container -->
  52.  
  53. </body>
  54. <script src="js/jquery-3.5.1.min.js"></script>
  55. <script src="js/bootstrap.min.js"></script>
  56. </html>

Next, we will create a PHP query script to check if the user credential entered exist in the database. Create a new file for "login_action.php" and paste the code below.

  1. <?php
  2. //include the database connection
  3. include("connect.php");
  4. $tbl_name="user_levels"; // Table name
  5.  
  6. $username=$_POST['username']; // username sent from form
  7. $password=$_POST['password']; // password sent from form
  8.  
  9.  
  10. // clean the strings
  11. $username = stripslashes($username);
  12. $password = stripslashes($password);
  13. $username = mysqli_real_escape_string($conn,$username);
  14. $password = mysqli_real_escape_string($conn,$password);
  15.  
  16. //Query
  17. $sql="SELECT * FROM $tbl_name WHERE username='$username' and password='$password'";
  18. $result=mysqli_query($conn,$sql);
  19. // mysqli_num_rows is counting table row
  20. if(mysqli_num_rows($result) > 0){
  21. $rows = mysqli_fetch_assoc($result);
  22.  
  23.  
  24. //Direct pages with different user levels
  25. if ($rows['userlevel'] == '1') {
  26. header('location: user1.html'); //User1
  27. session_register("username");
  28. session_register("password");
  29.  
  30. }
  31. else
  32. if ($rows['userlevel'] == '2') {
  33. header('location: user2.html'); //User2
  34. session_register("username");
  35. session_register("password");
  36.  
  37. }
  38. else
  39. if ($rows['userlevel'] == '3') {
  40. header('location: user3.html'); //user 3
  41. session_register("username");
  42. session_register("password");
  43.  
  44. }
  45. else
  46. if ($rows['userlevel'] == '4') {
  47. header('location: user4.html'); // user4
  48. session_register("username");
  49. session_register("password");
  50.  
  51. }
  52. }
  53. else
  54. {
  55. // Error login
  56. echo "<script>alert('Access Denied!');
  57. window.location='index.php';
  58. </script>";
  59. }
  60.  
  61. ?>

Then, create 4 html files for naming "user1.html", "user2.html", "user3.html", and "user4.html". Enter an example string in each html files and make sure that you the content are different. In my case, I use "Welcome User" + [user_level] .

That's it, now test your work. The user credentials are provided below. If you may encounter any error, just compare your work and the code above in each file. You may also download my work for this tutorial. The Download button is located below.

User Credentials

username: user1 , user2 , user3 , user4
password: user1 , user2 , user3 , user4

I hope this tutorial will help you.

Enjoy :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

Thank you friends have been willing to share. I am from Indonesia

Add new comment