blind folio 11:317 module11

Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:317

Module11Displaying Your Data

CRITICAL SKILLSCreate Recordsets

Display Data on Your Page

Display Multiple Records with Repeat Region

Use Live Data View

317

P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:17 AM

Color profile: Generic CMYK printer profileComposite Default screen


If you have just come from Module 10, your head may be spinning a bit, and you may be

wondering how you are going to get a handle on Dreamweaver enough to get any work done.

Well, now it’s time to see the real power of the program. Regardless of whether you have ever

coded a dynamic site before, you are going to be amazed at the ease with which you can get

data from a database and place it on your pages.

CRITICAL SKILL

11.1 Create RecordsetsA database can be a big thing with a lot of data in it. Although it is a convenient and organized

place to store information, that information is really useful only if you can drill down to the

specific bit you need and pull it out so you can work with it. Doing that is called creating a

recordset.

A recordset is a set of results given to you by the database in response to a query you

have built. It is kind of like asking someone to go through the filing cabinet and pull all the

applications from people who live in Utah, sort them alphabetically, put them in a file folder,

and bring that folder to you. Once you get the folder, you can flip through it, spread it out in

front of you, pull some applications out and throw them away, or make some changes on the

forms. A recordset is all the computerized information that matches that same request delivered

to you as a package with which you can do something productive.

Project 11-1 Creating a RecordsetBefore you can do anything with the data in your database, you must first create a recordset.

The exact form this takes depends on what server model you are using. It might be an ADO

recordset in ASP or a CFQuery in ColdFusion. But when you’re using the Recordset server

behaviors in Dreamweaver, it will not matter which server model you use. Dreamweaver can

create the recordset for you with just a little help.

By the end of this project, you will understand the Recordset server behavior and learn to

create a simple recordset in Dreamweaver.

Step by Step1. With the eFlea project open in Dreamweaver, create a new document called users.asp (or

users.php, users.cfm, and so on, depending on your server model). You will use this page

throughout this module.

318 Module 11: Displaying Your Data



Dreamweaver MX 2004: A Beginner’s Guide 319


11

Disp

layi

ngYo

urD

ata

Crea

tinga

Reco

rdse

t

Project11-1

2. Click the plus (+) button on the Bindings panel and select Recordset (Query) from the

drop-down list.

3. The Recordset dialog box will appear. If you are in the Advanced Recordset dialog box,

switch to the Simple Recordset dialog box by clicking the Simple button. The dialog box is

not named “Simple” or “Advanced,” but you can tell which one you are in by the buttons

on the box—the Advanced dialog box contains a Simple button and the Simple dialog box

contains an Advanced button.

4. In the Name box, name this recordset rsUsers. The rs prefix identifies rsUsers to you as

a recordset.

5. Choose the connection you established for the eFlea database in the Connection drop-

down list.

6. After a moment, the tables from the eFlea database will populate the Table drop-down

list. Select the Users table.

7. Leave the Columns radio button set to All. This will retrieve all the records in the Users

table into your recordset.

(continued)





8. Click Test. Your results will appear.

NOTEThis set of results will look very similar to the SQL query you wrote in Module 10. As amatter of fact, click Advanced in the Recordset dialog box. On the Advanced Recordsetdialog box, you will see the SQL query that was created when you made your selectionon the Simple dialog box. It is the same query you typed in by hand in Module 10.Seeing this from both sides will give you a greater appreciation of what is happening asyou use Dreamweaver.

9. Click OK to return to the Recordset dialog box.

10. You can also select only certain fields from the table by changing the Columns radio button

to Selected and highlighting the columns you want to see.

11. The Filter section lets you pick four items: the field to use in the filter, the operator to use

in the filter, what source of the condition you want to use as the filter, and what exactly

that condition is. Pick City as the field, Begins With as the operator, Entered Value as the

source, and the letter O as the condition. This will return all records where the city name

begins with an O.





11

Disp

layi

ngYo

urD

ata

Crea

tinga

Reco

rdse

t

Project11-1

12. The Sort section allows you to select a field to sort on and whether you want the sort

ascending or descending. Select the Name field and Ascending.

13. Click the Test button, and a resultset will appear that shows only records of people from

cities beginning with an O, sorted by their names in ascending order (A to Z).

(continued)





14. Because you will want more records to work with, click OK and remove the filter by

setting the Filter field to None. Click OK again.

15. When Dreamweaver returns you to the Bindings panel, you will now have a recordset

called rsUsers displayed. Click the plus (+) button next to the recordset name, and a list

of the available fields will appear.

Project SummaryCreating a recordset on your page involves several steps: defining a connection, building

a basic SQL statement, and then filtering or ordering it by some parameter in order to get

back the records you need. Dreamweaver simplifies much of this process by providing

simple, visual tools to allow the quick construction of recordsets. Once your recordset is

built, adding that data to your pages is also made easy through Dreamweaver’s data-binding

capabilities.





11

Disp

layi

ngYo

urD

ata

Progress Check1. A set of results that is given to you by a database in response to a query you have built is

known as a __________.

2. A list of the fields your query returns can be found in which Dreamweaver panel?

3. What must first be established before a recordset can be created?

CRITICAL SKILL

11.2 Display Data on Your PageLook again at the recordset created in Project 11-1. It contains the following fields:

● EfleaID

● Name

● City

● State

● Email

● Username

● Password

● Group

● [first record index]

● [last record index]

● [total records]

1. Recordset

2. The Bindings panel

3. A data connection




Most of these you should recognize as the fields you built into the Users table of the eFlea

database. But the last three can be a little confusing. They aren’t really fields in your database,

and they just appear there at the end of your recordset.

The First Record Index, Last Record Index, and Total Records “fields” in your recordset

are position markers. They are used in conjunction with the Repeat Region server behavior

(shown later in the module) and indicate to you which records appear on the current page and

what the total number of records is. If you were showing five records on each page out a total

of 25 records, you could use these fields to show that on your page. They keep track of where

you are in your recordset and can tell the user that he or she is currently viewing records 1

through 5 of 25, for example.

NOTEIf you are only displaying one record on your page, the first record index and lastrecord index will be the same.

How you use these fields is up to you. You can show only the total, or maybe you will be

showing just one record per page, so you will use just First Record Index and Total Records

to say “1 of 25” or, as users page through the records, “16 of 25.” You have likely seen this

feature when you have searched any number of Internet sites. Dreamweaver makes it incredibly

simple to implement. Look just how simple it is.

Drag and Drop DataFor now, don’t worry about making it pretty. Just get some data on the page so you can get a

handle on how Dreamweaver allows you to manipulate your recordset fields. With the users

page open, simply drag and drop fields from the Bindings panel onto the page. They will snap

to the upper left of the page, as simple HTML always does.

Drag the first few fields onto your page (down to the Username field). Press ENTER in

between so that you end up with one field per line down the left of your page. After the Email

field, drag the First Record Index field, place a space, type of, add another space, and then

drag the Total Records field. Your page should look something like this:




Save your page. Make sure you have an application server (such as IIS or ColdFusion

Server) running on your computer, and press F12 to preview the page. When your browser

loads, you should get the first record from your database displayed on the page along with

1 of [number] (depending on how many records are in your database) at the bottom. That

could not have been easier. It doesn’t look like much, but doing this on a page that has a

graphic design already on it is no more difficult.

Now, you may be thinking that this is great, but how do you display more than one record?

How useful is it to tease your users with the fact that more records exist if they can’t get to

them? Adding the capability to show more than one record is just as simple.



11

Disp

layi

ngYo

urD

ata





CRITICAL SKILL

11.3 Display Multiple Recordswith Repeat RegionSuppose you want to display five, ten, or even more records on a page at the same time. This

is frequently what you see on an e-commerce site when you search for a match of a keyword.

The list of products is displayed in a table. You can do this quite nicely using another server

behavior called Repeat Region.

Project 11-2 Displaying More ThanOne Record at a Time

You will often have more than one record to display on a page, or even a list of records to

display across several pages. Dreamweaver’s Repeat Region server behavior allows you to

easily loop through recordsets and select how many records to show per page. The next project

will require the use of the users page once again. To prepare the page for the project, you will

need to clear off the users page by deleting everything in Design view. This will leave only the

rsUsers recordset on the page.

NOTEIf you look at the Server Behaviors panel, you will notice that each field you draggedonto the page is listed as dynamic text. To properly and completely remove these fromyour page, highlight each one and click the minus (–) button on the panel. Just deletingthem on the page can leave code behind that can interfere with other items you maysubsequently add to the page. You can also switch to Code view to make sure youremoved everything.

By the end of this project, you will learn to position data on your page and to use the

Repeat Region server behavior to display multiple records at once.





11

Disp

layi

ngYo

urD

ata

Disp

laying

More

Than

OneR

ecor

data

Time

Project11-2

Step by Step1. The Repeat Region server behavior you will be using in this project does exactly what it

sounds like—it allows you to repeat a region of your page that has some data in it. So to

start with, you will need a region. You will build it by using a table. Insert a table from the

Insert bar.

NOTEThe Insert bar is shown using the Show as Tabs option, which allows easy access to thedifferent categories of objects on the Insert bar.

(continued)





2. Give the table two rows and four columns and set it to fill 75 percent of the page width.

You can also click the Top option under Header, which will set the first row as table header

cells (<th> tags) as opposed to table data cells (<td> tags).

3. In the first row of the table, type your column headers. From left to right, they should be ID,

Name, City, and State. These are the fields you will use to fill the columns.





11

Disp

layi

ngYo

urD

ata

Disp

laying

More

Than

OneR

ecor

data

Time

Project11-2

4. Now, use the same drag-and-drop technique you used earlier to drag these four fields into

the table. Place each field from the Bindings panel into the appropriate cell in the second

row of the table.

5. So that you can see that it is working so far, save the page and press F12 to preview it in a

browser. You should see the first record from your recordset displayed in four columns

with a header row.

6. Now comes the repeat part. If you put your cursor inside any cell in the second row, the tag

selector below the document will display the tags of the document as they relate to the

position of the cursor. In this case, the tag selector will display <body><table><tr><td>.

Click the <tr> tag in the selector to actually select the second row of the table.

(continued)





7. In the Server Behaviors panel, click the plus (+) button and choose Repeat Region from the

list of server behaviors that appears. The following dialog box will appear:

8. In this dialog box, you can choose which recordset to pull the data from and how many

records to display on each page. The number is set to 10 by default, but you may not have a

lot of data in your recordset at this point. You will want to see this server behavior actually

work, so set this number to 2 for now. You can set it to a higher number later. This will

display two records of data per page, in two dynamic rows of the table.

9. This row of the table will now have a tab on it labeled “Repeat” that indicates it is part of

a repeat region. Notice that you applied the server behavior to only the second row. This

isolates the first row as a header row, which need not be repeated. Notice also that the table

has not changed in Design view. The repeating of the table row will happen dynamically

when a user browses the page.

Project SummaryIf you were expecting Dreamweaver to make data access easy, you should not be disappointed.

You were able to accomplish in just a few steps what would take many lines of code to accomplish

by hand. You can experiment with recordsets of different sizes and determine what Repeat

Region settings are best for you.



CRITICAL SKILL

11.4 Use Live Data ViewBefore you leave the users.asp page that was used in the last project, use it to take a look at

one of the truly ingenious parts of Dreamweaver: the Live Data view. Live Data view allows

you to “bounce” your pages off your development server while remaining in edit mode. This

means you can see real data from your database (rather than placeholders) on your page

while retaining the ability to edit the layout. This is especially useful when you are trying to

determine how much space is needed for a particular field of data. If you were hand-coding,

you would need to change your page layout, save the page, upload the page, and if it wasn’t

right, do it all over again. In Dreamweaver, you can skip all that hassle and edit as you view

data right from the database.

Before you use Live Data view, you need to make sure it is set up properly in your site

definition. On the Application Server tab of your site definition is a URL prefix setting that

tells Dreamweaver the local path to your site using either http://localhost, your computer’s

name, or the reserved IP address http://127.0.0.1 to resolve to your local application server.

If you are using a live server other than your own local machine, make sure to put its “http”

address in the URL prefix. If you have a subfolder set up under your Web server root, make

sure to include that as well.



11

Disp

layi

ngYo

urD

ata





Once you are set up, turning on Live Data view is easy. Locate the button on the toolbar

with a lightning bolt icon to the immediate right of the Show Design View button. Clicking

it places you in Live Data view.

Alter the layout of the page and you will get a taste of how useful this tool is. If your data

does not fit in a particular cell, you can drag the cell to make it larger. If a cell is too big, you

can drag it smaller. Whatever alterations need to be made to accommodate your data can be

made while you are looking at actual data from the database.

Take a look at the Live Data toolbar that appears when you enter Live Data view. You can

stop the loading of a page with the Stop button. You can refresh the page after making changes

with the Refresh button. You can also set the page to auto-refresh when changes are made, but

this can slow you down, so use it carefully.

There is an address that looks suspiciously like a Web address, but it ends with a question

mark (?) and an empty text box. Use this if your page depends on URL parameters that come

from another page. Live Data view is an isolated page view. You cannot navigate your site or

post into Live Data view from another page, so there needs to be some facility to set up input

parameters if a page expects to see them. If those parameters come in the URL string, you can

use this text box to supply them. If your page needs data that comes from a form post or from a

session variable, you can use the Settings button to the right of the toolbar to enter that information.

It will be processed by the server to complete the loading of this page.

Dynamic TableDreamweaver also comes with a series of wizards known as application objects. These objects

contain multiple server behaviors and other elements that speed up the process of adding dynamic

code to your page. Application objects can be found on the Insert bar in the Application

Objects tab. You can also find them on the Insert menu.

Among the various application objects, you’ll find Recordset and Repeat Region. These

are the same Recordset and Repeat Region functionalities you used in the earlier projects in

this module; however, many people find the Insert bar to be easier to use because of the quick

access to buttons.

Another object on the Insert bar is the Dynamic Table object:



The Dynamic Table object contains the exact functionality you used in the second project

in this module, with one difference: In the Dynamic Table object, you add the table, heading

descriptions, dynamic data, and Repeat Region in one simple step:

The advantage to this method is the speed at which you can add the dynamic recordset

display to the page. The disadvantage is that you have less control over how your data is

presented. For example, your column headings take on the name of the recordset field, which

is not always desired. Usually, you will have to change the display of the column headings,

which removes some of the time advantage of using the Dynamic Table object. However,

it is there if you need it.

11



11

Disp

layi

ngYo

urD

ata

Ask the ExpertQ: I like these server behaviors. Are there others available besides the ones that come

with Dreamweaver?

A: Yes. Additional objects, behaviors, commands, server behaviors, and other items

(known as extensions) can be downloaded from the Macromedia Exchange

(www.macromedia.com/exchange) and from other places around the Web. Module 18

covers extensions and the Extension Manager—the program used to install extensions

to Dreamweaver and other Studio products.

Q: What if what I need is not available?

A: You have a couple options. You can ask someone very nicely to make one for you, or you

can learn to make it yourself. Dreamweaver includes the Server Behavior Builder, which

makes building new server behaviors extremely easy. You can learn more about the Server

Behavior Builder and extensions in general in Dreamweaver MX 2004: The Complete

Reference and in Building Dreamweaver and Dreamweaver UltraDev 4 Extensions,

both by McGraw-Hill/Osborne




What to Take Away from This ModuleYou should, by now, be seeing the power of this application. Dreamweaver is truly unlike

any other Web development software. It allows the inclusion of data-driven content in several

language platforms without programming. But you can do more than just display simple data.

You can search, insert new records, and update existing records. You will learn to do all these

things with the same ease in upcoming modules.

Module 11 Mastery Check1. What feature of Dreamweaver allows you to edit your pages while viewing real data from

your database?

2. What server behavior can be used to display more than one record at a time on your page?

3. Additional server behaviors are available where?

4. How can you tell that a portion of your page is included in a Repeat Region?

5. List three steps to getting a recordset on your page.

6. What are the three position indicators supplied by Dreamweaver for your recordsets?

7. You can quickly preview a page in a browser by pressing what hotkey?

8. A set of results sent by a database in response to a query is known as a __________.

9. What part of Dreamweaver was shown that allows you to choose a table row in

Design view?

10. Which Insert bar category has options for server behaviors and other server-side wizards?

11. The Dynamic Table object is a combination of what four elements?




blind folio 11:317 module11

Documents