Download pdf - macromedia

macromedia

®

DREAMWEAVER

®

UltraDev

™

4CURRICULUMGUIDE

A Hands-on Web Publishing Curriculum from Macromedia

ii

NOTICE OF RIGHTS

Copyright

2000-2001 by Macromedia, Inc. All rights reserved.

For educational instruction purposes only, Macromedia grants you the right to make as many copies as you need of all or a portion of the Web Design Basics curriculum, either by photocopy or by printing files from the CD, providing that you always include the page(s) containing copyright information and that you distribute such copies not for profit. These rights to reproduce the curriculum are granted solely to the purchaser of these materials and are not transferable to any other organization. It is the responsibility of your organization to monitor the copying and use of this curriculum and to comply with the terms of this notice. You agree that Macromedia reserves the right to audit your organization’s compliance with these terms, upon reasonable notice.

All other copying, reproduction, and transmission is otherwise prohibited.

This notice does not cover the use of Macromedia software. You must comply with the terms of the End-User License Agreement supplied with the software.

NOTICE OF LIABILITY

The information in these training materials is distributed on an "AS IS" basis, without warranty. Although reasonable precaution has been taken in the preparation of these materials, neither Macromedia, Inc., nor its licensors shall have any liability to any person or entity with respect to liability, loss, or damage alleged to be caused directly or indirectly by the instructions contained in these materials or by the computer software and hardware products described herein.

These materials contain links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party Web site mentioned in these materials, you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.

TRADEMARKS

Products, services, company names, logos, design, titles, words, or phrases may be protected under law as the trademarks, service marks, or trade names of Macromedia, Inc., or other entities. Such trademarks, service marks, and trade names may be registered in the United States and internationally. The following is a list of trademarks and service marks of Macromedia, Inc., that may also be registered in the United States and/or internationally:

Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, ARIA, Authorware, Director, Dreamweaver, UltraDev, Fireworks, Flash, Fontographer, FreeHand, Generator, LikeMinds, Shockwave, Sound Edit, and Xtra are trademarks or registered trademarks of Macromedia, Inc.

Other products, services, company names, logos, design, titles, words, or phrases within these materials may be trademarks of their respective owners.

ACKNOWLEDGMENTS

Author

Stuart Harris

Copyeditor

Judy Ziajka

Designer

Janice Contestable

Macromedia Tech Readers

Julie Thompson and Michael Barbarelli

QA

Andrew Strombeck

Macromedia Production Team

Alisse Berger and Tiffany Beltis

Special thanks to Kirsti Aho and Gloria Miller

Fifth Edition: March 2001Macromedia, Inc.600 Townsend St.San Francisco, CA 94103

Fifth Edition: March 2001Macromedia, Inc.600 Townsend St.San Francisco, CA 94103

TABLE OF CONTENTS

TABLE OF CONTENTS

iii MACROMEDIADREAMWEAVER ULTRADEV 4

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v

Course Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v

Multimedia Assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v

File Control Suggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

Trial Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

System Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

Lesson 1: Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

UltraDev Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Setting Up Your Application Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Setting Up Your Database Drivers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Lesson 2: Configuring Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Defining the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Macintosh Setup Checklist. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Lesson 3: Setting Up Database Connectivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Establishing Database Connectivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Adding a Recordset to a Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Something About SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Overview of the Andes Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Lesson 4: Adding Dynamic Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Making Text Dynamic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Using Live Data View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Making Images Dynamic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Lesson 5: Dynamic Form Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Making Form Objects Dynamic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Binding Form Text Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Binding Menus and Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Binding Check Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Binding Radio Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Lesson 6: Building a Result List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Starting the Result List Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Making Sections of the Page Repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Adding Navigation Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Adding a Navigation Status Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Linking from a Result List to a Detail Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

MACROMEDIA

iv

TABLE OF CONTENTSDREAMWEAVER ULTRADEV 4

Lesson 7: Building an Insert Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Insert Page Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Creating the Insert Page with a Live Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Creating the Insert Page Field by Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Using Input Fields. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Using Radio Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Using Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Inserting the New Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Lesson 8: Completing the Update Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Update Page Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Creating an Update Form Field by Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Creating an Update Page with a Live Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

INTRODUCTION

v MACROMEDIADREAMWEAVER ULTRADEV 4

Macromedia Dreamweaver UltraDev is the extension of Macromedia Dreamweaver into the realm of

database-driven Web sites. You do not have to be familiar with Dreamweaver to benefit from this short course,

but Dreamweaver users will undoubtedly catch on to the basic working interface much more quickly than

will novices.

If you are a user of Macromedia Drumbeat, you’re going to find an entirely different interface and what appears

to be a radically different philosophy of database interaction. However, if you’re astute, you will notice some

Drumbeat-like things happening below the surface here.

SETTING UP THE TRAINING SITE

The basic kit for this course consists of five files representing part of the extranet Web site of a fictional

business called Andes Coffee, plus a database in Access 2000 format and a few ancillary files. The files and

the data tables concern the products of the Andes Coffee enterprise. Essentially all design work has been done

for you on the pages—your job will be to add some extra touches to the layout and, more important, the data

connectivity that will fill in the blanks dynamically.

A file containing a set of the CSS styles used in the site—master.css—is also in the Current files folder. To

display the style list, use the Shift+F11 key combination.

A folder one level below the Current files folder contains all the images needed for page design, and another

folder one level below that contains images of Andes Coffee products: one large and two thumbnails for

each product.

This folder structure should not be part of your server’s folder structure; otherwise, working files and published

files will become confused. Other than this one restriction, it does not really matter where the set of folders

resides on your machine.

If you’re working on a Windows machine and using the ASP server model, the path to the working folder

is typically C:\Program Files\Macromedia\UltraDev\Training\ASP\Current files, but it may be different on

your machine. Macintosh users should find the master folder at HD:Macromedia:UltraDev:Training:ASP:

Current files.

The database itself, andescoffee.mdb, resides in the ASP (or JSP or ColdFusion) folder.

IMPORTANT NOTE:

Instructors, please read the document

Instructor notes.doc

on the CD.

INTRODUCTION

MACROMEDIA

vi

INTRODUCTION

DREAMWEAVER ULTRADEV 4

FILE CONTROL DISCIPLINE

You may be asked by the instructor to load the course files from your own CD, but more likely they will have

been loaded for you before Lesson 1 begins.

The Andes Coffee Web site builds through the course of these eight lessons, each lesson adding something

new to the same basic site. At all times, keep your working files in the Current files folder

A complete set of files is also available in folders representing the state of the project at the beginning of each

lesson. These folders are at the same folder level as Current files and are named as follows:

• Lesson01_Start

• Lesson02_Site

• Lesson03_Database

• Lesson04_Dynamic

• Lesson05_Form

• Lesson06_Result

• Lesson07_Insert

• Lesson08_Update

• Finished site

Obviously, then, the files in Current files and in Lesson01_Start are initially identical, but they will diverge when

you start work. If you want to keep safety or in-progress copies of your own working files, you should keep

them in the Current files folder and rename them in a way that will help you identify them (for example,

product_detail04.asp might represent your own version of that page at the start of Lesson 4).

The folders for images and product images are not repeated beneath each Lesson folder.

To avoid confusion, file names are given throughout this document without the file extension, which is .asp, .jsp,

or .cfm, depending on the server technology in use.

SYSTEM REQUIREMENTS

vii MACROMEDIADREAMWEAVER ULTRADEV 4

You will need the following hardware and software to run Macromedia Dreamweaver UltraDev 4:

MICROSOFT WINDOWS

• Intel Pentium II processor or equivalent 166+ MHz

• Windows 95, 98, 2000, ME, or NT

• 64 MB available RAM*

• 170 MB available disk space

• 256-color monitor capable of 800 x 600 resolution

• CD-ROM drive

Application servers and database applications are not included. UltraDev sites can be deployed on any

ASP 3.0, ColdFusion 4.0, and JSP 1.0 server.

*135 MB of free disk space is required during installation.

MACINTOSH

• Power Macintosh

• Mac OS 8.6 or 9.X

• 64 MB available RAM**

• 130 MB available disk space

• Color monitor capable of 800 x 600 resolution

• CD-ROM drive

Application servers and database applications are not included. UltraDev sites can be deployed on any

ASP 3.0, ColdFusion 4.0, and JSP 1.0 server.

**170 MB of free disk space is required during installation.

SYSTEM REQUIREMENTS

LESSON 1

1 MACROMEDIADREAMWEAVER ULTRADEV 4

LESSON 1: GETTING STARTED

OBJECTIVES

When you have finished this lesson, you will understand

• How Macromedia UltraDev differs from Macromedia Dreamweaver

• Simple database setup

• How you need to set up the local server

and you will have learned

• How to customize the UltraDev Launcher

• How to create a data source name (DSN)

ULTRADEV OVERVIEW

This short course assumes that you already know your way around Dreamweaver and are comfortable with

static Web site design. Some familiarity with database design is desirable, but the database concepts used are

not highly sophisticated. If you are unsure of the meaning of the terms

data table

,

data record

,

data field

, and

data query

, ask your instructor to explain them.

UltraDev looks a lot like Dreamweaver. In fact, it has all of the functionality and all of the feel of Dreamweaver.

It is Dreamweaver and then some.

The extra is the database connectivity and server scripting that has been added. Double-click the desktop icon

to run UltraDev and see for yourself. You can get a glimpse of the powerful data connection features by looking

at the Launcher in Figure 1-1. The Data Bindings and Server Behaviors palettes will not be familiar to users of

Dreamweaver—you’ll be using both of these additional palettes extensively during this course.

MACROMEDIA

2 LESSON 1DREAMWEAVER ULTRADEV 4

Figure 1-1

The UltraDev screen, with the Launcher, Object Palette, and Property Inspector visible.

The four default options on the UltraDev Launcher are known as floating palettes, and you are not limited to

these four. You can easily customize your Launcher. UltraDev gives you 14 possible palettes that you can use

to customize your personal Launcher. Placing all 14 palettes on the Launcher would be excessive, but think

about what palettes you’d like to have at your fingertips. If you’re a seasoned Dreamweaver user, you may have

some favorite customizations of your own already, but think about some new ones, using the UltraDev palettes.

The four floating palettes on the Launcher by default are Site, Data Bindings, Server Behaviors, and Code

inspector. Data Bindings and Server Behaviors share the same palette and can also be selected by using tabs

when the palette is visible.

LauncherObjectPalette

PropertyInspector

LESSON 1


To customize your Launcher:

1. From the main menu of the Site window or any document window, choose

Edit > Preferences.

You can also use

Control+U

(Windows) or

Command+U

(Macintosh).

2. In the Category list, select

Floating Palettes

.

The Floating Palettes dialog box opens. The window at the lower right lists the palettes currently on the Launcher.

3. Click the

plus

(

+

) button and add

Behaviors

(see Figure 1-2).

Figure 1-2

Customizing the UltraDev Launcher by adding another palette.

4. Click

OK

to close the dialog box.

Behaviors shares an inspector with the CSS Styles and HTML Styles palettes—so adding this object to your

Launcher gives you an easy way to invoke those others, too, if you should need them.

MACROMEDIA


It would be a good idea to familiarize yourself with the UltraDev toolbar at this early stage (see Figure 1-3).

From left to right, the toolbar areas are Code View, Split View, Design View, Live Data View, Page Title, File

Management, Preview/Debug in Browser, Refresh, Reference, Code Navigation, View Options. Of course,

you'll need to have a document open to see this toolbar.

SETTING UP YOUR APPLICATION SERVER

UltraDev sites can be run directly from a remote server that can be reached via FTP, but for Windows training

classes, you should use a local server on each training machine—the Microsoft Internet Information Server (IIS)

or Personal Web Server (PWS) if you’re using the ASP server model.

For Macintosh training classes, or mixed classes of Macintosh and Windows machines, you should set up a

single IIS server with individual directories and databases for each of the machines in the class. This will allow

the individual users to upload their files to the remote server and see their own changes in the database.

Code View

Live Data View

Design View

Split View

View OptionsBrowser Preview

File Management

Refresh

Reference

Code Navigation

Figure 1-3

The UltraDev menu bar and toolbar.

Page Title Window

LESSON 1


SETTING UP YOUR DATABASE DRIVERS

In designing a database-driven Web application, you often will work with a test database on your local machine

or LAN during development, but the path to the live database on the final server may be entirely different. It

may be on a completely different machine, and its path may be completely out of your control.

The Microsoft resolution of this problem is to assign a kind of nickname to the database that will be good in all

situations. As long as the nickname on the live data server is the same as that on your local machine, UltraDev

will be able to find the data regardless of the actual path to it. This nickname is known as the

data source name

(DSN)

. The DSN includes not only the signposting information, but also information about necessary database

drivers. For this exercise, you’ll need a DSN for the Access 2000 database andescoffee.mdb. Assigning a

DSN to a database is something entirely external to UltraDev—UltraDev does not even need to be running.

To assign a DSN:

1. Click the

Start

button at the left end of the Windows taskbar and select

Settings > Control Panel

.

In Windows 95/98, the Control Panel opens. In Windows 2000, you’ll also need to find

Administrative Tools

in the menu cascade.

2. Locate

ODBC Data Sources

and double-click it.

The seven-tab ODBC Data Sources Administrator opens.

3. Click the

System DSN

tab and click

Add

.

Important:

A common source of error is mistakenly creating a user DSN, which is not accessible to a Web

server. Make sure you select the System DSN tab!

The Create New Data Source dialog box appears.

4. Select the

Microsoft Access Driver

(if it isn’t already selected by default) and then click

Finish

.

The ODBC Microsoft Access Setup dialog box appears.

5. Enter the name for this DSN,

andescoffee

(see Figure 1-4).

You can also enter a description, but UltraDev will never read it.

MACROMEDIA


Figure 1-4

One stage in the DSN setup for andescoffee.

6. Click the

Select

button and navigate through the file selector to the database, which is probably at

C:\Program Files\Macromedia\UltraDev\Training

.

The database file name andescoffee.mdb must end up in the upper-left text window.

7. Click

OK

. Then click

OK

again and close the Control Panel.

UltraDev (and any other capable application on your system) can now find and use the database with that DSN.

LESSON 2


LESSON 2: CONFIGURING YOUR SITE

OBJECTIVES


• How to define a new site in Macromedia Dreamweaver UltraDev

• The general principles of server applications and dynamic pages


• How to put files to the local server

• How to add a title to a page

Macintosh users will also review the procedures for networking to a Windows NT server.

DEFINING THE SITE

If you closed Dreamweaver UltraDev to set up your database driver, start it again. When you do, you’ll probably

be looking at an unnamed blank window.

Like Macromedia Dreamweaver, Dreamweaver UltraDev organizes all of your projects as

sites

. Even if you

want to work on a Web application that consists of a home page and nothing else, your project will have to exist

within a site. The Site window displays the directory trees for the site, both those in the local working directory

and those on the server, and enables easy exchange of files between the two locations. If you have worked with

Dreamweaver, you will be familiar with this manager.

Your first task is to define a new site called Andes Tutorial.

MACROMEDIA


To define a new site:

1. Bring up the Site window if it is not already in the foreground (simply click the Launcher) and open the Site Definition dialog box by choosing

Site > New Site

.

The Category list, on the left, has six items. The important ones are Local Info, Remote Info, and Application Server.

2. Starting with the

Local Info

category, type the name

Andes Tutorial.

3. Click the folder icon and browse to the local folder containing your working files—probably

C:\Program Files\Macromedia\Dreamweaver UltraDev\Training\Current files

for Windows users or

HD:Macromedia:Dreamweaver UltraDev:Training:Current files

for Macintosh.

4. Select

Refresh Local File List Automatically

and

Enable Cache

. The HTTP address is not needed for this training exercise. This category is shown completed in Figure 2-1.

Figure 2-1

One category pane of the six-part Site Definition dialog box.

5. For the

Remote Info

category, use the pop-up menu to define the type of server access you will be using. Windows users should change this from None to

Local/Network

. Macintosh users can either do the same and establish a path to the server by clicking the remote folder icon and then the hand icon, or select FTP access.

Notice that FTP access is also an option for Windows users. Dreamweaver UltraDev can work directly from a remote server (but with a slight penalty in file transfer time).

LESSON 2


6. Windows now open for you to specify the remote access.

•

If you’re using Local/Network access

, click the folder icon and navigate to

C:\Inetpub\wwwroot

or the equivalent for JSP. Unless you’ve preset a server-side folder for this site, use the

Create New Folder

button in the file finder to create a folder called

andes_extranet

. The complete path is now

C:\Inetpub\wwwroot\andes_extranet.

•

If you’re using FTP access

, enter the IP address of the server and the folder, login ID, and password of the host, as required.

7. Select Refresh Local File List Automatically. Do not enable File Check In and Check Out.

8. In the Application Server category, specify settings appropriate for your server type. For ASP, these would be as follows:

• Server Model: ASP 2.0

• Default Scripting Language: JavaScript

• Page Extension: .asp

• Access, Remote Folder, and Refresh options use the same defaults as in the Remote Info category, which is correct. In some cases, the application server and the remote server may be different, but in the classroom setup, they are the same.

• URL Prefix (Windows): http://localhost/andes_extranet/

• URL Prefix (Macintosh or Windows via FTP): http://[IP addr]/andes_extranet/

Note: This is the prefix that will be used when you preview your pages in a browser, after transferring them to

the server. It’s also used when you select Live Data View mode (see Lesson 4). The URL prefix must end in a

forward slash.

9. Skip the Design Notes category. In the Site Map Layout category, define the home page for this site as product_search.

Unless you have a defined home page, you won’t be able to make use of the diagrammatic site map that’s displayed when you click the Site Map button on the Site window toolbar (see Figure 2-2).

FILE CHECKOUTThe Check In/Check Out feature, enabled on the Remote Info page of the Site Definition dialog box, is not used in this training exercise. It’s used when many people are working on a site, to prevent overwriting of each other’s work on the server. Checking out a file reserves it for your exclusive use until you check it back into the system. The copy of that file on the server is tagged as read-only while the file is checked out; others in the workgroup can retrieve the nickname and e-mail address of the person who has write permission for the file.

MACROMEDIA 10 LESSON 2DREAMWEAVER ULTRADEV 4

10. Click OK to finish the site definition and then click Done to exit the Define Sites dialog box. You’ll probably see a message offering to create a cache for this site. Click OK.

The Andes Tutorial site now opens in the Site window, with the Local Folder directory tree in the right pane and the empty server directory at the left.

Transferring the entire site to the server is not particularly desirable (although you could, by selecting the top line in the Local Folder pane and clicking the Put button). It is, however, a good idea to transfer all the images you will need on the server. Do that next.

11. Select the Images folder in the Local Folder pane and click the Put button (the up arrow) on the Site window toolbar (see Figure 2-2).

The entire subfolder of images—including, in this case, the Product Images folder and its contents—is copied to the server in the correct relationship to the place where you’ll be developing server-side files.

12. Select the CSS style sheet file master.css in the Local Folder pane and click the Put button on the Site window toolbar. This is generally the way you will transfer individual files to the server. Document files can also be transferred from the Document window using the File Exchange button on the toolbar (it’s an up-and-down arrow).

The Site window now looks like Figure 2-2.

Figure 2-2

The Andes Tutorial Site window, with all images already put to the server.

13. In the Local Folder pane, double-click the product_detail page (or select it and press Enter) and take a look at it.

From the design point of view, this is pretty much a finished page. What it lacks—and what you are soon going to provide—is actual product information.

Note: You can edit or delete a site by choosing Site > Define Sites.

SiteMap

button

Putbutton

LESSON 2 11 MACROMEDIADREAMWEAVER ULTRADEV 4

MACINTOSH SETUP CHECKLIST

ODBC does not come naturally to your Macintosh machine at all. That’s why, for this training course, your

Macintosh is working as a client, with the database and the DSN on an application server.

When you actually make a connection to the DSN, in Lesson 3, the procedure will be no different than it is on a

Windows machine—but that’s only one of three ways in which the two machines need to communicate. These

are the other two:

• There has to be a way for you to transfer files from your local folder where you keep

your working files to the server on the Windows machine. This transfer is sometimes

loosely known as publishing files.

• There has to be a way for your Web browser to access those files to see the browse-

time view of the published pages.

Assuming that the network addresses of both machines are known, the browser view should be no problem.

For file transfer, you have a choice of transferring by FTP or via an AppleTalk connection. AppleTalk is

recommended, but it requires more setup.

Most, or even all, of the setup may have been done before you start this course, but here’s a checklist of what

needs to be done.

To complete the setup on the server (Windows NT) machine:

1. If file transfer is by FTP, set up the publishing pathway from the server ftp root to \wwwroot\andes_extranet.

2. If file transfer is via AppleTalk, check that the server has Services for Macintosh (SFM) configured and that a Macintosh volume including the server wwwroot area has been created. SFM is added in the Network dialog box on the Control Panel. A Macintosh volume can be added in the dialog box reached by choosing Start > Programs > Administrative Tools > File Manager. Use the menu option Macfile > Create Volume.

3. Test the AppleTalk connection to make sure that the client can communicate through the network.

4. Set all necessary permissions for the client—in particular, permissions to write to the folder C:\Inetpub\wwwroot\andes_extranet. If file transfer is via AppleTalk, several permissions dialog boxes need to be checked for the Macintosh volume.

5. Make sure the database file itself, andescoffee.mdb, is copied to the server, that it is not marked as read-only, that adequate read/write permissions have been set, that the necessary Microsoft Access database driver is installed, and that a DSN has been created as described in the section “Setting Up Your Database Drivers” in Lesson 1.


To complete the setup on the client (Macintosh) machine:

1. In the TCP/IP Control Panel, make sure TCP/IP is established through Ethernet (see Figure 2-3).

Figure 2-3

TCP/IP settings panel for a networked Macintosh.

2. In the AppleTalk Control Panel, set the connection method to Ethernet.

3. In the Chooser, open the Appleshare window and check that the name of the NT server is present.

4. Double-click the server name and open the Connect dialog box.

5. Choose Connect as Registered User and enter a user name and password that has administrator privileges on the server (see Figure 2-4). Click Connect.

Figure 2-4

Connect dialog box for an AppleTalk connection.


6. Make the Macintosh volume available on your desktop. If the setup is correct, you can simply drag files onto this desktop icon, and they will publish all the way to the correct folder on the server.

HTML AND LOGICHTML, as a markup language, is not capable of any cross-page logic. Client-side JavaScript (or JScript or, now, ECMAScript) added logic to Web pages when it was introduced in the second-generation browsers, but the client-side logical languages cannot exchange information with an independent database.

Thus, the HTTP protocol has an inherent problem when it comes to adding dynamic data components to a Web site. An early solution was CGI, the Common Gateway Interface, which allows any of the resources on the hosting computer to generate HTML in response to the client’s request for a page. CGI is effective and still in widespread use, but a more modern approach to the problem is to embed logic within HTML files, either contained in special tags or enclosed between agreed-on delimiting symbols. These dynamic pages, as they’re called, cannot just be viewed in a browser as HTML or JavaScript pages can. They must first pass through a server. The application server interprets everything between server logic delimiters or in the special tags and performs whatever logic is called for, including data lookups, and only then serves the page. The client browser does not see the original logic at all—only the final result. Microsoft’s ASP server technology was soon challenged by other server conventions, notably the other two server technologies that UltraDev supports: Sun Microsystems’s JSP and Allaire’s ColdFusion.

A simple demo file, server_logic_demo, is provided for you. It carries out a simple mathematical operation before serving the page. Look at the page in Live Data View mode and then inspect the source code. Notice the server script delimiters or ColdFusion tags and see that the actual logical operation, finding the square root of 82, is carried out completely outside the <HTML> … </HTML> part of the document.


SECTION ASSIGNMENT

• None of the pages of this site has a title. Add a title to the product_detail page. You can do this in the Page Properties dialog box (Ctrl+J), but it’s much simpler to just type in the title window in the middle of the Document window toolbar. Then save the page (Ctrl+S or File > Save).

• Preview the product_search, product_resultlist, product_add, and product_update pages. These are the pages you will mainly be working with during this course. Add titles to these pages as well and save them. What do you think these pages are going to do when they’re finished?


LESSON 3: SETTING UP DATABASE CONNECTIVITY

OBJECTIVES


• How to use a DSN as a source of page-level information

• Database connections and recordsets (resultsets in JSP)

• Information flow in a generic database-driven Web site


• How to create a connection

• How to create and edit a recordset

• How to write simple SQL statements

ESTABLISHING DATABASE CONNECTIVITY

Even though you set up a DSN for the Andes Coffee database, it is not yet available for use on one of your Web

pages. After all, your computer may have definitions of 100 DSNs, but the Andes extranet has no interest

whatsoever in 99 of them. The process of bringing live data to your Macromedia Dreamweaver UltraDev pages

begins with the creation of a data connection, which becomes a property of the site you created it for. You’ll

establish a data connection in the following exercise. You’ll need to use a menu option on one of the site files—

so if you closed all site files at the end of the previous lesson, reopen one now.

The procedure for establishing a database connection varies according to your server technology. An ASP

application server can directly access the ODBC DSN you created in Lesson 2; this is the most straightforward

type of connection. Theoretically, a JSP server cannot access an ODBC data source, but if the correct Java

Runtime Environment (JRE) is running, a special driver class can be invoked to make the connection. If

ColdFusion is your server technology, you’ll need to register the Andes Coffee database as a ColdFusion data

source, in the ColdFusion server administrator.


To define a database connection for ASP:

1. From the main menu, choose Modify > Connections to bring up the Connections dialog box.

Normally the left pane would contain a list of connections already available, but the pane you see right now may be empty.

2. Click New and select Data Source Name (DSN) from the pop-up context menu. The DSN dialog box opens.

3. Type connAndes as the name for your connection. Spaces are not allowed in connection names, and you cannot edit them later.

4. To select an existing DSN, use the DSN pop-up menu. You see a list of the DSNs on your system. Scroll if necessary (the list is not alphabetical) and select andescoffee. You do not need a user name or password.

Figure 3-1 shows a completed DSN connection dialog box.

Figure 3-1

The Data Source Name (DSN) dialog box completed for an ASP connection.

5. Test the connection by clicking Test.

Unless there’s a problem with system resources, you will see the message “Connection was made successfully.”

Note: The User Name and Password fields are necessary because some DSNs may be password protected.

However, the DSN you are using for this tutorial is unprotected.

6. Click OK and then click Done.


To define a database connection for JSP using the JDBC-ODBC bridge:

1. From the main menu, choose Modify > Connections to bring up the Connections dialog box.

Normally the left pane would contain a list of connections already available, but the pane you see right now may be empty.

2. Click New and select ODBC Database (Sun JDBC-ODBC Driver) from the pop-up context menu. The ODBC Database dialog box opens.

3. Type connAndes as the name for your connection. Spaces are not allowed in connection names, and you cannot edit them later.

4. Accept the default driver class, sun.jdbc.odbc.JdbcOdbcDriver.

5. In the URL box, substitute the DSN name for the [database] token, making the complete URL string jdbc:odbc:andescoffee.

Figure 3-2 shows a completed ODBC connection dialog box.

Figure 3-2

The ODBC Database dialog box completed for a JDBC-ODBC connection

6. Test the connection by clicking Test.

Unless there’s a problem with system resources, you will see the message “Connection was made successfully.”

7. Click OK and then click Done.


To define a database connection for ColdFusion:

1. Click the New button in the Connections dialog box. Then select Ordinary DSN rather than Advanced DSN.

2. Provide a login ID and password for the ColdFusion Remote Development Services (RDS) if you are asked to do so. Otherwise, the remainder of the procedure is the same as for an ODBC DSN.

NOTE: RDS is a component of the ColdFusion Server used to provide remote HTTP-based access to files and

databases. RDS also provides both basic and advanced security services for ColdFusion to allow different

levels of security.

ADDING A RECORDSET TO A PAGE

After you’ve made your data connection, you’re almost ready to put the data values on a page—but not quite.

For actual use on a page-by-page basis, you need a representation of just those parts of the data that are

relevant to the task at hand. The entire database will often be far too much to handle conveniently. You derive

the data subset from a data query, and the object you create for actual use on the page is known as a recordset

in ASP and ColdFusion, and as a resultset in JSP. A recordset or resultset is a property of a page, not the entire

site, so make sure you have the product_detail page open when you do the following exercises.

To open the Advanced Recordset dialog box:

1. Open the Data Bindings inspector by clicking the Launcher icon or choosing Window > Data Bindings. Click the plus (+) button and choose Recordset (Query) from the pop-up menu.

2. The Simple Recordset dialog box is suitable for constructing simple data queries in which only one data table is needed. However, you’re going to need data from two tables, so click Advanced to open the Advanced Recordset dialog box.

Note: The Advanced Recordset dialog box may appear by default. Whichever dialog box was last used is the

one that appears.


To define a recordset in the Advanced Recordset dialog box:

1. In the Advanced Recordset dialog box, name the recordset rsProducts (recordset names may not have spaces).

2. Select the data connection connAndes from the Connection list (it’s almost certainly the only one).

The Tables, Views, and Stored Procedures folders of the database appear in the Database Items window.

3. Expand the Tables folder to see the data tables, including the three you will be working with: Categories, Products, and Suppliers.

4. Expand the Products folder to see the 16 fields in this table.

The screen should look like Figure 3-3.

Figure 3-3

The Advanced Recordset dialog box with the recordset named and the data connection made.

Before you can continue following the step-by-step instructions, you may need a little explanation of the SQL

computer language.


SOMETHING ABOUT SQL

The lingua franca of all databases that support open connectivity is Structured Query Language (SQL). SQL

(pronounced “sequel”) is basically a formal vocabulary for asking questions of a relational database. You can

get by with very little knowledge of SQL (Dreamweaver UltraDev’s Recordset Manager gives you a little point-

and-click help), but just to get a feel for it, here’s a SQL exercise that will give you some instant results.

To write a SQL statement:

1. Highlight the Products data table. Under Add to SQL, click SELECT.

The SQL statement SELECT * FROM Products appears in the SQL window. The * means “all fields.”

2. Click Test.

The entire Products data table appears in the Test SQL Statement pop-up window.

Now suppose you need to know the details of the supplier of each product. The information is there, but it’s

relational. Because many products share the same supplier, repeating the supplier’s name, address, phone

number, and so on for every product would be inefficient. Instead, a SupplierID field cross-references the

Suppliers data table.

With SQL, you can make the cross-reference and display relational data. Here’s how:

3. Highlight the Suppliers data table. Under Add to SQL, click SELECT.

The SQL statement changes to SELECT * FROM Products,Suppliers.

4. Expand the Suppliers data table and highlight the SupplierID field.

5. Under Add to SQL, click WHERE.

The WHERE clause, as it’s called, filters the data returned by the SQL statement. The WHERE clause now reads WHERE SupplierID.

6. To join the two tables, you now need to edit the clause manually so it returns only records in which the SupplierID field is the same in both data tables. To do that, prefix the field name with the table name and a period. In this case, type WHERE Suppliers.SupplierID = Products.SupplierID.


7. Click Test to test the SQL again.

Now you see all the details of the supplier added to each record.

If you open the Data Bindings inspector, you’ll see the recordset. You can even expand it to see the data fields (see Figure 3-4).

Figure 3-4

A recordset displayed in the Data Bindings inspector.


OVERVIEW OF THE ANDES WEB SITE

In the next lesson, you’ll begin actually creating and examining pages with live data components. Before

starting, it’s worth looking at how each page fits into the overall logical picture of the Andes Coffee Web site.

The site adheres to the general conventions of commercial sites that exchange information with corporate

databases. Figure 3-5 shows a flow chart.

Figure 3-5

Logic of the Andes Coffee Web site.

SubmitSubmit

SEARCH RESULTS DETAIL

Submit DEL UPDATE INSERT

DATA

UPDATE INSERTUpdateRecord

InsertRecord

DeleteRecord


The site consists of the following five pages:

• Search Page. This page allows users of the site to narrow down the product

information they’re presented with, by applying one or more search criteria. You will not

build this page at all in this abbreviated course.

• Results List. This page displays products that meet the search criteria, in abbreviated

form, usually 5 or 10 to a page for rapid scanning. In each listing, the product name is

made into a hyperlink, so the user can click it to open a page that displays all details of

the product. You will build this page in Lesson 6.

• Detail Page. This is the basic catalog page to which you’ve already added a recordset;

you’ll complete this page in the next lesson. Eventually it will have navigation buttons

so that users can browse the sorted catalog, and Insert, Update, and Delete buttons for

the administrative functions of the site.

• Update Page. This page allows Andes administrators to bring one product data record

into an online form for editing. You will build this page in Lessons 5 and 8.

• Insert Page. This page allows Andes administrators to create a completely new

product data record, using an online form. The form looks similar to the Update form,

but all of its fields are initially blank, whereas the fields on the Update page are prefilled

with the data that will be edited. You will build the Insert page in Lesson 7.


SECTION ASSIGNMENT

• Double-click the rsProducts recordset in either the Server Behaviors or Data Bindings inspector and notice that you can open the Recordset dialog box to edit this recordset at any time.

• Add the clause ORDER BY ProductName to the SQL statement and click Test. Notice that the data is now alpha sorted on the ProductName field. The additional words ASC and DESC specify ascending and descending alpha sorts.


LESSON 4: ADDING DYNAMIC DATA

OBJECTIVES


• Inserting and binding dynamic data

• Live Data View mode in Macromedia Dreamweaver UltraDev


• How to insert dynamic text on a page

• How to bind dynamic data to images

• How to add temporary navigation to a page

• How to add query strings to Live Data View

MAKING TEXT DYNAMIC

So now you’re all set. Values from the Andes Coffee database are available for page design. They arrive from

the database by means of a DSN external to UltraDev, through a data connection to a recordset.

Make sure you still have the product_detail page open. Notice that it contains a table with seven types of preset

information and also a more prominent field for the product name immediately above the picture.

Under each of the seven data labels is a table cell that’s currently empty. You’re going to fill these cells with

dynamic text derived from the recordset.


To insert recordset values into text fields:

1. Place the cursor in the table cell immediately under the label “SKU.”

2. Make sure the Data Bindings inspector is open and displaying the rsProducts recordset, expanded to show every field, as it was in Figure 3-4.

3. In the Data Bindings inspector, select the field SKU and click Insert at the lower right of the inspector. If you have a steady hand and a well-functioning mouse, you also have the option of dragging the data source from the inspector and dropping it into the table cell.

The design-time placeholder token {rsProducts.SKU} appears in the table cell. At browse time, this will be replaced with the actual value of this field in the record at the data cursor.

4. Repeat steps 1 through 3 for the fields Description, Supplier (CompanyName in the recordset), Units in Stock, and Estimated Delivery Time. You'll need to add the word days after the delivery time placeholder.

The page should now look like Figure 4-1.

Figure 4-1

Dynamic text placeholders on the product_detail page.

No special formatting was required for these first five data fields. The remaining two, however, need to be

formatted as dollar amounts, using a format like this: $#,###.##

5. Insert the dynamic wholesale price in its place on the page; then click the down arrow in the Format column of the Data Bindings inspector to select the format Currency > 2 Decimal Places from the cascade of menus (see Figure 4-2).


Figure 4-2

Formatting dynamic data with a cascade of menus.

6. Repeat step 5 for the suggested retail price (UnitPrice in the recordset).

Now you need to place the product name in a prominent position above the picture.

To insert the product name label:

1. Using the cursor, select the placeholder text “Product name” and delete it. Leave the cursor where it is as you proceed.

2. In the Data Bindings inspector, select the ProductName field and click Insert at the lower right of the inspector.

The design-time placeholder token {rsProducts.ProductName} appears in position.

3. Press Control+S (Windows) or Command+S (Macintosh) to save the page, but don’t close the file.


USING LIVE DATA VIEW

You are probably curious to know if this UltraDev magic actually works—if the design-time placeholders are

replaced by real values at browse time. Right now, you can view the page in a browser, but you do not yet have

any way of navigating from record to record, so you will see the page only as it will look with the first record of

the database selected.

To facilitate browsing, you can place navigation elements on the page, using the highly convenient Recordset

Navigation Bar live object. Live objects are simply collections of behaviors and visible screen objects that

combine to perform often needed data management tasks. Live objects occupy their own panel on the Objects

palette (see Figure 4-3).

Figure 4-3

The Live Objects panel of the Objects palette.

RecordsetNavigation Bar


To add navigation to the page:

1. Place the cursor at the bottom of the page, just above the copyright line.

2. Switch the Objects palette to the Live Objects panel (click the header to pop up the menu) and locate the Recordset Navigation Bar live object.

3. Click to insert the navigation bar and choose whether you want navigation options to appear as text or images.

If you choose images, four image files, First.gif, Previous.gif, Next.gif, and Last.gif, are added to your local site folder. Select them all in the Site window and transfer them to the server using the Put button (up arrow) on the Site window toolbar.

4. Reopen the Document window and press Control+S (Windows) or Command+S (Macintosh) to save the page.

5. Click the File Management button on the toolbar (up and down arrow) and click Put to transfer the page to the server.

6. Click the Preview in Browser button (or press F12).

The browse-time page opens in your default browser. You should be able to browse through the Andes product catalog to see all the details of each of the 22 products.

An excellent option for checking dynamic pages is UltraDev’s unique and powerful Live Data View (LDV)

mode, which enables you to switch the design-time page to a mode that includes actual test data. In addition,

now that you have simple navigation behavior on the page, you can add query strings to the page’s URL,

simulating complete navigation through the recordset. Let’s look at this option now.


To use Live Data View to see records:

1. Switch to Live Data View mode by clicking the LDV button on the toolbar, pressing Control+Shift+R (Windows) or Command+Shift+R (Macintosh), or choosing View > Live Data.

The screen changes to simulate its browse-time appearance, with the data cursor on the first record. A live data header appears, as in Figure 4-4.

Figure 4-4

The Live Data View page header.

2. In the Query String window, type index=3. Click Refresh or press Control+R (Windows) or Command+R (Macintosh) to refresh the data.

The data cursor moves to the fourth record (Non-dairy creamer in this recordset).

Note: You can keep changing the query string (the last record is index 21), refreshing each time. Every time you

refresh, the new query string is added to a buffer and becomes available as an item on a drop-down list of

query strings. If you check Auto-Refresh, the data is refreshed every time you change the query string.

3. Click Settings to bring up the Live Data Settings dialog box.

If you check Save Settings for This Document, the query string list will be available every time you load this page.

One more miracle of Live Data View—you are not prevented from doing design work on live data. Thus, for

example, if a line of text or an image appears larger than you expected, you can make adjustments to the page

layout based on actual data rather than a generic placeholder.

4. You can click the Refresh Live Data button again to return to Design View, or you can adopt LDV as your normal working view of the page. It's up to you—either view is a perfectly correct working mode.

Stop button

Refresh icon Query String window


MAKING IMAGES DYNAMIC

It’s in creating dynamic images that you’ll need to bind page elements to data, because the data coming in from

the data table is not—obviously—the image itself but a path to the image file, which needs to be accessible both

from your working directory and from the server. The data therefore needs to be bound to the SRC attribute of

the image. You’ll see that a product image is already present on the page as a placeholder. In the following

exercise, you will learn how to replace that placeholder with a dynamic image.

To bind an image source to a recordset field:

1. Make sure the Data Bindings inspector is open and displaying the rsProducts recordset, expanded to show every field.

2. Select the image and make sure its attributes are displayed in the Property inspector.

3. In the Data Bindings inspector, select the BigImage data field.

4. The Binding attribute is set to img.src by default, but you should click the down arrow to the right of img.src. Note from the menu that pops up that data binding to any attribute of an image is theoretically possible. Accept the default.

The placeholder image disappears and is replaced by an icon. The same document area is reserved for the image, however. When composing a page like this from scratch, choose as a placeholder an image that’s the right size. If the images in your database vary greatly in size, you’ll have to add Width and Height fields to the database and bind those fields to the WIDTH and HEIGHT attributes of the placeholder image.

Note that in the SRC window of the Property inspector, the image source is now given as

ASP:

<%=rsProducts.Fields.Item.("BigImage").Value %>

JSP:

<%=(rsProducts.Fields.Item.("BigImage").Value) %>

CF:

<cfoutput>#rsProducts.BigImage#</cfoutput>

You can now use Live Data View again to see the actual images inserted. Remember to save the page again.


SECTION ASSIGNMENT

• Make the title of the product_detail page change to match whatever product is featured on the page. Your instructor will offer guidance if you need it. Instructors: Refer to Instructor_notes.doc on the CD.

• Place a hidden form field somewhere on the page and see if you can figure out how to bind it to the name of the city in which the supplier of the product resides.


LESSON 5: DYNAMIC FORM ELEMENTS

OBJECTIVES


• Binding form text fields to data

• Binding menus and radio buttons to data

• Binding check boxes to data


• How to populate a menu from a subsidiary recordset

MAKING FORM OBJECTS DYNAMIC

Form objects can be dynamically linked to a recordset in much the same way as images: by binding their values

to recordset fields. Text fields, menus, check boxes, and radio buttons can be bound in this way. A typical use

of this type of linking is to bring a complete record into a whole suite of form text fields to create an update

page. The existing data is therefore made available for editing, and the action of submitting the form revises the

record to conform to the edited page. You’ll start building this type of page in this lesson, but the page will not

be completed until Lesson 8.

The first step is to create a new recordset. This time you will use the Simple Recordset dialog box.


To define a recordset in the Simple Recordset dialog box:

1. Open the product_update page. Invoke the Recordset dialog box, using the plus (+) button in either the Data Bindings or Server Behaviors inspector. If the Advanced form opens, switch to the Simple form of the dialog box by clicking Simple.

2. Name the recordset rsUpdate.

3. From the menus, select the connAndes connection and the Products data table.

Notice that by using a radio button and a list selector, you could exclude some data columns from the recordset. However, here you will leave all columns selected. The Simple Recordset dialog box should look like Figure 5-1.

4. Test to see that the data is being returned correctly and then click OK.

The reason a new recordset is required here is that this page will ultimately be used to write edited data to the

database, not just read from the database. Data reads can come from any number of joined tables, but data

writes can be done only to a single table.

Figure 5-1

The Simple Recordset dialog box.


BINDING FORM TEXT FIELDS

Now you can bind as many form text fields as you like, or have time for, as described here.

To bind a text field:

1. Select the text field. In the Data Bindings inspector, scroll to the corresponding data field and select it.

2. Bind the field to the input value, using the Bind button (see Figure 5-2).

Figure 5-2

Binding a form text field to dynamic data.


BINDING MENUS AND LISTS

Often you will need to bind a menu or list in two ways. First you may need to populate the list from a data table.

Then you may want to preset the selection so it corresponds to the value of some field in a record that the page

is displaying. That record may come from a different recordset.

This update page includes two examples. The supplier name and product category menus both need to be

populated somehow and then preset using values from the rsUpdate recordset. Start with the supplier

name menu.

To populate a menu from a recordset:

1. To populate a menu, first create a new recordset. Follow the same steps as in the previous task, but use the Suppliers data table. Name the recordset rsSuppliers.

2. On the product_update page, select the menu element for Supplier.

3. In the Server Behaviors inspector, click the plus (+) button and choose Dynamic Elements > Dynamic List/Menu from the cascading menus.

The Dynamic List/Menu dialog box opens. This dialog box enables you to populate the menu with labels and values derived from a recordset and specify how the menu gets information for its preselected state.

4. Change the recordset to the rsSuppliers recordset you just created.

The menu labels need to come from the CompanyName field—the human-readable names of the merchandise suppliers. However, the menu values need to be the ID numbers that the database understands, in the SupplierID field. You need to set the menus accordingly.

5. Click the lightning-bolt icon to open the Dynamic Data dialog box and set it so the menu gets its selection information from the SupplierID field in the other recordset, rsUpdate.

The Dynamic List/Menu dialog box is shown complete in Figure 5-3.

Figure 5-3

Dialog box for populating a menu list form element.

Follow the same procedure for the other menu, Product Category, creating and using a recordset called

rsCategories.


BINDING CHECK BOXES

A check box is suitable for binding to a Boolean, or true-or-false, data field. The page as you see it doesn’t

contain any check boxes, but in fact there’s a Boolean field in the rsUpdate recordset—it’s for discontinued

product lines. A Dynamic Check Box dialog box is available to help you set a check box to the checked state

if that field is true in the record at the data pointer.

To bind a check box to a recordset field:

1. On the product_update page, add a little space above the Update button and type Discontinued? (with the question mark).

2. From the Forms panel of the Objects palette, insert a check box element and name it Discontinued.

3. With the check box selected, click the plus (+) button in the Server Behaviors inspector and choose Dynamic Elements > Dynamic Check Box from the cascading menus.

The Dynamic Check Box dialog box opens (see Figure 5-4).

Figure 5-4

Dialog box for binding a check box to dynamic data.

4. Click the lightning bolt to the right of the Check If field to open the Dynamic Data dialog box.

5. In the Dynamic Data dialog box, expand the rsUpdate recordset and select the Discontinued field. Close the Dynamic Data dialog box.

6. Back in the Dynamic Check Box dialog box, in the Equal To text box, type true.

The check box will now come up checked if the product on the current dynamic page is labeled as discontinued.

The last product in the database, index 21 (Breath mints), is labeled as discontinued. You can navigate to it

by using a query string in Live Data View, but only if a temporary navigation object is placed on the page.


BINDING RADIO BUTTONS

Radio buttons are suitable when the user of the page has to make a one-only choice from a limited number of

possibilities. Another data field that offers a limited range of possibilities is Estimated Delivery Time. The value

can be only 30, 15, 8, or 5 days, so a set of four radio buttons is a sensible means of allowing that choice.

To bind a set of radio buttons to a recordset field:

1. On the product_update page, delete the existing text field for Estimated Delivery Time. In its place, add four radio buttons and label them 30, 15, 8, and 5.

The screen should look roughly like Figure 5-5.

Figure 5-5

Arrangement of the radio buttons on the page.

2. In the Property inspector, give all four radio buttons exactly the same name, DeliveryTime (radio button sets are identified as such by sharing a name but having different values).

3. Give the buttons the checked values 30, 15, 8, and 5, respectively.

4. In the Server Behaviors inspector, click the plus (+) button and choose Dynamic Elements > Dynamic Radio Buttons from the cascading menus.


The Dynamic Radio Buttons dialog box opens (see Figure 5-6). Check that the list is complete (it would not be

if, for example, you had made a typo in one of the names of the radio button elements).

Figure 5-6

Dialog box for binding radio buttons to dynamic data.

5. Click the lightning-bolt icon.

The Dynamic Data dialog box opens.

6. Expand the rsUpdate recordset and select DeliveryTime. Then close both dialog boxes.

Now this set of radio buttons will appear checked according to the value of DeliveryTime in the record at the data cursor.


SECTION ASSIGNMENT

• Could a set of radio buttons be automatically generated from a recordset, just as a menu can be populated from a recordset? It could, but UltraDev has no dialog boxes to make the process easy. Students who are interested in working with source code might like to select the Product Category menu, switch to Code View, and attempt to modify the existing code so that it creates a set of four appropriately labeled radio buttons in place of the menu.


LESSON 6: BUILDING A RESULT LIST

OBJECTIVES


• Multirecord result listing

• Server behaviors concerned with navigation

• Macromedia UltraDev’s special live objects

• The server behavior for linking to a detail page


• How to create repeat regions on a page

• How to apply data navigation

• How to add record-number tracking to your pages

STARTING THE RESULT LIST PAGE

In Lesson 4, you built a dynamic page that displays complete information for any one product. Using Live Data

View, you saw how a change to the query string following the page’s URL switched you from product to

product, each representing a different record in the database.

You also saw how navigation buttons turned that page into a complete, browsable catalog. Browsing record by

record through a catalog database is certainly one way of making product information available to users, but it

has obvious limitations if you have several hundred products. Much more often, e-commerce Web sites

provide some means of searching the database, filtering for products that satisfy the user’s search criteria, and

then displaying a result list that provides brief details of each selected product. Every item on the result list

includes a hyperlink to a detail page, which is the single-product page you already built. In this lesson, you will

build a result list page, but without any search criteria. This abbreviated, one-day course does not include data

search strategies.

The skeleton of the result list page is available as product_resultlist, but it does not include a recordset. The first

thing you must do, then, is to place the same recordset on this page that you already placed on the detail page.

The following steps show you the most convenient way.


To copy a recordset from page to page:

1. Return to the product_detail page.

2. Go to the Data Bindings inspector and select the rsProducts recordset.

3. Do either one of the following:

• Right-click (Windows) or hold down Control and click (Macintosh) and choose Copy from the pop-up menu.

• Click the Cut/Copy/Paste icon at the extreme top right of the palette and choose Copy from the pop-up menu.

4. Load the page product_resultlist. In its Data Bindings inspector, click the Cut/Copy/Paste icon at the extreme top right of the palette and choose Paste from the pop-up menu.

A representation of the recordset (resultset in JSP) appears in the Data Bindings inspector.

5. Expand the recordset in the Data Bindings inspector. Now you can make use of the data fields it contains to insert them into the table on the screen. In each case, place the cursor in the table cell where you want to place the data, select the appropriate field, and click Insert in the Data Bindings inspector. Table 6.1 shows where everything belongs.

TABLE 6.1 PLACEMENT OF DATA

LABEL ON PAGES RECORDSET FIELD NAMES FORMAT

product name: ProductName None

SKU SKU None

ordering quantities: QuantityPerUnit None

units in stock: UnitsInStock Number (rounded integer)

estimated delivery time: DeliveryTime None

wholesale price: WholesalePrice Currency (two decimal places)

suggested retail price: UnitPrice Currency (two decimal places)

supplier: CompanyName (from Suppliers data table) None

Now it remains only to bind the image source to the small image path found in the recordset. Do this the same

way as in Lesson 4.


To bind the image source:

1. Select the product image.

2. In the Data Bindings inspector, select the SmallImage field and click Bind.

3. If you aren’t working in Live Data View (LDV), switch to LDV to test the page. Adjust the layout and text styles if necessary.

The page should look like Figure 6-1.

Figure 6-1

Preliminary result list page.


MAKING SECTIONS OF THE PAGE REPEAT

Because this is a much abbreviated product listing, it makes sense to fit more than one product on the page.

That way, the user has less browsing to do before zeroing in on the product of interest. Macromedia

Dreamweaver UltraDev has a special server behavior called Repeat Region that iterates a section of a dynamic

page as many times as you choose.

To create a repeat region:

1. In the Tag Selector at the lower left of the design screen, locate the <table> tag that you want to repeat. It should not include the header “supplies search.” There are several nested tables on the page—you’ll know when you have the right one by the bold outline that appears.

2. In the Server Behaviors inspector, click the plus (+) button and select Repeat Region.

The Repeat Region dialog box opens.

3. Adjust the dialog box to show five records, as shown in Figure 6-2.

Figure 6-2

The Repeat Region dialog box.

4. Click OK.

Note the Repeat tab and the gray outline around the table.

5. Check the data repetition in Live Data View and save the page.

6. In the Site window, use the Put button (up arrow) to transfer the page to the local server; then check it in your default browser.

The page should look like Figure 6-3.


Figure 6-3

Result list page with repeated region.

ADDING NAVIGATION BUTTONS

In Lesson 4, you used the Recordset Navigation Bar live object to place instant navigation behaviors on the

product_detail page. You get more insight into UltraDev’s server behaviors if you create your own navigation

bar, so that’s what you’re going to do now.

Four navigation GIFs are available in the images subfolder of your Current files folder. They are frm-first.gif,

frm-previous.gif, frm-next.gif, and frm-last.gif. Arrange them at the base of the result list page, outside the

repeat region, with spaces between them. You can arrange them in absolutely positioned layers or simply

press Control+Shift and the Spacebar (Windows) or Command+Shift and the Spacebar (Macintosh) to

insert nonbreaking spaces between them. Using server behaviors, you can now make this page much more

user friendly.


To use server behaviors for navigation:

1. Select the First button. In the Server Behaviors inspector, click the plus (+) button and choose Move to Record > Move to First Record.

The Move to First Record dialog box opens.

2. Accept the defaults in the small dialog box.

That takes care of the navigation function of the button. You need an additional, cosmetic behavior, however, because it’s confusing to users of the page to see buttons whose function is meaningless. For example, Go to First Record and Go to Previous Record are both meaningless if the recordset is currently displaying the first record. UltraDev has behaviors that hide meaningless buttons.

3. In the Server Behaviors inspector, click the plus (+) button and select Show Region > Show Region If Not First Record.

A small dialog box opens showing the name of the recordset that will be used (see Figure 6-4).

Figure 6-4

Dialog box for hiding navigation buttons when their function is meaningless.

4. Impose similar pairs of behaviors on the other three navigation buttons.

5. Save the page, transfer the file to the server, and check the behaviors in your browser.

ADDING A NAVIGATION STATUS DISPLAY

Users browsing through a large database like to know where they are in the whole scheme of things. An

onscreen display that says something like “Products 11 to 16 of 212” is a very helpful signpost. This type of

display is known as a navigation status display, and UltraDev has a live object that lets you create such a

display very quickly. You’re going to drop this object onto the product_resultlist page, and your work will be

easier if you are in Live Data View as you deploy it.


To place the navigation status on a page:

1. Place the cursor in the empty design area to the right of the “supplies search” header and insert a carriage return to make some space.

2. Open the CSS Styles palette by pressing Shift+F11 and select the newslist style.

3. On the Live panel of the Objects palette, locate and click the Recordset Navigation Status object.

A small dialog box opens. The Recordset pop-up menu is bound to default correctly, because there’s only one recordset.

4. Click OK.

The complete navigation status line appears on the page.

5. Save the page and check the behavior in your browser.

The navigation status line should look like Figure 6-5.

Figure 6-5

A live object keeps track of record numbers for your users.

Navigation status line


LINKING FROM A RESULT LIST TO A DETAIL PAGE

Now you have a way for users to browse the complete catalog five items at a time, seeing a thumbnail image of

each product and just enough information to know whether the product is of interest. Next you need to give

them a hyperlink so they can click and go to the detail page for any product. The hyperlink source is usually the

product name—but this cannot be a simple hyperlink, because some information must be transferred in the

process. An index of the product the user clicked must be transferred in a query string, so that the detail page

knows which record to load.

This procedure thus requires two stages: first you need to create the query string on the results page; then you

need to set up the detail page to respond to it.

To link from a results page to a detail page:

1. Still on the product_resultlist page, select the placeholder for the product name— {rsProducts.ProductName}—to use as the hyperlink source.

2. In the Server Behaviors inspector, click the plus (+) button and choose Go To Detail Page.

The Go to Detail Page dialog box opens.

3. Browse to find the detail page, product_detail. Deselect both check boxes for passing existing parameters—there are no form elements on this page.

4. In the Pass URL Parameter box, replace ProductID with just id.

Now if the user clicks a product whose index is 5, the query string will be id=5.

5. Accept the defaults in the rest of the dialog box.

The dialog box should now look like Figure 6-6.

Figure 6-6

Dialog box for linking to a detail page.


6. Save the page and transfer it to the server.

7. Switch to the detail page, product_detail. In the Server Behaviors inspector, click the plus (+) button and choose Move to Record > Move to Specific Record.

The dialog box shown in Figure 6-7 opens.

Figure 6-7

Dialog box for forcing a move to a specific record for a detail page.

8. The defaults are probably correct. You need the page to load the record in the rsProducts recordset in which the information in the ProductID field matches the incoming data in the query string. Click OK.

9. Save the page and transfer it to the server. Check this behavior in your default browser.


SECTION ASSIGNMENT

• There’s a special live object that creates an instant master–detail link—and it not only creates all the server behaviors needed on both pages; it actually creates the pages. It was not suitable for use at the Andes Coffee site because the page designs would not be preserved, but it’s worth exploring. Create a fresh page, copy the rsProducts recordset to it, and then locate and apply the Master-Detail Page Set live object.

• Re-create the navigation bar you created as part of this lesson. This time, place the First and Previous buttons on one layer and the Next and Last buttons on another layer. Apply the appropriate Show Region server behaviors to the two layers rather than to the individual buttons. You'll have to set them way down the page, to allow for the repeat region. They'll be correct if their top edge is at 855 pixels (select View > Rulers for a guide). What is the advantage of this technique?


LESSON 7: BUILDING AN INSERT PAGE

OBJECTIVES


• The live object that inserts a record

• Manipulation of form input elements to create an insert page

• The server behavior for inserting a record

• Form validation


• How to use live objects

• How to use input fields

• How to use radio buttons

• How to use menus

• How to use hidden form fields

• How to validate a form

INSERT PAGE OVERVIEW

Like all merchandising companies, Andes Coffee does not stay still. New products come along, and old

products change their specifications. When the time comes to add a new product, a new record could, of

course, be added to the database table by using Microsoft Access—but many small to mid-size companies find

it just as convenient to enter new data from the Web by filling out an online form on what’s known as an insert

page. Macromedia Dreamweaver UltraDev and you are now going to team up to add a new product, Andes

Carob Bars, to the database.

You’re going to create the insert page in two ways: first using the special live object that does everything at

once, but with very limited design capability, and then again field by field in a fully designed page following the

Andes Coffee corporate design.

In the course of building the insert page, you’ll get further practice with text input fields, multiline input fields,

radio buttons, menus, and hidden fields.


Table 7.1 provides a quick look at all the fields in the Products data table, with the form elements needed to

represent them and the onscreen labels.

TABLE 7.1 DATA FIELDS

DATA FIELD NAME FORM ELEMENT PAGE LABEL

ProductID None (autonumber field)

SKU Text input SKU

ProductName Text input Product name

Description Multiline text input Description

SupplierID Menu Supplier

CategoryID Radio group Category

QuantityPerUnit Text input Ordering quantities

WholesalePrice Text input Wholesale price

UnitPrice Text input Suggested retail price

DeliveryTime Text input Delivery time, days

UnitsInStock Text input Units in stock

UnitsOnOrder None

ReorderLevel None

Discontinued None

BigImage Text input Big image URL

SmallImage Text input Small image URL

Note that the ProductID field is not represented at all on the insert page because the database automatically

assigns the next available number to it. An attempt to write to this field would produce an error. The three

ordering fields would not normally be assigned any content for a new product.


CREATING THE INSERT PAGE WITH A LIVE OBJECT

The Record Insertion Form live object uses one comprehensive dialog box to set up almost every field

described in Table 7.1, create the page, insert the record, and redirect to a home page—it’s a very ingenious

feature with a big dialog box that requires some concentration to get everything right.

The live object expects to insert a table on a fresh page, so you will first create a new page. Then you will

perform another preliminary task: setting up a recordset representing two fields from the Suppliers data table.

You will use this recordset to populate the menu element listing the suppliers.

To create the suppliers recordset:

1. Create a new page. Name the page product_add_live_object.

2. Using the plus (+) button in the Data Bindings inspector, create a new recordset by using the Simple Recordset dialog box.

3. Name the recordset rsSuppliers, derive it from the Suppliers data table, and select only the columns SupplierID and CompanyName.

4. Test the SQL statement to see the four suppliers and their corresponding IDs (see Figure 7-1). Then close the Simple Recordset dialog box.

Figure 7-1

Test of the rsSuppliers recordset.

Now you can proceed with the live object.


To create an instant insert page using the live object:

1. Give the page the title Add new product by typing the words in the title text box in the middle of the toolbar.

2. On the Live panel of the Objects palette, locate and click the Record Insertion Form live object.

The Record Insertion Form live object dialog box opens.

3. Set the top two pop-up lists so they are inserted into the Products data table using the connAndes data connection (the only connection you have, in fact).

4. Browse to find and insert the redirect page, product_search.

Now take time to understand what’s expected in the complex form fields list and the four boxes beneath it.

Initially, the logic simply extracts the name and data type of every field in the targeted data table (Products, in

this case) and lists the field name, screen label, display type, and data type of every one. This is essentially the

same information as in Table 6.1, with the addition of the data type.

A minus (–) button above the form fields list allows you to delete items from the list, and up and down arrow

buttons allow you to reorder the list.

Each time you select a line (a data field) in the list, its Label, Display As, and Submit As values appear in the

boxes below, where you can edit them to customize the onscreen element that will represent each field.

There’s also a box for a default value, if any, and it can be bound to dynamic data (such as a server variable

or a field from a different data table) by clicking the lightning bolt.

Note particularly that, unlike most UltraDev dialog boxes, this one cannot be recalled for later editing. Only the

Insert Form server behavior that it creates can be edited later. Screen elements can be edited at will but only

one by one.

5. Start by eliminating the four fields that are not needed on the page. They are ProductID (an autonumber field that you must not attempt to overwrite), UnitsOnOrder, ReorderLevel, Discontinued, and Imageheight (Imageheight is needed on the page, but the live object cannot create a hidden form field).

Note that the plus (+) button allows you to add back fields that you’ve eliminated.

6. Go carefully through the list item by item, guided by Table 6.1, editing the labels of the nine fields whose form elements are straight text fields.


7. Select the Description column. For the Display As type, select Text Area from the pop-up list.

This creates a multiline text field, 50 characters wide by 5 lines deep.

8. Select the SupplierID column. Edit its label to just Supplier.

9. For the Display As type, select Menu from the pop-up list and then click the Menu Properties button.

The Menu Properties dialog box opens.

10. Click the radio button to populate menu items from the database.

11. Set the pop-up lists as shown in Figure 7-2 so the labels come from the CompanyName field and the values from the SupplierID field. You do not need anything in the Select Value Equal To box. Then close the dialog box.

Figure 7-2

Completed Menu Properties dialog box

12. In the Record Insertion Form dialog box, select the CategoryID column. Edit its label to just Category.

13. For the Display As type, select Radio Group from the pop-up list and then click the Radio Group Properties button.

The Radio Group Properties dialog box opens.


14. Create a set of four radio buttons as shown in Figure 7-3, with these labels and values: Coffee: 1, Food: 2, Merch: 3, Clothing: 4. You do not need anything in the Select Value Equal To box.

Radio buttons are suitable for this field because there are only four possible choices. In this dialog box, the labels are what will appear on the screen beside each radio button, and the values are the values each radio button will have. The name CategoryID is common to all four radio buttons, and this is what defines them as a set.

Figure 7-3

Completed Radio Group Properties dialog box.

15. Close the dialog box.

16. In the Record Insertion Form dialog box, scroll through the list double-checking each line. When you’re satisfied, click OK to create the table.

Figure 7-4 shows the completed dialog box, and Figure 7-5 shows the result on the page.

17. Browse the page and then insert a new Andes product, Carob Bars. Table 7.2 suggests how you might fill the page.


Figure 7-4

Completed Record Insertion Form dialog box.

Figure 7-5

Record insertion form as it appears on the page.


TABLE 7.2 NEW RECORD FIELD CONTENT

FIELD SUGGESTED CONTENT

ProductName Carob Bars

Description [Invent something]

SupplierID 2 (Dining suppliers)

SKU 123151 823799

CategoryID 2 (Food)

QuantityPerUnit 100

UnitsInStock 60

DeliveryTime 30

WholesalePrice 75 (no need for the $ sign)

UnitPrice 10 (no need for the $ sign)

BigImage images/product_images/Carob_Big.jpg

SmallImage images/product_images/Carob_Small.jpg

18. When you’re done, click Add. To verify that the record has been inserted, use either of the following methods:

• Browse the Carob Bars detail page (see Figure 7-6).

• On the product_detail page, in the Data Bindings inspector, double-click the rsProducts recordset and click the Test button to see the data returned.


Figure 7-6

Detail page for the new product, Carob Bars.

Obviously, it would be quite possible now to go through this page and impose some design on it. Design tasks

might include the following:

• Adding headers and corporate logos

• Applying styles to the text labels

• Adjusting the widths of the text boxes, which are all 32 characters wide by default.

However, you should not spend time making any of these changes right now.


CREATING THE INSERT PAGE FIELD BY FIELD

Now you’re going to create a page with identical functionality but without the support of the live object. It may

take a little longer, but the page design is more controlled. A skeleton of the predesigned insert page is

provided as product_add.

To preview the insert page:

• Double-click product_add in the site window.

Figure 7-7 shows the upper half of the insert page.

Note: The names of the form input elements do not necessarily have to be the same as the field names they

correspond to, but it’s a good idea to make them the same anyway. If the elements are generically named—

textfield1, textfield2, and so on—errors are too easy to make when you eventually link them to the data fields.

Figure 7-7

Part of the insert page, product_add.


USING INPUT FIELDS

First you’re going to verify the names of the text input fields that are already on the page and that will remain as

input fields.

Note that because the product description is potentially quite long, the text element for that data field is a

multiline element, 60 characters by 6 lines. You create a multiline text element simply by placing a standard

text element on your page and then defining it as multiline in its Property inspector.

To verify the names of the text input fields:

1. Find all of the fields listed in Table 7.1 as text input (there are 10).

2. Use the Property inspector to check that the form elements are named exactly the same as the data fields.

USING RADIO BUTTONS

The Product Category field has only four possible values, so it’s suitable for a radio button group. The radio

group has been set up on the page for you—the four radio buttons all have the name CategoryID, and each has

a different value.

Note: In HTML, sets of radio buttons are defined as such by sharing a name. When a form is submitted, the

set transmits the name of the set plus the value of whichever button the user has checked: for example,

CategoryID=2.


USING MENUS

A menu is the ideal form element for specifying the supplier of a new product (assume that the supplier will be

an existing supplier, not a new one requiring its own insert page). The reason for using a menu is that the data

table expects just an ID number for the supplier, whereas the user of this page would obviously prefer to select

by company name. The game here is to set up a list consisting of the suppliers’ company names and using their

corresponding IDs as values.

To populate a menu from a recordset:

1. Locate the <form> tag in the Tag Selector or in the HTML source code and name the form AndesInsert.

2. Copy over the rsSuppliers recordset you created on the product_add_live_object page.

3. In the Server Behaviors inspector, click the plus (+) button and choose Dynamic Elements > Dynamic List/Menu.

4. Set up the Dynamic List/Menu dialog box as shown in Figure 7-8 so the labels come from the CompanyName field and the values from the SupplierID field. Then close the dialog box.

Figure 7-8

Setting up the dynamic menu.

5. Add a static value to the menu. In the Property inspector of the menu, click the List Values button. In the List Values dialog box, click the plus (+) button and add a new line with the item label Select a supplier and a value of 0.

6. Click the up arrow to move this static option to the top of the list.

Notice that the Select Value Equal To text box is left blank. You do not want any particular supplier to be

preselected.


INSERTING THE NEW RECORD

The design of your insert page is now complete. Before you proceed, see what you’ve done.

To check your work:

1. Save the file, transfer it to the server, and inspect it in the browser.

2. Check to see that the pop-up menu displays the expected content. View the HTML source code to see the HTML for the radio buttons and the list.

Now all you need is the actual server behavior to insert the new record.

To insert the record:

1. In the Server Behaviors inspector, click the plus (+) button and choose Insert Record.

The Insert Record dialog box opens, as shown in Figure 7-9. The table to update is Products. AndesInsert is the form to get values from (there should be no other option).

Figure 7-9

The Insert Record dialog box.

2. Scroll through the Form Elements list slowly and carefully, checking that your form elements are sending their data to the appropriate recordset columns.

3. In the After Inserting, Go To text box, select the product_search page by browsing to it.

4. Close the Insert Record dialog box. Save the page and transfer it to the server.

You can now browse the page and insert a new Andes product. Use the same Carob Bars product images as

before, but invent a new product name, description, and price.


SECTION ASSIGNMENT

• Impose some form validation behaviors so that form submission is denied if no value has been entered for the product name, SKU, description, wholesale price, or delivery time. You need to select the form submit button and find form validations in the Behavior inspector—not the Server Behaviors inspector.

• Optional: Add a line or two of JavaScript to validate the Suppliers menu element. Form submission should be denied if no selection has been made. Your instructor will help you.

• Place a button on the product_detail page as a hyperlink to add_product. A suitable image is available as frm-insert.gif.


LESSON 8: COMPLETING THE UPDATE PAGE

OBJECTIVES


• The Record Update Form live object

• The Go to Detail Page server behavior

• The Update Page server behavior

• Recordset filtering

• Passing data in a query string


• How to link from a detail page to an update page

• How to create a multiline form input element

UPDATE PAGE OVERVIEW

In this lesson, you will learn to use the Record Update Form live object. You’ll also complete the product_update

page you worked on in Lesson 4, link it to the detail page product_detail, and add the server behavior to actually

edit the database when the page is submitted.

The role of an update page is to bring all the product details of a selected product into a form, so that they can

be edited in a browser. The Update Record server behavior then overwrites the record in the database with the

revised product information.

You’re going to first complete the update page you started building in Lesson 5; then you'll see how to create

an instant page with a live object.

CREATING AN UPDATE FORM FIELD BY FIELD

It’s conventional to allow access to a product update form directly from the detail page. You could also have a

link from the results page, but linking from a page that displays complete product details is prudent. The effect

is that all of the text on the detail page is turned, at the click of a button, into editable form fields.

Because you did not place an update link on the detail page in Lesson 4, you need to do that now.


To link from a detail page to an update page:

1. Open the product_detail page.

You’re going to insert a special image as the source of a hyperlink whose destination is the update page.

2. Scroll to the bottom of the page and place the cursor to the right of the image button labeled “Insert.” Insert two or three nonbreaking spaces, using Shift+Control+Spacebar (Windows) or Shift+Command+Spacebar (Macintosh).

3. On the Common panel of the Objects palette, click to insert an image.

The file locator opens.

4. Locate the image frm-update.gif in the Images subfolder and select it.

The image appears on the page at the cursor position. Make sure it remains selected as you proceed.

5. In the Server Behavior inspector, click the plus (+) button and choose Go to Detail Page from the pop-up menu.

The Go to Detail Page dialog box opens. You complete this dialog box much the same as you did in Lesson 5 when linking from the results page to this detail page.

6. Browse to find the new detail page, product_update.

7. Change the URL parameter being passed from ProductID to id.

The pop-up menus setting the value of this parameter to the ProductID column of the rsProducts recordset are probably correct.

8. You do not need to select either of the check boxes for passing existing URL or form parameters.

The dialog box should look like Figure 8-1.

Figure 8-1

The Go to Detail Page dialog box linking to an update page.

9. Save the page.

That completes your work on the detail page. Now you will return to the product_update page you mostly built

in Lesson 6. You need to tell it how to find the correct data.


To set the data cursor on an update page:

1. Open the product_update page.

2. Open the Data Bindings inspector and double-click the rsUpdate recordset.

The recordset dialog box reopens. It should be the simple version of the dialog box. If it isn’t, click Simple.

3. Set the data filter area of this dialog box so the ProductID field is filtered by the incoming URL parameter id. The top-left pop-up menu should be set to ProductID, the top-right one to =, and the lower-left one to URL Parameter.

4. In the lower-right text box, type id.

The dialog box should look like Figure 8-2.

Figure 8-2

The simple Recordset dialog box used to filter for a particular record.

5. Click the Test button to see test data. You will be asked to enter a test value for the id parameter. Valid ProductID values are 1 through 22.

6. Close the dialog boxes and save the page.

Now you can test the links.

7. Transfer both the detail page and the update page to the server and load your product_resultlist page into a browser.

8. Pick a product at random on which to see detail; then click the Update button on the detail page.

9. Verify that the correct record loads into the update page and notice the query string in your browser’s location window that carries the id parameter.

You cannot yet submit the form to complete the update behavior.


To apply the update server behavior:

1. As preparation, select the <form> tag in the Tag Selector in the bottom-left corner of the document window, open the Property inspector, and name the form AndesUpdate. Give appropriate names to all the form fields to help you check the final update bindings.

2. In the Server Behaviors inspector, click the plus (+) button and choose Update Record from the pop-up menu.

The Update Record dialog box opens.

3. Make sure the settings are as shown in Figure 8-3. Many of the options are defaults.

Figure 8-3

The Update Record dialog box.

4. Carefully check the list showing which form fields will be used to update which data fields. Adjust any that are wrong, using the Column pop-up list below the Form Elements list. Also make sure the data types are correct and adjust any that are wrong, using the Submit As pop-up list. The data types should be as in Table 8.2.

Note that last field in particular. There are three possible formats for a binary (check box) field. This may well be the only format that does not default correctly.

5. Close the dialog box; save the page and transfer it to the server.

6. To test the behavior, open the product_resultlist page in your browser, select a product for which you want to see the detail page, click the Update button, and make some changes to the product. When you’ve finished, click the Update button. Use either of the following methods to verify that the record has been updated:

• Browse the detail page of the updated product.

• On the product_update page, in the Data Bindings inspector, double-click the rsUpdate recordset and click the Test button to see the data returned.


TABLE 8.2 ANDES PRODUCTS DATA TYPES

FIELD DATA TYPE

ProductName Text

Description Text

SupplierID Numeric

SKU Text

CategoryID Numeric

UnitsInStock Numeric

DeliveryTime Text

WholesalePrice Numeric (Currency)

RetailPrice Numeric (Currency)

BigImage Text

SmallImage Text

Discontinued Check box (-1,0)

CREATING AN UPDATE PAGE WITH A LIVE OBJECT

The live object expects to insert a table on a fresh page, so you’ll start with this task. Then you’ll create the

update page.

To create an instant update page using the live object:

1. Create a new page and name the page product_update_live_object.

Unlike an insert page, an update page needs a recordset representing the entire Products data table. You’ll also need recordsets representing the SupplierID and CompanyName fields of the Suppliers data table, as before, and a third recordset representing the CategoryID and CategoryName fields of the Categories data table.

2. Create or copy these three recordsets: rsUpdate, rsSuppliers, and rsCategories. Then resave the page.

You can copy rsUpdate and rsCategories from the product_update page, and rsSuppliers from product_add.

3. Title the page Update product by typing the words in the Title text box in the middle of the toolbar.

4. On the Live panel of the Objects palette, locate and click the Record Update Form live object.

The Record Update Form live object dialog box opens.

5. Set the top two pop-up lists so they are inserted in the Products data table using the connAndes data connection (the only one you have, in fact).


6. Set the next pop-up list to select a record from the rsProducts recordset.

The unique key column will default correctly.

7. Browse to find and insert the redirect page, product_search.

Now work with the form fields one by one.

8. Delete the ProductID and Imageheight fields.

9. Edit the labels to put spaces in them where appropriate. The Delivery Time label should be Delivery Time, days.

10. Move the Product Name field above the SKU field using the up arrow button above the Form Field list.

11. Select the SupplierID field. Set the Display As pop-up list to Menu.

12. Click the Menu Properties button.

The Menu Properties dialog box opens.

13. Click the radio button to populate this menu from a recordset and set the pop-up lists to the rsSuppliers recordset, labels from the CompanyName field, and values from the SupplierID field.

Note that the Select Value Equal To text box correctly defaults to the equivalent field of the rsProducts recordset. You want this menu to show the supplier of this product when the page loads (though you can edit it).

Figure 8-4 shows the completed dialog box.

Figure 8-4

The Menu Properties dialog box for the supplier menu.

14. Back in the main dialog box, select the CategoryID field. Set the Display As pop-up list to Radio Group and click the Radio Group Properties button.

The Radio Group Properties dialog box opens. You’re going to make this into a set of radio buttons as you did for the insert page in Lesson 6, but this time you’ll work from a recordset.

15. Click the radio button to populate this radio group from a recordset and set the pop-up lists to the rsCategories recordset, labels from the CategoryName field, and values from the CategoryID field.

Note that the Select Value Equal To text box correctly defaults to the equivalent field from the rsCategories recordset.



Figure 8-5

The Radio Group Properties dialog box for the category radio buttons.

16. Back in the main dialog box, select the DeliveryTime field. Set the Display As pop-up list to Radio Group and click the Radio Group Properties button.

The Radio Group Properties dialog box opens.

17. Set up this radio group manually as shown in Figure 8-6. Delivery time has only four possible values: 30 days, 15 days, 8 days, or 5 days.

Figure 8-6

The Radio Group Properties dialog box for the delivery time radio buttons.

18. Carefully double-check the main dialog box.

Remember: Unlike most Dreamweaver UltraDev dialog boxes, these live object dialog boxes cannot be retrieved later for editing.



Figure 8-7

The completed Insert Record Update Form dialog box.

19. Click OK in the main dialog box.

The update page is created (see Figure 8-8) together with the server behavior to update the Products data table and the redirection to the product_search page.

Figure 8-8

The record update form just as the live object created it.


Figure 8-9 shows the page in a browser. Do not spend any time improving the design of the page, although you may be tempted.

Figure 8-9

The record update form seen in a browser.

SECTION ASSIGNMENT

• Apply the same form validations as you did on the insert page in Lesson 7.

• Open the product_detail page. Place a form on the page as well as a form submit button labeled Delete this product and use Dreamweaver UltraDev server behaviors to delete the current record.

NOTES: