Naturally, when you gather data from website visitors, you'll invariably need to store some of it in your data tables. You can quickly insert data into tables using Dreamweaver MX. As you might have guessed, Dreamweaver MX provides a method for inserting the data just by clicking a few buttons.
For this example, we're going to use the Books database included on the CD. We're going to add new categories to the Books database, so let's build a form for displaying the information we currently have and then let the user add a new record.
We want to show the user the current data in the category table before letting them add a new item, so first let's build a recordset. Figure 20.15 shows our ShowCategories recordset. We've already established our DSN (see Chapter 10 for more information on setting up a DSN) called MDW_Books, and we're choosing to work the tblCategories table. (To add your recordset, click the plus sign [+] on the Bindings tab of the Application panel.) We're also going to sort by the Category field as a default.
Figure 20.15: We've defined a recordset for our insert page.
Now, we're going to use that recordset in conjunction with a Dynamic Table object, another Dreamweaver MX time-saver. A Dynamic Table automatically fills an HTML table with the data from the specified recordset. This means you don't have to hard-code the repeating behavior for this common task. Choose Insert ® Application Objects ® Dynamic Table from the Dreamweaver MX main menu, as shown in Figure 20.16. You can see in Figure 20.17 that we selected the recordset we just created. We're going to opt to show only five records at a time, so we enter 5 in the Show x Records At A Time text box. We add a bit of formatting and click OK to add our repeating table to our form, as you can see in Figure 20.18.
Figure 20.16: The Dynamic Table object will save you time when displaying records from a table.
Figure 20.17: The Dynamic Table dialog box lets you specify settings for the Dynamic Table you're about to add to your form.
You can see in Figure 20.18 that Dreamweaver MX adds a Repeat outline to the table. This signifies the repeating region. If you don't see something similar to that shown in Figure 20.18, you might need to turn on Show Invisible Elements, as we described earlier. Preview the page in your browser (press F12) to see a display similar to Figure 20.19. Indeed, the table data is repeated for us, all quite painlessly.
Figure 20.18: We've added the Dynamic Table to our form.
Figure 20.19: Dreamweaver MX created the code that caused our data to repeat.
Now that we have the data in the table showing in a list, let's give the user a way to navigate between the records. We'll do that next with the Recordset Navigation Bar object.
Our form contains the data from our Categories table, broken out in groups of five. We know that because we can see the first five records. Now, how do we view the rest of the records? Well, we can hand-code the proper ASP (or whatever language you're using) to move the records, but wouldn't it be nice if Dreamweaver MX would just let us plop in a button set to move through the records? Well, of course, Dreamweaver MX can do that—through the Recordset Navigation Bar object. We'll add one of those to our form in a second. First, let's make a place for it within our current table.
Right-click inside the last row of the table that contains the Repeated Region, and choose Table ® Insert Rows And Columns to open the Insert Rows Or Columns dialog box, which is shown in Figure 20.20. Add three rows below the current selection, and click OK. Dreamweaver MX adds three rows to the bottom of the table.
Figure 20.20: We're adding new rows to the table to accommodate the Navigation bar.
These three rows are currently within the repeating region, however, and will be repeated for every row in the table. This isn't the behavior we want, so we're going to simply move them down a bit, outside the repeating region. Follow these steps:
Place the cursor inside the first blank column in the newly added rows. Dreamweaver MX jumps to that column in the Code window, as you can see in Figure 20.21.
Figure 20.21: Dreamweaver MX jumps to the selected object in the Code window.
Select the newly inserted rows in the Code window by clicking the <TR> tag just above the cursor point and scrolling down to the closing </TR> tag that finishes the third row.
Hold down Shift and click the end of that tag to select the three rows.
Drag the three rows down to just beyond the closing ASP bracket (or tag or statement, depending on the language you're using) that is below the Wend statement. You want to make sure that the newly inserted rows are outside the repeating loop.
The table code goes from looking like the following:
<table border="1" cellpadding="2" cellspacing="4"> <tr> <td>CategoryID</td> <td>Category</td> </tr> <% While ((Repeat1__numRows <> 0) AND (NOT ShowCategories.EOF)) %> <tr> <td><%=(ShowCategories.Fields.Item("CategoryID").Value)%></td> <td><%=(ShowCategories.Fields.Item("Category").Value)%></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <% Repeat1__index=Repeat1__index+1 Repeat1__numRows=Repeat1__numRows-1 ShowCategories.MoveNext() Wend %> </table>
to looking like the following code:
<table border="1" cellpadding="2" cellspacing="4"> <tr> <td>CategoryID</td> <td>Category</td> </tr> <% While ((Repeat1__numRows <> 0) AND (NOT ShowCategories.EOF)) %> <tr> <td><%=(ShowCategories.Fields.Item("CategoryID").Value)%></td> <td><%=(ShowCategories.Fields.Item("Category").Value)%></td> </tr> <% Repeat1__index=Repeat1__index+1 Repeat1__numRows=Repeat1__numRows-1 ShowCategories.MoveNext() Wend %> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>
Now if you preview the form in a browser, you should see the first five records followed by three blank lines, as Figure 20.22 shows. We're going to merge the columns in the bottom row so that the Navigation bar will be centered within our table. Select the bottom row, and merge the columns by clicking the Merge icon in the Property inspector. Click inside the newly merged bottom row, and choose Insert ® Application Objects ® Recordset Navigation Bar to open the Recordset Navigation Bar dialog box, as we did in Figure 20.23.
Figure 20.22: We're making room for the Navigation bar.
Figure 20.23: Insert the Navigation bar into the table.
Figure 20.24 shows the Recordset Navigation Bar dialog box, in which you choose the recordset you want to navigate and specify whether you want the navigation links to be text or images. If you select the Images option, the Navigation bar uses VCR-style buttons. You must define the recordset before applying the Recordset Navigation Bar object—this option does not allow you to build one on the fly. Once you click OK, your table should look similar to our snapshot in Figure 20.25. Preview your page, and you'll see the actual buttons displayed in the table. Click a button to move the record pointer through the table and change the records accordingly.
Figure 20.24: You use the options in the Recordset Navigation Bar dialog box to control the appearance of your Navigation bar.
Figure 20.25: Dreamweaver MX inserts a placeholder guide in the page.
We can now move through the table with ease, thanks to the tools Dreamweaver MX provides. But where exactly in the table are we? Which record of how many total are we viewing? Dreamweaver MX lets you quickly add a status bar to the page as well.
Let's go back to our table and merge the cells in the row above our Navigation bar. Follow these steps:
From the main menu, choose Insert ® Application Objects ® Recordset Navigation Status to open the Recordset Navigation Status dialog box, as shown in Figure 20.26.
Figure 20.26: Dreamweaver MX includes a status bar that you can quickly drop into your pages to show where the record pointer is within the table.
Choose the proper recordset for which you want to navigate and click OK.
Add a bit more formatting and preview your page, and you should end up with something similar to Figure 20.27. Now, what about that thing we started with…inserting new data? Well, it's just as easy as adding navigation.
Figure 20.27: Your final table should look similar to ours, with the Navigation bar and status bar at the bottom.
Now that the user can see the categories that are already there, let's add a spot for adding a new category to the table. (And, uh, keep in mind that a graphic artist hasn't had a go at this formatting, okay?) We're going to add three more rows to the bottom of the table and merge the cells as we did before. That makes room for our next Dreamweaver MX handy tool, the Record Insertion Form.
To set properties for the form Dreamweaver MX is going to automatically create for you, choose Insert ® Application Objects ® Record Insertion Form to open the Record Insertion Form dialog box (see Figure 20.28). This form allows you to enter new values for the fields you specify and inserts them into the table.
Figure 20.28: Save time and effort by letting Dreamweaver MX create an insertion form for you.
As you can see in Figure 20.29, we've chosen the proper recordset, the table into which we want to insert the data, and the page we want to go to after a new record is inserted. This location can be a fully qualified URL or a relative link, as we've specified in our example.
Figure 20.29: In the Record Insertion Form dialog box, you specify all the properties necessary to set up a form for inserting data.
The Form Fields panel allows you to add fields from the table to the form or remove fields you've already specified. By default, Dreamweaver MX grabs all the fields in the recordset. You'll notice that CategoryID is in our Form Fields panel, but we're going to remove it. CategoryID is an Access AutoNumber field. You can't insert data into an autonumber field, so in order to prevent an error upon insertion of the data, we're going to remove the CategoryID field from our list. Click the CategoryID field, and then click the minus sign (-) to remove it.
The Label field lets you specify a new label for the selected Form field. This will appear to the left of the Form field so that you know what data you're entering. You use the Display As and Submit As drop-down lists to control how the data appears in the form as well as how it should be submitted to the table. We'll look at this in more detail shortly. For now, just click OK to place an insert form in your table, similar to that shown in Figure 20.30.
Figure 20.30: Our update form now has a means of allowing a user to add a new record to the table.
All these fantastic Dreamweaver MX tools that save you time and effort may seem like magic, but they're really just Server Behaviors that Dreamweaver MX applies to your pages behind the scenes. For proof of this, check the Server Behaviors tab on the Application panel after adding any of the objects we've covered. You'll see items such as Dynamic Text, Move To First Record, Show If Not Last Record, and so forth.
You could manually add all these Server Behaviors yourself by clicking an object and choosing the appropriate behavior from the Server Behaviors panel. But why do so when you don't have to?