How to check if username already exists using web services

If you want to learn how to use and benefit from the AJAX Web Service feature, please consider this situation:

You developed a site (completely or partly with MX AJAX Toolbox). Your site visitors should create an account on the site before being able to use it. For creating this account, they are redirected to a page where a registration form is displayed. The information they enter in that form (name, username, password) is stored in a database. Of course, the username must have unique values. Now if there is a site visitor who wants to register, and it happens that he/she enters a username that is already stored in the database, only after the form is completely filled out and submitted will they learn that the registration failed (because the username already exists).

By using an AJAX web service, you can optimize the registration process like this: the form field that must be checked will be checked right after a value is entered there, and not after submitting the form. This way, site visitors do not have to fill out the whole form (that can be huge sometimes) and find out in the end that it didn't work. Try this yourself by following the instructions below.

Note: The server-side function used in this tutorial is for the PHP server model.

First of all, set up the Dreamweaver environment:

1. The database used in this tutorial has only one table, user_urs, that has four columns: id_usr, name_usr, username_usr, and password_usr (their names are more than suggestive). Create its structure by using the scripts provided in the .zip package (either .sql or .mdb), in the \tutorials\Check username\db folder.

2. Create a new page in one of your sites (used for testing/learning), in the root, and name it check_username.

3. Open the check_username file and define a new Dreamweaver database connection: conn_web_service. Configure it to connect to your database server and make it point to the database containing the table described above.

4. There is another file that you will need: when a duplicate username is typed, the site visitor will be redirected to another page where he/she will be told that the entered username already exists. So create a new file in the site root and name it user_exists. Open it and enter the following text: The entered username already exists! Please enter another value. Save the file and then close it.

Now that the database connection and the files for the registration form and redirect on failure are created, continue with the next steps and learn how to use an AJAX web service:

1. Open the check_username file, if not already opened.

2. Click the Insert Record : Record Insertion Form Wizard icon in the Application tab of the Insert bar:
   
   
                                 

3. Configure the Record Insertion Form dialog box that opens as shown below:
   
   
                                

4. • Select the conn_web_service database connection defined earlier.

   • Select the user_urs database table to insert new records into.

   • You can leave the After inserting, go to text box blank as it is not important for this specific task that the tutorial will achieve.

   • Configure the Form fields grid as shown below:

   • • Select the id_usr table column and press the Minus (-) button above the grid to remove it from the insert form.

     • Select the name_usr table column and use the interface controls below the grid (more precisely the Label text box) to change its label from Name_usr: to Name:.

     • In a similar manner, select the username_usr table column and change its label to Username:.

     • For the password_usr table column, change its label to Password: and set it to be displayed as a Password field.

   • Click OK when you are done configuring the dialog box.

4. Save, upload, and preview the check_username page in browser. Try it out by creating a new user account and check the database for the new record:
   
   
                               

5. Back in Dreamweaver, apply the Check New Username server behavior from the Application panel, Server Behaviors -> + -> User Authentication. Configure the dialog box that opens as shown below:
   
   
                               

6. • In the Username field drop-down menu select the username_usr table column as this is where site usernames are stored.

   • Use the Browse button next to the If already exists, go to text box to locate and select the user_exists file.

   • Click OK to apply the server behavior.

6. Save, upload, and test the page in browser again. Notice that if you enter the same username as the one registered before (sunshine), you will be redirected to the user_exists page:
   
   
                              

7. Back in Dreamweaver, in Design view, click the username text field, press the right arrow key, and then switch to Code view. Right where the cursor is placed (before </td>), paste the following code section: <div id="duplicate_alert" style="color: red;"></div>. You just created a div container for the alert message displayed (in red) when a duplicate username attempts to be created.

8. To save time for your site visitors that want to register, and to check the form fields that need validation as they are given values, use an AJAX web service. Before that though, create a server-side function in page:

9. • Still in Code view, locate the // *** Redirect if username exists line (#32) and create a new line above it. This is where you are going to create your custom function.
     Note: Remember that the function used in this tutorial is for the PHP server model.

   • This function uses the same logic as the one generated with the Check New Username server behavior. The difference is that it uses GLOBAL variables for connection (as the code runs inside a function). Copy/paste the following code in your page, at the specified location above:
     
     function checkUsername($loginUsername)
     {
     $LoginRS__query = sprintf("SELECT username_usr FROM user_usr WHERE username_usr=%s", GetSQLValueString($loginUsername, "text"));
     mysql_select_db($GLOBALS['database_conn_web_service'], $GLOBALS['conn_web_service']);
     $LoginRS=mysql_query($LoginRS__query, $GLOBALS['conn_web_service']) or die(mysql_error());
     $loginFoundUser = mysql_num_rows($LoginRS);
     //if the retrieved recordset is not empty (it has one record), then the username already exists
     if($loginFoundUser)
     {
     return "You cannot use the name '" . $loginUsername . "' for registration!";
     }
     return "";
     }
                               
     Note: If you named your database connection differently than suggested above, make sure you change the bolded parts in the code section above with your database connection name.
                                

9. Launch the AJAX Web Service Wizard from the MX AJAX Toolbox tab of the Insert bar. The wizard has two steps.

10. Configure the first step of the AJAX Web Service Wizard as shown below:
    
    
                              

11. • Select the function call type.

    • In the Function name text box enter the name of your custom function: checkUsername.

    • This function only has one parameter. Click the Plus (+) button above the Parameters grid to add it:

    • • The source for the parameter value is a page element.

      • The page element that gives the parameter value is the username text field from the registration form.

    • Click Next to continue configuring the wizard.

11. Configure the second step of the AJAX Web Service Wizard as shown below:
    
    
                             

12. • The web service result will be placed in a page element.

    • The page element that will display the web service result is the div container you created earlier, having the duplicate_alert ID.

    • The form field associated with the triggered action is the username text field from the registration form.

    • The event that triggers the action is onBlur (when the focus leaves the current form field).

    • Click Finish to apply the wizard.

12. Save, upload, and test the page in browser one more time. Notice that if you enter the same username as the one registered before, you will be notified right after filling out that field that the value entered is not valid:
    
    

This was just an example of how you can benefit from the AJAX web service, but there is much more you can achieve!