check username availability in php mysql javascript ajax

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> 

                </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.Good Luck!!!!!
Pages

Thursday, October 10, 2013

check username availability in php mysql javascript ajax

`Thanks for reading.Good Luck!!!!!`

No comments:

Post a Comment
