Login page with jQuery and AJAX

Add Comment , Edit

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 uswername 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.

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.
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. Conclusion

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

CONVERSATION

0 Comments:

Post a Comment

Subscribe to: Post Comments ( Atom )
Back
to top