Accessibility

Dreamweaver Article

 

Creating an event registration application in PHP – Part 1: Building the front end


Table of Contents

Displaying the event presentations

To help your registrants decide which days of your event to attend, you'll want to display the session details. This information is stored in the presentations table of the database and can be called up dynamically. In this exercise, you'll create the necessary recordset, insert the dynamic data, and set up links to display what's happening on the various days.

Establishing the recordset

The first task is to add the recordset to the page. This recordset pulls data from the presentations table and is filtered to include only the sessions on a single day. A URL parameter is used to create the filter.

  1. Choose File > Open. When the Open dialog box appears, navigate to the event_reg subfolder of the sample files folder and open presentations.php.

    The presentations.php page has a few placeholders already set up to help guide you. Before you can take advantage of them, you'll need to create a recordset.

  2. From the Bindings panel, choose Add (+) and select Recordset from the list.
  3. When the Recordset dialog box opens, make sure you're in Simple mode and enter an appropriate name for the recordset in the Name field (for example, rsPresentations).
  4. Choose your data source connection from the Connection list; mine is called connEventReg.
  5. Select the table from the Table list, like presentations.
  6. Leave all the columns selected.

    For your own application, you can, of course, limit the data columns to just those used.

  7. Set the filter to the following setting:

    • PresentDay: =
    • URL Parameter: PresentDay
  8. From the Sort lists, choose PresentDate Ascending. Do not click OK just yet.

    Although you've completed the Simple view of the recordset (see Figure 3), you're not quite done. To make sure that the first day's events are displayed when the page loads initially, you'll need to change the default value of the URL parameter in the Advanced Recordset interface.

    Establishing the recordset

    Figure 3. Establishing the recordset

  9. Switch to Advanced.
  10. In the Variables section, click Edit. When the Edit Variables dialog box appears, change the Default value from -1 to 1. Click OK to close the dialog box.

    Setting up the proper default value

    Figure 4. Setting up the proper default value

  11. Click OK once more to close the Recordset dialog box.

Now that the recordset is ready to go, you're all set to bind the dynamic data to the page.

Binding the data

Inserting the dynamic data to the page is pretty straightforward and made even simpler with the placeholder elements to show you the way. The only tricky part is formatting the date and time properly; to accomplish this, you'll need to add a bit of hand coding to the page.

  1. From the Bindings panel, expand the Recordset (rsPresentations) entry so you can see all the available data columns (see Figure 5).

    Available data columns

    Figure 5. Available data columns

  2. Select the placeholder letter [X] in the main heading. From the Bindings panel, choose PresentDay and click Insert.

    This action allows the page to indicate which day of the event is currently being displayed.

  3. Select the placeholder letter [Presentation name] in the main heading. From the Bindings panel, choose PresentName and click Insert (see Figure 6).

    Binding dynamic data to the page 

    Figure 6. Binding dynamic data to the page

  4. Repeat step 3 with the remaining placeholder text elements:

    • [Short Description]: PresentDescShort
    • [Date and time]: PresentDate
    • [Speaker Name]: PresentSpeaker
    • [Full Description]: PresentDescFull
  5. At this point you can make the image dynamic. Double-click the placeholder image; when the Select Image Source dialog box appears, choose the Data Sources option. From the Field list, choose PresentPic. In the URL field, prepend the code with the following path: images/. Click OK to confirm your choices.

    Specifying a dynamic image

    Figure 7. Specifying a dynamic image

    Next, set up the proper date and time formatting. As I mentioned, this will require a bit of hand-coding.

  6. Select the dynamic data {rsPresentations.PresentDate} and switch to Code view. Change the selected code to include the following sections in red:

    <?php echo date("l, F j, Y, g:i a", strtotime($row_rsPresentations['PresentDate'])); ?>

    Dreamweaver does not provide a binding panel format for date and time with PHP, so you have to add it yourself. There are two functions applied to the recordset row: date() and strtotime(). The innermost function, strtotime(), converts the string stored in the database to a time format that PHP can manipulate. The date() function handles the formatting. At runtime, these single letter formatting codes will result in output like this: Saturday, March 1, 2008, 9:00 am. For more information about date and time formatting, see the PHP online manual.

  7. The next step is to set up the Day 1 and Day 2 links. Select the text Day 1 and, in the Property inspector, enter presentations.php?PresentDay=1 in the Link field. Next select Day 2 and enter presentations.php?PresentDay=2 in its Link field.

    Here, each link is set to the current page with a different value for the URL parameter PresentDay, which, you'll recall, was used to filter the recordset.

  8. Choose File > Save.

The core of the dynamic information is all in place (see Figure 8).

All dynamic data is inserted

Figure 8. All dynamic data is inserted

Next, you'll make sure you get all the data you need.

Repeating the records

At this point, the page would display a single record. For the final phase, you'll add a Repeat Region server behavior to display all the records in the recordset.

  1. Select all the dynamic data from rsPresentations.PresentName through rsPresentations.PresentDescFull and include the paragraph following.

    When you select the data to be repeated, you generally want to make sure to include a bit of space after the day so that each record will be given its proper weight. You could, of course, enclose everything in a <div> tag and handle the separation through CSS.

  2. From the Server Behaviors panel, click Add (+) and choose Repeat Region from the list.
  3. When the Repeat Region dialog box appears, make sure that rsPresentations is displayed in the Recordset list and choose Show: All records (see Figure 9). Click OK.

    Setting up a repeat region

    Figure 9. Setting up a repeat region

  4. Choose File > Save.
  5. To test your page, press F12 to preview in your testing server. After you've looked over the info, click the Day 2 link to review the second day's sessions (see Figure 10).

Previewing the page

Figure 10. Previewing the page

Naturally, you can add as many days to your event listing as needed. Next, you'll create the registration page.