macromedia

1,924 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,924
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

macromedia

  1. 1. macromedia ® ® DREAMWEAVER UltraDev ™ 4 CURRICULUM GUIDE A Hands-on Web Publishing Curriculum from Macromedia
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×