As you have already seen, the way to update and delete records is to create a list of all records with EDITand DELETElinks that pass the record’s primary key to the update or delete form through a query string appended to the URL. The authorstable has a lot of records in it, so we’ll improve the basic technique by adding a recordset navigation bar, which lets you page through a long set of search results a specified number of records at a time.
To save space and time, I have created the basic code for the page to display a list of authors. Refer to Chapter 14 if you need to refresh your memory on how to build this sort of page.
1.Copy author_list_01.phpfrom examples/ch16, and save it as author_list.phpin workfiles/ch16. The page has a recordset called listAuthors, which retrieves everything from the authors table, and the EDIT and DELETE links point to author_update.php and author_delete.php with the author_id primary key appended as a query string.
2.The page doesn’t yet have a repeat region, so insert your cursor anywhere in the second row of the table, and click the <tr>tag in the Tag selector at the bottom of the Document window to select the entire row. Choose Repeat Regionfrom the Server Behaviorspanel. Alternatively, use the Datatab of the Insert bar or the Data Objectssubmenu of the Insertmenu. Set the repeat region to show 15 records at a time.
3.Before inserting the recordset navigation bar, you need to make sure your insertion point is in the right place. Select <table>in the Tag selector, and press your right arrow key once to move the insertion point outside the table. Then select Recordset Navigation Barfrom the Datatab of the Insert bar, as shown in the fol- lowing screenshot (or select Insert ➤Data Objects ➤Recordset Paging ➤Recordset Navigation Bar):
Inserting a recordset navigation bar
Although this is an adequate safeguard for a basic content management sys- tem, it won’t prevent you from entering similar names or misspelled ones.
16
4.The Recordset Navigation Bardialog box has two settings. The first lets you choose which recordset you want to use. There’s only one on the current page, so listAuthorsis selected automatically. The other setting lets you choose whether to use text or images. Select Images, and click OK.
5.The recordset navigation bar is inserted beneath the table that displays the record- set. As you can see from the following screenshot, it’s a rather enigmatic jumble of images with gray tabs on top:
The HTML markup of the recordset navigation bar is a simple table. It’s up to you to style it with CSS.
6.Click anywhere in the recordset navigation bar, and click the <table>tag in the Tag selector to select the whole table. Give the navigation bar an ID by typing recNavin the Table Idfield in the Property inspector. Now, click the New CSS Ruleicon at the bottom right of the CSS Stylespanel, and create a rule for #recNav(the New CSS Ruledialog box automatically suggests the selector name if the navigation bar table is still selected).
For the purposes of this exercise, select This document onlyto embed the rule in the
<head>of the page. In the Boxcategory, set Widthto 400 px, and click OK. This is 50 pixels narrower than the table that contains the recordset results, but it seems to fit better.
7.A simple way of formatting the recordset navigation bar is to click inside the first cell to the right of the double arrow image and insert a space. Next, hold down the
mouse button and drag-select the first two table cells. Merge the two cells by click- ing the Merge selected cellsicon in the Property inspector:
8.Do the same with the third and fourth cells by inserting a space to the right of the arrow in the third cell and merging the two cells. Finally, create a style rule (I used a class called textRight with the rule text-align: right) to move the right arrows to the right edge of the table.
A quick way to create and apply the textRightclass to the merged cells is to select the CSS button in the Property inspector with the cells still selected. In the Targeted Ruledrop-down menu, select <New CSS Rule>, and click the Align Rightbutton, as shown in the following screenshot:
In the New CSS Ruledialog box, choose Class (can apply to any HTML element)as the Type Selector, and type textRightin the Selector Namefield. When you click OK, the class is created and automatically applied to the current selection.
9.Save author_list.php, and test it in a browser. You should see two arrows at the bottom right of the list of authors, as shown here:
Click the single arrow, and you’ll see the continuation of the list of authors, together with arrows at the bottom left of the table for you to navigate back. The double arrows take you to the beginning and end of the list—pagination for a long list of records made easy!
10.There’s just one thing—the images are surrounded by ugly blue lines because they’re links. To get rid of the lines, create a new CSS style rule. The quickest way do this is to go into Code view and add the following rule to the <style>block in the <head>of the page:
a img {
border: none;
}
When you view the page again, the ugly blue border around the images is gone.
You can check your code against author_list_02.phpin examples/ch16.
Now that you have a list of all authors registered in the database, you can adapt the insert form to handle updates. It’s quicker to base the update page on author_insert.php, instead of building the whole page from scratch.
Adapting the insert form involves removing the Insert Record server behavior—a simple, clean operation that involves just two clicks. You then create a recordset to retrieve the details of the record you want to update and bind the results to the fields in the form. This displays the existing contents of the record ready for editing. Finally, you apply the Update Record server behavior and move the code into the space originally occupied by the Insert Record server behavior.
1.Open author_insert.php, and save it (File ➤Save Asor Ctrl+Shift+S/Shift+Cmd+S) as author_update.php.
2.You now have an exact copy of author_insert.php. Change the title and heading to Update Author. Use the Property inspector to change the Button nameand Value of the submit button to updateand Update author, respectively.
3.In the Server Behaviorspanel, highlight Insert Record, and click the minus button to delete it. Make sure you delete only the Insert Record server behavior, because you still need the checkAuthorrecordset.
If you alter the code of a Dreamweaver server behavior, its name disappears from the Server Behaviorspanel, or a red exclamation mark appears alongside, indicating the code is no longer editable through the server behavior’s dialog box. However, when building the insert form, you simply moved the recordset code and wrapped the Insert Record server behavior in an elseclause, without altering the actual code. Consequently, they still remain fully accessible through the Server Behaviorspanel. When you remove the Insert Record server behavior in this way, the conditional statement you added to the insert form remains intact, ready for reuse in this page.
Adapting the author insert form for updates
16
4.An update form always needs a recordset for the Update Record server behavior to work with. Open the Recordsetdialog box in Simple mode, and use the settings shown in the following screenshot. Click OKto create the getAuthor recordset.
This selects just one author identified by author_idpassed in the URL query string.
5.Open the Bindingspanel. You should now have two recordsets listed there: checkAuthor and getAuthor. The second one will be used to set the initial values for the text fields in the updateAuthor form. Expand the getAuthor recordset in the Bindings panel, and highlight the first_nametext field in the form, followed by first_namein the recordset, as shown along- side. The label on the Insertbutton at the bot- tom of the Bindings panel changes to Bind, and the drop-down menu alongside should display input.value. Click Bind, and a dynamic place- holder will appear inside the first_nametext field. The Bindbutton changes to Unbind. Click this if you ever want to remove dynamic text bound in this way.
6.Repeat step 5 with the family_nametext field and family_namein the recordset.
7.The Update Record server behavior also needs to know the author_id. Click any blank space inside the form, and insert a hidden field (see Chapter 9). In the Property inspector, change the name of the hidden field to author_id, and click the lightning bolt icon alongside the Valuefield.
8.In the Dynamic Data dialog box that opens, select author_id from Recordset (getAuthor), and click OK. Make sure you use the correct recordset.
9.Apply the Update Record server behavior by clicking the plus button in the Server Behaviors panel, and select Update Record. Alternatively, use the Update Record
button on the Datatab of the Insertbar, or select the menu option, Insert➤Data Objects➤Update Record➤Update Record.
If you have followed all the steps correctly, the Update Recorddialog box will auto- matically apply the correct values as soon as you select connAdmin in the Connectionfield. As you can see in Figure 16-14, the Update Recorddialog box is almost identical to the Insert Recordone. The difference is that the first item in the Columnsfield identifies the record to be updated by its primary key. Dreamweaver automatically selects the Primary keycheckbox for the first item, taking its value from the hidden form field you created in step 7. If this value isn’t set, click Cancel, and retrace your steps.
Figure 16-14.The Update Record dialog box uses the primary key to identify the record being updated.
Assuming everything is OK, set the final field to go to author_list.php after updating. Check your settings against those in Figure 16-14, and click OK.
10.As I explained in the previous chapter, Dreamweaver inserts server behavior code in a predetermined order. It works fine for basic pages, but it doesn’t take into account any server-side validation that you might want to do. So, you need to move the Update Record server behavior code that has just been created.
Switch to Code view, and locate the following code:
16
This is the Update Record server behavior code. Highlight it, making sure you don’t miss the closing curly brace shown on line 54 in the screenshot, and cut it to your clipboard.
11.Scroll down until you find the empty elseclause just above the DOCTYPEdeclara- tion, and paste the Update Record server behavior between the braces.
You can check your code against author_update.phpin examples/ch16if necessary.