Login page with jQuery and AJAX

A Login page is one of the basic requirements 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.

Download

Table structure
Configuration
HTML
PHP
jQuery
Demo
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 the 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.

Created an anchor tag for logout.

Completed Code

<?php
include "config.php";

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

?>
<!doctype html>
<html>
    <head></head>
    <body>
        <h1>Homepage</h1>
        <br>
        <a href="logout.php">Logout</a>
    </body>
</html>

Logout

Create a logout.php file.

Destroy the SESSION and redirect to index.php.

Completed Code

<?php

// Destroy 
session session_destroy(); 
header('Location: index.php');

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. View in a new tab.

7. Conclusion

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

If you want to know how to create a register page then you can view the following tutorial.

If you found this tutorial helpful then don't forget to share.

Contents

1. Table structure

2. Configuration

3. HTML

4. PHP

5. jQuery

6. Demo

7. Conclusion