Chapter 13: Creating the Knowledge Bank Application


The Knowledge Bank application needs to be a Web-based application with a centralized database. In Chapter 12, "Project Case Study—Creating the Knowledge Bank Application," you identified the various output screens that need to be designed for this application. In this chapter, you'll be designing these screens using Dreamweaver MX. In addition, you'll write the code to add functionality to the application.

Designing Web Pages for the Knowledge Bank Application

Before moving on to designing these pages, create a directory named ProjectTwo. This directory will store all the project files.

To design static components, such as controls on Web pages, you'll use Dreamweaver MX. For more details on designing Web pages using Dreamweaver MX, refer to Appendix D, "Using Dreamweaver MX." Now I'll explain the details for each interface separately.

Designing the Login Page

Using Dreamweaver MX, create a basic HTML page and save it as Login.cfm in the ProjectTwo directory. Next, create various controls on the Login page, as shown in Figure 13.1. This page prompts users for their user ID and password. Clicking the Login button activates the login validation script. Depending on the user ID, the users are directed to either the User Module Start page or the Admin Module Start page.

click to expand
Figure 13.1: The Login page.

The Login page contains the following controls:

  • A Form control to act as the container for the other controls on the page.

  • An HTML Table control to hold the Text Field controls.

  • Two Text Field controls to accept the user ID and password.

  • A Button control to validate the login information provided by the user.

The Form control is the main container control on this page. The HTML Table control is placed within the Form control. Set the properties of the Form control as shown in Table 13.1.

Table 13.1: Properties Assigned to the Form Control

Property

Value

(ID)

Login

Name

Login

Action

processlogin.cfm

Method

POST

Table 13.2 lists the properties assigned to the Text Field controls used on the Login page.

Table 13.2: Properties Assigned to the Text Field Controls

Control

Property

Value

Text Field1

Name

user_id

Text Field1

Size

20

Text Field1

Type

Single Line

Text Field2

Name

password

Text Field2

Size

20

Text Field2

Type

Single Line

Table 13.3 lists the properties assigned to the Button controls used on the Login page.

Table 13.3: Properties Assigned to the Button Control

Control

Property

Value

Button1

Name

Submit

Button1

Label

Login

Button1

Action

Submit form

Designing the User Module Start Page

The User Module Start page is used to upload the articles to the server. It also contains links to view the directory listing and search articles in the KnowledgeBank database.

Using Dreamweaver MX, create a new Web page named UserStartPage.cfm. Figure 13.2 displays the design of the User Module Start page.

click to expand
Figure 13.2: The User Module Start page.

In addition to the Form control, which is the main container control, the User Module Start page contains the following controls:

  • An HTML Table control to hold the Text Field controls.

  • Five Text Field controls to accept and display the article's details, such as title, author, description, keywords, and version.

  • Two Drop-Down List controls to display the category and research center fields.

  • A File control to upload the articles.

  • A Button control to upload the articles and save the record for the uploaded articles in the back-end database.

The text fields placed in the table also have corresponding labels, which are created using HTML. The complete code for this Web page is discussed in "The Workings of the Knowledge Bank Application" later in this chapter.

After creating the controls, you need to set their properties. Table 13.4 lists the properties assigned to the Text Field controls on the page.

Table 13.4: Properties Assigned to the Text Field Controls

Control

Property

Value

TextField1

Type

Text

TextField1

Name

Article_Title

TextField1

Size

50

TextField1

MaxLength

200

TextField1

Required

Yes

TextField1

Message

"Title of the article should be specified"

TextField2

Type

Text

TextField2

Name

Author

TextField2

Size

50

TextField2

MaxLength

100

TextField2

Required

Yes

TextField2

Message

"Author of the article should be specified"

TextField3

Type

Text

TextField3

Name

Article_Desc

TextField3

Size

50

TextField3

MaxLength

200

TextField4

Type

Text

TextField4

Name

Article_Keywords

TextField4

Size

50

TextField4

MaxLength

100

TextField5

Type

Text

TextField5

Name

Article_version

TextField5

Size

20

TextField5

MaxLength

2

TextField5

Required

Yes

TextField5

Validate

Integer

TextField5

Message

"Article Version should be specified"

The List controls on the page display the various article categories and research centers. To create a List control, use the <SELECT> tag. The <OPTION> tag is used to provide the different options in the List control. Refer to Appendix D for more details on how to use these tags. At design time, set the properties of the List controls as shown in Table 13.5.

Table 13.5: Properties Assigned to the List Controls

Control

Property

Value

List1

Name

category

List1

Size

1

List2

Name

RCenter

List2

Size

1

Next, set the options for the List control named category as Fine Chemicals, Health Foods, Animal Health Care, Pharmaceuticals, and New Drug Discovery. Set the options for the List control named RCenter as France, Ireland, New Zealand, India, and Peru.

To upload the file on the server, the File control is used. Set the properties of the File control as shown in Table 13.6.

Table 13.6: Properties Assigned to the File Control

Control

Property

Value

File

Type

File

File

Name

MyFile

To save the record for the article, the Button control is used. Set the properties of the Button control as described in Table 13.7.

Table 13.7: Properties Assigned to the Button Control

Control

Property

Value

Button

Type

Submit

Button

Name

btnSave

Button

Value

Upload Article

Designing the Directory Listing Page

Using Dreamweaver MX, create a basic HTML page and save it as ViewDirectoryListing.cfm in the ProjectTwo directory. As displayed in Figure 13.3, the Directory Listing page consists of very few static controls. This page displays the file details in the user's directory using the HTML Table control. In addition, the page contains a link to navigate back to the User Module Start page. To create the directory listing, the <CFDIRECTORY> tag is used. The complete code for the page is provided in "The Workings of the Knowledge Bank Application."

click to expand
Figure 13.3: The Directory Listing page.

Designing the Search Knowledge Bank Criteria Page

The Search Knowledge Bank Criteria page is loaded when the user clicks the Search Knowledge Bank link on the User Module Start page. This page enables you to search a particular article based on specified criteria.

Using Dreamweaver MX, create a basic HTML page named SearchArticles.cfm in the ProjectTwo directory. The design of the page is shown in Figure 13.4.

click to expand
Figure 13.4: The Search Knowledge Bank Criteria page.

The Search Knowledge Bank Criteria page contains the following controls:

  • An HTML Table control to hold the List controls.

  • Three List controls to display the values for the criteria fields.

  • A Button control to accept the search criteria and find the matching articles.

Set the properties of the List controls as shown in Table 13.8.

Table 13.8: Properties Assigned to the List Controls

Control

Property

Value

List1

Name

category

List1

Size

3

List1

Multiple

NO

List1

Query

get_categories

List1

Value

category

List1

Display

category

List2

Name

authorname

List2

Size

3

List2

Multiple

NO

List2

Query

get_authors

List2

Value

Author

List2

Display

Author

List3

Name

rcenter

List3

Size

3

List3

Multiple

NO

List3

Query

get_rcenters

List3

Value

ResearchCenter

List3

Display

ResearchCenter

Note

The <CFSELFCT> tag is used to create List controls on the forms. The QUERY attribute is used to specify the data source for the entries to be displayed in the list. The field name specified in the DISPLAY attribute is displayed in the list. It's possible to use another field for the value of the List control. This field can be specified in the VALUE attribute.

Next, set the properties of the Button control as shown in Table 13.9.

Table 13.9: Properties Assigned to the Button Control

Control

Property

Value

Button

Type

Submit

Button

Name

Submit

Button

Value

Search Articles

Designing the Search Results Page

The Search Results page displays the results of the article search. Create a new Web page named SearchResults.cfm. Its design is shown in Figure 13.5.

click to expand
Figure 13.5: The Search Results page.

Most of the page's content is generated dynamically. The corresponding code is discussed in "The Workings of the Knowledge Bank Application." The dynamically generated content is displayed in the HTML Table control. The links to perform more searches and navigate back to the User Module Start page are placed at the bottom of the page.

Designing the Admin Module Start Page

The Admin Module Start page is used to create logins for new users. It also contains links to verify new articles and view the activity log for the selected user. The articles need to be verified to make sure they're relevant and have sensible content. After the articles are verified, they're made available to other users. Create a new Web page named AdminStartPage.cfm, whose design is shown in Figure 13.6.

click to expand
Figure 13.6: The Admin Module Start page.

As shown in Figure 13.6, the Admin Module Start page contains two Form controls. The first Form control contains an HTML Table control, five Text Field controls, and a Button control. This form is used to accept the user's details to create a new login. The second Form control contains a List control and a Button control. This form is used to accept the username whose activity log needs to be viewed. The second Form control contains a link for verifying new articles. The complete code for this Web page is discussed in "The Workings of the Knowledge Bank Application." The Admin Module Start page contains the following controls:

  • An HTML Table control to hold the Text Field controls

  • Five Text Field controls to accept the login details, such as user ID, password, directory name for the user, and Delete permission

  • Two Drop-Down List controls to accept the status of the user and Delete permission

  • A List control to accept the user ID for viewing the activity log

  • Two Button controls—one for creating the new login and the other for viewing the activity log for the selected user

After creating the controls, you need to set their properties. Table 13.10 lists the properties assigned to the Text Field controls on the page.

Table 13.10: Properties Assigned to the Text Field Controls

Control

Property

Value

TextField1

Type

Text

TextField1

Name

UserID

TextField1

Size

15

TextField1

MaxLength

10

TextField1

Required

Yes

TextField1

Message

"User ID should be specified"

TextField2

Type

Text

TextField2

Name

Password

TextField2

Size

15

TextField2

MaxLength

10

TextField2

Required

Yes

TextField2

Message

"Password should be specified"

TextField3

Type

Text

TextField3

Name

DirName

TextField3

Size

50

TextField3

MaxLength

100

TextField3

Required

Yes

TextField3

Message

"Directory name should be specified"

The Drop-Down List controls on the page are used to display status and Delete permission. At design time, set the properties of the List controls as shown in Table 13.11.

Table 13.11: Properties Assigned to the List Controls

Control

Property

Value

List1

Name

Status

List1

Size

1

List2

Name

DelPerm

List2

Size

1

Next, set the options for the Status List control to Active and Deactive. Set the options for the DelPerm List control to Y and N.

Set the properties of the List control as shown in Table 13.12.

Table 13.12: Properties Assigned to the List Controls

Control

Property

Value

List1

Name

SelectedUser

List1

Size

3

List1

Multiple

NO

List1

Query

get_users

List1

Value

UserID

List1

Display

UserID

The Button control on the first form is used to create the new login record. The Button control on the second form is used to view the activity log for the selected user. Set the properties of the Button controls as described in Table 13.13.

Table 13.13: Properties Assigned to the Button Controls

Control

Property

Value

Button1

Type

Submit

Button1

Name

btnSave

Button1

Value

Create Login

Button2

Type

Submit

Button2

Name

btnView

Button2

Value

View Activity Log

Designing the Verify New Articles Page

The Verify New Articles page is used to display the articles that have not been verified by the application's administrator. Create a new Web page named VerifyNewArticles.cfm. Figure 13.7 displays the design of the Verify New Articles page.

click to expand
Figure 13.7: The Verify New Articles page.

The Verify New Articles page contains a Form control, an HTML Table control, a Checkbox control to mark the articles to be verified, and a Button control to update selected articles as verified. Apart from these static controls, most of the page's content is generated dynamically and is displayed in the HTML Table control. The link for navigating back to the Admin Module Start page is placed at the bottom of the page. The complete code for this page is discussed in "The Workings of the Knowledge Bank Application."

Set the properties of the Checkbox control as shown in Table 13.14.

Table 13.14: Properties Assigned to the Checkbox Control

Control

Property

Value

Checkbox1

Type

checkbox

Checkbox1

Name

ArticleID

Checkbox1

Value

#ArticleID#

Set the properties of the Button control as shown in Table 13.15.

Table 13.15: Properties Assigned to the Button Control

Control

Property

Value

Button1

Type

Submit

Button1

Name

btnSave

Button1

Value

Mark Selected Articles as Verified

Designing the View Activity Log Page

The View Activity Log page is used to display the activity log for the selected user. The activity log is created as a result of the user's activities, such as uploading and deleting files. Create a new Web page named ViewActivityLog.cfm. Figure 13.8 displays the design of the Verify New Articles page.

click to expand
Figure 13.8: The View Activity Log page.

Most of the page's content is generated dynamically. The page also contains a link at the bottom to navigate back to the Admin Module Start page. The complete code for this page is discussed in the next section.




Macromedia ColdFusion MX. Professional Projects
ColdFusion MX Professional Projects
ISBN: 1592000126
EAN: 2147483647
Year: 2002
Pages: 200

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net