Accessibility
Dave Stutler

David Stutler

WideEyed Media

Created:
6 March 2006
User Level:
Beginner
Products:
Coldfusion

Creating Database-Driven Websites Using ColdFusion MX 7 on Mac OS X

It's not every day that one gets the opportunity to pen an article about true love and technology. But in a few cases, true love and technology mix quite well.

I've found this to be especially true with two groups to which I belong: Apple junkies and ColdFusion developers. The first group feels like a secret club that continually wonders when the rest of the world will crash their party. The second group believes deeply in its chosen technology and consequently incorporates a fervent user community.

Until recently, it was difficult for most Apple users and ColdFusion developers to fit comfortably together. This all changed when Adobe (formerly Macromedia) released a version of ColdFusion MX 7 with official support for the Apple Mac OS X platform.

If you want to learn how to create dynamic websites, move ColdFusion to the top of your list. Simply put, ColdFusion is a very approachable language to learn. Users with an HTML background will love its tag-based structure; those without much programming experience will love its readability. ColdFusion developers also have reason to be excited about the availability of the language on a new platform. With ColdFusion support on Mac OS X, they can reach new markets with their application development that they could not before. That's a big advantage for the Mac web developer crowd.

This article guides you through the steps for running ColdFusion on your Macintosh. You'll also build a couple of sample ColdFusion pages that demonstrate just how easy it is to create ColdFusion pages within Dreamweaver and run them on your ColdFusion server.

Requirements

ColdFusion MX 7.0.1

Dreamweaver 8

Sample files:

Operating system: Apple Mac OS X (10.3.9 "Panther" or 10.4.x "Tiger" required)

Database server: MySQL (optional)

Step 1: Download the Necessary Applications and Files

To get up and running, you need a few ingredients—primarily ColdFusion server and Dreamweaver. Luckily, both are available as free trial downloads on macromedia.com. The Dreamweaver trial is a 30-day full-featured evaluation copy. ColdFusion server is also a fully featured Enterprise Edition product for 30 days. After that time, the server switches to a single-user development version. You can continue to run the server locally for development without the need to purchase a commercial server license.

Optionally, you can download the MySQL database server to serve as a local data source. For this article, the MySQL server is not necessary.

Finally, download the files you'll build during the tutorial. I created them to help you learn how to use ColdFusion and speed the development process.

Step 2: Install and Set Up ColdFusion MX 7

Use the following process to install ColdFusion on your Mac:

  1. Double-click the ColdFusion installer.
  2. Choose your language and click OK.
  3. Read the Introduction screen in the installation wizard and click the Next button to continue.
  4. Accept the terms of the license agreement. Click Next.
  5. Select the 30-day Trial option and click Next.
  6. Select Server Configuration and click Next.
  7. This tutorial assumes that this is your first installation of ColdFusion, so select No for the question and click Next.
  8. The next screen shows two options. Select the one called "Getting Started Experience, Tutorials, & Documentation." Later you will use a data source created during this step.

    The second option installs a startup script that automatically launches ColdFusion server when the system starts. Select what you prefer and click Next.

  9. The installer suggests a default installation folder. In most cases, this is inside the Applications folder. If you'd like a different location, enter it here. Click Next.
  10. Because this is the first time you've installed ColdFusion, select No when the wizard asks if a previous version of ColdFusion has been installed. Click Next.
  11. For this tutorial, select ColdFusion's built-in web server. This allows you to access all ColdFusion services without conflicting with any of your existing web servers. The ColdFusion server runs on port 8500. Click Next to continue.
  12. On this screen, choose a password for the ColdFusion Administrator and write it down. Click Next. (The ColdFusion Administrator is a simple web-based interface that allows you to configure things on the server, such as setting up data sources.)
  13. The installer asks if you'd like to enable the Remote Development Service (RDS). By setting RDS, you enable Dreamweaver to see all your ColdFusion data sources easily from an editing interface as you build your queries. This speeds up the development process. This is very useful, so select the Enable RDS option, type an RDS password (and write it down), and click Next.
  14. If you selected the option to start ColdFusion on system startup, enter your Mac user password. Click Next.
  15. The next screen gives you a summary of the installation selections. To begin the installation, click Install. When the installer finishes, it notifies you that the installation was a success.
  16. Leave the Launch the Configuration Wizard option selected and click Done.

Now go ahead and set up your ColdFusion installation:

  1. Your default browser opens and displays the ColdFusion MX 7 Configuration and Settings Migration Wizard (see Figure 1). Enter the password you established in Step 12 above and click Login.

    ColdFusion MX 7 Configuration and Settings Migration Wizard

    Figure 1. ColdFusion MX 7 Configuration and Settings Migration Wizard

  2. You now see the Setup Complete screen in your browser. From here you can either go to the ColdFusion MX 7 Getting Started Experience screen or the ColdFusion Administrator. You can also access the ColdFusion Administrator from the Getting Started Experience screen (see Figure 2).

    ColdFusion MX 7 Configuration and Settings Migration Wizard screen

    Figure 2. ColdFusion Getting Started Experience screen

  3. Enter the ColdFusion Administrator. Congratulations! The administrator is a ColdFusion page, so you know that the ColdFusion server is up and running.
  4. While in the Administrator, click the Data & Services link in the left navigation panel, if necessary, to expand it to show several options.
  5. Click Data Sources in the expanded menu. There are several predefined data sources that the ColdFusion installation process configured for you during the server installation. You will use these data sources later in this article.
  6. Open the sample files (cfonosx.zip) linked to in the Requirements section of this article and place them in the following location, which you must create yourself: HD:Applications:ColdFusionMX7:wwwroot:coldfusiondemo.

Step 3: Install Dreamweaver 8

If you don't have Dreamweaver 8 installed, go ahead and do that now. For your convenience, there's a download link for Dreamweaver 8 right on the ColdFusion trial download page.

The installation steps are relatively basic, with few options. Just double-click the installer, accept the license agreement, select the destination folder and drive, and click Install.

Step 4: Set Up Your First ColdFusion/Dreamweaver Site

Setting up a site in Dreamweaver that incorporates ColdFusion pages is similar to how you set up a site for static HTML pages in Dreamweaver. The main difference lies in setting up the testing server for the site.

Follow these steps to set up a site with a testing server in Dreamweaver:

  1. Launch Dreamweaver.
  2. Select Site > New Site.
  3. If you're not already in Advanced mode, click the Advanced tab at the top of the Site Definition dialog box.
  4. With the Local Info panel visible (select it from the top of the Category list), type ColdFusionDemo in the Site Name text box.
  5. In the Local Root Folder field, browse to the folder containing the files you downloaded for this demo: HD:Applications:ColdFusionMX7:wwwroot:coldfusiondemo
  6. Select the Testing Server panel from the Category list.
  7. Select ColdFusion from the Server Model pop-up menu.
  8. For Access, select Local/Network.
  9. The testing server folder is the folder on your hard drive where ColdFusion stores files in its web root. For most default installations, this is as follows: HD:Applications:ColdFusionMX7:wwwroot.
  10. Set the URL prefix. This is the URL that maps to your ColdFusion installation. In most cases, this URL is http://localhost:8500/ so enter that in the text box.
  11. Click OK to close the dialog box.

Now that you have set up the Dreamweaver site, you are ready to begin building ColdFusion pages with Dreamweaver.

Note: For more information about defining a site and entering the proper remote settings for it so that you can upload your files to a web server, read the following TechNote: How to Define a Site in Dreamweaver.

Step 5: Build Your First Dynamic Page

Your first dynamic page provides very basic functionality available in all application server languages—the dynamic page include. The following steps show you how to use the ColdFusion insert panel in Dreamweaver to insert a ColdFusion CFINCLUDE tag into your page:

  1. In Dreamweaver, select File > Open and browse to index.cfm in the coldfusiondemo folder, where you placed all your sample files.
  2. Within Design view, scroll to the bottom of the page and locate the empty area beneath the main left column. Click in the empty area.
  3. On the Insert panel, click the pop-up menu and select CFML to show the CFML-related buttons on this panel (see Figure 3), which you'll need to incorporate standard ColdFusion functionality into your web page.

    Selecting the CFML-related buttons on the Insert panel

    Figure 3. Selecting the CFML-related buttons on the Insert panel

  4. Click the cfinclude button (see Figure 4). When you select this option, the Tag Editor dialog box appears and asks for the path for the included file.

    The cfinclude button on the Insert panel

    Figure 4. The cfinclude button on the Insert panel

  5. Browse to footer.html inside your coldfusiondemo folder.
  6. Click OK.

You've just created a simple call to include a snippet of HTML into your ColdFusion template. When you run index.html, ColdFusion will include the HTML in footer.html dynamically at runtime. Save your file and upload both index.cfm and footer.html to your testing server.

Step 6: Build Your First Database Query in a Dynamic Page

Now to build database access into your dynamic page. Over the next several steps, you'll use the Application panel in Dreamweaver to create a recordset that selects records from a database and places those records on the page:

  1. Open the Application panel in Dreamweaver if you haven't done so already. It displays a list of steps you must complete before you can do any dynamic development. Most likely, the first unchecked step is the RDS password step.
  2. Click the step to provide Dreamweaver with the RDS password to connect to your ColdFusion server. (You entered this password in Step 13 during the ColdFusion installation procedure earlier.)
  3. Click the Bindings tab in the Application panel. This is where you create your first recordset from the database.
  4. Click the plus (+) sign in the upper left corner of the panel and select Recordset (Query) from the pop-up menu.
  5. In the Recordset dialog box, name the recordset rsCoupons.
  6. For Datasource, select cfbookclub_pb.
  7. For Table, select BOOKCLUB.COUPONS.
  8. You want to sort the coupons by date, so in the Sort section select EXPIRATIONDATE and Descending in their respective pop-up menus.
  9. Click OK.

This query creates a recordset on the page that you can output using the Bindings tab in Dreamweaver. The Bindings tab displays the individual fields accessible from this recordset.

Follow these steps to output these fields on the page:

  1. Highlight the text "COUPON TEXT" on the right side of the index.cfm page in Design view.
  2. With that text highlighted, select the COUPON field from the list of fields in the Bindings tab in the Application panel.
  3. Click the Insert button at the bottom of the Bindings tab to insert the COUPON field onto your page. This places the dynamic field directly on the page.
  4. Highlight the text "Expiration Date" on the right side of the index.cfm page.
  5. Select the EXPIRATIONDATE field from the list of fields in the Bindings tab.
  6. Click Insert to add the dynamic field to the page.
  7. With that field still selected on the page, format the data by selecting the Format column pop-up menu in the Bindings panel.
  8. Format the field as a date using whichever mask you prefer (see Figure 5).

    Choosing a date mask from the Format column pop-up menu

    Figure 5. Choosing a date mask from the Format column pop-up menu

Finally, to output more than one record from this recordset, add a repeating region to the page:

  1. Highlight the two new dynamic fields you just added to your page.
  2. From the Server Behaviors tab in the Application panel, click the plus (+) sign and add a Repeat Region to the page.
  3. A dialog box appears and asks you to specify how many records to display. Type 2 to show two records at a time.
  4. Click OK.

Step 7: Test Your Page

Time to test your page:

  1. Save all changes you have made to your page.
  2. Upload all your files from the Dreamweaver site to your web server.
  3. View the following URL in your browser:

    http://localhost:8500/ColdFusionDemo/index.cfm

    This page displays the included footer file and the dynamic data from the query output in the sidebar.

Congratulations! You've just created your first database-driven page using ColdFusion on a Mac.

Where to Go from Here

As you can see, developing and testing ColdFusion applications on a Mac is easy. ColdFusion is a robust application server; what you've accomplished is just the beginning.

With a little digging around in the Application panel in Dreamweaver, you can explore all that is possible in a point-and-click environment until you become more comfortable with the ColdFusion language. The functionality ranges from user authentication to inserting and updating data in a database, all through a web page that requires little-to-no hand coding. What a great way to learn a language!

If you are an existing Dreamweaver user, jump in and try ColdFusion and learn how easy it can be to create database-driven, dynamic websites. Start out by visiting the Getting Started page in the ColdFusion Developer Center, and then see where your creativity takes you.

About the author

David Stutler is the owner and operator of WideEyed Media, a new media development group located in Kansas City. In addition to his production duties, David serves as the lead Flash and Dreamweaver instructor for ThinqDigital, a Macromedia Authorized Training Partner. David is also an avid musician, spending the last 11 years in the vocal group measureXmeasure.