PHP8 Login and Register Admin dashboard
Step 1: db_user
CREATE TABLE users (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
email VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);Execute the following SQL query to create the users table inside your MySQL database.
Step 2: config.php
After creating the table, we need to create a PHP script to connect to the MySQL database server. Let's create a file named "config.php" and put the following code inside it.
<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '123456');
define('DB_NAME', 'login_system');
/* Attempt to connect to MySQL database */
$conection_db = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Check connection
if($conection_db === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>Step 3: php_register.php
Let's create another PHP file "register.php" and put the following example code in it. This example code will create a web form that allows users to register themselves.
This script will also generate errors if a user tries to submit the form without entering any value, or if the username entered by the user is already taken by another user.
<?php
// Define variables and initialize with empty values
$email = $password = $confirm_password = "";
$email_err = $password_err = $confirm_password_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// Validate email
if(empty(trim($_POST["email"])))
{
$email_err = "Please enter a email.";
}
else
{
// Prepare a select statement
$sql = "SELECT id FROM users WHERE email = ?";
if($stmt = mysqli_prepare($conection_db, $sql))
{
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_email);
// Set parameters
$param_email = trim($_POST["email"]);
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt))
{
/* store result */
mysqli_stmt_store_result($stmt);
if(mysqli_stmt_num_rows($stmt) == 1)
{
$email_err = "This email is already taken.";
}
else
{
$email = trim($_POST["email"]);
}
}
else
{
echo "Oops! Something went wrong. Please try again later.";
}
// Close statement
mysqli_stmt_close($stmt);
}
}
// Validate password
if(empty(trim($_POST["password"])))
{
$password_err = "Please enter a password.";
}
elseif
(strlen(trim($_POST["password"])) < 6)
{
$password_err = "Password must have atleast 6 characters.";
}
else
{
$password = trim($_POST["password"]);
}
// Validate confirm password
if(empty(trim($_POST["confirm_password"])))
{
$confirm_password_err = "Please confirm password.";
}
else
{
$confirm_password = trim($_POST["confirm_password"]);
if(empty($password_err) && ($password != $confirm_password))
{
$confirm_password_err = "Password did not match.";
}
}
// Check input errors before inserting in database
if(empty($email_err) && empty($password_err) && empty($confirm_password_err))
{
// Prepare an insert statement
$sql = "INSERT INTO users (email, password) VALUES (?, ?)";
if($stmt = mysqli_prepare($conection_db, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "ss", $param_email, $param_password);
// Set parameters
$param_email = $email;
$param_password = password_hash($password, PASSWORD_DEFAULT); // Creates a password hash
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt))
{
// Redirect to login page
header("location: login.php");
}
else
{
echo "Something went wrong. Please try again later.";
}
// Close statement
mysqli_stmt_close($stmt);
}
}
// Close connection
mysqli_close($conection_db);
}Step 4: register.php
Let's create another PHP file "register.php" and put the following example code in it. This example code will create a web form that allows users to register themselves.
This script will also generate errors if a user tries to submit the form without entering any value, or if the username entered by the user is already taken by another user.
<?php
// Include config file
require_once 'config.php';
// Include register file
include 'php_register.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Start your development with a Dashboard for Bootstrap 4">
<meta name="author" content="SOENG SOUY">
<title>Register Page</title>
<!-- Favicon -->
<link href='https://www.soengsouy.com/favicon.ico' rel='icon' type='image/x-icon'/>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Argon CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
</head>
<body class="bg-default">
<style>
html, body {margin: 0; height: 100%; overflow: hidden}
@media (min-width: 992px)
{
.pt-lg-9, .py-lg-9 {
padding-top: 20rem !important;
}
}
.bg-default {
background-color: #BDD4E7 !important;
}
.help-block {
color:red;
}
</style>
<!-- Main content -->
<div class="main-content header py-7 py-lg-8 pt-lg-9">
<!-- Header -->
<!-- Page content -->
<div class="container mt--8 pb-5">
<div class="row justify-content-center">
<div class="col-lg-5 col-md-7">
<div class="card bg-secondary border-0 mb-0">
<div class="card-header bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3"><small>Sign in with</small></div>
<div class="btn-wrapper text-center">
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="assets/img/icons/common/github.svg"></span>
<span class="btn-inner--text">Github</span>
</a>
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="assets/img/icons/common/google.svg"></span>
<span class="btn-inner--text">Google</span>
</a>
</div>
</div>
<div class="card-body px-lg-5 py-lg-5">
<div class="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group mb-3 <?= (!empty($email_err)) ? 'has-error' : ''; ?>">
<div class="input-group input-group-merge input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-hat-3"></i></span>
</div>
<input type="email" class="form-control" name="email"value="<?= $email; ?>" autocomplete="email" autofocus placeholder="Enter email">
</div>
<span class="help-block"><?= $email_err; ?></span>
</div>
<div class="form-group mb-3 <?= (!empty($password_err)) ? 'has-error' : ''; ?>">
<div class="input-group input-group-merge input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-email-83"></i></span>
</div>
<input class="form-control" name="password" autocomplete="password"value="<?= $password; ?>" autofocus placeholder="password" type="password">
</div>
<span class="help-block"><?= $password_err; ?></span>
</div>
<div class="form-group mb-3 <?= (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<div class="input-group input-group-merge input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
</div>
<input type="password" class="form-control" name="confirm_password" value="<?= $confirm_password; ?>" autocomplete="confirm_password" autofocus placeholder="Confirm Password">
</div>
<span class="help-block"><?= $confirm_password_err; ?></span>
</div>
<div class="custom-control custom-control-alternative custom-checkbox">
<input class="custom-control-input" id=" customCheckLogin" type="checkbox" name="remember" id="remember">
<label class="custom-control-label" for=" customCheckLogin">
<span class="text-muted">Remember me</span>
</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary my-4">Sign up</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="login.php">Signin</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/js-cookie/js.cookie.js"></script>
<script src="assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Argon JS -->
<script src="assets/js/argon.js?v=1.2.0"></script>
</body>
</html>Step 5: Creating the login form
Building the Login System
In this section, we'll create a login form where user can enter their username and password. When a user submits the form these inputs will be verified against the credentials stored in the database, if the username and password match, the user is authorized and granted access to the site, otherwise, the login attempt will be rejected.
Step 1: Creating the Login Form
Let's create a file named "login.php" and place the following code inside it.
<?php
// Initialize the session
session_start();
// Check if the user is already logged in, if yes then redirect him to welcome page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
header("location: welcome.php");
exit;
}
// Include config file
require_once "config.php";
require_once "php_login.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Start your development with a Dashboard for Bootstrap 4">
<meta name="author" content="SOENG SOUY">
<title>Login Page</title>
<!-- Favicon -->
<link href='https://www.soengsouy.com/favicon.ico' rel='icon' type='image/x-icon'/>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Argon CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
</head>
<body class="bg-default">
<style>
html, body {margin: 0; height: 100%; overflow: hidden}
@media (min-width: 992px)
{
.pt-lg-9, .py-lg-9 {
padding-top: 20rem !important;
}
}
.bg-default {
background-color: #BDD4E7 !important;
}
.help-block {
color:red;
}
</style>
<!-- Main content -->
<div class="main-content header py-7 py-lg-8 pt-lg-9">
<!-- Header -->
<!-- Page content -->
<div class="container mt--8 pb-5">
<div class="row justify-content-center">
<div class="col-lg-5 col-md-7">
<div class="card bg-secondary border-0 mb-0">
<div class="card-header bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3"><small>Sign in with</small></div>
<div class="btn-wrapper text-center">
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="assets/img/icons/common/github.svg"></span>
<span class="btn-inner--text">Github</span>
</a>
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="assets/img/icons/common/google.svg"></span>
<span class="btn-inner--text">Google</span>
</a>
</div>
</div>
<form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="card-body px-lg-5 py-lg-5">
<div class="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<div class="form-group mb-3 <?= (!empty($email_err)) ? 'has-error' : ''; ?>">
<div class="input-group input-group-merge input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-email-83"></i></span>
</div>
<input type="email" class="form-control form__input" name="email" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success" value="<?= $email; ?>">
</div>
<span class="help-block"><?= $email_err; ?></span>
</div>
<div class="form-group <?= (!empty($password_err)) ? 'has-error' : ''; ?>">
<div class="input-group input-group-merge input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
</div>
<input type="password" class="form-control " name="password" autocomplete="current-password" placeholder="Password">
</div>
<span class="help-block"><?= $password_err; ?></span>
</div>
<div class="custom-control custom-control-alternative custom-checkbox">
<input class="custom-control-input" id=" customCheckLogin" type="checkbox" name="remember" id="remember">
<label class="custom-control-label" for=" customCheckLogin">
<span class="text-muted">Remember me</span>
</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary my-4">Sign in</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="register.php">Sign up</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/js-cookie/js.cookie.js"></script>
<script src="assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Argon JS -->
<script src="assets/js/argon.js?v=1.2.0"></script>
</body>
</html>Step 6: php_lohin_php.php
Building the Login System
In this section, we'll create a login form where user can enter their username and password. When a user submits the form these inputs will be verified against the credentials stored in the database, if the username and password match, the user is authorized and granted access to the site, otherwise, the login attempt will be rejected.
<?php
// Define variables and initialize with empty values
$email = $password = "";
$email_err = $password_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// Check if email is empty
if(empty(trim($_POST["email"])))
{
$email_err = "Please enter email.";
}
else
{
$email = trim($_POST["email"]);
}
// Check if password is empty
if(empty(trim($_POST["password"])))
{
$password_err = "Please enter your password.";
}
else
{
$password = trim($_POST["password"]);
}
// Validate credentials
if(empty($email_err) && empty($password_err))
{
// Prepare a select statement
$sql = "SELECT id, email, password FROM users WHERE email = ?";
if($stmt = mysqli_prepare($conection_db, $sql))
{
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_email);
// Set parameters
$param_email = $email;
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt))
{
// Store result
mysqli_stmt_store_result($stmt);
// Check if email exists, if yes then verify password
if(mysqli_stmt_num_rows($stmt) == 1)
{
// Bind result variables
mysqli_stmt_bind_result($stmt, $id, $email, $hashed_password);
if(mysqli_stmt_fetch($stmt))
{
if(password_verify($password, $hashed_password)){
// Password is correct, so start a new session
session_start();
// Store data in session variables
$_SESSION["loggedin"] = true;
$_SESSION["id"] = $id;
$_SESSION["email"] = $email;
// Redirect user to welcome page
header("location: welcome.php");
}
else
{
// Display an error message if password is not valid
$password_err = "The password you entered was not valid.";
}
}
}
else
{
// Display an error message if email doesn't exist
$email_err = "No account found with that email.";
}
}
else
{
echo "Oops! Something went wrong. Please try again later.";
}
// Close statement
mysqli_stmt_close($stmt);
}
}
// Close connection
mysqli_close($conection_db);
}Step 7: welcome.php
Here's the code of our "welcome.php" file, where the user is redirected after successful login.
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
<meta name="author" content="Creative Tim">
<title>soengsouy</title>
<!-- Favicon -->
<link rel="icon" href="assets/img/brand/favicon.png" type="image/png">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Page plugins -->
<!-- Argon CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
</head>
<body>
<!-- Sidenav -->
<nav class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-white" id="sidenav-main">
<div class="scrollbar-inner">
<!-- Brand -->
<div class="sidenav-header align-items-center">
<a class="navbar-brand" href="javascript:void(0)">
<img src="assets/img/brand/blue.png" class="navbar-brand-img" alt="...">
</a>
</div>
<div class="navbar-inner">
<!-- Collapse -->
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<!-- Nav items -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="examples/dashboard.html">
<i class="ni ni-tv-2 text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples/icons.html">
<i class="ni ni-planet text-orange"></i>
<span class="nav-link-text">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples/map.html">
<i class="ni ni-pin-3 text-primary"></i>
<span class="nav-link-text">Google</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples/profile.html">
<i class="ni ni-single-02 text-yellow"></i>
<span class="nav-link-text">Profile</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples/tables.html">
<i class="ni ni-bullet-list-67 text-default"></i>
<span class="nav-link-text">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples/login.html">
<i class="ni ni-key-25 text-info"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples/register.html">
<i class="ni ni-circle-08 text-pink"></i>
<span class="nav-link-text">Register</span>
</a>
</li>
</ul>
<!-- Divider -->
<hr class="my-3">
<!-- Heading -->
<h6 class="navbar-heading p-0 text-muted">
<span class="docs-normal">Documentation</span>
</h6>
<!-- Navigation -->
<ul class="navbar-nav mb-md-3">
<li class="nav-item">
<a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/getting-started/overview.html" target="_blank">
<i class="ni ni-spaceship"></i>
<span class="nav-link-text">Getting started</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/foundation/colors.html" target="_blank">
<i class="ni ni-palette"></i>
<span class="nav-link-text">Foundation</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/components/alerts.html" target="_blank">
<i class="ni ni-ui-04"></i>
<span class="nav-link-text">Components</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/plugins/charts.html" target="_blank">
<i class="ni ni-chart-pie-35"></i>
<span class="nav-link-text">Plugins</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Main content -->
<div class="main-content" id="panel">
<!-- Topnav -->
<nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Search form -->
<form class="navbar-search navbar-search-light form-inline mr-sm-3" id="navbar-search-main">
<div class="form-group mb-0">
<div class="input-group input-group-alternative input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input class="form-control" placeholder="Search" type="text">
</div>
</div>
<button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</form>
<!-- Navbar links -->
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<!-- Sidenav toggler -->
<div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ni ni-bell-55"></i>
</a>
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-right py-0 overflow-hidden">
<!-- Dropdown header -->
<div class="px-3 py-3">
<h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
</div>
<!-- List group -->
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<img alt="Image placeholder" src="assets/img/theme/team-1.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">Soeng Souy</h4>
</div>
<div class="text-right text-muted">
<small>2 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<img alt="Image placeholder" src="assets/img/theme/team-2.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">Soeng Souy</h4>
</div>
<div class="text-right text-muted">
<small>3 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">A new issue has been reported for Argon.</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<img alt="Image placeholder" src="assets/img/theme/team-3.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">Soeng Souy</h4>
</div>
<div class="text-right text-muted">
<small>5 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Your posts have been liked a lot.</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<img alt="Image placeholder" src="assets/img/theme/team-4.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">Soeng Souy</h4>
</div>
<div class="text-right text-muted">
<small>2 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<img alt="Image placeholder" src="assets/img/theme/team-5.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">Soeng Souy</h4>
</div>
<div class="text-right text-muted">
<small>3 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">A new issue has been reported for Argon.</p>
</div>
</div>
</a>
</div>
<!-- View all -->
<a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ni ni-ungroup"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default dropdown-menu-right ">
<div class="row shortcuts px-4">
<a href="#!" class="col-4 shortcut-item">
<span class="shortcut-media avatar rounded-circle bg-gradient-red">
<i class="ni ni-calendar-grid-58"></i>
</span>
<small>Calendar</small>
</a>
<a href="#!" class="col-4 shortcut-item">
<span class="shortcut-media avatar rounded-circle bg-gradient-orange">
<i class="ni ni-email-83"></i>
</span>
<small>Email</small>
</a>
<a href="#!" class="col-4 shortcut-item">
<span class="shortcut-media avatar rounded-circle bg-gradient-info">
<i class="ni ni-credit-card"></i>
</span>
<small>Payments</small>
</a>
<a href="#!" class="col-4 shortcut-item">
<span class="shortcut-media avatar rounded-circle bg-gradient-green">
<i class="ni ni-books"></i>
</span>
<small>Reports</small>
</a>
<a href="#!" class="col-4 shortcut-item">
<span class="shortcut-media avatar rounded-circle bg-gradient-purple">
<i class="ni ni-pin-3"></i>
</span>
<small>Maps</small>
</a>
<a href="#!" class="col-4 shortcut-item">
<span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
<i class="ni ni-basket"></i>
</span>
<small>Shop</small>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="assets/img/theme/team-4.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">Soeng Souy</span>
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome!</h6>
</div>
<a href="#!" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>My profile</span>
</a>
<a href="reset_password.php" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Change Password</span>
</a>
<div class="dropdown-divider"></div>
<a href="logout.php" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<!-- Header -->
<div class="header bg-primary pb-6">
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<h6 class="h2 text-white d-inline-block mb-0">Default</h6>
<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
<li class="breadcrumb-item"><a href="#">Dashboards</a></li>
<li class="breadcrumb-item active" aria-current="page">Default</li>
</ol>
</nav>
</div>
<div class="col-lg-6 col-5 text-right">
<a href="#" class="btn btn-sm btn-neutral">New</a>
<a href="#" class="btn btn-sm btn-neutral">Filters</a>
</div>
</div>
<!-- Card stats -->
<div class="row">
<div class="col-xl-3 col-md-6">
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
<span class="h2 font-weight-bold mb-0">350,897</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="ni ni-active-40"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
<span class="h2 font-weight-bold mb-0">2,356</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
<i class="ni ni-chart-pie-35"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
<span class="h2 font-weight-bold mb-0">924</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
<i class="ni ni-money-coins"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
<span class="h2 font-weight-bold mb-0">49,65%</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
<i class="ni ni-chart-bar-32"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="container-fluid mt--6">
<div class="row">
<div class="col-xl-8">
<div class="card bg-default">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
<h5 class="h3 text-white mb-0">Sales value</h5>
</div>
<div class="col">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales-dark" data-update='{"data":{"datasets":[{"data":[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}' data-prefix="$" data-suffix="k">
<a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
<span class="d-none d-md-block">Month</span>
<span class="d-md-none">M</span>
</a>
</li>
<li class="nav-item" data-toggle="chart" data-target="#chart-sales-dark" data-update='{"data":{"datasets":[{"data":[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}' data-prefix="$" data-suffix="k">
<a href="#" class="nav-link py-2 px-3" data-toggle="tab">
<span class="d-none d-md-block">Week</span>
<span class="d-md-none">W</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<!-- Chart -->
<div class="chart">
<!-- Chart wrapper -->
<canvas id="chart-sales-dark" class="chart-canvas"></canvas>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
<h5 class="h3 mb-0">Total orders</h5>
</div>
</div>
</div>
<div class="card-body">
<!-- Chart -->
<div class="chart">
<canvas id="chart-bars" class="chart-canvas"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8">
<div class="card">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Page visits</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Page name</th>
<th scope="col">Visitors</th>
<th scope="col">Unique users</th>
<th scope="col">Bounce rate</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">/argon/</th>
<td>4,569</td>
<td>340</td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row">/argon/index.html</th>
<td>3,985</td>
<td>319</td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row">/argon/charts.html</th>
<td>3,513</td>
<td>294</td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
</td>
</tr>
<tr>
<th scope="row">/argon/tables.html</th>
<td>2,050</td>
<td>147</td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
</td>
</tr>
<tr>
<th scope="row">/argon/profile.html</th>
<td>1,795</td>
<td>190</td>
<td>
<i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Social traffic</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Referral</th>
<th scope="col">Visitors</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Facebook</th>
<td>1,480</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Facebook</th>
<td>5,480</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">70%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Google</th>
<td>4,807</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">80%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Instagram</th>
<td>3,678</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">75%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">twitter</th>
<td>2,645</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">30%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer pt-0">
<div class="row align-items-center justify-content-lg-between">
<div class="col-lg-6">
<div class="copyright text-center text-lg-left text-muted">
© 2021 <a href="https://www.soengsouy.com" class="font-weight-bold ml-1" target="_blank">Soeng Souy</a>
</div>
</div>
<div class="col-lg-6">
<ul class="nav nav-footer justify-content-center justify-content-lg-end">
<li class="nav-item">
<a href="https://www.soengsouy.com" class="nav-link" target="_blank">Web Design</a>
</li>
<li class="nav-item">
<a href="https://www.soengsouy.com" class="nav-link" target="_blank">About Us</a>
</li>
<li class="nav-item">
<a href="http://soengsouy.com" class="nav-link" target="_blank">Blog</a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/js-cookie/js.cookie.js"></script>
<script src="assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="assets/vendor/chart.js/dist/Chart.extension.js"></script>
<!-- Argon JS -->
<script src="assets/js/argon.js?v=1.2.0"></script>
</body>
</html>Step 8: reset_password.php
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
// Include config file
require_once "config.php";
require_once "php_reset_password.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Start your development with a Dashboard for Bootstrap 4">
<meta name="author" content="SOENG SOUY">
<title>Login Page</title>
<!-- Favicon -->
<link href='https://www.soengsouy.com/favicon.ico' rel='icon' type='image/x-icon'/>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Argon CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
</head>
<body class="bg-default">
<style>
html, body {margin: 0; height: 100%; overflow: hidden}
@media (min-width: 992px)
{
.pt-lg-9, .py-lg-9 {
padding-top: 20rem !important;
}
}
.bg-default {
background-color: #BDD4E7 !important;
}
.help-block {
color:red;
}
</style>
<!-- Main content -->
<div class="main-content header py-7 py-lg-8 pt-lg-9">
<!-- Header -->
<!-- Page content -->
<div class="container mt--8 pb-5">
<div class="row justify-content-center">
<div class="col-lg-5 col-md-7">
<div class="card bg-secondary border-0 mb-0">
<div class="card-header bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3"><small>Sign in with</small></div>
<div class="btn-wrapper text-center">
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="assets/img/icons/common/github.svg"></span>
<span class="btn-inner--text">Github</span>
</a>
<a href="#" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="assets/img/icons/common/google.svg"></span>
<span class="btn-inner--text">Google</span>
</a>
</div>
</div>
<form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="card-body px-lg-5 py-lg-5">
<div class="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<div class="form-group mb-3 <?= (!empty($new_password_err)) ? 'has-error' : ''; ?>">
<div class="input-group input-group-merge input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>
<input type="password" class="form-control" name="new_password" placeholder="New Password" value="<?= $new_password; ?>">
</div>
<span class="help-block"><?= $new_password_err; ?></span>
</div>
<div class="form-group <?= (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<div class="input-group input-group-merge input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
</div>
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" value="<?= $confirm_password; ?>">
</div>
<span class="help-block"><?= $confirm_password_err; ?></span>
</div>
<div class="row">
<div class="col-6">
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Reset Password</button>
</div>
</div>
<div class="col-6">
<div class="form-group mb-3">
<a class="btn btn-primary login-btn btn-block" href="welcome.php">Cancel</a>
</div>
</div>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="register.php">Sign up</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/js-cookie/js.cookie.js"></script>
<script src="assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Argon JS -->
<script src="assets/js/argon.js?v=1.2.0"></script>
</body>
</html>Step 9: logout.php
Now, let's create a "logout.php" file. When the user clicks on the logout or signs out the link, the script inside this file destroys the session and redirects the user back to the login page.
<?php
// Initialize the session
session_start();
// Unset all of the session variables
$_SESSION = array();
// Destroy the session.
session_destroy();
// Redirect to login page
header("location: login.php");
exit;
?>
1 Comments
the css?
ReplyDeleteCAN FEEDBACK
Emoji