Phase 7: Creating a User Profile

When the user signs in via the login page, the user will be taken to their profile page. This means that a user profile has to be created for the user which the user can customise. However, the page must be as simple as possible - users already have profiles (such as Facebook, Twitter, Google+ etc…) in many other places on the web - the last thing they want to create yet another profile.

Figure - Login & Register Forms

When the user registers a new account, their profile contains a username, password and a default profile image.

Figure - Default Profile Page

Additionally, the system also generates a shortened username, consisting of the part of the username before the @ in their email address.

var dUsername = comments[comment].user_from.split("@")[0];

Once in their profile page, the users can change their password using the change password form. A new user has no scores, no rank, no comments and no pokes. These are added to the user's profile as they play the game.

For example, using the account just created, we play a game to achieve a score. After having played, this score is submitted to the system, and as can be seen it is now shown on the user's profile page:

Figure - Profile Page Showing Player Top Score

The page shown so far is the page seen by the user when viewing their own profile. Another page is created which allows the user to view somebody else's profile (by clicking on the username or display picture when viewing high scores).

Figure - Viewing a Player's Profile Screen

The code for displaying the profile of a user is relatively straightforward, however this query must be modified in the next steps to account for comments.

function loadMyDetails(username) {
showMyProfile();

//Ajax request to get profile
var navigate = 'ProfileEngine.php?mode=getPlayerProfile&username=' + username;
$.ajax({
type : 'Get',
url  : navigate,
async : true,
cache : false,

success : function(text) {
displayMyPlayerProfile(text, username);
},
error : function() {
//Do nothing
}
});
}

The code above is an AJAX call to the profile engine to retrieve the profile information for a player.

Within the profile engine, the following code retrieves the profile details:

function getPlayerProfile() {
global $dbBallGame;
$username = $_GET['username'];

$qry = "SELECT user.username, user.userimg, max(score.score) as 'best',
FROM user
LEFT JOIN score ON user.id = score.user_id
WHERE user.username = \"$username\"";

$result = mysql_query($qry, $dbBallGame) or die(mysql_error());
$row = mysql_fetch_assoc($result);
$encodedResult = json_encode($row);
echo $encodedResult;
}

Note how in the query above, the score table is added to the user table using a left join. Had a normal join been used (using WHERE), no profile would be loaded where there is no score yet. With a left outer join, the records on the left (i.e. the user table) are always displayed regardless of the score.

function displayMyPlayerProfile(text, username) {
var profile = eval('(' + text + ')');
document.getElementById("my-player-profile-username").innerHTML = profile.username;

if (profile.userimg == null || profile.userimg == "null" || profile.userimg == "") {
document.getElementById("my-profile-pic").src="img/default_profilepic_2.png";
} else {
document.getElementById("my-profile-pic").src="img/" + profile.userimg;
}

document.getElementById("my-profile-score-value").innerHTML = profile.best;
document.getElementById("my-profile-pokes-value").innerHTML = profile.pokes;
document.getElementById("my-profile-comments-value").innerHTML = profile.comments;
}

Finally, the JavaScript code displays the retrieved records inside the profile page.