GuestBlox

Try deployed GuestBlox

Learn to OpenLaszlo with GuestBlox

OpenLaszlo front-end with PHP back-end and flat-file data storage

OpenLaszlo is architected for XML web services, while HTML Web applications typically emit data encapsulated within HTML markup. GuestBlox illustrates how an OpenLaszlo rich Internet application works with an XML datasource, and how server-side code supporting an OpenLaszlo application needs to be written to emit XML rather than HTML. This example accepts user input, stores data to a flat file, and retrieves lists from that data store. GuestBlox thus represents a simple yet complete 'end-to-end' Web application powered by an OpenLaszlo frontend and a PHP backend. You can try the deployed app at: guestblox.blogspot.com

Key points illustrated

• Provides complete 'round-trip' example of data-driven Laszlo-based application
• Shows how user text input is passed from the Laszlo front end to a backend PHP script
• Shows how data is stored on the server in a flat file
• Shows how data is retrieved from the server and returned to the Laszlo front-end via a PHP script
• Shows how a PHP script can be written to emit XML rather than HTML
• Shows how portions of the UI can be customized via an external XML parameter file
• Shows how complete keyboard control is supported by default components
• Shows how to develop your own embeddable Blogbox application

To get the GuestBlox source code

Download the GuestBlox.tgz archive from:

http://www.lyndonwong.com/guestblox/guestblox_2005-01-10.tgz (23Kb download)

The archive is compressed in 'tar+gzip' format (hence .tgz), and can be expanded by numerous file expansion utilities on Windows, Unix and MacOS X.

To deploy and run GuestBlox

1. Expand the guestblox.tgz archive on your server or local desktop
2. Place the GuestBlox_frontend .lzx and .xml files in your LPS my-apps directory
3. Place the GuestBlox_backend .php scripts in the html docs directory of a PHP-enabled web server
4. Place the GuestBlox_storage_file somewhere that the PHP scripts have permission to execute read/write operations on.
5. Edit the .lzx and .php files to provide correct URL and directory paths for your specific server installation.

Pre-requisite knowledge

• how to deploy and execute Laszlo applications within a Laszlo Presentation Server (LPS 2.2.1 assumed)
• how to deploy and execute PHP scripts within a PHP-enabled web server (PHP 4.0.1 with Apache assumed)
• how to set file permissions so the PHP scripts can read and write to the data storage file.

How does GuestBlox work?

EnterData.php

Extracts text out of "guestName" variable passed from GuestBlox.lzx via HTTP GET and writes it to the GuestBlox_log file with a timestamp.

<?php
$timestamp = date('Y-m-d H:i:s');
$newGuest = $_GET["guestName"];
$entry_stamp = "<entrydate>" . $timestamp . "</entrydate>" . "<name>" . $newGuest . "</name>" . "\n";
$logfile = '/Users/lyndonwong/logs/GuestBlox_log';

if (is_writable($logfile))
{
	if (!$handle = fopen ($logfile, 'a'))
	{
		echo "Can not open file ($logfile)";
		exit;
	}

	if (!fwrite($handle, $entry_stamp))
	{
		echo "Can not write to file ($logfile)";
		exit;
	}	
	fclose($handle);	
} else {
	echo "The file $logfile is not writable";
}	
?>

GuestBlox_log file

Is a simple text file that accepts read/write requests from the two PHP scripts.

<entrydate>2005-01-08 20:58:52</entrydate><name>Wassily Kandinsky</name>
<entrydate>2005-01-08 20:55:44</entrydate><name>Laszlo Moholy-Nagy</name>
<entrydate>2005-01-08 20:55:51</entrydate><name>Walter Gropius</name>
<entrydate>2005-01-08 22:12:02</entrydate><name>Frida Kahlo</name>
<entrydate>2005-01-08 22:12:49</entrydate><name>Lyndon Wong</name>
<entrydate>2005-01-08 22:13:32</entrydate><name>Isabel Allende</name>
<entrydate>2005-01-08 23:14:00</entrydate><name>Joaquin Rodrigo</name>
<entrydate>2005-01-08 23:27:51</entrydate><name>Aung San Suu Kyi</name>
<entrydate>2005-01-09 01:38:38</entrydate><name>Oliver Steele</name>
<entrydate>2005-01-08 22:19:52</entrydate><name>Jorge Borges</name>
<entrydate>2005-01-08 22:22:05</entrydate><name>Frank Gehry</name>
<entrydate>2005-01-09 01:40:29</entrydate><name>John Sundman</name>
<entrydate>2005-01-09 01:43:28</entrydate><name>Eric Bloch</name>

GetData.php

Reads the GuestBlox_log and formats the results into XML for consumption by GuestBlox.lzx

<somedata>
<?php
	$index = 0;
	$display_max = 20;
	$file = fopen ("/Users/lyndonwong/logs/GuestBlox_log", "r");
	$buffer = fgets($file, 4096);
	
	while (!feof ($file)) {
		if ($index < $display_max) { 
			echo "<visitor>" . $buffer . "</visitor><br/>";
			$buffer = fgets($file, 4096);
			$index++;
		} else {
			echo "<visitor><name>*Display max. of " . $display_max . " reached.</name></visitor>";
			break;
		}
	}
	fclose ($file); 
?>
</somedata>

XML data returned over HTTP

GetData.php returns the following XML result, which is then parsed by GuestBlox.lzx using XPath.

<somedata>
<visitor><entrydate>2005-01-08 20:58:52</entrydate><name>Wassily Kandinsky</name></visitor><br/>
<visitor><entrydate>2005-01-08 20:55:44</entrydate><name>Laszlo Moholy-Nagy</name></visitor><br/>
<visitor><entrydate>2005-01-08 20:55:51</entrydate><name>Walter Gropius</name></visitor><br/>
<visitor><entrydate>2005-01-08 22:12:02</entrydate><name>Frida Kahlo</name></visitor><br/>
<visitor><entrydate>2005-01-08 22:12:49</entrydate><name>Lyndon Wong</name></visitor><br/>
<visitor><entrydate>2005-01-08 22:13:32</entrydate><name>Isabel Allende</name></visitor><br/>
<visitor><entrydate>2005-01-08 23:14:00</entrydate><name>Joaquin Rodrigo</name></visitor><br/>
<visitor><entrydate>2005-01-08 23:27:51</entrydate><name>Aung San Suu Kyi</name></visitor><br/>
<visitor><entrydate>2005-01-09 01:38:38</entrydate><name>Oliver Steele</name></visitor><br/>
<visitor><entrydate>2005-01-08 22:19:52</entrydate><name>Jorge Borges</name></visitor><br/>
<visitor><entrydate>2005-01-08 22:22:05</entrydate><name>Frank Gehry</name></visitor><br/>
<visitor><entrydate>2005-01-09 01:40:29</entrydate><name>John Sundman</name></visitor><br/>
<visitor><entrydate>2005-01-11 20:27:04</entrydate><name>Eric Bloch</name></visitor><br/>
</somedata>

GuestBlox.lzx

The Laszlo front-end defines a simple interface declaratively, and invokes appropriate PHP scripts to add guests and view the latest guest list. Full keyboard control of the app via Tab and Return keys comes for free (as in beer) -- this is rather helpful when entering many guests (the keyboard control and the beer).

<canvas width="184" height="534" debug='false'>

	<!-- RESOURCES -->
    <!-- Specify choices for a serif font and a san-serif font -->
    <!-- See http://localhost:8080/lps-2.2.1/docs/guide/fonts.html -->
	<font name="serif" src="timmonsr.ttf" />
	<font name="san"  src="helmetr.ttf" />
	
	<!-- XML datasources -->
	<!-- See http://localhost:8080/lps-2.2.1/docs/guide/data-tutorial.html#data-tutorial.including -->
	<!-- EasyDataSource invokes a php script that returns dynamic XML data -->
	<dataset type="http" name="EasyDataSource" src="http://localhost/~lyndonwong/php_lab/GuestBlox/GetData.php" />
	<!-- EasyDataEntry invokes a php script that writes user input to a text file on the server -->	
	<dataset type="http" name="EasyDataEntry" src="http://localhost/~lyndonwong/php_lab/GuestBlox/EnterData.php" />

	<!-- Editable customization parameter values in a static external XML file -->
	<dataset name="EasyLabels" src="GuestBlox_parameters.xml" />

	<!-- APP INTERFACE -->
	
	<!-- Simple 1 pixel border created using two nested views -->
	<view x="3" y="3" width="180" height="530" bgcolor="gray"  >
		<!-- UI view is nested on the above gray background, sets XPath pointer for label parameters -->
		<view width="178" height="528" x="1" y="1" bgcolor="white" datapath="EasyLabels:/parameters/" >
		    <!-- Interface elements layed out vertically using simplelayout tag -->
			<simplelayout axis="y" />
			<!-- Header label formatted using text and color values extracted from EasyData_parameters.xml -->
			<text x="6" y="2" height="26" font="san" fontsize="18" width="198" fgcolor='${parseInt(parent.colorValue.text)}' text='${(parent.titleValue.text)}' />
			<!-- A nested view is created with smaller fontsize specified for buttons and input field -->
			<view x="8" y="1" font="san" fontsize="12">
				<simplelayout />
				<button width='160'> View Guest List
					<method event="onclick">
						var data = canvas.datasets.EasyDataSource;
						data.doRequest();
					</method>
				</button>
				<!-- creates some white space -->
				<view height="6"></view>
				
				<!-- Editable text input field -->
				<edittext id="nameEntry" width="160"></edittext>
				
				<button width='160'> Join Guest List
					<method event="onclick">
					<!-- JavaScript method for Enter button -->
					<!-- Extracts input from nameEntry text field and prepares query string for data entry to server -->
					<!-- doRequest() function uses HTTP Get by default -->
						var dataEntry = canvas.datasets.EasyDataEntry;
						var passedData = new LzParam();
						passedData.addValue("guestName", nameEntry.getText(), true);
						dataEntry.setQueryString(passedData);
						dataEntry.doRequest();
					</method>
				</button>
			</view>
			
			<!-- creates some white space -->
			<view height="12"></view>
			
			<!-- Display formatting with different font style and size for XML guest list data returned from server -->
				<view x="6" width="170" clip="true" font="serif" fontsize="12" name="LogReport" datapath="EasyDataSource:/somedata/">
					<simplelayout />
					<text fontsize="14" width="170" datapath="visitor/name/text()" />
				</view>
				
			<!-- EXTRACTED PARAMETERS FROM: GuestBlox_parameters.xml, for use in app header label -->
			<!-- text foreground color set to white to hide values from screen -->
			<text name='colorValue' fgcolor='white' datapath='titleColor/text()' />
			<text name='titleValue' fgcolor='white' datapath='titleText/text()' />
			
		</view>
	</view>
</canvas>

GuestBlox_parameters.xml

Provides editable color and label text information external to the GuestBlox.lzx source code.

<parameters>
	<titleText>My GuestBlox</titleText>
	<titleColor>0x008000</titleColor>
</parameters>

Comments and suggestions

For comments, corrections and suggestions to improve this Laszlo+PHP example, please contribute to the discussion page:

http://www.openlaszlo.org/wiki/index.php?title=Talk:GuestBlox

Primary maintainer of this Wiki page: