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

Submitted by GeekRedz on Friday, January 22, 2021 - 16:13.

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:

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

<?php
$conn = mysqli_connect("localhost","root","","levels") or die(mysqli_error()."Cannot connect to the database.");
?>

After that, create a new file "index.php". The script/code below must be contained in your "index.php" file.

<?php include("connect.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">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>User - Levels</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
  </head>
  <body>
 
    <div class="container">    
        <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 offset-md-3 col-sm-8 offset-sm-2">                    
            <div class="card card-info" >
                    <div class="card-header  bg-info">
                        <h5 class="card-title text-white">Sign In</h5>
                      
                    </div>     
 
                    <div style="padding-top:30px" class="card-body" >
                        <form action="login_action.php" method="post">
                                    
                                <div class="input-group py-1">
                                        <span class="input-group-text"><i class="fa fa-user"></i></span>
                                        <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username">                                        
                                    </div>
                                
                                <div class="input-group py-1">
                                        <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                        <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                                    </div>
 
                                <div style="margin-top:10px" class="form-group">
                                    <!-- Button -->
 
                                    <div class="col-sm-12 controls">
                                      <button type="submit" class="btn btn-success float-end"><span class="fa fa-check"></span> Login</button>
 
                                    </div>
                                </div>
                                                        </form>
                         </div>
                                        </div>
                                </div> 
                        </div> <!-- /container -->
 
  </body>
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</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.

<?php
//include the database connection
include("connect.php"); 
$tbl_name="user_levels"; // Table name 
 
$username=$_POST['username']; // username sent from form 
$password=$_POST['password']; // password sent from form 
 
 
// clean the strings 
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysqli_real_escape_string($conn,$username);
$password = mysqli_real_escape_string($conn,$password);
 
//Query
$sql="SELECT * FROM $tbl_name WHERE username='$username' and password='$password'";
$result=mysqli_query($conn,$sql);
// mysqli_num_rows is counting table row
if(mysqli_num_rows($result) > 0){
$rows = mysqli_fetch_assoc($result);
 
 
//Direct pages with different user levels
if ($rows['userlevel'] == '1') {
        header('location: user1.html'); //User1 
        session_register("username");
        session_register("password");
        
}
else
if ($rows['userlevel'] == '2') {
        header('location: user2.html'); //User2 
        session_register("username");
        session_register("password"); 
        
} 
else
if ($rows['userlevel'] == '3') {
        header('location: user3.html'); //user 3 
        session_register("username");
        session_register("password"); 
 
} 
else
if ($rows['userlevel'] == '4') {
        header('location: user4.html'); // user4 
        session_register("username");
        session_register("password"); 
        
} 
}
else
{ 
        // Error login
echo "<script>alert('Access Denied!');
                                                window.location='index.php';
                                                </script>";
}
 
?>

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.