Login and Register Dashboard PHP
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 in order 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: sign-up.html
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 lang="en">
<head>
<title>soengsouy.com</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
<meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template, free admin theme, free dashboard template"/>
<meta name="author" content="CodedThemes"/>
<!-- Favicon icon -->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- fontawesome icon -->
<link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">
<!-- animation css -->
<link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
<!-- vendor css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<style>
.help-block{
color:red;
}
</style>
<div class="auth-wrapper">
<div class="auth-content">
<div class="auth-bg">
<span class="r"></span>
<span class="r s"></span>
<span class="r s"></span>
<span class="r"></span>
</div>
<div class="card">
<div class="card-body text-center">
<div class="mb-4">
<i class="feather icon-user-plus auth-icon"></i>
</div>
<h3 class="mb-4">Sign up</h3>
<form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="input-group mb-3" <?= (!empty($email_err)) ? 'has-error' : ''; ?>">
<input type="email" class="form-control" name="email"value="<?= $email; ?>" placeholder="Email">
</div>
<span class="help-block"><?= $email_err; ?></span>
<div class="input-group mb-4" <?= (!empty($password_err)) ? 'has-error' : ''; ?>">
<input type="password" class="form-control" placeholder="password" name="password" placeholder="Password" value="<?= $password; ?>">
</div>
<span class="help-block"><?= $password_err; ?></span>
<div class="input-group mb-4" <?= (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<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 class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-1" checked="">
<label for="checkbox-fill-1" class="cr"> Save Details</label>
</div>
</div>
<div class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<input type="checkbox" name="checkbox-fill-2" id="checkbox-fill-2">
<label for="checkbox-fill-2" class="cr">Send me the <a href="#!"> Newsletter</a> weekly.</label>
</div>
</div>
<button class="btn btn-primary shadow-2 mb-4">Sign up</button>
<p class="mb-0 text-muted">Allready have an account? <a href="auth-signin.html"> Log in</a></p>
</form>
</div>
</div>
</div>
</div>
<!-- Required Js -->
<script src="assets/js/vendor-all.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></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 lang="en">
<head>
<title>soengsouy.com</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
<meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template, free admin theme, free dashboard template"/>
<meta name="author" content="CodedThemes"/>
<!-- Favicon icon -->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- fontawesome icon -->
<link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">
<!-- animation css -->
<link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
<!-- vendor css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<style>
.help-block{
color:red;
}
</style>
<body>
<div class="auth-wrapper">
<div class="auth-content">
<div class="auth-bg">
<span class="r"></span>
<span class="r s"></span>
<span class="r s"></span>
<span class="r"></span>
</div>
<div class="card">
<form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="card-body text-center">
<div class="mb-4">
<i class="feather icon-unlock auth-icon"></i>
</div>
<h3 class="mb-4">Login</h3>
<div class="input-group mb-3"<?= (!empty($email_err)) ? 'has-error' : ''; ?>">
<input type="email" class="form-control"name="email" placeholder="Email" value="<?= $email; ?>">
</div>
<span class="help-block"><?= $email_err; ?></span>
<div class="input-group mb-4"<?= (!empty($password_err)) ? 'has-error' : ''; ?>>
<input type="password" class="form-control" name="password" placeholder="password">
</div>
<span class="help-block"><?= $password_err; ?></span>
<div class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked="">
<label for="checkbox-fill-a1" class="cr"> Save Details</label>
</div>
</div>
<button class="btn btn-primary shadow-2 mb-4">Login</button>
<p class="mb-2 text-muted">Forgot password? <a href="auth-reset-password.html">Reset</a></p>
<p class="mb-0 text-muted">Don’t have an account? <a href="register.php">Signup</a></p>
</div>
</form>
</div>
</div>
</div>
<!-- Required Js -->
<script src="assets/js/vendor-all.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></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 lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<div class="login-form">
<form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Admin Dashboard</h1>
<p>Welcome to my dashboard</p>
</div>
<div class="form-group mb-3">
<?php if (isset($_SESSION['email'])) : ?>
<p class="btn btn-primary login-btn btn-block">Email: <?php echo $_SESSION['email']; ?></p>
<?php endif ?>
</div>
<div class="text-center mb-3">
<p class="text-muted"><a href="logout.php">Logout</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
@soengsouy
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
@soengsouy
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>
</body>
</html>Step 8: 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;
?>
Tags:
PHP