Recently, while doing some consulting, I observed a programmer hand-coding a query and database fields onto a Web page. Here is the scary part: they were using Dreamweaver MX 2004.
The following week I delivered a seminar and spoke about dynamic technology. I was amazed how many did not know about the built-in features of Dreamweaver for creating these pages.
As editor-in-chief of this journal, I felt it was time to rectify this problem fast.
In this article I will demonstrate how simple it is to create dynamic Web pages using some of the built-in features of Dreamweaver MX 2004. For the purposes of this article, we will use ColdFusion MX as the server model. However, within Dreamweaver the other server models will present only minor differences.
Preparing the Site
If you are going to create dynamic Web pages, you need a server. Dreamweaver supports five server models. Table 1 shows which dynamic model uses which server.
As I stated from the outset, we will use ColdFusion here.
Before we begin, you will want to register the database with the server. ColdFusion makes this job very easy. All you need to do is start the ColdFusion administrator and select the Data Sources category under the Data and Services category (see Figure 1).
You need to give the database an identifying connection name (it can be a name of your choosing) and select the correct driver for the type of database you are working with. You will see that ColdFusion has drivers for most of the major database engines. (Note: ColdFusion uses JDBC drivers.) For the purposes of this article, we will use a simple Access database that I will call myDatabase.
Once you have performed those steps, click Add. You will be taken to a screen where you can either type or browse to the URL of the database files, enter the username and password (if necessary), and add any other information necessary to establish the connection with the database engine (see Figure 2).
After you click Submit, you will be returned to the original screen with the name of the connection in the Connected Data Sources grid. You should see the word OK in the last column to indicate that the connection was successful. If you do not see OK, click on the Verify All Connections button. If OK still does not appear, check the URL of your connection.
That is all that is needed to connect the database to the server. From here on in, Dreamweaver will be doing the work. (Note: Other database/server combinations will require different techniques. Unfortunately, a full discussion is beyond the scope of this article.) Fire up Dreamweaver and use the Manage Sites menu option to define the dynamic site.
Begin by giving the site an identification name. This name can be of your choosing and has no bearing whatsoever on the name or URL of the finished site. It is used only for identification purposes.
On the next screen you should identify the server model you will be using. Again, for the purpose of this article, I am using ColdFusion.
The next screen is a critical one. Here you have to be careful where you place your files. Each of the server technologies has a root directory that the server can recognize. For example, ColdFusion has a directory called wwwroot. The directory structure of your site should be installed there or the files may not be recognized by the server. (Note: If you use IIS, the root folder is located under Inetpub/wwwroot.) Dreamweaver should recognize the server's root directory and suggest the name and location of the directory structure for your site as shown in Figure 3.
For this article, I assume that we are not going to use a remote server and will be testing the files locally. When you get to the next screen, you will see something like http://localhost/mysite.
Most ColdFusion server installations run on port 8500. You may need to change the configuration to http://localhost:8500/mysite.
When you test the URL Dreamweaver should return a message saying that the URL prefix is correct. From here on in, just accept the defaults and complete the site definition.
In order for the connection with the database to activate, you must open a dynamic page for the server model. In our case, this will be a ColdFusion page (File > New > Dynamic Page > ColdFusion). Once the page is created, it is a good idea to save it with the appropriate file extension (.cfm for ColdFusion).
To access the database, you will need to go to the Database panel, which is part of the Application Panel Group. You might need to enter the password for the server. Once the connection is made, your Database Panel should show the full structure of the database as shown in Figure 4.
You can right-click on one of the tables and view the data inside the table. However, you cannot edit the data in this way.
While you can see the structure, you cannot use the database directly in a Web page. Instead, you must filter the data through a recordset. Essentially, this is a SQL (Structured Query Language) request for the data needed. Thanks to Dreamweaver, an extensive knowledge of SQL is not necessary; however, it is helpful.
In the Application Panel Group, click on the Bindings Panel. Click the + button and select Recordset (Query). Here is where you will set up the request. Dreamweaver will write the SQL code.
Begin by giving the recordset a name of your choosing. Then, from the drop-down list, select the database connection you want to use (the one we set up earlier in ColdFusion). If necessary, enter the user name and password for the database.
Once that is completed, you should see a list of tables in your database. Select the table you want, the columns you want to use from that table, how you want the data sorted, and any search criteria you might have (an extensive discussion of SQL code is beyond the scope of this article). It should look something like Figure 5. Note that you can select the columns you want to use by either selecting them randomly using Ctrl + click, or in groups using Shift + click. For this example, I just selected three columns.
As an interesting note, you can click on the Advanced... button and see the SQL code that will be used. If you know SQL, you can also make any adjustments you may want to make. Figure 6 shows an example of this screen. Finally, it is a good idea to test the recordset by using the Test button on the right side of the dialog box.
As an interesting aside, you can see the query code by going to Code View. It should be located near the top of the page. It will look something this:
<cfquery name="testSet" datasource="myDatabase">
SELECT CustomerID, CompanyName, ContactName
FROM Customers
ORDER BY CustomerID ASC
</cfquery>
Assuming all is working well, you should now see the recordset in the Bindings panel. You are now ready to insert the fields into the page. I am going to show the examples on a blank page, but in reality, you would use a page that had all of the graphics in place.
At this point, there are two ways you can approach this. By far, the Dynamic Table feature of Dreamweaver is the easiest. In Design View, select Insert > Application Objects > Dynamic Data > Dynamic Table. A dialog box will open asking you how many records you want displayed on a page. In most cases you will want to limit the number of records to 10 or so. You do not want to throw too much information at the site's visitor at once. We will discuss how to insert navigation shortly. After you select OK, your page should look something like Figure 7.
Your page is ready to go. We can test it by saving the page and either previewing it in the browser or by selecting the Live Preview feature just above the document window (see Figure 8). If you wanted to, you could easily change the heading text of the table to whatever text you need.
In the example shown in Figure 8, we are just displaying 10 records at a time. A navigation bar needs to be inserted that will allow the visitor to move forward and backward through the data. Dreamweaver can easily accomplish this.
Select the entire table that was just created. Once selected, select Insert > Application Objects > recordset Paging > Recordset Navigation Bar. You will see a dialog box that allows you to select the recordset you are connecting it with if you are using multiple recordsets. Since our example is only using a single Recordset, I have just clicked OK. Figure 9 shows the inserted Navigation Bar.
When you test the bar in the browser, notice that First - Previous - Next - Last turns on and off as needed. Dreamweaver accomplishes this by writing some tricky JavaScript code on the page.
Essentially, the job is done. You now have a dynamic page ready to roll. However, as I stated earlier, there is another way of doing it. In this second case, you may not want all the fields located in one place using a table format. This is easily accomplished by going to the Bindings Panel and dragging the recordset's fields to the position on the page where you want them. Dreamweaver handles all of the code in the background.
If, for some reason, you wanted to change the number of records shown per page, go to the Server Behaviors Panel located in the Application Panel Group (see Figure 10). If you double click on Repeat Region you will be returned to the dialog box you saw earlier for the navigation bar. Here you can change the number of records to be displayed for each page.
As you can see, Dreamweaver makes this whole process fairly simple and direct. However, it does not end there. We can take a brief view of a few other features to help facilitate your dynamic Web pages.
If you go to Insert > Application Objects, you will see that Dreamweaver has behaviors capable of building dynamic pages to update, delete, and insert records. In the background, this is essentially being done with the SQL code. However, the corresponding wizards can assist you in doing even more.
One special behavior is the Master > Detail page. In Web parlance, we sometimes call this drilling down. Here the user can click on the record that they want to see the details on. Each record has a corresponding hyperlink that takes them to a page that will provide greater detail.
As an example, let's try a variation of the above page. In this case I set up the recordset with all of the fields. It is not necessary to drag any of the fields onto the page at this time. We are going to let Dreamweaver do all of the work.
Select Insert > Application Objects > Master Detail Page Set. This is shown, filled out, in Figure 11.
There are a few things you need to set up here. First of all, on the Master Page, you will just want a couple of fields for identification purposes. In Figure 11 I just selected Customer ID and Company Name. I used the - button to eliminate the other fields. In the Link to Detail From/Pass Unique Keys fields we can establish the connecting fields if we are using multiple database tables to obtain the information. In this case, since we are using the same table, the two fields are the same.
You must then establish the name of the Detail page. If it has not been created yet, Dreamweaver will create it for you. For this example, I called it test3.
The bottom part of the dialog box allows us to select the fields for the Detail page. In this particular example, I am just going to leave all of the fields selected.
Once the dialog box is all set up, press OK and Dreamweaver will do all of the work for you. As you can see, Dreamweaver set up the Dynamic Table, Repeating Region, and Recordset Navigation Bar in one shot. If I run the page, it will look something like Figure 12.
Notice that the Key field has a hyperlink to take us to the Detail page. As a small extra, Dreamweaver even shows you the numbering of the records on the page out of how many records in the recordset. If you then click on the hyperlink, you will be taken to the Detail page shown in Figure 13.
If you take a peek behind the scenes, you will see that Dreamweaver did a lot of coding for you.
Subscribe to Adobe Flex Journal Email News Alerts
Subscribe via RSS
