Dreamweaver MX 2004 phần 7 pdf

4306c19.qxd 3/22/04 11:44 PM Page 403 creating dynamic pages ■ 403 Implementing a Web Server A web server allows you to preview your dynamic web pages “live” from a browser. The web server is important when you have dynamic content because it performs the process of dynamically building your pages. If you aren’t creating dynamic pages, then you can simply access the files locally without using a web server. Technically, this process is con- ducted through an application server, which dynamically generates web pages from code on the server. For details on setting up and using a web server, see Chapter 16, “Building Web Applica- tions,” and Chapter 30, “Going Live or Delivering the Site.” Now let’s look at development models (the programming languages and application servers that let you craft dynamic pages), the differences between them, and what might be the best environment for you to use. Selecting a Developmental Model Dreamweaver MX 2004 produces your dynamically updated web pages by placing snip- pets of code to perform data-related functions. Dreamweaver does its best to hide the details of the code from you so that you don’t have to be a programmer to use it. It does, however, support several types of code, so you must pick which type you will use. Your choice of development model will also affect how you connect to the database, which we’ll talk more about later in this chapter. ASP, ASP.NET, JSP, PHP, and ColdFusion are devel- opment models. Each uses a different programming language and application server: Active Server Pages.NET (ASP.NET) ASP.NET is a new development model from Microsoft. It works much the same as the ASP model but it supports the Microsoft .NET framework. In order to use ASP.NET you must download and install the ASP.NET framework, which is currently available in two versions from the Microsoft website: version 1.0 ( www.asp.net/ download.aspx) and version 1.1 (http://msdn.microsoft.com/library/default.asp?url=/ downloads/list/netdevframework.asp). ASP.NET includes support for Visual Basic and C#. C# is a full-featured object-oriented programming language from Microsoft. Active Server Pages (ASP) Active Server Pages (ASP) was developed by Microsoft. ASP functions can be called from either JavaScript or VBScript, which are two languages used to call code. ASP code is actually executed by the application server, which in the case of ASP is usually IIS. ASP is being phased out in favor of the newer technology, ASP.NET. Java Server Pages (JSP) Java Server Pages (JSP) are generated by running Java scriplets (which are written in Java, which was developed by Sun). If you choose to have Dreamweaver MX 2004 insert JSP snippets of code, you’ll need to have an application 4306c19.qxd 3/22/04 11:44 PM Page 404 404 ■ chapter 19: Database Connectivity server that is able to execute this code. You may still use IIS, but you’ll also need a separate application server. Two popular choices are WebSphere (by IBM) and Jserv, an Apache add-on. In addition, you’ll need the Java Development Kit (JDK) from Sun. It is a free download, available from http://java.sun.com/products/. PHP Dreamweaver MX 2004 supports the PHP dynamic page development model. You must have a PHP application server installed before you can process PHP pages. The PHP application server can be downloaded from the PHP site ( www.php.net/). There is a sepa- rate file to download depending on whether you use IIS or Apache. Although PHP can actually work with many different databases, Dreamweaver only supports a MySQL data- base connection for PHP. ColdFusion ColdFusion is a development system by Macromedia. The language used by ColdFusion is called ColdFusion Markup Language (CFML). As you do for ASP, for Cold- Fusion you need a web server—IIS, for example. You’ll also need Macromedia’s ColdFusion Application Server. Once you’ve selected the development model, you need to specify it, because Dream- weaver inserts code based on the development model type. For example, if you’re using JSP, Dreamweaver inserts Java code. The development model is defined as part of the site definition. To select a model, select Site ➔ Manage Sites from the main application window and then click the New button. You can modify the name and location that Dreamweaver MX 2004 uses to store your site. On the Testing Server tab the Server Model drop-down list has seven development model choices: ASP JavaScript, ASP VB Script, ASP.NET C#, ASP.NET VB, ColdFusion, JSP, and PHP MySQL. Once you’ve picked a development model, you can also specify the remote folder where Dreamweaver MX 2004 uploads your code. Your code has to reside in the same directory that the web server/application server publishes from in order for it to be viewed. This is generally not the same directory that your project resides in. For example, if you are using IIS, the remote folder could be c:\Inetpub\wwwroot\test. Databases Databases provide a way to store information that changes between visits to a web page. There are several major vendors of databases, including Microsoft and Oracle. Microsoft offers two database choices: Access and SQL Server 7 or 2000. Access is good for setting up a small, simple database when you’re first learning about how a database works and are not concerned with performance. SQL Server 7 and 2000 are more compli- cated to set up and run, but they offer more database procedures than Access and they have the power to handle many simultaneous web users. 4306c19.qxd 3/22/04 11:44 PM Page 405 creating dynamic pages ■ 405 PICKING THE RIGHT DATABASE If you are going to create a large site, don’t bother even booting up Microsoft Access; go full- steam ahead to a database like SQL Server, or Oracle. If these choices seem too enterprise- wide and too big for your needs, you could use Access with a SQL database engine called MSDE. The MSDE database engine processes SQL commands. However, enterprise databases like SQL Server give you programming and business logic within the database (often referred to as stored procedures). Picking the right database is impor- tant because you don’t want a lot of rework if you make significant changes to your pages. In addition, Oracle offers their 9i and 10g databases, which support many users as well as complex logic that can be built into the database. SQL Server and Oracle9i fight for major website dominance, but currently Oracle is the industry leader for busy websites. MySQL is another database option that you should consider. MySQL is available for free from www.mysql.com/downloads/index.html. It’s available for free because it’s open source, and it is supported on the Mac OS X, Windows, and Linux. MySQL supports ODBC con- nectivity. ODBC is useful because Dreamweaver MX 2004 also supports ODBC. Oracle is a more robust system, but also more complicated and pricey compared to free MySQL. In addition Oracle requires more resources, including CPU and memory. If you’re just starting out, you probably want to use Access or MySQL. Drivers Dreamweaver MX 2004 builds pages that access the database through one of the three standard protocols described here. The drivers tell Dreamweaver MX 2004 how to “talk” to each type of database. You can think of them as translators. ODBC The most common and flexible way to build pages is by using Open Database Con- nectivity (ODBC). ODBC connections are managed under the Windows ODBC Connec- tion Administration screen. Database vendors provide ODBC drivers with their database to allow easy access by applications. Dreamweaver MX 2004 supports any database that provides an ODBC driver. OLE DB ASP and ASP.NET applications can talk to databases through a standard called Object Linking and Embedding database (OLE DB) or through ODBC. OLE DB connec- tions are generally faster than ODBC and are available for most databases. OLE DB can be used with Windows NT, 2000, and XP. JDBC JSP applications talk to databases natively through Java Database Connectivity (JDBC). If your database supports JDBC directly, this is the fastest way to go. Oracle and 4306c19.qxd 3/22/04 11:44 PM Page 406 406 ■ chapter 19: Database Connectivity IBM’s DB2 provide JDBC drivers. For compatibility, Sun also provides a bridge driver that translates JDBC into ODBC, thereby allowing you to use any ODBC-supported database. See http://industry.java.sun.com/products/jdbc/drivers for more information on JDBC drivers available from Sun. ColdFusion accesses the database using the same methods as JSP. PHP uses a MySQL-specific database interface, and a MySQL driver. Using a Macintosh If you’re using a Macintosh, you will use a Java Database Connectivity (JDBC) driver to connect to an Access database, or any Open Database Connectivity (ODBC) data source, located on a Windows server. If you don’t have access to a database with a JDBC driver, you can search a list of JDBC drivers and vendors on the Sun Microsystems website at http://industry.java.sun.com/products/jdbc/drivers. The more-popular JDBC database drivers are those from Oracle and Microsoft. The Application Panel Group The Application Panel Group includes the Databases, Bindings, Server Behaviors, and Components panels. In this section, we’ll review the first three panels in this group— the Components panel is covered in Chapter 20, “Working with ColdFusion,” and in the Web Services sections of Chapter 25, “Emerging Technologies.” The Databases Panel When you begin building a data-driven page, you need to define at least one data source. The data source is the description of the database that you will use to query and store information. The data source definition includes all of the information that Dreamweaver needs to access the database and a name for the connection. Required information includes the type of connection, such as ODBC, OLE DB, or JDBC; the database name; and the login. Any data source that you define is added to your list of data sources in the Databases panel, and is available to you from the Bindings panel and the Server Behaviors panel. To define a data source, follow these steps: 1. Open the Databases panel; if it isn’t already open on your screen, select Databases from the Window menu. 2. From the plus (+) sign menu, select Data Source Name (DSN). This opens a window in which you can select a DSN. 4306c19.qxd 3/22/04 11:44 PM Page 407 the application panel group ■ 407 3. Click the radio button to use a local DSN, which is defined on your local computer instead of on a remote server. If you’re using a Mac, the radio button should be clicked for using DSN on testing server. 4. Select a DSN to use from the DSN drop-down list. Dreamweaver uses the standard naming convention where connection names start with “con” or “conn.” For exam- ple, conTrio could be a name of a DSN. 5. DSN points to ODBC database connections. If you want to create your own DSN, click the Define button on the Data Source Name window. This button is a shortcut to the Windows Control Panel’s ODBC Data Sources applet, which defines DSNs. However, you don’t have to define one since Macromedia provides a sample Micro- soft Access database called Trio, as designated in the Data Source Name field of the ODBC Microsoft Access Setup window (see Figure 19.1). 6. After you define your data source, it is a good idea to test your database connection definition by pressing the Test button. For details on creating your own DSN, see Chapter 26, “Controlling Access to the Site.” If you’ve chosen to develop in JSP, you’ll have more choices when you create a new database. These choices will include Oracle, MySQL, IBM DB2, SQL Server, and Sun’s JDBC-to-ODBC driver. Each of these drivers requires you to enter some information in the URL field. The required information needs to be enclosed in brackets. For example, Figure 19.1 the Sun ODBC driver requires that the ODBC DSN be entered in the URL field where it ODBC Microsoft says “odbc dsn”—for the Trio DSN, you would type jdbc:odbc:[Trio] for the actual entry. Access Setup window The Bindings and Server Behavior Panels In order for you to manage the dynamic objects on your web pages, you’ll need to use the Bindings and Server Behaviors panels. The Bindings and Server Behaviors panels are used to define data driven objects for your web page. The current server model is displayed in these panels. For example, “ASP-VBScript” represents an ASP server model using VBScript to call the ASP functions. The plus (+) and minus (–) buttons of each tab are used to add and remove data objects and bindings. 4306c19.qxd 3/22/04 11:44 PM Page 408 408 ■ chapter 19: Database Connectivity Figure 19.2 The Bindings panel Data binding allows you to define the sources of data for your dynamic content; server behaviors allow you to move through and manipulate that data. The Binding and Server Behavior panels are the reference for the dynamic data that is being used on the current page. You’ll need to set up a query on the Bindings panel before you can add server behav- iors to your page. Figure 19.2 displays a Recordset in the Bindings panel. The Server Behaviors panel lists existing server behav- iors that are present on the current page that you are edit- ing. To remove an existing server behavior from a page, select the server behavior and press the minus (–) button. You’ll be using the Server Behaviors panel to insert dynamic content later in this chapter. Defining a Recordset Before you can work with the data from a table that is made available through a Data Source, you must define a recordset. Databases group collections of information in tables. A recordset is a set of data resulting from a query of one or more database tables, and it specifies which table and columns will be selected when you retrieve data. To define a recordset, select RecordSet (Query) from the plus (+) sign menu on the Bindings panel. Your choices for columns include All or selecting which ones you want to include. The final parameter on the RecordSet definition screen is the Sort parameter. This parameter allows you to select the order in which records are returned. The Result columns and Ascending or Descending can be selected. Defining a Database Filter Once you have selected the table, you can further limit the records that are returned by defining a database filter. Database filters allow you to specify which records of a recordset you are interested in—otherwise you get everything in the table. The filter is the same as the WHERE clause used in the Structured Query Language (SQL). By using this filter/clause, you limit the rows returned from a database query. Dreamweaver gives you the choice of using their GUI to select the WHERE clause or spec- ifying the SQL WHERE clause yourself. We’ll talk more about using SQL to do an advanced query in “Exploring SQL,” later on in this chapter. The GUI allows you to select not only which column to filter by, but also the type of comparison, and where the comparison value comes from. Possible sources include a URL parameter, a form variable, or an entered variable. 4306c19.qxd 3/22/04 11:44 PM Page 409 adding dynamic content to your page ■ 409 Live Data View You can preview and edit your dynamic pages by using Live Data view. To open Live Data view, click the Live Data view icon on the Document toolbar or choose View ➔ Live Data. You’ll see a preview of dynamic content in the Design View window. If the application server has any problems returning a page, a warning box will display with suggested sources of errors and possible solutions. Should you encounter problems using the Live Data feature, a good site to check for troubleshooting information is www .macromedia.com/support/ultradev/ts/documents/common_server_errors.htm. Even though this article was written for Dreamweaver UltraDev, it’s still applicable to Dreamweaver MX 2004 and application server problems. These tips also apply to problems that you might encounter while you are viewing the pages directly from your web server. For additional information on using Live Data, see Chapter 21, “Working with ASP.” Next, we’ll introduce the concept of adding dynamic content to your page, including radio buttons, images, lists, and text. Adding Dynamic Content to Your Page Once you’ve defined a database connection or another source of dynamic data such as a session variable, you may want to include some dynamic content on your page. If you are in Live Data view, you will see the dynamic text as soon as you enter it. Otherwise, you’ll see a placeholder that describes the data source of the text. In this section we discuss the various types of dynamic content that can be added to your page. These include dynamic text, lists or menus, radio buttons, and images. All of these items can be customized by database information. Inserting Dynamic Text The simplest dynamic object to work with is dynamic text. To insert dynamic text into a page, do the following: 1. Select the Bindings tab from the Application panel group. You can also get to this window by selecting Bindings from the Window menu. 2. Select the data source from the list of available sources. In the case of a recordset, select the column of the recordset to include. 3. Select the text to replace or the point to insert your dynamic text from the Design view of your page. 4. Click the Insert button or simply drag the data source from the Bindings panel to the insertion point. 4306c19.qxd 3/22/04 11:44 PM Page 410 410 ■ chapter 19: Database Connectivity Inserting Dynamic List/Menus What if you want to dynamically change the contents of a list or menu in your page? No problem; just follow these steps. 1. Insert a list/menu item into your page. 2. From the Server Behaviors panel, click the plus (+) sign. 3. Select Dynamic Form Elements ➔ Dynamic List/Menu. 4. A dialog appears in which you must select the recordset as well as the fields that will populate both labels and values (see Figure 19.3). 5. Make your selections and click OK. Inserting Dynamic Radio Buttons What if you want to dynamically set whether a check box is checked based on a data source? An example of this is if you need to have a radio button on your page indicate which depart- ment an employee is part of. The radio button’s value defaults to the value that matches the database column. By using the default database value, the user won’t have to change the selection. To do so, you’ll need to specify the data source and the value you want to see in it for the check box to be checked. Do the following to set the initial value: 1. Insert a radio button item into your page. 2. From the Server Behaviors panel, click the plus (+) sign. 3. Select Dynamic Form Elements ➔ Dynamic Radio Buttons. A dialog box appears from which you can select the recordset as well as the fields that will populate both labels and values (as shown in Figure 19.4). 4. Make your selections and click OK. Figure 19.3 Figure 19.4 Select a recordset from the drop-down list. Dynamic Radio Buttons dialog box 4306c19.qxd 3/22/04 11:44 PM Page 411 adding dynamic content to your page ■ 411 Inserting Dynamic Images Oracle allows you to store binary images to display on your web page, but Dreamweaver doesn’t allow for this functionality, which means that you must keep the images on the web server and use your database to figure out which image to use. Once you have your images on the web server, you can set up Dreamweaver to dynamically generate the image source path for the image you want. First you’ll need to store the filenames of the images in a table before they are viewable by the end user. You can then add the image tag to your site by doing the following: 1. Add the image by selecting Image from the Insert menu. 2. Click the Data Source check box. 3. Select the column that contains the image location information (as shown in Figure 19.5). An example of what might be in your Image Source database column is Sales.jpg if the department is Sales and Marketing.jpg if the department is currently Marketing. Both Sales.jpg and Marketing.jpg must be in the same directory, and that directory must be specified in the static part of the image path. You can also simply store the path to the image in the Image Source column rather than just the filename. Now that we’ve added dynamic content, you’re probably wondering how to get rid of it if you decide to revamp your site. You can either delete content, or change it. Figure 19.5 Select Image Source dialog box with data sources option [...]... Applications,” and Chapter 19, “Database Connectivity.” JRun 4 is included with ColdFusion MX 6.1 For more details on using JRun and JSP, see Chapter 23, “Working with JSP.” ColdFusion MX includes two major components: CFML (ColdFusion Markup Lan­ guage) and the ColdFusion MX application server software Dreamweaver MX 2004 pro­ vides a development tool to produce ColdFusion code, and includes: • Built-in... a ColdFusion Studio user’s perspec­ tive, is the Visual Query Builder Not to fear, though Dreamweaver MX 2004 has a pow­ erful solution on the Bindings panel Bindings Panel This panel allows the developer to manage all the queries and variables for a template from a single interface What’s more, Dreamweaver MX 2004 allows the cacheing of queries for testing during development time ■ 431 432 ■ chapter... into the editing environment of Dreamweaver MX 2004 Tag Editors One of the truly powerful features of ColdFusion is the Tag editor Merely by right-clicking a tag the user can launch a dialog box that will assist with the completion of the tag’s attributes, similar to the Tag Editor in Dreamweaver Code Hints Another feature that ColdFusion users will find familiar in Dreamweaver is Code Hints This mechanism... MasterDetail Page Set 428 ■ chapter 19: Database Connectivity Dynamic Sites with ColdFusion Dreamweaver MX 2004 makes creating data-driven dynamic pages easy A variety of data­ bases and development models are supported for ease of use and personal preference Now that Macromedia also owns the ColdFusion MX server product, Dreamweaver includes support specifically designed for that server model The next chapter... Figure 19.10 Go To Detail Page dialog box 424 ■ chapter 19: Database Connectivity Troubleshooting Dreamweaver MX 2004 is certainly very powerful and flexible when it comes to building the code to make your dynamic web pages run Unfortunately, you might encounter problems when you try to execute the pages that Dreamweaver has built We’ll discuss some of the strategies for minimizing the pain this may cause... defines which field in the form contains the data for each database column when inserting the data 3 For each field in the form, select the data type from the Dreamweaver MX 2004 dropdown list 4 Click OK to add the Server Behavior to your page Dreamweaver also provides an Application Object called Record Insertion Form Wiz­ ard that further automates the process of building pages to insert records The... designed for that server model The next chapter helps you work with ColdFusion-based sites As your expertise with the development model and database grows, Dreamweaver MX 2004 allows you to manipulate the code directly, if you so desire You can also use Dreamweaver to customize your own application objects and extensions Good luck creating your web interactions with a database that you are com­ fortable... that Dreamweaver understands—using tags ColdFusion MX 6.1 brings further performance and third-party integration enhance­ ments This chapter includes ColdFusion basics as well as highlights of the features meant to entice ColdFusion developers into using Dreamweaver The following topics will be discussed in this chapter: ■ Introducing ColdFusion ■ Exploring the features of ColdFusion ■ Setting up a Dreamweaver. .. tells Dreamweaver MX to create the link for you that indicates the deletion 4 Set Detail Page to delete.asp by entering delete.asp 5 Select Recordset1 from the Recordset drop-down list Then select Code from the Col­ umn drop-down list This tells Dreamweaver where to get all of the details for the record you are about to delete 6 From the Site window, double-click delete.asp to open the delete page Dreamweaver. .. set of browser-based administration tools The Windows version of Studio MX 2004 includes the developer edition of ColdFusion MX 6.1 It can be used locally and/or with one remote hosting provider Important Features for ColdFusion Developers Because working with ColdFusion templates is not unlike working with other tag-based files, Dreamweaver excels in its tool applicability The sheer number of built-in . or MySQL. Drivers Dreamweaver MX 2004 builds pages that access the database through one of the three standard protocols described here. The drivers tell Dreamweaver MX 2004 how to “talk” to. Selecting a Developmental Model Dreamweaver MX 2004 produces your dynamically updated web pages by placing snip- pets of code to perform data-related functions. Dreamweaver does its best to hide. .macromedia.com/support/ultradev/ts/documents/common_server_errors.htm. Even though this article was written for Dreamweaver UltraDev, it’s still applicable to Dreamweaver MX 2004 and application server problems. These tips also apply to problems