system analysis and design - report of enhancing and re-engineering system website

Semester 2, session 2013/2014

Assignment 1 Enhancement And Reengineer SIPER website

Prepared for:

Assoc. Prof. Dr. Chan Huah Yong

Dr. Syaheerah Lebai Lutfi

Prepared by:

NAMEMATRIC

NOUSM EMAIL ADDRESS

MAJOR/MINOR

Aizattul Anis Binti Sobri 114998 [email protected] Major

Nur Izzati Zafirah Binti Zulkipli

[email protected]

yMajor

Siti Asmaq Bt Ahmad Daud 115129 [email protected] Major

Ho Jia Jie 115022 [email protected] Major

Major

CMT222 – System Analysis and Design

Abstracts

USM students are active in organizing events. Normally, all of these events are managed by

students and staffs that have participate actively in an organization and society. Thus, to provide

convenience for the students, university has made initiative movement to deploy a SIPER, a web

application system hosted by Jabatan Pembangunan for enabling online reservation to reserve the

furniture and items used to facilitate the events. However, there still some functionalities

problems associated which the current SIPER system that will be our focus research of the

project. The problem and requirements for the current system were identified by doing an

investigation as well as fact finding using interview and also by questionnaire to the user of the

system.

Some of the problem that we managed to encounter from the system is the colour of the

background that is not suitable, the availability of the items and the quantity of the items inside

the inventory is not being displayed and the system is being conducted only in monolingual

which is in Malay. Thus, in order to improve and enhancing the system a few solutions had been

proposed to overcome the problem. We use agile development to develop the entire project

which emphasize on breaking down the task into several subtask to make the iteration process

easier. The functionality of this system is flexible to any organization and meets the requirement

of every user that use it.

The problem of the system had being enhanced by re-coloring the background of the system to a

new colour and make things easier for the user that have colour blind symptom. Other than that,

we displayed out the amount and the quantity inside the inventory so that user will get to know

the exact amount of the items that they could reserve for their project and event. The proposed

design was identified in details to be a user friendly system and meet the standards requirement

of a good system. Schedule feasibility was done in terms of making work easier. So we identified

it is highly technically and economically feasible.

Page i


Table of ContentsAbstracts...........................................................................................................................................i

Chapter 1: Introduction....................................................................................................................1

Project Introduction......................................................................................................................1

Motivation....................................................................................................................................2

System Objective.........................................................................................................................2

System Scope...............................................................................................................................3

Problem Description....................................................................................................................4

Proposed Solution........................................................................................................................5

Business Benefit...........................................................................................................................5

Chapter 2: Project Management Plan..............................................................................................6

Project scope................................................................................................................................6

System Capabilities......................................................................................................................6

System Limitations......................................................................................................................7

Project Management....................................................................................................................8

Work schedule..............................................................................................................................9

Chapter 3: System Analysis...........................................................................................................10

General Description of the System............................................................................................10

Detail requirements of new system............................................................................................10

Requirement Modelling.............................................................................................................11

Case Diagram.............................................................................................................................12

Case Description........................................................................................................................13

Chapter 4: Design Strategy............................................................................................................13

High Level Design.....................................................................................................................13

Hardware Specification..............................................................................................................14

Software Specification...............................................................................................................14

Screen shots, user interface designs...........................................................................................15

Chapter 5........................................................................................................................................16

Conclusion and discussion.........................................................................................................16

Test Plan.....................................................................................................................................16

Future Work...............................................................................................................................16

Page ii


References......................................................................................................................................17

Appendices....................................................................................................................................18

System Sequence Diagram.........................................................................................................20

Class Diagram............................................................................................................................21

Screen shots, user interface designs...........................................................................................22

List Of Tables and Figures

Figure 1 : Work Breakdown............................................................................................................8

Figure 2 Gantt Chart Work Schedule..............................................................................................9

Figure 3 Use case Diagram............................................................................................................12

Figure 4: High Level Design Architecture of SIPER....................................................................13

Figure 5 System Sequence Diagram..............................................................................................20

Figure 6 Class Diagram.................................................................................................................21

Table 1 Work Schedule...................................................................................................................9

Table 2 Activity Diagram..............................................................................................................11

Table 3 : Screen shoot user design interfaces................................................................................15

Table 4 : Hardware specification...................................................................................................18

Table 5 : Design Software.............................................................................................................18

Table 6: coding software...............................................................................................................19

Table 7 : Screen shot user interface designs 2...............................................................................22

Page iii


Chapter 1: Introduction

Project Introduction

USM is regarded as one of tops public university in Malaysia. Established in 1969, USM which

is, the main campus, located in Penang Island has excellent reputation in some extents of study

fields. The university has been awarded the Accelerate Program of Excellent (APEX) in 2008

which enable the University to have its own authority and compete worldwide with tops

University in the world such as Harvard University, Cambridge University and MIT.

USM offers various programs range from arts to Engineering. The campus are scattered in 3

cities; Engineering Campus in Trans krian, main Campus in Penang Island and Health campus at

Kubang Kerian, Kelantan. The University has widened it wings globally, resulting in gaining

popularity among foreign students. Moreover, learning facilities offered by USM are world-class

equivalent in which most of facilities are supported by Information technology.

In result of having variety of study programs, multiracial students, academics workshops and arts

– related showcase, USM has occasionally conducted public events. Normally, all of these events

are managed by internal people such as students and staff. The University has made initiative

movement to deploy a SIPER, a web application system hosted by Jabatan Pembangunan for

enabling online reservation for reserving items used to facilitate the events.

The university offers basic facilities such as chairs, tables and decorative items to beautify the

event’s outlook. Formerly, this service are offered manually in which the applicants need to

follow standard procedure such as filling the form and make an appointment to meet the staff in

charged. Both activities are undeniably inefficient. This SIPER system is implemented to

eliminate such as hassle by enabling virtual booking. However, there still some functionalities

problems associated which the current SIPER system that will be our focus research of the

project. We believe that the modifications applied over affected system will enhance the

capabilities offered by the SIPER.

Page 1


Motivation

USM students are active in organizing events and basic facilities like chairs and tables are

needed in the event so the university develops a website called SIPER to provide convenience

for the students in reserving the furniture. Unfortunately, this system is not user friendly. Manual

service is still required and the applicants have to go to the office to meet the officer that is in

charge of this. We receive some feedbacks from the students who are event organizers through

questionnaire that we carried out. Most of them feel that they preferably spend their time to go to

the office themselves rather than using the web application. This motivates our group to make

some enhancement to improve the usability of the SIPER website so that it will ease the

applicants when reserving furniture in the future.

System Objective

The purpose of the USM Furniture Reservation System (SIPER) is mainly to provide a

reservation system to borrow the furniture in USM through online. The categories of users

provided are:

Staff : Can read or write the information about any member who wants to use the service,

update or edit the inventory list, and respond to the request make by the system user.

User : Can make reservation of furniture through online, view the inventory list and view the

status of reservation

Page 2


System Scope

The Scope of the application is wide and can be used by any type of institution such as

education, transportation, development and a lot more. It can be implemented widely in any field

with the necessary modifications done.

With this application, the manual application is converted into automated online application. For

example, customized data are being used for this purpose. The user will not have the privilege to

update or edit the inventory list of furniture.

The three major components in the application are:

Login

Make reservation/Approve reservation

View/Update/Edit inventory list

The solutions provided by the system are:

Efficient and better service.

Faster retrieval of information.

Reduced workload of the staff at Jabatan Pembangunan USM (Department of

Development).

Reservation of furniture will be available on a click.

Less paperwork and document maintenance.

Page 3


Problem Description

There are some problems regarding the service offered by this system application.

1. Manual confirmation.

- When user makes reservation on the system, they need to go to the office (Jabatan

Pembangunan) for confirmation.

2. Quantity of item in current inventory.

- The quantity of item is not being displayed in the website of system application. It

is hard for the user to know how many item they can borrow.

3. The availability of item.

- In the system, the availability of item in inventory is not being displayed. User

will face difficulty to make reservation because they cannot know which items are

available.

4. Monolingual website system.

- The system application is in monolingual which is Malay language. This system is

being used by USM students which include international students from various part of

world. It is not applicable for the system to be conducted in monolingual. It must be

in bilingual for the ease of use for every user.

5. Background Colour

- The system currently use red colour as main colour for the webpage background.

People who suffer with colorblind will face some trouble if they want to use the

system. This problem will make colour blind people refuse to use this system.

Page 4


Proposed SolutionThe enhancement of the system application will improve these system capabilities:

1. Confirmation on reservation.

User does not need to make confirmation manually at the office (Jabatan

Pembangunan). The confirmation is being made through the website.

2. Inventory check.

The system will display the amount of items so that user can know the exact

quantity of item in current inventory.

Every item in inventory is registered with RFID so that the staff in charge can

manage, update and edit the list easily.

3. Item availability.

User will be informed the availability of the item that they want to book.

4. Color.

The system currently using red color for webpage background.

Business Benefit

Tangible

1. The university will gain more income by having tremendous increasing amount of

enrollment rate per-year resulted from implementing such a sophisticated technology to

impress the crowds.

2. The organization will attain more benefits through organizing more upcoming events

resulted event from reliable system that drive the event organizer to be more excited to

conduct tangible

Intangible

1. The university will attain merit for their name by implementing such a

breakthrough technology.

2. The personnel involved in the handling event staff will feel less burden since half of the

task are handled throughout internet which leads to self-satisfaction and they tend to

showcase more performance to perform their daily task.

Page 5


Chapter 2: Project Management Plan

Project scope

System Capabilities

After the enhancement and re-engineering of the system, the system will be capable to:

1. Confirmation of reservation.

User can have confirmation on the s0ystem. User does no longer have to make

confirmation on furniture booked at the office.

2. Inventory check.

Using RFID system, every item in inventory could be updated managed and can

be edited frequently. The exact amounts of the item for the current inventory are

being displayed on the website.

Page 6

applying the adaptive development life cycle to as the major pillar to complete the project break the project scope down into smaller parts to allow works in parallel Involved real users as stakeholders to be part of the team

To implemented adaptive development life cycle

apply user centric approach to achieve the best user- friendliness and promote comfort to the users

To deploy user-centric approach

write all analysis in details to make comprehend reports for the future references.write the level in detail break down to allow all stakeholders understand the content easily

To write documentation on the project

By initializing the project, it hope that it will be extended into bigger project in the future.

To initiate future work for the project


3. Item availability.

Upon reservation, user will be informed if the item they want to book is available

or not. In current system, user will know the availability of the item only after

they make confirmation at the office (manual confirmation).

4. Colour.

The colour of the website is changed to blue and white which suitable for those

who have clour blindness symptom. The usage of blue colour will make the web

looks soothing, relax and cool.

5. Bilingual

The system is implemented in bilingual which is Bahasa Malaysia and English.

This will make international student and staff easy to use the system. In other

hand, it will encourage all university’s student and staff to organize more events.

System Limitations

Page 7

For viewing the items trough the website, its only provide 13 items per page

Viewing

The resolution of the images is only in (300x225) pixels and the images cannot be zoom in

Images

The language that is available for the system is only in bilingual which is in Bahasa Malaysia and English

Language


Project Management

Work breakdown structure

Figure 1 : Work Breakdown

Page 8

SIP

ER

US

M

Problem identification

Identify problem

Observation

Research

Interview stakeholder

Understand the problem

Obtain approval from user By letter

System Vision Documentation

Problem Description

System Functionalities

Business Profits

Project planning

Plan major component Functional area

System priority

Stakeholder roles

Work breakdown structure

WSDI

Understanding project details

Develop UML Diagram

System design Design the system


Work schedule

Gantt Chart and milestone timeline

Task Anis Izzati Asmaq Kam FidelisProject planning

1. Propose project title * * * * *2. Identifying modules and task * *3. Estimating time scale * * * * *4. Work scale * *5. Produce Gantt chart *

System analysis1. Study the current system * * * * *2. Define the problem * *3. Define system requirement * *4. Discuss issues regarding SIPER * * * *5. Interviewing user *6. Prepare questionnaire * *7. Determine system functionalities * *8. Identify system limitation * *

Documentation1. Prepare the soft copy * * * * *2. Collect information * * * * *3. Objective and overview of project * *4. Checking the documentation * * *5. Finalizing the documentation * * * * *

Design1. Designing the system * *2. Enhance the interface * *

Table 1 Work Schedule

Page 9

Figure 2 Gantt Chart Work Schedule


Chapter 3: System Analysis

General Description of the System

In the current SIPER system, we found that it is monolingual website which is not convenient for

the user that not familiar with Malay language. This may causes users like international student

choose not to use this system and make this system useless.

Other than that, the system does not show the availability and quantity of the items. When user

wants to reserve items, it is inconvenient for the user to know how many items are available and

remaining. These will make them refuse to use the system.

Besides, the users that wish to reserve item need to make confirmation of reserved items by

going to the office instead of doing it online. This is creating trouble to the students who stay

outside the campus.

Detail requirements of new system

Information Gathering

We obtain some feedbacks from the event organizers in USM who wish to use the system before

this by interviewing them. The problem and requirements for the current system were identified

by doing an investigation as well as fact finding using interview and also by questionnaire to the

user of the system. We had distributed questionnaires to some students and in the questionnaire;

some of the respondents gave negative comments on this system while some are not.

Based on the questionnaires we could say that around 60% respondent that claimed the system

are not user friendly said that the availability of the items that they want to make reservation

does not being displayed trough the web. Thus, they need to go to the office and manually to get

the confirmation and it is a waste of time.

Page 10


Requirement ModellingActivity Diagram

Page 11

Deliver to destination

ApproveUpdate Reservation

Status

Create Reservation Record

Reserve Item

JabatanPembangunan

SERVERPORTALUSER

Check Reservation

Receive Reservation

SuccessNo

Table 2 Activity Diagram

Figure 3 Use case Diagram


Case Diagram

Customer

Customer Service

Shipping Department

Management

Page 12

View Outstanding order

Update Inventory

Update Order Status

View Item Descriptions

Search for items

Process Account Adjustment

Check Order Status

Checkout Shopping Cart

Display/Update Cart

Item Reservation

Login

Create/Update Account


Case DescriptionThe customers use most of the function of the website. Firstly customers creates an account on the website. Customers will be able to login or update their accounts later on. On the main page customers will be able to access the list of items available and view the item descriptions on the website. Customers can add items of their choice into their individual shopping carts. They can also access their individual cart to view, update and checkout of their carts. After checking out, customers will be able to track their items by looking at the order status.

As for the customer service department, they mainly search for the list of available items to provide information to customers. Besides, the customer service department can also access the customers’ items order status in order to provide help and support for the customers if required.

The shipping department also use the system to check customers order status as well as any outstanding order in order to plan their shipment of items to customers before the date due. Shipping department also update the order status from time-to-time to provide information for the customers to keep track of their items. Lastly they update the available items in store for the customers.

The management department uses the system to process account adjustment of each customers.

Chapter 4: Design Strategy

High Level Design

Figure 4: High Level Design Architecture of SIPER

Figure 1 above is the high level design system architecture of SIPER. We can see student,

lecturer or staff who want to use SIPER need an internet connection to access SIPER web

application. A transaction will be processed and Admin will be able to view user request

transaction. Admin have right to access SIPER database while user is not allowed. Hence, admin

Page 13


will manage all the transaction and respond or update to user about their reservation status.

Because of only admin have an access to database, they will update in web application database

latest quantity facilities and information that Jabatan Pembagunan provided.

Hardware Specification

SIPER is a website from Jabatan Pembagunan that provides services facilities for online

reservation. It is just a simple website but functionalities. In order to enhance this website we use

below hardware and software to gain high quality of website.

From Table 4 : Hardware specification in appendices, based from the specification, we think

Asus K55A is the best hardware to use. This is because, screen size quite large compares to

Apple MacBook Pro hence, it easier to developer to build a website. More over the price is

affordable and it using quad core which is suitable to built a web application. Even though the

specification of both notebook is quiet same but the major differences that we can see is in price,

screen size and processor core. To built a web application, it is important that a computer can

handle editing graphic and compiling coding, hence Asus K55A is the best Hardware and

affordable to use.

Software Specification

Design software

FromTable 5 : Design Software, we think that Photoshop is the best tool to design a website.

This is because there are a lot of resources to use in design, so it will be easier to designer to

design a website. Besides that, Photoshop provide variety of brushes and font that can be

downloaded which actually help the designer efficiently.

Coding software

From Table 6: coding software, we decide Notepad++ is the best to use this is because of bellow

characteristics:

1. Free software

2. Its coloring text which is give more information about the code

3. Easy detect error

4. Notepad++ tabs which increase efficiency and multi-tasking purpose

Page 14


5. Notepad++ supports a lot of different coding language.

Screen shots, user interface designs

Screen shots user interfaces design Iterations

Before enhancement, we noticed that the theme colour red are not suitable with this website. This is because, it will be difficult to people with blind colour to see the red colour.Beside that, SIPER use only Bahasa. Most of Foreign will be hard to use this website application.

In 1st iteration, colour are change to

blue, hence this will solve above

problems.

2nd iteration, English language are

being enhance.

Table 3 : Screen shoot user design interfaces

Page 15


Chapter 5

Conclusion and discussionTo conclude the objective of the project is to re-enhance a web application system hosted by

Jabatan Pembangunan for enabling online reservation for reserving items used to facilitate the

events in Universiti Sains Malaysia. Thus, our group managed to gain the objective of this

project trough re-engineered the web application system (SIPER) which was carried out with a

scope of making a change for its design for the user interface and also some of the functionalities

of the system. We plan our work using work break down structure, work load matrix and

according to that we made the Gantt Chart where we were able to get a clear picture of what

work needs to be done at which time and which should be given priority. In this newly design

system, the requirements were identified by doing an investigation as well as fact finding using

interview and also by questionnaire to the user of the system. In the requirement specification we

were able to identify the week points in the current web system. Feasibility of the project was

done to identify how worth for carrying out the project. In this analysis we identified that the

benefits are more than the cost involved with the project. Schedule feasibility was done in terms

of making work easier. So we identified it is highly technically and economically feasible. The

proposed design was identified in detail to be a user friendly user system as well as according to

the standards.

Test PlanThis system will enhance the web application system for online reserving furniture in USM and help to improve the functionality of the system. User will get to know about the information that they want in an efficient way. The functionality of this system should be flexible to any organization and meet the requirement of every user that use it.

Future WorkAs future work, we plan to implement an RFID into the system, which the RFID could increases

the speed and accuracy with which items can be tracked and managed, making supply chain

management the most obvious application for realizing business value. The implication of RFID

through the system will allow user to have a quick access regarding the items that they would

like to make a reservation. Another possible direction for future work is the implementation of

Page 16


this system through the mobile application system so that user could use the system through

mobile and they could access the system anytime and anywhere.

References

1. http://laptops-and-notebooks.findthebest.com/compare/1208-1519/K55A-DH71-vs-

MacBook-Pro-13-Inch-with-Retina-Display-fall-2013

2. http://pembangunan.eng.usm.my/siper/default.asp?error=3

3. http://pembangunan.eng.usm.my/web/faqSIPER.html

4. http://pembangunan.wargakk.usm.my/siper/

5. http://www.tuned-in.com/ColorSpeaks/Blue.aspx

6. http://www.colourblindawareness.org/colour-blindness/

7. http://en.wikipedia.org/wiki/Class_diagram

8. http://www.ganttproject.biz/

9. http://en.wikipedia.org/wiki/Work_breakdown_structure

Page 17

http://www.ganttproject.biz/

http://en.wikipedia.org/wiki/Class_diagram

http://www.colourblindawareness.org/colour-blindness/

http://www.tuned-in.com/ColorSpeaks/Blue.aspx

http://pembangunan.wargakk.usm.my/siper/

http://pembangunan.eng.usm.my/web/faqSIPER.html

http://pembangunan.eng.usm.my/siper/default.asp?error=3

http://laptops-and-notebooks.findthebest.com/compare/1208-1519/K55A-DH71-vs-MacBook-Pro-13-Inch-with-Retina-Display-fall-2013

http://laptops-and-notebooks.findthebest.com/compare/1208-1519/K55A-DH71-vs-MacBook-Pro-13-Inch-with-Retina-Display-fall-2013


Appendices

Brand Model

Asus K55A-DH71 Apple MacBook Pro

Display Size 15.6 inch 13.3 inch

Processor Type Intel i7 3630QM Intel i7

Processor Speed 2.4 Gigahertz 2.4 Gigahertz

Processor cores Quad Core Dual Core

Hard Drive 500 GB Hard Disk 128 GB SSD

RAM included 4 GB 4 GB

Operating System Windows 7 Mac OS X

Price RM 2 800.00 RM 3 900.00

Weight 5.51 pounds 3.46 pounds

Table 4 : Hardware specification

Design Software Characteristics

Name

Photoshop GIMP

Cost Around RM 2000.00 Free

Brushes and

Font

Most fonts and brushes are created for

Photoshop.

GIMP also have its own brushes and font

but not as many as Photoshop.

Technical

Support

A lots of books available that provide

in-depth instruction for using

Photoshop’s features.

Resources is few because its open source

software.

Page 18


DifficultiesBoth Adobe Photoshop and GIMP are difficult to use and learn for beginners and

intermediate users .

Compatibility Both compatible with most of the Asus , Apple and other computer.

Table 5 : Design Software

Software Notepad++ Dreamweaver

Description

It’s a source code editor and is also

a text editor.

This software is distributed free.

For displaying and editing text and

as well as programming language

source code files, the Notepad++

makes use of the Scintilla editor

module.

helps programmer designer to

develop and design project in an

atmosphere that supports nearly all

important web development

technologies, together with HTML,

XHTML, CSS, XML, JavaScript,

Ajax, PHP, Adobe ColdFusion

software, and ASP

Advantage

The best advantages of Notepad++

are its tabs which designer can

have the facility opening as many

tabs as they want and copy and

paste information in any of the

tabs.

Each tab can be saved as a

separate file, and after they are

saved, Notepad++ keeps all the

tabs that were opened, organized

in the same way as they were left.

It has a split view interface which

allows us to speedily build a page in

the design view and then refine

HTML in the coding view itself.

Also, the code that you want to

modify can be found out quickly by

just selecting the equivalent

constituent in the design pane

Notepad++

vs

Dreamweaver

Notepad++ gives numbers to all

line, which becomes handy when

the PHP error results in error in the

line number.

Notepad++ starts up faster than

Dreamweaver.

However the design and source view

in Dreamweaver, though sometimes

if you make a change in the design

view can often interfere with the

original code and so you have to

make changes.

Page 19


Table 6: coding software

System Sequence Diagram

Page 20

User

Login

:System

Floor plan details

Download (Floor plan)

Display Reservation Status

Check Reservation Status

Update Reservation Details

Reserve Items

Check Availability of Items

Verified

Availability of Items

Confirmation of Reservation

Delivery of Items

Figure 5 System Sequence Diagram


Class Diagram

Figure 6 Class Diagram

Page 21


Screen shots, user interface designs

Table 7 : Screen shot user interface designs 2

Screen shots user interfaces design Iterations

Before Enhancement

1st iteration

(Change layout

colour)

Page 22


2nd iteration (Edit

Main Page

information

display)

3rd iteration

(Change Main

Menu layout)

Page 23


Before

enhancement

1st iteration

(Change Main

Menu selection

sequence)

Page 24


2nd iteration

(English version

and add

inventory)

Page 25


QuestionnaireRe-Engineered USM Furniture’s Reservation System (SIPER) Website

1. Which school are you from?___________________________

2. Are you a local student or international student?

Local International

3. Have you ever heard of the USM SIPER Portal?

Yes No

4. Do you know what is it used for?

Furniture reservation for event

Make payment for fees

Check academic result

No idea

5. Do you think this system user friendly?

Yes No Never use it before

6. If no, what are the difficulties that you faced? (Can choose more than 1)

Monolingual (only Malay language available)

Manual confirmation

Availability of item is not displayed

Background colour that makes you feels uncomfortable

Page 26

system analysis and design - report of enhancing and re-engineering system website

Documents

current system

good system

user friendly system

current siper system

web application system

design cmt222 system

new colour

proposed design