Build the view greeting page

1. Introduction
2. Planning the application
3. Create the navigation menu and e-card gallery
4. Build the e-card sending pages
5. Build the view greeting page
6. Set up the administration section

The greeting viewing page is accessed by the receiver through the link in the mail message – HTML or text – and which passes two URL parameters: the greeting ID and the random number. The page will have to fulfill this functionality:

• Retrieve the greeting information from the database – with a filtered recordset.

• Display the greeting card on page – using dynamic fields from the recordset.

• Automatically send an e-mail message to the original sender if it is the first visit and if a confirmation has been requested – through the create greeting form.

Create the advanced recordset

To display the greeting you have to create a recordset that retrieves information from both the greetings and e-cards tables, and filters the information by the URL parameters values:

1. Open the view_greeting page in Dreamweaver.
2. Go to the Bindings tab > Plus (+) and select the Recordset(Query) option.
3. To create the advanced query in a visual manner you will use MX Query Builder. MX Query Builder (or QuB) is a tool to create advanced recordsets in a visual environment. You can access QuB by clicking on the QuB3 button in the recordset user interface.
4. Configure the QuB Visual Recordset user interface as follows:
5. • In the Name text box enter the new recordset name – rsGreeting.
   • In the Connection drop-down menu select the connCards database connection.
   • Click the New Query button to start the Query Builder. In the pop-up window enter the same name as for the recordset – rsGreeting.
6. In the main Query Builder interface build the query following the next steps:
7. • In the Tables area check the boxes next to the greeting_grt and ecard_crd tables:
                   
     
     Illustration 54: Select the tables to use
                                       
   • In the main window drag and drop the id_crd field from the ecard_crd table over the idcrd_grt field in the greeting_grt table to create a LEFT JOIN operation. The relation will be marked by a blue line:
                           
     
     Illustration 55: Visually create relations between tables
                       
   • Next check the boxes next to the fields you want the recordset to retrieve: from the ecard_crd table only select the filename_crd field – to display the image – and all fields in the greeting_grt table. You need to select each field instead of the entire table because you need to define conditions. The selected columns will be displayed in the Columns area, where you can also define conditions:
                   
     
     Illustration 56: Columns selected for retrieval
                 
   • You need to define two filtering conditions – on the id_grt and random_grt fields. They must match the URL parameters passed to the page.
   • To add a new condition, click the ... button next to the Condition text field, for the id_grt column. Configure the windows that loads as shown in the image below:
                     
     
     Illustration 57: Filter the recordset by an URL parameter
                 
   • The condition for the random_grt field is created the same way. Click the ... button next to this column, and configure the interface. Use random_grt instead of id_grt and you're all set.
   • Click the Save icon and then go to Query > Close to get back to Dreamweaver.
                   
     
     Illustration 58: Save the query
                   
8. Back in Dreamweaver click the Refresh button to display the recordset query. Then click OK to close the interface and create the recordset.
9. Just like any regular recordset, the fields are displayed in the Bindings tab:
                  
   
   Illustration 59: Recordset fields

In the next section you will use the recordset fields to build the greeting viewing page.

Display the greeting

The greeting will be displayed using the same layout as the e-mail message. To create it, follow the same steps as for the greeting preview page:

1. Attach the ecards.css style sheet to the page. To do so, right-click on the page > CSS Styles > Attach Style Sheet.
2. Type View greeting as title. Select the text and set it to use a Heading 4 formatting.
3. From the HTML tab of the Insert bar add a Horizontal Rule. In the Class drop-down menu from the Property Inspector of the <hr> tag select the categoryline class.
   Note: If using the sample files, you can skip steps 1 through 3.
4. Create a new paragraph after the horizontal line and type “Hi, “ (without the quotes). Then drag and drop the receiver and sender names on the page (type “! ” between them). Type “just sent you a greeting!“ after the sender name, and create a new paragraph.
5. Apply the Show Image server behavior from the Server Behaviors tab > Plus (+) > MX Kollection > File Upload. Configure the user interface in the same manner as for the greeting preview page.
6. Below the dynamic image placeholder drag and drop the message_grt recordset field. The greeting preview page should look like the following in Dreamweaver:
                
   
   Illustration 60: Page to display the sent greeting.

The page now displays the details of the selected greeting. Next you have to add the logic to send the confirmation e-mail to the sender and mark the greeting as visited.

Mark greeting as read and send e-mail confirmation

When the receiver visits the greeting page, it must be marked as visited. Also, if the sender requested it, the confirmation e-mail must be sent.

To mark the greeting as viewed the page must contain an update operation which starts when the page loads and sets the value of the visited_grt field to 1:

1. Open the view_greeting page in Dreamweaver if needed.
2. Go to the Server Behaviors tab > Plus (+) > MX Kollection > Forms > Advanced and select the Update Record Transaction server behavior.
3. The user interface is divided into three tabs. Of interest are only the Basic tab – for the table setup – and the Fields tab – to set the column to update.
4. In the Basic tab configure database information and redirects:
                
   
   Illustration 61: Configure the table to update
                      
5. • In the Connection drop-down menu select connCards.
   • In the Update in table drop-down menu select the greeting_grt table.
   • In the Primary key column drop-down menu select the id_grt column.
   • In the Primary key equals drop-down menu select URL parameter. For the parameter name enter the one used in the e-mail link: id_grt.
   • In the First check variable drop-down menu select Entered value. In the reference field enter 1. This will start the update operation when the page loads.
   • Leave the After updating, go to field empty. Make sure no file is specified.
6. In the Fields tab remove all entries in the Fields grid except for visited_grt. To remove a field, select it in the grid and click the Minus(-) button. Next configure the remaining field:
               
   
   Illustration 62: Only update the visited_grt field to 1
                   
7. • In the Get value from drop-down menu select Entered value.
   • In the Value text field enter 1.
8. When done configuring the user interface click OK to close it.

Next you have to send the confirmation e-mail. The Send E-mail server behavior will have its execution conditioned:

1. Go to the Server Behaviors tab > Plus(+) > MX Kollection > Send E-mail and select the Send E-mail server behavior.
2. Configure the Main tab options:
         
   
   Illustration 63: Configure the confirmation e-mail message
          
3. • In the From text box enter the sender's address. You can use the same address as for sending the e-cards: cards@ecards.com
   • In the To field you must enter the address of the card's sender. To select it click on the InterAKT Dynamic Data icon. Configure the new interface:
            
     
     Illustration 64: Use Dynamic Data to populate the interface options
           
   • • In the Get values from drop-down menu select Recordset field.
     • In the Recordset drop-down menu select rsGreeting.
     • In the Field drop-down menu select the sender_email_grt recordset field.
     • Click OK to add the dynamic mark-up into the To field.
   • In the Subject text box enter: The greeting you sent to . Use the InterAKT Dynamic Data interface to select the receiver_name_grt recordset field, similar as above, then enter has been viewed.
   • The Content textarea still contains the message that is sent with the greeting card.
   • • Clear it and enter: Hello, . Next use the InterAKT Dynamic Data to select the receiver _name_grt recordset field and add it to the mail message. Then type saw the greeting you sent <br/>.
     • On the next row you will display the link to see the greeting. Type:
       To view the greeting click <a href=""'index.php?mod=view_greeting&id_grt={rsGreeting.id_grt}&random_grt={rsGreeting.random_grt}'>here</a><br/>.
                                  
       Note: Type the correct extension for the index file, according to your server model (index.php, index.cfm, index.asp).
                                    
     • Press Enter/Return to pass to the third row and type: Thank you for using our services.
4. Switch to the Advanced tab by clicking on it. To define the starting condition click the Build Condition button. A window will pop-up.                                   
5. • The user interface is divided into two tabs: Basic and Advanced. You can use the Basic tab to create simple conditions that use only two terms:
            
     
     Illustration 65: Define the first condition
                       
   • Click the InterAKT Dynamic Data icon next to the Expression 1 text box. In the dialog box select the visited_grt recordset field. The generated mark-up is {rsGreeting.visited_grt}.
   • In the Condition drop-down menu select equal.
   • In the Expression 2 text box enter 0.
   • Now click the Advanced tab to add the second condition – check if the confirm_grt field equals 1.
   • The Advanced tab contains a textarea that allows entering the condition. You can still use the InterAKT mark-up language, although you must enter it by hand. Place the mouse cursor after the existing text – the condition built earlier – and enter AND {rsGreeting.confirm_grt}==1.
     Note: On ColdFusion, the equality operator is EQ.
            
     
     Illustration 66: Add the second condition
                         
   • Click OK to confirm the condition you've entered.

6. The Send E-mail server behavior interface will display the entered condition in the Condition text box. You can click OK to apply the server behavior:
          
   
   Illustration 67: The condition is displayed in the trigger interface

Now the greeting viewing page is completed. Before testing it you must add an entry for it in the Server-Side Includes From List on the application index page:

1. Open the index page in Dreamweaver.
2. Double-click the Server-Side Includes From List server behavior to edit it.
3. Click the Plus(+) button to add a new included file. Configure it:
4. • URL parameter value: view_greeting.
   • Filename: click Browse and select the view_greeting page in the site root.
   • Page title: View the greeting.
5. Click OK to save the changes.

To test it out open one of the greetings you've sent and click on the view link. If you have also checked the Send confirmation option, an e-mail message will be sent:

Illustration 68: Confirmation e-mail

With this the application front-end is complete. Users can use your site to send greetings and receive confirmations. All that remains to be done is the administration section, which will allow you to upload new cards.