|
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.
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.
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.
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.
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.
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.
Control | Property | Value |
---|---|---|
Button1 | Name | Submit |
Button1 | Label | Login |
Button1 | Action | Submit form |
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.
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.
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.
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.
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.
Control | Property | Value |
---|---|---|
Button | Type | Submit |
Button | Name | btnSave |
Button | Value | Upload Article |
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."
Figure 13.3: The Directory Listing 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.
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.
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.
Control | Property | Value |
---|---|---|
Button | Type | Submit |
Button | Name | Submit |
Button | Value | Search Articles |
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.
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.
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.
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.
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.
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.
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.
Control | Property | Value |
---|---|---|
Button1 | Type | Submit |
Button1 | Name | btnSave |
Button1 | Value | Create Login |
Button2 | Type | Submit |
Button2 | Name | btnView |
Button2 | Value | View Activity Log |
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.
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.
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.
Control | Property | Value |
---|---|---|
Button1 | Type | Submit |
Button1 | Name | btnSave |
Button1 | Value | Mark Selected Articles as Verified |
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.
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.
|