Admin Panel ( PHP, SQL, AJAX, HTML, CSS)

Vaibhav Mishra
Dec 21, 2020
2 min read

Updated: Dec 23, 2020

Admin Panel allows a group of administrators to monitor or change the working website.

It keeps track of Admin login details and their working.

I used HTML and CSS to design the front-end of the application.

A code snippet is attached:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Admin Panel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

 <!--bootstrap4 library linked-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

 <!--custom style-->
  <style type="text/css">
 .registration-form{
 background: #f7f7f7;
 padding: 20px;
 
 margin: 100px 0px;
    }
 .err-msg{
 color:red;
    }
 .registration-form form{
 border: 1px solid #e8e8e8;
 padding: 10px;
 background: #f3f3f3;
    }
 </style>
</head>
<body>

<div class="container-fluid">
 <div class="row">
   <div class="col-sm-4">
   </div>
   <div class="col-sm-4">
 
 <!--====registration form====-->
    <div class="registration-form">
      <h4 class="text-center">Admin Panel</h4>
      <p class="text-success text-center"><?php echo $call_login; ?></p>

      <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
 
 
 <!--// Email//-->
        <div class="form-group">
            <label>Email:</label>
            <input type="text" class="form-control" placeholder="Enter Email" name="email" value="<?php echo $set_email; ?>">
            <p class="err-msg">
            <?php if($emailErr!=1){ echo $emailErr; } ?>
            </p>
        </div>
 
 <!--//Password//-->
        <div class="form-group">
            <label>Password:</label>
            <input type="password" class="form-control" placeholder="Enter Password" name="password">
            <p class="err-msg">
            <?php if($passErr!=1){ echo $passErr; } ?>
            </p>
        </div>

 
        <button type="submit" class="btn btn-secondary" name="login">Login</button>
      </form>
    </div>
   </div>
   <div class="col-sm-4">
   </div>
 </div>
 
</div>

</body>
</html>

MySql was used to create the relevant databases and further was attached to the web app via a php code:

<?php
$hostname     = "localhost"; // Enter Your Host Name
$username     = "root";      // Enter Your Table username
$password     = "";          // Enter Your Table Password
$databasename = "admin_panel"; // Enter Your database Name


$conn = new mysqli($hostname, $username, $password, $databasename);

// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
}


?>

This software also has a feature to change the theme settings of the website.

I used XAMPP in order to host the application on my local server. Although Apache, WAMP etc can also be used.

I have uploaded the whole code in my github repository. Feel free to have a look.

Constructive comments are most welcome. Here is a video to get an idea of the Admin Panel's working.

Admin Panel ( PHP, SQL, AJAX, HTML, CSS)

Recent Posts

Comments