How to Create an XML AJAX App with Open Standards

Data Integration & User Interaction with Open Standards

Open Standards and the W3C

On November 12, 1990 Sir Tim Berners-Lee @timberners_lee submitted a paper that would change the world, this paper was the WorldWideWeb: Proposal for a HyperText Project.  Sir Tim Berners-Lee leads the World Wide Web Consortium (W3C).  The W3C is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’s mission is to lead the Web to its full potential.  The W3C is having it’s very first Developer’s Conference (Free Streaming Video Available)  #W3Conf @w3cConf on November 15 – 16, 2011, “W3Conf Developer Conference“.

Data and Services Integration

Integration of heterogeneous data and services has always been a concern for creators and managers of services. With the emergence of the Web, the need for reusing data and services became even stronger, as the number of available services raised.

Cloud-based services are also created using different paradigms and present the same challenges as the ones found in Enterprise Services, or on the Open Web, and the opportunity to create mashups of services using different models.

There is currently extensive deployment experience with Web Services; the Semantic Web is more mature; and the XML Stack has become ubiquitous. The increasing use of JSON-based services and Cloud-based computing combined with experience and maturity of the XML-based services and of the Semantic Web technologies suggests that now is a good time to find ways to bridge and combine these various technologies to make a coherent platform for future business and technical work.  Additional information, reports, and presentations are available from this W3C Workshop.

A paper submitted by IBM to the W3C Data & Services Workshop describes the challenges of multiple data formats and possible solutions for loosely structured data, “Experiences with JSON and XML Transformations“.  This paper explains common problems developers and web service providers face when trying to develop a common interface.  The presenters identified many real-world key problems that left me wondering about a different solution that I hope others elaborate on here.

Web 2.0 App Model with XML AJAX API

Modern Web 2.0 Apps use Asynchronous JavaScript and XML (AJAX) to create dynamic interactive displays with data.  Many AJAX apps use JSON instead of XML.

What if they used Standard XML leveraging XPATH with cross-platform and language-independent DOM?  This approach could let us use object-oriented programming to work with object-oriented data.

The Data

The problem with loosely structured data is identifying target areas. This simple example of a book collection does not have unique identifiers in the data elements. Unique identifiers in the data elements would allow us to use standard methods to work with targeted areas.



Top Shelf Book Store

  Everyday Italian
  Giada De Laurentiis
  2005
  30.00



  Harry Potter
  J K. Rowling
  2005
  29.99



  XQuery Kick Start
  James McGovern
  Per Bothner
  Kurt Cagle
  James Linn
  Vaidyanathan Nagarajan
  2003
  49.99



  Learning XML
  Erik T. Ray
  2003
  39.95


 

The Data with NoDeCode Identifiers

This simple example of a book collection has unique identifiers in the data elements. The “XQuery Kick Start” book element now has a unique id, it’s author elements all have unique ids, along with every element in our XML data. Unique identifiers in the data elements allow us to use standard methods to work with targeted areas. No DeCode between JSON and XML is necessary with NoDeCode identifiers.



Top Shelf Book Store

  Everyday Italian
  Giada De Laurentiis
  2005
  30.00



  Harry Potter
  J K. Rowling
  2005
  29.99



  XQuery Kick Start
  James McGovern
  Per Bothner
  Kurt Cagle
  James Linn
  Vaidyanathan Nagarajan
  2003
  49.99



  Learning XML
  Erik T. Ray
  2003
  39.95

The NoDeCode identifiers are added as attributes to the XML DOM object with a few simple lines of code.

//Add nodecode for indexing elements
xmlUtil.prototype.addNodeCode = function(xmlNode){
	for (var i = 0; i < xmlNode.childNodes.length; i++) {//each child node
		if (xmlNode.childNodes[i].nodeType == 1) {//no white spaces
			//add nodecode attribute
			xmlNode.childNodes[i].setAttribute("id", this.getNodeCode());
			//http://www.w3.org/TR/xml-id/
			//setIdAttribute is not supported in common web browsers
			//xmlNode.childNodes[i].setIdAttribute("id", true);
		}
		//recursive to child of children
		this.addNodeCode(xmlNode.childNodes[i]);
	}
}

Simple AJAX Interfaces for Targeted XML DOM Objects

The NoDeCode supports connecting standard user interfaces to targeted data areas in the XML DOM Object supported by standard XPATH methods.  It is important to note that no round trips to the server are taking place at this time.  All the user interactions are taking place in the XML Object on the client.  The data can be manipulated and modified on the client, then the data object can be transformed into a string and posted to the server using standard HTTP protocol.

A screenshot of a simple delete books user interface

NoDeCode has been tested in the following web browsers:

  • Firefox 7
  • Google Chrome 15
  • Internet Explorer 8

NoDeCode Supports:

  • Standard HTTP protocol to get XML string
  • Method to convert XML string to XML object
  • Method to convert XML object to XML string
  • Methods/Properties to target loosely structured XML
  • Methods to connect User Interfaces to XML objects

The NoDeCode AJAX XML XPATH DOM Model demonstrates how to extend existing web browser objects and methods for custom needs.  It also shows how to use Object-Oriented JavaScript programming to create custom objects that can easily be extended to include new methods and properties.  NoDeCode contains many resources in it’s source code and was written in a single HTML page to support fast modifications and quick testing.  The source code along with a sample XML file can be downloaded here, NoDeCode.zip

Please feel free to share your thoughts and comments here.

How to Setup a Virtual Web Server in 10 Minutes

Virtual Hosting

Virtual hosting is a method for hosting multiple domain names on a computer using a single IP address. This allows one machine to share its resources, such as memory and processor cycles, to use its resources more efficiently.

Introduction

This article will walk the reader through a few simple steps on how to setup a virtual web server in 10 minutes.  The steps outlined here describe how to install Apache Web Server with the MySQL Database, PHP, & Perl.  This is a tutorial on how to setup a virtual web server on the Apple Macbook Pro, but the same steps apply for a Microsoft Windows computer with a few simple modifications.

The Apple Macbook Pro OS X already comes bundled with a web server.  This Mac OS X web server can be enabled by following the steps outlined in this article, “How to set up a Web Server in Mac OS X Leopard“.

This tutorial will show how to install and configure a virtual web server for web development that can be removed at will.  Web developers experimenting with cutting edge technologies and custom configurations usually need multiple environments.

Please use caution when installing new software on computer systems.  A Best Practice includes creating system backups before changes.

1. How to Install Open Source Software

The good people at Apache Friends have made this step extremely easy.  People can download an Apache distribution containing MySQL, PHP and Perl in the XAMPP package.  Download and install XAMPP by following the steps defined at http://www.apachefriends.org/en/xampp.html

2. Edit the Local Host File

sudo nano /private/etc/hosts

The entries in this file start with something like this:

# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost

add the new server name to the bottom of the list here

127.0.0.1 virtualserver1.dev

Press control-o to save the file, then enter, and control-x to exit the editor.
Flush the DNS Cache to activate changes

dscacheutil -flushcache

3. Update the Virtual Host File

sudo nano /Applications/xampp/etc/extra/httpd-vhosts.conf

This file will look very similar to the text below. Delete everything in this file and add the virtual host information.

    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common

New Virtual Host File

# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# 
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost 127.0.0.1

    ServerAdmin webmaster@virtualserver1.dev
    DocumentRoot "/projects/virtualserver1/docs/public_html"
    ServerName virtualserver1.dev
    ServerAlias www.virtualserver1.dev
    
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
    
    ErrorLog "logs/virtualserver1-error_log"
    #Don't really need a log file for a local web server
    #CustomLog "logs/webtechman.dev-access_log" common

4. Update the HTTPD Config File

sudo nano /Applications/XAMPP/xamppfiles/etc/httpd.conf

Remove the comment from #Include /Applications/xampp/etc/extra/httpd-vhosts.conf
Original line

#Include /Applications/xampp/etc/extra/httpd-vhosts.conf

Updated line

Include /Applications/xampp/etc/extra/httpd-vhosts.conf

Create a test file for the “Document Root” folder identified in the new virtual host and save it as “index.php”.




 
 
 
 


Hello

5. Viewing The Virtual Environment

Navigate to “/Applications/XAMPP” and run XAMPP Control

Start the database and web server from the XAMPP Control

Open a web browser and navigate to http://localhost and see the default XAMPP page.

Open a web browser and navigate to http://localhost/phpmyadmin/ and see the MYSQL database manager.

Open a web browser and navigate to http://virtualserver1.dev/index.php and see the test page from the new virtual web server.

Adding Additional Virtual Web Servers

Additional virtual web servers can be created by repeating steps 2 & 3.  The new virtual web servers will need unique names, for example: “virtualserver2″, “virtualserver3″, “virtualserver4″, or “mydevserver”.

Fixing MySQL error 13 on Mac OS X 10.6.x: This error usually occurs when the curly quotes are used in the configuration files, which happens when copying and pasting code from the web.  This error can be fixed by changing these “HTML quotes” to normal “quotes”.

Summary

Setting up virtual web servers in the development environment is a very simple task.  Local instances of web server software allows web developers to experiment with features of web applications like WordPress blog software.  The new features can be tested locally before implemented in a production environment.  Each of these virtual environments can be configured to meet custom needs.  Learn more about Apache Web Server Name-based Virtual Hosting here.

Note: The “Document Root” is outside of the web server software installation, which allows replacing the current web server software with something like “Zend Server” without disrupting current web site files.

Why I Hate Open Source!

Working with #opensource: Upgrading

I manage a Social Media Platform created from Open Source software and here are the INSANE steps I go through for updates.

Step 1

Click on “upgrade automatically”.

buddypress-update-step-1

Step 2

Enter connection information.

buddypress-update-step-2

Step 3

Click on “activate plugin”, which returns me to a page showing “Plugin Activated”.

buddypress-update-step-3

Can you see why I hate Open Source?

I hate open source software, because it’s too easy! In the past, this type of process would take a specialized team of people hours upon hours to complete.  This task was completed in less than 10 minutes, thanks to Open Source and the brilliant members of #opensource communities.

Now I have the the time and money to go shoe shopping with my wife, thanks a lot #opensource?!?!  My wife overheard me and my associates talking about moving this platform into the cloud.  The cloud computing solution will save us even more money and time.  My wife is so excited, she added an additional page to the “honey do” list.

Special Thanks!

A special “Thank you!” to members of open source development communities.  I understand most of you have full-time jobs, families, and other interests.  You volunteer your time during lunch breaks, weekends, and the midnight hour to solve problems and share solutions.  My colleagues and I, plus countless people around the world have more time to focus on relationships with people around us because of your tireless dedication.  Thank You!

I also appreciate the work of Matt Mullenweg creator of WordPress and founder of Automatic.  Thanks to Andy Peatling and the BuddyPress Community.  You should see this article by Andy: “Give a Little“.

BuddyPress: Social networking in a box

Build a social network for your company, school, sports team or niche community all based on the power and flexibility of WordPress.

Visit BuddyPress.org

Visit BuddyPress.org

Cloud Computing with Amazon E2C

Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides resizable compute capacity in the cloud. It is designed to make web-scale computing easier for developers.

Visit Amazon Elastic Compute Cloud

Visit Amazon Elastic Compute Cloud