on Articles Tutorials

jQuery Live Login inspired by Google Instant Search

19 comments
the_lock

We visit thousands of web pages and log in to hundreds of them. Always the same thing is repeating every single time. You enter username, press tab, enter password, press Enter key or click on a button.

I was inspired by Google Instant Search and I will demonstrate how we can build log in functionality without having to press Enter or click a button. This is fairly simple task and using jQuery and a touch of PHP, we can achieve this in no time.

You can see the finished script in action below:


We will need a simple database table for our user data. Something like this:

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `username` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `password` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `name`, `username`, `password`) VALUES
(1, 'Demo', 'demo', 'demo123');

Next, we will build a login form:

<form action="" method="post" id="form">
    Username:
    <input type="text" id="username" name="username" />
    Password:
    <input id="password" type="password" name="password" />
</form>
<div id="message" style="display:none;"></div>

As you can see, I created a div with id of message, which will hold the response from server later on.

Let’s create some jQuery magic:

$(function() {
    $('#password').keyup(function() { // when we release the key
        var pass = $('#password').val();
        if(pass.length >= 3) { // if there are more then 3 letters
            var data = 'username='+ $("#username").val() + '&amp;pass=' + pass;
            // ajax call
            $.ajax({
                type: "POST",
                url: "login.php",
                data: data,
                success: function(html){ // this happen after we get result
                    if(html !== '') {
                        $("#form").hide(); // hiding form
                        $("#message").append(html);
                        $("#message").fadeIn(800);
                    }
              }
            }); 
        }
    });
});

This code is triggered after a key has been released on password field. It counts the characters, and as soon as there are 3 or more of them, it sends an AJAX request to login.php file which looks like this:

if($_POST) {
    
    /*** mysql hostname ***/
    $hostname = 'localhost';

    /*** mysql username ***/
    $username = 'root';

    /*** mysql password ***/
    $password = '';

    $dbname = 'demo';

    try {
        $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);
        // getting and escaping POST variables
        $user = addslashes(strip_tags($_POST['username']));
        $pass = addslashes(strip_tags($_POST['pass']));

        /*** set all errors to execptions ***/
        $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        
       /*** checking username and password ***/
        $sql = "SELECT count(*) AS total FROM users
                WHERE username = :user AND 
                password = :pass";
        $stmt = $dbh->prepare($sql);
        /*** bind the paramaters ***/
        $stmt->bindParam(':user', $user, PDO::PARAM_STR);
        $stmt->bindParam(':pass', $pass, PDO::PARAM_STR);
        $stmt->execute();
        if ($stmt->fetch(PDO::FETCH_COLUMN) > 0) {
            $sql = "SELECT * FROM users
                    WHERE username = :user AND 
                    password = :pass";
            $stmt = $dbh->prepare($sql);
            /*** bind the paramaters ***/
            $stmt->bindParam(':user', $user, PDO::PARAM_STR);
            $stmt->bindParam(':pass', $pass, PDO::PARAM_STR);
            $stmt->execute();    
            $row = $stmt->fetch(PDO::FETCH_ASSOC);
            // here we write $row to $_SESSION
            $_SESSION['User'] = $row;
            // sending user's name back as result
            echo '<p>Congratulations, <em>' . $row['username'] . '</em>, you have successfuly logged in!</p>';     
        }
    }
    catch(PDOException $e) {
        echo $e->getMessage();
    }

}

This is simple, we are declaring some db connection variables at the top, then connecting to database using PDO class. Then we count rows from the database where username and password match those entered in the form. If there is no such user in the database, nothing happens, but if we find such a user PDO fetches user data from database and store it to the SESSION. At the end, we are sending a nice message back to the Javascript as response.

jQuery scripts is controlling the response, and as soon as it is not empty, it is hiding the form and appending our response message to message div.


I would like to see your opinion on using this method on a live site, so do not hesitate to comment. This is an experiment and probably not so good to use on login form, but interesting to play with.

Related posts:

To get even more excellent content, you can follow me on Twitter.

19 Responses to “jQuery Live Login inspired by Google Instant Search”