Your SlideShare is downloading. ×
  • Like
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. macromedia ® ® DREAMWEAVER UltraDev ™ 4 CURRICULUM GUIDE A Hands-on Web Publishing Curriculum from Macromedia
  • 2. 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 2001 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 ii
  • 3. TABLE OF CONTENTS 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 TABLE OF CONTENTS iii MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 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 MACROMEDIA iv TABLE OF CONTENTS DREAMWEAVER ULTRADEV 4
  • 5. INTRODUCTION 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 FilesMacromediaUltraDevTrainingASPCurrent 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 v MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 6. 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. MACROMEDIA vi INTRODUCTION DREAMWEAVER ULTRADEV 4
  • 7. SYSTEM REQUIREMENTS 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 vii MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 8. 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. LESSON 1 1 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 9. Object Launcher Palette Property Inspector 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. MACROMEDIA 2 LESSON 1 DREAMWEAVER ULTRADEV 4
  • 10. 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. LESSON 1 3 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 11. 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. Design View Browser Preview View Options Code View Page Title Window Reference Split View Refresh Live Data View File Management Code Navigation Figure 1-3 The UltraDev menu bar and 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. MACROMEDIA 4 LESSON 1 DREAMWEAVER ULTRADEV 4
  • 12. 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. LESSON 1 5 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 13. 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 FilesMacromediaUltraDevTraining. 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. MACROMEDIA 6 LESSON 1 DREAMWEAVER ULTRADEV 4
  • 14. LESSON 2: CONFIGURING YOUR SITE OBJECTIVES When you have finished this lesson, you will understand • How to define a new site in Macromedia Dreamweaver UltraDev • The general principles of server applications and dynamic pages and you will have learned • 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. LESSON 2 7 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 15. 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 FilesMacromediaDreamweaver UltraDevTrainingCurrent 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). MACROMEDIA 8 LESSON 2 DREAMWEAVER ULTRADEV 4
  • 16. 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:Inetpubwwwroot 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:Inetpubwwwrootandes_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. FILE CHECKOUT The 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. 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). LESSON 2 9 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 17. 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. Site Map Put button button 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. MACROMEDIA 10 LESSON 2 DREAMWEAVER ULTRADEV 4
  • 18. 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 wwwrootandes_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. LESSON 2 11 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 19. 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. MACROMEDIA 12 LESSON 2 DREAMWEAVER ULTRADEV 4
  • 20. 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 LOGIC HTML, 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. LESSON 2 13 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 21. 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? MACROMEDIA 14 LESSON 2 DREAMWEAVER ULTRADEV 4
  • 22. LESSON 3: SETTING UP DATABASE CONNECTIVITY OBJECTIVES When you have finished this lesson, you will understand • 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 and you will have learned • 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. LESSON 3 15 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 23. 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. MACROMEDIA 16 LESSON 3 DREAMWEAVER ULTRADEV 4
  • 24. 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. LESSON 3 17 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 25. 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. MACROMEDIA 18 LESSON 3 DREAMWEAVER ULTRADEV 4
  • 26. 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. LESSON 3 19 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 27. 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. MACROMEDIA 20 LESSON 3 DREAMWEAVER ULTRADEV 4
  • 28. 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. LESSON 3 21 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 29. 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. SEARCH RESULTS DETAIL Submit DEL UPDATE INSERT Delete Record D ATA UPDATE INSERT Update Insert Record Record Submit Submit Figure 3-5 Logic of the Andes Coffee Web site. MACROMEDIA 22 LESSON 3 DREAMWEAVER ULTRADEV 4
  • 30. 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. LESSON 3 23 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 31. 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. MACROMEDIA 24 LESSON 3 DREAMWEAVER ULTRADEV 4
  • 32. LESSON 4: ADDING DYNAMIC DATA OBJECTIVES When you have finished this lesson, you will understand • Inserting and binding dynamic data • Live Data View mode in Macromedia Dreamweaver UltraDev and you will have learned • 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. LESSON 4 25 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 33. 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). MACROMEDIA 26 LESSON 4 DREAMWEAVER ULTRADEV 4
  • 34. 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. LESSON 4 27 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 35. 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). Recordset Navigation Bar Figure 4-3 The Live Objects panel of the Objects palette. MACROMEDIA 28 LESSON 4 DREAMWEAVER ULTRADEV 4
  • 36. 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. LESSON 4 29 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 37. 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. Refresh icon Query String window Stop button 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. MACROMEDIA 30 LESSON 4 DREAMWEAVER ULTRADEV 4
  • 38. 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. LESSON 4 31 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 39. 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. MACROMEDIA 32 LESSON 4 DREAMWEAVER ULTRADEV 4
  • 40. LESSON 5: DYNAMIC FORM ELEMENTS OBJECTIVES When you have finished this lesson, you will understand • Binding form text fields to data • Binding menus and radio buttons to data • Binding check boxes to data and you will have learned • 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. LESSON 5 33 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 41. 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. MACROMEDIA 34 LESSON 5 DREAMWEAVER ULTRADEV 4
  • 42. 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. LESSON 5 35 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 43. 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. MACROMEDIA 36 LESSON 5 DREAMWEAVER ULTRADEV 4
  • 44. 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. LESSON 5 37 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 45. 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. MACROMEDIA 38 LESSON 5 DREAMWEAVER ULTRADEV 4
  • 46. 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. LESSON 5 39 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 47. 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. MACROMEDIA 40 LESSON 5 DREAMWEAVER ULTRADEV 4
  • 48. LESSON 6: BUILDING A RESULT LIST OBJECTIVES When you have finished this lesson, you will understand • Multirecord result listing • Server behaviors concerned with navigation • Macromedia UltraDev’s special live objects • The server behavior for linking to a detail page and you will have learned • 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. LESSON 6 41 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 49. 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. MACROMEDIA 42 LESSON 6 DREAMWEAVER ULTRADEV 4
  • 50. 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. LESSON 6 43 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 51. 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. MACROMEDIA 44 LESSON 6 DREAMWEAVER ULTRADEV 4
  • 52. 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. LESSON 6 45 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 53. 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. MACROMEDIA 46 LESSON 6 DREAMWEAVER ULTRADEV 4
  • 54. 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. Navigation status line Figure 6-5 A live object keeps track of record numbers for your users. LESSON 6 47 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 55. 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. MACROMEDIA 48 LESSON 6 DREAMWEAVER ULTRADEV 4
  • 56. 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. LESSON 6 49 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 57. 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? MACROMEDIA 50 LESSON 6 DREAMWEAVER ULTRADEV 4
  • 58. LESSON 7: BUILDING AN INSERT PAGE OBJECTIVES When you have finished this lesson, you will understand • 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 and you will have learned • 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. LESSON 7 51 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 59. 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. MACROMEDIA 52 LESSON 7 DREAMWEAVER ULTRADEV 4
  • 60. 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. LESSON 7 53 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 61. 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. MACROMEDIA 54 LESSON 7 DREAMWEAVER ULTRADEV 4
  • 62. 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. LESSON 7 55 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 63. 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. MACROMEDIA 56 LESSON 7 DREAMWEAVER ULTRADEV 4
  • 64. Figure 7-4 Completed Record Insertion Form dialog box. Figure 7-5 Record insertion form as it appears on the page. LESSON 7 57 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 65. 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. MACROMEDIA 58 LESSON 7 DREAMWEAVER ULTRADEV 4
  • 66. 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. LESSON 7 59 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 67. 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. MACROMEDIA 60 LESSON 7 DREAMWEAVER ULTRADEV 4
  • 68. 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. LESSON 7 61 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 69. 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. MACROMEDIA 62 LESSON 7 DREAMWEAVER ULTRADEV 4
  • 70. 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. LESSON 7 63 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 71. 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. MACROMEDIA 64 LESSON 7 DREAMWEAVER ULTRADEV 4
  • 72. LESSON 8: COMPLETING THE UPDATE PAGE OBJECTIVES When you have finished this lesson, you will understand • 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 and you will have learned • 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. LESSON 8 65 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 73. 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. MACROMEDIA 66 LESSON 8 DREAMWEAVER ULTRADEV 4
  • 74. 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. LESSON 8 67 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 75. 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. MACROMEDIA 68 LESSON 8 DREAMWEAVER ULTRADEV 4
  • 76. 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). LESSON 8 69 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 77. 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. MACROMEDIA 70 LESSON 8 DREAMWEAVER ULTRADEV 4
  • 78. Figure 8-5 shows the completed dialog box. 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. LESSON 8 71 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 79. Figure 8-7 shows the completed dialog box. 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. MACROMEDIA 72 LESSON 8 DREAMWEAVER ULTRADEV 4
  • 80. 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. LESSON 8 73 MACROMEDIA DREAMWEAVER ULTRADEV 4
  • 81. NOTES: