Design Document Version 1.1 October 15, 2009 Online Repository of Publications Vijayeandra Parthepan Torsak Rak-arom Submitted in partial fulfillment Of the requirements of Research Methods
Jun 27, 2015
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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>
<table width="100%"><tr>
<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
Design Document 04/13/23
</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
Design Document 04/13/23
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>
<table width="100%"><tr>
<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
Design Document 04/13/23
<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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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
Design Document 04/13/23
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