Polack System Design Document

7/31/2019 Polack System Design Document

1/23

System Design

DocumentiTouch Education Community Portal

Vanessa Roycroft, Kevin Hamerski, and Hunter Smith

10/31/2010


2/23

2

Table of Contents

1. Introduction ............................................................................................................................................... 3

1.1 Purpose ............................................................................................................................................... 3

1.2 Document Structure ............................................................................................................................ 3

2. System Context ......................................................................................................................................... 42.1 General Context .................................................................................................................................. 4

2.2 Data Flow Diagram ............................................................................................................................ 5

2.3 Data Description ................................................................................................................................. 7

2.4 Relationships ...................................................................................................................................... 8

3. Hardware, Software & Network Specification ......................................................................................... 9

3.1 Hardware ............................................................................................................................................ 9

3.2 Software .............................................................................................................................................. 9

3.3 Network .............................................................................................................................................. 9

4. Module Decomposition ............................................................................................................................. 9

4.1 System Modules ................................................................................................................................. 9

4.2 Module Dependency Diagram .......................................................................................................... 11

4.3 Data Organization ............................................................................................................................. 11

4.4 Data Flow Diagrams ......................................................................................................................... 12

4.4.1 UploadFile ................................................................................................................................. 12

4.4.2 Search Forum ............................................................................................................................ 13

4.4.3 Create Forum Topic .................................................................................................................. 14

4.4.4 Review Document ..................................................................................................................... 15

4.4.5 Comment on Blog Post ............................................................................................................. 16

4.4.6 Blog Post ................................................................................................................................... 17

4.5 Process Decomposition ..................................................................................................................... 17

4.5.1 Create an Account ..................................................................................................................... 17

4.5.2 Upload a File to the Document table ......................................................................................... 18

4.5.3 Make a Text file from a Text box.............................................................................................. 18

5. System Design Description ..................................................................................................................... 18

5.1 Coding Scheme ................................................................................................................................. 18

5.2 Input and Output Interfaces ............................................................................................................. 215.3 Security Strategy ............................................................................................................................... 22

6. Appendix ................................................................................................................................................. 23

6.1 Abbreviations.................................................................................................................................... 23

6.2 Data Dictionary................................................................................................................................. 23


3/23

3

1. Introduction

1.1 PurposeThis document will provide an overview of the iTouch Community Education Portal. It willdiscuss how the four major design areas of architecture, components, data, and interfaces will be

implemented in this system. All of the systems functions will be identified and described and adiscussion of how they interact will be provided. This document will also establish thespecifications for the hardware, software, and network that are necessary for system support.The main goal of this document is to assist in the implementation of the system by providing adetailed view of the different components that are involved.

1.2 Document StructureThis document is organized into 6 sections, with subsections for each. It will begin with adescription of the system context as well as a data flow diagram. Then, the major attributes ofthe systems various data objects and how they relate to one another will be discussed. Next, thehardware, software, and network needed to support the system will be described. Then, adescription of each of the systems functions will be provided, along with a Module DependencyDiagram, which will show how the functions are interrelated. The organization of data withinthe system will be detailed and will include Data Flow Diagrams for the most importantfunctions. Next, pseudocode will be provided for the 3 most complicated functions anddecisions regarding implementation will be discussed. Then, the coding rules that are to befollowed during implementation will be established. Following the rules, the input and outputinterfaces will be described and a prototype will be presented. Next, security issues as requiredby the system and a security implementation plan will be discussed. Finally, an Appendix willprovide definitions for all abbreviations and system-specific terms used in this document.


4/23

4

2. System Context

2.1 General ContextThe following diagram (Figure 2.1) illustrates what each system tier will consist of. The Clienttier contains the dynamic HTML pages that will provide the interface which allows users to

navigate through the website. This tier will also interact with the Web tier as it contains somephp code. The Web tier contains the php code that will assist with login and document displayfunctions. The php code will be nested inside of the HTML and will provide a connection to thedatabase as well as the functions necessary to build queries, execute them, and receive the result.The Business tier contains the plugins used by the system, phpBB for the Programmers Forumand WordPress for the general blog. Both the phpBB and WordPress plugins maintain their owndatabases and code for accessing their respective databases. The EIS tier contains the databaseneeded to hold the data that is used by the system. The database contains several tables to storeinformation about users, documents, and reviews. This information will be obtained by creatingqueries and executing them with the php code contained in the Web tier. The Client tier wouldthen be responsible for displaying the information obtained by the query.

Figure 2.1System Level Context Diagram


5/23

5

2.2 Data Flow DiagramThe following diagram (Figure 2.2) illustrates the main flow of information between pages andsections on the website. From the main page, the user can navigate to the blog page, login page,My Documents page, educators page, programmers documents page, or programmers forum.The blog page retrieves all of the post information from the blog database and displays it. When

the user clicks on the title of a post, the post ID number is retrieved from the blog database andthe actual post and its information are displayed. The login page sends the username andpassword to the user database to verify the users information. The login page creates a sessionand reloads the main page while communicating the session information. The My Documentspage sends a request to the database with the user ID. The database then returns all documentsassociated with the user and the file names are displayed on the page. The educators pagepresents the user with several school subjects as options to choose from. After the user selects anoption and navigates to the desired page, that page will interact with the education resourcesdatabase to retrieve resources for the desired subject. The subject, resource type, and grade levelwill be sent as a query to the database to find all of the corresponding documents. The results ofthe query are sent back to the page and displayed. The programmer documents page queries the

database for all documents uploaded by users with the programmer distinction. The documenttitles are displayed on the page. The user can search for a document by typing in a keyword andupon submitting the request, a query is sent to the database and anything matching the keywordis returned. The programmers forum retrieves all of the post information from the forumdatabase and displays it. When the user clicks on the title of a post, the post ID number isretrieved from the forum database and the actual post and its information are displayed.


6/23

6

Main PageNavigate to iTouch Education Community Portal

Blog Page

User Navigates

WordPress Database

Post ID

User Table

User Name and Password

Log In Page

Create Account

Page

User Navigates

User Information

Programmers

Forum

User Navigates

Topics within

Forum

phpBB Database

Topic ID

User Navigates

My Documents

Page

Programmer

Documents

User Navigates

Document Table

All documents associated with the user

Educators Page

Desired

Resource Page

(Math, Art, etc)

User selects a school subject

Educator Resources Table

Subject, resource type, grade level

All documents that match the query

User ID

User type = programmer

All documents uploaded by programmers

Figure 2.2Data Flow Diagram


7/23

7

2.3 Data DescriptionThe data model for this web application follows the model in Figure 2.3. First we were given thetechnical and functional requirements which we then had to turn into conceptual data. Using theconceptual data, physical data was created in the form of the tables, relationships and keys withinthe database. From this physical data business data is allowed to be stored. This physical dataprovides the structure for the business data for the iTouch Education Community Portal. Thisbusiness data is stored in a database hosted on the Polack sub-domain on the Bluehost server.Data will be manipulated by users based on their actions. Users have the ability to adddocuments, delete documents, review documents, and make posts. This data will all be used foreducational and developmental purposes. This is all used to help begin the model process byforming the conceptual data first and finishing with the structure for the actual business data tobe stored.

Create Logical Data

Create Physical Data

Create Business Data

Data requirementsspecified by Client:

Blog, Forum,Documents, Account,Document Reviews

Database Concept ModelEntities:Account

DocumentsReviewsRelationships:

Each Document has multiplereviews

Each Doc has a userEach user has multiple docs

Physical Data ModelTables:Account

Programmer DocsEducator DocsDoc Reviews

Keys:Account: Username

Programmer Docs: Document IDEducator Docs: Document ID

Doc Reviews: Review ID

ActualBusinessData in

Database

Performance Issues

Technology Issues

Business Data

Figure 2.3Data Model


8/23

8

2.4 RelationshipsThe following Entity-Relationship Diagram (Figure 2.4) shows the overall data structure thatwill support the website. There are three tables that serve different purposes, but they are allinterrelated. The User table stores information about users and facilitates the login process.Users can upload multiple documents and also post multiple reviews. The Document table stores

information about documents that have been uploaded by users. A document can be uploaded byonly one user, but a document can have multiple reviews associated with it. The Review tablestores information about reviews that users have posted. A review is associated with one, andonly one, document and one user.

Figure 2.4Entity-Relationship Diagram


9/23

9

3. Hardware, Software & Network Specification

3.1 HardwareThe website will run on an Apache web server with php and MySQL installed to allow for dataaccess. Developers who will be revising the systems code must have access to a computerwith

an internet connection.

3.2 SoftwareIn order to make changes to the websites code, developers need to have access to Bluehost(www.bluehost.com) and know the username and password in order to log in. Two plugins,phpBB and WordPress, are used by this system. The files for each have been uploaded to theBluehost account and incorporated into the system. Developers are able to modify the themesfor each by logging into each account as an administrator.

3.3 Network

An internet connection is required to access the website and make changes to the code. A 5MBcable connection is sufficient to load the website pages in an acceptable amount of time (onesecond). Bluehost provides the optimal performance network that the website will run on.

4. Module Decomposition

4.1 System ModulesLogon(): Users can log into their account so that they can view the documents that they haveuploaded and upload documents. Users also must login to view the Educators Resources page

and Programmers Forum and Programmer Documents. Users do not need to login to use theblog and make blog posts.

createAccount(): Anyone can go onto the create account page and create an account. The userwill enter a username, password, e-mail and what type of account (Educator, Programmer) theywish to sign up for. The user also must read the terms of use policy and click the checkbox thatguarantees that the user will follow the terms of use.

uploadDocument(): When a user logs on to their account they will be able to upload documents.When uploading the document the user must select whether it is for programmers or educators.Then they must select a keyword that represents what the document is about. Educators have

more advanced options such as grade level, subject and category. When the user clicks to addthe document, it is first added to the Bluehost server. Then the document URL is added to adatabase table that contains the document URL, the category, the subject, grade level and theuser that uploaded the document.

deleteDocument(): A user logged into their account has the ability to delete any document thatthey have previously uploaded to the document database. The user will go to the My
http://www.bluehost.com/http://www.bluehost.com/http://www.bluehost.com/http://www.bluehost.com/


10/23

10

Documents page and select the documents they wish to delete by clicking the checkbox to theleft of the document. Then the User will click to delete the document.

searchProgrammerDoc(): Programmers can log into their account and go to the programmerdocuments page. They then will be able to search documents on any keyword they wish to

search for.

searchEducatorDoc(): Educators can log into their account and go to the EducatorsResources page then search on subject, category and grade level. They also can search for akeyword on the document.

writeTxtBox(): When a user is logged in to their account and go to upload a document page. Ifthey do not have a document but wish to share their ideas and code then they can write theirideas in a text box. This function will automatically develop a .txt file containing the ideas of theuser and post that under that as a document under the categories that the user specifies.

postReview(): Users that are logged in can view documents. After viewing documents, userscan post reviews on the documents that they viewed. When a user downloads a document areview document field will pop up which will allow the user to review this document. Thereview will contain a star rating and a comment field.

blogPost(): Blog posts are done by anyone who views the website. They would click on theblog link. There is no educator or programmer account required. Blogs are run by Wordpresswhich is hosted on the server. There is no functionality within the html

forumPost(): Forum posts are done by programmers only. When a programmer logs into theiraccount they will click on the programmers forum. This will take them to a forum. The forumis operated by phpBB and is hosted on the bluehost server. There is no functionality within htmlto make the actual post.


11/23

11

4.2 Module Dependency Diagram

Upload DocumentRemove

Document

Search

Programmer

Documents

Search Educators

Documents

HomePage

Login Create Account

Educator Account

Not Logged In

Programmer

Account

Only Educator Account

Programmer Account Only

Post Review

Blog Post

Programmer

Forum

Blog Post

Figure 4.2Module Dependency Diagram

Our design for the module dependency diagram helps to show how the functionality and modulesof this web application work together (see Figure 4.2). Coming off of the homepage there aretechnically two tiers. A user can either be logged in or not logged in. Off of logging in there isan option to create account which then in return logs the user in once the account is created. Thenon-logged in users may only access the WordPress blog. They do not have access to any other

functionality than the blog. The login tier then leads to two more tiers. A user can either belogged in as a programmer or an educator. The diagram displays that both accounts have accessto four of the modules. Either account type can upload, remove and review documents. Theyboth may also access the blog. For a user registered as a programmer, he/she will be able toaccess two modules that no one else can access. These two modules are the ProgrammerDocuments database and the programmer forum. Users registered as an educator account haveone module that they can access that no other account type can. Educator accounts have accessto an educators resource page where they can view and search for resources that are specifiedfor educators. This design is better than other designs because it shows the relationship of eachaccount type and what modules that each account type is able to access and work with.

4.3 Data OrganizationFor this web portal we will be using the client-server model when developing this application.The main client in the model that will be used is the Google Chrome web browser. The Serverfor this model that will be used is Bluehost server. We chose to use this client-server model overa repository model is because we will be using a database that is stored on Bluehost servers asthe backend and server side. This application also entails a front end where users can logonthrough web browsers to access the many features of this application, thus we need a client side.


12/23

12

All of the files and data necessary for this application are stored on one location, the Bluehostserver under the sub-domain, Polack. Within this sub-domain there will be a mySQL databasethat operates in the backend of this client-server model web application. Within this databasethere will be four tables. One table will consist of all of the information required to create anaccount. The second table will consist of all of the documents that have been uploaded by user

accounts that are registered as programmers. The third table will hold the documents that havebeen uploaded by educators. The final table will hold the information of the reviews made byusers on all documents that have been uploaded. This Bluehost server also hosts a Wordpressblog. This blog is used for anyone who visits the website to post anything they want on the blogsuch as app Ideas or ask questions. There will also be a private forum that is hosted on thisserver that will allow accounts registered as programmers to view this forum and post code andcomments and ask any questions they might have dealing with application development.

4.4 Data Flow Diagrams

4.4.1 UploadFile

Main PageNavigate to iTouch Education Community Website

Document Database

Navigate to pageMy

Documents

uploadDoc(Name,URL,User,Category,Subject,Topic, grade,Keyword)

Returns to my Document page with document displayed on page

Figure 4.4.1


13/23

13

4.4.2 Search Forum

Main Page

User Navigates to iTouch

Community Portal

Forums PageUser Clicks on

Forums Link

Forum Search Page

User Clicks on Search Link

Forums Database

User clicks search button and page passes query

with key words to search the Forum Database

Forum Results Page

Loads the page to display results along

With the results from the search

LoginUser Logs in on login Page Account DatabaseLogin(username,password)

Figure 4.4.2


14/23

14

4.4.3 Create Forum Topic

Main Page

Go to iTouch Community

Portal

Forums PageUser Navigates to

Forums Page

Create New Forum TopicPage

User Clicks Start a New Topic Thread

Forum Database

Forum Topic, Author information, Date Started

Forum Topic Page

Loads page with Forum Topic ID, Forum Topic,

replies to topic, and number of replies.

Login Page

User Clicks to login

Accounts DatabaseLogin(username,password)

Figure 4.4.3


15/23

15

4.4.4 Review Document

Main PageNavigate to iTouch Education Community Website Navigate to pageDocuments

Display Page

Document Database

Displays Documents Searched for

ReviewPostNavigate to document review post

postReview(DocName, Rating, review, user)

Figure 4.4.4


16/23

16

4.4.5 Comment on Blog Post

Navigate to iTouch Community

Portal

Homepage BlogNavigate to Wordpress Blog

Navigate to specific blog post

Blog Post

CommentBlog Post Click to leave a comment on post

Blog Database

Post(blogID, comments)

Figure 4.4.5


17/23

17

4.4.6 Blog Post

Navigate to iTouch Community

Portal

Homepage BlogNavigate to Wordpress Blog

Click to create new post

Blog Post

Blog Database

createPost(Name, post)

Redirects user back to blog post that has been created

Figure 4.4.6

4.5 Process Decomposition

4.5.1 Create an AccountcreateAccount{

Get username, password, e-mail, account type from html formQuery database for usernameIf(username exists)

Return error username exists alreadyElse

Insert username, password, e-mail, account type to account table

Return account successfully createdLogin(username, password)Go to homepage

}


18/23

18

4.5.2 Upload a File to the Document tableProvide an HTML form with a file and 2 text input types

Include a submit input type in the form alsoThe form redirects to a php page

Connect to the database

Get username from $_SESSION (store as $username)Get userID by querying on username (store as $userID)Get the title by using $_POST and store as variable ($title)Get the description by using $_POST and store as variable ($desc)Assign a filename variable by using $_FILES[file][username]Assign $target as $filenameMove the uploaded file by using the php functionmove_uploaded_file($_FILES['file']['tmp_name'], $target);Construct a query to insert the file into the Document table

($query = "INSERT INTO $table (documentID, title, description,filename, userID) VALUES (NULL, $title, '$desc', '$target',

$userID)";Execute the query by using the php function$result = mysqli_query($db, $query)or die("Error 1 Querying Database");

4.5.3 Make a Text file from a Text boxIf (input is equal to null){

No input was put in.Reload page with text box for user to put in input.

} else {

Get string from variable input.Get string from variable nameOfDocument.Create text file named nameOfDocument.Write string from input into text file.Call uploadDocument() to move document into document database.

}Load page to confirm document was created.

5. System Design Description

5.1 Coding SchemeHTML/PHP:

Spacing:1. Uniform and constant indentation is to be used.2. HTML tags such as , , and should be formatted like:


19/23

19

Column 1, Row 1Column 2, Row 1

Column 1, Row 2

Column 2, Row 2

3.

File Documentation Guidelines:1. Banner style documentation at the top of the file (for html) consisting of:

2. Banner style documentation at the top of the file (for php) consisting of:3. CSS Documentation and Structure:

/*Declaration for: body of page.*/body{

background-color:#b0c4de; /*Property: background-color Value::#b0c4de */

}

4. PHP Documentation should consist of comments explaining Comparisonstatements, Functions, and While-loops.

Example for Comparison Statements:


20/23

20

echo "Logout";} else {

/*Displays the Login link and the new User link if there is not a userlogged in.*/

echo "Login";echo "|";echo "New User";}

?>

Example for functions:

Example for While-Loops:


21/23

21

5.2 Input and Output InterfacesThe Input Interface for the system is done through a web interface created using HTML,

PHP, and CSS style sheets. The user will be able to add input using mouse clicks, text fields, anduploading files. Users will be able to upload files such as word documents, PDF files, text files,pictures, PowerPoint files, andExcel files. If users do not havea file readily available they willbe able to type into a text fieldand click submit. The systemwill generate a basic text filefrom the users input.

The main page of theinterface for the website isshown below in Figure 1. This iswhere everyone who uses thewebsite will bedirected when navigating to thissite. On the left hand side arelinks as buttons to the Homepage of the site, the Blog, and the My Documentspage. The home page is the same as the main page ofthe site.

The My Documents page is shown in Figure 2.It displays the users documents as a table and gives the user the ability to add or removedocuments.

In the body of the page there is a table the displays links to the Educator Resource Page,the Programmer Forums, and Programmer Documents. The user will navigate through thewebsite using pictures, buttons, and text that are tagged as hyperlinks. Users designated asteachers will view files through the Educator Resources page (shown in Figure 3 below). Theywill click on the images or links to view the documents under each category. After the users haveclicked on a category they wish to find a resource under the interface will display the documentsin a table structure (shown in Figure 3 below).

Teachers will be able to search within eachcategory using preset criteria that is shown above the

results (also in Figure 3). TheProgrammers will upload documents thesame way that educators do via the My

Documents page. They will also be ableto post questions and give people ananswer to questions about developmentvia the Forum for programmers byclicking on the Programmer Forum linkin the body of the main page. The Forum

page is displayed below in Figure 4.

Figure 1 This image shows the main page forthe site.

Figure 2 This image showsthe My Documents page.


22/23

22

Programmers will also be able to post news and respond to questions on their applicationsvia the Blog section of the website (shown in Figure 5 below, after Figure 4). The blog is run viaa Word Press installation on BlueHost. All information related to users or documents is stored ina MySQL database also on BlueHost.

All connections for the

interface will be done through acombination of hyperlinks andMySQL queries executed bythe system.

5.3 Security Strategy

Security issues we currently have are login authentication and protection of copyrightedcontent. We plan to implement security measures to make it so users cannot access contentwithout having an account using PHP sessions and encrypting passwords within our user table.This login in system and account creation should protect content from being accessed by thosewho should not be accessing it. No other issues have been brought to our attention by the clientand when asked she says she is not worried about it.

Figure 3 This shows the documentswithin a category of the EducatorsResources.

Figure 4 This shows theforum that the programmerswill use to discuss issues and

uestions on the website.

Figure 5 This shows the mainblog page the iTouchEducation Community Portal.


23/23

23

6. Appendix

6.1 AbbreviationsphpBB: PHP Bulletin Board

6.2 Data DictionaryDatabase: the primary storage method used for the program. The database will store the list ofusers, tags, and posts, as well as the login information and preferences of the administrator.

HTML: A language used by the software to communicate with the users web browser. TheHTML code will contain the layout information of the web pages, such as the text andformatting.

MySQL: A language used by the software to communicate with the database. Queries written inthe MySQL language will be used to retrieve information from the database, add newinformation, and update existing information.

WordPress: a Content Management System which allows users to create blogs; allows users tochange themes with highly customizable PHP and HTML code; supports tagging of blog postsand many plug-ins, including some of which will be used in this project such as a language filterand virus scanner

Apache: The web server software used by Bluehost; used to serve the dynamic web pages of theiTouch Education Community Portal

phpBB: Abbreviation of PHP Bulletin Board; an internet forum package