How Dynamic Sites Work in Dreamweaver

[ LiB ]

Just as Dreamweaver helps you write static HTML pages, it also has plenty of tools to help you develop dynamic sites using ASP, ASP.NET, ColdFusion, PHP, or JSP. Dreamweaver can help you manage database connections, compose database queries, and display dynamic information, all within its familiar visual design environment. The basic procedure is as follows :

Define a site, including testing server information.
Define at least one database connection for the site.
Open individual documents and use application objects and server behaviors to query the database, collect recordsets, display dynamic data, and so on.

Dreamweaver uses the same procedure, and much of the same toolset, regardless of which server technology you're using. Therefore, as soon as you get the hang of things, switching technologies is fairly painless. The code itself, however, is not language-independent. This means that as soon as you've created a site using one server technology (such as ASP or ColdFusion), you can't just push a few buttons and change existing pages.

Live Data Preview and the Testing Server

The main difference between using Dreamweaver for static sites and using it for dynamic sites is how it previews your pages.

Previewing in the Browser

In a static site, when you choose Preview in Browser (F12), Dreamweaver launches the browser and passes it the local address of the current page:

 C:\Client Files\Web\My Local Site\index.html

or for Mac users:

 file:///Client Files/Web/My Local Site/index.html

This engages your browser through your computer's file system.

In a dynamic site, however, it's not enough just to view the pages in a browser. Dreamweaver has to activate the web server, passing it an HTTP request so that it processes the files. This requires an address like one of these:

 http://localhost/mysite/index.php http://127.0.0.1:8500/mysite/index.cfm http://www.mydomain.com/index.aspx

This engages the web server and the browser so that pages are " served " rather than simply being called up through the file system. To develop dynamic sites, therefore, you must have access to a web server as you work.

Previewing in the Document Window

You can also engage the dynamic preview from within the Document window itself by clicking the Live Data button in the Document toolbar, as shown in Figure 21.12. When you do this, the Document window changes to show you the URL it's previewing from (it's the same as those used by the browser), and your page appears with real data replacing data or scripting placeholders, as shown in Figure 21.13. Although you can do a certain amount of work with Live Data view engaged, this slows you down and is not recommended. Instead, use this as a quick peek at the final result without having to leave Dreamweaver. To disengage Live Data view, click one of the other view icons (Design, Code, Code and Design) in the Document toolbar.

Figure 21.12. The Live Data view icon in the Document toolbar.

Figure 21.13. The Document window in Live Data viewing mode.

Setting Up a Dynamic Site

The first step in setting up a dynamic site in Dreamweaver is to define a site, complete with local, testing server, and ( optionally ) remote information. Dreamweaver needs to know where your local, testing server, and remote folders are. It also needs to know what server technology you'll be using and, if necessary, what specific scripting language you'll be using for that technology. (For instance, ASP can be coded using one of several scripting languages.) Finally, as with any remote site, it needs to know how to communicate with your web server and your testing server.

Set up a dynamic Dreamweaver site this way:

Choose Site > Manage Sites, and click the New button (as you normally would to define a site).
In the Site Definition dialog box (Advanced mode), set up the Local Info category as normal. If desired, you can also set up your Remote Info at this time, but it's not required at this point.
Still in the Site Definition dialog box, go to the Testing Server category, as shown in Figure 21.14. Specify the server technology/language setup you want to use, and set up communication information for your web server. If you're planning to develop online, using the remote server as your development server, the settings here should match those in the Remote Info category. If you want to develop offline with a local testing server (a safer method), set up the connection information to your computer's server here.

Figure 21.14. Setting up the testing server for a Dreamweaver site (offline development).

It's especially important to make sure that the URL Prefix for communicating with the testing server is correct! Dreamweaver relies on this information to create live previews of your pages. For offline development, begin with http://localhost/ or http://127.0.0.1/ . For online development, enter the base URL you would normally use to browse to your website http://mydomain.com/ , for instance.

When you're done, click OK to close the Site Definition dialog box. The dynamic development features in Dreamweaver are now enabled for this site.

The testing server is essentially a temporary remote site. It works much like the remote site in the Dreamweaver interface. To see the contents of the testing server, as shown in Figure 21.15, do one of the following:

Figure 21.15. Viewing the testing server in the Site panel (expanded and unexpanded).

If the Site panel is not expanded, choose Testing Server from the site view drop-down menu (instead of Local View).
If the Site panel is expanded, click the Testing Server button to display it in the panel's left pane.

With the Site panel in expanded mode, and the testing server showing, all Dreamweaver's file synchronizing commandssuch as Get, Put, and Synchronizework between local and testing server sites, just as they normally work between local and remote sites.

Connecting to a Database

The database connection is a script that either calls on the driver to talk to the database or tells the application server how to talk to the database without a driver. Every time you use Dreamweaver to establish a database connection, the program creates a Connections folder in your local root folder and puts a special script file in that folder. Every time you use that connection in one of your site documents, Dreamweaver links that document to the relevant script file. This externalization is a great thing, because it allows you to develop on a testing server and then move the site to a live remote server simply by updating the connection script.

All connections are managed by the Databases panel (select Window > Connections), located in the Application panel group . To create a connection, open the Databases panel and check out its messages. Whichever server model you're using, this panel walks you through the steps of creating a connection script within that technology.

Keep an eye on how the panels are laid out in the Application panel group. As you're defining your dynamic site and its pages, you generally start from the Databases panel (on the left) and work your way through the panels from left to right. Each panel starts with a checklist of tasks that need to be done before that panel can be used.

ColdFusion

For ColdFusion MX sites, as soon as the testing server has been defined, the Databases panel displays a list of all databases currently registered with the ColdFusion MX server, as shown in Figure 21.16. No connection script is necessary.

Figure 21.16. The Databases panel for a ColdFusion MX site.

PHP MySQL

If your server technology is PHP MySQL, you don't need to define a driver; the MySQL server program keeps track of databases and connections. As the Databases panel indicates, you need to define a site (which includes a testing server), open or create a PHP document, and make sure you can connect to your testing server. Then you can click the + button to create a connection.

When you click the + button, the only choice available is MySQL Connection. When you choose this, a dialog box asks you the following (see Figure 21.17):

Figure 21.17. Setting up a database connection using PHP MySQL.

Connection name Any one-word name will do, although many developers like their connection names to end in conn .
MySQL Server Enter the IP address of your testing server here. If your server is on your working computer, enter localhost or 127.0.0.1 .
User name and password MySQL allows only known users to connect to and access its databases. Get this information from the administrator of your MySQL server. (If you set up MySQL on your own computer, you can check the user table of the mysql database to see what usernames and passwords are available.)
Database The name of the database to connect to. Click the Select button to get a list of available databases.

ASP.NET

For ASP and ASP.NET sites, the Databases panel gives you the choice of choosing a DSN on the server or constructing a DSN-less connection string. Choosing the former calls up a dialog box listing all DSNs currently defined for the specified server. If no DSN is defined, clicking the Define button connects you to the server's ODBC control panel so that you can define one without leaving Dreamweaver. Choosing the latter opens a dialog box where you can type in your connection string. (To learn more about constructing connection strings, check a good ASP.NET reference.)

After you've made the connection, the Databases panel shows a database icon with your connection name. Expanding this icon lets you see the structure of the database you're connected to, as shown in Figure 21.18. If you check out the Site panel, you'll see a new Connections folder containing one file named after your connection, as shown in Figure 21.19.

Figure 21.18. The Databases panel showing a connected database.

Figure 21.19. The Connections script as it appears in the Site panel.

Exercise 21.1. Creating a Dreamweaver Site

In this exercise, you define the Antiques Barn ColdFusion, PHP, or ASP.NET site in Dreamweaver. Make sure you've set up your workstation for online or offline development before going through the exercise.

The pages and images necessary for the exercise can be found in the chapter_21 folder of the book's website at www.peachpit.com, in folders specific to each application server and language. Download the appropriate folder to your hard drive. The antiques database files are in the chapter_21/databases folder, in Access and MySQL format. For Access development, copy the antiques.mdb file anywhere on your hard drive. For MySQL development, copy the antiques folder to the mysql/data directory on your computer or your remote server.

Start by defining the site. In Dreamweaver, select Site > Manage Sites, and click the New button. In the Site Definition dialog box that appears, click the Advanced tab to bring it to the front.
Go to the Local Info category. Local site information for a dynamic site is no different from any other site information. Name your site Antiques Barn . From the local root folder, browse to the folder you copied from the website ( antiques_php, antiques_cf , and so on).
Now go to the Testing Server category. From the Server Model drop-down menu, choose whatever server technology and language you want to use. If you choose ColdFusion, make sure the following drop-down menu is set to Dreamweaver MX 2004 Pages Only. (Dreamweaver must write different code to communicate with different versions of the ColdFusion Server.)
For the testing server connection, you enter different information here depending on how you set up your workstation (as discussed earlier in this chapter):
- If you're set up for offline development, choose Local/Network as the access method, and browse to your HTTP server's root directory. (See the section "Serving Pages Locally" or "Using ColdFusion as Your HTTP Server" if you've forgotten where your root directory is.) Create a new folder in this root directory called antiquesbarn , and select it as the folder for your testing server files (see Figure 21.20).
  
  Figure 21.20. The testing server setup for the Antiques Barn site, set up for offline development.
- If you're set up for online development, choose whatever access method and details you normally use to connect to the remote server. Create a folder on your remote server called antiquesbarn , and use it as the folder for your testing server files (see Figure 21.21).
  
  Figure 21.21. The testing server for setup the Antiques Barn site, set up for online development.
Still in the Testing Server category, examine the URL Prefix field. Dreamweaver should have filled in this information based on your previous entries, but it might be incorrect. If you're working offline, the address should be http://localhost/antiquesbarn or (for ColdFusion development) http://localhost:8500/antiquesbarn . If you're working online, the address includes the host computer's actual IP address. This is the URL information Dreamweaver will use every time you preview your pages in the browser. It must be correct!
When you think all the site information is correct, click OK to close the dialog box. It's time to test things.
From your local root folder, open index.html and Preview in Browser (F12). You're probably in for a nasty surprise. Either the page displays with broken images, or you get a File Not Found error. Why is this happening?

When you're working on a dynamic site, Dreamweaver uses the remote folder to generate its previews. (As explained earlier, this has to happen so that the page can be served rather than merely viewed .) Currently, your remote folder contains nothing! You must get in the habit of uploading files to the remote folder before previewing.
In the Site panel, select all the files in your site, and click the Put button to upload them all. Then try previewing again. If you entered the correct information in the Site Definition dialog box, you will be able to preview the page (see Figure 21.22). The browser's Address field shows the http:// address of the home page, not its file location on your computer. (If you can't preview, keep double-checking those site settings until you can preview. You cannot keep working in Dreamweaver until you get this part right.)

Figure 21.22. Previewing in the browser in a dynamic Dreamweaver site.

Exercise 21.2. Defining a Database Connection

Building on the previous exercise, in this exercise you'll create the connection script that will allow your pages to communicate with the antiques database.

Because Dreamweaver has to know what kind of connection to create, you must have a dynamic document open before you can create the connection. From your local site, open catalog.cfm, catalog.php , or catalog.aspx .
From the Application panel group, open the Databases panel. What happens next depends on what server technology you're using:

If you're working with ColdFusion, you don't have to explicitly make a connection. The Databases panel lists all the databases that the ColdFusion Server is aware of. You just need to make sure that the antiques database is here. You can also expand the antiques entry to explore the database structure, as shown in Figure 21.23.

Figure 21.23. The Databases panel for a ColdFusion site, showing the antiques database and its structure.

If you're working with PHP, click the + button at the top of the panel, and choose MySQL Connection. The connection dialog box opens. Set the following:
- Name antiquesConn
- Host (offline) localhost
  
  Host (online) The IP address of the remote server
- Username and password This information must belong to a registered user in the MySQL server's administrative database. It's the same username you need when you connect to MySQL using one of the GUIs, such as MySQL Control Center or CocoaMySQL. (For Windows users, if you're developing offline, you can sometimes leave these fields blank.)
- Database If the host, username, and password are correct, you should be able to choose from a list of available MySQL databases. Choose antiques. If Dreamweaver can't connect to the MySQL server, you won't be able to continue. Double-check your information, and make sure that you are connected to a remote server (online development) or that the MySQL server is running on your computer (offline development). Figure 21.24 shows this happening.
  
  Figure 21.24. Defining a database connection for the Antiques Barn (PHP).
As soon as you can choose your database, click OK to close the dialog box. The Databases panel now shows the antiquesConn connection. Expanding it lets you explore the structure of the antiques database.

If you're working with ASP.NET, click the + button at the top of the panel and choose DSN. The DSN Connection dialog box opens. Set the following:
- Name antiquesConn
- DSN If your server is on your working computer, the radio buttons at the bottom of the dialog box should be set to Using Local DSN, and there will be a pop-up list of drivers. Choose AntiquesBarn from the list. (Clicking the Define button opens the ODBC control panel.) If your server is on another computer, the radio buttons should be set to Using DSN on Testing Server, and the dialog box includes a DSN button. Click that button to get a list of DSNs, and choose AntiquesBarn from that list.
As soon as you can choose your database, click OK to close the dialog box. The Databases panel now shows the antiquesConn connection. Expanding it lets you explore the structure of the antiques database.
If you're using ColdFusion, you can skip this step. If you're using PHP or ASP.NET, go to the Site panel and examine your local root folder. You'll see a new connections folder. Inside that folder is the antiquesConn.php or antiquesConn.aspx file. That file contains your connection script.

Check out your open catalog document in Code view. At the very top of the code is a line of code connecting this page to the connection script. From now on, every time you create a dynamic page within this site that requires connecting to the database, Dreamweaver automatically inserts this code into the page to link it to the connection script. If you ever need to change your connection information, only the connection script file needs updating.