HandsUp : THE VOLUNTEERING WEBSITE FOR

VOLUNTEER AND ORGANISATIONS

MUHAMMAD ILYAS SOUFI BIN KAMARUL

ZAMAN

DIPLOMA IN COMPUTER SCIENCE

UNIVERSITI MALAYSIA PAHANG

i
 Table of Contents

LIST OF TABLE 1

CHAPTER 1 INTRODUCTION 2

1.1 Background of study 2

1.2 Problem Statement 3

1.3 Aim 3

1.4 Objective 3

1.5 Scope of Project 4

1.6 Significance of Project 4

1.7 Report Organisation 5

CHAPTER 2 6

LITERATURE REVIEW 6

2.1 Review of Existing System 6

2.2 DoSomethingGood 6

2.1.2 VolunteerMatch 7

2.1.3 Do-it.org 10

2.2 System Comparison 13

2.3 Summary 14

CHAPTER 3 1
ii
METHODOLOGY 1

3.1 Introduction 1

3.2 System Development Life Cycle (SDLC) 1

3.3 System Requirement 3

3.3.1 Software 3

3.3.2 Hardware 4

3.4 User Requirement 5

3.5 Organisation 5

3.5.1 Home page 5

3.5.2 Register and login 5

3.5.3 Manage Events 5

3.5.4 Manage Participants 5

3.6 Volunteer 6

3.6.1 Participate and cancel participation 6

3.7 Admin 6

3.7.1 Manage Organisation 6

3.8 Proposed Design 7

3.8.1 Use Case Diagram 7

3.8.2 Context Diagram 8

3.8.3 Entity Relationship Diagram 9

3.8.4 Data Flow Diagram 10

3.8.5 Storyboard 11

3.9 Database Dictionary 12

iii
 12

12

12

12

12

3.9.1 Organisation 12

3.9.2 Volunteer 13

3.9.3 Event 13

3.9.4 Participant 14

3.10 User Interface 15

3.10.1 Home page 15

3.10.2 Events page/ search result 16

3.10.3 Event Info 17

3.10.4 Join Event 18

3.10.5 Organisation page 19

3.10.6 Organisation Info 20

3.10.7 Browse More 21

3.10.8 Login 22

3.10.9 Register 22

3.11 Planning for Implementation and Testing 23

3.12 Gantt Chart 25

CHAPTER 4 26

iv
IMPLEMENTATION AND TESTING 26

4.1 Introduction 26

4.2 Implementation 26

4.2.1 Login Interface 27

4.2.2 Register Interface 28

4.2.3 Create Event 29

4.2.4 Update Event 30

4.2.5 Delete Event 30

4.2.6 Search Events 31

4.2.7 Cancel Participation 32

4.2.8 Join Event 33

4.2.9 Activate/Deactivate and Delete account 34

4.3 User Manual 34

4.4 Organisation 35

4.4.1 Organisation Registration 35

4.4.2 Login as Organisation 36

4.4.4 Create Event 38

4.4.5 Update Event 39

4.4.6 Delete Event 40

4.4.7 Update Account 41

4.5 Volunteer 42

4.5.1 Volunteer Registration 42

4.5.2 Search Event 44

v
 4.5.3 Join Event 45

4.5.4 Cancel Attendance 46

4.5.5 Update Profile 46

4.6 Admin 48

4.6.1 Admin Login 48

CHAPTER 5 49

CONCLUSION 49

5.1 Conclusion 49

5.2 Recommendation 50

REFERENCES 51

vi
 LIST OF TABLE

Table 2. 1 Table of comparison between the three systems 1

Table 3. 1 Phase of SDLC and its activity 2

Table 3. 2 Software applications and its function 3
Table 3. 3 Hardware tools and its function 4
Table 3. 4 Table for Organisation 12
Table 3. 5 Table for Volunteer 13
Table 3. 6 Table for Event 13
Table 3. 7 Table for Participant 14
Table 3. 8 UAT test form 23

1
 CHAPTER 1

INTRODUCTION

1.1 Background of study

These days, more and more problems arise in this world. In turn, there are also
more people willing to help those in trouble, either by physically helping or by
donating. Volunteering is gaining popularity in today’s age and more people are
engaging in these activities. Volunteering is a great way for a community to
bond and at the same time, provide help to those on need. It is also said that
volunteering can have a positive impact on the health of an individual, both
mentally and physically (Fritz, 2018).

As great as it sounds, finding an event can be a hassle. Promotion of voluntary

events are not propagated efficiently enough to reach the masses. Therefore, the
public is less involved since they are not aware of these activities. To add to
that, charity scams are real and have tarnished the image of Non-Profit
Organizations, leaving the public with sceptical views toward them. The
negative views toward new organisation makes it harder for them to succeed and
get more public involvement.

This project’s main goal is to help both the public and organisation. Using this
website, the public can search for voluntary activities that are available, based on
certain attributes and aspect. People can easily search for organisation that is
safe and trusted. Organisations can also use this platform to promote the events
or activity that will be organised. In addition, this website also allows people to
sign up for upcoming events, thus saving them time from having to go to the
organisation itself.

2
 To register as an organisation, they must have certification as proof of their
legitimacy from their local bodies. Unregistered NGOs are not allowed to
participate to avoid scamming amongst the user. To search for upcoming events,
user can key-in location, causes or by date. Besides, users also can search events
by distance. Another feature of the system is user can donate to the organisation
via online payment.

1.2 Problem Statement

Although more organisations are emerging, most of them are still hidden from
the public. Even for veteran organisation, putting themselves out there is a
challenge and the medium currently being used is not efficient enough. Other
than that, a potential volunteer finds it hard to look an eye out for upcoming
voluntary events. By having a dedicated platform, it can help both the potential
volunteer and organisation to ease out their problem.

1.3 Aim

The purpose of this project is to develop a website that can centralise both
volunteers and events, as well as to help organisations promote their event in this
platform.

1.4 Objective

i. To study and compare the existing systems similar with this project

ii. To design and develop a database system and interface for the system

iii. To implement and test the proposed system design

3
 1.5 Scope of Project

i. This project can only be used throughout Malaysia only

ii. This project uses MySQL as database

iii. This system only available as website on PC

iiii. This project uses HTML, CSS, PHP and Javascript to build the system

1.6 Significance of Project

i. This project will help centralise both volunteers and volunteering events
by NGOs in Malaysia.

ii. This project can help increase charity in Malaysia

iii. Provide another medium for organisations to promote their activity

4
 1.7 Report Organisation

This report is divided into 5 chapters. In Chapter 1, the introduction of

the project is briefly explained. This chapter was broken down inti several
section and the background, aim, objective and scope of the project is discussed
in further detail throughout this chapter.

In Chapter 2, three existing systems were briefly compared. The features

compared in this chapter includes Graphical User Interface, functionality,
advantage and disadvantages. The similarities and differences were highlighted
at the end of this chapter.

In Chapter 3, the planning of the project was divided into several

sections and each section was briefly explained. This chapter discuss the
methodology used, the design of the database, flow of the project and others.

In Chapter 4, the process of implementing the components of the project

into a Functional system. This chapter also contain the user manual for 3
categories of user; Organisation, Volunteer and Admin. Screenshots of the
system alongside the instruction is shown.

Finally, in chapter 5, the whole project from planning until

implementation in concluded.

5
 CHAPTER 2

LITERATURE REVIEW

2.1 Review of Existing System

In this section, three existing systems that are similar in function are
compared. Each system is reviewed individually by their interface and
functionality. A comparison table is included in chapter 2.5 comparing between
System Type, Usability Heuristic, Availability, Golden Rule, Advantage, and
Disadvantage.

2.2 DoSomethingGood

DoSomethingGood is a voluntary network based in Malaysia. It is a platform

used to search and join events made by NGO’s around Malaysia. Design wise,
the website is very minimalistic. The navigation of the website is straight-
forward and easy to understand.

Figure 2. 1 Home page of Do Something Good

6
 As shown in figure 2.1, users can search any event based on three attributes
which are the location, type of organisation and date. Users need to sign-up as a
member to be able to post events or join events. On the downside, users can
create an event but cannot edit or delete the event. Past events are also shown on
the search results.

2.1.2 VolunteerMatch

VolunteerMatch is website developed by an NGO that helps other NGOs

to connect with potential volunteers. VolunteerMatch provides a website for
them to promote events to the public. Volunteers can search, read and contact
the organisation from the website itself. Within the website, users can also
donate to NetworkForGood, which is VolunteerMatch’s fundraising software.
User can either pay using credit/debit card or PayPal. Although based in
America, the website can be used globally.

Figure 2. 2 Home page of VolunteerMatch

7
 Figure 2. 3 Extended home page of VolunteerMatch

Figure 2. 4 Search result of VolunteerMatch website

Figure 2. 5 Search suggestion based on previous entry

8
 In the search result, as shown in Figure 2.4, users can narrow down their
result. User can search specific such as location, causes or choose either Local
(physical location) or Virtual events. The search function also recalls previous
search entry to help user remember.

Figure 2. 6 Interface to donate to VolunteerMatch

Figure 2. 7 Interface for user to find guides

9
 2.1.3 Do-it.org

Do-it.org is a website for connecting volunteers and organisations from

United Kingdom only. From the home page, user can search programs based on
location (postcode or town). If needed, user can also use the advanced search
feature, shown on Figure 2.7, where they can search by event name, organisation
name, date and other attributes. One of its distinct features is locating an event
by distance. This is useful if user cannot travel far.

Figure 2. 8 Home page of Do-it.org

10
 Figure 2. 9 Advanced searching of the website

Figure 2. 10 Search result of the website

11
 Figure 2. 11 Sign up/ Login using email or facebook

Figure 2. 12 Error handling on empty entry field

12
 Figure 2. 13 Interface for user to find guides

2.2 System Comparison

In this section, all three system were compared in term of the system type, usability
heuristic, golden rules, advantages and disadvantage of the system. Table 2.1 depicted
the comparison of the systems.

13
 2.3 Summary

From the system comparison, we can identify the advantage and disadvantage of
the systems. For DoSomethingGood, the interface is simple and easy to understand.
However, the database is outdated, and old events are still in the system.

For VolunteerMatch, one of its advantages are, it is not focused on certain

country. People from all over the world can use the website. Other than that, user can
also search for organisation in specific area. One of its disadvantages is, the
organisation of the website is not tidy.

Lastly, Do-it.org can help users narrow down their search result with different
attributes. On the other hand, its web design is outdated and not attractive enough.

For this project, the website will implement designs that are more commonly
used in today’s time as a way attract more users. The system will also update its
database frequently to avoid showing past event in the website. This system will be
developed as a web-based system.

14
Table 2. 1 Table of comparison between the three systems

DoSomethingGood VolunteerMatch Do-it.org Hands-up

System Type Web based Web based Web based Web based

Usability 1. Match between 1. Match between 1. Visibility of 1. User Control and

Heuristic system and real system and real system status Freedom
world (Figure world (Figure 2. User control and
2.1) 2.2) freedom (Figure
2. Help and
2. Consistency 2. Aesthetic and 2.11)
Documentation
(Figure 2.1) minimalist design 3. Error recovery
3. Aesthetic and 3. Recognition (Figure 2.12)
minimalist rather than recall 4. Help and 3. Recognition rather
(Figure 2.5) documentation than recall
4. Help and (Figure 2.13)
documentation
4. Error prevention
(Figure 2.7)

1
Availability Malaysia Global United States Malaysia

1. Strive for 1. Strive for 1. Strive for 1. Strive for

consistency consistency consistency consistency
2. Support internal 2. Offer informative 2. Offer informative 2. Simple error
Golden
locus of control feedback feedback handling
3. Informative 3. Reduce short term 3. Simple error 3. Support of
Rule feedback memory load handling internal locus
4. Reduce short- control
term memory
load

Advantage ● Can browse ● Can search events ● Can specify ● Can directly join
through all events globally range of location event through
● Contains useful ● Provide many website
information criteria to narrow
down search

Disadvantage ● Past events are ● Too many words • ●

Can only be used in
not removed ● Have to contact Malaysia
● No ‘Help” page organisation to
join

2
 CHAPTER 3

METHODOLOGY

3.1 Introduction

This chapter will discuss on the approach taken to ensure the project runs
smoothly and the objective of the project is achieved. It covers the SDLC,
System Requirement, User Requirement, Database Design, Interface Design,
Proposed Design and Gantt Chart.

This chapter will also include various tables and diagrams such as Entity
Relationship Diagram, Design of interface, Use Case Diagram and Flowchart of
the system. Each diagram will help in explaining the flow of the project in more
detail.

3.2 System Development Life Cycle (SDLC)

For the SDLC, the project uses incremental model. In incremental model, each
iteration passes through analysis, design, develop and testing (Guru99, n.d.). The
first iteration is focused on main functions. In the next iterations, more functions
are added to improve the system until the project is finished. Table 3.1 shows the
phases of the SDLC and its activities.

1
Table 3. 1 Phase of SDLC and its activity

Phase Activity
• Research existing systems
• Obtain user requirement
Analysis
• Allocate time for project
• Draw the Use-Case Diagram

• Sketching of the interface

Design • Designing the database
• Designing the flowchart of
website
• Create Storyboard of website

• Building the interface of the

Develop website
• Create the database for the
website
• Coding and implementing the
functions of the website

• Test the website functionality

• Check database functionality

Testing
• Perform UAT testing

2
 3.3 System Requirement

A system requirement is a requirement that the project needs for it to complete.

In this project, the system requirement is divided into two parts; Software and
Hardware. Each part is described in detail in section 3.2.1 and 3.2.2.

3.3.1 Software

Software applications play a vital role in this project. Because this project is a
web-based application, software applications are involved in most of the
development process. Table 3.2 shows the list of software applications used to
develop this project.

Table 3. 2 Software applications and its function

Software Function
Microsoft Word • Documentation of project

Adobe XD • Design the wireframe of interface

• Make prototype of the system

Google Chrome • View HTML file of website

• Find resources

• Use online services for diagrams

3
 3.3.2 Hardware

Hardware requirements are the tools used to complete the project. They are used
before, during and after the project is finished. Table 3.3 shows the hardware
used in this project.

Table 3. 3 Hardware tools and its function

Hardware Function
Laptop • To run the software
applications

• To save finished documents

Printer • To print documents

• To print finished report

Hard Disk Drive • Save backup files

4
 3.4 User Requirement

This system consists of 3 users namely Organisations, Volunteers, and an admin

to manage the website. Each different user requires different function in the
system. This chapter will discuss on the requirements for the different users.

3.5 Organisation

3.5.1 Home page

The home page is the first page of the system. User uses this page to navigate
through the whole website. This page will also provide news and upcoming
events.

3.5.2 Register and login

User will have to sign-up as an organisation. As a public user, signing up will

allow them to.post upcoming events from them and manage their events’
participants.

3.5.3 Manage Events

Organisations can manage events and have them posted on the website. The
events can be created, edited and deleted by the organisation. When creating,
details of the event such as location, date and duration of the event is needed.
The event will be shown on their homepage.

3.5.4 Manage Participants

Organisation have the ability to manage their participants for their events. The
can cancel the view the number of participants and cancel their participation
upon request.

5
 3.6 Volunteer

3.6.1 Participate and cancel participation

Volunteers may join an event directly on the website. Information such as name,
email, address and phone number will be taken directly from their profile.
Volunteers can also cancel their participation from the website. This is done
through their profile page.

3.7 Admin

3.7.1 Manage Organisation

As an admin, they can control the contents of the website. An admin will have to
approve organisation registration to allow both user; organisation and volunteer.

6
 3.8 Proposed Design

This section is divided into 5 sub-section; 3.5.1, 3.5.2, 3.5.3, 3.5.4 and 3.5.5. In
each sub-section, the design of the system will be discussed including Use Case
Diagram, Context Diagram, Entity Relationship Diagram, Data Flow Diagram
and the storyboard of the website. Each sub-section is accompanied with an
explanation and a diagram.

3.8.1 Use Case Diagram

A use case diagram is a method used to identify, clarify and organise system
requirements (Rouse, 2015). For this project, there are 3 actors which are
Volunteer, Organisation and Admin. Each actor is limited to their own activity.
Figure 3.1 shows the use case diagram used in this project.

Figure 3.1 Use case diagram of the project

7
 3.8.2 Context Diagram

Context diagram or also known as level-0 diagram are tools used to visualise the
boundary of a system. It a simplified version of a data flow diagram. For this
project, the context diagram has 3 entities; Volunteer, Admin and Organisation.
All the data will go into the main process, Volunteering system. Every entity
carries different data. Figure 3.2 shows the data flow from each entity.

Figure 3.2 Context diagram for the project

8
 3.8.3 Entity Relationship Diagram

An entity relationship diagram (ERD) shows the relationships of entity sets

stored in a database. An ERD helps in illustrating a logical structure of a
database (SmartDraw, -). For this project, the ERD consists of supertype user
with two subtypes Volunteer and Organisation. Volunteer can join 1 or many
events. Organisation can make 1 or many events. Every event will have 1 or
many participants. Figure below shows the ERD for this project.

Figure 3.3 ERD of the project

9
 3.8.4 Data Flow Diagram

A data flow diagram is a diagram illustrating the flow of data in a system. It is

used to create an overview of a system (Wikipedia, 2018). For this project, the
data flow diagram consists of 3 entities; Volunteer, Organisation and Admin. It
has 4 processes; Login & register customer, Manage event, Receive Feedback,
Payment Gateway and Search website.

Figure 3.4 Data flow diagram (DFD) of the project

10
 3.8.5 Storyboard

HOME

Events Organisations Search Register Login

Event Info Org. info Search result Register form Account

Join Event Browse events Event Info Org. info

Event Info

11
 3.9 Database Dictionary

A database dictionary is a file or a set of files that contains a database's metadata

(Techopedia). For this project, 1 Database with 4 table is needed. The tables are
Volunteer, Organisation, Event and Participant. In this chapter, the data items in
the tables will be discussed.

3.9.1 Organisation

The Organisation table is to store information of registered organisations. The

table will store information of the organisation such as email, password, address,
phone number, organisation name, category, description and organisation. The
table also contains an ID for organisation and an activate field for activation
purposes. Table 3.4 shows the data of the table.

Table 3. 4 Table for Organisation

Data Item Variable Data Type Length

Name
Organisation ID ID_org int 6
Email email Varchar 20
Password password Varchar 15
Address address Varchar 50
Organisation Name org_name Varchar 25
Category category Varchar 8
Description desc Text
Image org_img Longblob
Activation activated Int 11

12
 3.9.2 Volunteer

The Volunteer contains the data of the volunteers. The table will store
information of the volunteers such as full name, email, password, address,
gender, phone number, and image. The table also contains an ID for each
volunteer. Table 3.5 shows the data of the table.

Table 3. 5 Table for Volunteer

Data Item Variable Data Type Length

Name
Volunteer ID ID_vol int 6
Full name full_name Varchar 50
Email email Varchar 20
Password password Varchar 15
Address address Varchar 30
Gender gender text
Phone number phone_num Varchar 11

3.9.3 Event

Event table contains the events held by organisations. An organisation can have
1 or many events. The event should contain the event name, date, venue and
time. Event id is the primary key and organisation id as the foreign key. Table
3.6 shows the data in the Event table.

Table 3. 6 Table for Event

Data Item Variable Name Data Type Length

Event ID ID_event Varchar 6
Event Name eventName Varchar 50
Event Description event_desc Varchar 100
Organisation ID ID_org Int 6
Date event_date Date 7
Time event_time Time 6
Venue event_venue Varchar 30
13
 Image event_img Blob

3.9.4 Participant

Participant table contains volunteers who is joining an event. This table contains
Volunteer ID and Event ID. Table 3.7 shows the data in the Participant table.

Table 3. 7 Table for Participant

Data Item Variable Name Data Type Length

Participant ID ID_participant Int 6
Volunteer ID ID_vol Int 6
Event ID ID_event Int 6

14
 3.10 User Interface

User interface is the way through which a user interacts with an application or a
website (Rouse, 2016). Having a good user interface is vital to attract user and
make sure the program or system is not too complex for an average user.

3.10.1 Home page

Figure 3.6 Home page

The home page is where the user will be greeted. From here, user can access
other most of the website. User can search events/organisation, browse
organisations, browse events, login or register account and view profile.
15
 3.10.2 Events page/ search result

Figure 3.7 Search result and events page

User will be directed to this page when they search for events or when they click
on the ‘Event’ tab. In this page, user can browse through the events made
available by the organisations. On the left side of the page, user can filter the
result to narrow down the choices. A picture and a short description of the event
is shown to help user find events.

16
 3.10.3 Event Info

Figure 3.8 Page for event information

When user clicks on an event, they will be directed to this page. This page will
provide more detail of the event such as date, time and venue. A detailed
explanation of the event is also provided. If user is interested, they can click on
“Join Event” button.

17
 3.10.4 Join Event

Figure 3.9 Confirmation of joining event

This page is a confirmation page when user click on “Join Event” button. If user
agrees on joining, they can click on “Confirm Participation”, and their name and
other info will be added to participation list.

18
 3.10.5 Organisation page

Figure 3.10 Organisation page

19
 User will be directed to this page if they want to search for an organisation. They
can narrow down their choices by choosing the category of the organisation such
as environment, human rights or welfare.

3.10.6 Organisation Info

Figure 3.11 Organisation info

20
 This page will appear when user clicks on an organisation. This page tells you
about the organisation. Upcoming events from the organisation is also shown to
the user. They can browse more if they intend to. On the bottom, contact
information of the organisation is posted.

3.10.7 Browse More

Figure 3.12 Browse event from organisation

User can browse more events made from one organisation only.

21
 3.10.8 Login

Figure 3.13 Login form

Before joining any events or make events, user have to login first. For first time
users, they would have to register first, either as a volunteer or as an
organisation.

3.10.9 Register

22
 Figure 3.14 Registration form

To register as an organisation, they would have to fill a form. Information such

as email, password, organisation name, category, address and phone number is
mandatory. To register as a volunteer , they would have to fill a form.
Information such as email, password, full name, birth date, address and phone
number is mandatory.

3.11 Planning for Implementation and Testing

To make sure the project meets the user requirement, a User Evaluation Test
(UAT) will be carried. By having this test, user can evaluate the system and
decide whether the system fills the requirement. The diagram below shows an
example of the UAT form according to the system.

Table 3. 8 UAT test form

No Module Activity(s) Status Comment

1 Login Login user Yes/no
2 Login as admin Yes/no
3 Register Register as Volunteer Yes/no
4 Register as Organisation Yes/no
5 Manage Edit Profile (Organisation) Yes/no
Profile
6 Edit Profile (Volunteer) Yes/no
7 Search Search events Yes/no
8 Search organisations Yes/no
9 Participation Join an event Yes/no
Cancel participation Yes/no
Manage Create an event Yes/no
events
Cancel Event Yes/no
Edit event Yes/no
Admin Activate/Deactivate Yes/no
account
Delete account Yes/no
Display Display events Yes/no
Display organisation Yes/no
23
 Display profile Yes/no
Error Login error Yes/no
handling
Empty form error Yes/no

24
 3.12 Gantt Chart

To ensure smoothness of this project, a gantt chart is planned. This gantt chart spans
until the date of submission. Two Gantt chart is made. Figure 3.15 shows the gantt chart
for project planning and figure 3.16 Shows the gantt chart for project development.
26-Sep 6-Oct 16-Oct 26-Oct 5-Nov 15-Nov 25-Nov

Finding project title

Analysing problem
Analysing project
Comparing existing system
Determine user requirement
Start
Determine system requirement
Duration
Project Planning
Interface design
SDLC
Use Case
DFD
Design Database

Figure 3.15 Gantt chart for project planning

14-Feb 24-Feb 6-Mar 16-Mar 26-Mar 5-Apr 15-Apr 25-Apr 5-May

Interface development

Javascript

Database implementation

PHP development

Testing system

Fix error

Design poster

Update report

Figure 3.16 Gantt chart for project development

25
 CHAPTER 4

IMPLEMENTATION AND TESTING

4.1 Introduction

In this chapter, the project enters coding and implementation phase. This chapter
contains 2 sub-sections which are Implementation and User Manual. In
Implementation, the process of making the system in discussed from designing
implementing and testing. The user manual provides a guide, for all users, on
how to navigate throughout the website. It will also show how to use the features
on the website.

4.2 Implementation

To develop this system, the process is separated into 3 phases, Design, Develop
and Testing. In Designing, the interface for the system is created using a
combination of HTML, CSS and Bootstrap. 23 interfaces are created for the
organisation, volunteers and the admin.

After designing, the project enters coding phase. This is where the functionality
of the website is implemented using PHP. Functions such as Account
registration, Create Event, Edit Event, Delete Event, and Edit Profile are created
for the Organisation. As a volunteer, the user can Register, Search events, Join
events and Cancel participation. Lastly, an admin can monitor all users and
activate or deactivate their account. They can also delete an account if needed.

26
 4.2.1 Login Interface

The login function allows the user to log in into their account. Depending on
their registered account, they can login as organisation or a volunteer. Figure 4.1
shows the interface and Figure 4.2 shows the coding to login.

Figure 4.1 Login interface

Figure 4.2 Coding for login

27
 4.2.2 Register Interface

Figure 4.3 Register interface

Figure 4.4 Coding for register as organisation and volunteer

28
 4.2.3 Create Event

Figure 4.5 Registration form

Figure 4.6 Event registration coding

29
 4.2.4 Update Event

Figure 4.8 Coding for Update event

4.2.5 Delete Event

Figure 4.7 Delete event interface

Figure 4.8 Delete event coding

30
 4.2.6 Search Events

Figure 4.9 Search Interface

Figure 4.10 Coding for search

31
 4.2.7 Cancel Participation

Figure 4.11 Interface for cancel participation

Figure 4.12 Coding for Cancel participation

32
 4.2.8 Join Event

Figure 4.13 Join Event interface

Figure 4.14 Coding for join event

33
 4.2.9 Activate/Deactivate and Delete account

Figure 4.15 activate/deactivate and delete account

Figure 4.16 coding for activating/deactivating and deleting account

4.3 User Manual

This is the user manual of the system. In this manual, user is guided on
how to use the system as an organisation, volunteer or an admin.

34
 4.4 Organisation

4.4.1 Organisation Registration

Before organisations can register an event, they must first create an account as
an organisation. Information of organisation including organisation name,
description, email, password, address, phone number and category is needed.
Additionally, they can upload an image of their organisation to help volunteers
recognise their page. These information will be stored in a database, and will be
used for account login validation, display organisation information in their
account.
In the login page, user
will have the option to
sign up as
organisation. They
will be redirected to
the Organisation
Registration form.

Figure 4.17 Organisation registration interface

35
 Figure 4.18 Organisation registration form

4.4.2 Login as Organisation

To access the features of the system, the user must login using the email and
password given during registration. After logging in, user will be redirected to
their account page where information regarding the organisation will be
displayed. Events uploaded by the organisation is also displayed. During login,
if user enter the wrong password or email, an error message will be shown. If the
text field is empty, an error message will be displayed. Lastly if account is not
activated, an error message will be displayed.

36
 Login as organisation
using the ‘Login as
Organisation’ button.

Figure 4.19 Interface for login

Error message

Figure 4.20 and Figure 4.21 Login error message

Figure 4.22 Organisation account interface

37
 4.4.4 Create Event

As an organisation, users can upload an event for volunteers. By clicking on the

‘Create Event’ link on the menu bar, user will be redirected to the Event
Registration form. Event information including event name, event description,
event date, event time and event venue. The information will be sent to the
database. After submitting, user will be redirected to the home page.

Click on the ‘Create

Event’ button

Figure 4.23 Create event button

Fill in the form

according to the label

After done, click submit

Figure 4.24 Event registration form

38
 4.4.5 Update Event

Organisations have the freedom to edit and update their posted events. In the
view all section, an ‘Update Event’ option is shown on each event. Click the
button and user will be redirected to the update form.

Figure 4.25 Edit event button

Figure 4.26 Edit event form

39
 4.4.6 Delete Event

Events can be deleted by the organisation if it is cancelled or the event has

already happened. To delete, the user will have to click ‘View all events’ under
the event display in account and will go to another page. In the page, each event
will have the option to delete the event.
Click on ‘View all
events’

Figure 4.27 ‘View all event’ buttom

Click on ‘Delete’ to
delete event

Figure 4.28 ‘Delete’ button

40
 4.4.7 Update Account

Users can change and update their organisation information.

Click ‘Edit Profile’ to

edit profile information.

Figure 4.28 link to edit profile

Change the
information
needed in
the form

Figure 4.29 form to update profile

41
 4.5 Volunteer

4.5.1 Volunteer Registration

For volunteers to participate, they have to register a new account on the

website. On the login form, User have the option to Sign up as
Volunteer.

In the login page, user will have the

option to sign up as volunteer.
They will be redirected to the
Volunteer Registration form.

Figure 4.30 Register for login page

42
 Fill in the form
completely and
click on submit
to register

Click submit to register

Figure 4.31 Volunteer registration form

43
 4.5.2 Search Event

If the user wants to revisit an event page, users can simply type in the keyword
of the event; Date, location and category. The page will display the lists of
events containing the keyword. To search for events, logging in is optional.

From account, click on

‘Join Event’

Figure 4.32 ‘Join Event’ button

Enter any field with

information of the event

Event is displayed here

Figure 4.33 Event display

44
 4.5.3 Join Event

One of the main features of the website is joining an event. To join an event,
users must be logged in into their account. In the events list page, user can click
on their favoured events and they will be redirected to the event information
page. In the information page, User can click on join event and they will be
automatically registered for the event.

Click on the
favoured events

Figure 4.34 Event display

Click ‘Join now’ to

join the event

Figure 4.35 Event info page

45
 4.5.4 Cancel Attendance

Volunteer has the freedom to cancel their participation in an event.

Figure 4.36 cancel participation button

4.5.5 Update Profile

User can change their personal information. To do so, click on ‘Edit Profile’
under the account button. User will see an ‘Update Profile’ form and change
their information from there.

Click on ‘Edit Profile’

Figure 4.37 Edit Profile link

46
 Change the field to be updated
using the form

Click update
profile when
finished

Figure 4.38 Update profile form

47
 4.6 Admin

4.6.1 Admin Login

For admin, the username and password is determined by themselves.

Admin has the ability to activate or deactivate an account. Approve or
disapprove an event.

Enter designated
username and
password

Figure 4.39 Admin login form

Figure 4.40 Admin account

48
 CHAPTER 5

CONCLUSION

5.1 Conclusion

Volunteering activities have been around for quiet some time. However, not
many people see the benefits in participating in one. Organisations are trying
hard to gain attention of the masses and make volunteering activities more
popular, especially amongst the youth. However, advertising can cost a lot and
for some organisations, especially self-funded, such amount may be hard to
come by.

With Hands Up, these problems can be overcome by having their organisations
along with their events displayed to the public on this website. On the other
hand, this site also serves the purpose as an event search engine. Volunteers can
search and join an event that they find interesting.

Throughout the developing process, a few minor errors appeared and have been
fixed such as display error, SQL query error, and login error. Other problems
include error handling, donation method.

49
 5.2 Recommendation

Based on the user acceptance test, the system works well and does its job
greatly. However, the system lacks in user-validation, allowing some users to
create two same accounts. Some interface still has minor display errors. For
future improvements, more security features will be added in the system.
Additional features such as maps for directions, event and organisation review
and better filtering for events

50
 References

[1] J. Fritz, "Small Business," The Balance , 3 July 2018. [Online]. Available:
https://www.thebalancesmb.com/unexpected-benefits-of-volunteering-4132453.
[Accessed 10 October 2018].

[2] Guru99, "Incremental Model in SDLC: Use, Advantage and Disadvantage," [Online].
Available: https://www.guru99.com/what-is-incremental-model-in-sdlc-advantages-
disadvantages.html.

[3] M. Rouse, "use case diagram (UML use case diagram)," TechTarget, January 2015.
[Online]. Available: https://whatis.techtarget.com/definition/use-case-diagram.
[Accessed 28 November 2018].

[4] SmartDraw, "Entity Relationship Diagram," SmartDraw, - - -. [Online]. Available:

https://www.smartdraw.com/entity-relationship-diagram/. [Accessed 30 November
2018].

[5] Wikipedia, "Data Flow Diagram," Wikipedia, 2018 November 2018. [Online]. Available:
https://en.wikipedia.org/wiki/Data_flow_diagram. [Accessed 28 November 2018].

[6] M. Rouse, "user interface," TechTarget, November 2016. [Online]. Available:

https://searchmicroservices.techtarget.com/definition/user-interface-UI. [Accessed
30 November 2018].

51
[7] A. Ghahrai, "Incremental Model," 2 July 2017. [Online]. Available:
https://www.testingexcellence.com/incremental-model/.

Fritz, J., 2018. Small Business. [Online]

Available at: https://www.thebalancesmb.com/unexpected-benefits-of-volunteering-
4132453
[Accessed 10 October 2018].

Ghahrai, A., 2017. Incremental Model. [Online]

Available at: https://www.testingexcellence.com/incremental-model/

Guru99, n.d. Incremental Model in SDLC: Use, Advantage and Disadvantage. [Online]
Available at: https://www.guru99.com/what-is-incremental-model-in-sdlc-advantages-
disadvantages.html

Rouse, M., 2015. use case diagram (UML use case diagram). [Online]
Available at: https://whatis.techtarget.com/definition/use-case-diagram
[Accessed 28 November 2018].

Rouse, M., 2016. user interface. [Online]

Available at: https://searchmicroservices.techtarget.com/definition/user-interface-UI
[Accessed 30 November 2018].

SmartDraw, -. Entity Relationship Diagram. [Online]

Available at: https://www.smartdraw.com/entity-relationship-diagram/
[Accessed 30 November 2018].

Wikipedia, 2018. Data Flow Diagram. [Online]

Available at: https://en.wikipedia.org/wiki/Data_flow_diagram
[Accessed 28 November 2018].

52