Username Avialablity Checker With Php And Jquery

This post about Twitter used jQuery plug-in JavaScript code in registration page  username Availability check and update Screen name.

        Here is the example of a user name availability checker , which was used now a days by most websites . I have a best 
 idea to make it with php , jquery and ajax. I think this script would make your knowledge shine .
		   
		FILES TO CREATE
		1. check.js
		2. check_user.php
		3. index.html
		4. db.php
		5. style.css

 Creating Database For This Username Availability Checker
1. First go to the phpMYadmin .
	  2. Create the database to insert the sql .
	  3. Click the sql link and paste the following sql lines.

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(250) NOT NULL,
  `password` varchar(250) NOT NULL,
  `email` varchar(250) NOT NULL,
  `website` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
 
INSERT INTO `user` (`id`, `name`, `password`, `email`, `website`) VALUES
(1, 'admin', 'admin', 'admin@localhost.com', 'localhost.com'); 

check.js

$('#name').change(function(){
$('#user_info').html('  <img src="load.gif"> checking whether name is available');
var name = $('#name').val();
$.ajax({
url:'check_user.php?name='+name,
 
success: function(html) {
$('#user_info').html('');
if(html == "true") {
$('#user_info').html('  <font id="ok" color="green">  <img style="position:absolute;margin-top:2px" src="ok.png">       Available  </font>');
}
else {
$('#user_info').html('  <font id="wrong" color="red">  <img style="position:absolute;margin-top:2px" src="wrong.png">      Not Available   </font>');
}
}
});
}); 

 check_user.php 

<?php
require('db.php');
if(isset($_GET['name'])){
$name = $_GET['name'];
$sql = "select * from user where name='$name'";
$q = mysql_query($sql);
if(mysql_num_rows($q) > 0) echo 'false';
else echo 'true';
}
?> 
 

index.php

<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script src="jquery.min.js"></script>
<pre>
<form method="post" id="form">
<div id="comic"> <font color="skyblue">KAMESH</font><font color="orange">soft</font> SIGNUP HERE</div>
  <input id="name" name="name" placeholder="name" ><i id="user_info"></i>
  <input name="pass" placeholder="password">
  <input name="email" placeholder="email">
  <input name="website" placeholder="website"> <input id="bt" type="submit" value="Signup">
</form>
</pre>
<script src="check.js"></script>

 db.php 
        Replace the database host , database user , database password , database name with your database informations.

 <?php
$database_host = "localhost";
$database_user = "root";
$database_password = "";
$database_name = "test";
mysql_connect($database_host , $database_user , $database_password);
mysql_select_db($database_name);
?>

style.css 

#form{border:1px solid #eeeeee;background:#4E7BA3;width:500px;}
#comic{font-family:comic sans ms;color:white;font-size:28px;}
input{color:gray}
input#bt{background:#D1DBE5;;border:1px solid blue;padding:1px;color:black;cursor:pointer}
#user_info{color:white;font-family:arial , verdian}
#ok{padding:3px;color: #4F8A10;background-color:#EDFCED;border:1px solid green;}
#wrong{padding:3px;color: #D8000C;background-color:#FDD5CE;border:1px solid red}