software design document

Maxi Project Design Document

UNIVRSITY OF SHEFFIELD – DEPARTMENT OF
COMPUTER SCIENCE

Maxi Project
Stage 3 Report
Software Design Document

Wanlin’s  Dance  School  Website  Development

Team B
Stage Manager

Zou Bixiao
Team Members

Lu Dan
Orkhan Yusubov

Sangwoo Han
Li Teng

Zhao Wenping

1

Maxi Project Design Document

Contents

1. Introduction ..........................................................................................................................3
1.1 Title and Mission statement..............................................................................................3
1.2 Brief system description ...................................................................................................3
1.3 Document overview..........................................................................................................3
1.4 Reference material............................................................................................................4

2. Infrastructure .......................................................................................................................4
3. Data Design ...........................................................................................................................5

3.1 Class Diagram ..................................................................................................................5
3.2 Relationship Description ..................................................................................................6
4. Process Design.......................................................................................................................7
4.1 Super user .........................................................................................................................7
3.1 Ordinary user ..................................................................................................................10
3.1 Guest...............................................................................................................................18
3.1 Manual procedure ...........................................................................................................18
5. HCI ......................................................................................................................................19
6. Constrain.............................................................................................................................28
6. Appendix .............................................................................................................................29

2

Maxi Project Design Document

1. Introduction

1.1 Title and Mission statement
The   Wanlin   Dance   School’s   website   membership   system   building   and  

interface optimize.

The   client’s   basic   requirement   is   that   the   Wanlin   Dance   School’s members
should be able to separate from the original one. In the membership system,
member’   personal   information   should   be   stored   in   database   securely.  
Additionally, the administrator of dance school should be able to send the
messages to the members of the school. Finally, a more attractive website
surfaces are required by the client.

In this stage specifically, the mission is to identify all the entities within the
system, and consider the relationship among them. Apart from that, the ways
which the users interact with the system will be designed in this stage. In
addition, the interface surface will be considered as well.

1.2 Brief system overview
In this project, we are developing a website for Wanlin dance school. Two
major parts are involved in this website system. The first one is the webpage
programming in PHP displays GUI to users and administrators. The other part
is a backstage database. The webpages will contain the information of the
dance school including some literal introduction, pictures and videos. A forum,
a FAQ as well as a message system are required in this website as main
functions. As to the database, MySQL is appointed by the employer. And
information, for instance, personal information for each user, their accounts
and passwords, messages among users, forum information are stored in the
database.

1.3 Document overview

3

Maxi Project Design Document

Basically, the document is divided into two parts which are the design part and
the risk analysis part.

In terms of design part, the whole part can be sub-divided into five steps.
Infrastructure, which indicate the basic structure of the whole project; Data
design demonstrates the entities & relationships which will be run on the
infrastructure; Process design is the following step which shows the
procedures how people interact with the system; Human centred Interaction
design covers the surface design for the website pages; additionally, for any
manual procedures, the definition of them will be given after the HCI part.

Considering the risk analysis part, the risks that may occur while doing the
designing will be elucidated in the form of table. The table will be placed at
the end the document as an appendix.

1.4 Reference material

This document refers to the IEEE Std 1016-1998. The outline of this document is adapted
from the IEEE Recommended Practice for Software Design Description.

2. Infrastructure

4

Maxi Project Design Document

Figure 1 Infrastructure diagram

The infrastructure for the website will involve three parts which are:
Client computers
Web Servers
Database Servers

Client computers will make it possible to users to browse and amend the details of the
website where it is appropriate and allowed for them using any of popular browsers
supporting JavaScript and its elements where possible.
Web Servers will run on Apache supporting fifth version of PHP which will be used in
development of our web pages. Moreover, it also supports technologies IMAP and
FTP which will be used for emailing and web site management respectively if needed.
In addition, to guarantee a secure connection between servers and client run
computers the data will be encrypted using the connection of type HTTPS layering
HTTP on top of the SSL.
Database servers will run on MySQL and support PhpMyAdmin tool which is very
convenient for administration purposes when using PHP extended web pages together
with MySQL databases. The capacity of the database is expected to be enough for the
web pages and the contents of the web site. Moreover, servers will support backing up
feature in case of unexpected failure of the servers ,loss or damage of data.

3. Data Design

3.1 Class Diagram

5

Maxi Project Design Document

Figure 2. Class diagram

3.2 Relationship description

A-> Guest can see that the website displays and send email to super user, but
cannot submit and send message through the website.

B-> Super user can not only post, and edit the questions and answer in the FAQ
part of the website whenever it is needed, but also delete question.

C-> Super user can register account as a super user and delete both sent message
and received message if super user wants to do it.

D-> Member can login the website with their user name and password from
registration, and submit the question about dance school. Furthermore,
member can send message to both member and super user through the
website.

E-> member can not only register account with special code given by super user
and their detail such as email address, home address, phone number, and date
of birth, but also delete both sent and received message.

6

Maxi Project Design Document

F-> there is age limit which is 16 to put register in relevant account which is
divided into two: adult account, and children account (for each child account,
there should have attribute to represent the details of the supervisors).

4. Process Design

4.1 Super user

Figure 3. Super user manages FAQ area
Super user could add question, edit question and delete question in FAQ area,
respectively. When super user want to add question, it will select "add" button, and
write the question in a question form, then system will add the question to the FAQ
database, the database execute the add operation and return successful operation result
to super user. As same as edit and delete operation for super user, it could choose
"edit" or "delete" button, and ticks the question which wants to edit or delete, then
execute edit or delete operation to the database, finally return successful response to
super user.

7

Maxi Project Design Document

Figure 4. Super user manages own information

As a super user, he (she) can edit the information of itself such as the name, password,
email and address. For example, when super user want to alter the detail, it can log in
the management webpage and choose "edit" button, then change the details and click
"OK", the web server will pass the requirement to the database, and the database will
execute edit operation. If the super user want to delete its own account, it should
choose "delete" button and the command will be pass to the database and execute
delete operation.

8

Maxi Project Design Document

Figure 5. Super user posts news on the home page

If super user want to post news to the home page, it should access the news page, then
choose "edit" button, now it can edit news, after edit, super user submit the news, so
web server will send edit command to database, then database will execute edit
operation. After that, database will return the success message to super user, so that
super user could view the news page, the page will display the new news.

Figure 6. Super user sends email to members
If super user want to send email to members, firstly, he (she) needs to choose a group
to which he (she) wants to send email, and then choose the members which in the
group, now the database will execute query operation to get member email. Then
display the email to super user, now super user could send email to the members, and
members will receive email on time.

9

Maxi Project Design Document

Figure 7. Super user manages the forum

If super user want to delete topic in the form, it should choose "delete" button in the
forum first, and web server will request delete operation to the database, database
execute delete operation, then display delete success message, and return this
information to super user.

Figure  8.  Super  user  manages  members’  information

Super user can manage members such as add member, edit member and delete
member. Their operation sequence is similar to each other. For example, when super

10

Maxi Project Design Document

user want to add a new member, it should choose the "add member" button on the
member manage page, then web server will request add operation to database,
database receive the request and execute insert operation. After that, database display
the new member information and return insert success message to super user.

4.2 Ordinary User

Figure 9. Send messages

The members can send messages to each other on the webpage and delete any
message from in-box, which is an optional requirement by the employer. The sent
messages can be saved in database after a click of submission button. And after
the storage, a receiver will get a note said new message received.

Figure 10. Contact with super users

11

Maxi Project Design Document

The members can be able to contact with super users. The process is the same as
sending messages to other members.

Figure 11. Delete message

The sent messages can be deleted as well, in case users do not need them any
more. And this operation is supplied on the connection page, which can also
release the relevant space in database.

12

Maxi Project Design Document

13

Maxi Project Design Document

Figure 12. Registration

The process of registration can be launched by a click on the registration button
supplied on the webpage. Then a registration requirement would be sent to the
web-server. The web-server will show a registration form on the GUI as a feedback.
After the submission of the registration form, a special code(all students will use the
same code in a certain period) supplied by the dance school which is used to identify a
student is required and would directly determine the success or failure of registration.
After the success of registration, the detailed information in the registration
information would be stored in the database.

Figure 13. Login

14

Maxi Project Design Document

The login process is quite clear displayed in the diagram. The only one thing needs to
be noted is that the passwords and accounts are held in database after registration.

Figure 14. Forum operation

This diagram shows the process of posting questions, answers, and delete answers on

15

Maxi Project Design Document

the forum for members.

Figure 15. Edit personal information
Members can edit their personal information directly on the personal webpage except
name and date of birth. After a click on the “edit” button, an editable page will appear,
and after a modification and a submission, the new information will repalce old one in
the database.

16

Maxi Project Design Document

Figure 16. Create new account

It is not accessible for members to reedit their name and date of birth after the
registration process. Under this consideration, if a member wants to change his
personal information, an operation of deleting the account and opening a new account
is needed. First of all, an edit request is sent to web-server and the server will show a
new webpage with a “delete old account” button and a new registration form. As
soon as the web-server received the form, the inside information will be stored in the
database and cover the space of the former account. Another thing needs to be

17

Maxi Project Design Document

mentioned is, the registration code is no longer needed in this situation since this
person has already registered as a student of dance school.

4.3 Guest

Figure 17. Contact to super users

An email address is required when sending messages to super users by the employer’s
requirement.

4.4 Manual Procedure
Collecting special code: Ordinary members can only finish the whole registration
procedure after collecting the special code from the teacher during the first class.
The format of the special code is 2 digits, 3 letters, then 2 digits (E.g. 12aBc34).
Basically, the students in the same class will get the same special code, which is
generated by the teacher and is stored in the database in advance.

18

Maxi Project Design Document

5. HCI

This section basically describes the every interface surface for the whole website.
Apart from the diagram, the document following each diagram is a description of
the each page and response for each component on the surface.

This is the homepage of the website.

19

Maxi Project Design Document

This shows how the information displayed in the website.

This page shows how classes arrangement shows in the website.

20

Maxi Project Design Document

According to the requirement, this page shows how the videos and pictures of
dancing displayed on the website.

21

Maxi Project Design Document

For the FAQ part, the popular question listed in the graphic. If users click one
question, a new section will show the detail or the answer to the particular
question. Additionally, users can send questions to super users in the text field
with providing name and email.

22

Maxi Project Design Document

Users   can   login   to   membership   page   by   clicking   the   “log in”   in   the   top   right  
corner. If do so, there will be a small window ask user to type into user name and
password.

There is a calendar show the information of the course, the green spot is clickable.

23

Maxi Project Design Document

If users click the green spot a memo will chow the detail of the course including
course name, time and location.

This shows the message system of the membership, messages displayed like index

24

Maxi Project Design Document

of mail boxes, and also, user can send or replay in the text field.

This  is  the  details  of  account  show  in  the  tag  “My  Account”.

25

Maxi Project Design Document

These several graphics show the process of registration for new membership.

26

Maxi Project Design Document

These two graphics show the super users section especially the accounts
management system.

27

Maxi Project Design Document

This graphic shows how super user can post announcement. The super user can
select the class to which he (she) wants to post announcement by ticking the box.

6. Constrain

In this project, the constraint mainly focus on the software such as programming language,
database choosing, develop software; implemental environment such as server, client side
and security protocol.

1. The website should use PHP 5.0 programming language to design. (Compulsive)
The previous website is based on PHP 4.0 programming language, so the client required the
new website should use PHP as well. Because of the new version of PHP has released, so it
should use the newest version PHP 5.0 to design.

2. The website should use MySQL 5.1 free version database to store all the data.
(Compulsive)
The previous website did not has database, the client require a member system, and it need
a separate database to store information. MySQL as a free database, is the most suitable
choice to combine with PHP language. The newest version of MySQL database is 5.1.

3. The website should use Apache 2.4 as a server. (Compulsive)
The client requires a steady server to support the website and should be free. Apache is one
of the most popular server, and it is famous for its security and stability. And it also support
the PHP website good. Thus, in this project, we plan to combine both two servers to support

28

Maxi Project Design Document

whole website.

4. The develop software should use Dreamweaver 8.0 to design the webpage. (Compulsive)
Dreamweaver is a wonderful web design tool, and the newest version is 8.0. It has more
useful function than before, so the client suggested us to use this software to create new
website.

5. The client has bought the specific host space for this new website. (Compulsive)
The client has funding to pay for the host space of new website, we should use this host to
create and design.

6. The client is trying to buy SSL certificate for the data security. (The client has not decided,
still pending)
In the non-functional requirements, we have mentioned about data security, in order to
achieve   this   goal,   we   need   to   use   SSL   protocol   to   protect   members’   information.   But   SSL  
need to pay for the certificate, so the client is trying to request this funding, if the
requirement is accepted, we could use SSL to secure the website.

7. All the software and hardware should be free. (Compulsive)
In this project, the client only pay for the host space, and no other funding for the hardware
and software, so all the staff use free version is acceptable.

7. Appendix

RISK ASSESSMENT FORM

Risk Probability Impact Probability Countermeasures
5 x
Cannot get client to 2 Produce several drafts of
sign off on 3 Impact the requirements
requirements 10 documentation and

Computers fail and data 3 9 review with client, so that
is lost final document is familiar

to them.
Implement a back up
solution; store several
copies of data in different

places

29

Maxi Project 1 Design Document

Not enough 2 2 Be cooperative. A
communication among discussion group should
the team be set up on the Internet.
Every member should not
Copyright Issue and 1 be isolated.
host for programming
5 5 Buy the copyright and the
language such as host so that the videos
JavaScript,etc. and diagrams which are
downloaded from the
Division of labour 3 Internet can be used
legally, and the same as
the programming
language

4 12 Everyone does his (her)
skilled work. Flauting
their superiority is not
recommended.

Some of the team 4 4 16 Spending time to acquire
members are not 2 the language. Or doing
familiar with the more designing work,
programming language thinking about the
(such as PHP, java usability of the project.

script) 5 10 If the things are exigent,
the stage manager may
Cannot get connected need to urge the client to
with the client in time reply. If not, change
another member to send
Members’  information   3 the email.
is not secured enough
and their details are 5 15 Using a more advanced
method while dealing
revealed. with the database and
enhancing the security
level of the database.

Using SSL to protect the
account sign in.

30

Maxi Project 4 Design Document

Some user stories are 3 12 Try to use a brief writing
too detailed and the style, capturing the core
following design part elements for the user
stories. Such as goals,
will be affected. actors, etc.

Group members are not 4 3 12 Practicing English in
quite good at English spare time as much as
document writing, and
the document looks possible, and try to write
in a more formal way. If
informal possible, turn to ELTC

for help.

Some of the 4 5 20 Contact with the client
requirements are not
what the client actually frequently while doing
needs, and the client
refuses to sign up after the document writing.
reading the requirement
Send an electronic copy
document
of the final job several

days before the meeting

with the client, so that the

client gets enough time to

read the document.

The client may change 4 4 16 Analyse the effort (work
his (her) mind during
the stage, and some amount) for the whole
changes are needed for
team. If the work amount
the requirements
is too large, have a

communion with the

client and give him (her)

the reasons. If not,

modify the plan and

requirements as the client

requests.

Unable to achieve the 3 5 15 Have a brief
design goals that are set
understanding of the
in former stage
designing and

programming abilities of

the whole team. Avoid

setting the goals which

are beyond the max

ability.

31