Вы находитесь на странице: 1из 30

CMT222 System Analysis and Design

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:


NAME
MATRIC
NO
USM EMAIL ADDRESS
MAJOR/
MINOR
Aizattul Anis Binti Sobri 114998 aanis.ucom12@student.usm.my Major
Nur Izzati Zafirah Binti Zulkipli 115100 nizafirah.ucom12@student.usm.my Major
Siti Asmaq Bt Ahmad Daud 115129 sasmaq.ucom12@student.usm.my Major
Ho Jia Jie 115022 hjjie.ucom12@student.usm.my Major
Major
CMT222 System Analysis and Design

Page i
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.



CMT222 System Analysis and Design

Page ii
Table of Contents
Abstracts .......................................................................................................................................... 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
CMT222 System Analysis and Design

Page iii
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



CMT222 System Analysis and Design

Page 1

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
events 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.


CMT222 System Analysis and Design

Page 2

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


CMT222 System Analysis and Design

Page 3
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.








CMT222 System Analysis and Design

Page 4
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.







CMT222 System Analysis and Design

Page 5
Proposed Solution
The 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.
CMT222 System Analysis and Design

Page 6
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.
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
CMT222 System Analysis and Design

Page 7

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 universitys student and staff to organize more events.
System Limitations

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
CMT222 System Analysis and Design

Page 8
Project Management
Work breakdown structure

Figure 1 : Work Breakdown

S
I
P
E
R

U
S
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
CMT222 System Analysis and Design

Page 9
Work schedule
Gantt Chart and milestone timeline

















Task Anis Izzati Asmaq Kam Fidelis
Project planning
1. Propose project title * * * * *
2. Identifying modules and task * *
3. Estimating time scale * * * * *
4. Work scale * *
5. Produce Gantt chart *
System analysis
1. 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 * *
Documentation
1. Prepare the soft copy * * * * *
2. Collect information * * * * *
3. Objective and overview of project * *
4. Checking the documentation * * *
5. Finalizing the documentation * * * * *
Design
1. Designing the system * *
2. Enhance the interface * *
Table 1 Work Schedule
Figure 2 Gantt Chart Work Schedule
CMT222 System Analysis and Design

Page 10
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.




CMT222 System Analysis and Design

Page 11
Requirement Modelling
Activity Diagram























No Success
Receive
Reservation

Check
Reservation
USER PORTAL SERVER Jabatan
Pembangunan
Reserve Item
Create Reservation
Record
Update Reservation
Status
Approve
Deliver to
destination
Table 2 Activity Diagram
CMT222 System Analysis and Design

Page 12
Figure 3 Use case Diagram
Case Diagram






Customer



Customer
Service




Shipping
Department

Management
Create/Update
Account
Login

Item
Reservation
Display/Update
Cart
Checkout
Shopping Cart
Check Order
Status
Process Account
Adjustment
Search for items

View Item
Descriptions
Update Order
Status
Update
Inventory
View Outstanding
order
CMT222 System Analysis and Design

Page 13
Case Description
The 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
CMT222 System Analysis and Design

Page 14
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
5. Notepad++ supports a lot of different coding language.
CMT222 System Analysis and Design

Page 15
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 1
st
iteration, colour are change to
blue, hence this will solve above
problems.

2
nd
iteration, English language are
being enhance.
Table 3 : Screen shoot user design interfaces


CMT222 System Analysis and Design

Page 16
Chapter 5
Conclusion and discussion
To 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 Plan
This 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 Work
As 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
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.
CMT222 System Analysis and Design

Page 17

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












CMT222 System Analysis and Design

Page 18
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
Photoshops features.
Resources is few because its open source
software.
Difficulties
Both 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
CMT222 System Analysis and Design

Page 19
Software Notepad++ Dreamweaver
Description
Its 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.

Table 6: coding software
CMT222 System Analysis and Design

Page 20

System Sequence Diagram























User
Login

:System
Reserve Items
Update Reservation Details
Check Reservation Status
Display Reservation Status
Download (Floor plan)
Floor plan details
Check Availability of Items
Verified
Availability of Items
Confirmation of Reservation
Delivery of Items
Figure 5 System
Sequence Diagram
CMT222 System Analysis and Design

Page 21

Class Diagram

Figure 6 Class Diagram










CMT222 System Analysis and Design

Page 22
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)
CMT222 System Analysis and Design

Page 23

2nd iteration (Edit
Main Page
information
display)




3rd iteration
(Change Main
Menu layout)
CMT222 System Analysis and Design

Page 24


Before
enhancement

1st iteration
(Change Main
Menu selection
sequence)
CMT222 System Analysis and Design

Page 25

2nd iteration
(English version
and add
inventory)













CMT222 System Analysis and Design

Page 26





Questionnaire
Re-Engineered USM Furnitures 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