Thursday, June 20, 2013

Live Username Availability Checker With PHP, MySQL, AJAX and jQuery

I guess you would have seen various websites which checks username availability on the fly during registration process. For example take “gmail signup” or "twitter signup" or "yahoo signup", their registration process is very flexible, it tells user everything on the fly. Means if i am typing a username it gives suggestions on the fly whether the username is available or not. So in this tutorial i will make an ajax username availability checker powered with jQuery, PHP and MySQL. So let's get started.

How the application will look like?
Check Username availability with php, mysql, jquery

Step 1: Database configuration and its connection settings (connect.php)

<?php
$db="pwd_strength";
$hostname = "localhost";
$user = "root";
$password = "";
$con = mysql_connect($hostname, $user, $password) or die("Could not connect database");
mysql_select_db($database, $con) or die("Could not select database");
?>
Step 2: Application Landing Page (index.php)

<!DOCTYPE html >
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div id="container">
            <div id="wrapper">
                <div id="top"> Live Username Availability Checker </div>
                <div id="form">
                    <label>Username</label>
                    <input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" />
                    <span class="check"  ></span> <br/><br/>
                </div>
            </div>
        </div>
        <!-- js placed at bottom to make page load faster -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function()
            {
                $('.user_name').keyup(function()
                {
                    var checkname=$(this).val();
                    var availname=remove_whitespaces(checkname);
                    if(availname!=''){
                        $('.check').show();
                        $('.check').fadeIn(400).html('<img src="images/ajax-loading.gif" /> ');

                        var String = 'username='+ availname;

                        $.ajax({
                            type: "POST",
                            url: "username-check.php",
                            data: String,
                            cache: false,
                            success: function(result){
                                var result=remove_whitespaces(result);
                                if(result==''){
                                    $('.check').html('<img src="images/accept.png" /> This Username Is Avaliable');
                                    $(".check").removeClass("red");
                                    $('.check').addClass("green");
                                    $(".user_name").removeClass("yellow");
                                    $(".user_name").addClass("white");
                                }else{
                                    $('.check').html('<img src="images/error.png" /> This Username Is Already Taken');
                                    $(".check").removeClass("green");
                                    $('.check').addClass("red")
                                    $(".user_name").removeClass("white");
                                    $(".user_name").addClass("yellow");
                                }
                            }
                        });
                    }else{
                        $('.check').html('');

                    }
                });
            });
            function remove_whitespaces(str){
                var str=str.replace(/^\s+|\s+$/,'');
                return str;
            }
        </script>
    </body>
</html>

Step 3: The code behind for checking username availability (username-check.php)


<?php
require 'connect.php';
if(isset($_POST['username']) && !empty($_POST['username'])){
      $username=strtolower(mysql_real_escape_string($_POST['username']));
      $query="select * from registration where LOWER(username)='$username'";
      $res=mysql_query($query);
      $count=mysql_num_rows($res);
      $HTML='';
      if($count > 0){
        $HTML='user exists';
      }else{
        $HTML='';
      }
      echo $HTML;
}
?>

Step 4: Applying some styles to the application for better look and feel (style.css)


body {
    padding: 50px;
}
h1 a {
    color: #000;
}
input {

    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:0 5px;
}

label {display:block;
       font-weight:bold;
       text-align:right;
       width: 200px;
       float:left;
}

#top{
    margin-left: 75px;
    font-weight: bold;
    font-size:24px;
    color: blue;
    padding: 10px;
}
#wrapper{
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
    width: 700px;
    margin: auto;

    padding:20px;
    min-height:180px;
}

#form{margin-top: 10%;
      margin-left: auto;}

#bottom{
    margin-left: 450px;
    font-size: 24px;
}
.yellow{background-color:yellow;}
.white{background-color:#FFF;}
.green{color:green;}
.red{color:red;}

Thanks for reading. Do regularly visit for more tutorials and subscribe for latest posts below.

Please do find the below link for entire source code.

Download Link : http://www.mediafire.com/?q67okh957ayopcy

Did You Enjoy this Article ?

If yes, Then enter your email below to get

more such great articles in your inbox

For FREE !

4 comments:

  1. Superb article, hoping more better articles in future...

    ReplyDelete
  2. Sorry for asking a possibly stupid question but I am new to this whole coding thing and I have the checker working on my site but where do I enter the usernames that have been taken, because right now it just says anything I enter has been taken. Any reply would be great thanks.

    ReplyDelete
  3. @NIcholas The author has set it the wrong way around. At the moment it is saying not available when it is. If you change this if(result == '') to if(result != '') it should work.

    ReplyDelete
  4. Hello Will, no matter what i do, it says that the "Username Is Already Taken", i changed this if(result == '') to if(result != '') as you said before but then it says Everything is avilable. Any ideas?

    ReplyDelete

Thank you for reading and commenting...