| Dreamweaver doesn't support the use of image files stored as binary data in databasesin other words, you can't use a database that stores the actual image files. However, you can add dynamic images using information about the location of the image file on the Web server. If your database includes a field for the image location, you can add dynamic images to your pages using a recordset that contains this field. In the following tasks, you'll add a connection to a ColdFusion database that contains an image-location field, create a recordset in Dreamweaver that includes this field, and then add a dynamic image to a page. We're using ColdFusion because the ColdFusion MX 7 installation includes a tutorial database with an image-location field. The process for creating a ColdFusion database connection is unique to ColdFusion, but the process of defining a recordset with an image-location field is the same for ColdFusion, ASP, and PHP. To add a ColdFusion database connection: 1. | Open a new ColdFusion page in Dreamweaver by choosing File > New > Dynamic page > ColdFusion. Save this page as newArt.cfm.
If you don't want to create the page yourself, you can download the newArt.cfm file and additional code files for this book from this book's Web site at www.peachpit.com/dw.vqp.
| 2. | Create a database connection to the tutorial.mdb database included with ColdFusion MX 7. For more details on creating a database connection in ColdFusion, see Chapter 4. (Database connections are called data sources in ColdFusion.)
The tutorial.mdb file, a Microsoft Access file, is in the root folder of your Web server in the CFIDE directory (CFIDE > gettingstarted > tutorial > tutorial.mdb).
| 3. | After you've created the database connection, close the ColdFusion Administrator window and return to Dreamweaver.
| 4. | In the Application panel group, click the Databases tab to access the Databases panel. The new database connection (we named it cfartgallery2) will be included in the database list (Figure 7.14).
Figure 7.14. After you add a new ColdFusion database connection in the ColdFusion Administrator, the connection name appears in the Databases panel in Dreamweaver. 
|
To create a recordset that includes an image-location field: 1. | Follow the steps in the previous task to add a database that contains an image-location field. We'll work with that database in this exercise.
| 2. | Click the Bindings tab in Dreamweaver to access the Bindings panel.
| 3. | Click the plus button and choose Recordset (Query) from the pop-up menu to open the Recordset dialog (Figure 7.15).
Figure 7.15. To define a recordset, click the plus button on the Bindings panel and select Recordset (Query) from the pop-up menu. 
| 4. | Click the Advanced button to access the advanced Recordset dialog.
| 5. | In the Name field, enter newart, and in the Data Source drop-down list choose cfartgallery2 (or whatever name you gave to the database connection in the preceding task) to select this database as the source of data for the recordset (Figure 7.16).
Figure 7.16. In the Recordset dialog, enter a name for the recordset in the Name field and select a database name from the Data Source dropdown list. 
| 6. | In the Database Items section, click the plus button to the left of Tables to expand the list of Tables in the cfart gallery2 database. Then click the plus button to the left of ART to access the ART table fields (Figure 7.17).
Figure 7.17. In the Database Items section, click the plus button to expand the Tables list, and then click the plus button to expand the ART table. Select the LARGEIMAGE field. 
| 7. | Select the LARGEIMAGE field and click the SELECT button to add this table field to the SQL statement. The LARGEIMAGE field contains the image file location data.
| 8. | If you want to include dynamic text along with the image, choose more fields from the ART and ARTIST tables, which contain additional information about the artworks and the artists. Click the SELECT button to add each one to the SQL statement.
| 9. | From the ART table, select the ARTID field and click the ORDER BY button to sort the contents of the recordset by the ARTID value (Figure 7.18).
Figure 7.18. In the Database Items section, in the ART table, select the ARTID field. Click the ORDER BY button to sort the recordset results by the ARTID value. 
| 10. | Click OK to save the recordset and close the advanced Recordset dialog.
|
To add a dynamic image to a Web page: 1. | In Design view, open the newArt.cfm page we created in Step 1 of "To add a ColdFusion database connection."
| 2. | Place the insertion point where you want the image to appear, and then from the main menu bar, choose Insert > Image. The Select Image Source dialog appears (Figure 7.19).
Figure 7.19. The Select Image Source dialog. 
| 3. | In the Select File Name From section, choose the Data Sources radio button. The newart recordset we created in the previous task appears in the Field area. Click the plus button to expand the recordset (Figure 7.20).
Figure 7.20. The newart recordset. 
| 4. | Select the LARGEIMAGE field. ColdFusion Markup Language (CFML) for the LARGEIMAGE field (<cfout put>#newart.LARGEIMAGE#</cfoutput>), which provides a dynamic value for the image location, is added to the URL field at the bottom of the dialog (Figure 7.20).
| 5. | Because the images are located in a folder named images, you need to append images/ to the cfoutput tag so that the URL for the image location is correct (Figure 7.21). Otherwise, the dynamic images won't appear when the page is viewed in a browser.
Figure 7.21. Modify the code in the URL field so that the image location is correct. 
| 6. | Click OK to add a placeholder to the page and close the Select Image Source dialog.
Next, we'll add some text to accompany the image.
| 7. | In the Application panel group, click the Bindings tab to access the Bindings panel. Click the plus button to the left of the newart recordset to expand it.
| 8. | Select any field, and click the Insert button at the bottom of the panel to add dynamic text to the page.
In our case, we're adding the ARTNAME, DESCRIPTION, FIRSTNAME, and LAST-NAME fields. You can include additional text and page formatting if you wish.
| 9. | Save the page. From the main menu, choose File > Preview in Browser to view the page in your browser.
Figure 7.22 shows our newArt.cfm page in Microsoft Internet Explorer.
Figure 7.22. Previewing a page with a dynamic image and dynamic text. 
|
 Tip
Only the data from the first record in the recordset displays on the newArt.cfm page. You can view all the records one page at a time by adding a Recordset Paging server behavior to create recordset navigation links, or view all the records on a single page by adding a Repeat Region server behavior. For more information on using server behaviors, see Chapter 9.
|
