Username live check using AJAX in Servlet, PHP, Codeigniter, MySQL

Sometimes we need to check username availability instantly before a user presses the submit button after filling a long-sized signup form. In this case we can use AJAX with any technologies like PHP, Codeigniter, Servlet, Struts, JSF, Spring etc. for checking whether the input username is avaialable or already occupied by someone else. So if we give instant result to the user for username availability then sometimes it makes more sensible than while pressing the submit button and goes top of the signup form to rectify the username input field if input username is not available.

This tutorial shows how to check username availability using AJAX, MySQL in different technologies such as PHP, Codeigniter and Servlet & JSP. So after finishing this example you will be able to apply the same logic to any PHP framework or any Java frameworks.

This example uses JavaScript event onblur for checking user availability. onblur means when focus is out of a particular object such as inputbox, textarea etc.

Please feel free to contact me if you need any help on this.

Final output

Home page

live check username jquery ajax

When inputbox is empty

live check username jquery ajax

When username is already taken by someone else

live check username jquery ajax

When username is available

live check username jquery ajax

Prerequsites

MySQL Database

PHP & Codeigniter

Apache HTTP Server
PHP Engine

Codeigniter

Codeigniter 2.1.4

Servlet

Apache Tomcat v7
Eclipse
JDK 1.6
MySQL Connector JAR – mysql-connector-java-5.1.23-bin.jar

jQuery Libraries

jquery-1.9.1.min.js
jquery-migrate-1.2.1.js
jquery-ui-1.10.3-custom.min.js

download_js

Directory Structures

Servlet

live check username jquery ajax

PHP

live check username jquery ajax

Codeigniter

live check username jquery ajax

First and formost thing is to create MySQL table

 

Dump some data

 

Before proceeding please look at the project structure for each example so that you can put the required JavaScript files at the right place.

Servlet Example

Step 1. Create Dynamic Web Project called username-availability. Creates resources/js directory under Webcontent for putting the js files. Put mysql-connector-java-5.1.23-bin.jar under WEB-INF/lib directory.

Step 2. Modify Web.xml file as below

 

Step 3. Create a servlet – AuthServlet.java. We will use annotation based mapping because we are using servlet 3.

 

Step 4. Create a view file – index.jsp.

Step 5. We have DBUtils.java for database related queries.

 

Step 6. If everything is done please run the application.

PHP Example

Step 1. Put all js files under js directory. Create a view file auth.php with the following source code.

 

Step 2. Create a php file process.php for database query. Please go through the Database Connection tutorial for connecting to MySQL database.

 

Step 3. Run the auth.php file.

Codeigniter Example

Step 1. Create assets_helper.php with the following source code. The following code is required to access the asset URL otherwise you will get 404 while you access js, css, images etc.

 

Step 2. Now autoload few things like database, url, text etc.

 

Step 3. Configure the database settings as below.

 

Step 4. Change default_controller in routes.php as shown below

 

Step 5. Create a Auth controller with the below source code.

 

Step 6. Create a model class Auth_model which will interact with the database.

 

Step 7. Create a view file with the following source code. Please look carefully at the URL which is used in AJAX request/response, I did not use index.php. If you want to remove index.php then you can have a look at the tutorial How to remove index.php in Codeigniter

 

Step 8. Put all js files under assets/js directory.

Step 9. Run the application.

Thanks for your reading. Please do not forget to leave a comment.

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

2 thoughts on “Username live check using AJAX in Servlet, PHP, Codeigniter, MySQL

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.