Strategic Focus Module11 - Pathfinder International: A Global
Blind Folio 11:317 Module11
Transcript of 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
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:318
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
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:18 AM
Color profile: Generic CMYK printer profileComposite Default screen
Dreamweaver MX 2004: A Beginner’s Guide 319
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11: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)
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:18 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:320
320 Module 11: Displaying Your Data
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.
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:19 AM
Color profile: Generic CMYK printer profileComposite Default screen
Dreamweaver MX 2004: A Beginner’s Guide 321
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:321
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)
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:19 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:322
322 Module 11: Displaying Your Data
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.
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:19 AM
Color profile: Generic CMYK printer profileComposite Default screen
Dreamweaver MX 2004: A Beginner’s Guide 323
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:323
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
● Username
● Password
● Group
● [first record index]
● [last record index]
● [total records]
1. Recordset
2. The Bindings panel
3. A data connection
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:20 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:324
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:
324 Module 11: Displaying Your Data
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:20 AM
Color profile: Generic CMYK printer profileComposite Default screen
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.
Dreamweaver MX 2004: A Beginner’s Guide 325
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:325
11
Disp
layi
ngYo
urD
ata
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:20 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:326
326 Module 11: Displaying Your Data
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.
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:20 AM
Color profile: Generic CMYK printer profileComposite Default screen
Dreamweaver MX 2004: A Beginner’s Guide 327
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:327
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)
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:21 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:328
328 Module 11: Displaying Your Data
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.
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:21 AM
Color profile: Generic CMYK printer profileComposite Default screen
Dreamweaver MX 2004: A Beginner’s Guide 329
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:329
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)
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:21 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:330
330 Module 11: Displaying Your Data
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.
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:22 AM
Color profile: Generic CMYK printer profileComposite Default screen
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.
Dreamweaver MX 2004: A Beginner’s Guide 331
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:331
11
Disp
layi
ngYo
urD
ata
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:22 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:332
332 Module 11: Displaying Your Data
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:
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:22 AM
Color profile: Generic CMYK printer profileComposite Default screen
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
Dreamweaver MX 2004: A Beginner’s Guide 333
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:333
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
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:22 AM
Color profile: Generic CMYK printer profileComposite Default screen
Begin8 / Dreamweaver MX 2004: A Beginner’s Guide / West & Muck / 222996-9 / 11Blind Folio 11:334
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?
334 Module 11: Displaying Your Data
P:\010Comp\Begin8\996-9\ch11.vpThursday, February 26, 2004 11:01:22 AM
Color profile: Generic CMYK printer profileComposite Default screen