ECT 455 E-Commerce Web Site Engineering
Deliverable D
Technical Requirements
Table of Contents
- Purpose
- 1. Project Description and Scope
- 2. Detailed Design
- 2.1 Overview of Application
- 2.2 Significant Algorithms
- 2.2.1 Class diagrams
- 2.2.2 Class List
- 2.2.3 Pseudo code
- 2.3 Data Structures
- 2.3.1 Entity Relationship Diagram (ERD)
- 2.3.2 SQL
- 3. Screen Layouts
- 3.1 Interface Design
- 3.1.1 Medium Fidelity Prototype
- 3.1.2 Screen Layout for Mobile
- 3.1.3 Website DOCTYPE Declaration
- 3.1.4 Mobile Site DOCTYPE Declaration
- 3.1.5 Cascading Style Sheet
- 3.2 Information Architecture
- 3.3 Page Content
- 3.3.1 High Fidelity Prototype
- 3.3.2 Page Content Description
- 3.4 Navigation Schemes
- 3.4.1 Horizontal Navigation Bar
- 3.4.2 Left-Side Navigation
- 3.4.3 Navigation for Mobile Phone
- 3.1 Interface Design
-
4. Testing Consideration
- 4.1 Usability Testing
- 5. Approvals
- Team Contribution
Purpose
The purpose of this project is to encourage mentors, provide educational assistance, and allow parents to take their children to participate in activities and program in order to gain knowledge, experience, and self improvement.
1. Project Description and Scope
The object of Forever Moving Forward (FMF) is to develop a website that persuades mentees, mentors, donors and other visitors to take part in the activity and program. In each section, it will provide a short description of the application that was designed for the FMF website including requirement analysis, design prototype, implementation and usability testing. In addition, visitors will be able to create an account to get involved with any of the programs. They can also sign in, view previous events, and check available upcoming activities. Moreover, donors can donate money through the website.
2. Detailed Design
The object of Forever Moving Forward (FMF) is to develop a website that persuades mentees, mentors, donors and other visitors to take part in the activity and program. In each section, it will provide a short description of the application that was designed for the FMF website including requirement analysis, design prototype, implementation and usability testing. In addition, visitors will be able to create an account to get involved with any of the programs. They can also sign in, view previous events, and check available upcoming activities. Moreover, donors can donate money through the website.
2.1 Overview of Application
- DD 2.1.1 (Reference TR 4.1) Registration - Users can register and create an account
- DD 2.1.2 (Reference TR 4.2) Login - Users can login to access privilege content
- DD 2.1.3 (Reference TR 4.3) Calendar - Site Owner can update Events Calendar
- DD 2.1.4 (Reference TR 4.4) Search Content -Users can search site content
- DD 2.1.5 (Reference TR 4.5) Message Board - Registered users may view message boards, post new items
- DD 2.1.5 (Reference TR 4.5) Donation - Users can donate money, payment processing
2.2 Significant Algorithms
Forever Moving Forward web site will use the MVC architecture. Each controller class is the entry point of the services for retrieval of data and database transactions.
2.2.1 Class Diagrams
As is depicted by Fig 2.2.1 we will be making use of the MVC architecture and will link our controllers to our classes via the model layer.
2.2.2 Class List
- Events – Data object for calendar events
- EventController – Controller for event actions
- Users – Data object for system users
- UserController – Controller for user actions
- Mentors – Data object for mentors profiles
- Topics – Data object for message board topics
- Posts – Data object for message board posts
- ForumController – Controller for forum actions
- Galleries – Data object for image galleries
- Images – Data object for images
- ImageController – Controller for gallery actions
- SearchController – Controller for searches
2.2.3 Pseudo Code
- DD 2.2.3.1.1 Class name: User (Reference to TR 4.1.)
- DD 2.2.3.1.2 Package name: FMF.User
- DD 2.2.3.1.3 Method: login
- DD 2.2.3.1.4 Purpose: Validate username and password and set logged in session status. This feature will be implemented in our web and mobile site.
- DD 2.2.3.1.5 Input parameters userName, passWord
- DD 2.2.3.1.6 Return type: boolean (login successful)
- DD 2.2.3.1.7 Code:
Retrieve userRec from Users table using userName, password
If userRec not returned
Return false
Else
Return true
Endif
- DD 2.2.3.2.1 Class name: Event (Reference to TR 4.3.)
- DD 2.2.3.2.2 Package name: FMF.Event
- DD 2.2.3.2.3 Method: getEvents
- DD 2.2.3.2.4 Purpose: Validate Retrieve event listing for date entered. This feature will be implemented in our web and mobile site.
- DD 2.2.3.2.5 Input parameters day, month, year
- DD 2.2.3.2.6 Return type: event[]
- DD 2.2.3.2.7 Code:
Retrieve events[] from Events table using day, month, year
If events[] returned
Return events[]
Endif
- DD 2.2.3.3.1 Class name: User (Reference to TR 4.1.)
- DD 2.2.3.3.2 Package name: FMF.User
- DD 2.2.3.3.3 Method: register
- DD 2.2.3.3.4 Purpose: Validate username, password, zip code, and email address and create a user account in initiated status. This feature will be implemented in our web and mobile site.
- DD 2.2.3.3.5 Input parameters userName, passWord, email, address, city, state, zipCode
- DD 2.2.3.3.6 Return type: boolean (registration initiated)
- DD 2.2.3.3.7 Code:
Var EmailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/
If not Email matches EmailExp
Throw error message “Email Invalid”
Endif
If not Email is unique
Throw error message “Email already exists”
Endif
If not Password is 10 characters in length and contains at least one number
Throw error message “Password Invalid”
Endif
Increment last userID
Create row in Users table using new userID
If error
ROLLBACK
Return false
Else
COMMIT
Return true
Endif
2.3 Data Structures
2.3.1 Entity Relationship Diagram (ERD)
2.3.2 SQL
DROP TABLE GalleryImage
DROP TABLE Gallery
DROP TABLE FMFEvent
DROP TABLE Post
DROP TABLE Topic
DROP TABLE Mentor
DROP TABLE FMFUser
DROP TABLE AccessLevel
CREATE TABLE AccessLevel
(
AccessLevelID INT PRIMARY KEY,
AccessDesc NVARCHAR(50)
)
CREATE TABLE FMFUser
(
UserID INT IDENTITY(1, 1) PRIMARY KEY,
FName NVARCHAR(50),
LName NVARCHAR(50),
Address NVARCHAR(50),
City NVARCHAR(50),
State NCHAR(2),
ZIP NVARCHAR(10),
Email NVARCHAR(50),
Username NVARCHAR(50),
Password NVARCHAR(50),
AccessLevelID INT,
CONSTRAINT FK_FMFUser_AccessLevel FOREIGN KEY (AccessLevelID)
REFERENCES AccessLevel(AccessLevelID)
)
CREATE TABLE Mentor
(
UserID INT PRIMARY KEY,
ImageFileLoc NVARCHAR(50),
MentorDesc NTEXT
CONSTRAINT FK_Mentor_User FOREIGN KEY (UserID)
REFERENCES FMFUser(UserID)
)
CREATE TABLE Topic
(
TopicID INT PRIMARY KEY,
Subject NVARCHAR(200),
TopicContent NTEXT,
CreatedByUserID INT,
CreatedOn DATETIME,
CONSTRAINT FK_Topic_User FOREIGN KEY (CreatedByUserID)
REFERENCES FMFUser(UserID)
)
CREATE TABLE Post
(
PostID INT PRIMARY KEY,
TopicID INT,
PostContent NTEXT,
PostByUserID INT,
PostOn DATETIME,
CONSTRAINT FK_Post_Topic FOREIGN KEY (TopicID)
REFERENCES Topic(TopicID),
CONSTRAINT FK_Post_User FOREIGN KEY (PostByUserID)
REFERENCES FMFUser(UserID)
)
CREATE TABLE FMFEvent
(
EventID INT IDENTITY(1,1) PRIMARY KEY,
EventName NVARCHAR(50),
EventDesc NVARCHAR(1000),
Location NVARCHAR(100),
EventDate DATETIME,
StartTime DATETIME,
EndTime DATETIME,
)
CREATE TABLE Gallery
(
GalleryID INT IDENTITY(1,1) PRIMARY KEY,
EventID INT,
GalleryDesc NTEXT,
CONSTRAINT FK_Gallery_FMFEvent FOREIGN KEY (EventID)
REFERENCES FMFEvent(EventID)
)
CREATE TABLE GalleryImage
(
ImageID INT IDENTITY(1,1) PRIMARY KEY,
GalleryID INT,
ImageFileLoc NVARCHAR(50),
CONSTRAINT FK_GalleryImage_Gallery FOREIGN KEY (GalleryID)
REFERENCES Gallery(GalleryID)
)
3. Screen Layouts
3.1 Interface Design
3.1.1 Medium Fidelity Prototype
3.1.2 Screen Layout for Mobile
3.1.3 Website DOCTYPE Declaration
- The FMF website interface will utilize the XHTML 1.0 STRICT DOCTYPE:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
3.1.4 Mobile Site DOCTYPE Declaration
- The FMF mobile interface will utilize the XHTML MP 1.0 DOCTYPE:
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
3.1.5 Cascading Style Sheet
body {
font: 100% Arial, Verdana, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColLiqCtrHdr #container {
width: 800px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColLiqCtrHdr #header {
background: #FFFFFF;
padding: 0 0px 0 0px;
}
.oneColLiqCtrHdr #header h1 {
margin: 0;
padding: 0 0px;
}
.oneColLiqCtrHdr #header h2 {
margin: 0;
padding: 0 0px;
text-align: center;
}
.oneColLiqCtrHdr #menu {
margin: 0;
padding: 0 0px;
text-align: center; vertical-align:middle;
background-image:url(../images/menu.jpg); background-repeat:no-repeat;
padding: 0px;
width: 800px;
height: 50px;
}
.oneColLiqCtrHdr #mainContent {
padding: 0 0px;
background-image:url(../images/centerpanel.jpg); background-repeat:no-repeat;
width: 400px;
height: 375px;
float: left;
}
.oneColLiqCtrHdr #leftPane {
float: left;
width: 200px;
height: 375px;
background-image:url(../images/leftpanel.jpg); background-repeat:no-repeat;
padding: 0px;
}
.oneColLiqCtrHdr #rightPane {
float: left;
width: 200px;
height: 375px;
background-image:url(../images/rightpanel.jpg); background-repeat:no-repeat;
padding: 0px;
}
.oneColLiqCtrHdr #centerBox {
float: left;
width: 250px;
height: 100px;
background: #FFFFCC;
border: thick; border-color: #CCFF66;
padding: 2px;
}
.oneColLiqCtrHdr #box {
width: 125px;
height: 100px;
background: #FFFFCC;
border: thick; border-color: #CCCCCC;
padding: 2px;
}
.oneColLiqCtrHdr #footer {
padding: 0 10px;
background:#FFFFFF;
}
.oneColLiqCtrHdr #footer p {
font: 100% Arial, Verdana, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.button {
font: 100% Arial, Verdana, Helvetica, sans-serif;
background-image:url(../images/clearbutton.png); background-repeat:no-repeat; background-repeat: none; border-style:none; vertical-align:text-top; width:90px;height:31px;
}
.menuButton {
font: 100% Arial, Verdana, Helvetica, sans-serif; border-style:none; vertical-align:text-top; width:90px;height:31px;
}
.menuButton:hover {
font: 100% Arial, Verdana, Helvetica, sans-serif;
background-image:url(../images/selected.jpg); background-repeat:no-repeat; background-repeat: none; border-style:none; vertical-align:text-top; width:90px;height:31px;
}
3.2 Information Architecture
3.3 Page Content
3.3.1 High Fidelity Prototype
3.3.2 Page Content Description
- I. Home Page: This page will contain minimum content of information, this will include the Mission Statement and flash video of images. The page will include windows and links to other pages.
- II. About Us: This page will automatically open in the sub-category History page.
- a. History:
- i. An overview of the organization
- ii. Left-Side Navigation – About Us
- b. Photos and Testimonials
- i. Photos of events and activities
- ii. Testimonial quotes from various members of the organization
- iii. Left-Side Navigation – About Us
- c. Meet our Team (opens to sub-category Program Directors page)
- i. Bios and photos of the organization leaders
- ii. Left-Side Navigation – About Us
- d. Mentors
- i. Bios and photos of the Mentors
- ii. Left-Side Navigation – About Us
- e. Partners
- i. List of partners and sponsors, includes links to their websites and information about how to become a partner/sponsor
- ii. Left-Side Navigation – About Us
- f. Join our Team (opens to sub-category Becoming a Mentor page)
- i. Information about how to become a mentor
- ii. Left-Side Navigation – About Us
- g. Becoming a FMF
- i. Information about how to become a mentee
- ii. Left-Side Navigation – About Us
- a. History:
- III. Community: This page will automatically open in the sub-category News page
- a. News
- i. Information about the program; reports; notices
- ii. Left-Side Navigation – Community
- b. Activities and Events
- i. Information about past and future events. Photos of past events.
- ii. Left-Side Navigation – Community
- c. Calendar
- i. Event Calendar
- ii. Left-Side Navigation – Community
- d. Message Board
- i. A community forum with several topics to post messages about; available for all registered members.
- ii. Left-Side Navigation – Community
- a. News
- IV. Donate: This page will automatically open in the sub-category How to Donate page.
- a. How to Donate
- i. Information about how to donate and where the donations go towards
- ii. Left-Side Navigation – Donate
- b. Submit a Cash Donation
- i. A PayPal cash donation form
- ii. Left-Side Navigation – Donate
- c. Donate your Time
- i. Information about volunteering, a contact form
- ii. Left-Side Navigation – Donate
- d. Thank Yous
- i. A list and tribute to individuals/groups who have donated to the organization
- ii. Left-Side Navigation – Donate
- a. How to Donate
- V. Contact Us: Information about how to contact FMF
- VI. Login/Register: A form for members to either login to the website, or register as a user. A registered user will have access to certain items such as the message board.
3.4 Navigation Schemes
A global navigation scheme will include a horizontal navigation bar on each page that links to the 6 top line category pages (Home, About Us, Community, Donate, Contact Us, Login Register). Each top-line page will have a Left-Side Navigation to the sub-category pages for the related top-line page (only if there are sub-category pages)
3.4.1 Horizontal Navigation Bar
3.4.2 Left-Side Navigation
3.4.3 Navigation for Mobile Phone
4. Testing Consideration
4.1 Usability Testing
4.1.1 Registration - Users can register and create an account (Reference DD 2.1.1)
4.1.2 Login - Users can login to access privilege content (Reference DD 2.1.2)
4.1.3 Calendar - Site Owner can update Events Calendar (Reference DD 2.1.3)
4.1.4 Search Content -Users can search site content (Reference DD 2.1.4)
4.1.5 Donation - Users can donate money, payment processing (Reference DD 2.1.5)
5. Approvals
- Kristina Wu (Project Lead): 5/18/2010
- Martha Fitt (Media/Graphic Designer): 5/18/2010
- Jake Lake (DBA / Programmer): 5/18/2010
- Patarika Tipwong, DBA / Programmer: 5/18/2010
- Siebert Keith Hardeman, Programmer/Analyst: 5/18/2010
- Adam Barr, Analyst: 5/18/2010
Contributions
Kristina Wu
Coordinated work, created work breakdown, ERD, SQL script
Martha Fitt
Information architecture, low/high fidelity prototype, mobile prototype, converted to html
Jake Lake
Created task breakdown for backend work. Class diagram, document template
Patarika Tipwong
ERD, purpose section, scope/description section, usability testing section
Siebert Keith Hardeman
Class description, pseudo code
Adam Barr, Analyst
Web site navigation design, content description, mobile navigation design
