Display database records in Adobe Dreamweaver

Opomba:

The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

About database records

Displaying database records involves retrieving information stored in a database or other source of content, and rendering that information to a web page. Dreamweaver provides many methods of displaying dynamic content, and provides several built‑in server behaviors that let you both enhance the presentation of dynamic content, and allow users to more easily search through and navigate information returned from a database.

Databases and other sources of dynamic content provide you with more power and flexibility in searching, sorting, and viewing large stores of information. Using a database to store content for websites makes sense when you need to store large amounts of information, and then retrieve and display that information in a meaningful way. Dreamweaver provides you with several tools and prebuilt behaviors to help you effectively retrieve and display information stored in a database.

Server behaviors and formatting elements

Dreamweaver provides the following server behaviors and formatting elements to let you enhance the display of dynamic data:

Formats

let you apply different types of numerical, monetary, date/time, and percentage values to dynamic text.

For example, if the price of an item in a recordset reads 10.989, you can display the price on the page as $10.99 by selecting the Dreamweaver “Currency - 2 Decimal Places” format. This format displays a number using two decimal places. If the number has more than two decimal places, the data format rounds the number to the closest decimal. If the number has no decimal places, the data format adds a decimal point and two zeros.

Repeating Region

server behaviors let you display multiple items returned from a database query, and let you specify the number of records to display per page.

Recordset Navigation

server behaviors let you insert navigation elements that allow users to move to the next or previous set of records returned by the recordset. For example, if you choose to display 10 records per page using the Repeating Region server object, and the recordset returns 40 records, you can navigate through 10 records at a time.

Recordset Status Bar

server behaviors let you include a counter that shows users where they are within a set of records relative to the total number of records returned.

Show Region

server behaviors let you choose to show or hide items on the page based on the relevance of the currently displayed records. For example, if a user has navigated to the last record in a recordset, you can hide the Next link, and display only the Previous records link.

Apply typographic and page layout elements to dynamic data

A powerful feature of Dreamweaver is the ability to present dynamic data within a structured page, and to apply typographic formatting using HTML and CSS. To apply formats to dynamic data in Dreamweaver, format the tables and placeholders for the dynamic data using the Dreamweaver formatting tools. When the data is inserted from its data source, it automatically adopts the font, paragraph, and table formatting you specified.

Recordset navigation links let users move from one record to the next, or from one set of records to the next. For example, after designing a page to display five records at a time, you might want to add links such as Next or Previous that let users display the five next or previous records.

You can create four types of navigation links to move through a recordset: First, Previous, Next, and Last. A single page can contain any number of these links, provided they all work on a single recordset. You can’t add links to move through a second recordset on the same page.

Recordset navigation links require the following dynamic elements:

  • A recordset to navigate

  • Dynamic content on the page to display the record or records

  • Text or images on the page to serve as a clickable navigation bar

  • A Move To Record set of server behaviors to navigate the recordset

    You can add the last two elements by using the Record Navigation Bar server object, or you can add them separately by using the design tools and the Server Behaviors panel.

Create a recordset navigation bar

You can create a recordset navigation bar in a single operation using the Recordset Navigation Bar server behavior. The server object adds the following building blocks to the page:

  • An HTML table with either text or image links

  • A set of Move To server behaviors

  • A set of Show Region server behaviors

    The text version of the Recordset Navigation Bar looks like this:

Text version of the Recordset Navigation Bar
Text version of the Recordset Navigation Bar

Recordset Navigation Bar
Recordset Navigation Bar

Before placing the navigation bar on the page, make sure the page contains a recordset to navigate and a page layout in which to display the records.

After placing the navigation bar on the page, you can use the design tools to customize the bar to your liking. You can also edit the Move To and Show Region server behaviors by double-clicking them in the Server Behaviors panel.

Dreamweaver creates a table that contains text or image links that allow the user to navigate through the selected recordset when clicked. When the first record in the recordset is displayed, the First and Previous links or images are hidden. When the last record in the recordset is displayed, the Next and Last links or images are hidden.

You can customize the layout of the navigation bar by using the design tools and the Server Behaviors panel.

  1. In Design view, place the insertion point at the location on the page where you want the navigation bar to appear.
  2. Display the Recordset Navigation Bar dialog box (Insert > Data Objects > Recordset Paging > Recordset Navigation Bar).
  3. Select the recordset you want to navigate from the Recordset pop‑up menu.
  4. From the Display Using section, select the format to display the navigation links on the page, and click OK.

    Text

    Places text links on the page.

    Images

    Includes graphical images as links. Dreamweaver uses its own image files. You can replace these images with image files of your own after placing the bar on the page.

Custom recordset navigation bars

You can create your own recordset navigation bar that uses more complex layout and formatting styles than the simple table created by the Recordset Navigation Bar server object.

To create your own recordset navigation bar, you must:

  • Create navigation links in text or images

  • Place the links in the page in Design view

  • Assign individual server behaviors to each navigation link

This section describes how to assign individual server behaviors to the navigation links.

  1. In Design view, select the text string or image on the page you want to use as a record navigation link.
  2. Open the Server Behaviors panel (Window > Server Behaviors), and click the Plus (+) button.
  3. Select Recordset Paging from the pop‑up menu; then select a server behavior appropriate to that link from the listed server behaviors.

    If the recordset contains a large number of records, the Move To Last Record server behavior can take a long time to run when the user clicks the link.

  4. In the Recordset pop‑up menu, select the recordset that contains the records, and click OK.

    The server behavior is assigned to the navigation link.

Set the Move To (server behavior) dialog box options

Add links that let the user navigate through records in a recordset.

  1. If you didn’t select anything on the page, select a link from the pop‑up menu.
  2. Select the recordset that contains the records to page through, and click OK.

    Opomba:

    If the recordset contains a large number of records, the Move To Last Record server behavior can take a long time to run when the user clicks the link.

When creating a custom navigation bar, begin by creating its visual representation using the Dreamweaver page-design tools. You don’t have to create a link for the text string or image, Dreamweaver creates one for you.

The page you create the navigation bar for must contain a recordset to navigate. A simple recordset navigation bar might look like this, with link buttons created out of images, or other content elements:

Simple recordset navigation bar
Simple recordset navigation bar

After you have added a recordset to a page, and have created a navigation bar, you must apply individual server behaviors to each navigation element. For example, a typical recordset navigation bar contains representations of the following links matched to the appropriate behavior:

Navigation link

Server behavior

Go to first page

Move to first page

Go to previous page

Move to previous page

Go to next page

Move to next page

Go to last page

Move to last page

Display and hide regions based on recordset results

You can also specify that a region be displayed or hidden based on whether the recordset is empty. If a recordset is empty (for example, no records were found matching the query), you can display a message informing the user that no records were returned. This is especially useful when creating search pages that rely on user input search terms to run queries against. Similarly, you can display an error message if there is a problem connecting to a database, or if a user’s user name and password do not match those recognized by the server.

The Show Region server behaviors are:

  • Show If Recordset Is Empty

  • Show If Recordset Is Not Empty

  • Show If First Page

  • Show If Not First Page

  • Show If Last Page

  • Show If Not Last Page

  1. In Design view, select the region on the page to show or hide.
  2. In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button.
  3. Select Show Region from the pop‑up menu, select one of the listed server behaviors, and click OK.

Display multiple recordset results

The Repeating Region server behavior lets you display multiple records from a recordset within a page. Any dynamic data selection can be turned into a repeating region. However, the most common regions are a table, a table row, or a series of table rows.

  1. In Design view, select a region that contains dynamic content.

    The selection can be anything, including a table, a table row, or even a paragraph of text.

    To select a region on the page precisely, you can use the tag selector on the left corner of the document window. For example, if the region is a table row, click inside the row on the page, then click the rightmost <tr> tag in the tag selector to select the table row.

  2. Select Window > Server Behaviors to display the Server Behaviors panel.
  3. Click the Plus (+) button, and select Repeating Region.
  4. Select the name of the recordset to use from the pop‑up menu.
  5. Select the number of records to display per page, and click OK.

    In the Document window, a thin, tabbed, gray outline appears around the repeating region.

Modify repeating regions in the Property inspector

  1. Modify the selected repeating region by changing any of the following options:
    • The name of the repeating region.

    • The recordset providing the records for the repeating region.

    • The number of records displayed

      When you select a new option, Dreamweaver updates the page.

Reuse PHP recordsets

For a tutorial on reusing PHP recordsets, see David Powers’s tutorial, How Do I Reuse a PHP Recordset in More Than One Repeat Region?

Create a dynamic table

The following example illustrates how the Repeating Region server behavior is applied to a table row, and specifies that nine records are displayed per page. The row itself displays four different records: city, state, street address, and ZIP code.

Repeating Region server behavior is applied to a table row
The Repeating Region server behavior is applied to a table row

To create a table such as the one in the previous example, you must create a table that contains dynamic content, and apply the Repeating Region server behavior to the table row containing the dynamic content. When the page is processed by the application server, the row is repeated the number of times specified in the Repeating Region server object, with a different record inserted in each new row.

  1. Do one of the following to insert a dynamic table:
    • Select Insert > Data Objects > Dynamic Data > Dynamic Table to display the Dynamic Table dialog box.

    • From the Data category of the Insert panel, click the Dynamic Data button and select the Dynamic Table icon from the pop-up menu.

  2. Select the recordset from the Recordset pop‑up menu.
  3. Select the number of records to display per page.
  4. (Optional) Input values for the table border, cell padding, and cell spacing.

    The Dynamic Table dialog box retains the values you enter for table borders, cell padding, and cell spacing.

    Opomba:

    If you are working on a project that requires several dynamic tables with the same appearance, enter the table layout values, which further simplifies page development. You can adjust these values after inserting the table by using the table Property inspector.

  5. Click OK.

    A table and placeholders for the dynamic content defined in its associated recordset are inserted into the page.

    A table and placeholders for the dynamic content
    A table and placeholders for the dynamic content in a recordset

    In this example, the recordset contains four columns: AUTHORID, FIRSTNAME, LASTNAME, and BIO. The table’s heading row is populated with the names of each column. You can edit the headings using any descriptive text, or replace them with representative images.

Create record counters

Record counters give users a reference point when they are navigating through a set of records. Typically, record counters display the total number of records returned, and the current records being viewed. For example, if a recordset returns 40 individual records, and 8 records are displayed per page, the record counter on the first page would indicate “Displaying records 1‑8 of 40.”

Before you create a record counter for a page, you must create a recordset for the page, an appropriate page layout to contain the dynamic content, and then a recordset navigation bar.

Create simple record counters

Record counters let users know where they are within a given set of records relative to the total number of records returned. For this reason record counters are a useful behavior that can significantly add to the usability of a web page.

Create a simple record counter by using the Recordset Navigation Status server object. This server object creates a text entry on the page to display the current record status. You can customize the record counter by using Dreamweaver page-design tools.

  1. Place the insertion point where you want to insert the record counter.
  2. Select Insert > Data Objects > Display Record Count > Recordset Navigation Status, select the recordset from the Recordset pop‑up menu, and click OK.

    The Recordset Navigation Status server object inserts a text record counter that appears similar to the following example:

    The Recordset Navigation Status server object

    When viewed in Live view, the counter appears similar to the following example:

    Recordset Navigation Status in Live View

Build and add the record counter to the page

  1. In the Insert Recordset Navigation Status dialog box, select the recordset to track, and click OK.

Create custom record counters

You use individual record count behaviors to create custom record counters. Creating a custom record counter lets you create a record counter beyond the simple, single row table inserted by the Recordset Navigation Status server object. You can arrange design elements in a number of creative ways, and apply an appropriate server behavior to each element.

The Record Count server behaviors are:

  • Display Starting Record Number

  • Display Ending Record Number

  • Display Total Records

Before you create a custom record counter for a page, you must first create a recordset for the page, an appropriate page layout to contain the dynamic content, and a recordset navigation bar.

This example creates a record counter that appears similar to the example in “Simple record counters.” In this example, the text in sans-serif font represents the record count placeholders that will be inserted in the page. The record counter in this example appears as follows:

Displaying records StartRow through EndRow of RecordSet.RecordCount.

  1. In Design view, enter the counter’s text on the page. The text can be anything you want, for example:
    Displaying records thru of .
  2. Place the insertion point at the end of the text string.
  3. Open the Server Behaviors panel (Window > Server Behaviors).
  4. Click the Plus (+) button in the upper-left corner, and click Display Record Count. Within this submenu, select Display Total Records. The Display Total Records behavior is inserted into the page, and a placeholder is inserted where the insertion point was. The text string now appears as follows:
    Displaying records thru of {Recordset1.RecordCount}.
  5. Place the insertion point after the word records, and select the Display Starting Record Count Number from the Server Behaviors > Plus (+) button > Record Count panel. The text string now appear as follows:
    Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
  6. Now place the insertion point between the words thru and of, and select the Display Starting Record Count Number from the Server Behaviors > Plus (+) button > Record Count panel. The text string now appear as follows:
    Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
  7. Confirm that the counter functions correctly by viewing the page in Live view; the counter is similar to the following example:
    Displaying records 1 thru 8 of 40.

    If the results page has a navigation link to move to the next set of records, clicking the link updates the record counter to read as follows:

    Showing records 9 thru 16 of 40.

Use predefined data formats

Dreamweaver includes several predefined data formats that you can apply to dynamic data elements. The data format styles include date and time, currency, numerical, and percentage formats.

Apply data formats to dynamic content

  1. Select the dynamic content placeholder in the Document window.
  2. Select Window > Bindings to display the Bindings panel.
  3. Click the down arrow button in the Format column.

    If the down arrow is not visible, expand the panel.

  4. From the Format pop‑up menu, select the data format category you want.

    Ensure that the data format is appropriate for the type of data you are formatting. For example, the Currency formats work only if the dynamic data consists of numerical data. Note that you cannot apply more than one format to the same data.

  5. Verify that the format was applied correctly by previewing the page in Live view.

Customize a data format

  1. Open a page that contains dynamic data in Design view.

  2. Select the dynamic data you want to create a custom format for.

    The bound data item whose dynamic text you selected is highlighted in the Bindings panel (Window > Bindings). The panel displays two columns for the selected item—Binding and Format. If the Format column is not visible, widen the Bindings panel to reveal it.

  3. In the Bindings panel, click the down arrow in the Format column to expand the pop‑up menu of available data formats.

    If the down arrow is not visible, widen the Bindings panel more.

  4. Select Edit Format List from the pop‑up menu.

  5. Complete the dialog box, and click OK.

    a.Select the format from the list, and click Edit.

    b.Change any of the following parameters in the Currency, Number, or Percent dialog boxes, and click OK.

    • The number of digits to display after the decimal point
    • Whether to place a leading zero in front of fractions
    • Whether to use parentheses or a minus sign for negative values
    • Whether to group digits

    c.To delete a data format, click the format in the list, and click the Minus (-) button.

Create a data format (ASP only)

  1. Open a page containing dynamic data in Design view.
  2. Select the dynamic data you want to create a custom format for.

  3. Select Window > Bindings to display the Bindings panel, and click the down arrow in the Format column. If the down arrow is not visible, expand the panel.
  4. Select Edit Format List from the pop‑up menu.
  5. Click the Plus (+) button, and select a format type.
  6. Define the format, and click OK.
  7. Enter a name for the new format in the Name column, and click OK.

    Opomba:

    Though Dreamweaver only supports creating data formats for ASP pages, ColdFusion and PHP users can download formats that other developers created, or create server formats and post them to the Dreamweaver Exchange. For more information on the Server Format API, see Extending Dreamweaver(Help > Extending Dreamweaver > Server Formats).