System Design Document

iTouch Education Community Portal

Vanessa Roycroft, Kevin Hamerski, and Hunter Smith 10/31/2010

Table of Contents
1. Introduction ............................................................................................................................................... 3 1.1 Purpose ............................................................................................................................................... 3 1.2 Document Structure ............................................................................................................................ 3 2. System Context ......................................................................................................................................... 4 2.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 ............................................................................................................. 21 5.3 Security Strategy............................................................................................................................... 22 6. Appendix ................................................................................................................................................. 23 6.1 Abbreviations.................................................................................................................................... 23 6.2 Data Dictionary................................................................................................................................. 23

1. Introduction
1.1 Purpose
This document will provide an overview of the iTouch Community Education Portal. It will discuss 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 a discussion of how they interact will be provided. This document will also establish the specifications 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 a detailed view of the different components that are involved.

1.2 Document Structure

This document is organized into 6 sections, with subsections for each. It will begin with a description of the system context as well as a data flow diagram. Then, the major attributes of the systems various data objects and how they relate to one another will be discussed. Next, the hardware, software, and network needed to support the system will be described. Then, a description of each of the systems functions will be provided, along with a Module Dependency Diagram, which will show how the functions are interrelated. The organization of data within the system will be detailed and will include Data Flow Diagrams for the most important functions. Next, pseudocode will be provided for the 3 most complicated functions and decisions regarding implementation will be discussed. Then, the coding rules that are to be followed during implementation will be established. Following the rules, the input and output interfaces will be described and a prototype will be presented. Next, security issues as required by the system and a security implementation plan will be discussed. Finally, an Appendix will provide definitions for all abbreviations and system-specific terms used in this document.

2. System Context
2.1 General Context
The following diagram (Figure 2.1) illustrates what each system tier will consist of. The Client tier 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 some php code. The Web tier contains the php code that will assist with login and document display functions. The php code will be nested inside of the HTML and will provide a connection to the database 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 Forum and WordPress for the general blog. Both the phpBB and WordPress plugins maintain their own databases and code for accessing their respective databases. The EIS tier contains the database needed to hold the data that is used by the system. The database contains several tables to store information about users, documents, and reviews. This information will be obtained by creating queries and executing them with the php code contained in the Web tier. The Client tier would then be responsible for displaying the information obtained by the query.

Figure 2.1 System Level Context Diagram

2.2 Data Flow Diagram

The following diagram (Figure 2.2) illustrates the main flow of information between pages and sections 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 and the actual post and its information are displayed. The login page sends the username and password to the user database to verify the users information. The login page creates a session and reloads the main page while communicating the session information. The My Documents page sends a request to the database with the user ID. The database then returns all documents associated with the user and the file names are displayed on the page. The educators page presents the user with several school subjects as options to choose from. After the user selects an option and navigates to the desired page, that page will interact with the education resources database to retrieve resources for the desired subject. The subject, resource type, and grade level will be sent as a query to the database to find all of the corresponding documents. The results of the 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 document titles are displayed on the page. The user can search for a document by typing in a keyword and upon submitting the request, a query is sent to the database and anything matching the keyword is returned. The programmers forum retrieves all of the post information from the forum database and displays it. When the user clicks on the title of a post, the post ID number is retrieved from the forum database and the actual post and its information are displayed.

All documents uploaded by programmers All documents associated with the user Programmer Documents

My Documents Page

User type = programmer User ID

Document Table

Blog Page

Post ID

WordPress Database
User Navigates User Navigates

Navigate to iTouch Education Community Portal

Main Page Main Page

User Navigates

Educators Page Educators Page Log In Page Log In Page User selects a school subject User Name and Password User Navigates Desired Resource Page (Math, Art, etc) Topics within Forum Programmers Programmers Forum Forum

User Navigates

Create Account Page Subject, resource type, grade level Topic ID User Information All documents that match the query

User Table

Educator Resources Table

phpBB Database
Figure 2.2 Data Flow Diagram

2.3 Data Description

The data model for this web application follows the model in Figure 2.3. First we were given the technical and functional requirements which we then had to turn into conceptual data. Using the conceptual data, physical data was created in the form of the tables, relationships and keys within the database. From this physical data business data is allowed to be stored. This physical data provides the structure for the business data for the iTouch Education Community Portal. This business 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 add documents, delete documents, review documents, and make posts. This data will all be used for educational and developmental purposes. This is all used to help begin the model process by forming the conceptual data first and finishing with the structure for the actual business data to be stored.

Data requirements specified by Client: Blog, Forum, Documents, Account, Document Reviews

Create Logical Data

Database Concept Model Entities: Account Documents Reviews Relationships: Each Document has multiple reviews Each Doc has a user Each user has multiple docs

Performance Issues Create Physical Data Technology Issues Physical Data Model Tables: Account Programmer Docs Educator Docs Doc Reviews Keys: Account: Username Programmer Docs: Document ID Educator Docs: Document ID Doc Reviews: Review ID

Business Data

Create Business Data

Actual Business Data in Database

Figure 2.3 Data Model

2.4 Relationships
The following Entity-Relationship Diagram (Figure 2.4) shows the overall data structure that will support the website. There are three tables that serve different purposes, but they are all interrelated. 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 by only one user, but a document can have multiple reviews associated with it. The Review table stores information about reviews that users have posted. A review is associated with one, and only one, document and one user.

Figure 2.4 Entity-Relationship Diagram

3. Hardware, Software & Network Specification

3.1 Hardware
The website will run on an Apache web server with php and MySQL installed to allow for data access. Developers who will be revising the systems code must have access to a computer with an internet connection.

3.2 Software
In 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 the Bluehost account and incorporated into the system. Developers are able to modify the themes for 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 5MB cable connection is sufficient to load the website pages in an acceptable amount of time (one second). Bluehost provides the optimal performance network that the website will run on.

4. Module Decomposition
4.1 System Modules
Logon(): Users can log into their account so that they can view the documents that they have uploaded 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 the blog and make blog posts. createAccount(): Anyone can go onto the create account page and create an account. The user will enter a username, password, e-mail and what type of account (Educator, Programmer) they wish to sign up for. The user also must read the terms of use policy and click the checkbox that guarantees 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 add the document, it is first added to the Bluehost server. Then the document URL is added to a database table that contains the document URL, the category, the subject, grade level and the user that uploaded the document. deleteDocument(): A user logged into their account has the ability to delete any document that they have previously uploaded to the document database. The user will go to the My

Documents page and select the documents they wish to delete by clicking the checkbox to the left of the document. Then the User will click to delete the document. searchProgrammerDoc(): Programmers can log into their account and go to the programmer documents 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 Educators Resources page then search on subject, category and grade level. They also can search for a keyword on the document. writeTxtBox(): When a user is logged in to their account and go to upload a document page. If they do not have a document but wish to share their ideas and code then they can write their ideas in a text box. This function will automatically develop a .txt file containing the ideas of the user 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, users can post reviews on the documents that they viewed. When a user downloads a document a review document field will pop up which will allow the user to review this document. The review will contain a star rating and a comment field. blogPost(): Blog posts are done by anyone who views the website. They would click on the blog link. There is no educator or programmer account required. Blogs are run by Wordpress which 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 their account they will click on the programmers forum. This will take them to a forum. The forum is operated by phpBB and is hosted on the bluehost server. There is no functionality within html to make the actual post.

10

4.2 Module Dependency Diagram

HomePage

Not Logged In

Login

Create Account

Blog Post

Programmer Account

Blog Post

Educator Account

Programmer Account Only

Only Educator Account

Search Programmer Documents

Programmer Forum

Upload Document

Post Review

Remove Document

Search Educators Documents

Figure 4.2 Module Dependency Diagram

Our design for the module dependency diagram helps to show how the functionality and modules of this web application work together (see Figure 4.2). Coming off of the homepage there are technically two tiers. A user can either be logged in or not logged in. Off of logging in there is an option to create account which then in return logs the user in once the account is created. The non-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 be logged in as a programmer or an educator. The diagram displays that both accounts have access to four of the modules. Either account type can upload, remove and review documents. They both may also access the blog. For a user registered as a programmer, he/she will be able to access two modules that no one else can access. These two modules are the Programmer Documents database and the programmer forum. Users registered as an educator account have one module that they can access that no other account type can. Educator accounts have access to an educators resource page where they can view and search for resources that are specified for educators. This design is better than other designs because it shows the relationship of each account type and what modules that each account type is able to access and work with.

4.3 Data Organization

For 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 Server for this model that will be used is Bluehost server. We chose to use this client-server model over a repository model is because we will be using a database that is stored on Bluehost servers as the backend and server side. This application also entails a front end where users can logon through web browsers to access the many features of this application, thus we need a client side. 11

All of the files and data necessary for this application are stored on one location, the Bluehost server under the sub-domain, Polack. Within this sub-domain there will be a mySQL database that operates in the backend of this client-server model web application. Within this database there will be four tables. One table will consist of all of the information required to create an account. 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 have been uploaded by educators. The final table will hold the information of the reviews made by users on all documents that have been uploaded. This Bluehost server also hosts a Wordpress blog. This blog is used for anyone who visits the website to post anything they want on the blog such as app Ideas or ask questions. There will also be a private forum that is hosted on this server that will allow accounts registered as programmers to view this forum and post code and comments and ask any questions they might have dealing with application development.

4.4 Data Flow Diagrams

4.4.1 UploadFile
Navigate to iTouch Education Community Website Main Page Navigate to page My Documents

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

Returns to my Document page with document displayed on page

Document Database
Figure 4.4.1

12

4.4.2 Search Forum

User Navigates to iTouch Community Portal

User Logs in on login Page

Login

Login(username,password)

Account Database

Main Page Main Page

User Clicks on Forums Link

Forums Page Forums Page

User Clicks on Search Link

Forum Search Page

Forum Results Page

User clicks search button and page passes query with key words to search the Forum Database Loads the page to display results along With the results from the search

Forums Database

Figure 4.4.2

13

4.4.3 Create Forum Topic

Login Page User Clicks to login Go to iTouch Community Portal

Login(username,password)

Accounts Database

Main Page Main Page

User Navigates to Forums Page

Forums Page Forums Page

User Clicks Start a New Topic Thread

Create New Forum Topic Page

Forum Topic Page

Forum Topic, Author information, Date Started

Loads page with Forum Topic ID, Forum Topic, replies to topic, and number of replies.

Forum Database

Figure 4.4.3

14

4.4.4 Review Document

Navigate to iTouch Education Community Website Main Page Navigate to page Documents Display Page

Displays Documents Searched for

postReview(DocName, Rating, review, user)

ReviewPost Navigate to document review post

Document Database
Figure 4.4.4

15

4.4.5 Comment on Blog Post

Navigate to iTouch Community Portal

Blog Database
Homepage Navigate to Wordpress Blog Blog

Post(blogID, comments) Navigate to specific blog post

Blog Post

Click to leave a comment on post

Blog Post Comment

Figure 4.4.5

16

4.4.6 Blog Post

Navigate to iTouch Community Portal

Homepage

Navigate to Wordpress Blog

Blog

createPost(Name, post) Click to create new post

Blog Database
Blog Post

Redirects user back to blog post that has been created

Figure 4.4.6

4.5 Process Decomposition

4.5.1 Create an Account createAccount { Get username, password, e-mail, account type from html form Query database for username If(username exists) Return error username exists already Else Insert username, password, e-mail, account type to account table Return account successfully created Login(username, password) Go to homepage }

17

4.5.2 Upload a File to the Document table Provide an HTML form with a file and 2 text input types Include a submit input type in the form also The 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 $filename Move the uploaded file by using the php function move_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 box If (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 Scheme
HTML/PHP: Spacing: 1. Uniform and constant indentation is to be used. 2. HTML tags such as <table>, <tr>, and <td> should be formatted like: <table> <td> 18

<tr>Column 1, Row 1</tr> <tr>Column 2, Row 1</tr> </td> <td> <tr>Column 1, Row 2</tr> <tr>Column 2, Row 2</tr> </td> </table> 3. File Documentation Guidelines: 1. Banner style documentation at the top of the file (for html) consisting of: <!--Project Name: Project Name--> <!--Author: Authors Name--> <!--Coauthors: Other Authors--> <!--Language: HTML--> <!--Purpose: The purpose of the file.--> <!--Description: Describes the functions of the file.--> <!--Date Created: Date File was created.--> <!--Date Modified: Date file was most recently modified.--> 2. Banner style documentation at the top of the file (for php) consisting of: <?php /*Project Name: Project Name Author: Authors Name Coauthors: Other Authors Language: PHP Purpose: The purpose of the file. Description: Describes the functions of the file. Date Created: Date File was created. Date Modified: Date file was most recently modified.*/ ?> 3. CSS Documentation and Structure: <style type="text/css"> /*Declaration for: body of page.*/ body{ background-color:#b0c4de; /*Property: background-color Value: :#b0c4de */ } </style> 4. PHP Documentation should consist of comments explaining Comparison statements, Functions, and While-loops. Example for Comparison Statements: <?php /*Checks to see if the Session variable for user_name is set to Null or not set.*/ if(isset($_SESSION['user_name'])) { /*Displays the Logout Link if there is a user logged in.*/ 19

echo "<a href=\"Index.php?page=logout.php\"><font size=\"2\" color=\"white\"><b>Logout</b></font></a>"; } else { /*Displays the Login link and the new User link if there is not a user logged in.*/ echo "<a href=\"IndexLogin.php\"><font size=\"2\" color=\"white\"><b>Login</b></font></a>"; echo "<font size=\"2\" color=\"white\">|</font>"; echo "<a href=\"IndexAddUser.php\"><font size=\"2\" color=\"white\"><b>New User</b></font></a>"; } ?> Example for functions: <?php /** Name: writeName * Description: Prints out the name stored in the variable $name. * Parameter: $name * Return Type: N/A */ function writeName($name){ echo $name . is my name.<br/>; } ?> Example for While-Loops: <?php $bush_price = 5; /* Bush price variable which holds the price per item.*/ $counter = 10; /* Counter variable which holds the quanity.*/ echo "<table border=\"1\" align=\"center\">"; echo "<tr><th>Quantity</th>"; echo "<th>Price</th></tr>"; /* While loop that keeps looping until counter is less than or equal to 100.*/ while ( $counter <= 100 ) { echo "<tr><td>"; echo $counter; /*Displays the value counter holds which is the quantity.*/ echo "</td><td>"; echo $brush_price * $counter; /*Multiplies the value of bush_price by the value of counter to get the price per quantity.*/ echo "</td></tr>"; $counter = $counter + 10; /*Increments counter by 10.*/ } echo "</table>"; ?> 20

5.2 Input and Output Interfaces

The 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, and uploading files. Users will be able to upload files such as word documents, PDF files, text files, pictures, PowerPoint files, and Excel files. If users do not have a file readily available they will be able to type into a text field and click submit. The system will generate a basic text file from the users input. The main page of the interface for the website is shown below in Figure 1. This is where everyone who uses the website will be directed when navigating to this site. On the left hand side are links as buttons to the Home page of the site, the Blog, and the My Documents page. The home page is the same as the main page of Figure 1 This image shows the main page for the site. the 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 remove documents. 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 the website using pictures, buttons, and text that are tagged as hyperlinks. Users designated as teachers will view files through the Educator Resources page (shown in Figure 3 below). They will click on the images or links to view the documents under each category. After the users have clicked on a category they wish to find a resource under the interface will display the documents in a table structure (shown in Figure 3 below). Teachers will be able to search within each Figure 2 This image shows category using preset criteria that is shown above the the My Documents page. results (also in Figure 3). The Programmers will upload documents the same way that educators do via the My Documents page. They will also be able to post questions and give people an answer to questions about development via the Forum for programmers by clicking on the Programmer Forum link in the body of the main page. The Forum page is displayed below in Figure 4.

21

Programmers will also be able to post news and respond to questions on their applications via the Blog section of the website (shown in Figure 5 below, after Figure 4). The blog is run via a Word Press installation on BlueHost. All information related to users or documents is stored in a MySQL database also on BlueHost. All connections for the interface will be done through a combination of hyperlinks and MySQL queries executed by the system.

Figure 3 This shows the documents within a category of the Educators Resources.

Figure 4 This shows the forum that the programmers will use to discuss issues and questions on the website.

Figure 5 This shows the main blog page the iTouch Education Community Portal.

5.3 Security Strategy

Security issues we currently have are login authentication and protection of copyrighted content. We plan to implement security measures to make it so users cannot access content without 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 those who should not be accessing it. No other issues have been brought to our attention by the client and when asked she says she is not worried about it. 22

6. Appendix
6.1 Abbreviations
phpBB: PHP Bulletin Board

6.2 Data Dictionary

Database: the primary storage method used for the program. The database will store the list of users, 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. The HTML code will contain the layout information of the web pages, such as the text and formatting. MySQL: A language used by the software to communicate with the database. Queries written in the MySQL language will be used to retrieve information from the database, add new information, and update existing information. WordPress: a Content Management System which allows users to create blogs; allows users to change themes with highly customizable PHP and HTML code; supports tagging of blog posts and many plug-ins, including some of which will be used in this project such as a language filter and virus scanner Apache: The web server software used by Bluehost; used to serve the dynamic web pages of the iTouch Education Community Portal phpBB: Abbreviation of PHP Bulletin Board; an internet forum package

23