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?
Step 1: Database configuration and its connection settings (connect.php)
Step 4: Applying some styles to the application for better look and feel (style.css)
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
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 !
Superb article, hoping more better articles in future...
ReplyDelete