A Case Study

To clarify the discussion of page types and their capabilities, we develop the pages of a web-based address book as a sample application.  The ER diagram for this address book is shown in the following figure.

ER diagram for the address book application

In this address book, information on name, last name, phone number and address are stored for every contact.  Also it is possible to assign a number of email addresses and the associated comments to every contact.  The following SQL statements will create the necessary tables in a PostgreSQL database.  The two serial fields have been added to the required attributes for providing uniqueness among the rows.

CREATE TABLE "contact" (
"id" SERIAL,
"name" varchar (20) NOT NULL,
"lastname" varchar (30) NOT NULL,
"phone" varchar (15) NOT NULL,
"address" text,
PRIMARY KEY ("id"));

CREATE TABLE "email" (
"id" SERIAL,
"email" varchar (50) NOT NULL,
"comment" varchar (60),
"contactid" integer REFERENCES "contact"("id") NOT NULL ,
PRIMARY KEY ("id"));

The application that we are going to develop should allow its users to browse the address book, insert new contacts and email addresses, modify the information on contacts, search for contacts based on different attributes and finally it should allow for removal of unwanted contacts or email addresses.  As the designer, we decide to develop the following pages.  For every page, the appropriate page type is specified within the parentheses.

1. Browse the address book, contactlist.xml (view)

2. Display contact information together with the email addresses, contactdetail.xml (view)

3. Insert new contact together with the email addresses, contactinsert.xml (insert)

4. Append new email addresses to contact information, emailadd.xml (insert)

5. Modify contact information, contactedit.xml (edit)

6. Modify email address, emailedit.xml (edit)

7. Search address book, contactsearch.xml (search)

8. Remove contact information together with the email addresses, contactdelete.xml (delete)

9. Remove an email address, emaildelete.xml (delete)

The following figure outlines the relationship between these pages, aka the navigation structure of the applicaton:
 

The links between the pages of address book application

The arrows represent the links which can take the user from one page to the other.  This diagram looks like a DFD, however in a DFD we need to identify the data items that are sent from one process to the other.  In the architecture that this tool uses, every link sends one data item to its target page.  Usually this data item is the value of the primary key attribute for some entity in the source page.  This value can be used in the target page for a variety of purposes, such as filtering the rows that are displayed, identifying the row or rows that should be edited or deleted and also it may be used as the default value of some input field in a data entry form.

In the following sections, we will develop the pages of the address book application while discussing the features of each page type.