|
Introduction
In this article Dima Khanine illustrates how to outline a web site and how to implement that outline in server side code.
Why Do We Need Outlines on the Web?
More and more Web sites are coming on line every day and to attract surfers to your site is becoming more difficult. To retain our users’ attention we need to make their interaction with the Web site as easy as possible, so they can find what they’re looking for fast. For example, part of Yahoo’s success is the excellent, structured organization of the site. Outlines can help us to get organized.
Why Do We Need Them on the Server Side?
While client scripting is becoming more reliable, keeping your HTML output as simple as possible is still a good practice, especially if you are not sure which browser your customer uses. Server-side implementation will make your outlines browser-independent.
Another consideration is the amount of data the client has to download. Let’s say there is an employee table grouped by department:
|
Department |
Employee |
|
1123 |
Dave Smith |
|
1123 |
John Dow |
|
1123 |
Steve Richards |
|
1157 |
Dan Stevenson |
|
1161 |
Roger Hawker |
|
… |
… |
This table can be quite large and its download time may significantly decrease the performance of your Web application. With an outline the user will only get the data he (she) really needs:
- 1123
- 1157
- Dan Stevenson
- 1161
- ...
How to Implement This in ASP
We all recognize there are many ways to accomplish the same task. I’m not pretending here to show you the best algorithm, but I’ll try to give you an idea of how outlines may be easily written on ASP. First let me remind you that an ASP page is stateless until you use Session or the like mechanism to maintain your state between calls, so we need to get our outline state each time from the query string.
Note in the following examples I use a VB 2-dimensional array to store outline data. You may want to use recordset or another source of data in your applications. However this will only require some minor changes, like adding a call to the MoveNext method of your recordset object just before the outer loop operator.
Let’s start from the very basic simple outline where only one branch could be open at a time.
The code that produces this output is listed below.
<%@ Language=VBScript %>
<%Option Explicit%>
<%
‘ Array initialization
Dim items(10,2), maxItems
maxItems = 9
items(0,0) = "Item 1"
items(1,0) = "Item 1"
items(2,0) = "Item 1"
items(3,0) = "Item 2"
items(4,0) = "Item 2"
items(5,0) = "Item 2"
items(6,0) = "Item 3"
items(7,0) = "Item 3"
items(8,0) = "Item 3"
items(9,0) = "Item 3"
items(0,1) = "SubItem 1.1"
items(1,1) = "SubItem 1.2"
items(2,1) = "SubItem 1.3"
items(3,1) = "SubItem 2.1"
items(4,1) = "SubItem 2.2"
items(5,1) = "SubItem 2.3"
items(6,1) = "SubItem 3.1"
items(7,1) = "SubItem 3.2"
items(8,1) = "SubItem 3.3"
items(9,1) = "SubItem 3.4"
%>
<%
‘ Outline starts here
Dim index,currentItem, openItem
openItem = Request.QueryString("open")
%>
<HTML>
<HEAD>
<TITLE>ASP Outline sample</TITLE>
</HEAD>
<BODY>
<h2>Regular outline</h2>
<UL>
<%
index = 0
Do while index <= maxItems
if items(index,0) <> currentItem then
‘ only closed branches may have links to open
If items(index,0) <> openItem then _
Response.Write("<a href='outline.asp?open=" & _
Server.URLEncode( items(index,0) ) & "'>" )
Response.Write( "<LI>" & items(index,0) & "</a>" )
End If
currentItem = items(index,0)
If items(index,0) = openItem then
‘ Expand an open branch
Response.Write("<UL>")
Do While index <= maxItems AND items(index,0) = openItem
‘ >> Insert your <a href=””> tag here
Response.Write( "<LI>" & items(index,1) )
‘ >> Corresponding </a> goes here
index = index + 1
Loop
Response.Write("</UL>")
End If
index = index + 1
Loop
%>
</UL>
</BODY>
</HTML>
The main idea of this sample is that we cycle through the whole data set and output only if the first column is changed or to expand the open branch.
I hope you will find this code useful. In the next article I’ll show how to produce an enhanced outline where multiple branches may be opened at once.
|
