Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Editing Travel Destinations

Editing Travel Destinations

In this section of the article, I will guide you through building a page that updates the record for the travel destination you have displayed earlier. To build it, you must complete two actions:

  1. Create a link on the home page that points to the edit page and passes the ID of the record as a parameter.
  2. Create a form that updates database content in the edit.php page.

Create the Edit Content Link

To edit the content on the first page, you must add a link to the edit.php page that also passes the ID of the record being displayed. Use this ID to identify the record to update. To create such a link, follow the next steps:

  1. Open the index.php page.
  2. Place the mouse cursor after the dynamic text and press Enter/Return to create a new paragraph.
  3. Type: Edit content.
  4. Select the entered text and click the Folder icon in the Property inspector:

    Click the icon to open the Create Link dialog box

    Figure 20. Click the icon to open the Create Link dialog box

  5. In the dialog box that opens, select the edit.php page and click the Parameters button:

    Select the page to link to

    Figure 21. Select the page to link to

  6. In the new interface, enter the parameter name: id_dst , and for the value, click the dynamic data icon. In the new dialog box select the id_dst field of the rsDestination recordset.

    Select a recordset field to provide the value

    Figure 22. Select a recordset field to provide the value

  7. Click OK three times to complete the link creation process.

Save the page. Before you go ahead and test it, create the edit page.

Create the Record Update Form

Dreamweaver helps users who want to speed up dynamic web development by providing server behaviors and commands that create the elements needed to insert, edit, or delete a record, and more.

For the task at hand you will use the Record Update Form Wizard to build the form and application logic that saves the updated information to your database.

Follow the next steps to create the form that updates records:

  1. Open the edit.php page in Dreamweaver.
  2. Remove the center column’s content, and merge the two rows. To merge them, select them both, right-click and select Table > Merge Cells.
  3. Set the width of the table. Click in the resulting cell, select the table tag in the Tag inspector, and set a width of 650 in the Property inspector panel, as shown for the index.php page.
  4. Click in the unified table cell that has been created.
  5. From the Insert bar > Application tab, click the Record Update Form Wizard icon.

    Record Update Form Wizard icon

    Figure 23. Record Update Form Wizard icon

  6. After clicking the icon, a dialog box appears, showing that not all prerequisites have been met. As you can see, you need to define the recordset containing the item that will be updated. Click the link to create one.

    Click the requirement that isn't checked

    Figure 24.Click the “Create a Recordset” requirement that doesn’t have a check mark next to it

  7. In the recordset interface that opens, configure the parameters for the new query as shown below:

    Create a filtered recordset

    Figure 25. Create a filtered recordset

    1. In the Name text box enter rsUpdate.
    2. In the Connection pop-up menu, select the connTravel database connection.
    3. In the Table pop-up menu, select the destination_dst table.
    4. In the Filter pop-up menu, select the column by which to filter the recordset: id_dst. For the matching value, select the URL Parameter, and enter id_dst as its name. The URL parameter is passed by the Edit content link in the index.php page to match the record to update.
  8. Click OK to create the recordset. Now the Setup Instructions dialog box shows all requirements are met, and you can click OK to start the wizard.
  9. The wizard interface allows defining the database information, and which fields to display in the form. Configure the options as follows:

    Configured Update Record Form Wizard interface

    Figure 26.Configured Update Record Form Wizard interface

    1. In the Connection pop-up menu, select the connTravel database connection.
    2. In the Table to update pop-up menu, select destination_dst.
    3. In the Select record from pop-up menu, select the rsUpdate recordset.
    4. In the After updating, go to text box enter index.php.
    5. From the Form Fields grid, remove the id_dst field. Select it and click the Minus (-) button.

      Remove fields from the grid

      Figure 27. Remove fields from the grid

    6. Select the description_dst field in the grid, and in the Display in the pop-up menu, select Text area. In the Label text field, enter Description:

      Set the form element to use for the field

      Figure 28. Set the form element to use for the field

  10. Select the name_dst field and in the Label text field enter Name.
  11. The date_dst field will always receive the current date as a value. Select the field in the grid, and in the Display as pop-up menu, select Hidden Field.
  12. Click OK when done to close the wizard and apply the changes to the page.

The wizard creates the form and the application logic needed to perform the update. From the table created in the page center, remove the first column—the one displaying the label. Select the column and press Delete.

In Dreamweaver, the two updated areas are the center column (figure 28) and the Server Behaviors tab (figure 29).

Form created by the wizard in the page

Figure 29. Form created by the wizard in the page

Server Behaviors added by the wizard

Figure 30. Server Behaviors added by the wizard

Save the changes you’ve made to all pages. To test the work so far, you must first load the home page in a browser and click the Edit content link. You will see the HTML code in the textarea.

Edit page content through the text area

Figure 31. Edit page content through the text area

This is not a pretty sight. And if you simply want to rephrase something, or format text in a different manner, you have to scroll through the code and know HTML.

Next, you will replace this text area with an online HTML editor, which will make editing content child’s play. KTML allows even non-technical users to edit content in a WYSIWYG (What You See Is What You Get) environment, much like they would do in Microsoft Word or another word processor application.

Comments