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