Worked Example: How do I prototype a Web-Based Information System?

 

This exercise will concentrate on using common web technologies to implement a prototype Web-Based Information System. We shall need the results of our initial analysis, plus a few ideas on how we might improve the existing business process.

 

Just like the previous exercise 'How do I analyse and document an existing business process using the Unified Modeling Language', satisfactory completion of this work will provide a great deal of assistance with the second part of your assignment.

 

Before we start, we need to ensure that we have a few things available, such as:

 

  • an account on a server, with 'write' permissions, or access to a web server (such as Personal Web Server on Windows 98, or Internet Information Services on Win 2000/XP)
  • a text editor such as MS Notepad
  • a browser like MS Internet Explorer, which has a functional XML parser

 

If all of this appears a little confusing or daunting, don't worry as it will all become clear as we work through the exercise.

 

From the analysis so far, our selected business process uses a variety of legacy information stores, or repositories, such as spreadsheets, databases and paper forms and files. We are going to produce a prototype that demonstrates how we can use current technologies to present information over the Internet.

 

We will not be producing a finished application - we are merely demonstrating the validity of our ideas.

 

First of all, we should think about our approach to the prototype. What steps are we going to take?

 

  1. We will need to access some information that is stored in a repository somewhere.
  2. After accessing the data, we shall need to query it so that we get the information that we want.
  3. Finally we must be able to present the data in a web browser, so that it can be accessed from anywhere with an internet connection.

 

There is a range of technologies that we could use, and as we need to access data from legacy systems, we are concerned with various incompatible standards for data storage. We shall address this by using XML.

 

The XML is used as a common format - we only have to consider how we can convert from different file formats to XML, rather than creating conversions from one file format to another.

 

So, our conversion process looks like this:

 

  1. Retrieve the data from its native format.
  2. Convert and represent the data using XML.
  3. Parse the XML.
  4. Format the XML for display and present as a HTML file in a browser.

 

Now that we understand what we have to do, we need some method of automating the process. We can't expect our users to export files from databases, convert them to XML and then represent them in a browser. Such a procedure would be prone to errors, and time consuming.

 

Active Server Pages (ASP) is a scripting language that allows us to automate tasks on the server. In this example we shall use this to automate the generation of an XML file, using queried data from a back-end legacy database. ASP is not the only solution - you might choose JSP, dotNET, PHP, PERL or other CGI technologies for your prototype.

 

Making the Prototype

 

  1. Open a text editor such as MS Notepad. The first step is to set up a connection to a MS Access Database, which holds the information that we want to display. We have to define the type of connection, a DSN-less connection. Copy and paste the following code:

<%LANGUAGE="VBScript"%>

<%
'Dimension variables for DSN-less connection
Dim connection, query, data
Set connection = Server.CreateObject( "ADODB.Connection" )
connection.Provider="Microsoft.Jet.OLEDB.4.0"

'name database to point to
Call connection.Open(Server.Mappath("database.mdb" ))

  1. Now we need to create a 'recordset' This is a temporary space in memory where we can store some data. We want to list all of our customers, so we must query the database. To query the repository we send a SQL statement, which the database will interpret and return the relevant data.

'generate query to pass to database
query = "SELECT * FROM Customers ORDER BY CustomerID"
Set rs = Server.CreateObject( "ADODB.Recordset" )
Call rs.Open( query, connection )

  1. In preparation for the next few stages, we should define the name of the output that we are going to generate. Note the file extension - XML.

 

'Define name of output file

file_being_created= "customers.xml"

  1. ASP then requires us to create a 'filesystemobject'. This is an instruction to set up a file that will be text-based, of the name above, which we can send our XML to. 

'Create a file object

set fso = createobject("scripting.filesystemobject")

Set act = fso.CreateTextFile(server.mappath(file_being_created), true)

 

  1. Just to recap so far - we have established a connection to a legacy database, queried the database and stored the result in a temporary space in memory, specified the name of an output XML file and created an object of type text file. Now we need to generate the XML.
  2. At the top of every XML document we must include the following text in between the quotation marks. We are also creating the <root> element, to ensure that our output document has only one root and therefore complies with the notion of being 'well formed'. 

'Write standard xml and root element at start of file

act.WriteLine("<?xml version=""1.0""?>")

act.WriteLine("<root>")

 

  1. The next step is to read each of the records in the recordset and write them to the output XML file. Each of the fields are enclosed by start and end tags, so that the element is complete.

'Loop to output all the query results to the xml document

do while not rs.eof

 

'Write each element to output file

act.WriteLine("<customer>")

act.WriteLine("<custid>" & rs("CustomerID") & "</custid>" )

act.WriteLine("<compname>" & rs("CompanyName") & "</compname>" )

act.WriteLine("</customer>")

 

'Move to next record in recordset

rs.movenext

loop

  1. Close the <root> element, and then the recordset. 

'At end close root element

act.WriteLine("</root>")

act.close

  1. Right! We have represented our data as XML, we just need to display it. For this we can use some straightforward HTML. In this example we are going to use a table.

%>

'Display results for query in table

<html>

<body>

<xml

src="customers.xml"

id="xmldso"

async="false">

</xml>

 

<table

datasrc="#xmldso"

width="100%"

border="1">

 

<h1>Customer Report</h1>

<thead>

<th>Customer ID</th>

<th>Company Name</th>

</thead>

 

<tr align="left">

<td><span datafld="custid"></span></td>

<td><span datafld="compname"></span></td>

</tr>

</table>

</body>

</html>

 

  1. Save the file as 'get_cust_data.asp' and ftp to your webspace.
  2. Download the 'database.mdb' file and ftp that to your webspace too. Important: Make sure that you overwrite the existing database on the server.
  3. Open Internet Explorer and navigate to your webspace. Click on the asp file and watch what happens.
  4. If you can't see the table of customers, then go back and check your code. If you can, then press the back button on your browser and press F5 to refresh the display. What do you see?
  5. If you want to provide access to the XML output direct from the report, add the following to your code. However, where do you think it should go?

 

'Provide output to screen with hyperlink to xml file

response.write "<a href='customers.xml'>customers.xml</a> (.xml) has been created <br>"

response.write "on " & now() & "<br>"

 

Now that you have a feel for connecting to a back-end database, experiment with the Access tables. Add some new tables, alter the SQL query, and display the new data.

 

You should also experiment with the presentation of your data, to make it more readable or more accessible.

 

Wireless Markup Language (WML) is XML based and can be viewed via a WAP enabled mobile phone or a PC based WAP emulator.

 

So, for some novelty, instead of the XML tags use WML to display your information system on a mobile device!