How to make a login page in HTML with database using JavaScript

In this topic, we will learn how to create a PHP MySQL Login System with the help of PHP and MySQL database. There are few steps given for creating a login system with MySQL database.

Before creating the login system first, we need to know about the pre-requisites to create the login module.

Requirements

  • We should have knowledge of HTML, CSS, PHP and MySQL for creating the login system.
  • Text Editor - For writing the code. We can use any text editor such as Notepad, Notepad++, Dreamweaver, etc.
  • XAMPP - XAMPP is a cross-platform software, which stands for Cross-platform(X) Apache server (A), MySQL (M), PHP (P), Perl (P). XAMPP is a complete software package, so, we don't need to install all these separately.

Environment Setup

Now, we need to start the webserver and create the files for the login system. There are few steps that are given below to setup the environment.

  • Open the XAMPP Control Panel.
  • Start the Apache server by clicking on the Start button.
  • Start the MySQL by clicking on the Start button.
  • Create all the files needed for login.
  • Create login table in the database using phpMyAdmin in XAMPP.

Now, we will create four files here for the login system.

  1. index.html - This file is created for the GUI view of the login page and empty field validation.
  2. style.css - This file is created for the attractive view of the login form.
  3. connection.php - Connection file contains the connection code for database connectivity.
  4. authentication.php - This file validates the form data with the database which is submitted by the user.

Save all these files in the htdocs folder inside the Xampp installation folder. The detailed description and code for these files are discussed below.

index.html

First, we need to design the login form for the website user to interact with it. This login form is created using html and also contains the empty field validation, which is written in JavaScript. The code for the index.html file is given below:

After executing the above code on the browser, the login page will appear as below if it does not contain style.css file.

How to make a login page in HTML with database using JavaScript

style.css

Now, we will create style.css file to provide a more attractive view to the login form. The CSS code for the style.css file is given below:

After including above CSS file in index.html, the login form will be like -

How to make a login page in HTML with database using JavaScript

Note: All these files should be saved in the same folder, so we can easily access them without any interruption.

Database and Table Creation

Now, the next step is to create the database and the login table inside the database.

  • Access the phpMyAdmin on the browser using localhost/phpmyadmin/ and create a table in the database. Here we will create a database and table using GUI based phpMyAdmin rather than queries execution.
  • Click on New and enter the database name and then click on Create button.
How to make a login page in HTML with database using JavaScript
  • Now we will create a login table in the database. Create a table by name login in the database which you have created earlier.
How to make a login page in HTML with database using JavaScript
  • Specify the column Name and their Type and Length in the table in which we will store the username and password for the different users and save it by clicking on the save button.
How to make a login page in HTML with database using JavaScript
  • Click on the insert, from where we can insert the records in columns. So insert the username and password here and click on Go button to save the record.
How to make a login page in HTML with database using JavaScript

connection.php

Next step is to do the connectivity of login form with the database which we have created in the previous steps. We will create connection.php file for which code is given below:

authentication.php

Now, we have our database setup, so we can go with the authentication of the user. This file handles the login form data that sent through the index.html file. It validates the data sent through the login form, if the username and password match with the database, then the login will be successful otherwise login will be failed.

I have developed a drop-down login panel using Bootstrap 3.3.7. Where the user inputs the username and password used during registration. What I want is, If login is successful I want the user to be redirected to another page called profile.php else if login is not successful an error message will appear on the login panel footer.

The HTML code for the panel:

<li class="nav-link dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span>Login</a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <div style="width:300px;">
      <div class="panel-heading text-center" style="color:black;">LOGIN</div>
      <div class="panel-heading">
        <label for="email">username</label>
        <input type="text" class="form-control" id="username">
        <label for="email">Password</label>
        <input type="password" class="form-control" id="password">
        <br>
        <a href="#" style="color:blue; list-style:none;">Forgotten password?</a><input type="submit" class="btn btn-success" style="float:right;" id="login" value="login">
      </div>
      <div class="panel-footer" id="login_msg"></div>
    </div>
  </div>
</li>

The  javascript login code:

$("#login").click(function(event) {
  event.preventDefault();
  var u_name = $("#username").val();
  var pass = $("#password").val();
  $.ajax({
    url: "login.php",
    method: "POST",
    data: {
      userLogin: 1,
      userUname: u_name,
      userPassword: pass
    },
    success: function(data) {
      if (data == "truejsdhfkh") {
        window.location.href = "profile.php";
      } else {
        $("#login_msg").html(data);
      }
    }
  })
})

The php login code:

<?php
// connect to the database
include "db.php";
//session start
session_start();
//login page
if(isset($_POST['userLogin'])){

    $uname = mysqli_real_escape_string($con, $_POST['userUname']);
    $passwrd = mysqli_real_escape_string($con, $_POST['userPassword']);


    if(empty($uname) || empty($passwrd)){
        echo "
        <div class='alert alert-danger'>
            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b>Please fill in all fields!</b>
        </div>
    ";
    exit();
    }else{
        $passwrd = md5($passwrd);
        $sql = "SELECT * FROM user_info WHERE username = '$u_name' AND passwrd = '$password'";
        $run_query = mysqli_query($con,$sql); 
        $count = mysqli_num_rows($run_query);
        if($count == 1){
            $row = mysqli_fetch_array($run_query);
            $_SESSION["uid"] = $row["user_id"];
            $_SESSION["uname"] = $row["username"];
            echo "truejsdhfkh";
    }
    }

}
?>

When I click on the login button nothing happened. Can someone please guide me in doing this?

How to connect HTML login page with database?

Step 1- Create a HTML PHP Login Form. To create a login form, follow the steps mentioned below: ... .
Step 2: Create a CSS Code for Website Design. ... .
Step 3: Create a Database Table Using MySQL. ... .
Step 4: Open a Connection to a MySQL Database. ... .
Step 5 - Create a Logout Session. ... .
Step 6 - Create a Code for the Home Page..

How to create login page in HTML using JavaScript?

How to create login form with JavaScript validation in html?.
Open Notepad or Adobe Dreamweaver or any other Html editor. I am using Dreamweaver. ... .
Copy the below complete HTML code and paste it in your editor. <! ... .
Now apply the CSS to all Elements for better presentation. ... .
Here we add JavaScript code for validation check..

How do I create a working login page in HTML?

<input type="text" placeholder="Enter Username" name="username" required> <label>Password : </label> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit">Login</button>

How do I create a login page for my website using HTML and CSS?

Step 1 : Adding HTML Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input. Step 2 : Adding CSS Add the required CSS to design the login page try to keep the design as simple as possible.