dreamweaver cs5 all in one for dummies phần 9 potx

682 Before you can define a recordset, you need to establish a database connection in Dreamweaver. See Book VII for details on setting up a database connection. To define a simple recordset in Dreamweaver, follow these steps: 1. Create a new dynamic page or open an existing page. 2. In the Bindings panel, click the plus (+) icon, and then select Recordset (Query) in the list that appears. The Recordset dialog box appears. Depending on your dynamic page type, the dialog box may look slightly different. If you want to write your own SQL queries for a recordset, use the Advanced Recordset dialog box. You can display this version of the dialog box by clicking the Advanced button in the Recordset dialog box. 3. In the Name field, enter a name for your recordset. Remember to use only letters, numbers, and underscores for names to be sure that the name is compatible with your dynamic page type. In the example in Figure 1-9, we accepted the default name Recordset1. Figure 1-9: The Recordset dialog box is set to compare the database column value against the URL parameter. 4. Select a database connection in the Connection drop-down list. In the example, we selected the mysql_connection connection. 5. Select the database table in the Table drop-down list. The database table serves as a foundation for retrieving data for a data- base query. The Columns field updates to display the columns in your selected table. By default, all the columns are included in the recordset. In the example shown in Figure 1-9, we chose the footprints table. Using a Database as Your Data Source 47_610770-bk08ch01.indd 68247_610770-bk08ch01.indd 682 5/6/10 1:19 PM5/6/10 1:19 PM Book VIII Chapter 1 Preparing Dynamic Content Sources 683 6. If you want to specify which columns to include, select the Selected option and then select the desired columns. If you select the Selected option, you can select multiple columns that you want to include in the Columns listing by Ctrl+clicking (Windows) or Ô+clicking (Mac OS X) them. 7. (Optional) If you want to filter the records, do the following: • In the first Filter drop-down list: Select a table column to filter. You can compare the database field against one of the previously defined bindings to limit the results of the query. • In the second list: Select a conditional expression (such as =, <, or >) with which to compare the data in the column that you select in the first drop-down list. • In the third list: Select the data source for comparison. Your choices are any previously bound values. • In the fourth list: Enter a value to compare to the database column. For example, Figure 1-9 shows the Recordset dialog box comparing a column value (from) and a URL parameter. 8. If you want to sort the records, select the table column that you want to sort by in the first Sort drop-down list. In the second drop-down list, specify whether you want the records sorted in ascending or descend- ing order. 9. If your query uses a filter, enter a value to use in the filter in the Test Value dialog box that appears. Click OK. The value you enter should be typical of what you expect your query to encounter when it’s executed as part of the Web page. 10. Click the Test button to verify that the query works correctly. Dreamweaver executes your query and displays the rows in the Test SQL Statement window. If your query uses a filter, Dreamweaver displays the Test Value dialog box and prompts you to enter a value to use in the filter before execut- ing the Test query. Enter a filter value typical of what you expect your query to encounter when it’s executed as part of the Web page, and then click OK. 11. If the test returns the records that you expect, click OK. The recordset now appears in the Bindings panel, as shown in Figure 1-10. Using a Database as Your Data Source 47_610770-bk08ch01.indd 68347_610770-bk08ch01.indd 683 5/6/10 1:19 PM5/6/10 1:19 PM 684 Using a Database as Your Data Source Figure 1-10: The Bindings panel reflects the new recordset. 47_610770-bk08ch01.indd 68447_610770-bk08ch01.indd 684 5/6/10 1:19 PM5/6/10 1:19 PM Chapter 2: Using Dynamic Content in Your Web Pages In This Chapter ✓ Adding dynamic content to your page ✓ Formatting dynamic content ✓ Displaying multiple records from a recordset ✓ Navigating through your records ✓ Showing and hiding regions of your page I f you are a code monkey, you can use PHP, ASP.NET, or some other back- end programming language and hand-code dynamic pages for your Web site. However, writing all the database integration by hand involves a steep learning curve. Fortunately, Dreamweaver comes to the rescue by allowing you to bind, or connect, your Web pages with backend data without becom- ing a geek in the process. To make dynamic pages as flexible as possible and yet still organized, Dreamweaver CS5 sets all bindings (references) to external data before you use it in your dynamic page. After the data is bound, you can select the format to display it in. You can even hide portions of pages depending on the values of bindings. After you master these concepts, you’re ready to build complex dynamic Web pages. Displaying and Formatting Dynamic Content When you want to insert dynamic text on your page, your key tools are the Bindings panel and the Server Behaviors panel. To insert dynamic text, open the Bindings panel (choose Window➪Bindings), locate the item that you want to use, and drag the item to your page. Then, if you want to format the new dynamic text, you can use the Server Behaviors panel (choose Window➪Server Behaviors). The follow- ing sections describe in more detail how to add, format, and test dynamic content. 48_610770-bk08ch02.indd 68548_610770-bk08ch02.indd 685 5/6/10 1:19 PM5/6/10 1:19 PM 686 Before you can add dynamic text to your pages, you need to establish a data- base connection (as described in Book VII) and define a data source (as described in Book VIII, Chapter 1). Adding dynamic text To insert dynamic text on your page, follow these steps: 1. In your document, place your cursor where you want to insert the dynamic text. 2. In the Bindings panel, locate the data source that you want to use. You can choose from any existing data sources, such as recordsets, URL parameters, form parameters, and session variables. (See Book VIII, Chapter 1 for more on these data sources.) 3. Drag the data source to your document. The dynamic text appears on your page, enclosed by curly brackets {}. For example, if you add a URL parameter named from to your page, it looks like this in the Document window: {Recordset1.from} This dynamic text entry is also added to the Server Behaviors panel, as shown in Figure 2-1. Figure 2-1: The dynamic text placeholder in the Document window and the dynamic text listing in the Server Behaviors panel. Displaying and Formatting Dynamic Content 48_610770-bk08ch02.indd 68648_610770-bk08ch02.indd 686 5/6/10 1:19 PM5/6/10 1:19 PM Book VIII Chapter 2 Using Dynamic Content in Your Web Pages 687 Formatting your dynamic content After you get dynamic text on your page, you can modify how it appears. For example, if you’re displaying a numeric field as money, you generally want it to appear in a format such as $2.43. It doesn’t look very professional to list a price as $1.1 or $1.154. Fortunately, you can modify the display format of server behavior dynamic text fields. The formatting options that Dreamweaver provides for dynamic data display depend on what dynamic page type you’re using. In general, you can find functions that change the case (upper or lower) of strings, format numbers, and format dates and times. To change the formatting of dynamic text, follow these steps: 1. In the Server Behaviors panel, double-click the dynamic text that you want to format. The Dynamic Text dialog box appears with your dynamic text already selected. 2. Select the appropriate formatting option in the Format drop-down list. For example, if you want to transform the value to uppercase, select the AlphaCase-Upper option, as shown in Figure 2-2. Or if you want to format a numeric field so that it shows dollars and cents, select Currency — 2 Decimal Places. You can download more formats for dynamic text by selecting Edit Format List at the bottom of the Format drop-down list. Figure 2-2: The Dynamic Text dialog box. Displaying and Formatting Dynamic Content 48_610770-bk08ch02.indd 68748_610770-bk08ch02.indd 687 5/6/10 1:19 PM5/6/10 1:19 PM 688 3. You can safely leave the Code field alone. The Code field tells you the actual code that Dreamweaver is using to produce the dynamic text. It’s populated automatically when you select a data source. 4. Click OK to close the Dynamic Text dialog box. Dreamweaver applies the formatting that you select in Step 2 to your text. Testing your dynamic text If you think that you have your page the way that you want it, the next step is to test it. You can test the page by using Dreamweaver’s Preview in Browser command or Live Data view (both are described in Book VIII, Chapter 3). Live Data view is a little easier to use because it gives you a dialog box for entering parameter values. For example, you can enter URL parameter values in this dialog box instead of having to manually add them to the URL like this: http://127.0.0.1/url_case.php?username=jack%20bauer Note that %20 is the safe way to provide a blank space in a URL. To use Live Data view to test your dynamic text, open your document and follow these steps: 1. Choose View➪Live View Options > HTTP Request Settings. The Live View Settings dialog box appears. Dreamweaver menus are context-sensitive. The Live View Options menu item is available only when server-side pages, such as .php or .asp files, are open. 2. Click the plus (+) icon to add a new entry to the URL Request list. 3. Enter the name of the URL parameter in the Name column. The name must match the name of the parameter from the URL. For example, we entered first_name to match the name of the URL param- eter in Figure 2-3. Displaying and Formatting Dynamic Content 48_610770-bk08ch02.indd 68848_610770-bk08ch02.indd 688 5/6/10 1:19 PM5/6/10 1:19 PM Book VIII Chapter 2 Using Dynamic Content in Your Web Pages 689 Figure 2-3: The URL first_name parameter set to a testing value of Jackson. 4. Enter a sample value in the Value field and then click OK. For our example, we entered Jackson (refer to Figure 2-3.) This value simulates an actual value sent to your script when it runs. To find out how to format dynamic content, see the earlier section, “Formatting your dynamic content.” 5. Choose View➪Live Data. Your Document window updates to show the processing of the page’s dynamic content. For example, in Figure 2-4, the URL parameter user- name is replaced with Jackson. Figure 2-4: The Jackson value replaces the URL parameter placeholder. Dynamic text Displaying and Formatting Dynamic Content 48_610770-bk08ch02.indd 68948_610770-bk08ch02.indd 689 5/6/10 1:19 PM5/6/10 1:19 PM 690 You can update the parameter value in the URL box at the top of the Document window. Click the Refresh icon to update the document, or select the Auto Refresh option to update the value live. Working with Database Recordsets You can display database recordsets much as you display simple dynamic data (as described in the earlier sections of this chapter) when you’re working with a recordset that has one row in its results. You can even use the Dynamic Text server behavior to display a field from a recordset. (If you have more than one row in your recordset, the behavior displays just the first row.) Things get a bit more complex when your recordset has several rows that you want to include. The dynamic page must be able to apply formatting for each row in a recordset. Dreamweaver lets you specify the format for your results, gives you navigation tools, and uses HTML tables to display the recordsets neatly. Repeating regions on your page The Repeat Region server behavior lets you display multiple records from a single recordset on the same page. Select an area, or region, of the page that you want to repeat and specify the number of times that you want to repeat it. The Repeat Region server behavior then populates the contents of each repeated region with values from the recordset. To add a repeat region to your page, follow these steps: 1. Select the data fields on the page that you want to repeat. For example, we’re working with a recordset that’s defined to return all the entries from the customers table, which has four fields: first_name, last_name, city, and state. In Figure 2-5, the four dynamic text fields appear highlighted. 2. In the Server Behaviors panel, click the plus (+) icon and then select Repeat Region from the drop-down list that appears. The Repeat Region dialog box appears, as shown in Figure 2-6. 3. In the Recordset drop-down list, select the recordset that you want to use. 4. In the Show area, select the number of records that you want to dis- play on the page. The default displays ten records, but you can choose a different number. You can also display all records by clicking the All Records option. In our example, we selected two records. Working with Database Recordsets 48_610770-bk08ch02.indd 69048_610770-bk08ch02.indd 690 5/6/10 1:19 PM5/6/10 1:19 PM Book VIII Chapter 2 Using Dynamic Content in Your Web Pages 691 Figure 2-5: The Document window displays dynamic text place- holders. Repeating regions Figure 2-6: The Repeat Region dialog box. 5. Click OK to close the Repeat Region dialog box. A gray box appears around the repeating fields with the text Repeat on a tab, as shown in Figure 2-7. A repeat region (recordset) also shows up in the Server Behaviors listing. A repeat region is an invisible element in Design view. To view invisible elements on your page, choose View➪Visual Aids➪Invisible Elements. 6. Choose View➪Live View to view the page with actual data from the database. Figure 2-8 shows that the multiple records in this result cause the repeated region to appear five times. Fields that appear highlighted in Live Data view are dynamic text. In other words, the text disappears when you turn off Live Data view. (See Book VIII, Chapter 3 for more on Live Data view.) Working with Database Recordsets 48_610770-bk08ch02.indd 69148_610770-bk08ch02.indd 691 5/6/10 1:19 PM5/6/10 1:19 PM [...]... a form can be supplied with dynamic data To create a dynamic form, you must define a source for the dynamic data first by creating a binding The binding tells Dreamweaver what dynamic information your program can reference These sources can be anything from URL parameters to values for a database recordset (See Book VIII, Chapters 1 and 2 for more on bindings.) For more detailed information on the form... the beginning of the chapter), you can also integrate dynamic text as default values for form elements Dreamweaver supports using dynamic data for all the major form elements, including text boxes, check boxes, radio selections, and list/menu boxes To insert a dynamic form element on your page, follow these steps: 1 Choose Insert➪Form➪Form to insert a form on your page See Book II, Chapter 7 for the... value of a binding Use bindings for tasks such as defaulting the check box values to their current settings for an update screen Book VIII Chapter 4 5/6/10 1:20 PM 712 Adding Check Boxes To make a check box dynamic, follow these steps: 1 Select a check box in a form on your page See Book II, Chapter 7 for the information on creating forms and check boxes 2 In the Properties inspector, click the Bind to... Previewing and Testing Your Dynamic Pages In This Chapter ✓ Testing your dynamic pages by using Live Data mode ✓ Previewing your dynamic pages in a Web browser W hen you work with static HTML files in Dreamweaver CS5, previewing your Web site is easy Just click the Preview in Browser icon and have at it But when you are working with dynamically created pages, previewing your work is much Fortunately, Dreamweaver. .. menus) described in the following sections, refer to Book II, Chapter 7 Inserting Text Fields Text fields allow you to capture basic text information from the user Dynamic text fields are useful when users are updating their information 50_610770-bk08ch04.indd 7 09 5/6/10 1:20 PM 710 Inserting Text Fields because the current values become the defaults for the update screen To make an existing text field... 49_ 610770-bk08ch03.indd 708 Book VIII: Making Pages Dynamic 5/6/10 1:20 PM Chapter 4: Building Dynamic Forms In This Chapter ✓ Understanding dynamic forms ✓ Inserting dynamic form elements ✓ Making form objects dynamic W hen you work with application servers such as PHP and ASP, you can display dynamic pages based on data from databases However, you may also want to build dynamic forms — providing values for the form... categories you’re interested in receiving Dynamic lists and menus make updating that list simpler by using your current selection values as defaults when updating To set the default dynamic values for a menu or list, follow these steps: 1 Select the menu or list in a form on your page See Book II, Chapter 7 for info on creating forms, menus, and lists 2 In the Properties inspector, click the Bind to Dynamic... Select a text field in a form on your page See Book II, Chapter 7 for the lowdown on creating forms and text fields Figure 4-1 is an example of an inserted text field Figure 4-1: An inserted text field in a form The Bind to Dynamic Source button 2 In the Properties inspector, click the Bind to Dynamic Source icon (labeled in Figure 4-1) The Dynamic Data dialog box appears, as shown in Figure 4-2, and... or open an existing page with a defined recordset You can use the default recordset name of Recordset1 2 Insert a table by choosing Insert➪Table 3 Enter the number of rows and columns you want in the Rows and Columns fields You should limit the number of rows to 2 4 Click OK The table appears in the Document window, as shown in Figure 2 -9 48_610770-bk08ch02.indd 692 5/6/10 1: 19 PM Working with Database... select a form type item Figure 2-14: The Dynamic Text Field dialog box Book VIII Chapter 2 in Step 2 5 Click OK Using Dynamic Content in Your Web Pages 4 In the Text field drop-down, select the form element you created back The text field now gets its default value from the data source 48_610770-bk08ch02.indd 697 5/6/10 1: 19 PM 698 48_610770-bk08ch02.indd 698 Book VIII: Making Pages Dynamic 5/6/10 1: 19 PM . Page 48_610770-bk08ch02.indd 697 48_610770-bk08ch02.indd 697 5/6/10 1: 19 PM5/6/10 1: 19 PM 698 Book VIII: Making Pages Dynamic 48_610770-bk08ch02.indd 698 48_610770-bk08ch02.indd 698 5/6/10 1: 19 PM5/6/10 1: 19 PM Chapter. Choose Insert➪Form➪Form to insert a form on your page. See Book II, Chapter 7 for the lowdown on creating forms. 2. Choose Insert➪Form, and then select a form element that would be effective in. Document window, as shown in Figure 2 -9. Working with Database Recordsets 48_610770-bk08ch02.indd 692 48_610770-bk08ch02.indd 692 5/6/10 1: 19 PM5/6/10 1: 19 PM Book VIII Chapter 2 Using Dynamic