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 an user-friendly login page.

Which checks the entered username and password in the MySQL database table without reloading the web page. If the user is not available then show an error message on the screen otherwise redirect the user to a new page.

Login page with jQuery and AJAX


Contents

  1. Table structure
  2. Configuration
  3. HTML
  4. PHP
  5. jQuery
  6. 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,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

It has following users –

id username password
1 yssyogesh 12345
2 sona 123456
3 vishal 32145
4 vijay 147526

 

2. Configuration

Create a new PHP file (config.php). This file contains database connection.

Completed Code

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

$con = mysql_connect($host, $user, $password) or die("Unable to connect");

// selecting database
$db = mysql_select_db($dbname, $con) or die("Database not found");

3. HTML

Creating a login page which contains two input box for entering username and password. A submit button to send AJAX request with jQuery.

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 from their check the $_POST username and password in the users table. If the query returns more than 0 value means the user exists in the table.

Initialize $_SESSION['uname'] variable when query count(*) return more than 0 value and echo 1 otherwise echo 0.

Completed Code

include "config.php";

$uname = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);

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

    $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
    $result = mysql_query($sql_query);
    $row = mysql_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 passing entered username and password as data. Redirect to home.php when the response is equal to 0 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. Conclusion

In this tutorial, I showed how you can implement AJAX login page in your project. You can use this to provide the better user interface.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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