Final Report_v2x - Sgraham745.net

hushedsnailInternet and Web Development

Nov 12, 2013 (3 years and 9 months ago)

141 views



COM618


Information
System Project

Universal Wheel of Life







Steven Graham

Student Number:
B00444855

Supervisor: Dr Peter Nicholl

BSc Hons Information Communication Technologies

15
/04/2011



1

Abstract


The Universal Wheel of Life project is a development project which is based on the
original Wheel of life
(Kelly & Poulter, 2010)

which was originally designed within
the University of Ulster to monitor and evaluate students’ academic study skills. The
original Wheel of Life has been used across a number of faculties within the
University during induction classes in September 2009 a
nd 2010.
This project remit is
to put in place
the faculties requested

by the faculties in that, the
system
be more

customisable.








2

Acknowledgment


I would like to thank the following people for their help in completing this project.
Firstly I would like to thank Dr Peter Nicholl the project supervisor for his help and
support during the project. I would also like to thank the members of my project
su
pport group for
the
ir

help and advice especially Martin McCauley for his help
during the development stage of the project.





3

Table of Contents

Abstract

................................
................................
................................
................................
......

1

Acknowledgment

................................
................................
................................
.......................

2

Table of Figur
es

................................
................................
................................
.........................

7

Chapter One

................................
................................
................................
...............................

9

1.0 Introduction

................................
................................
................................
.....................

9

1.1 Background

................................
................................
................................
................

10

1.2 Report Structure

................................
................................
................................
........

11

Chapter
Two

................................
................................
................................
.............................

12

2.0 Literature Review

................................
................................
................................
...........

12

2.1 Introduction

................................
................................
................................
...................

12

2.2 Research and Development

................................
................................
...........................

12

2.2.1 Research

................................
................................
................................
..................

12

2.2.2 Methodology Definition

................................
................................
..........................

12

2.2.3 Waterfall Approach

................................
................................
................................
.

12

2.2.4 Prototyping Approach

................................
................................
.............................

13

2.2.5 Incremental Approach

................................
................................
............................

14

2.2.6 Database normalisation

................................
................................
..........................

14

2.3 Project Vocation

................................
................................
................................
.............

16

2.4 Resources and Technologies

................................
................................
..........................

17

2.4.1 Technologies

................................
................................
................................
...........

17

2.4.2 Resources

................................
................................
................................
................

18

2.5 Conclusion

................................
................................
................................
......................

18

Chapter Three

................................
................................
................................
..........................

19

3.0 Aims & Requirements

................................
................................
................................
....

19

3.1 Introduction

................................
................................
................................
...................

19

3.2 Aim

................................
................................
................................
................................
.

19

3.3 Requirements

................................
................................
................................
.................

19

3.3.1 Requirement Summary

................................
................................
...........................

21

Requirement #: 1

................................
................................
................................
.............

21

Requirement #: 2

................................
................................
................................
.............

21

3.4 Conclusi
on

................................
................................
................................
......................

22

Chapter Four

................................
................................
................................
............................

23

4.0 Design

................................
................................
................................
.............................

23



4

4.1 Introduction

................................
................................
................................
...................

23

4.2 System Architecture

................................
................................
................................
.......

23

4.3
Initial Designs

................................
................................
................................
.................

24

4.3.1 User Website Designs

................................
................................
.............................

24

4.3.2 Database Designs

................................
................................
................................
....

27

4.4 Revised Designs

................................
................................
................................
..............

29

4.4.1 Us
er Revised Website Designs

................................
................................
................

29

4.4.2 Revised Database Designs

................................
................................
.......................

30

4.4.3 Database Table Structure
................................
................................
........................

30

4.4.4 Database Entity Relationship
Diagram

................................
................................
...

32

4.4.5 Table Schemas

................................
................................
................................
........

33

4.5 Conclusion

................................
................................
................................
......................

33

Chapter Five

................................
................................
................................
.............................

34

5.0 Implementation

................................
................................
................................
.............

34

5.1 Introduction

................................
................................
................................
...................

34

5.2 Platform

................................
................................
................................
.........................

34

5.3 Database Imp
lementation

................................
................................
.............................

35

5.4 Website Implementation

................................
................................
...............................

36

5.4.1 Database Connection

................................
................................
..............................

37

5.4.2 User Login

................................
................................
................................
...............

37

5.4.3 Secure

Section

................................
................................
................................
.........

38

5.4.4 User Logout

................................
................................
................................
.............

45

5.4.5 Administration area

................................
................................
................................

45

5.4.6 CSS & jQuery

................................
................................
................................
...........

47

5.4.7 Validation

................................
................................
................................
................

47

5.5 Conclusi
on

................................
................................
................................
......................

48

Chapter Six

................................
................................
................................
...............................

49

6.0 Testing

................................
................................
................................
............................

49

6.1 Introduction

................................
................................
................................
...................

49

6.2 Black Box Testing

................................
................................
................................
...........

50

Requir
ement #: 1

................................
................................
................................
.............

50

Requirement #: 2

................................
................................
................................
.............

50

6.3 White Box Testing

................................
................................
................................
..........

51

6.4 System Testing

................................
................................
................................
...............

52



5

6.4.1 Login Form Testing

................................
................................
................................
..

52

6.4.2 Admin Login Testing

................................
................................
................................

53

6.4 Unit Testing

................................
................................
................................
....................

54

6.5 Browser Testing

................................
................................
................................
.............

54

6.6 Conc
lusion

................................
................................
................................
......................

55

Chapter Seven

................................
................................
................................
..........................

56

7.0 Evaluation

................................
................................
................................
......................

56

7.1 Introduction

................................
................................
................................
...................

56

7.2 Developers Evaluation

................................
................................
................................
...

56

7.
3 Aim Evaluation

................................
................................
................................
...............

56

7.4 Requirement Evaluation

................................
................................
................................

57

7.5 Conclusion

................................
................................
................................
......................

58

Chapter Eight

................................
................................
................................
...........................

59

7.0 Conclusion

................................
................................
................................
......................

59

7.1 Introducti
on

................................
................................
................................
...................

59

7.2 The project

................................
................................
................................
.....................

59

7.2.1 What went well

................................
................................
................................
.......

59

7.2.2 What went less well

................................
................................
................................

60

7.
2.3 If I did the project again

................................
................................
..........................

60

7.3 Conclusion

................................
................................
................................
......................

61

Bibliography

................................
................................
................................
............................

62

Appendices

................................
................................
................................
...............................

64

Appendix A

................................
................................
................................
...........................

65

System Functional
Requirements

................................
................................
....................

66

System Non
-
Functional Requirements

................................
................................
............

70

Appendix B

................................
................................
................................
...........................

72

SQL File


Create Database

................................
................................
..............................

73

We
bsite Code

................................
................................
................................
...................

75

Website Screenshots


Academic Area

................................
................................
.........

113

Website Screenshots


Administration Area

................................
................................
.

115

Appendix C

................................
................................
................................
.........................

117

Black Box Testing

................................
................................
................................
...........

118

System Functional Requirements

................................
................................
..................

118

System Non
-
Functional Requirements

................................
................................
..........

123



6

White Box Testing

................................
................................
................................
..........

124

Unit
Testing

................................
................................
................................
....................

125

User Registration Testing

................................
................................
...............................

125

New Wheel Testing

................................
................................
................................
........

126

User Profile Testing

................................
................................
................................
........

12
7

Existing Wheels Testing

................................
................................
................................
.

128

User Logout Testing

................................
................................
................................
.......

130

Admin Us
er Administration Testing

................................
................................
...............

131

Admin Wheel Administration Testing

................................
................................
............

132

Admin Access Administration Testing
................................
................................
............

133

Admin Logout Testing

................................
................................
................................
....

134

Browser Testing

................................
................................
................................
.............

135

Internet Explorer Browser Testing

................................
................................
.................

135

Google Chrome Browser Testing

................................
................................
...................

135

Firefox Browser Testing

................................
................................
................................
.

136

Safari Browser

Testing

................................
................................
................................
...

136
















7

Table of Figures

Figure 1
-

Current

Wheel of Life

................................
................................
.............................

10

Figure 2
-

Canadian Occupational Performance Measure

................................
.......................

16

Figure 3


Requirement# 1
-

Table

................................
................................
...........................

21

Figure 4


Requirement# 2
-

Table

................................
................................
...........................

21

Figure 5
-

System Architecture Diagram

................................
................................
..................

23

Figure 6
-

Index Page Design

................................
................................
................................
....

24

Figure 7
-

Registration Page Design

................................
................................
.........................

25

Figure 8
-

Existing Wheel Page Design

................................
................................
.....................

25

Figure 9
-

New Wheel Page Design

................................
................................
..........................

26

Figure 10
-

User Profile Page

................................
................................
................................
....

26

Figure 11
-

Database ER
-
Diagram
-

Original Design

................................
................................
.

28

Figure 12
-

Users Table Structure
................................
................................
.............................

30

Figure 13
-

Access Levels Table Structure

................................
................................
................

30

Figure 14
-

Wheel Details Table Structure

................................
................................
...............

31

Figure 15
-

Users Wheel Details Table Structure

................................
................................
.....

32

Figure 16
-

Database Revised Design

................................
................................
.......................

32

Figure 17
-

Table Schemas

................................
................................
................................
.......

33

Figure 18
-

Platforms Used During Development

................................
................................
....

34

Figure 19
-

SQL Statement Snippet

................................
................................
..........................

35

Figure 20
-

Database within phpMyAdmin

................................
................................
..............

36

Figure 21
-

Database Login Script

................................
................................
............................

37

Figure 22
-

Index Page
-

User Login

................................
................................
..........................

37

Figure
23
-

Check user login SQL query

................................
................................
....................

38

Figure 24
-

Session Register Code

................................
................................
............................

38

Figure 25
-

Accordion & Tab jQuery function

................................
................................
..........

39

Figure 26
-

Tabs & Accordion code snippet

................................
................................
.............

39

Figure 27
-

Tab & Accordion screenshot

................................
................................
..................

39

Figure 28
-

Session Start coding

................................
................................
...............................

40

Figure 29
-

Status Bar code

................................
................................
................................
......

40

Figure 30
-

Status Bar

................................
................................
................................
...............

40

Figure 31
-

Tab One & iFrame code

................................
................................
.........................

41

Figure 32
-

SQL Query select users

wheels

................................
................................
..............

41

Figure 33
-

SQL Query users wheel result

................................
................................
................

41

Figure 34
-

SQL Query shared wheels

................................
................................
......................

42

Figure 35
-

SQL Query shared wheel res
ult

................................
................................
.............

42

Figure 36
-

SQL Query insert new wheel

................................
................................
..................

42

Figure 37
-

PHP Code display user details

................................
................................
................

43

Figure 38
-

SQL Query to update profile

................................
................................
..................

43

Figure 39
-

User profile tab

................................
................................
................................
......

43

Figure 40
-

SQL Query user registration

................................
................................
...................

44

Figure 41
-

XML SQL Query

................................
................................
................................
......

44

Figure 42
-

XML save script

................................
................................
................................
......

44

Figure 43
-

Logout Script

................................
................................
................................
..........

45



8

Figure 44
-

SQL Query Admin login

................................
................................
..........................

45

Figure 45
-

User Administration Screenshot

................................
................................
............

46

Figure 46
-

Wheel
Administration Screenshot

................................
................................
.........

46

Figure 47
-

Level Administration Screenshot

................................
................................
...........

47

Figure 48


Requirement# 1
-

Testing

................................
................................
......................

50

Figure 49


Requ
irement# 2
-

Testing

................................
................................
......................

50

Figure 48
-

SQL File

................................
................................
................................
...................

73

Figure 50


index.php Code

................................
................................
................................
.....

75

Figure 51
-

checklogin.php Coding

................................
................................
...........................

77

Figure 52
-

Secure.php Code

................................
................................
................................
....

78

Figure 53
-

existing_wheel.php code

................................
................................
.......................

90

Figure 54
-

shared_wheel.php code

................................
................................
........................

93

Figure 55
-

insert_new_wheel.php code

................................
................................
.................

95

Figure 56
-

update_profile.php code

................................
................................
.......................

96

Figure 57
-

new_user.php

................................
................................
................................
........

96

Figure 58
-

configure.php code

................................
................................
................................

97

Figure 59
-

login_success.php code

................................
................................
.........................

99

Figure 60
-

logout.php code

................................
................................
................................
.....

99

Figure 61
-

redirect.html code

................................
................................
................................
.

99

Figure 62
-

registration.html code

................................
................................
.........................

100

Figure 63
-

Admin
-

index.php code

................................
................................
.......................

102

Figure 64
-

Admin
-

check_login.php code

................................
................................
............

104

Figure 65
-

Admin
-

all_users.php code

................................
................................
.................

105

Figure 66


Admin
-

all_wheels.php code

................................
................................
..............

106

Figure 67
-

Admin all_levels.php code

................................
................................
...................

109

Figure 68
-

Admin
-

secure.php code

................................
................................
.....................

110

Figure 69
-

Admin
-

login_success.php

................................
................................
..................

112

Figure 70
-

Admin
-

redirect.html

................................
................................
..........................

112

Figure 71
-

Admin
-

logout.php

................................
................................
..............................

112

Figure 72
-

Index Page Screen Shot

................................
................................
........................

113

Figure 73
-

Secure Page Existing Wheel Screen Shot

................................
.............................

113

Figure 74
-

Secure Page New Wheel Screen Shot

................................
................................
..

114

Figure 75
-

Secure Page User Profile Screen Shot

................................
................................
..

114

Figure 76
-

Admin Index Page Screen Shot

................................
................................
............

115

Figure 77
-

Admin Secure User Administration Screen Shot

................................
.................

115

Figure 78
-

Admin Secure Wheel Administration Screen Shot

................................
..............

116

Figure 79
-

Admin Secure Access Administration Screen Shot

................................
..............

116






9

Chapter

One

1.0
Introduction


This project was to design and build a Universal Wheel of Life based on the original
Wheel of Life
(Kelly & Poulter, 2010)

which was designed within the University of
Ulster for students to evaluate their academic skills.

The original Wheel of Life system was used across a number of Schools within the
university during their induction classes in September 2009 and 2010. The f
eedback
from staff within the schools was that the original system was too restrictive and they
requested for a more customisable version of the system which lead to the Universal
Wheel of Life.

This project report will detail how the new Universal Wheel o
f Life has been
designed, developed and is available to allow any School within the University to use
it within any context the academic requires.

The main aims of this project are to design and implement a clean, clear system which
will be a management
system. The system will be able to manage
the storage of
all
the academic user’s wheel preferences

and enable them to share the wheels with the
students and other staff members
.

This report will give an in depth view into the main areas of the project.

It
will set out
how the current system operates, also the aims and requirements that have been set
out. This report will also contain details on the design, implementation and the testing
of the system. At the end of the report there will be a section which w
ill compare the
finalised system to the original aims and requirements.







10

1.1
Background

The project is based
on a web based tool called the S
kills
W
heel of
L
ife. It is used
within the University of Ulster for their Computing and Mathematics and the Life and
Health Science faculty. It is a graphical tool that captures students’ reflection on the
first wheel and then on the second wheel allows the student to sho
w
their

level of
satisfaction for each of the topics (please see figure
1

below). The information taken
from the wheels are usually shared with the student advisors, which allows for
discussion into their personal development. Based on the

responses that
the user gives

on the wheels, will determine the resources that are recommended for them.


Figure
1

-

Current

Wheel of Life

Although the current system is working and students and staff are getting results, the
one task in which
academic are unable to do and continually request that this be made
available, is to produce their own wheels with their own descriptors and resources.

This project is not to re
-
create the wheel as such, but is too simple make modification
to the current s
ystems which will facilities the request made by the academics. Later
in the report full details will be provided on the current aims of the project.



11

1.2 Report

Structure


Below is an outline of the structure this report will follow and a brief introduction into
what each chapter will include

1.2.1

Literature Review

This section of the report will deal with the pre project research I carried out, to
include methodology res
earch and technologies research.

1.2.2
Requirements

During the requirements section I will point out the requirements that where set out
after looking at the request set out by the faculties
.

1.2.3 Design

The design chapter within the report will set out a

detailed design of how the
system
will look like. This section will also show the designs for the database.

1.2.4 Implementation

This section of the report will deal with the development of the system. During this
part of the report I will also detail any

problems I had during the development of the
system.

1.2.5 Testing

In the testing section of the report I will show the testing method I used and the results
in which I got from the testing. I will also detail at this stage any changes I have made
due to
the testing results.

1.2.6 Evaluation

Within this section of the report I will evaluate how well the project has met the
original aims and requirements.

1.2.
7

Conclusion

In this section I will set out how the project went, if the system meets all of the ai
ms
and objects. I will also detail what I would change if I were to do the project.






12

Chapter
Two

2.0
Literature Review


2.1 Introduction


Within the literature review section I will publish the research I have done for the
project. This will include
methodology research and technology research. The
research carried out in this section will help to put in place a better project schedule
and plan.

2.2

Research and Development


2.2
.1

Research


To enable me to plan my project efficiently, I will have to
decide on a methodology,
below is a definition of methodology and research on some of the methodology’s that
are available.

2.2
.2

Methodology Definition


A software development methodology or system development methodology in
software engineering is a fram
ework that is used to structure, plan, and control the
process of developing an information system.

(Wikipedia
-

Software development methodology, 2010)


There a number of different methodologies to be used when pla
nning a development
project. Below are a few examples of the models available to be used;

2.2
.3

Waterfall Approach


The waterfall model is a traditional lifecycle which is a sequential development
approach. It was made popular during the 1970s. The develop
ment is seen as a steady
flow downwards, which is why it takes its name after a waterfall as is flows
downwards.



13

There are a number of versions of the waterfall approach/model, below are the main
phases in the waterfall model;



Requirement Analysis



Design



Implementation



Testing



Integration



Maintenance

The basic principles of the waterfall model include;



The project is split into sequential phases. But also allows some overlap and
back stepping is allowed between each phase.



The main emphasises are on
planning, time management, budgets and
implementation.



Tight control is maintained over the lifetime of the project.

(Leszek A. Maciaszek, 2005)

(Wikipedia
-

Software development meth
odology,
2010)

2.2
.4

Prototyping Approach


Prototyping is the development approach to software development. Prototyping is
where an incomplete version of the software being developed is presented, to allow
users to see, use and comment on, to ensure
that it meets the requirements that they
envisaged.

The basic principles of prototyping are;



Not a standalone, a complete development methodology.



Helps to reduce project risk, by breaking the project into smaller segments.



Users are involved throughout th
e development.



Small scale mock
-
ups of the system are produced.



Prototypes evolved to meet user’s requirements.



Prototypes can evolve into a working system.

(Wikipedia
-

Software development methodology, 2010)



14

2.2
.
5

Incremental Approach


Also known as the linear and iterative system development methodology approaches.
The primary objective of this approach is to reduce the risk by breaking the project up
into smaller pieces, which leads to easier changes during the

development process.

The basic principles of this model are;



A series of mini
-
waterfalls are performed, where all phases of the
development are completed for each small part of the system, before
proceeding to the next stage.



Overall requirements are defi
ned before proceeding to evolutionary



The initial concept, analysis, design and system core are defined using the
waterfall approach. This is then followed by the iterative prototyping
approach, which then leads to the final prototype/working system.

2.
2
.
6

Database normalisation


Normalisation is the process of organising the data to reduce the amount of
redundancy. The main goal of normalisation is to decompose the relat
ionships in
order to produce s
maller
,

well
-
structure
tables. Typically database designe
rs will go to
3
rd

normal form but there are 4
th

and 5
th

normal forms. Below is 1
st
, 2
nd

and 3
rd

normal
forms and the conditions that should be meet in each



(Database Normalization, 2011)












15

First Normal Form


A table
is in first normal form if and only if it satisfies the following five conditions:

1.

There's no top
-
to
-
bottom ordering to the rows.

2.

There's no left
-
to
-
right ordering to the columns.

3.

There are no duplicate rows.

4.

Every row
-
and
-
column intersection contains exac
tly one value from the
applicable domain (and nothing else).

5.

All columns are regular [i.e. rows have no hidden components such as row
IDs, object IDs, or hidden timestamps].


(First Normal Form, 2011)

Second Normal Form


A

first normal form table is in second normal form

if and only if all its non
-
prime
attributes are functionally dependent on the whole of every candidate key. (A non
-
prime attribute is one that does not belong to any candidate key.)

(Second Normal Form, 2011)

Third Normal Form


A table is in third normal form if and only if

1.

The relation
table

is in second normal form

2.

Every non
-
prime attribute of
the relationship table

is non
-
transitively
dependent (i.e. directly dependent) on every candidate key of
relationship
table.

(Third Normal Form, 2011)








16

2.3

Project Vocation


Currently there are other forms of the wheel of life, one of which is w
here the wheel
of life originated namely the Canadian Occupational Performance Me
asure (COPM)
Below is figure 2

which shows the COPM. Another version of the wheel is the
generative learning object (GLO).


Figure
2

-

Canadian Occupational Performance Measure

(Standard and Bespoke Assessments)

Although there our other version of the wheel out there, there don’t seem to be any
the match this wheel of life exactly. The other version appears

to be formed based
designs, which give users feedback, one they have filled in all the boxes. The wheel
used by the University of Ulster is more of a graphical design, it invites the user into
use it. Rather than the user typing there answers into boxes t
hey simply slide the
colour up or down the spoke of the wheel until the reach the number level they
believes best matches. This method is more inviting to any user that a simple form
like figure 2.0, it simple does not invite the user in.





17

2.
4

Resources a
nd Technologies


Also during the project I will be using a number of new pieces of software and
different programming languages, so I will have to use a number of resources to help
me improve my knowledge of these programs and languages. Resources that wil
l be
used will include both books and websites.

2.4
.1 Technologies


Within the development of the project there are a number of languages I will use to
produce the website and the associated database. The languages I will be using within
the project includ
e PHP, MySQL and jQuery. Although I have some experience of
using HTML, PHP and MySQL I will still have to do some research to help achieve
some of the objectives of the project. In terms of jQuery this is a language that I have
no experience so a lot of r
esearch will have to be done to allow me to incorporate it
into the project. Below are details of each language

HTML

-

which stands for
Hypert
ext

Mark
-
up

Language, is the predominant
mark
-
up

language for web pages. HTML is the basic building
-
blocks of webpages.


(HTML, 2010)

PHP



which stands for Hypertext Pre
-
processor,

is a widely
-
used general
-
purpose
scripting language that is especially suited for Web develop
ment and can be
embedded into HTML.

(PHP, 2010)

MySQL

-

is a relational database management system (RDBMS) that runs as a server
providing multi
-
user access to a number of databases.

(MySQL, 2010)

j
Query

-

is a fast and concise JavaScript Library that simplifies HTML document
traversing, event handling, animating, and Ajax interactions for rapid web
development.

(jQuery)





18

2.4.2 Resources


To help improve my knowledge of
the above areas I will uses the resources listed
below and as I go through the project I am sure I will find a number of other resources
which I will detail as I go through the project.

Books



Head First PHP & MySQL
-

(Morrison, 2009
)




Beginning HTML5 and CSS3
-

(Christopher Murphy, 2010)

eBook



jQuery Cookbook
-

(jQuery, 2010)

Website



W3Schools
-

(W3Schools, 2010)



jQuery
-

(jQuery)



PHP
-

(PHP, 2010)


2.5

Conclusion


For this project the waterfall lifecycle appears to best suit. The waterfall method has
been chosen as the project will proceed in the way that the waterfall is laid out;



Requirements


will be decided on at the start of the project.



Design


will start with the requirements are finalised.



Implementation


will start when the final designs are produced.



Testing


will take place once the implementation has been finished, a
lthough
some backtracking may occur if faults are found.



Integration


will take place once all testing is completed and all faults are
repaired.

Although the waterfall model does follow a sequence, it does allow for a small
amount of backtracking between each stage. In this project it is foreseen that only a
small amount of backtracking should take place.
Although I have set the main
technologies I

am going to use in the project I am sure as I go through the
development stages I will find other resources which will be useful.



19

Chapter Three

3.0 Aims & Requirements


3.1 Introduction


The aims and requirement section of the report will detail the aims
of the project. This
section will also detail the requirements that have been produced from the aims of the
project.

3
.
2

Aim


The aim of this project is to produce an online web
-
based tool, that can capture
descriptors and resources for any topic an
academic could wish. A generic tool will
then create a customised version of the wheel and provide a Uniform Resources
Locator (URL) in which staff can share with their students to use for reflection and
personal development.

3.
3

Requirements


The requirem
ents for this project include;



A web based tool to capture descriptors and resources




There must be a website in where the user can enter the
descriptor that appear around the outside of the wheel and also
an area where resources can be added for each desc
riptor, the
resource can be either a text resource or a website address




A generic tool to create customised wheel




This tool must be able to take the resources and descriptor that
are enter by the user into the website and use them to produce a
flash file

which contains a Universal Wheel of Life




20



A generic tool to create an URL for the wheel




To enable the academics to share their created wheels with
their
students
, the system must be able to create
a

unique URL
so
that the academics can email it to their
students, to enable the
students to access the wheels.




User profiles


o

User registration screen

o

User login screen




To enable the academics to access
the wheels in which they
create the website must have facility which allows them to log
into a secure secti
on of the website, where they can manipulate
the wheel details.



Database


o

Database for storing user details

o

Wheel Names

o

Wheel Descriptors

o

Wheel Resources

o

Wheel URL’s




When the users creates there wheel the details have to be
stored. To enable t
he details to be stored a database will have to
be created. As the details are stored within the database this
will mean that the details are easily called when the user logs
into
their

account.







21

3.3
.1 Requirement Summary


A requirements specification is
a complete description of the behaviour of the system
to be developed. It sets out the functional and non
-
functional requirements of the
system to show the interactions the user will have with the system.

(Software Requirements Specification, 2010)

There are a number of requirement
specifications available to use, the model in which
I have decided to use is the Volere model
(Volere Requirements Rescources, 2010)

Bel
ow

I have listed two of the requirements; the remainder of the requirements are
listed within appendix A

Requirement #: 1

Requirement Type:

Functional

Priority:

High

Description:

Log on as a User

Rationale:

The
academics require a
log
in
to the system
using their own
User ID and Password

Source:

Steven Graham

(Developer)

Fit Criterion:

Users will have access to the user GUI

Conflicts:

-

Customer Satisfaction

Delivered:



Expectations Met:


Figure
3



Requirement# 1
-

Table



Requirement #: 2

Requirement Type:

Functional

Priority:

High

Description:

Log on as an
Administrator

Rationale:

The system requires
an

administrator section to allow
maintenance etc. of system

Source:

Steven Graham

(Developer)

Fit Criterion:

Administrator will have access to the admin

GUI

Conflicts:

-

Customer Satisfaction

Delivered:



Expectations Met:


Figure
4



Requirement# 2
-

Table

There are a number of functional and non
-
functional requirements associated with this
project. The remainder of the requirements can be found within appendix A which is
located
on page 66

of this document.



22

3
.
4 Conclusion


The aims and requirements have been set out for the project within this section. The
remainder of the report will hopefully show how the development of the system as
met the requirements and
aims set out.






















23

Chapter Four

4.0 Design

4.1 Introduction


In this section of the report I will set out the details of the design of the Universal
Wheel of Life.

To enable the creation of the user interface and the database, the
technologies which
will be used will include;



Extensible Hypertext Mark
-
up Language (XHTML )



Cascading Style Sheets (CSS)



Hypertext Pre
-
processor (PHP)



Database (MySQL)



DOM manipulation via j
Query

4.2 System Architecture


A system architecture or systems

architecture is the conceptual model that defines the
structure, behaviour, and more views of a system.

(Systems architecture, 2011)

Below is a diagram of the system architecture involved with the Universal Wheel of
Life

Thin Client
Internet Server
Database Server

Figure
5

-

System Architecture Diagram




24

4.3

Initial Designs


In this section of the report I will set out the initial designs of both the user website
interface and the associated database

4.3
.1 User
Website Designs


On the next page
are details of the original design for the user interface of the website

Index Page

Login
Register
TITLE
Staff Number
Password

Figure
6

-

Index Page Design

The index page of the website will contain two text boxes where the user will enter
their

username and password. The screen will also have one button on it which the
user will click to login; behind this button will be a script to check that the user has
e
ntered the details that are contained in the database. If the user does not have login
credentials there will also be a link to a registration page.



25

Registration Page

TITLE
Register
Staff Number
Forename
Surname
Email Address
Password

Figure
7

-

Registration Page Design

The registration page of the website
will allow users to register to use the Universal
Wheel of Life system. The registration page will contain a number of text boxes
which will allow user to enter their own details for the website. They will then click
t
he register button which will call a script which will write there details to the
database.


Existing Wheels Page

TITLE
Existing
Wheel
New
Wheel
User
Profile
Name of Wheel
Description
Link
Shared
Published
Delete
Log Out
Shared Wheels
Name of Wheel
Description
Link
Shared
Copyable
Copy
#
Name Wheels

Figure
8

-

Existing Wheel Page Design

The existing wheels page will consist of two table
s, both created by MySQL
queries
.
The first table will be created by a query which will select all the wheels that the
logged in user has created and stored in the database.

The second table will also be


26

created by a query; it will display wheel details
from the database in which users have
created and allowed to be shared.

New Wheel Page

TITLE
Existing
Wheel
New
Wheel
User
Profile
Name of Wheel
Log Out
Description
Descriptor
1
Descriptor
2
Descriptor
3
Descriptor
4
Descriptor
5
Sharable
Published
Resources
for weak
Resources
for average
Resources
for good
Copy
URL for good
URL for average
URL for average
Save
/
Publish

Figure
9

-

New Wheel Page Design

On this page within the website the users will fill in a number of boxes which will be
the details of their Universal Wheel.
These details

will all be written to the database.

User Profile Page

TITLE
Existing
Wheel
New
Wheel
User
Profile
Log Out
Forename
Surname
Email Address
Password
Update

Figure
10

-

User Profile Page

The user profile page will display the user’s details that they entered during
registration. This page allows the users to click into any of the boxes and change their
details.



27

Other Features


The last three pages listed previous will

all actually be placed within one page. I will
use jQuery to create tabs for each of the pages listed previous, so although it may look
like three separate page they will actually all be listed inside one. Also once the user
logs into the secure section o
f the website there will be a button located on each page
which will allow the users to log out.

4.3
.2 Database Designs


The initial designs behind the database set out that there would three tables within the
database. These would be the users table, the
access levels table and the wheel details
table. There would then be a link table called users wheel table.

Below are details on
what each table will hold

Users Table


The users table will hold the details of the register users. It will hold users login
details and there email addresses.

Access Levels Table


The access levels table will hold details of the access levels to be used for security
within the website. The table will contain the level number, name and a description of
the levels.

Wheel Details
Table


The wheel details table will hold all the information the user enters about the wheel
they are creating. Fields in which it will hold include name, description and
descriptor.






28

Below is an ER
-
diagram of the original database design

Users
PK
User ID

Forename

Surname

Email Address

Password
FK
1
Level ID
Access Levels
PK
Level ID

Level Name

Level Details
Wheel Details
PK
Wheel ID

Name

Description

Descriptor
_
1

Descriptor
_
2

Descriptor
_
3

Descriptor
_
4

Descriptor
_
5

Resource Text

Resource URL

Publish

Share

Copy

Wheel URL
Users Wheels
PK
,
FK
1
User ID
PK
,
FK
2
Wheel ID

Figure
11

-

Database ER
-
Diagram
-

Original Design











29

4.
4

Revised Designs

After further analysis and discuss I found that a few changes where required to the
original design. Below are the changes that were made
to both the website and the
database.

4.
4
.1 User Revised Website Designs


Below are details of the pages in which there designs have been revised

User registrations

Changes to the original user registration page (
on page
25
) where

1.

Staff Number changed to Username


as staff may wish to use a text version
of a user name instead of having to use their university staff number.

2.

Removal of forename and surname


I

felt that this information was not
required in the system at the moment. This was going to be data that would not
be used within the system.

User Profile

The following changes have been made to the original user profile (
on page 26
)

1.

As I had changed the staff number on the registration page I also changed it on
the user profile. So it was also changed to username.

2.

As forename and surname where yet again removed from the registration page
as they were not required, I also remove
d them from the user profile page.

New Wheel Page

The

original new wheel page (
on page 26
) had the biggest change. The original design
simply didn’t leave enough room for all the descriptors and resources that where
required
for each wheel.

The new design of this page incorporated another jQuery feature namely accordions.
Each accordion would be for each of the five descriptors, within the each descriptor
accordion will be a number of text boxes which will allow user to enter
the resources
required for each descriptor.





30

4.
4
.2 Revised Database Designs


Due to the changes that where made within the website designs, a number of changes
had to be made to the database. There were no changes made to the number of tables
within the

database, but there were a number of changes made to the fields within two
of the tables. Below are the changes that have been made to the original database
designs (
on page
27
)

1.

The users table has been changed. The changes where

to remove to fields from
the users table. The fields that were removed where the forename and surname
fields as these where no longer required.

2.

The wheel details table has been extended, due to the changes made in the
design there are now a large number o
f descriptors and resources to be stored.


4.4.3 Database Table Structure


Now that the revised database designs have been completed I will set out the table
structure. The table structures for each table are set out below

Users Table

Field

Description

Type

User_ID (
primary key)

User’s Unique ID


Auto
increment

Integer (10)

username

User’s chosen username

Varchar (30)

email_address

User’s email address

Varchar (40)

Password

User’s chosen password

Varchar (20)

Level_ID

Foreign Key

Integer (2)

UW_id

Foreign Key


User Wheel
Table Primary Key

Integer (2)

Figure
12

-

Users Table Structure

Access Levels

Table

Field

Description

Type

Level
_ID (
primary key)

Level

Unique ID


Auto
increment

Integer (
2
)

Level_Name

Level Name

Varchar (30)

Level_Details

Gives administrators details
on each level

Varchar (40)

Figure
13

-

Access Levels Table Structure



31

Wheel Details

Table

Field

Description

Type

Wheel
_ID (
primary key)

Wheel

Unique ID


Auto
increment

Integer (
5
)

Name

Wheel name

Varchar (2
0)

Description

Wheel description

Varchar (10
0)

Descriptor_1

Wheel descriptor one

Varchar (5
0)

Descriptor_2

Wheel descriptor two

Varchar (50)

Descriptor_3

Wheel descriptor three

Varchar (50)

Descriptor_4

Wheel
descriptor four

Varchar (50)

Descriptor_5

Wheel descriptor five

Varchar (50)

Text_1_weak

Wheel text resource

Varchar (100)

Text_1_average

Wheel text resource

Varchar (100)

Text_1_good

Wheel text resource

Varchar (100)

Text_2_weak

Wheel text resource

Varchar (100)

Text_2_average

Wheel text resource

Varchar (100)

Text_2_good

Wheel text resource

Varchar (100)

Text_3_weak

Wheel text resource

Varchar (100)

Text_3_average

Wheel text resource

Varchar (100)

Text_3_good

Wheel text resource

Varchar (100)

Text_4_weak

Wheel text resource

Varchar (100)

Text_4_average

Wheel text resource

Varchar (100)

Text_4_good

Wheel text resource

Varchar (100)

Text_5_weak

Wheel text resource

Varchar (100)

Text_5_average

Wheel text resource

Varchar (100)

Text_5_good

Wheel text resource

Varchar (100)

url
_1_weak

Wheel url
resource

Varchar (4
0)

url
_1_average

Wheel url

resource

Varchar (4
0)

url
_1_good

Wheel url

resource

Varchar (4
0)

url_2_weak

Wheel url resource

Varchar (40)

url_2_average

Wheel url resource

Varchar (40)

url_2_good

Wheel url resource

Varchar (40)

url_3_weak

Wheel url resource

Varchar (40)

url_3_average

Wheel url resource

Varchar (40)

url_3_good

Wheel url resource

Varchar (40)

url_4_weak

Wheel url resource

Varchar (40)

url_4_average

Wheel url resource

Varchar (40)

url_4_good

Wheel url resource

Varchar (40)

url_5_weak

Wheel url resource

Varchar (40)

url_5_average

Wheel url resource

Varchar (40)

url_5_good

Wheel url resource

Varchar (40)

Publish

Shows if wheel is ready for
publishing

Varchar (3)

Share

Shows if wheel is shareable

Varchar (3)

Copy

Shows if wheel is copy able

Varchar (3)

Wheel_URL

Uniquely created url storage

Varchar (50)

User_ID

Foreign Key


User Table

Integer (10)

UW_ID

Foreign Key


User Wheel
Table Primary Key

Integer (2)

Figure
14

-

Wheel Details

Table Structure



32

User Wheel Details

Table

The user wheel details table is a link table between two of the tables, the users table
and the wheels table. The reason there is a link table is that during normalisation I
found that the relationship between users and wheels was a many to many relationship
as one user could be associated with many wheels and then many wheels could be
associ
ated with many users. Below is the structure of the user wheel details table

Field

Description

Type

UW_ID

Foreign Key


User Wheel
Table Primary Key

Integer (2)

User_ID

Foreign Key


User Table

Integer (10)

Wheel_ID

Foreign Key


Wheel Table

Integer (10
)

Figure
15

-

Users Wheel Details

Table Structure

4.4.4 Database Entity Relationship Diagram

Below is the Entity Relationship Diagram for the database



Figure
16

-

Database Revised Design

Access_Levels
PF
Level_ID
Level_Name
Level_Details
PF
User_ID
Users_Wheel_Details
PF
User_ID
PK
Wheel_ID
PF
Level_ID
Users
PK
User_ID
username
email_address
password
PK
Level_ID
Wheel_Details
PF
Wheel_ID
name
description
descriptor_1
descriptor_2
descriptor_3
descriptor_4
descriptor_5
text_1_weak
text_1_average
text_1_good
text_2_weak
text_2_average
text_2_good
text_3_weak
text_3_average
text_3_good
text_4_weak
text_4_average
text_4_good
text_5_weak
text_5_good
text_5_average
url_1_weak
url_1_average
url_1_good
url_2_weak
url_2_average
url_2_good
url_3_weak
url_3_average
url_3_good
url_4_weak
url_4_average
url_4_good
url_5_weak
url_5_average
url_5_good
Publish
Share
Copy
Wheel_URL
PF
User_ID
PF
Level_ID


33


4.4.5 Table
Schemas


As you have seen there are four tables within the database. The database has been
normalised, below are the table schemas

Table Name

Fields

Access_levels

(
Level_ID
, Level_Name, Level_Details)

Users

(
User_ID
, username, email_address,
Level_ID
,
UW_ID
)

User_Wheel_Details

(
UW_ID
,
User_ID
,
Wheel_ID
)

Wheel_Details

(
Wheel_ID
, name, description, descriptor_1, descriptor_2,
descriptor_3, descriptor_4, descriptor_5, text_1_weak,
text_1_average, text_1_good, text_2_weak, text_2_average,
text_2_good, text_3_weak, text_3_average, text_3_good,
text_4_weak, text_4_average, text_4_goo
d, text_5_weak,
text_5_average, text_5_good, url_1_weak, url_1_average,
url_1_good, url_2_weak, url_2_average, url_2_good,
url_3_weak, url_3_average, url_3_good, url_4_weak,
url_4_average, url_4_good, url_5_weak, url_5_average,
url_5_good, Publish, Share,
Copy, Wheel_URL,
User_ID
,
UW_ID
)

Figure
17

-

Table Schemas


4.5 Conclusion


As you have seen during chapter four the designed had changed in some areas from
the original plans where done. From the chapter it has been made clear of

the reasons
for the changes in the design in which the main was to improve the usability of the
system. From the new designs show in this chapter the development should be able to
proceed without any major design issues.





34

Chapter F
ive

5.0
Implementation


5.1 Introduction


Within the implementation section of the report I will detail how the functionality of
system has been produced. I will also detail the platforms that were used
during the
development of the system. During this section I will also point
out the areas in which
there were problems.

The implementation started with the initial development of the
database, once the framework of the database was in place the website development
began. Throughout the development of the website, small changes wer
e made to the
database;

these will be detailed during the report.

5.2 Platform


The platforms that were
used during the development and implementation stages of
the project where

Laptop

HP Pavilion

Processor

Intel® Core 2 Due 2.20 GHz

Memory

2.00 GB

Operating System

Windows 7 Professional 64 Bit



Server


Operating System

Linux

PHP Version

5.2.16

MySQL Version

5.0.92

Apache Version

2.2.17


Figure
18

-

Platforms Used During Development






35


5.3 Database Implementation


For the implementation of the database for the website I used a piece of software to
help aid with the design and implementation of the database. The piece of software
used was called
DeZign
-


“DeZign for Databases is an intuitive database design tool
for

developers and DBA's that can help you model, create
and maintain databases. The software uses entity
relationship diagrams (ERDs) to graphically design
databases and automatically generates the most popular
SQL and desktop databases.”


(DeZign for Databases V6, 2010)

I also used the DeZign software during the design stage of the project, to produce the
Entity Relationship Diagrams. Once the design was completed inside the software I
was able to uses it export feature to produc
e a MySQL file which contained the SQL
in which would create the database within the web server. Below is a snippet of the
code within the file, the full file can be found within appendix B
on page 73


Figure
19

-

SQL Statement Snippet







36

Once the SQL
file was

created I then uploaded it to the web server where it was
extracted and the database was created. Below is a screen shot of the database created
within the
webserver


Figure
20

-

Database within phpMyAdmin


5.4 Website Implementation


Within this section I will detail how the website was created and how the information
on the website is created. Within this section there will only be small pieces of code
shown, the remainder of the code can be seen in appendix B

on page 75
.

Also during
this section on a small number of screenshots of the actual website will be shown, the
remainder of the screenshots are available to view within

appendix B

on page 113
.










37

5.4.1 Database Connection


To enable data to written to and selected from the database, a database connection
script is required. The script contains the login in details for the local host database
which was set up at the beginning of the project as mentioned on page
35
. Below is
the code used to connect to the database


Figure
21

-

Database Login Script

5.4.2 User Login


To enable the users to log into the system
a user login form was placed on the index
page. The user enters there details into the boxes on screen once the click login a
check login

script is called which connects to the database and checks to see if that
users exists. If it does not find a match a
message is displayed saying that the user is
not registered. The script then
redirects

the user to the registration page
. If the script
finds a match within the database the users is redirected to the secure section of the
web site. The full index page cod
ing can be seen in appendix B

on page 75
. Below is
a screen shot of the login screen, which shows the user login box


Figure
22

-

Index Page
-

User Login



38

Below is a snippet of the code which is an SQL query which searches the database for
the username and password the users has entered in the form on the index page. A full
version of the
check login

page is available within appendix B
on page 77


Figure
23

-

Check user login SQL query

Within the
check login

page I have

also included session registers to store the
username, password and the results of the above query for later use within the
website. Below is the code snippet for the session registry


Figure
24

-

Session Register Code


5.4.3 Se
cure Section


The secure

section of the website is basically one page. This page contains jQuery
script to produce tabs and accordions. The tabs are used to allow for the look of three
separate pages namely the existing wheel, new wheel and user profile se
ctions. The
accordions are then used within the new wheel section to allow for the descriptor to
have its own resources data entered.
On the next page

are a couple of screen shots and
code snippets showing the different pieces of code for the accordions an
d tabs and
screens shots of what the code produces.



39


Figure
25

-

Accordion & Tab jQuery function







Figure
26

-

Tabs & Accordion code snippet



Figure
27

-

Tab & Accordion screenshot



jQuery Tabs

jQuery
Accordions



40

To enable the use of the details of the logged in user I have called the sessions that
where registered on the
check login

page. Below is the code used to call the sessions


Figure
28

-

Session Start coding

A feature which was included within the website was to display the username of the
logged in user and todays date. Below is the code which enables this plus a screen
shot showing what the code produces



Figure
29

-

Status Bar code


Figure
30

-

Status Bar











41

The next section of the report will detail each of the tab pages.

Existing Wheels


The existing wheel tab contains two iframes which display two pages
which contain
SQL queries. The first iframe shows the wheel details of the logged in user. The
second iframe shows the wheel details of any wheels that have been made sharable by
other users, this query does not bring in details of the logged in users shar
ed wheels.
Below is the code for the iframes


Figure
31

-

Tab One & iFrame code

As said previously the first iFrame shows the wheel details for the wheels the logged
in user has created. The table within the iFrame is created by a

php MySQL table
array. Below is the SQL query which pulls the information from the table and a screen
shot of the table created. A full view of the code is available in appendix B

on page
90
.


Figure
32

-

SQL Query select users wheels


Figure
33

-

SQL Query users wheel result



42

The second iFrame displays the details of the wheels that other users have made
sharable. This is done by an SQL query which also contains a clause which means
that the logged in users shared wheels are not displayed in this table. Below
are

the
SQL query and a screen shot of the results. The full version of the shared wheels
section can be viewed within appendix B

on page 93
.


Figure
34

-

SQL Query shared wheels


Figure
35

-

SQL Query
shared

wheel result

New Wheel


The new wheels section is coded within tab 2 of the code on the secure.php page, the
full code is

on page 78

of appendix B. The
new wheel is a form within the page. Once
the user has filled in all the details they click on the submit button. Once the hit
submit this calls another page called insert_new_wheel.php which contains a SQL
query. Below is a snippet of the code that inserts the details from the form into the
datab
ase,

the full page code is available
on page 95
.


Figure
36

-

SQL Query insert new wheel



43

User Profile


The user profile section of the secure.php page is a form which uses the session
variables to pull

in the current user’s information into the form. The user can then
change the details displayed and then click update. Once the user clicks on update
another SQL query is called which updates the database. Below are a couple of code
snippets, the first on
e
show

how the users information is displayed in the form, the
second is the SQL update query. The full code for update can be view in appendix B

on page 78
.


Figure
37

-

PHP Code display user details


Figure
38

-

SQL Query to update profile

Below is a screenshot of the user profile form


Figure
39

-

User profile tab



44

User Registration


The user registration allows users to register to use the wheel of
life system. The user
simply fills in the on screen form, when they click on register an SQL query is called
which inserts there details into the database. Below is the SQL query used to insert the
details into the database. The full code is available with
in appendix B

on page 96
.


Figure
40

-

SQL Query user registration

XML File


Once the user has created there wheel within the new wheels section of the website
and they hit submit, not only are the de
tails written to the database, but an xml file is
created. The xml file is created to allow for the integration into the flash file for the