Acmlm's Board - I2 Archive

Register \| Login
Views: 19364387	Main \| Memberlist \| Active users \| ACS \| Commons \| Calendar \| Online users Ranks \| FAQ \| Color Chart \| Photo album \| IRC Chat	11-02-05 12:59 PM

0 user currently in Acmlmboard support?.

Acmlm's Board - I2 Archive - Acmlmboard support? - Asynchronous Javascript and XML + Acmlmboard: A small real world example.

Add to favorites | "RSS" Feed | Next newer thread | Next older thread

User

Post

BillyGraham21

Micro-Goomba
Level: 5

Posts: 5/10
EXP: 363
For next: 166

Since: 06-23-05

Since last post: 47 days
Last activity: 13 hours

Posted on 06-26-05 03:57 AM

Link | Quote

Asynchronous Javascript and XML + Acmlmboard: A small real world example.

Recently I have been meddling in the oft-popular and equally over-used buzzword branch of programming, "AJAX" (okay, not as much as fucking Ruby, but still..). Asynchronous Javascript and XML. Pertaining to web-browsers that support the XMLHttprequest command/method/object. It's what makes the world, and Google, "go round"; an excellent example is Google Maps. AJAX itself is nothing new nor particularily novel. AJAX setups allow web applications to retrieve and append data to the currently viewed page without reloading.

I worked a very brief example of XMLHttprequest into a PHP forum system which I have been creating on and off for the past few months and decided to also work it into the Acmlm board in a very small way: the registration system. Now, this really isn't as useful or as practical for the way the current registration process occurs, but it is no doubt a much needed feature on many other online registration forms. You know the type: you fill out about 30 forms worth of information, half of them non-cachable sensitive pieces of data, only to hit the "submit" button to find out that your username is taken. Well, frankly that pisses me off to no end. You hit the back button and half of the form (if you're lucky) needs to be refilled completely and you have to hope again that you pick a username that isn't taken.

This is a very simple solution to that problem. Using a small combination of the existing registration script, PHP+SQL, and Javascript, you can query the existing userbase for your desired name and--without refreshing the page--find out if it is available. I've made two quick screenshots to show basically what you'll see. You interact by simply clicking the link, and the data appends itself: before , and after.

The additions themselves are very simple and straitforward with little changes to the actual base system (which is good considering the incredibly convoluted nature of the pre):

1) Navigate to pre lines 43-45, insert bold statement:


	<body onload=window.document.REPLIER.username.focus()>
	<script type=\"text/javascript\" src=\"lib/check_for_username.js\"></script>
	<FORM ACTION=register.php NAME=REPLIER METHOD=POST>

Because?: includes the script in the document.

2) Navigate to pre line 48, insert bold statement:


	$tccell1> <b>User name: </b>$descbr The name you want to use on the board. <a onclick=\"RequestInit('lib/check_for_username.php?username=', 'content');\" href=\"register.php#\">Does this name already exist</a>: <span id=\"content\">?</span></td>

Because?: activates script and provides an area for the returned content to be displayed.

3) Navigate to pre line 50, insert bold statement:


	$tccell2l>$inpt=username id=\"username\" SIZE=25 MAXLENGTH=25><tr>

Because?: We use the getElementById(); javascript function.

That's it, very quick and painless as far as the pre additions to the acmlmboard itself are concerned. Next, you just need to place two scripts:

1) The first script, 'check_for_username.js', should be moved into the /lib/ directory. This script contains the XMLHttprequest object functions.

2) The next script is 'check_for_username.php', to be placed into the root directory of the board software. This script is called by the XMLHttprequest object and queries the existing SQL database for usernames.

I have the files directly available for download to place/overwrite for the last released Acmlmboard version 1.A2, and I've also commented and included the Javascript and PHP pre in case you want to patch another existing version. Any comments, questions, or bugs can be addressed in this thread.

check_for_username.js

//will hold the retrieved content
var RetrievedContent;
//the XMLHttprequest object
var xmlhttp;

	//sends request to check_for_username.php and displays results
	function RequestInit(varURL)
	{
		//gets the current value of the username text box
		var username_input = document.getElementById("username").value;
		//append variables to send to php script
		var URLQuery = varURL + username_input;

		//make sure they actually entered a name, if so proceed
		if (username_input)
		{
			//cross-browser support for Mozilla-based and IE web applications
			if(window.XMLHttprequest)
			{
				//create new Mozilla XMLHttprequest object
				xmlhttp = new XMLHttprequest();
			}
			if(window.ActiveXObject)
			{
				//create new IE XMLHttprequest object
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}

			//pass object values necessary to execute
			xmlhttp.open("GET", URLQuery, true);
			//'ready status' has changed, execture function PlaceContent()
			xmlhttp.onreadystatechange = PlaceContent;
			//make the request,  username_check.php + URI passed values
			xmlhttp.send(null);
		}
	}

	//gets content passed back from PHP script and appends to the current document
	function PlaceContent()
	{
		//get response from page queried, if ready (4 == 'complete'), get content
		if (xmlhttp.readyState == 4)
		{
			//asign text to variable
			RetrievedContent = xmlhttp.responseText;
			//replace content in selected tag with retrieved content
			document.getElementById('content').innerHTML = RetrievedContent;
		}
	}

check_for_username.php

<?php
	//sql database variables
	require 'lib/config.php';
	//requested username variables
	$RequestedName = $_GET['username'];

	//connect to sql database, because the acmlm pre lacks database connection functions or other flexible abstractions
	$connection = mysql_connect($sqlhost, $sqluser, $sqlpass) or die('Database Connection Error:'.mysql_error());
	mysql_select_db($dbname) or die ('Database Select Error: ' . mysql_error());

	//attempt to retrieve queried username
	$result = mysql_query("SELECT * FROM users WHERE name = '$RequestedName'") or die ('Get User Data Error: '.mysql_error());
	$User = mysql_fetch_array($result);
	//assign variables from retrieved SQL array
	list($U_ID, , , $U_NAME) = $User;

	//determine whether or not the username exists in the database, present feedback
	if (!$U_ID)
	{
		echo "This username, <u>$RequestedName</u>, has not been taken. It's all yours! ";
	}
	else
	{
		echo "Sorry, this username, <u><a href=\"profile.php?id=$U_ID\">$RequestedName</a></u>, has already been taken. Please try another.";
	}

	// close connection to to SQL database
	mysql_close ($connection) or die ('Database Error: '.mysql_error());
?>

(edited by BillyGraham21 on 06-25-05 07:09 PM)

Add to favorites | "RSS" Feed | Next newer thread | Next older thread

Acmlm's Board - I2 Archive - Acmlmboard support? - Asynchronous Javascript and XML + Acmlmboard: A small real world example.

Page rendered in 0.012 seconds.