Simple PHP Admin Panel (Free Source Code Download)

Welcome to a tutorial on how to create a simple PHP admin panel. Since you are reading this, I will assume that you are interested in “powering up” your existing project and want to build an administrative component to it. So here is a sharing of my own – All done in pure HTML, CSS, Javascript, and PHP. No third-party frameworks. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• Create a database and import 1-users.sql.
• Open 2-lib-admin.php, change the database settings to your own.
• Access 3a-login.php. The default user is john@doe.com, and the password is 123456.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

PART 1) USER DATABASE

-- (A) USERS TABLE
CREATE TABLE `users` (
  `user_id` bigint(20) NOT NULL,
  `user_email` varchar(255) NOT NULL,
  `user_name` varchar(255) NOT NULL,
  `user_password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `users`
  ADD PRIMARY KEY (`user_id`),
  ADD UNIQUE KEY `user_email` (`user_email`),
  ADD KEY `user_name` (`user_name`);

ALTER TABLE `users`
  MODIFY `user_id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

-- (B) DEFAULT USER
-- EMAIL: JOHN@DOE.COM | PASSWORD: 123456
INSERT INTO `users` (`user_id`, `user_email`, `user_name`, `user_password`) VALUES
(1, 'john@doe.com', 'John Doe', '$2y$10$vZJy7y4uqQQTRN3zdi2RE.5ZJJzGEEPnzEjFXm4nEOx023XQ2Qe..');

First, let us begin by dealing with the obvious – A database to hold the admin users.

• user_id Primary key and auto-increment.
• user_email User email, unique to prevent duplicates.
• user_name User name.
• user_password The user’s password.

 

 

PART 2) PHP ADMIN LIBRARY

<?php
class Admin {
  // (A) CONSTRUCTOR - CONNECT TO DATABASE
  private $pdo = null;
  private $stmt = null;
  public $error = "";
  function __construct () {
    $this->pdo = new PDO(
      "mysql:host=".DB_HOST.";dbname=".DB_NAME.";charset=".DB_CHARSET,
      DB_USER, DB_PASSWORD, [
      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
      PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ]);
  }

  // (B) DESTRUCTOR - CLOSE CONNECTION
  function __destruct () {
    if ($this->stmt !== null) { $this->stmt = null; }
    if ($this->pdo !== null) { $this->pdo = null; }
  }

  // (C) HELPER FUNCTION - RUN SQL QUERY
  function query ($sql, $data=null) {
    $this->stmt = $this->pdo->prepare($sql);
    $this->stmt->execute($data);
  }

  // (D) GET USER BY ID OR EMAIL
  function get ($id) {
    $this->query(sprintf("SELECT * FROM `users` WHERE `%s`=?",
      is_numeric($id) ? "user_id" : "user_email"
    ), [$id]);
    return $this->stmt->fetch();
  }

  // (E) SAVE USER
  function save ($name, $email, $password, $id=null) {
    // (E1) SQL & DATA
    $sql = $id==null
      ? "INSERT INTO `users` (`user_name`, `user_email`, `user_password`) VALUES (?,?,?)"
      : "UPDATE `users` SET `user_name`=?, `user_email`=?, `user_password`=? WHERE `user_id`=?" ;
    $data = [$name, $email, password_hash($password, PASSWORD_DEFAULT)];
    if ($id!=null) { $data[] = $id; }

    // (E2) RUN SQL
    $this->query($sql, $data);
    return true;
  }

  // (F) VERIFICATION
  function verify ($email, $password) {
    // (F1) GET USER
    $user = $this->get($email);
    $pass = is_array($user);

    // (F2) CHECK PASSWORD
    if ($pass) { $pass = password_verify($password, $user["user_password"]); }

    // (F3) REGISTER MEMBER INTO SESSION
    if ($pass) {
      foreach ($user as $k=>$v) { $_SESSION["admin"][$k] = $v; }
      unset($_SESSION["admin"]["user_password"]);
    }

    // (F4) RESULT
    if (!$pass) { $this->error = "Invalid email/password"; }
    return $pass;
  }
}

// (G) DATABASE SETTINGS - CHANGE TO YOUR OWN
define("DB_HOST", "localhost");
define("DB_NAME", "test");
define("DB_CHARSET", "utf8mb4");
define("DB_USER", "root");
define("DB_PASSWORD", "");

// (H) START!
session_start();
$_ADM = new Admin();

This PHP core and database library is here to help you guys develop a little faster. It may look confusing at first, but keep calm and look closely.

• (A, B, H) When $_ADM = new Admin() is created, the constructor will connect to the database. The destructor closes the connection.
• (C) query() A helper function to execute an SQL query.
• (D to F) The actual admin functions.
  • get() Get user by ID or email.
  • save() Add or update a user.
  • verify() Verify the given email and password. Register the user into $_SESSION["admin"].
• (G) The database settings, remember to change them to your own.
• (H) Start the “engine”.

 

 

PART 3) LOGIN PAGE

<?php
// (A) LOAD LIBRARY
require "2-lib-admin.php";
 
// (B) CHECK LOGIN CREDENTIALS
if (count($_POST)!=0) {
  $_ADM->verify($_POST["email"], $_POST["password"]);
}
 
// (C) REDIRECT IF SIGNED IN
if (isset($_SESSION["admin"])) {
  header("Location: 5-protected.php");
  exit();
} ?>
 
<!-- (D) LOGIN FORM -->
<?php
if ($_ADM->error!="") { echo "<div class='error'>".$_ADM->error."</div>"; }
?>
<form method="post">
  <h1>ADMIN LOGIN</h1>
  <label>Email</label>
  <input type="email" name="email" required>
  <label>Password</label>
  <input type="password" name="password" required>
  <input type="submit" value="Login">
</form>

It will be easier to study this login page from the bottom up.

• (D) A good old HTML login form.
• (A & B) On submission, we use the library to process the login request.
• (C) On successful login, we redirect the user to the “main admin page”; Any users who are already signed in will also be redirected.

 

PART 4) ADMIN HTML TEMPLATE

4A) TOP HALF

<?php
// (A) LOAD LIBRARY
require "2-lib-admin.php";

// (B) LOGOUT
if (isset($_POST["logout"])) { unset($_SESSION["admin"]); }

// (C) REDIRECT IF NOT SIGNED IN
if (!isset($_SESSION["admin"])) {
  header("Location: 3a-login.php");
  exit();
} ?>

<!-- (D) SIDEBAR -->
<div id="pgside">
  <!-- (D1) BRANDING OR USER -->
  <form id="pguser" method="post" onclick="if(confirm('Sign Off?')){this.submit();}">
    <input type="hidden" name="logout" value="1">
    <img src="potato.png" id="pguserimg">
    <div class="txt">
      <div id="pgusername"><?=$_SESSION["admin"]["user_name"]?></div>
      <div id="pguseracct">account | logoff</div>
    </div>
  </form>

  <!-- (D2) MENU ITEMS -->
  <a href="#" class="current">
    <i class="ico">&#9733;</i>
    <i class="txt">Section A</i>
  </a>
  <a href="#">
    <i class="ico">&#9728;</i>
    <i class="txt">Section B</i>
  </a>
  <a href="#">
    <i class="ico">&#9737;</i>
    <i class="txt">Section C</i>
  </a>
</div>
 
<!-- (E) MAIN -->
<main id="pgmain">

 

 

4B) BOTTOM HALF

</main>

 

4C) A QUICK WALKTHROUGH

Once again, this looks complicated. But look closely, there are only 2 main sections:

• (D) <div id="pgside"> The sidebar.
  • (D1) <form id="pguser"> The current user and hidden form for logout.
  • (D2) Insert your menu items here.
• (E) <main id="pgmain"> Main content area.

As for how the logout works, it is very similar to the login page:

• (B) When <form id="pguser"> is submitted, this will clear out $_SESSION["admin"].
• (C) The user will be redirected back to the login page; All users that are not signed in will be redirected to the login page.

 

PART 5) PROTECTED ADMIN PAGES

<?php require "4a-top.php"; ?>
Your dashboard here.
<?php require "4b-bottom.php"; ?>

That’s about it for everything, to create a protected admin page:

• Simply require "4a-top.php" at the top, and require "4b-bottom.php" at the bottom.
• Sandwich your contents in between.

 

 

 

SLIGHTLY BETTER SECURITY

This admin panel is made for simplicity and does not have the best security… I will recommend doing the following at the very least:

• Create a new lib folder.
• For Apache users, create a lib/.htaccess file with one line – Deny from all. Users can no longer access the files in lib/ through http://, but PHP can still read them.
• IIS and NGINX users – Create your own “translated .htaccess“.
• Move 2-lib-admin.php, 4a-top.php, 4b-bottom.php into lib.
• Of course, update the file paths in your scripts accordingly.
• Remember to delete 1-users.sql.

 

LINKS & REFERENCES

• CSRF Token Protection – Code Boxx
• PHP User Role Management – Code Boxx
• PHP Encrypt Decrypt Verify Password – Code Boxx
• Very Simple Pure HTML CSS Admin Panel – Code Boxx

 

YOUTUBE TUTORIAL