Registration and Login forms in PHP and MySQL with Session

Registration and login forms are the two basic but important pages in a web application. In this topic, we will develop a simple registration and login system in PHP and MySQL. We will have a top menu where Register and Login links will appear. When the user clicks on the Register or Login link, the corresponding form will be displayed. We will add show password in the registration form and Remember-Me checkboxes in the login form. Also, we will display the user name on the header after login. We will use PHP sessions and cookies in this application.

Below are the two screens for registration and login.

registration form in php

login form in php

Assumption

  1. You must have basic knowledge of PHP, HTML, CSS and JavaScript. You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

Folders and Files

Below is a screenshot of the folder structure and files needed:

php login and registration form folder structure

I have created a folder called 'login' under 'htdocs' as I am using XAMPP. If you are using WAMP, create 'login' folder under 'www'.

Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
Folder 'css' - custom stylesheet is in this folder

A menu bar(top_menu.php) is created with three links, Home (index.php), register(register.php) and Login (login.php).

Watch YouTube Video

Step 1 - Create a MySQL table to store user details

We will create a table named 'users' in MySQL database. User details will be stored in this table during registration. Table structure is given below:

registration and login database table in PHP

Table has 5 columns.

  1. id - it is the primary key and auto incremented
  2. email - email id of the user who is registering
  3. name - name of the user
  4. password - password given by the user during registration
Create table script is given below, you can use this code to create the table. You can also download it from download section.

users.sql


CREATE TABLE `users` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Step 2 - Connect to MySQL database (dbconnect.php)

Below is the PHP code to connect to the database. We will create this script under “cfg” folder and include it in all the programs.

dbconnect.php


  $server = "localhost";
  $uid = "root";
  $pwd = "";
  $dbname = "test";
  $conn = new mysqli($server, $uid, $pwd, $dbname);
  
  if ($conn->connect_error)
      die("DB connection failed ".$conn->connect_error);

I am using new mysqli() to create an instance of mysqli. Parameters are given below:

  1. server - localhost
  2. userid - root
  3. password - no password for user root
  4. database name - test.

You can also read the topic How to connect to MySQL database in PHP using MySQLi and PDO.

Step 3 - Create a top menu (top_menu.php)

This menu will include - Home, registration and Login on a menu bar. We will include this menu in all other pages (Home, registration and Login) so that this menu will be visible in these pages.

top_menu.php


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Registration and login in PHP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div class="topmenu">
            <div class="menubar">
                <a href="index.php">Home</a>
                <a href="register.php">Register</a>
                <a href="login.php">Login</a>
                <a href="logout.php">Logout</a>
            </div>
        </div>
    </body>
</html>

We have used Bootstrap 5 and our custom styles. Add below style in css/style.css.


.topmenu{
    background-color: #1a738a;
    padding: 20px 0;
}
.topmenu .menubar{
    padding: 0 50px;
}
.topmenu a{
    color:#fff;
    padding: 0 30px;
    text-decoration: none;
    font-size: 18px;
}

.topmenu a:hover{
    color:aqua;
}

If you run this menu using localhost/login/top_menu.php, it will be displayed as below:

registration and login with remember-me in PHP

Step 4 - Create a Home page (index.php)

We will create a simple html page here, just to show that you are in home page.

Let us look at the code for index.php

index.php


  <?php
  include "top_menu.php";
  ?>
  <h1>Registration and login in PHP</h1>

  </body>
  </html>

You can see that I have just included top_menu.php and displayed a heading. Also, I have moved the body and html close tags here and added CSS to display h1 in the center. So, when you click on the Home link from the menu this page will be displayed.

registration and login form with menu in PHP

Step 5 - Develop a PHP registration form(register.php)

We will design the registration form in html first and then we will write the PHP code to register the user.

register.php


  <?php
  include "cfg/dbconnect.php";
  include "top_menu.php";
  ?>
  <h1>Registration</h1>
  <div class="container"> 
      <form action="" method="post">
          <div class="mb-3">
              <label for="name" class="form-label">Name</label>
              <input
                  type="text"
                  class="form-control"
                  name="name"
                  id="name"
                  placeholder="Enter Name"       
              />
              <div class="input-err text-danger"></div> 
          </div>
          <div class="mb-3">
              <label for="email" class="form-label">Email</label>
              <input
                  type="text"
                  class="form-control"
                  name="email"
                  id="email"
                  placeholder="Enter email"
              />
              <div class="input-err text-danger"></div>
          </div>
          <div class="mb-3">
              <label for="pwd" class="form-label">Password</label>
              <input
                  type="password"
                  class="form-control"
                  name="pwd"
                  id="pwd"
                  placeholder="Enter password"
              />
              <div class="input-err text-danger"></div>
          </div>
          <div class="mb-3">
              <label for="conf_pwd" class="form-label">Confirm Password</label>
              <input
                  type="password"
                  class="form-control"
                  name="conf_pwd"
                  id="conf_pwd"
                  placeholder="Enter Confirm password"
              />
              <div class="input-err text-danger"></div>
          </div>
         <div class="form-check">
          <input
              class="form-check-input"
              name=""
              id=""
              type="checkbox"
              value="checkedValue"
              aria-label="Show Password"
              onclick = "showPwd()"
          />Show Password
         </div>
          <div class="reg-button text-center mt-3">
              <button
                  type="submit"
                  name = "submit"
                  class="btn btn-primary">
                  Register
              </button>
          </div>
          <p>Already Registered? Login <a href="login.php">here</a></p>
      </form>
  </div>
  </body>
  </html>

We have included dbconnect.php and top_menu.php and then added an html registration form. This registration form includes name, email, password and confirm password fields. Also, a checkbox is added to show the password. The JavaScript function showPwd() will be called when this checkbox is clicked. We will write the JavaScript function to show password later.

Add the below styles for the form in style.css.


  form{
    width: 50%;
    margin: auto;
    border: 1px solid #000;
    padding: 14px;
    border-radius: 10px;
    background-color: #76b4d0;
}

If you run register.php in the browser now, you will see the below screen:

php registration form

When the form is submitted, we will first validate the inputs and then proceed with the registration. See the below code to process the submitted form.


  if (isset($_POST['submit'])){

    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $pwd = trim($_POST['pwd']);
    $conf_pwd = trim($_POST['conf_pwd']);
    // validate fields
    if ($name == ""){
        $name_err = "Name is mandatory";
        $error = true;
    }

    if ($email == ""){
        $email_err = "Email is mandatory";
        $error = true;
    }
    elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)){
            $email_err = "Invalid Email format";
            $error = true;
        }
    else{   // check if email already registered
        $sql = "select * from users where email = ?";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("s",$email);
        $stmt->execute();
        $result = $stmt->get_result();
        if ($result->num_rows >0){
            $email_err = "Email already registered";
            $error = true;
        } 
    }

    if ($pwd == ""){
        $pwd_err = "Passqword is mandatory";
        $error = true;
    }
    elseif (strlen($pwd) < 6) {
        $pwd_err = "Password must be atleast 6 characters";
        $error = true;
        }
    
    if ($conf_pwd == ""){
        $conf_pwd_err = "Confirm Password is mandatory";
        $error = true;
    }

    if ($pwd !="" && $conf_pwd !=""){
        if ($pwd != $conf_pwd){
            $conf_pwd_err = "Passwords do not match";
            $error = true;
        }
    }

     // all validations passed
     if (!$error){
        $pwd = password_hash($pwd, PASSWORD_DEFAULT);

        $sql = "insert into users (name, email, password) value(?, ?, ?)";
        try{
            $stmt = $conn->prepare($sql);
            $stmt->bind_param("sss", $name, $email, $pwd);
            $stmt->execute();
            $succ_msg = "Registration successful. Please <a href='login.php'>login</a>";
            $name = $email ="";
        }
        catch(Exception $e){
            $error_msg = $e->getMessage();
        }

    }
}

If form validation fails, $error flag is set to true. Note that we are validating email format and unique email id. Also, some validations are added for password and confirm password.

If all validations are successful, we are just inserting the user details in 'users' table and setting the success or error messages accordingly. We will display the validation error messages in the form and also we will display the success and error messages on top of the form.

JavaScript to show password when the user checks the "Show Password" checkbox.


function showPwd(){
  var pwd = document.getElementById("pwd");
  var conf_pwd = document.getElementById("conf_pwd");
  if (pwd.type === "password")
      pwd.type = "text";
  else
  pwd.type = "password"

  if (conf_pwd.type === "password")
      conf_pwd.type = "text";
  else
      conf_pwd.type = "password"
}

To display the error message on the form, we will add below code just before the form:


<div class="err-msg">
    <?php if (!empty($succ_msg)){ ?>
        <div class="alert alert-success">
            <?= $succ_msg?>
        </div>
    <?php } ?>

    <?php if (!empty($error_msg)){ ?>
        <div class="alert alert-danger">
            <?= $error_msg?>
        </div>
    <?php } ?>

</div>

Add below styles in style.css for error messages:


.err-msg{
    width: 50%;
    margin: auto;
}

If you run register.php and add a user, you will see the successful message as below:

registration form with show password in PHP

Step 6 - Develop a PHP Login form (login.php)

Our login form will have an email id and password for the user to login into the system. After the login form is submitted we need to validate the email id and password entered by the user against the values stored in the database.

php login page

Login form design is given below, the error message we are displaying here are defined after the form is submitted, just check the form submission PHP code next.


<?php
include "top_menu.php";
?>

<h1>Login</h1>

<div class="container">
    <div class="err-msg">

        <?php if (!empty($error_msg)){ ?>
            <div class="alert alert-danger">
                <?= $error_msg?>
            </div>
        <?php } ?>

    </div>
    <form action="" method="post">
           
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input
                type="text"
                class="form-control"
                name="email"
                id="email"
                placeholder="Enter email"
                value="<?=$email?>"
            />
            <div class="input-err text-danger"><?= $email_err?></div>
           
        </div>

        <div class="mb-3">
            <label for="pwd" class="form-label">Password</label>
            <input
                type="password"
                class="form-control"
                name="pwd"
                id="pwd"
                placeholder="Enter password"
            />
            <div class="input-err text-danger"><?= $pwd_err?></div>
           
        </div>

       <div class="form-check">
        <input
            class="form-check-input"
            name="remember"
            id=""
            type="checkbox"
            value="checkedValue"
            aria-label="Remember Me"
            
        />Remember Me
       </div>
       
        <div class="reg-button text-center mt-3">
            <button
                type="submit"
                name = "submit"
                class="btn btn-primary">
                Login
            </button>
        </div>
        <p>Not Registered? Click <a href="register.php">here</a> to register</p>
    </form>
</div>
</body>
</html>

Here, we are using a form to get the email id and password from the user.

When the user clicks on the Submit button, if a matching row is found, we redirect the user to the home page, if not, we give a message in the the login form so that the user can re-enter login details.

See below PHP code when the login form is submitted:


<?php
session_start();
include "cfg/dbconnect.php";
$email = $pwd = "";
$email_err = $pwd_err = "";
$error = false; 
$err_msg = "";

if (isset($_POST['submit'])){
    $email = trim($_POST['email']);
    $pwd = trim($_POST['pwd']);

    // validate fields

    if ($email == ""){
        $email_err = "Email is mandatory";
        $error = true;
    }

    if ($pwd == ""){
        $pwd_err = "Password is mandatory";
        $error = true;
    }


     // all validations passed
     if (!$error){

        $sql = "select * from users where email = ?";
        try{
            $stmt = $conn->prepare($sql);
            $stmt->bind_param("s", $email);
            $stmt->execute();
            $result = $stmt->get_result();
            if ($result->num_rows >0){
                $row = $result->fetch_assoc();
                $stored_pwd = $row['password'];
                if (password_verify($pwd, $stored_pwd)){
                    // login successful
                   
                    $_SESSION['name'] = $row['name'];
                    header("location:index.php");
                }
                else{
                    $error_msg = "Incorrect Password";
                }
            }
            else {
                $error_msg = "Email id not registered";
            }
        }
        catch(Exception $e){
            $error_msg = $e->getMessage();
        }
    }
}

Note that we are using PHP session here, at the beginning we used session_start() function and after successful login, we are using a session variable using $_SESSION['name'].

Step 7 - Update top menu to display user name after login

We need to update the code in top_menu.php. When the user logs in, we want to show Logout only, Register and Login should not be displayed then. Similarly, when the user is not logged in, we should show only Register and Login, Logout should not be displayed in the menu bar. So, we update top_menu.php as below:

top_menu.php


<?php >
  if (!isset($_SESSION) || session_id() == "" || session_status() === PHP_SESSION_NONE)
  session_start() 
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Registration and login in PHP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div class="topmenu">
            <div class="menubar">
                <a href="index.php">Home</a>
                <?php if (isset($_SESSION['name'])){ ?>
                    <div class="user">
                        <span>Welcome <?= $_SESSION['name']?> </span>
                        <a href="logout.php">Logout</a>
                    </div>
                  
                <?php } else { ?>
                <a href="register.php">Register</a>
                <a href="login.php">Login</a>
                <?php } ?>
            </div>
        </div>

We added session_start(), but here we are checking if the session already started or not, if not started, we are using session_start(), since we have already used it in login.php. In the menu bar, we are checking if the SESSION variable "name" is available, accordingly, we are showing the links. If the user is logged in we are displaying the user name from the session variable.

Step 8 - Add code for Remember-Me in the Login form

We already have a checkbox in the login form for Remember-Me. When the user checks this checkbox, email id will automatically be displayed in the email field and the checkbox will be checked during the next login. We will use cookies to implement this option. In PHP, we have setcookie() function and $_COOKIE[] superglobal. We will use them here.

After successful login, we will add the below code in login.php.


if (isset($_POST['remember'])){
                      
    setcookie("remember_email", $email, time()+365*24*3600);
    setcookie("remember", $remember, time()+365*24*3600);
}
else{
    setcookie("remember_email", $email, time() - 365*24*3600);
    setcookie("remember", $remember, time() - 365*24*3600);
}

We check if the Remember-Me checkbox is checked, then we create two cookies, "remember_email" (for email) and "remember" (for checkbox) using setcookie() function. These cookies will be valid for one year. Use the time() function and add 365 days converted to seconds. But if the checkbox is unchecked, we are deleting the cookies by giving a past date, which means the cookies will expire.

In the login form, we have to display the emaild if the cookie is available. Similarly, the checkbox should be checked if the cookie is available for the checkbox. So, we will display the value in the email input and check the Remember-Me checkbox accordingly as shown below:


<php
$display_email = isset($_COOKIE['remember_email']) ? $_COOKIE['remember_email'] : $email;

$checked = !empty($remember) ? "checked" : (isset($_COOKIE['remember']) ? "checked" : "");
?>

If the cookie for the email is set, display that email in the email field, otherwise display the email entered by the user. Similar logic is used for the "remember" cookie, here we just need to decide if the checkbox will be checked or not.

We will use these two variables in the login form. $display_email will be used as value of the email field and $checked will be used for the checkbox as given below: 


<div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input
        type="text"
        class="form-control"
        name="email"
        id="email"
        placeholder="Enter email"
        value="<?=$display_email?>"
    />
    <div class="input-err text-danger"><?= $email_err?></div>
    
</div>

See the value of the email field. For the checkbox, see below <?= $checked?> is used to check the checkbox.


<div class="form-check">
<input
    class="form-check-input"
    name="remember"
    id=""
    type="checkbox"
    value="checkedValue"
    aria-label="Remember Me"
    <?= $checked?>
/>Remember Me
</div>

We added styles to display the username and logout on the right side of the menu bar. Now we need to write the code for logout.php. See the code below:

logout.php


session_start();
session_unset();
session_destroy();
header("location:index.php");

We are unset all session variables using session_unset() function. Then delete the session using session_destroy(). After that, we redirect the user to the home page.

Now we are done with our development, let us now test our application.

Test the Application

Open the browser and run localhost/login. You will see the home page displayed. Click on registration, you will see the registration form is displayed.

Now you need to test if the registration and Login forms are working correctly.

Check in the database table if a row is inserted after registration and try to login with the registered email id and password. Test all the validations as well.

Watch YouTube Video

download login and registration source codeDownload Source Code

Click on the Download button below to download the code. Registration is not required. You can use the code as is or modify as per your requirements.

Conclusion

We developed the menu, registration and login forms in PHP and MySQl. We have also seen how to display the username on the menu bar after successful login. Hope it will be useful for you.

Related Topics

Popular Topics