We use cookies to ensure that we give you the best experience on our website.

PHP MySQL Login and Registration System

How to Make PHP MySQL Login & Registration System?

Here you will learn how to create a simple session based user login and registration system using PHP with MySQL database.

Demo of the PHP login and registration system

PHP MySQL Login and Registration System

Here we will be using MySQLi Procedural to build this application. But don’t worry, at the end I will provide the same code with MySQLi OOP and PDO. Let’s start –

Database Setup

First of all, create a database named php_login, you can also name it as you want.

After that, create the users table inside the php_login database. Use the following SQL code to create the users table and its columns.

CREATE TABLE `users` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` varchar(30) NOT NULL,
    `email` varchar(30) NOT NULL,
    `password` varchar(150) NOT NULL,
    PRIMARY KEY (`id`),
    UNIQUE KEY `email` (`email`)
) ENGINE = InnoDB AUTO_INCREMENT = 12 DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci;
MySQL users table of PHP login and registration system

PHP MySQLi code for login and registration system

First, create the application folder called php-login-registration Inside the Xampp htdocs folder.

The following image shows what files we have to create to build this PHP Login and Sign up application –

PHP login application folder structure

Database Connection

db_connection.php is for PHP MySQLi database connection.

<?php
$db_host = 'localhost';
$db_user = 'root';
$db_password = '';
$db_name = 'php_login';

$conn = mysqli_connect($db_host, $db_user, $db_password, $db_name);

// CHECKING THE DATABASE CONNECTION
if(mysqli_connect_errno()){
    echo "Connection Failed - ".mysqli_connect_error();
    exit;
}

Stylesheet (style.css)

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap");
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 16px;
}

body {
    background-color: #f7f7f7;
    font-family: "Ubuntu", sans-serif;
    margin: 0;
    padding: 0;
    color: #222222;
    overflow-x: hidden;
    overflow-wrap: break-word;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    padding: 50px;
}

.container {
    background-color: white;
    border-radius: 3px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    margin: 0 auto;
    max-width: 450px;
    padding: 40px;
}

.container h1 {
    margin: 0 0 40px 0;
    text-align: center;
}

input,
button {
    font-family: "Ubuntu", sans-serif;
    font-size: 1rem;
    outline: none;
}

.input {
    padding: 15px;
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
}

.input:hover {
    border-color: #999999;
}

.input:focus {
    border-color: #0d6efd;
}

.input.error {
    border-color: red !important;
}
label span {
    color: red;
}

.msg {
    border: 1px solid #66ba7a;
    background: #f3ffd1;
    padding: 10px;
    border-radius: 3px;
}
.msg.error {
    border-color: #e33b54;
    background: #f9d7dc;
}

[type="submit"] {
    background: #0d6efd;
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 3px;
    padding: 12px 0;
    cursor: pointer;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-top: 5px;
    font-weight: bold;
    width: 100%;
}

[type="submit"]:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

label {
    font-weight: bold;
    display: inline-block;
    margin-bottom: 3px;
}

.link {
    margin-top: 20px;
    text-align: center;
}

.link a {
    color: #0d6efd;
}

.profile {
    text-align: center;
}
.profile img {
    display: inline-block;
    border: 3px solid #ccc;
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

h2 span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #888;
}

New User Registration

To register a new user we have to create the register.php and on_register.php.

on_register.php contains the on_register() function which has the code for inserting new users. The on_register() function will be called when the sign up form is submitted. 

<?php
session_start();
if(isset($_SESSION['logged_user_id'])){
    header('Location: home.php');
    exit;
}

if ($_SERVER["REQUEST_METHOD"] === "POST") :
    require_once __DIR__ . "/db_connection.php";
    require_once __DIR__."/on_register.php";
    if (
        isset($conn) &&
        isset($_POST["name"]) &&
        isset($_POST["email"]) &&
        isset($_POST["password"])
        ) {
        $result = on_register($conn);
    }
endif;

// If the user is registered successfully, don't show the post values.
$show = isset($result["form_reset"]) ? true : false;

function post_value($field){
    global $show;
    if(isset($_POST[$field]) && !$show){
        echo 'value="'.trim(htmlspecialchars($_POST[$field])).'"';
        return;
    }    
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <h1>Sign Up</h1>
        <form action="" method="POST" id="theForm">
            <label for="user_name">Name: <span></span></label>
            <input type="text" class="input" name="name" <?php post_value("name"); ?> id="user_name" placeholder="Your name">

            <label for="user_email">Email: <span></span></label>
            <input type="email" class="input" name="email" <?php post_value("email"); ?> id="user_email" placeholder="Your email">

            <label for="user_pass">Password: <span></span></label>
            <input type="password" class="input" name="password" <?php post_value("password"); ?> id="user_pass" placeholder="New password">
            <?php if(isset($result["msg"])){ ?>
                <p class="msg<?php if($result["ok"] === 0){ echo " error"; } ?>"><?php echo $result["msg"]; ?></p>
            <?php } ?>
            <input type="submit" value="Sign Up">
            <div class="link"><a href="./login.php">Login</a></div>
        </form>
    </div>
    <?php 
    // JS code to show errors
    if(isset($result["field_error"])){ ?>
    <script>
    let field_error = <?php echo json_encode($result["field_error"]); ?>;
    let el = null;
    let msg_el = null;
    for(let i in field_error){
        el = document.querySelector(`input[name="${i}"]`);
        el.classList.add("error");
        msg_el = document.querySelector(`label[for="${el.getAttribute("id")}"] span`);
        msg_el.innerText = field_error[i];
    }
    </script>
    <?php } ?>
</body>
</html>
<?php
function on_register($conn)
{
    $name = htmlspecialchars(trim($_POST['name']));
    $email = trim($_POST['email']);
    $pass = trim($_POST['password']);

    // if there is any empty field
    if (empty($name) || empty($email) || empty($pass)) {
        $arr = [];
        if (empty($name)) $arr["name"] = "Must not be empty.";
        if (empty($email)) $arr["email"] = "Must not be empty.";
        if (empty($pass)) $arr["password"] = "Must not be empty.";
        return [
            "ok" => 0,
            "field_error" => $arr
        ];
    }

    // checking the email format
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        return [
            "ok" => 0,
            "field_error" => [
                "email" => "Invalid email address."
            ]
        ];
    }

    // Checking the Password Length
    if(strlen($pass) < 4){
        return [
            "ok" => 0,
            "field_error" => [
                "password" => "Must be at least 4 characters."
            ]
        ];
    }

    // CHECK IF EMAIL IS ALREADY REGISTERED
    $sql = "SELECT `email` FROM `users` WHERE `email` = ?";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "s", $email);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_store_result($stmt);
    if(mysqli_stmt_num_rows($stmt) !== 0){
        return [
            "ok" => 0,
            "field_error" => [
                "email" => "This Email is already registered."
            ]
        ];
    }

    // Password Hashing
    $pass = password_hash($pass, PASSWORD_DEFAULT);
    // Inserting the User
    $sql = "INSERT INTO `users` (`name`, `email`, `password`) VALUES (?,?,?)";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "sss", $name,$email,$pass);
    $is_inserted = mysqli_stmt_execute($stmt);
    if($is_inserted){
        return [
            "ok" => 1,
            "msg" => "You have been registered successfully.",
            "form_reset" => true
        ];
    }
    return [
        "ok" => 0,
        "msg" => "Something going wrong!"
    ];
}

User Login

login.php and on_login.php contain the code to login for existing users. The on_login() function will be called on submission of the login form.

<?php
session_start();
if (isset($_SESSION['logged_user_id'])) {
    header('Location: home.php');
    exit;
}

if ($_SERVER["REQUEST_METHOD"] === "POST") :
    require_once __DIR__ . "/db_connection.php";
    require_once __DIR__ . "/on_login.php";
    if (isset($conn) && isset($_POST["email"]) && isset($_POST["password"])) {
        $result = on_login($conn);
    }
endif;

function post_value($field)
{
    if (isset($_POST[$field])) {
        echo 'value="' . trim(htmlspecialchars($_POST[$field])) . '"';
        return;
    }
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <h1>Login</h1>
        <form action="" method="POST">
            <label for="user_email">Email: <span></span></label>
            <input type="email" class="input" name="email" <?php post_value("email"); ?> id="user_email" placeholder="Your email">

            <label for="user_pass">Password: <span></span></label>
            <input type="password" class="input" name="password" <?php post_value("password"); ?> id="user_pass" placeholder="Your password">

            <input type="submit" value="Login">
            <div class="link"><a href="./register.php">Sign Up</a></div>
        </form>
    </div>
    <?php
    // JS code to show errors
    if (isset($result["field_error"])) { ?>
    <script>
        let field_error = <?php echo json_encode($result["field_error"]); ?>;
        let el = null;
        let msg_el = null;
        for (let i in field_error) {
            el = document.querySelector(`input[name="${i}"]`);
            el.classList.add("error");
            msg_el = document.querySelector(`label[for="${el.getAttribute("id")}"] span`);
            msg_el.innerText = field_error[i];
        }
    </script>
    <?php } ?>
</body>
</html>
<?php
function on_login($conn){
    $email = trim($_POST['email']);
    $pass = trim($_POST['password']);
    
    // if there is any empty field
    if (empty($email) || empty($pass)) {
        $arr = [];
        if (empty($email)) $arr["email"] = "Must not be empty.";
        if (empty($pass)) $arr["password"] = "Must not be empty.";
        return [
            "ok" => 0,
            "field_error" => $arr
        ];
    }
    
    // checking the email format
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        return [
            "ok" => 0,
            "field_error" => [
                "email" => "Invalid email address."
            ]
        ];
    }

    // Finding the user by email
    $sql = "SELECT * FROM `users` WHERE `email` = ?";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "s", $email);

    mysqli_stmt_execute($stmt);

    $data = mysqli_stmt_get_result($stmt);
    $row = mysqli_fetch_array($data, MYSQLI_ASSOC);

    // if the user does not exist in the database
    if($row === NULL){
        return [
            "ok" => 0,
            "field_error" => [
                "email" => "This email is not registered."
            ]
        ];
    }

    // Verifying the user password
    $password_check = password_verify($pass, $row["password"]);
    if($password_check === false){
        return [
            "ok" => 0,
            "field_error" => [
                "password" => "Incorrect Password."
            ]
        ];
    }

    // Setting the user id to the session
    $_SESSION['logged_user_id'] = $row["id"];  
    header('Location: home.php');
    exit;
}

After login successfully

After login successfully, the user will be redirected to the home.php and the get_user.php will fetch the user information from the database.

<?php
session_start();
session_regenerate_id(true);

if(!isset($_SESSION['logged_user_id']) || empty($_SESSION['logged_user_id']) || !is_numeric($_SESSION['logged_user_id'])){
    header('Location: logout.php');
    exit;
}
require_once __DIR__ . "/db_connection.php";
require_once __DIR__ . "/get_user.php";
// Get the User by ID that stored in the session
$user = get_user($conn, $_SESSION['logged_user_id']);
// If User is Empty
if($user === false){
    header('Location: logout.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="profile">
            <img src="https://robohash.org/set_set3/<?php echo $user["id"]; ?>?size=200x200" alt="<?php echo $user["name"]; ?>">
            <h2><?php echo $user["name"]; ?><span><?php echo $user["email"]; ?></span></h2>
            <a href="./logout.php">Log out</a>
        </div>
        
    </div>
</body>
</html>
<?php
function get_user($conn, $id){
    if(!filter_var($id, FILTER_VALIDATE_INT)){
        return false;
    }
    $sql = "SELECT * FROM `users` WHERE `id` = ?";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "i", $id);
    mysqli_stmt_execute($stmt);
    $data = mysqli_stmt_get_result($stmt);
    $row = mysqli_fetch_array($data, MYSQLI_ASSOC);

    if($row === NULL) return false;
    return $row;
}

Logout the logged-in user

<?php
session_start();

// Unset all of the session variables.
$_SESSION = array();

// If it's desired to kill the session, also delete the session cookie.
// Note: This will destroy the session, and not just the session data!
if (ini_get("session.use_cookies")) {
    $params = session_get_cookie_params();
    setcookie(session_name(), '', time() - 42000,
        $params["path"], $params["domain"],
        $params["secure"], $params["httponly"]
    );
}

// Finally, destroy the session.
session_destroy();
header("Location: login.php");
exit;

PHP Login & Registration app with MySQLi OOP and PDO

Thank You … ❤️❤️❤️

Related Posts