How to create admin login page using PHP ?

Follow the steps to create admin login page using PHP:
Here, we have created a login page of admin, connected with the database, or whose information to login the page is already stored in our database.

1. Create Database: Create a database using XAMPP, the database is named “loginpage” here. You can give any name to your database.



2. Create Table: Create a table named “adminlogin”, inside “loginpage” database.

3. Create Table Structure: The table “adminlogin” should contain three fields.

  • id – primary key – auto increment
  • adminname – varchar(100)
  • password – varchar(100)

The datatype for adminname and password is varchar. The size can be alter as per the requirement. However, 100 is sufficient, and the datatype for “id” is int and it is a primary key.
A primary key, also called a primary keyword is a key in a relational database that is unique for each record. It is a unique identifier, such as a driver’s license number, telephone number (including area code), or vehicle identification number (VIN).

The structure of table will look like this

4. Insert admin login information: Here, the information of 2 admin are inserted. You can add as many as you want.

Or you can write sql query to insert the values.

After inserting the values, the table will look like this.

5. Create a folder which includes these following files: The folder should be in “D:\xampp\htdocs\” (or where your XAMPP is installed).

  • Filename: index.php
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href=
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="login.css">
        <title>Login Page</title>
    </head>
      
    <body>
        <form action="validate.php" method="post">
            <div class="login-box">
                <h1>Login</h1>
      
                <div class="textbox">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <input type="text" placeholder="Adminname"
                             name="adminname" value="">
                </div>
      
                <div class="textbox">
                    <i class="fa fa-lock" aria-hidden="true"></i>
                    <input type="password" placeholder="Password"
                             name="password" value="">
                </div>
      
                <input class="button" type="submit"
                         name="login" value="Sign In">
            </div>
        </form>
    </body>
      
    </html>

    chevron_right

    
    

  • Filename: connection.php
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?php
      
    $conn = "";
       
    try {
        $servername = "localhost:3306";
        $dbname = "loginPage";
        $username = "root";
        $password = "";
       
        $conn = new PDO(
            "mysql:host=$servername; dbname=loginPage",
            $username, $password
        );
          
       $conn->setAttribute(PDO::ATTR_ERRMODE,
                        PDO::ERRMODE_EXCEPTION);
    }
    catch(PDOException $e) {
        echo "Connection failed: " . $e->getMessage();
    }
      
    ?>

    chevron_right

    
    

  • Filename: index.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: url() no-repeat;
            background-size: cover;
        }
      
        .login-box {
            width: 280px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: ;
        }
      
        .login-box h1 {
            float: left;
            font-size: 40px;
      
            border-bottom: 4px solid #191970;
            margin-bottom: 50px;
            padding: 13px;
        }
      
        .textbox {
            width: 100%;
            overflow: hidden;
            font-size: 20px;
            padding: 8px 0;
            margin: 8px 0;
            border-bottom: 1px solid #191970;
        }
      
        .fa {
            width: px;
            float: left;
            text-align: center;
        }
      
        .textbox input {
            border: none;
            outline: none;
            background: none;
      
            font-size: 18px;
            float: left;
            margin: 0 10px;
        }
      
        .button {
            width: 100%;
            padding: 8px;
            color: #ffffff;
            background: none #191970;
            border: none;
            border-radius: 6px;
            font-size: 18px;
            cursor: pointer;
            margin: 12px 0;
        }
    </style>

    chevron_right

    
    

  • Filename: validate.php
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?php
      
    include_once('connection.php');
       
    function test_input($data) {
          
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
       
    if ($_SERVER["REQUEST_METHOD"]== "POST") {
          
        $adminname = test_input($_POST["adminname"]);
        $password = test_input($_POST["password"]);
        $stmt = $conn->prepare("SELECT * FROM adminlogin");
        $stmt->execute();
        $users = $stmt->fetchAll();
          
        foreach($users as $user) {
              
            if(($user['adminname'] == $adminname) && 
                ($user['password'] == $password)) {
                    header("Location: adminpage.php");
            }
            else {
                echo "<script language='javascript'>";
                echo "alert('WRONG INFORMATION')";
                echo "</script>";
                die();
            }
        }
    }
      
    ?>

    chevron_right

    
    

  • Filename: adminpage.php Add anything that you want to display to the admin page.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <h2>Hello Admin</h2>

    chevron_right

    
    

6. After completing all thee above steps, now follow the steps:

  • Run XAMPP
  • Start Apache and MySQL server
  • Type http://localhost/loginPage/ in your browser.

This login page will appear.

If you enter the correct credentials i.e. adminname and password, then you will be logged-in to “admin.php” page.

else, you get an error pop-up alert.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.