Administrator Recipe: Add Announcements

In addition to managing existing announcements, another administrative task is to add new ones. The records for announcements are straightforward and contain only two fields: one for the text and one for the date. The date information is stored in a date/time field in the data source; therefore, it must be properly formatted before it can be inserted. We'll use a bit of server-side validation to make sure our date is in the proper format; if it is not, we include code to trigger an error message.

Step 1: Implement Add Announcement Design

The first step is, of course, to create the basic page to hold the form and its elements.

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 add_announcement 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 > Add Announcement - Wireframe snippet into the Content editable region.

3. Within the table, place another HTML table to hold the form and three elements: a text field, a text area, and a submit button. Be sure you leave space to hold a date validation error message.

   Place your cursor in the row below the words ADD ANNOUNCEMENT and insert the Recipes > InOutBoard > Forms > Add Announcement - Form snippet [r4-10].

   
   

   Figure r4-10.

   

   
   

Step 2: Insert Record for Announcement

After the user has entered the new announcement information and pressed the submit button, the Insert Record server behavior logic which we are about to apply takes over.

For ASP

1. From the Server Behaviors panel, choose Add (+) and select Insert Record.

2. In the Insert Record dialog, select your connection from the list.

   Choose Recipes from the Connections list.

3. Select the table in the data source to modify from the list.

   Choose Announcements from the Insert into Table list.

4. Enter the path to the file you want the user to visit after the record has been updated in the After Inserting, Go To field.

   Choose Browse and locate the manage_announcement.asp file.

5. Choose the form to use.

   Select AddAnnouncement from the Get Values From list.

6. With the current form selected in the Get Values From list, set the form elements to their corresponding data source fields.

   Set the TimeAndDate form element to the AnnouncementDate data column and submit it as Date.

   Set the AnnouncementText form element to the AnnouncementText data column and submit it as Text.

7. Verify your choices and click OK to close the dialog.

8. Save the page.

For ColdFusion and PHP

1. From the Server Behaviors panel, choose Add (+) and select Update Record.

2. In the Update Record dialog, choose the current form.

   Select AddAnnouncement from the Submit Values From list.

3. Select your data source from the list.

   Choose Recipes from the Data Source list.

4. Enter your username and password, if needed.

5. Select the table in the data source to insert into from the list.

   Choose Announcements (announcements for PHP) from the Insert Into Table list.

6. Set the data source fields to their corresponding form elements.

   Make sure the AnnouncementID data column is set as an unused Primary Key.

   Set AnnouncementDate to the FORM.TimeAndDate form element and submit it as Date.

   Set AnnouncementDisplayed to not get a value.

   Set AnnouncementText to the FORM.AnnouncementText form element and submit it as Text.

7. Enter the path to the file you want the user to visit after the record has been inserted in the After Inserting, Go to field.

   Choose Browse and locate the manage_Announcement file for your server model.

8. Verify your choices and click OK to close the dialog.

9. Save the page.

Note

Although the announcement record will be entered into the data source, it will not immediately appear on the In/Out Dashboard page. To ensure that only properly cleared announcements are seen, this application requires that the Display checkbox show as checked on the Manage Announcements page thus, as it is described in Web jargon, pushing the announcement live.

Step 3: Server-Side Form Validation

Two separate code blocks need to be inserted to validate the user-entered date. One code block handles the processing and makes sure a valid date is received, and a second code block outputs an error message if a problem is found. The trick here is to place the error message code block first, so that the page is checked when it is first loaded.

1. Place your cursor in the row below the Add Announcement label and above the Time/Date label and text field.

2. Insert the following code:

   From the Snippets panel, open the Recipes > InOutBoard > Custom Code folder for your server model and insert the Date Error - Dynamic Text snippet.

   	[View full width] <% if (cStr(Request.QueryString("badDate")) <> "") Then Response.Write("The date you entered was not in the proper format. Dates should be in the format mm/dd/yyyy. <br>(Use your browser's back button to edit your previous entry).")%>
   	[View full width] <%=(String(Request.QueryString("badDate")) != "undefined") ?"The date you entered was not in the proper format. Dates should be in the format mm/dd/yyyy. <br> (Use your browser's back button to edit your previous entry) .":""%>
   	[View full width] <cfif isDefined("URL.badDate")>The date you entered was not in the proper format. Dates should be in the format mm/dd/yyyy . <br> (Use your browser's back button to edit your previous entry).</cfif>
   	[View full width] <?php echo (isset($_GET['badDate']))?"The date you entered was not in the proper format. Dates should be in the format mm/dd/yyyy. <br>(Use your browser's back button to edit your previous entry).":""; ?>

   Now, we're ready to add the second code block to perform the date validation.

3. In Code view, place your cursor at the top of the page, just after the connection code, if any.

4. Insert the following code:

   From the Snippets panel, open the Recipes > InOutBoard Custom Code folder for your server model and insert the Server-side Date Validation snippet.

   	<% if (cStr(Request.Form("AddAnnouncement"))<> "") then dim DateString DateString = cStr(Request.Form("TimeAndDate")) if not (isDate(DateString)) then Response.Redirect("add_announcement.asp?badDate=true;") end if end if %>
   	[View full width] <% function isADate(DateString) { var DateRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/ var theMatch = DateString.match(DateRegex); var validDate = false; if (theMatch) { var DateObj = new Date(DateString); if ((DateObj.getMonth()+1 == parseInt(theMatch[1])) && (DateObj.getDate() == parseInt(theMatch[2])) &&(DateObj .getFullYear() == parseInt(theMatch[3]))) validDate = true; } return validDate; } %> <% if (String(Request.Form("AddAnnouncement"))!="undefined" && (!isADate(String(Request.Form("TimeAndDate"))) || String (Request.Form("TimeAndDate"))=="")) Response.Redirect("add_announcement.asp?badDate=true");%>
   	<cfif isDefined("FORM.AddAnnouncement")> <cfif NOT IsDate(FORM.TimeAndDate)> <cflocation url="add_announcement.cfm?badDate=true"> </cfif> </cfif>
   	[View full width] <?php function isADate($DateString) { $validDate = false; if (ereg("^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{4}$",$DateString)) { $today = date("Y"); $submittedDate = explode("/",$DateString); $month = $submittedDate[0]; $day = $submittedDate[1]; $year = $submittedDate[2]; if ($year >= $today) { $validDate = (checkdate($month,$day,$year))?true :false; } } return $validDate; } ?><?php if ((isset($_POST['TimeAndDate'])) & (!isADate ($_POST['TimeAndDate']))) { $url = "add_announcement.php?badDate=true"; header("Location: $url"); } ?>

   The server-side data validation is a powerful bit of code that could easily be adapted to different applications. Test your page either by entering into Live Data view and adding the URL parameter badDate=true or by previewing in the browser and entering an improper date format [r4-11].

   
   

   Figure r4-11.

   

   
   

5. Save the page.

The entire application is now ready for testing and deployment.