Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create admin login page using PHP?

  • Difficulty Level : Hard
  • Last Updated : 31 Jul, 2021

Follow the steps to create an admin login page using PHP: 
Here, we have created a login page of admin, connected with the database, or whose information to log in to 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.
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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 altered 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 the 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 an SQL query to insert the values. 
 



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

5. Create a folder that includes the following files: The folder should be in “D:\xampp\htdocs\” (or where your XAMPP is installed). On Linux “/opt/lampp/htdocs”.
 

  • Filename: index.php
     

html




<!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>
  • Filename: connection.php 
     

php




<?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();
}
  
?>
  • Filename: login.css
     

css




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: #191970;
}
  
.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;
}
  • Filename: validate.php
     

php




<?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();
        }
    }
}
  
?>
  • Filename: adminpage.php Add anything that you want to display to the admin page.
     

html




<h2>Hello Admin</h2>

6. After completing all the 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. admin name and password, then you will be logged-in to the “admin.php” page. 
 

else, you get an error pop-up alert. 
 

 

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

PHP is a server-side scripting language designed specifically for web development. You can learn PHP from the ground up by following this PHP Tutorial and PHP Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!