Desing document orp2

Design DocumentVersion 1.1

October 15, 2009

Online Repository of Publications

Vijayeandra ParthepanTorsak Rak-arom

Submitted in partial fulfillmentOf the requirements of

Research Methods

Table of Contents

Table of Contents...............................................................................................................................................iiTable of Figures.................................................................................................................................................iii1.0. Database Schema Design.........................................................................................................................2

1.1. Introduction...................................................................................................................................................21.2. Scope.............................................................................................................................................................21.3. Database Schema Design..............................................................................................................................21.4. Design Description.......................................................................................................................................31.5. Database SQL script.....................................................................................................................................31.6. Software Tools..............................................................................................................................................4

2.0. Architecture Design....................................................................................................................................52.1. Data Flow Diagrams.....................................................................................................................................5

2.1.1. Data Flow Diagram: Login Page...........................................................................................................62.1.2. Data Flow Diagram: Menu Page...........................................................................................................72.1.3. Data Flow Diagram: Search Page..........................................................................................................72.1.4. Data Flow Diagram: View Page............................................................................................................82.1.5. Data Flow Diagram: Edit Publication Page...........................................................................................9

2.2. Software Tools............................................................................................................................................103.0. Interface Design........................................................................................................................................11

3.1. Internal Program Interfaces........................................................................................................................113.1.1. Internal Program Interfaces: Login Page.............................................................................................113.1.2. Internal Program Interfaces: Menu Page.............................................................................................123.1.3. Internal Program Interfaces: Search Page............................................................................................133.1.4. Internal Program Interfaces: Edit Publication Page.............................................................................14

3.2. External Program Interfaces.......................................................................................................................163.2.1. External Interfaces: Login Page...........................................................................................................163.2.2. External Interfaces: Menu Page...........................................................................................................163.2.3. External Interfaces: Search Page.........................................................................................................173.2.4. External Interfaces: Edit Publication Page..........................................................................................17

3.3. Human Interface.........................................................................................................................................173.3.1. Administrator.......................................................................................................................................173.3.2. Member................................................................................................................................................183.3.3. Visitor..................................................................................................................................................18

3.4. Software Tools............................................................................................................................................184.0. Procedural Design....................................................................................................................................19

4.1. Structured Programming concepts..............................................................................................................194.1.1. Program Structure: Login....................................................................................................................194.1.2. Program Structure: Main.....................................................................................................................204.1.3. Program Structure: Search...................................................................................................................214.1.4. Program Structure: Edit Publication....................................................................................................22

4.2. Special Data structure used.........................................................................................................................234.3. Software Tools............................................................................................................................................23

ii

Design Document 04/13/23

Table of Figures

Figure 1 Database Schema Design..........................................................................................................................2Figure 2 Data Flow Diagram of Login Page...........................................................................................................6Figure 3 Data Flow Diagram of Menu Page............................................................................................................7Figure 4 Data Flow Diagram of Search Page..........................................................................................................7Figure 5 Data Flow Diagram of View Page............................................................................................................8Figure 6 Data Flow Diagram of Edit Publication Page...........................................................................................9Figure 7 Login Page...............................................................................................................................................16Figure 8 Menu Page...............................................................................................................................................16Figure 9 Search Page............................................................................................................................................17 Figure 10 Edit Publication Page............................................................................................................................17Figure 11 Programming Structure of Login Page..................................................................................................19Figure 12 Programming Structure of Menu Page..................................................................................................20Figure 13 Programming Structure of Search Page................................................................................................21Figure 14 Programming Structure of Edit Publication Page.................................................................................22

iii


1.0. Database Schema Design

1.1. Introduction

The database schema design provides complete the description of the database that is

used in the project. It consist of entities, attributes and relations of the tables data that need to

be create in the database

1.2. Scope

The Western Kentucky University CSD’s Web Accessible Publications Database

(CSDWAPD) is designed to run on the departmental server and to allow three different

categories of user’s,

Members can search, view, add and delete the publication data in the database.

Visitors can just search and view the data from the database.

Administrators can maintain the database.

1


1.3. Database Schema Design

Figure 1 Database Schema Design

We have two tables in this database. The first table stores the login information, such as username, password, category, name, Author_ID (Primary key) and the email. The second tables consists of publication data and the primary key here is publication_id and the foreign key is Author_ID

1.4. Design Description

1.4.1. Download the MySQL and install it in the system.1.4.2. Configure the software in standard settings and set root password and executed.1.4.3. Download the Toad and install in the system.1.4.4. Open Toad software.1.4.5. Connect to the Database

1.4.5.1. Open the connection by select at File->New->Connection.1.4.5.2. Set the Connection setting:

Group: MySQLConnection Type: TCPHost: LocalhostUser: root

2


Password: <root password that we set when we install MySQL>Database: [null]Port: 3306

1.4.6. Click at connect button.1.4.7. Create Database

1.4.7.1 Open new Database by select at File->New->Database.1.4.7.2 Enter the database name “CADWAPD” and press OK.

1.4.8. Create Table1.4.8.1. Open new editor by select at File->New->Table.1.4.8.2. Create the Columns and enter the column name, data type and null

condition. 1.4.8.3. Set the primary key and other key constraints.

1.5. Database Descriptions

1.6. Software Tools

Hardware: Web ServerOperation System Window 98 or aboveDatabase Tool: Mysql-essential version 5.1.39Reference: http://dev.mysql.com/downloads/mysql/5.1.htmlDatabase GUI: Toad for MySQL version 4.5.0.903Reference: http://www.toadsoft.com/toadmysql/Overview.htmCode Standard SQL script

3

http://www.toadsoft.com/toadmysql/Overview.htm

http://dev.mysql.com/downloads/mysql/5.1.html


2.0. Architecture Design

The Architecture Design consists of the information flow diagram and it maps them into

program structure.

2.1. Data Flow Diagrams

The Data Flow Diagram will consist of five flow diagrams.

The first selection is to login. This page requests the username and password to

authenticate the user.

The second selection is to explain the menu. According to the type of user, the menu

will display differently. The visitor user can only search and view the publications. The

member user can search and view the publications and edit and delete for his publications.

The third selection is to search the publications form the publications database

according to the keywords, such as publication name, author name, published date, the topic,

and the associate type of publication.

The fourth selection is to view the publication. Search criteria from the file database

and display it on web page.

The fifth selection is to edit the publication. Member users can upload and delete their

publications and change the information of the publications. Administrator users can edit all

publications and maintain the web page.

All pages will return Menu page.

4


2.1.1. Data Flow Diagram: Login

Figure 2 Data Flow Diagram of Login Page

Brief DescriptionThe Web Server is waiting the user to login with their username and password.

Initial step-by-step descriptionFor this use case to be initiated, the user must be connected to the Internet and connected

to the Web Server.

1. The client sends the username and password to the Web Server.

2. The server check for username and password form the database.

3. The database returns user information back to the server.

4. The server set the authorization for the client

5. The server redirect to the another page

- If authorization is success, it redirect to menu page.- Else it redirect to the Login page with the error message.

5


2.1.2. Data Flow Diagram: Menu

Figure 3 Data Flow Diagram of Menu Page

Brief Description:The Menu page shows the menu for the user to select.

Initial step-by-step description:For this use case to be initiated the user must be connected to the Internet and must be

logged in on the Menu Page.

1. The client selects the link on the menu.

2.1.3. Data Flow Diagram: Search Page

Figure 4 Data Flow Diagram of Search Page

6


Brief Description:The user selects the search criteria or gives the keywords to search the publication from

the database.

Initial step-by-step description:For this use case to be initiated the user must be connected to the Internet and selected

search from the menu page.

1. The client sends keywords of the publication to the server.

2. The server searches the database by using keywords.

3. The database returns the search result back to the server.

4. The server displays the searching result in the client.

5. The Web Server sends back the search list and display on the web page.

6. The client can sort the list according to the column name and download or view the publication form the list.

2.1.4. Data Flow Diagram: View

Figure 5 Data Flow of View page

7


Brief Description:The Web page displays the publication on the page.

Initial step-by-step description:For this use case to be initiated the user must be connected to the Internet and select the

publication from the list at the Search page.

1. The client sends the publication data to the server.

2. The server searches the publication file’s address to the database.

3. The database sends back the location of the publication back to server.

4. The server finds and opens the publication file.

5. The server displays the publication data on the client screen.

2.1.5. Data Flow Diagram: Edit Publication Page

Figure 6 Edit Publication page

Brief description: The user can edit the publication data on the database and upload or delete his files.

Initial step-by-step description:For this use case to be initiated the user must be connected to the Internet and must be the

member user or admin user and must have selected edit from the menu page.

8


1. The client send the publication data and file to the server

2. The server checks for the publication information and file.

3. The server saves publication information and location into database.

The server sends the complete message or error message to the client.

2.2. Software Tools

Operation System Window 98 or aboveDesign Tool: UMLet version 10Reference: http://www.umlet.com/

9

http://www.umlet.com/


3.0. Interface Design

3.1. Internal Program Interfaces

Internal Program Interfaces describe the basic structure of the program to be implemented. Here, we are including the basic sample internal interface that is to be implemented on the server side.

Internal Program Interfaces will consist of four sections of basic HTML for Login page, Menu page, Search page and Edit Publication page.

3.1.1. Internal Program Interface: Login Program<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title></head>

<body><table height="100%" width="100%">

<tr><td align="center" valign="middle"><table width="311" height="114" border="1"> <tr>

<td width="170"><table width="100%">

<tr height="20"><td><b>Login</b></td></tr><tr height="20"><td>

<table width="100%"><tr>

<td>Username</td><td><input name="username"

type="text"></td></tr>

</table></td></tr><tr height="20"><td>


<td>Password</td><td><input name="password"

type="text"></td></tr>

</table></td></tr><tr height="20"><td align="center"><input name="Submit"

type="submit" value="Submit"></td></tr></table>

</td><td width="90"><input name="Button" type="button" value="Visitor"></td>

10


</tr></table>

</td></tr></table></body></html>

3.1.2. Internal Program Interface: Menu Program<table border="0" align="center" cellpadding="0" cellspacing="0" >

<tr><td align="center">

<table width="600" border="0" cellpadding="0" cellspacing="0" ><tr><td height="30"></td></tr><tr>

<td align="center"><table>

<tr><td width="10"></td><td width="50" align="center"

bgcolor="#00CCFF">Search</td><td width="10"></td><td width="50" align="center"

bgcolor="#00CCFF">Edit</td><td width="10"></td><td width="50" align="center"

bgcolor="#00CCFF">Login</td><td width="10"></td>

</tr> </table></td>

</tr><tr><td height="20"><hr></td></tr><tr>

<td align="left">New Update</td></tr><tr>

<td><textarea name="new_update" cols="100" rows="10" ></textarea>

</textarea></td></tr><tr><td width="20"></td></tr><tr>

<td align="left">News</td></tr><tr>

<td><textarea name="new_update" cols="100" rows="10" ></textarea>

</textarea></td></tr>

</table></td>

</tr></table>

11


3.1.3. Internal Program Interface: Search Program<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title></head>

<body><table width="100%">

<tr><td align="center"><table>

<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr>

<td width="80" align="right">Keyword</td><td width="100"><input name="keyword" type="text"></td><td width="80" align="right">Author</td><td width="100"><select name="Author"> <option value="1">Vijayeandra Parthepan</option> <option value="2">Torsak Rak-arom</option></select></td>

</tr></table>

</td></tr><tr height="20"><td></td></tr><tr><td>


<td width="80" align="right">from date</td><td width="100"><input name="from_date" type="text"

width="60"></td><td width="80" align="right">to date</td><td width="100"><input name="to_date" type="text"

width="60" ></td></tr>

</table></td></tr><tr><td align="center"><input name="search" type="submit"

value="Submit"></td></tr></table>

<hr width="80%">

<table width="800" border="1"> <tr bgcolor="#3366FF" height="20">

<td><input name="" type="checkbox" value=""></td><td width="30%" align="center">Publication Name</td><td width="30%" align="center">Author</td><td width="10%" align="center">date</td>

12


<td width="30%" align="center">Abstract</td><td>View</td>

</tr> <tr>

<td><input name="" type="checkbox" value=""></td><td>Design Document</td><td>Vijayeandra Parthepan</td><td>09/24/2009</td><td>example1</td><td align="center">x</td>

</tr> <tr>

<td><input name="" type="checkbox" value=""></td><td>SRS</td><td>Torsak Rak-arom</td><td>10/14/2009</td><td>example2</td><td align="center">x</td>

</tr></table>

</td></tr></table></body></html>

3.1.4. Internal Program Interface: Edit Publication Program<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title></head>

<body><table border="0" align="center" cellpadding="0" cellspacing="0" >

<tr><td align="center">

<table width="600" border="0" cellpadding="0" cellspacing="0" ><tr><td height="30"></td></tr><tr>

<td align="center"><table>

<tr><td width="10"></td><td width="50" align="center"

bgcolor="#00CCFF">Search</td><td width="10"></td><td width="50" align="center"

bgcolor="#00CCFF">Edit</td><td width="10"></td><td width="50" align="center"

13


bgcolor="#00CCFF">Login</td><td width="10"></td>

</tr> </table></td>

</tr><tr><td height="20"><hr></td></tr><tr>

<td align="left">Publication List</td></tr><tr><td height="10"></td></tr><tr> <td align="center"> <table width="500" cellpadding="0" cellspacing="0" border="2"

bordercolor="2"><tr bgcolor="#99FFCC">

<td width="60%" align="center">Publication Name</td>

<td width="20%" align="center">Last Update</td>

<td width="10%" align="center">Edit</td><td width="10%" align="center">Delete</td>

</tr><tr>

<td align="left">ORP - Project</td><td align="center">10/14/09</td><td align="center"><input name="edit1"

type="button" value="Edit"></td><td align="center"><input name="del1"

type="button" value="Del"></td></tr>

<tr><td align="left">PHP document</td><td align="center">10/01/09</td><td align="center"><input name="edit1"

type="button" value="Edit"></td><td align="center"><input name="del1"

type="button" value="Del"></td></tr>

</table> </td></tr><tr><td height="20"></td></tr><tr><td height="20"></td></tr><tr><td><input name="add" type="button" id="add" value="ADD"> click to add the publication.</td></tr>

</table></td>

</tr></table></body></html>

14


3.2. External Program Interfaces

3.2.1. External Interface: Login Page

Figure 7 Login Page

3.2.2. External Interface: Menu Page

Figure 8 Menu Page

15


3.2.3. External Interface: Search Page

Figure 9 Search Page

3.2.4. External Interface: Edit Publication Page

Figure 10 Edit Publication Page

3.3. Human Program Interface

Human Program Interface of ORP consists of three categories of users namely Administrator, Member and Visitor.

3.3.1. Administrator

Administrator enters the system through the login page. Administrator can select view, search and edit options available in the menu page. Administrator is assigned all the privileges. The role of Administrator here is to maintain the database.

16


3.3.2. Member

Member enters the system through the Login page. Member can select view, search and edit options available in the menu page. The Member can add his publication or delete his previous publication. The Member can also view other publications but he cannot delete other publications.

3.3.3. Visitor

Visitor can directly enter to the menu page. Visitors can only search and view publications.

3.4. Software Tools

Operation System Window 98 or aboveDesign Tool: Dreamweaver MX 2004 version 7.0.1Reference: WKU Labs

17


4.0. Procedural Design

4.1. Structured Programming concepts

The structured programming concepts are defined using the graphical, tabular and textual

notation, which enables to represent procedural detail, which facilitates translation in to code.

This also includes the special data structures that are to be used. It can be directly translated

into basic code while implementing the design.

4.1.1. Program Structure: Login

Figure 11 Programming Structure of Login Page

18


Initially the server displays the login page and is waiting for the user to enter his username and password. If the authentication succeeds the server redirects the user to the menu page and if it fails it is looped back to the login page with an error message. Visitors can directly enter the menu page by clicking on the visitor button.

4.1.2. Program Structure: Menu

Figure 12 Programming Structure of Menu Page

The server displays the menu page to the authenticated user or the visitor. The menu is displayed differently according to the category of the user.

19


4.1.3. Program Structure: Search

Figure 13 Programming Structure of Search Page

The user clicks on the search button to reach the search page, where the server displays the search page and waits for the user to enter his search keyword and select the category of search. Once the user selects these and press the ‘Search’ button, client sends the search query to the server, which in turn searches the database based on the query and displays the result back to the user.

20


4.1.4. Program Structure: Edit Publication Page

Figure 14 Programming Structure of Edit Publication Page

The basic edit page consists of edit, delete and view options. The administrator has this edit option for all the publications in the database and the members have this option only for their publications.

4.2. Special Data structures Used

In this project, AJAX is used in the search page for selecting date by showing a pop up for showing the calendar.

4.3. Software Tools

Operation System Window 98 or aboveDesign Tool: UMLet version 10Reference: http://www.umlet.com/

21

http://www.umlet.com/

Desing document orp2

Technology

Transcript of Desing document orp2