Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
This chapter is from the book

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.

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

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

  4. From the Snippets panel, drag the Recipes > InOutBoard > Wireframes > Add Announcement - Wireframe snippet into the Content editable region.

  5. 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.

  6. Place your cursor in the row below the words Add Announcement and insert the Recipes > InOutBoard > Forms > Add Announcement - Form snippet [Figure 4.10].

Figure 4.10Figure 4.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.

  3. Choose Recipes from the Connections list.

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

  5. Choose Announcements from the Insert into Table list.

  6. 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.

  7. Choose Browse and locate the manage_announcement.asp file.

  8. Choose the form to use.

  9. Select AddAnnouncement from the Get Values From list.

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

  11. 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.

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

  13. 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.

  3. Select AddAnnouncement from the Submit Values From list.

  4. Select your data source from the list.

  5. Choose Recipes from the Data Source list.

  6. Enter your username and password, if needed.

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

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

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

  10. 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.

  11. 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.

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

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

  14. 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.

    ASP-VB Script:

    <% 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.  
    (Use your browser's back button to edit your previous entry).")%>

    ASP-JavaScript:

    <%=(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).":""%>

    ColdFusion:

    <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>

    PHP:

    <?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).":""; ?>
  3. From the Snippets panel, open the Recipes > InOutBoard > Custom Code folder for your server model and insert the Date Error - Dynamic Text snippet.

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

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

  5. Insert the following code:

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

    ASP-VB Script:

    <%
    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
    %>

    ASP-JavaScript:

    <%
    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");%>

    ColdFusion:

    <cfif isDefined("FORM.AddAnnouncement")>
      <cfif NOT IsDate(FORM.TimeAndDate)>
        <cflocation url="add_announcement.cfm?badDate=true">
      </cfif>
    </cfif>

    PHP:

    <?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 [Figure 4.11].

    Figure 4.11Figure 4.11

  7. Save the page.

The entire application is now ready for testing and deployment.

  • + Share This
  • 🔖 Save To Your Account