• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 15. Connecting to Data Sources > Dynamically Populating a Table

Dynamically Populating a Table

The recordset is now available to the page. You can now output it. The recordset is eventually going to go into a table, but first you'll need to prepare the page with some static HTML.

Open dante_admin.cfm. Replace the placeholder “Body text goes here” with The following students are enrolled in the class. Press Enter or Return twice, and type Return to the Dante site home page. Link the word Return to index.cfm.

You'll put the table in the blank line between these two sentences that you just entered.

Position the insertion point in the blank line. From the Application category of the Insert bar, choose Dynamic Data: Dynamic Table.

The Application category of the Insert bar contains many common dynamic Web application components. The Dynamic Table is particularly convenient. You tell Dreamweaver which recordset to use, and it automatically outputs all of the records inside it.

In the Dynamic Table dialog, verify that rs_GetUsers is selected, and click the All records radio button. Leave the remaining settings at their defaults and click OK.

Dreamweaver generates a two-row table for you. The first row is static HTML, and it simply contains the row headings. The second row contains the dynamic data. When you test the page, however, you'll discover that ColdFusion will automatically generate as many records as it needs to display all the records in the database.

You could save and upload the page, but before doing so, there is another convenient feature that you can use to test the data in your pages.

From the main menu, choose View > Live Data.

The table is populated with live database data. It has a yellow background, which indicates it can be edited. This yellow background won't appear in the actual page; it is just a Dreamweaver visual aid.

Notice that the table's headings simply repeat the column names in the table. You can replace them with something more descriptive.

In the first row of the table, replace username with Email Address; firstName with First Name; and lastName with Last Name. Drag to select each new heading and use the Property inspector to apply Bold.

This step is mainly cosmetic—no special functionality is added on the server.

Save and Put the page on the remote server. Click in the Document window and press F12 to test the page.

The page opens in a browser, and the data appears as expected.

The table would be more useful if rather than merely listing email address, the addresses were actually linked. You can use ColdFusion to add this functionality, but first you should remember what a regular static hyperlink looks like in HTML:

<a href="target_page.cfm">Clickable link text</a>

Creating an email link is slightly different:

<a href="mailto:someuser@somedomain.com">Clickable link text</a>

That is, email links are always prefaced with mailto:.

As you recall from Lesson 14, ColdFusion outputs dynamic data using the <cfoutput> tag. Return to dante_admin.cfm. You can toggle Live Data back off by choosing View > Live Data. If you look in the code for the table, you will see that the email address is coded as follows:


The <td> tags, of course, simply indicate a table cell. Remember, everything inside ## pound signs is a variable or expression that ColdFusion should evaluate. The code rs_GetUsers.username means the username variable that belongs to rs_GetUsers (the dot between GetUsers and username, called an access operator, indicates ownership: The item on the right belongs to the item on the left).

Now you have to put all that together. As you have probably anticipated, you'll need the following code:

<td><a href="mailto:#rs_GetUsers.username#">#rs_GetUsers.username#</a></td>

In Code view, replace the line <td>#rs_GetUsers.username#</td> with the following line of code:

<td><a href="mailto:#rs_GetUsers.username#">#rs_GetUsers.username#</a></td>

ColdFusion generates an email link for each user in the database.

54      <table border="1" cellpadding-"3" cellspacing="0">
55        <tr>
56          <td><strong>Email Address </strong></td>
57          <td><strong>First Name </strong></td>
58          <td><strong>Last Name </strong></td>
59        </tr>
60        <cfoutput query="rs_GetUsers">
61          <tr>
62            <td><a href="mailto:#rs_GetUsers.username#">#rs_GetUsers.username#</a></td>
63            <td>#rs_GetUsers.firstName#</td>
64            <td>#rs_GetUsers.lastName#</td>
65          </tr>
66        </cfoutput>
67      </table>


Save and upload the file. Test it by pressing F12.

This time, all the email addresses should be hyperlinked. You can click one, and your email editor should appear with a new message open, with the selected student already in the To line. Don't bother sending an email message to any of these recipients, as they are all fake.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint