Accessibility

Dreamweaver Article

 

Building a contact management application using Adobe Dreamweaver Developer Toolbox – Part 3: Improving the contact management application

Razvan Cotlarciuc

Adobe

In this tutorial you will use Developer Toolbox features to build a web application for managing the contacts of a person or company. Multiple companies or individuals can be created, each with one or more contacts. The application will let you:

This tutorial contains three parts, starting from the basic functionality, and enriching it with different features:

  1. Add, Edit and Delete Companies and Contacts (Part 1)
  2. Validate Contact Information (Part 2)
  3. Improve the Contact Management Application (Part 3)

In this last part of the tutorial you will enhance the web-application already created by adding features that will save time and make it more user-friendly and interactive.

The following topics of the tutorial are optional, as they only add features to the already finished application. They will teach you how to:

This section contains the following topics:

The estimated completion time for this section is about 40 minutes. It depends on your authoring knowledge with Adobe Dreamweaver and Developer Toolbox.

The estimated completion time for all parts of this tutorial (considering the initial planning, the mandatory sections and the proposed improvements) is about 100 minutes. It also depends on your authoring knowledge with Adobe Dreamweaver and Developer Toolbox.

It's recommended that you follow all tutorial parts in the intended order to avoid potential problems.

Requirements

In order to complete this tutorial, you need to install the following software and files:

Dreamweaver CS3

Dreamweaver Developer Toolbox

Adobe Extension Manager

Sample files:

System requirements:

Prerequisite knowledge:

I would recommend that you are familiar with Dreamweaver CS3 Recordsets. Working with Server Behaviors will also be helpful.

Insert both company and main contact

When adding a new company, almost in all cases you already have at least one contact for it. So, wouldn't it be easier if you could add the main contact alongside the company? This means that you will insert information into the company and the contact tables from the same page, using a single page submit operation.

In Developer Toolbox you can do this by using the "Insert Into Two Tables Wizard." To build such a page, follow the instructions below:

  1. First create a new file in the site structure, in the company folder. The name used in this tutorial is insertcomcon, followed by the extension required by your server model.
  2. Open the newly created file in Dreamweaver. The page design will be similar to the one used for the regular company insertion page. Copy the design section and change the header text to "Add company and main contact" (without the quotes).
  3. Click in the empty paragraph after the horizontal rule, and apply the "Insert Into Two Tables Wizard." You can open it by clicking on its button, located in the Developer Toolbox tab of the Insert bar.
  4. The wizard's user interface has five steps. The first three steps define all options for the tables and fields used in the transaction, while the last two steps allow setting up validation rules for each form field.

  5. This wizard benefits from the user interface persistence implemented by Developer Toolbox. If you haven't already created the insert page for companies and the insert page for contacts, you should manually configure this wizard. If you have already created them, you will have to configure only the first step of this wizard and then just check the next steps to validate them:

    • In the first step you must configure the connection, table and primary key fields to use (see Figure 1).

      First step of the "Insert Into Two Tables Wizard"

      Figure 1. First step of the "Insert Into Two Tables Wizard"

    • The "Connection" drop-down menu already contains the connection you've already used throughout this tutorial.
    • In the "Master table" drop-down menu select the company_com table. The id_com field is selected by default in the "Primary key column" drop-down menu.
    • In the "Detail table" drop-down menu select the contact_con table. The "Primary key column" and "Foreign key A foreign key is a field from a database table that refers to (or targets) a specific key, usually the primary key, in another table. This is a convenient way of logically linking information from related tables in the same database. For instance, a table that stores information about products can contain a foreign key that references the primary key field in a table that stores manufacturers. This way, each product has an associated manufacturer – its associated foreign key points to the unique identifier of the manufacturer. Please note that the foreign key is not unique, but the referenced field (the primary key in the referenced table) usually is.column" will be automatically completed with id_con and respectively idcom_con.
    • Thanks to the user interface persistence, the "After inserting, go to" text field already contains the name of the index file.

    • If you have created the insert companies and contact pages, it’s safe to click the Finish button to apply the code to the page—as the fields to use for each table's form have their properties set from the persistence cache. However, you may browse through the wizard's next steps to make sure everything is correctly filled in (see Figures 2 and 3).

      The company's name and address fields

      Figure 2. The company's name and address fields

      The contact's table fields

      Figure 3. The contact's table fields

    • As you can see, the idcom_con field does not appear in the "Form fields" grid of the wizard's third step. That is because the value for the foreign key field is set automatically to the unique identifier of the company that is added.

    • At this point, click on the finish button to add all elements into the page. The wizard will add the HTML form elements, as well as the server behaviors used to perform the insert operations (see Figure 4).

      Insert into two tables page in Design View

      Figure 4. Insert into two tables page in Design View

  6. Now that the insertcomcon page is done, you can save and test it in browser. To preview the page in the browser just press the F12 key. It will let you add a new company and its main contact at once. When you return to the listing page, you will notice the new pair being displayed.

If you prefer this method of adding a company, replace the link to add a company from the index page, to point to the new insert page (insertcomcon).

In the next topic , you will learn how to enhance this insert method by allowing the choice of adding some more contacts after the company insert.

Add more contacts after company insert

In this section of the tutorial, you will learn how to configure the newly created insert page (insertcomcon), so that you can decide if you want to add more contacts after inserting the company and its first contact or not.

To accomplish this, you will need a way for the user to pass his decision (a menu, radio-button, checkbox), and a way to redirect to a specific page based on a condition. As for passing the decision part, there is no problem, only the choice of the HTML form elements remains. For the conditional redirect action, however, you would have some hand-coding to do.

Developer Toolbox has this need covered too, however, through the “Redirect To Page” trigger. As all the other Developer Toolbox triggers, this one can be turned into a conditional trigger, simply by using the expression builder on the Advanced tab.

To add this functionality, you will have to alter the design of the insert page (e.g. insertcomcon.php), and only then add the application logic that performs the actual task.

Alter the page design

This alteration concerns adding a new form element, so that the user option of whether to add some more contacts or not can be passed to the trigger. The simplest of elements that can be used effectively is a checkbox. To change the design, follow the instructions below:

  1. Click on the last row that contains a text box. If you haven't removed any fields in the wizard configuration, it should be the row containing the birthday field.
  2. Add a new row below the current selection. To do this, right-click in the cell and select Table > Insert Rows and Columns. Click OK in the dialog box that opens.
  3. In the new row, type in the first cell "Add more contacts" (without the quotes) as a label for the checkbox.

  4. Click in the second cell. Here is where you will insert the checkbox. Add it from the Forms tab of the Insert bar, by clicking on its button. Configure the checkbox, by changing its name to "addmore" and set the "Checked value" field to 1. Also, leave the "Initial State" on the Unchecked setting (see Figure 5).

    The newly added checkbox in the Property inspector

    Figure 5. The newly added checkbox in the Property inspector

  5. Now the checkbox appears on page, but to ease future work you should add it to the Bindings panel. Click on the Plus (+) button of the Bindings panel and select Form Variable.

    Note: For ASP_VBScript users, you should select the Request Variable type, and then in the dialog box select Request.Form from the drop-down menu.

  6. Enter the checkbox name in the dialog box's text field: addmore. Click OK to
    add the new variable to the environment.
  7. These are all the changes you will make to the page design. Save the page, and proceed to adding the trigger for the redirect operation.

Add application logic

The actual operation will be based on the "Redirect To Page" trigger, which will be set to start on a custom condition: that the "Add more contacts" checkbox is checked.

To add and configure the redirect trigger, follow the instructions below:

  1. Click the Plus (+) button of the Server Behaviors tab and select Developer Toolbox > Forms > Redirect To Page. This will open the redirect trigger dialog box.

  2. For this trigger you will have to set options for both the Basic and Advanced tabs. On the Basic tab, just enter the page to which the user will be redirected. Either enter its name, or use the "Browse…" button to locate the insert page in the contact folder (see Figure 6).

    The "Redirect to Page" trigger, Basic tab

    Figure 6. The "Redirect to Page" trigger, Basic tab

  3. Move on to the Advanced tab, where you can define a starting condition for the redirect. You can either write the condition in the text-field, or use the Condition Builder, by pressing the "Build condition" button. Let's use the latter (see Figure 7).

    The "Redirect to Page" trigger, Advanced tab

    Figure 7. The "Redirect to Page" trigger, Advanced tab

  4. The Condition Builder offers an easy way to create starting conditions that use two or more terms, and an operator. Its dialog box is divided into two tabs: Basic, where you can define a simple condition based on two terms and the default operators, and Advanced, where you can enter more complex conditions in a text-area. Since in this tutorial you'll only need to compare if the addmore variable has been checked, the Basic tab will be sufficient.

  5. It's time to build the actual condition. Follow the instructions below to construct it:

    • For the first term you will use the Form Variable defined when you've added the checkbox into the page. Click the blue lightning bolt icon to open the Developer Toolbox Dynamic Data user interface. Here, select the Form Variable option in the "Get values from" drop-down and then pick addmore from the "Variable" select (see Figure 8).

      The Developer Toolbox Dynamic Data user interface

      Figure 8. The Developer Toolbox Dynamic Data user interface

    • Click OK and notice that a dynamic construct has been added into the first element's text field.
    • Next we’ll choose the operator. From the "Condition" drop-down list select "==" to check for equality.

    • For the second operator, you will use an entered value. Since the Checked Value property for the checkbox has been set to 1, this is the value that the condition should use. This way, if the trigger's condition that the checkbox value equals 1 is true, the redirect will take place. Otherwise, the default redirect of the insert operation (to the main index) will execute (see Figure 9).

      The Condition Builder settings for the Redirect To Page trigger

      Figure 9. The Condition Builder settings for the Redirect To Page trigger

    • Click OK to accept the condition.

      The expression will be displayed in the "Redirect To Page" trigger's Advanced tab, in the "Condition" text field.

  6. Now the trigger configuration is finished, and you can click OK to add the trigger into the page. Then you can save it, upload it on the server and test it in the browser.

When you add a company through this insert form, if the "Add more contacts" checkbox is checked, when submitting the page, you will be taken to the contact insert page, where you can continue adding entries (see Figure 10).

The insertcomcon.php page, browser view

Figure 10. The insertcomcon.php page, browser view

In the next topic  of the tutorial you will create a page that will automatically send birthday greetings to your contacts.

Send automatic birthday greetings

The next enhancement to your web application is meant to ease the task of checking daily which contact's birthday it is and use your e-mail client to send a greeting. It will all be done in an automatic manner at the click of a button.

You will have to create a new page in your site's root folder, which will contain the elements that send the e-mail. Switch to Files tab and create a new page; give it a suggestive name (e.g. birthday.php). Later on you’ll add a link in the main page, which will point to this one.

Note: If the Files tab is not visible, open it from Window > Files.

Sending the birthday greetings will be done in a semi-automatic manner at first. The page displays a list of all persons that were born on this day, allowing you to decide whether to send the e-mail or not. The automatic part is that you'll only have to click a single button to send the greeting to all people in the list.

To start creating the page, open it in Dreamweaver, and continue with this tutorial: you will create the design first. Later on, you'll add the code that does all of the actions.

When creating the basic design, the approach is the same as for the contact or company insert and update pages:

  1. On top of the page, using a header 2 format, place the page title: "Persons born today".
  2. Place a horizontal rule, to separate the header from the content.
  3. Create a new paragraph where the list will display.

The list of people born on the day the page is being accessed is in fact a dynamic table, as it should retrieve the names from the contacts table. Before using the Dynamic Table command however, you have to create a recordset containing the names.

To create the recordset, follow the instructions below:

  1. Click the Plus (+) button of the Bindings panel. If the Bindings panel is not visible, open it from Window > Bindings.
  2. Select Recordset from the drop-down menu. The Recordset dialog box opens in the Basic form. Switch to the Advanced form by clicking the Advanced button. In this form, the user interface allows you to enter the SQL query by hand. This way, you can create more complex queries that do exactly what you need.
  3. In the Connection drop-down menu select the database A database refers to data organized and stored on a computer that can be searched and retrieved by a computer program. Most industrial-strength and many smaller database applications can be addressed using SQL (Structured Query Language).connection used for your site.

  4. In the SQL text area, enter the following query:

    For MySQL: 

    SELECT *
FROM contact_con
WHERE date_format(birthday_con, '%m%d') = date_format(now(), '%m%d')

    For Microsoft Access:

    SELECT
      *
FROM contact_con
WHERE birthday_con = Date()

    Note: Microsoft Access uses the same date format as your operating system to store date values.

    For Microsoft SQL Server: 
    SELECT
      *
FROM dbo.contact_con
WHERE DAY(dbo.contact_con.birthday_con) =
      DATEPART(DAY,GETDATE())
and MONTH(dbo.contact_con.birthday_con) =
      DATEPART(MONTH,GETDATE())

    Note: a query is a SQL command that will extract information from the tables of a database. Essentially, a query is a request for information from your database.

  5. The query above is used to retrieve from the contact_con table only the entries containing in their birthday field the same day-month combination as for the current date. The date_format function retrieves from the data source specified as the first parameter, only the format specified by the second parameter. For example, the call: date_format("2005-03-15", '%m%d') will return "03-15", meaning the month and day. The now() function returns the current date.

  6. As you can see, the query above returns only the entries that have the birthday field set on the current day. The SQL query is the last thing done on the new recordset dialog box. Click Test to see if anyone is born on this day, or the OK button to add the recordset into the page (see Figure 11).

    The standard Recordset’s Advanced view

    Figure 11. The standard Recordset’s Advanced view

After having created the recordset you can create the listing of its content, with the use of a dynamic table. To add a dynamic table, click on its button in the Data tab of the Insert bar. Configure it to display entries from the recordset created earlier, rsContacts, and to display all records. Also, set the table border, cell spacing and padding to 0. Click OK to add the dynamic table into the page (see Figure 12).

The Dynamic Table settings

Figure 12. The Dynamic Table settings

At this point, a table with all data concerning the contacts has been added in the last page paragraph. Not all of the entries are useful, or meaningful, as only the actual contact name is of interest. Therefore, delete all table columns except the name_con one.

For the remaining column, change the name_con static text into a more understandable one: "Name". Also, set the cell as having the header property, from the Property inspector.

Next comes the switch that will start the mail sending operation: an HTML form button. Place one in a new paragraph below the dynamic table. When asked if a form tag should be added, answer "Yes". To make the button more intuitive, replace the Submit label with: "Send birthday greetings." Leave the button's name as is, "Submit."

The email sending is implemented through the use of one of Developer Toolbox's triggers: the “Send E-mail to Recipients from Recordset” trigger. However, as any trigger, it needs a transaction on page. As there is no need to add, update or delete anything, the only one that will suit this purpose is the custom transaction. The custom transaction allows you to define the fields to use, and the SQL which will use it. Also, you can just use it as a placeholder, with no SQL operation at all.

Add a "Custom Transaction" to the page, by clicking the Plus (+) button of the Server Behaviors tab, and selecting Developer Toolbox > Forms >Advanced > Custom Transaction. Configure it as follows:

  1. In the "Connection" drop-down menu select the database connection defined for your site. Although there will be no database operation involved, the transaction uses the connection for error handling.
  2. The actual mailing operation has to start only when you press the "Send birthday greetings" button. To enforce this, you must set it as a starting rule for the custom transaction. In the "First check variable" drop-down menu select Form Variable and in the text field that follows enter the button's name: Submit.
  3. In the "When finished, go to" text box enter the page to return to after the e-mail messages have been sent. Either enter the name of the main page or select it by pressing on the "Browse…" button.
  4. These are all of the options to set for the custom transaction. Click OK to apply the configuration.

Now that a transaction exists on the page, you can also add triggers that register to it, as the Send E-mail trigger, for instance. Therefore, you can finally complete the last action in this tutorial—apply the "Send E-mail to Recipients from Recordset" trigger:

  1. To access the server behavior go to the Server Behaviors tab, click the Plus (+) button and select Developer Toolbox > Send E-mail > Send E-mail to Recipients from Recordset.
  2. You should use this one instead of the regular "Send E-mail" because we already have the list of contacts whose birthday is today in the rsContacts recordset created earlier.

  3. Configure the trigger to send the correct e-mail to the correct addresses:

    • In the "Recordset" drop-down menu select rsContacts.
    • In the "E-mail to field" select the table field that stores the e-mail address of the contact.
    • In the "From" text-box, enter the e-mail address from which the mail will appear to have originated. Enter an address that will identify you as the sender (e.g. admin@mysite.com).
    • In the "Subject" text-box enter the e-mail subject. You can even enter dynamic data, by using the Developer Toolbox Dynamic Data icon, and selecting the desired dynamic variable. For this mail, type the static text: "Happy Birthday", and then press the blue lightning icon to select the dynamic name of the contact. When the interface opens choose Recordset Field for "Get values from" drop-down, rsContacts for "Recordset" and then name_con from the field select menu.
    • When you click OK in the Developer Toolbox Dynamic Data interface, some code will be added to the "Subject" field. The markup placed between curly brackets will be replaced at runtime with its dynamic value.
    • In the "Body" drop-down menu, select the Write content option to type in the e-mail content.

    • In the "Content" text area enter the message to pass to the recipient; in this case enter a Happy Birthday greeting from you (see Figure 13).

      The "Send E-mail to Recipients From Recordset" interface

      Figure 13. The "Send E-mail to Recipients From Recordset" interface

    • This is all you have to configure for the trigger, in order for the e-mail sending to work. You should check the "E-mail Settings" in the Developer Toolbox Control Panel, where you can set the main options for your server. If these are not properly set, the messages will not get delivered. You must fill in the server address (or name), the port (the default port is 25), the user name and the password. Optionally, you can also set the default sender field.
    • Click OK to apply the code to the page.

This was the last step to create the birthday greetings page. You can now save, upload and test it. If no names appear in the list, it may be due to the fact that no contacts in your table are born on this day. Either try again another day, or enter a contact whose birthday is today.

Note: For PHP users, when using the "Send E-mail to Recipients from Recordset" server behavior to send messages to a large number of recipients, make sure the value of the max_execution_time variable in your php.ini configuration file is sufficiently large to support the execution of the code. Sending many e-mail messages might take longer than the default setting, depending on your server configuration and specifications. If you encounter an error similar to the following: Fatal error: Maximum execution time of 30 seconds exceeded in c:\server\site\includes\common\lib\email\Pear\Net\Socket.php on line 241 please increase the value of the max_execution_time variable in php.ini, or contact your network administrator.

Display number of contacts per company

In this page you will use Query Builder to modify the main index.php page so that it will display the number of contacts per each company. To get a count of a company's contacts, you will have to modify the master1company_com recordset, which was generated by the "Nested Repeat Region" server behavior.

Follow the instructions below:

  1. Begin by opening the main index.php page. In the Application panel, under the Bindings tab, you'll see the two queries which were generated by the "Nested Repeat Region" earlier in the tutorial.
  2. Open the master1company_com recordset by double-clicking on its name.

  3. Once the query code looks like the one below, click the "QuB…" button on the right (see Figure 14).

    The new SQL for the master1company_com recordset

    Figure 14. The new SQL for the master1company_com recordset

  4. In the QuB Visual Recordset window that appears, click the "New Query" button. When asked type a temporary name for the new query (e.g.: "test"), and then click OK.

  5. After clicking OK, the Query Builder (QuB) interface will open in a separate browser window. The left side contains a Tables panel with a list of the tables in the current database. Select both tables as shown below (see Figure 15).

    Select both tables in the Query Builder (QuB) browser window

    Figure 15.  Select both tables in the Query Builder (QuB) browser window

  6. Now both tables will be in the Database Diagram. Create a table relation by dragging the idcom_com foreign key (from the contact_con table) and dropping it on the id_com field (on the company_com table) as shown below (see Figure 16).

    Linking the contacts and companies tables in Query Builder (QuB)

    Figure 16. Linking the contacts and companies tables in Query Builder (QuB)

  7. A blue line will now appear between the two tables (see Figure 17).

    The relation between the company_com and contact_con tables

    Figure 17.  The relation between the company_com and contact_con tables

  8. For this query we will use the id_com, name_com and idcom_con fields. Use the checkboxes to select them from the Database Diagram.
  9. After checking the boxes, the fields will now appear in the Columns section of the Query Builder page.

  10. With the necessary fields now listed in the Columns section the various options can be used to further organize the data. On the contact_con.idcom_con field, we'll use the count option in the "Grouping" drop-down menu (see Figure 18).

    The contents of the Columns section of the Query Builder page

    Figure 18. The contents of the Columns section of the Query Builder page

  11. This last step will give you a count of all the contacts associated with a company. You can verify the result in the Results preview panel (see Figure 19).

    The actual results of the current SQL query

    Figure 19.  The actual results of the current SQL query

  12. If the results match what you're looking for, then save the Query using the Query menu, "Save" option.
  13. Now that the query is saved, you can close the Query Builder (QuB) interface and go back into Dreamweaver. The QuB Visual Recordset window should still be open.
  14. You should press the "Refresh…" button located next to "Query name" drop-down and then select the query you just created.

  15. After selecting the query name, the SQL text area will contain the code built from the Query Builder interface (see Figure 20).

    The SQL query created using Query Builder is now being used in Dreamweaver

    Figure 20. The SQL query created using Query Builder is now being used in Dreamweaver

  16. Click OK. The new recordset now appears alongside the others in the Application panel.
  17. Now in the Application panel > Bindings tab, you can open the recordset and find the count_idcom_con1 field listed.

  18. Select the text labeled "Actions" in the Nested Repeat Region table (see Figure 21).

    Selecting the "Actions" text in Design View

    Figure 21. Selecting the "Actions" text in Design View

  19. Take the count_idcom_con_1 field (shown in step 17) and drag it over to the Nested Repeat Region table. Drop it in the place of the "Actions" text. Then type the word "contacts" in the same cell. When you're done, the page should look like this (see Figure 22).

    The index page listing the number of contacts as well, Design View

    Figure 22. The index page listing the number of contacts as well, Design View

Now you can view the final page with the number of contacts in a browser (see Figure 23).

The index page listing the number of contacts as well, browser view

Figure 23. The index page listing the number of contacts as well, browser view

This concludes the Contact Management Application tutorial. You have taken three easy steps to create a full management system for your contacts.

Where to go from here

You should take a look at the other Adobe Dreamweaver Developer Toolbox tutorials:

About the author

Razvan Cotlarciuc is a member of the Dreamweaver development team. When he is not working on job-related projects, he enjoys learning new technologies, surfing the Internet, and playing tennis.