Going Dynamic

The final sequential navigation technique is intended for data-driven or dynamic sites. The technique is similar to the JavaScript method in that arrays are used in both, but the dynamic method completely separates the navigation sequence from the page. As with many data-driven sites, the separation between front end and back end is a major boost to scalability and productiveness.

TIP

The technique described in this section is intended for sites where the pages differ so much in design that replacing content on the page dynamically is not practical. If the page is highly structured, use Dreamweaver's built-in recordset navigation server behaviors (Move to Next Record, Move to Previous Record) to fill each page with dynamic content.

Here's how the dynamic sequential navigation technique works:

1. The data source is constructed in such a way that each record contains a filename and a sequencing value.

2. In Dreamweaver, the connection and recordset are established.

3. The recordset is passed into an array.

4. The filename is dynamically retrieved by a server-side script.

5. The array is searched to locate an entry matching the filename.

6. The links are built according to the position of the filename in the array.

The following technique, created by Dan Short (www.web-shorts.com), uses the ASP server model and is written in VBScript. Similar capabilities are available with the other server models. The script is highly portable.

NOTE

To view the completed code, see Listing 6-2 at the end of this section.

Building the Data Source Schema

When designing the data source schema for this technique, three fields, at a minimum, are required:

• ID A key or autonumber field, which provides each record with a unique ID

• Filename A text field to contain the filename of each file in the series

• Sequence A number field to hold the sequencing order

Here's an example data source table:

ID	Sequence	Filename
1	10	beads.asp
2	20	bracelets.asp
3	30	brooches.asp
4	40	earrings.asp

For maximum flexibility, enter only the name of the file into the Filename field; the path to the file should not be included. When it comes time to bind the image filename to the src attribute, any necessary path can be included, like this:

Although the Sequence field values are up to the developer, I recommend using a series of numbers with a fair degree of separation. In other words, it's better to use 10, 20, 30 as opposed to 1, 2, 3. Why? Having a little "air" between the values makes it much simpler to insert one or more pages in the middle of the sequence. If, for example, I wanted to move earrings.asp between bracelets.asp and brooches.asp, I just need to change the sequence value from 40 to 25, like this table.

ID	Sequence	Filename
1	10	beads.asp
2	20	bracelets.asp
3	30	brooches.asp
4	25	earrings.asp

TIP

One of the key advantages in a data-driven site is that the data can be added or modified at any point. In the early stage of developing this application, it is only important that a small amount of data, suitable for testing, is entered into the data source.

When the data source is sorted into the recordset, the series will be in the desired orderwithout having to renumber additional records.

Setting Up Connection and Recordset

After the data source is designed and initially populated , two more pieces of the foundation must be laid: the data source connection and the recordset. Both of these tasks are accomplished easily in Dreamweaver.

The most direct route to establish a data source connection in Dreamweaver MX is through the Databases panel. Click Add (+) to choose either the Custom Connection String or Data Source Name (DSN) option, which is available for the ASP server model. Your server model might have a different option. For this example, I set up a DSN named aresfiles pointing to an Access database of the same name. These are the steps I took to accomplish this:

1. From the Databases panel, select Add (+) and choose Data Source Name (DSN).

2. In the Data Source Name (DSN) dialog box, select the DSN from the drop-down list. If you need to create a DSN, choose Define.

   DSN creation is handled through the ODBC Data Source Administrator on Windows 2000 systems; your system might have a slightly different name.

3. Enter any username and password information, if necessary.

4. Make sure the data source connection is working properly by selecting Test.

After you have defined the data source connection, it is displayed in the Databases panel. Although it is possible to drag the connection from the Databases panel onto a page in Code view, I typically let Dreamweaver handle itwhich it does automatically when a recordset is defined.

The recordset for this technique is straightforward. Because the application is working with all the data, the SQL statement is basic and Dreamweaver's point-and-click user interface for creating simple recordsets is all that is required.

1. From the Bindings panel, choose Add (+) and select Recordset (Query).

   The Recordset dialog box opens; the interface that is displayed depends on which of the two interfaces (Simple or Advanced) was previously used. To follow along with this example, make sure the Simple interface (see Figure 6.5) is shown.

   Figure 6.5. Choosing a connection in the Recordset dialog automatically inserts the proper data source connection code.

   

2. Give the recordset a name. Traditionally, I use a name with an rs prefix, such as rsFiles.

3. Choose a connection from the drop-down list. If you neglected to create one previously, you can do so now by choosing Define.

   In this example, the connection is called connFiles.

4. Select the table that contains the filename and sequence fields. Make sure those fields are included by either choosing All or Selected. Then highlight the necessary fields.

5. Unless the table contains multiple groups of files for sequencing, leave Filter set to None.

6. In the Sort area, set the field containing the sequencing values to Ascending.

7. Make sure the results are as expected by selecting Test.

After closing the dialog box, you'll find the new recordset available from the Bindings panel; if you switch to Code view, you'll see that the code for the connection has been automatically added right before the recordset code.

Putting the Recordset into an Array

The next step requires a bit of hand-coding . For our application to access the sequence and filename information programmatically, we must place it into an array. The VBScript function for inserting the data from a recordset into an array is GetRows . If the recordset is called rsFiles , the code would look like this:

 <%  Dim MyArray, i  MyArray = rsFiles.GetRows  rsFiles.MoveFirst()  %> 

Place the code after the recordset has been defined. The final line of the code block, rsFiles.MoveFirst() , is not absolutely necessary, but it is added as a good programming practice. After the GetRows function is complete, the recordset pointer is at the end of the recordset; MoveFirst() resets the pointer to the beginning in case there is further recordset interaction.

TIP

If you plan to use this technique often, you might want to download the custom RS into the Array server behavior available from the Beyond Dreamweaver web site.

Getting the Filename

As with the JavaScript technique, a primary step in the dynamic navigation technique is to get the filename. All server models have a method for getting the name of the current file. In ASP VBScript, that method is to use the Request object in combination with the ServerVariables("SCRIPT_NAME") property, like this:

 PageName = Request.ServerVariables("SCRIPT_NAME") 

After you have retrieved the full pathname, you must extract the filename. One way to do this in VBScript is to split the string into elements on an array; the Split() function uses the forward slash of the URL as the delimiter . This makes the last element of the array the filename:

Matching the Filename to the Array

With the array populated and the filename safely stored, the next step is to match one to the other. After a match has been found, the filename's location in the array is set to a variablein this example, pos for use in the final building of the links.

Building the Links

To create the Previous and Next links, you directly enter the reference to the array into the code for the tag:

 Response.Write "<a href=""" & MyArray(1,pos-1) & """>Previous</a>  - <a href=""" & MyArray(1,pos+1) & """>Next</a>" 

As in the JavaScript technique, the Previous link is set to the filename before the current file in the array, whereas the Next link uses the filename that is after the current file.

In the template expression technique, I pointed out that you could use Dreamweaver template optional regions to hide the Previous and Next link when appropriate. With the power of server-side scripting, this functionality is easily included in our basic technique. However, rather than hide the entire link, we just remove the <a> tag, leaving just the Previous or Next text. Here are the three routines necessary to cover all circumstances:

You could, of course, add numerous enhancements to this technique. For example, you could add code to jump to the next major topic when the end of a sequence is reached.

Listing 6-2 Dynamic Navigation Functions (06_dynnav.js)

 <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>  <% Option Explicit %>  <!--#include file="../Connections/connFiles.asp" -->  <%  Dim rsFiles  Dim rsFiles_numRows  Set rsFiles = Server.CreateObject("ADODB.Recordset")  rsFiles.ActiveConnection = MM_connFiles_STRING  rsFiles.Source = "SELECT * FROM Files ORDER BY sequence ASC"  rsFiles.CursorType = 0  rsFiles.CursorLocation = 2  rsFiles.LockType = 1  rsFiles.Open()  rsFiles_numRows = 0  %>  <%  'Put our pages in an array.  Dim MyArray, i  MyArray = rsFiles.GetRows  'MyArray(0,0) = ID  'MyArray(1,0) = Page Name  'MyArray(2,0) = Sequence  rsFiles.MoveFirst()  %>  <html>  <head>  <!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->  <!-- TemplateBeginEditable name="doctitle" -->  <title>Nav Test</title>  <!-- TemplateEndEditable -->  <meta http-equiv="Content-Type" content="text/html;  charset=iso-8859-1">  <!-- TemplateBeginEditable name="head" -->  <!-- TemplateEndEditable -->  </head>  <body>  <!-- TemplateBeginEditable name="content" -->  <p>Opening content.</p>  <p>&nbsp;</p>  <!-- TemplateEndEditable -->  <%  'Get Page Name  Dim PageName, PageArray, FullPageName  'Get Page Name  'Get the URL  PageName = Request.ServerVariables("SCRIPT_NAME")  'Split it into pieces based on the /  PageArray = Split(PageName, "/")  'Make the page name (while we'll use for linking) the last item  in the array  PageName = PageArray(Ubound(PageArray))  'Make an all uppercase version for testing for matching documents  FullPageName = UCase(PageArray(Ubound(PageArray)))   'Find our page in the Recordset Array  Dim pos 'Use to store page position  For i = 0 to UBound(MyArray,2)     If UCase(MyArray(1,i)) = FullPageName Then        pos = i        Exit For     End If  Next  'Build the links  'Is this the first page in the list?  If pos = 0 Then     Response.Write "Previous  - <a href=""" & MyArray(1,pos+1) & """>     Next</a>"  'Is this the last page in the list?  ElseIf pos = UBound(MyArray,2) Then     Response.Write "<a href=""" & MyArray(1,pos-1) & """>     Previous</a> - Next"  'Must be a middle page  Else     Response.Write "<a href=""" & MyArray(1,pos-1) & """>     Previous</a> - <a href=""" & MyArray(1,pos+1) & """>Next</a>"  End If  %>  </body>  </html>  <%  rsFiles.Close()  Set rsFiles = Nothing  %>