Developer

First-place winner in our contest for the most frustrating Web development experience

First place winner in our most frustrating Web development experience contest, Pranav Shah, shares his story about his intranet development project and the fun he had working on it and learning new technologies.


In a recent article, we asked you to send us your most frustrating Web development experience. Those experiences chosen most frustrating by our panel of judges received some free stuff from Builder.

Additional information
Check out the original article for contest rules:
"Turn your most frustrating Web development experience into free software"
Other winners:
Fifth Place—Builder.com T-shirt
Fourth Place—Builder.com T-shirt
Third Place—Builder.com T-shirt (winner wishes to remain anonymous)
Second Place—Macromedia’s Dreamweaver MX


The winner of the most frustrating Web development experience contest was Pranav Shah, who shared his experiences in creating an intranet that retrieved information from several databases. He had to make several design choices during development that you may find noteworthy. For sharing with us, Pranav received Macromedia’s Studio MX, with a retail value of $899. Here is his winning story.

Pranav Shah's Web development experience
The project was to build an intranet site to show the status of all DB2 databases and their nodes for the last three timestamps and:
  • To compare the ROWS_RD, ROWS_WR, CPU_S, and CPU_U to what it is supposed to be on an average basis and to show anything that was above 20 percent in bold.
  • Order them from worst to best nodes.
  • Color code the rows.
  • Display the information graphically.

All I had to begin with was three tables, one with the average information and the other two with the current information that was updated periodically. I had to write two views to make sense of the data. Then, I had to decide what I wanted to use in terms of Web technology to accomplish the task.

My choices were XML and Flash, XML and ASP.NET, or XML and HTML. I had to use the last option, because Flash and ASP.NET weren't approved. I wanted to choose XML because I wanted to play with it, but also because I didn't want to hit DB2 for each request; it just made more sense to keep updating XML files through a scheduled application written in VB. As far as the graphs were concerned, I decided on VML, because it is standard with IE 5.5+ (I think), and SVG was again on the "not approved" list.

So here is a quick list of technologies used in the project: XML, XSL, VML, MSXML, CSS, VB 6, HTML, DHTML, and JavaScript. I will say that I didn't come up with everything on my own. I didn't know how to work with XML, so I started with a Dummies book, the same for XSL, and then more on MSXML. I did a lot of surfing and looking for tutorials to help me.

So the idea was to use VB to extract data from the database and save it as an XML file and then display the information through XSL. To begin, I created two dummy XML files, one for the databases and the other for each handle of databases, if any. After struggling with XSL for awhile, I was able to get the display as I wanted. The biggest struggle was converting and grouping the original data into suitable XML.

At this point, I had three separate HTML files. The first was the folder tree; the other two were XML data displayed in a table format. My next task was to use VML to display the information graphically. Using the Microsoft VML Generator and some articles, mainly "Using Vector Markup Language" by Rob Waggoner, made the task possible.

The next step was to combine everything. I wanted to optimize the use of JavaScript in calling the XML files and generating the dynamic HTML. Here, I managed to use an article about Object-Oriented JavaScript by Pramod Jain. The idea was to use the MSXML functions, cache the XML and XSL, and make it possible to call the same XML file with different XSL files and parameters. Then, using the DOM of Table, I created tables within tables dynamically; CSS played a big role in making this possible.

The code below shows a small part of the JavaScript.
function objXML(strFile)
{  // Object Constructor
      this.xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
      this.arrCache = new Array();
      this.arrPara = new Array()

      this.xmlDoc.async = false;
      this.xmlDoc.load(strFile);

       if (this.xmlDoc.parseError.errorCode != 0)
      {
              result = reportParseError(this.xmlDoc.parseError);
             alert(result);
       }

      this.setXSL = setXSL;  //Sets the XSL and its parameters.
      this.show = show;   //Returns the output.


This code shows how the functions are used.
varoCmn = new objXML("data/test1.xml");
varintFolder = oCmn.setXSL("data/tree.xsl");
varintData = oCmn.setXSL("data/cmn.xsl","id");
varintCmn = parent.frames[0].oCmn.setXSL("data/vml.xsl","id,column");

folderTree.innerHTML = oCmn.show(intFolder); parent.frames[1].Test.innerHTML = oCmn.show(intData,arrEntity); Graph.innerHTML = parent.frames[0].oCmn.show(intCmn,arrTemp);


As you can see, one XML file cached in the beginning, three XSL files related to this XML file cached, and then everything displayed with one simple line. Also, if there are any errors, they are reported using the parseError function of MSXML.

The last step was writing the VB program. Of course, I didn't know in the beginning that I couldn't get the XML data as I wanted directly. I had to write an XSL file to convert the XML into the form I needed. The tough part here was grouping within an XML file using XSL; I think in the next version of XSL, they have a group-by syntax which will make things like this more simplified. A sample is shown here:
<xsl:template match="z:row">
       <xsl:for-each select="self::node()[generate-id(.) =
generate-id(key('DATABASE_NM_key', @DATABASE_NM)[1])]">
              <xsl:variable name="lstDatabase" select="key('DATABASE_NM_key',
@DATABASE_NM)"/>
              <xsl:variable name="id" select="@DATABASE_NM"/>

              <xsl:element name="database">
             <xsl:attribute name="value">
                           <xsl:value-of select="@DATABASE_NM"/>
             </xsl:attribute>
                     <xsl:call-template name="ShowCaptures">
                    <xsl:with-param name="lstDatabase"
select="//z:row[@DATABASE_NM=$id]" />
             </xsl:call-template>
              </xsl:element>

       </xsl:for-each>
</xsl:template>


I have tested the code only for I.E 5.5+—this is the bare minimum. I haven’t really tested it for Netscape. I know the entire code isn't listed in this article, because I would like some credit for it if it gets used somewhere else, but this contest doesn't provide for that.

It took a lot of reading and surfing to get the project as I wanted. There is still room for improvement. I would like to sync the folder tree and, if possible, log errors directly to the IIS log event. The best part about this site was that I learned a lot of technologies with this single project.

This has been only a summary of what it took to finish the project. I started from scratch and ended up with something that was better than decent. It is fun to work with such projects; they give me a chance to learn new technologies.

Fun projects
Pranav had to make quite a few decisions and learn more than a few technologies as he worked on this project—apparently having fun the whole time. When is the last time you had fun developing a Web application? Do you have any advice for Pranav on how he can continue to refine his intranet project? Share your advice in the article discussion and tell us about your last fun project.

Thank you
Builder.com would like to thank all of our participants in the most frustrating Web development experience contest. We appreciate your willingness to share your experiences with the Builder.com community. By sharing your personal experience, you enhance our collective experience tenfold.

 

About Mark Kaelin

Mark W. Kaelin has been writing and editing stories about the IT industry, gadgets, finance, accounting, and tech-life for more than 25 years. Most recently, he has been a regular contributor to BreakingModern.com, aNewDomain.net, and TechRepublic.

Editor's Picks

Free Newsletters, In your Inbox