Generating URLs Dynamically

In this task, you'll create the list of links that users can click to view a given country profile. Because this list of links will be generated dynamically, and because all of the links will point to the same page (differentiated only by URL parameters), you need to take care of a few different things in this task. You have to output all of the country names into the page so that they are readable to the user. You have to enclose each of these in a link that points to profiles_detail.asp. And you have to append a countryID name-value pair to the URL, so that the results can be filtered on profiles_detail.asp.

  1. Place the cursor in the line below the lone paragraph of body text. (Create a new paragraph if necessary.) In the Bindings panel, expand Recordset (rs_countryNames) if necessary, select countryName from the list, and click Insert.

    You've done this before: You are binding the value in the countryName field of the database to this paragraph on the page.

    NOTE

    In addition to selecting a tag and clicking the Insert button, another way to bind dynamic data to pages is to drag and drop the data element from the Bindings panel onto the page. The only disadvantage to this method is that it is easy to inadvertently bind the data to the wrong HTML element, so be sure to double-check when using this approach.

    graphics/10fig06.gif

  2. Click to select the dynamic text {rs_countryNames.countryName}, and in the Link field of the Property inspector, enter abc (or any other text string).

    In a moment, you'll add dynamic data to the URL. When you do, Dreamweaver overwrites whatever is entered in the field. However, if you don't add something to the Link field, Dreamweaver can't add the dynamic parameter to the <a> tag, because it doesn't exist. In other words, entering abc is just a temporary workaround.

    graphics/10fig07.gif

  3. With the dynamic text still selected, click the <a> tag in the tag selector, click countryID in the Bindings panel, choose a.href in the Bind To drop-down menu at the bottom of the panel, and click the Bind button.

    graphics/10fig08.gif

    In this step, you are binding the value of countryID to the href attribute of the <a> tag. The abc text you entered a moment ago is replaced.

    TIP

    I've noticed (especially when working with ColdFusion) that sometimes the Bind To menu is grayed out in this step. To work around this problem, select <a> in the tag selector before selecting regionID in the Bindings panel.

    The only problem now is that the information in the href attribute is the countryID, such as 6 or 9. You don't have any pages called 6 or 9, so the link is not yet functional.

  4. In the Link field of the Property inspector, position the insertion point at the beginning (before the opening <%= in ASP or the <cfoutput> in ColdFusion), and enter the following text:

    profiles_detail.asp?countryID=
    

    Immediately following this text, the ASP or ColdFusion code should begin. When the page is tested, the ASP or ColdFusion code will be resolved to a single number, so in the case of Argentina, the URL will be as follows: profiles_detail.asp?countryID=15.

    graphics/10fig09.gif

    NOTE

    Remember, in ColdFusion you should replace .asp with .cfm in the file name.

  5. Save, upload, and press F12 to test the file. Roll your cursor over the link (without clicking).

    There are a couple things to note about the page so far. First, only one country is listed: Argentina. That's not going to work! You'll need to add some functionality to ensure that all countries are listed, not just the first one.

    On a brighter note, when you roll over the link, you should see the correct URL listed in the lower corner of your browser, so at least you know the dynamic URL binding worked.

    graphics/10fig10.gif

  6. Return to the page in Dreamweaver, select the dynamic text once again, and in the Server Behaviors panel (Window > Server Behaviors), click the Add Server Behavior (+) button, and choose Repeat Region from the list.

    The Repeat Region behavior will add the necessary code to ensure that multiple records, rather than just the first one, will be displayed.

    graphics/10fig11.gif

  7. In the Repeat Region dialog, leave the Recordset field alone, and select All Records from the Show radio group.

    The Recordset option enables you to specify which recordset you want to repeat; however, there is only one on this page, so you don't have to enter any information in the field.

    The Show options Show ## at a Time and Show All Records enable you to create recordset paging. Some recordsets will output so many rows of data that the page becomes unmanageable, so results are broken into groups of 10 or 25 results at a time. Most search engines use this strategy. Because you only have 16 country names in your recordset, which is not too unwieldy, you can go ahead and show all of the records at once.

    graphics/10fig12.gif

  8. Save, upload, and test the file.

    You should now see all 16 countries listed, and if you roll over (don't click!) each of the links, you should see a different countryID parameter for each.

    The only problem is the formatting. While both ASP and ColdFusion are incorrectly formatted, each is formatted in different (wrong) ways. In ASP, the countries are all crammed on one line.

    graphics/10fig13.gif

    In ColdFusion, each country is listed in its own paragraph, so that there is too much space between them.

    graphics/10fig14.gif

    Both of these problems have similar causes and similar solutions. What's happening is that ASP and ColdFusion are using a loop structure. In programming, loops are structures that execute over and over again until something breaks them out of the loop. Loops are flow control structures, just like if…else structures. The difference is that if…else structures execute once based on one or more conditions, while loops execute repeatedly until a given condition is met.

    You created the loop by making the dynamic text a repeated region. A repeated region is an output block of text that is inside of a loop, causing the same region to be output multiple times. The region in this case is the country name and its link. The condition that must be met before the loop is broken and the remainder of the page is processed is that all of the records in the recordset are displayed.

  9. Return to Dreamweaver, and switch to code view, finding the dynamic code just below the body text paragraph that begins "The following list shows…."

    To understand why the display problem is happening, you need to look at the loop structure directly and identify why the output is not displaying correctly. As usual, I strongly encourage you to understand what's going on in both code blocks, and not just in the server model you are using.

The ASP Block

In ASP, the code Dreamweaver wrote for us to handle this functionality is as follows:

[View full width]
<% While ((Repeat1_numRows <> 0) AND (NOT rs_countryNames.EOF)) %> <a href="profiles_detail.asp?countryid=<%=(rs_countrynames.fields.item ("countryid"). graphics/ccc.gifvalue)%>"><%=(rs_countryNames.Fields.Item("countryName")Value)%></a> <% Repeat1_index=Repeat1_index+1 Repeat1_numRows=Repeat1_numRows-1 rs_countryNames.MoveNext() Wend %>

This is an eyeful for nonprogrammers, but it's important to at least get the gist of what's going on. Notice that there are two ASP blocks (each with opening and closing <% %> tags). The top one contains a while statement: while is used to begin loops, and its parameter (the code in parentheses) is the condition that causes the loop to stop. In VBScript, EOF refers to end of file, so the condition says to break the loop when there are no more records to process. The bottom ASP block contains the code that actually advances through the loop one record at a time and eventually ends the loop (Wend).

Nested in between these two loop code blocks is the code that's looped; it is the link itself. Notice that after the closing </a> tag in this code, there is no <br /> tag, which would add a line break after each URL. You'll need to manually add that code at the end of that line of text to get the page to display properly. (You'll do so in step 10.)

The Coldfusion Block

The ColdFusion block, predictably, is a lot simpler.

[View full width]
<cfoutput query="rs_countryNames"> <p><a href="profiles_detail.cfm?countryID=#rs_countryname.countryid#> #rs_countryNames. graphics/ccc.gifcountryName#</a></p> </cfoutput>

The first thing you should notice, assuming you read the deconstruction of the ASP script, is that there is no apparent loop structure. As a matter of fact, a loop is in play, but ColdFusion hides it behind the simple tag syntax. Anytime you use <cfoutput> and list a query as an attribute within that tag, ColdFusion will automatically loop. The condition that breaks the loopwhen ColdFusion reaches the end of the recordsetis implied.

Between the opening and closing <cfoutput> tags is the code to be looped, and once again, it is the link. But you should also notice one other thing: Not only is the link looped over, but so are the <p> tags in which the link is enclosed. That is the cause of all the extra space in ColdFusion. (You'll fix this in step 10.)

Thus both ASP and ColdFusion are not quite looping what we want, and that is why the display on the page is not right. In both cases, all we need to do is modify the code being looped over, so that there are no paragraph tags inside the loop, and so that there is a line break after each link. This obviously is an easy solutionbut it is only easy if you look at the code and take a moment to understand what's going on.

  1. ASP users only: After the closing </a> in the link, insert a <br /> tag.

    This line break fixes the display problem from before.

    graphics/10inf01.gif

    ColdFusion users only: Between the <cfoutput> tags, remove the opening and closing <p> tags, and add a <br /> tag after the closing </a> tag.

    Again, this fixes the display problem associated with the loop.

    graphics/10inf02.gif

  2. Save, upload, and test the file once again.

    The input page is both functional and attractive.

    graphics/10fig15.gif