Yep, Usercake is simple opensource membership cms we can play with. Come with simple GUI but we can freely modify the codes.

In this article, i just combined usercake with AJAX Username Verification from Bit Repository.

Below what i did.

Step 1.
Change original header.php (find on folder “models”)

<?php
/*
UserCake Version: 2.0.2
http://usercake.com
*/
echo "
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>".$websiteName."</title>
<link href='".$template."' rel='stylesheet' type='text/css' />
<script src='models/funcs.js' type='text/javascript'>
</script>
</head>";

?>

to be like this

<?php
/*
UserCake Version: 2.0.2
http://usercake.com
*/
?>
 
 

yep, i just remove header code and place it on every page, in this case, i move the header content to single page.

Step 2.
Change original register.php

<?php
/*
UserCake Version: 2.0.2
http://usercake.com
*/

require_once("models/config.php");
if (!securePage($_SERVER['PHP_SELF'])){die();}

//Prevent the user visiting the logged in page if he/she is already logged in
if(isUserLoggedIn()) { header("Location: account.php"); die(); }

//Forms posted
if(!empty($_POST))
{
    $errors = array();
    $email = trim($_POST["email"]);
    $username = trim($_POST["username"]);
    $displayname = trim($_POST["displayname"]);
    $password = trim($_POST["password"]);
    $confirm_pass = trim($_POST["passwordc"]);
    $captcha = md5($_POST["captcha"]);
    
    
    if ($captcha != $_SESSION['captcha'])
    {
        $errors[] = lang("CAPTCHA_FAIL");
    }
    if(minMaxRange(5,25,$username))
    {
        $errors[] = lang("ACCOUNT_USER_CHAR_LIMIT",array(5,25));
    }
    if(!ctype_alnum($username)){
        $errors[] = lang("ACCOUNT_USER_INVALID_CHARACTERS");
    }
    if(minMaxRange(5,25,$displayname))
    {
        $errors[] = lang("ACCOUNT_DISPLAY_CHAR_LIMIT",array(5,25));
    }
    if(!ctype_alnum($displayname)){
        $errors[] = lang("ACCOUNT_DISPLAY_INVALID_CHARACTERS");
    }
    if(minMaxRange(8,50,$password) && minMaxRange(8,50,$confirm_pass))
    {
        $errors[] = lang("ACCOUNT_PASS_CHAR_LIMIT",array(8,50));
    }
    else if($password != $confirm_pass)
    {
        $errors[] = lang("ACCOUNT_PASS_MISMATCH");
    }
    if(!isValidEmail($email))
    {
        $errors[] = lang("ACCOUNT_INVALID_EMAIL");
    }
    //End data validation
    if(count($errors) == 0)
    {   
        //Construct a user object
        $user = new User($username,$displayname,$password,$email);
        
        //Checking this flag tells us whether there were any errors such as possible data duplication occured
        if(!$user->status)
        {
            if($user->username_taken) $errors[] = lang("ACCOUNT_USERNAME_IN_USE",array($username));
            if($user->displayname_taken) $errors[] = lang("ACCOUNT_DISPLAYNAME_IN_USE",array($displayname));
            if($user->email_taken)     $errors[] = lang("ACCOUNT_EMAIL_IN_USE",array($email));       
        }
        else
        {
            //Attempt to add the user to the database, carry out finishing  tasks like emailing the user (if required)
            if(!$user->userCakeAddUser())
            {
                if($user->mail_failure) $errors[] = lang("MAIL_ERROR");
                if($user->sql_failure)  $errors[] = lang("SQL_ERROR");
            }
        }
    }
    if(count($errors) == 0) {
        $successes[] = $user->success;
    }
}

require_once("models/header.php");
echo "
<body>
<div id='wrapper'>
<div id='top'><div id='logo'></div></div>
<div id='content'>
<h1>UserCake</h1>
<h2>Register</h2>

<div id='left-nav'>";
include("left-nav.php");
echo "
</div>

<div id='main'>";

echo resultBlock($errors,$successes);

echo "
<div id='regbox'>
<form name='newUser' action='".$_SERVER['PHP_SELF']."' method='post'>

<p>
<label>User Name:</label>
<input type='text' name='username' />
</p>
<p>
<label>Display Name:</label>
<input type='text' name='displayname' />
</p>
<p>
<label>Password:</label>
<input type='password' name='password' />
</p>
<p>
<label>Confirm:</label>
<input type='password' name='passwordc' />
</p>
<p>
<label>Email:</label>
<input type='text' name='email' />
</p>
<p>
<label>Security Code:</label>
<img src='models/captcha.php'>
</p>
<label>Enter Security Code:</label>
<input name='captcha' type='text'>
</p>
<label>&nbsp;<br>
<input type='submit' value='Register'/>
</p>

</form>
</div>

</div>
<div id='bottom'></div>
</div>
</body>
</html>";
?>

to be like this. ( i changed every double quote, remove some echoes, make it compatible with javascript.

<?php
/*
UserCake Version: 2.0.2
http://usercake.com
*/

require_once("models/config.php");
if (!securePage($_SERVER['PHP_SELF'])){die();}

//Prevent the user visiting the logged in page if he/she is already logged in
if(isUserLoggedIn()) { header("Location: account.php"); die(); }

//Forms posted
if(!empty($_POST))
{
    $errors = array();
    $email = trim($_POST["email"]);
    $username = trim($_POST["username"]);
    $displayname = trim($_POST["displayname"]);
    $password = trim($_POST["password"]);
    $confirm_pass = trim($_POST["passwordc"]);
    $captcha = md5($_POST["captcha"]);
 
     
    
    if ($captcha != $_SESSION['captcha'])
    {
        $errors[] = lang("CAPTCHA_FAIL");
    }
    if(minMaxRange(8,25,$username))
    {
        $errors[] = lang("ACCOUNT_USER_CHAR_LIMIT",array(5,25));
    }
    if(!ctype_alnum($username)){
        $errors[] = lang("ACCOUNT_USER_INVALID_CHARACTERS");
    }
    if(minMaxRange(8,25,$displayname))
    {
        $errors[] = lang("ACCOUNT_DISPLAY_CHAR_LIMIT",array(5,25));
    }
    if(!ctype_alnum($displayname)){
        $errors[] = lang("ACCOUNT_DISPLAY_INVALID_CHARACTERS");
    }
    if(minMaxRange(8,50,$password) && minMaxRange(8,50,$confirm_pass))
    {
        $errors[] = lang("ACCOUNT_PASS_CHAR_LIMIT",array(8,50));
    }
    else if($password != $confirm_pass)
    {
        $errors[] = lang("ACCOUNT_PASS_MISMATCH");
    }
    if(!isValidEmail($email))
    {
        $errors[] = lang("ACCOUNT_INVALID_EMAIL");
    }
    //End data validation
    if(count($errors) == 0)
    {   
        //Construct a user object
        $user = new User($username,$displayname,$password,$email);
        
        //Checking this flag tells us whether there were any errors such as possible data duplication occured
        if(!$user->status)
        {
            if($user->username_taken) $errors[] = lang("ACCOUNT_USERNAME_IN_USE",array($username));
            if($user->displayname_taken) $errors[] = lang("ACCOUNT_DISPLAYNAME_IN_USE",array($displayname));
            if($user->email_taken)     $errors[] = lang("ACCOUNT_EMAIL_IN_USE",array($email));       
        }
        else
        {
            //Attempt to add the user to the database, carry out finishing  tasks like emailing the user (if required)
            if(!$user->userCakeAddUser())
            {
                if($user->mail_failure) $errors[] = lang("MAIL_ERROR");
                if($user->sql_failure)  $errors[] = lang("SQL_ERROR");
            }
        }
    }
    if(count($errors) == 0) {
        $successes[] = $user->success;
    }
}
?>   

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register Page</title>
<link href="<?php echo $template ?>" rel="stylesheet" type="text/css" />
<script src="models/funcs.js" type="text/javascript"> </script>

<script src="models/jquery-1.2.6.min.js" type="text/javascript"> </script>
<link href="models/cek-style.css" rel="stylesheet" type="text/css" />


<SCRIPT type="text/javascript">
<!--
 

pic1 = new Image(16, 16); 
pic1.src = "loader.gif";

$(document).ready(function(){

$("#username").change(function() { 

var usr = $("#username").val();

if(usr.length >= 6)
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "check.php",  
    data: "username="+ usr,  
    success: function(msg){  
   
   $("#status").ajaxComplete(function(event, request, settings){ 

    if(msg == 'OK')
    { 
        $("#username").removeClass('object_error'); // if necessary
        $("#username").addClass("object_ok");
        $(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
    }  
    else  
    {  
        $("#username").removeClass('object_ok'); // if necessary
        $("#username").addClass("object_error");
        $(this).html(msg);
    }  
   
   });

 } 
   
  }); 

}
else
    {
    $("#status").html('<font color="red">Opppss.. username minimal <strong>6</strong> karakter.</font>');
    $("#username").removeClass('object_ok'); // if necessary
    $("#username").addClass("object_error");
    }

});

});

//-->
</SCRIPT>


</head>
 

<body>
<div id="wrapper">
<div id="top"><div id="logo"></div></div>
<div id="content">
 
<h2>Register</h2>

<div id="left-nav">
<?php include("left-nav.php"); ?>
 
</div>

<div id="main">

<?php echo resultBlock($errors,$successes); ?>

 
<div id="regbox">
<form name="newUser" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

<p>
<label>User Name:</label>
<input id="username" type="text" name="username" />  <span id="status"></span>

</p>
<p>
<label>Display Name:</label>
<input type="text" name="displayname" />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" />
</p>
<p>
<label>Confirm:</label>
<input type="password" name="passwordc" />
</p>
<p>
<label>Email:</label>
<input type="text" name="email" />
</p>
<p>
<label>Security Code:</label>
<img src="models/captcha.php">
</p>
<label>Enter Security Code:</label>
<input name="captcha" type="text">
</p>
<label>&nbsp;<br>
<input type="submit" value="Register"/>
</p>

</form>

</div>


</div>
 
<div id="bottom"></div>
</div>
</body>
</html>

see, i added

<span id="status"></span>

beside username

<p>
<label>User Name:</label>
<input id="username" type="text" name="username" />  <span id="status"></span>
</p>

and the result seem like this

usercake - Check user availability

usercake – Check user availability

Usercake – Check User Availability

Download source code here
Download Usercake here

Further more abour AJAX Check user availability you may visit DaVar Website.

Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step-by-Step Guide to Creating Dynamic Websites