Dreamweaver MX 2004 Recipe: In/Out Dashboard

This chapter is from the book

Macromedia Dreamweaver MX 2004 Web Application Recipes

Learn More Buy

This chapter is from the book

This chapter is from the book 

Macromedia Dreamweaver MX 2004 Web Application Recipes

Learn More Buy

Administrator Recipe: Manage Announcements

For an effective announcement system, there needs to be a central page to control the announcements. Ideally, this page would display all the available announcements and give the administrator the option to display the currently applicable ones and delete those that are obsolete. What makes this application different from a standard update record page is that potentially every record could be updated. To accomplish this task, we'll need to set specific parameters for the recordset as well as add custom code to handle the multiple updates and deletions.

Step 1: Implement Manage Announcements Design

The first step in the application is to build the static elements of the page.

1. Create a basic dynamic page, either by hand or derived from a template.

In the InOutBoard folder, locate the folder for your server model and open the manage_announcements page found there.

2. Add a table to the Content region of your page to contain the interface elements for the application.

From the Snippets panel, drag the Recipes > InOutBoard > Wireframes > Manage Announcements - Wireframe snippet into the Content editable region.

3. Add a form-wrapped table with four columns. The table should have room for the announcement text, date, and two checkboxes. The only other form element needed is a submit button. It's also a good idea to add some placeholder text that will eventually show the number of announcements.

Place your cursor in the row below the words Employee Search MANAGE ANNOUNCEMENTS and insert the Recipes > InOutBoard > Forms > View Announcements - Form snippet [Figure 4.8].

Figure 4.8

Step 2: Add Database Components

Although there is only one recordset on this page, it has to be handled in a special fashion. Because the page will include multiple updates, in ASP, two default recordset properties need to be adjusted: the cursor and the lock type. ColdFusion and PHP are capable of handling this degree of manipulation without attributes being altered.

Let's start by creating a simple recordset.

1. From the Bindings panel, choose Add (+) and select Recordset.

2. In the simple Recordset dialog, enter an appropriate name.

Enter Announcements in the Name field.

3. Choose the proper connection or data source.

Select Recipes from the Connections list.

4. Select the table that contains the announcements data.

Choose Announcements from the Table list.

5. Leave the Column, Filter, and Sort options at their respective defaults and click OK to close the dialog.

With our recordset set up, ASP users are ready to modify the properties.

1. From the Server Behaviors panel, select the Announcements recordset.

2. On the Property inspector, change the Cursor Type to Static and the Lock Type to Pessimistic. Make sure that Cursor Location remains at the default setting, Server.

A recordset cursor serves the same basic function as a screen cursor: Both indicate position. By default, a recordset cursor moves forward through a recordset and is known as a forward-only cursor. To update and delete multiple records, the SQL operation must be able to move forward and backward through the recordset, and that requires a static cursor. By the way, it's called a static cursor not because the recordset navigation is locked, but because a static copy of the recordset from the data source is used.

The lock type controls if or how the records are prevented from being updated by others. The default lock type is read-only. Although the read-only mode prevents changes from being made, it doesn't offer the needed control over the recordset. To accomplish our goal, the lock type should be changed to Pessimistic. With a Pessimistic lock type in place, the records remain locked until an update command is issued.

Step 3: Data Binding Process

In addition to using dynamic text to show the announcement and its associated time and date, we'll add a repeat region to show all the available announcements. To make it easier for the administrator to know how many announcements are in the system, the total number of records is also shown, using slightly different techniques for the various server models.

1. From the Bindings panel, expand the Announcements recordset.

2. Drag the AnnouncementText data source field onto the row in the Announcement column.

3. Drag the AnnouncementDate data source field onto the row in the Time/Date column.

Now let's add the Repeat Region.

1. Select either of the dynamic elements just placed on the page.

2. From the tag selector, choose the <tr> tag to the left of the current selection in the tag selector.

3. From the Server Behaviors panel, choose Add (+) and select Repeat Region.

4. In the Repeat Region dialog, make sure the Announcements recordset is chosen, and set the option to show All Records. Click OK when you're done.

For ASP

Now we're ready to replace the placeholder with the dynamic record count code.

1. Select the XX placeholder text in the top table row.

2. From the Bindings panel, drag the [total records] data source item onto the page over the selection.

3. Save the page.

Preview the page in Live Data view to get a count of the number of announcements registered.

For ColdFusion and PHP

Dreamweaver's ColdFusion and PHP server models provide a server behavior for displaying the total number of records easily.

1. Select and delete the XX placeholder text.

2. From the Server Behaviors panel, choose Add (+) and then select Display Record Count > Display Total Records.

3. In the Display Total Records dialog, choose the Announcements recordset and click OK.

4. Save your page.

Preview the page in Live Data view to get a count of the number of announcements registered.

Step 4: Insert Dynamic Checkbox Options

It's time to add in the dynamic checkboxes with our custom code. The custom code is needed to supply two attributes with proper values: name and checked. For ASP and ColdFusion, the name attribute combines the root word Display with the entry's AnnouncementID value, resulting in names such as Display1, Display2, and so on. PHP takes a slightly different tack, where the name indicates an array (Display[]) and the value contains the proper AnnouncementID. These unique names are important because they will be used during the update process to modify or delete the records. The same procedure is applied to both checkboxes found under the Display and Delete columns. To insert the necessary dynamic values, we'll use Dreamweaver's Tag Inspector.

The checked attribute reads the AnnouncementDisplayed value for the record and, if true, includes the attribute; if false, the attribute is left out. The checked state is set with the Dynamic Checkbox server behavior.

Let's start by setting the name (and, for PHP, the value) dynamically for both checkboxes. We'll handle the Display checkbox first:

1. Select the checkbox under the Display column, temporarily named Display.

2. Choose Window > Tag Inspector to display the Tag Inspector panel; make sure the Attributes category is visible.

3. If necessary, switch to List view by selecting the A–Z icon.

The two different views for the Tag Inspector (Category and List) were added in Dreamweaver MX 2004; Dreamweaver MX only offers the List view.

4. Select the field next to the name attribute, which currently contains the word "Display."

5. Give the name attribute a dynamic value according to your server model:

ASP-VB Script, ASP-JavaScript; ColdFusion:

Choose the lightning bolt symbol to open the Dynamic Data dialog and select AnnouncementID from the Announcements recordset. Position your cursor at the front of the Code field and add the word Display in addition to the code already present. Click OK when you're done to close the dialog.

PHP:

Add an opening and closing bracket after the Display name so that the value reads Display[].

6. PHP only: Select the field next to the value attribute and choose the lightning bolt symbol to open the Dynamic Data dialog; select AnnouncementID from the Announcements recordset. Click OK to close the dialog when you're done.

The same process is now applied to the Delete checkbox to provide unique names for each of those checkboxes.

1. Select the checkbox under the Delete column, temporarily named Delete.

2. In the Tag Inspector, select the field next to the name attribute, which currently contains the word "Delete."

3. Give the name attribute a dynamic value according to your server model:

ASP-VB Script, ASP-JavaScript; ColdFusion:

Choose the lightning bolt symbol to open the Dynamic Data dialog and select AnnouncementID from the Announcements recordset. Position your cursor at the front of the Code field and add the word Delete in addition to the code already present. Click OK when you're done to close the dialog.

PHP:

Add an opening and closing bracket after the Delete name so that the value reads Delete[].

4. PHP only: Select the field next to the value attribute and choose the lightning bolt symbol to open the Dynamic Data dialog; select AnnouncementID from the Announcements recordset. Click OK to close the dialog when you're done.

The Display checkbox requires an additional step to toggle the checked attribute according to the AnnouncementDisplayed value:

1. Select the Display checkbox.

2. From the Property inspector, choose Dynamic.

3. In the Dynamic Checkbox dialog, choose the field you want to evaluate.

Select the lighting bolt in the Check If field and choose AnnouncementDisplayed from the Announcements recordset.

4. Set the condition that will mark the form element with a check.

In the Equal To field, enter the proper value for your server model:

ASP-VB Script: True

ASP-JavaScript: 1

ColdFusion: 1

PHP: 1

5. When you're done, click OK to close the Dynamic Checkbox dialog.

6. Save your page.

After the custom checkboxes are in place, enter Live Data view to see which announcements currently are set to be displayed [Figure 4.9].

Figure 4.9

Step 5: Update Record

The final step for the Manage Announcements page is to add the supporting logic to update or delete the records as indicated. There are two basic operations here. The first looks for entries in which the Delete checkbox is selected and deletes the record. The second compares the Display checkbox value (whether it is checked or not) to the AnnouncementDisplayed value in the data source. If the two are the same, the user made no changes, and the routine moves to the next record to avoid unnecessary updates. However, if the two differ, the record is updated to reflect the value of the checkbox. The code block needs to be placed beneath the recordset declaration.

1. From the Server Behaviors panel, choose the Announcements recordset.

2. Switch to Code view to see the recordset code block highlighted. Create a new line after the recordset code block and before the next code block and place your cursor on that line.

3. Insert the following code:

From the Snippets panel, open the Recipes > InOutBoard > Custom Code folder for your server model and insert the Update Delete Multiple Announcement Records snippet.

ASP-VB Script:

<%
if (cStr(Request(ÒUpdateAnnouncementsÓ))<>ÓÓ)  then
  while (NOT Announcements.EOF)  
    if (cStr(Request(ÒDeleteÓ&Announcements.Fields
    (ÒAnnouncementIDÓ).value))<>ÓÓ)  then
        Announcements.Delete()
        Announcements.Update()
     else  
        Dim Display
        Display = (cStr(Request(ÒDisplayÓ&Announcements.Fields
        (ÒAnnouncementIDÓ).value))<>ÓÓ)
        if  (Display <> Announcements.Fields
        (ÒAnnouncementDisplayedÓ).value)  then
          Announcements.Fields(ÒAnnouncementDisplayedÓ).value = 
          NOT Announcements.Fields(ÒAnnouncementDisplayedÓ).value
          Announcements.Update()
        end if
      end if
      Announcements.MoveNext()
  wend
  if (Announcements.RecordCount > 0)  then
    Announcements.MoveFirst()
  end if
end if
%>

ASP-JavaScript:

<%
if (String(Request(ÒUpdateAnnouncementsÓ))!=ÓundefinedÓ)  {
  while (!Announcements.EOF)  {
    if (String(Request(ÒDeleteÓ+Announcements.Fields
    (ÒAnnouncementIDÓ).value))!=ÓundefinedÓ)  {
    Announcements.Delete();
    Announcements.Update();
  }
  else  {
    var Display = (String(Request(ÒDisplayÓ+Announcements.Fields
    (ÒAnnouncementIDÓ).value))!=ÓundefinedÓ)
    if  (Display != Announcements.Fields(ÒAnnouncementDisplayedÓ).value)  {
      Announcements.Fields(ÒAnnouncementDisplayedÓ).value =
      !Announcements.Fields(ÒAnnouncementDisplayedÓ).value;
      Announcements.Update();
      }
  }
  Announcements.MoveNext();
  }
  if (Announcements.RecordCount > 0)
    Announcements.MoveFirst();
}
%>

ColdFusion:

<cfif IsDefined(ÒForm.UpdateAnnouncementsÓ)>
  <cfloop query=ÓAnnouncementsÓ>
    <cfif isDefined(ÒForm.DeleteÓ&Announcements.AnnouncementID) >
    <cfquery datasource=ÓRecipesÓ>
      DELETE FROM Announcements WHERE AnnouncementID =
      #Announcements.AnnouncementID#
    </cfquery>
  <cfelse>
    <cfif (isDefined(ÒForm.DisplayÓ & Announcements.AnnouncementID)
    NEQ Announcements.AnnouncementDisplayed)>
          <cfquery datasource=ÓRecipesÓ>
          UPDATE Announcements SET AnnouncementDisplayed = 
          #isDefined(ÒForm.DisplayÓ & Announcements.AnnouncementID)#
          </cfquery>
    </cfif>
  </cfif>
  </cfloop>
  <cfquery name=ÓAnnouncementsÓ datasource=ÓRecipesÓ>
    SELECT * FROM Announcements 
  </cfquery>
</cfif>

PHP:

<?php
mysql_select_db($database_Recipes_PHP, $Recipes_PHP);
if (isset($_POST[ÔUpdateAnnouncementsÕ])) {
  // First Displays
  if (count($_POST[ÔDisplayÕ] > 0)) {
        $bipassArr = array();
        for ($k=0; $k < count($_POST[ÔDisplayÕ]); $k++) {
              // First the items to display
              if ($_POST[ÔDisplayÕ][$k]!=ÓÓ) {
                    $sql = ÒUPDATE announcements 
                    SET AnnouncementDisplayed=1 
                    WHERE AnnouncementID = Ò . $_
                    POST[ÔDisplayÕ][$k];
                    $bipassArr[] = ÒAnnouncementID !=
                     Ò.$_POST[ÔDisplayÕ][$k];
                    mysql_query($sql,$Recipes_PHP);
              }
        }
        $sql = ÒUPDATE announcements SET AnnouncementDisplayed=0Ó;
        if (count($bipassArr) > 0) {
              $sql.= Ò WHERE Ò . implode(Ò AND Ò,$bipassArr);
        }
        mysql_query($sql,$Recipes_PHP);
  }
  // Now Deletes
  if (count($_POST[ÔDeleteÕ]) > 0) {
        for ($k=0; $k < count($_POST[ÔDeleteÕ]); $k++) {
              if ($_POST[ÔDeleteÕ][$k]!=ÓÓ) {
                    $sql = ÒDELETE FROM announcements 
                    WHERE AnnouncementID=Ó.$_POST[ÔDeleteÕ][$k];
                    mysql_query($sql,$Recipes_PHP);
             }
        }
  }
}
?>

4. Save your page.

Your page is now ready for testing, although you might want to wait until the next and final page of the recipe is completed so that you can add dummy announcements for deletion.