Login page with jQuery and AJAX

A Login page is one of the basic requirement when creating a registration based website where the user can register to the website and sign in to its account to manage.

In this case, you can use AJAX to create a user-friendly login page.

With AJAX you can directly check the entered username and password are correct or not in MySQL database without reloading the whole page.

If the user is registered then redirect the user to a home page otherwise display an error.

Login page with jQuery and AJAX


Contents

  1. Table structure
  2. Configuration
  3. HTML
  4. PHP
  5. jQuery
  6. Demo
  7. Conclusion

1. Table structure

I am using users table in the tutorial example.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file for database connection.

Completed Code

<?php
session_start();
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. HTML

Creating a simple login page which contains two input box for entering username and password.

A submit button to send AJAX request with jQuery on click.

Completed Code

<div class="container">

    <div id="div_login">
        <h1>Login</h1>
        <div id="message"></div>
        <div>
            <input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
        </div>
        <div>
            <input type="password" class="textbox" id="txt_pwd" name="txt_pwd" placeholder="Password"/>
        </div>
        <div>
            <input type="button" value="Submit" name="but_submit" id="but_submit" />
        </div>
    </div>

</div>

4. PHP

Create a new checkUser.php file.

Check the $_POST username and password values in the users table.

If the query returns more than 0 value means the user exists in the table then initialize $_SESSION['uname'] variable with username and echo 1.

If the query return 0 then echo 0.

Completed Code

<?php
include "config.php";

$uname = mysqli_real_escape_string($con,$_POST['username']);
$password = mysqli_real_escape_string($con,$_POST['password']);

if ($uname != "" && $password != ""){

    $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
    $result = mysqli_query($con,$sql_query);
    $row = mysqli_fetch_array($result);

    $count = $row['cntUser'];

    if($count > 0){
        $_SESSION['uname'] = $uname;
        echo 1;
    }else{
        echo 0;
    }

}

home.php

When login user is valid then redirect the user to this page.

If the $_SESSION['uname'] variable is not initiated then redirect to index.php webpage.

Destroy $_SESSION['uname'] on logout button click and redirect to index.php.

Completed Code

<?php
include "config.php";

// Check user login or not
if(!isset($_SESSION['uname'])){
    header('Location: index.php');
}

// logout
if(isset($_POST['but_logout'])){
    session_destroy();
    header('Location: index.php');
}
?>
<!doctype html>
<html>
    <head></head>
    <body>
        <h1>Homepage</h1>
        <form method='post' action="">
            <input type="submit" value="Logout" name="but_logout">
        </form>
    </body>
</html>

5. jQuery

On login button click send AJAX request where pass entered username and password as data.

Redirect to home.php when the response is equal to 1 otherwise show error message on the screen.

Completed Code

$(document).ready(function(){
    $("#but_submit").click(function(){
        var username = $("#txt_uname").val().trim();
        var password = $("#txt_pwd").val().trim();

        if( username != "" && password != "" ){
            $.ajax({
                url:'checkUser.php',
                type:'post',
                data:{username:username,password:password},
                success:function(response){
                    var msg = "";
                    if(response == 1){
                        window.location = "home.php";
                    }else{
                        msg = "Invalid username and password!";
                    }
                    $("#message").html(msg);
                }
            });
        }
    });
});

6. Demo

Here, are some valid usernames – yssyogesh, bsonarika, vishal, vijay and all have the same password – 12345. Open in a new tab.


7. Conclusion

AJAX login page saves time by not reloading the webpage on every wrong attempt and provides better user-interface.

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  

12 Comments

  1. Lushen said:

    Please Can you help me out, i am using your code exactly as is, with the same database.Though whenever iinsert the user name and password,eg sona 123456.It just comes up with the incorret username or password alert. Please could you kindly assist me.

    June 6, 2017
    Reply
    • Yogesh Singh said:

      Means you have created the tutorial database and users table. Inserted all 4 records in it.

      June 7, 2017
      Reply
      • Lushen said:

        I have created the database. All record are in it. Though it still says invalid username or password. Isn’t this program suppose to check if they record are present, and if they are. Then they can login.

        June 7, 2017
        Reply
  2. imran said:

    Thanks for your login form example . Could u please give some example about the purchase or sales invoice which have the following fields. format.

    ItemID Item Name Qty Rate Total
    101 Item 1 5 3 15
    102 Item 2 6 7 42
    103 Item 3 7 8 56
    Total Amount 113
    The invoice should be in grid form and when i select item id then item name will automaticallly display from the database. The grid should contain edit,delete,save,search,print,csv,pdf format. Kindly resolve this problem immdeiately. both itemid and itemname should be autocomplete.

    June 24, 2017
    Reply
  3. Mobin Abbasi said:

    is this session works on local server?

    February 1, 2018
    Reply
  4. Chitransh`Kumar said:

    Could you give me the table structure, if the used sql is postgresql and not mysql.
    Thank You

    February 17, 2018
    Reply
    • Yogesh Singh said:

      Hi Chitransh,
      I don’t have the table structure for PostgreSQL.

      February 17, 2018
      Reply
      • Chitransh Kumar said:

        I got the postgresql table figured out.Though there seems to be an issue in the AJAX part as it always seems to return incorrect username and password….is it due to echo that is being received by the AJAX code?

        February 17, 2018
        Reply
        • Yogesh Singh said:

          I rechecked the code it is working fine.

          I use echo in AJAX file to return value to jQuery to execute an action according to value.

          February 17, 2018
          Reply
  5. iyagi said:

    I want pure JavaScript coding.
    Do not use JQuery code.
    Please also include JavaScript code.

    July 11, 2018
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *