-
i
VISUAL HOSTEL ALLOCATION SYSTEM
(VHAS)
SITI NURHAZATULAZREEN BINTI HAMDAN
BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA)
WITH HONOURS
FACULTY OF INFORMATICS AND COMPUTING
UNIVERSITY OF SULTAN ZAINAL ABIDIN (UniSZA)
2019
-
ii
SISTEM PERUNTUKAN ASRAMA SECARA VISUAL
(VHAS)
SITI NURHAZATULAZREEN BINTI HAMDAN
IJAZAH SARJANA MUDA TEKNOLOGI MAKLUMAT (MEDIA
INFORMATIK) DENGAN KEPUJIAN
FAKULTI INFORMATIK DAN KOMPUTERAN
UNIVERSITY OF SULTAN ZAINAL ABIDIN (UniSZA)
2019
-
iii
SUPERVISOR’S ENDORSEMENT
I have read this project report and this report fulfils the
requirement of Final
Year Project for Bachelor of Information Technology (Informatics
Media).
Supervisor: Madam Hasni Binti Hassan
Date: 7/5/2019
-
iv
STUDENT’S DECLARATION
I hereby declare that this thesis is based on my original work
with some
information from sources that being notified with confession. I
also declare that this
report has not been produced for any diploma or degree
programmes in University of
Sultan Zainal Abidin (UniSZA) or any other learning
institutions.
Name: Siti Nurhazatulazreen Binti Hamdan
Date : 7/5/2019
-
v
ACKNOWLEDGEMENT
First and foremost, I would like to express my gratitude to the
Almighty God
for His grace, mercy and guidance which enabled me to accomplish
this project
successfully as a partial fulfilment of the requirements for the
Bachelor of Information
Technology Majoring in Informatics Media, University of Sultan
Zainal Abidin
(UniSZA).
I also would like to express my deep gratitude and appreciation
towards my
supervisor, Mrs. Hasni Hassan who has dedicated her valuable
time, motivation,
enthusiasm and immense knowledge to assists me in completing
this project work from
the beginning up to the end. My due appreciation goes to the
member of the panel for
the assessment and their valuable feedbacks and positive
criticism during the final
presentation that has helped me to improve my weaknesses.
Last but not least, I would like to express my deepest thanks to
my beloved family
and friends for the encouragement and moral support that made me
possible to
accomplish this project work successfully. I also would like to
appreciate to everyone
whom directly or indirectly has lent their contribution in this
venture.
-
vi
ABSTRACT
University of Sultan Zainal Abidin which is also known as UniSZA
is one of the
famous university in Terengganu. Currently in UniSZA, students
need to apply for
hostel allocation during the semester break that take times to
get the results. To solve
this problem, Visual Hostel Allocation System (VHAS) is proposed
where students are
able to fill up, submit and automatically get the results for
hostel allocation. Adoption
of this system helps making the process of application and
allocation of hostel rooms to
students becoming more effective and systematic.
-
vii
ABSTRAK
Universiti Sultan Zainal Abidin yang juga dikenali sebagai
UniSZA adalah salah
satu universiti terkenal di Terengganu. Kini di UniSZA, pelajar
perlu memohon
peruntukan asrama semasa rehat semester yang mengambil masa
untuk mendapatkan
keputusan. Untuk menyelesaikan masalah ini, Sistem Peruntukan
Hostel secara Visual
(VHAS) dicadangkan di mana pelajar dapat mengisi, menyerahkan
dan mendapatkan
keputusan secara automatik untuk peruntukan asrama. Dengan
menggunakan sistem ini,
proses permohonan dan agihan bilik asrama kepada para pelajar
dapat dilaksanakan
secaraa lebih efektif dan sistematik.
-
viii
TABLE OF CONTENTS
TITLE PAGE
FRONT PAGE i
SUPERVISOR’S ENDORSEMENT iii
STUDENT’S DECLARATION iv
ACKNOWLEDGEMENT v
ABSTRACT vi
ABSTRAK vii
CONTENTS viii
LIST OF FIGURES xii
LIST OF TABLES xv
LIST OF ABBREVIATIONS xvi
LIST OF APPENDIX xvii
CHAPTER
1 INTRODUCTION
1.1 Project Background 1
1.2 Problem Statement 2
1.3 Objectives 2
-
ix
1.4 Scope 3
1.5 Limitations/constraints of work 4
2 LITERATURE RIVIEW
2.1 Introduction 5
2.2 Problem analysis 5
2.3 Human Computer Interaction (HCI) design elements 6
2.3.1 Affordance 7
2.3.2 Support diverse types of users 7
2.3.3 Consistency 8
2.3.4 Control and feedback 8
2.3.5 Metaphor 9
2.3.6 Aesthetic interface 9
2.4 Conclusion 9
3 METHODOLOGY
3.1 Introduction 10
3.2 Categories of methodology 11
3.2.1 Traditional approach 12
3.2.2 Contemporary approach 13
3.3 Justification for the chosen Methodology 14
-
x
3.4 Methodology review 15
3.5 Context diagram 18
3.6 Data Flow Diagram (DFD) Level 0 19
3.7 Data Flow Diagram (DFD) Level 1 Manage Profile 20
3.8 Data Flow Diagram (DFD) Level 1 Manage Hostel 21
3.9 Data Flow Diagram (DFD) Level 1 Manage Results 22
3.10 Entity Relationship Diagram (ERD) 23
3.11 Database modelling 24
3.12 Software requirement 28
3.13 Conclusion 29
4 SYSTEM IMPLEMENTATION
4.1 Introduction 30
4.2 Interface design 30
4.3 Summary 56
-
xi
5 SYSTEM TESTING AND RESULTS
5.1 Introduction 57
5.2 Testing methods 57
5.3 Test cases 59
5.4 Conclusion 72
6 CONCLUSION AND RECOMMENDATIONS 73
6.1 Introduction 73
6.2 Outcomes of the study 73
6.3 Project Constraint 73
6.4 Future Works 74
6.5 Summary 74
REFERENCES 75
APPENDIX A 76
-
xii
LIST OF FIGURES
FIGURE NO TITLE PAGE
Figure 3.1 Waterfall model 11
Figure 3.2 Iterative and incremental model 13
Figure 3.3 Iterative and incremental development 15
Figure 3.4 Context diagram 18
Figure 3.5 Data Flow Diagram (DFD) Level 0 19
Figure 3.6 Data Flow Diagram Level 1 (3.7 Manage Profile) 20
Figure 3.7 Data Flow Diagram Level 1 (3.8 Manage Hostel) 21
Figure 3.8 Data Flow Diagram Level 1 (3.9 Manage Result) 22
Figure 3.9 Entity Relationship Diagram (ERD) 23
Figure 3.10 Data tables in database 24
Figure 3.11 Data table ‘admin’ 25
Figure 3.12 Data table ‘courses’ 25
Figure 3.13 Data table ‘registration’ 26
Figure 3.14 Data table ‘rooms’ 26
Figure 3.15 Data table ‘userlog’ 27
Figure 3.16 Data table ‘userregistration’ 27
Figure 4.1 Homepage 33
-
xiii
Figure 4.2 Homepage (below) 33
Figure 4.3 Hostel info (location) 34
Figure 4.4 Hostel info (images and floor plan) 34
Figure 4.5 Hostel info (video) 35
Figure 4.6 Facilities and service 35
Figure 4.7 User login screen 37
Figure 4.8 User registration screen 38
Figure 4.9 Dashboard 39
Figure 4.10 Create profile students screen 39
Figure 4.11 Change password screen 40
Figure 4.12 Book hostel screen 41
Figure 4.13 Room detail screen 42
Figure 4.14 User log screen 43
Figure 4.15 User logout 44
Figure 4.16 Administrator login screen 45
Figure 4.17 Administrator profile screen 46
Figure 4.18 Administrator dashboard 47
Figure 4.19 Courses (add courses) screen 48
Figure 4.20 Courses (manage courses) screen 49
Figure 4.21 Rooms (add rooms) screen 50
-
xiv
Figure 4.22 Rooms (manage rooms) screen 51
Figure 4.23 Manage students screen 52
Figure 4.24 User access log screen 53
Figure 4.25 Report screen 54
Figure 4.26 Administrator logout 55
Figure 5.1 Test for failed login 62
Figure 5.2 Test for view and delete students 64
Figure 5.3 Test for add courses 66
Figure 5.4 Test for delete courses 68
Figure 5.5 Test for add room 70
Figure 5.6 Test for manage room 72
-
xv
LIST OF TABLES
TABLE TITLE PAGE
Table 2.1 HCI elements among various hostel allocation system
6
Table 4.1 Buttons, icons and their functions 31
Table 5.1 General procedure 60
Table 5.2 Table test cases success login 60
Table 5.3 Table test cases failed login 61
Table 5.4 Table test cases view and delete students 63
Table 5.5 Table test cases add courses 65
Table 5.6 Table test cases delete courses 67
Table 5.7 Table test cases add rooms 69
Table 5.8 Table test cases manage rooms 71
-
xvi
LIST OF ABBREVIATIONS
VHAS Visual Hostel Allocation System
HCI Human Computer Interaction
DFD Data Flow Diagram
ERD Entity Relationship Diagram
HTML Hypertext Mark-up Language
PHP Hypertext Pre-processor
-
xvii
LIST OF APPENDIXES
APPENDIX TITLE PAGE
A Gantt chart (proposal) 74
Gantt chart (development) 75
-
1
CHAPTER 1
INTRODUCTION
1.1 Project Background
Visual Hostel Allocation System (VHAS) is proposed to improve
existing hostel
allocation system by adding the visuals of the hostel areas and
provide visual room
allocations. Unlike current hostel allocation system where
students have to apply for
hostel allocation by end of each academic year and wait for the
hostel administrator to
allocate the rooms and update the room allocations via students’
portal, this system
combined both processes; making the process of hostel allocation
faster and easier.
Apart from that, the VHAS is also able to manage students’
information, process
new registrations and update the hostel information. In
addition, VHAS is designed in
a way that it is user-friendly so that it improves users’ tasks
and reduces their workload.
This system focuses particularly on the interface design
elements and guidelines
such as affordance, support diversity of users, strive for
consistency, control and
meaningful feedback, metaphors and design aesthetically
appealing interface design for
a better satisfied and quality user interaction with the
system.
VHAS is a system that is developed as a platform to ease the
process of
visualizing hostel information and aid the hostel allocation. In
this system, the users are
the administrator and users. Administrator is in charge to
manage the system meanwhile
user can use the system register information and apply for
hostel.
-
2
1.2 Problem Statement
Current implementation of hostel registration and management
system is carried
out online but the process starts from registration, approval of
the application and finally
manual room allocation. The procedure involving the application
of hostel and its
allocation is time consuming. If the student’s successfully
filled up and submitted the
application early, the students still do not get the allocation
for hostel. They have to wait
until the hostel administrator manually allocate the rooms and
update the results online.
1.3 Objectives
The main objectives of this project is to design and develop a
user-friendly
system as well as to help the hostel administrator to organize
their task in a more
effective and efficient manner. The detailed objectives of the
project are as follows:
1. To design an interactive and user-friendly hostel system that
will help
improve user task performance and reduce their effort.
2. To implement VHAS that applies Human Interaction System (HCI)
elements
such as design guidelines and principles to create a satisfying
and quality user
interaction with the system.
3. To test the proposed system.
-
3
1.4 Scope
The scope of this system covers two types of users that will
interact directly with
this system that one the students and the hostel management
staffs. The scope for each
type of the user is as follows:
1. Students/Users
Login
Add , delete and update student details
Apply for hostel
2. Management staff/Admin
Login
Manage student information
Manage hostel’s info
Manage hostel applications
Allocate rooms based on predetermined rules or priority
Rooms detail
View report
-
4
1.5 Limitations / Constraints of work
Constraints is a requirement or condition that the system must
satisfy or
outcomes that the system must meet. A constraint can involve
hardware, software, time,
policy, law or cost. System constraint also defines project
scope. For example, if the
system must operate with existing hardware, it is a constraint
that affects potential
solutions.
Regardless of the type, all constraints should be identified as
early as possible
to avoid future problem and surprise. A clear definition of
project scope and constraints
avoid misunderstanding that arise.
One of the limitation or constraint that been faced throughout
the development
process is the internet connectivity. During each phase of
development especially the
early phase such as the planning and analysis, the main source
of information is from
the internet. Hence, the weak connection of internet during peak
hours causes
difficulties in carrying out the research and information
gathering for the completion of
tasks.
Apart from that, the main constraint faced in developing this
project is the time.
This refers to actual time required to produce a deliverable. In
this case, it would be the
end result of the project. Since the time allocated or given to
complete this project
shorter, there are many things that need to be settled in the
given period of time.
Therefore, a proper time management plan is needed to organize
every task in each
development phase. Other than that, another constraint faced is
the communication or
involvement with the users of the system are students and hostel
management staffs, it
is difficult to set an appointment to meet them for fact
gathering purposes due to their
tight schedules.
-
5
CHAPTER 2
LITERATURE REVIEW
2.1 Introduction
In this era of globalization, technology plays a major role and
becomes a part of
humans’ daily lives. There are many developments and
enhancements that have been
made especially in the field of computer science to make daily
tasks easier. This project
is aimed at developing a system that implements the design
elements of Human
Computer Interaction (HCI) to promote a better and quality user
interaction experience.
Therefore, a study was done to analyse the problem on existing
current techniques and
tools that is suitable to solve the problem under study.
2.2 Problem analysis
The traditional system provides less efficient and less
effective hostel
management system. So far there is no proper system to manage
and update hostel
applications effectively. At the same time, various existing
hostel management system
in other universities were studied to gain information on the
Human Machine
Interaction (HCI) design elements incorporated into those
systems.
The following table summarizes the result of the findings:
-
6
HCI Elements UPSI Hostel
Allocation System
⑴
UMS Hostel
Allocation System
⑵
USIM Hostel
Allocation System
⑶
Affordance
Support diverse of
users
x
x
Consistency x
Control and
feedback
x
Metaphor x
Aesthetic interface x
Table 2.1: Comparing HCI elements among various hostel
allocation system.
Identification of the drawbacks of the existing technique leads
to the design of
a computerized system which is more user-friendly and
user-centred. The efficiency of
user task completion can be improved and the workload is
reduced. Thus the drawbacks
of the existing system can be overcome.
-
7
2.3 Human Computer Interaction (HCI) Design Elements
Human Computer Interaction (HCI) is a field that emphasizes on
the design and
use of computer technology, focusing particularly on the
interfaces between users and
computers. Researchers in the field of HCI both observe the ways
in which human
interact with computers and design technologies that lets human
interact with computers
in a novel ways. In HCI, there are design elements such as the
design principles and the
guidelines that need to be followed by every interfaces designer
in order to achieve a
better quality user interaction experience and thus reducing
user’s workload and effort
in carrying out their daily task. ⑷
In this project, the design elements that applied are as
follows:
2.3.1 Affordance
An affordance is the design aspect of an object which suggests
how the object
should be used; a visual clue to its function and use. The terms
affordance also refers to
the perceived and actual properties of the thing, primarily
those fundamental properties
that determine just how the thing could possibly be used.
Affordance provide strong
clues to the operation of things. Plates are for pushing. Knobs
are for turning. Balls are
for throwing or bouncing. When affordances are taken advantage
of, the user knows
what to do just by looking no picture, label, or instruction
needed.
-
8
2.3.2 Support diverse type of users
When designing a user interface many aspects of human diversity
must be taken
into account. Depending on the purpose of the software,
designers must take into
account factors such as the physical disabilities, educational
background and
geographical location.
2.3.3 Consistency
User needs consistent design scheme so that they do not have to
relearn things.
In consistency, various aspects need to be taken into
consideration such as:
Colour – The colour is the most important element.
Layout – when the search button and the navigation bars are
always in
the same place across the site they are easier to find and
therefore save
user’s time.
Background elements and font.
Language
2.3.4 Control and feedback
A good example of feedback is when icons on the screen which
show a different
colour when selected. Users need for feedback from the system is
an important
consideration. Feedback is most often visual, with text,
graphics or icons.
-
9
2.3.5 Metaphor
Metaphor is a set of user interface visuals, actions and
procedures that exploit
specific knowledge that user already have of other domains. The
purpose of the
interface metaphor s to give the user instantaneous idea on how
to interact with the user
interface.
2.3.6 Aesthetic interface
Aesthetic interface has to deal with how the system is visually,
emotionally, or
physically appealing to the user. Design should ideally without
compromising on the
usefulness and usability of the system.
2.4 Conclusion
In conclusion, apart from being a fully functional system, the
element of design
in HCI plays a major role in the acceptance of a software
product by users. This is
because the design principles and guidelines in HCI focus on the
design and use of
computer technology particularly on the interfaces between users
and computers.
-
10
CHAPTER 3
METHODOLOGY
3.1 Introduction
This chapter focuses on the methodology that is being used in
the system
development. A software development methodology in software
engineering process is
defined as a framework that is used to structure, plan and
control the process of
developing an information system. Most common types of
methodologies include
waterfall, prototyping, iterative and incremental development,
spiral development,
rapid application development and extreme programming. In this
project, iterative
development approach was chosen and to be used for the
development of the system.
Apart from that, this chapter further discusses system modelling
that includes
the ERD, DFD, system framework and the database structure. A
model serves as an
abstraction, which is an approximate representation of the real
item that is to be built. It
is not practical to build certain kinds of complex systems
without first creating a design,
a blueprint or another abstract representation. A model serves
as a guide in constructing
a system and document the decision that been made. In this
chapter, the various modules,
functions and processes involved in the system were identified
and discussed.
-
11
3.2 Categories of Methodologies
There are several categories in the software development
methodologies namely
the traditional approach, the contemporary approach, radical and
agile approach.
3.2.1 Traditional approach
Figure 3.1 Waterfall model
One of the prominent examples of methodology approach that falls
on the
traditional category is the classic waterfall model. The
original Waterfall method is
featured in Figure 1. The steps include Requirements, Design,
Implementation,
Verification, and Maintenance.
The Waterfall method makes the assumption that all requirements
can be
gathered up front during the Requirements phase. Communication
with the user is front-
loaded into this phase to get a detailed understanding of the
user’s requirements. ⑸
-
12
The Design phase is best described by breaking it up into
Logical Design and
Physical Design sub phases. During the Logical Design phase, the
system’s analysts
makes use of the information collected in the Requirements phase
to design the system
independently of any hardware or software system. Once the
higher-level Logical
Design is complete, the systems analyst then begins transforming
it into a Physical
Design dependent on the specifications of specific hardware and
software technologies.
The Implementation belongs to the programmers in the Waterfall
method, as
they take the project requirements and specifications, and code
the applications. The
Verification phase was to ensure that the project is meeting
customer expectations.
During the Maintenance phase, the customer is using the
developed application.
As problems are found due to improper requirements determination
or other mistakes
in the design process, or due to changes in the users’
requirements, changes are made
to the system during this phase.
The Waterfall method does have certain advantages, including the
approach is
very structured and it is easier to measure progress by
reference to clearly defined
milestones. Unfortunately, the Waterfall method carries with it
quite a few
disadvantages, such as the model does not cater for the
possibility of requirements
changing during the development cycle.
-
13
3.2.2 Contemporary approach
Figure 3.2 Iterative and incremental model
An example of the contemporary approach is the iterative and
incremental
approach. This approach is combination of both iterative method
and incremental build
model for system development. The iterative model is a
particular implementation of a
software development life cycle (SDLC) that focuses on an
initial, simplified
implementation, which then progressively gains more complexity
and a broader feature
set until the final system is complete. When discussing the
iterative method, the concept
of incremental development will also often be used liberally and
interchangeably, which
describes the incremental alterations made during the design and
implementation of
each new iteration. The advantages of this method is easy
adaptability when hinging on
the core strength of constant, frequent iterations coming out on
a regular basis, another
primary advantage of the iterative model is the ability to
rapidly adapt to the ever-
changing needs of both the project or the whims of the client.
Even fundamental changes
to the underlying code structure or implementations (such as a
new database system or
-
14
service implementation) can typically be made within a minimal
time frame and at a
reasonable cost, because any detrimental changes can be
recognized and reverted within
a short time frame back to a previous iteration. ⑹
3.3 Justification for the chosen Methodology
Iterative and incremental approach is chosen as the methodology
in developing
this project. The advantages of this approach includes Inherent
Versioning that is rather
obvious that most software development life cycles will include
some form of
versioning, indicating the release stage of the software at any
particular stage. However,
the iterative model makes this even easier by ensuring that
newer iterations are
incrementally improved versions of previous iterations. Later,
the process of designing
and building of the framework is followed by evolving the design
based on what had
been built.
Unlike the more traditional waterfall model, which focuses on a
stringent step-
by-step process of development stages, the iterative model is
best thought of as a
cyclical process. After an initial planning phase, a small
handful of stages are repeated
over and over, with each completion of the cycle incrementally
improving and iterating
on the software. Enhancements can quickly be recognized and
implemented throughout
each iteration, allowing the next iteration to be at least
marginally better than the last.
-
15
3.4 Methodology Review
Iterative and incremental method consist of 8 phases namely
planning,
requirements, analysis and design, implementation, deployment,
testing, evaluation and
initial planning.
Figure 3.3 Iterative and incremental development
3.4.1 Planning
As with most any development project, the first step is go
through an initial
planning stage to map out the specification documents, establish
software or hardware
requirements, and generally prepare for the upcoming stages of
the cycle. This phase
begins with brainstorming of idea with supervisor.
-
16
3.4.2 Requirements
In this phase, a list of user requirements for the system is
collected. In this case,
the user requirement are gathered from students and staffs of
the UniSZA Residential
Hostel Management office. After that, all possible alternatives
are analysed and
strategies are identified so as to use them in later stages of
the development process.
3.4.3 Analysis & Design
Once planning and requirements is complete, an analysis is
performed to nail
down the appropriate business logic, database models, and the
like that will be required
at this stage in the project. The design stage also occurs here,
establishing any technical
requirements (languages, data layers, services, etc) that will
be utilized in order to meet
the needs of the analysis stage.
3.4.4 Implementation
With the planning, requirements and analysis out of the way, the
actual
implementation and coding process can now begin. All planning,
specification, and
design docs up to this point are coded and implemented into this
initial iteration of the
project using programming language such as PHP, JavaScript, CSS
and HTML.
-
17
3.4.5 Testing
Once this current build iteration has been coded and
implemented, the next step
is to go through a series of testing procedures to identify and
locate any potential bugs
or issues that have cropped up.
3.4.6 Deployment
In software deployment phase, the system or system modifications
are made
operational in a production environment. The phase is initiated
after the system has been
tested. If the product is not ready to be used, then it will
undergo the evaluation process.
3.4.7 Evaluation
Once all prior stages have been completed, it is time for a
thorough evaluation
of development up to this stage. This allows the developer, as
well as clients or other
outside parties, to examine where the project is at, where it
needs to be, what can or
should change, and so on.
3.4.8 Initial Planning
After every phase in the software development are executed and
it is found that
there are some elements that needed to be added to make the
system to be more complete,
initial planning phase is entered again to finalize the software
development process.
-
18
3.5 Context Diagram
Apply Manage students
Feedback Results
Figure 3.4: Context diagram of UniSZA Hostel Management
System
Figure 3.4 illustrate the context diagram for the UniSZA Hostel
Management
System. There are two entities involve in this system, which are
students and the admin.
Each entity interacts with each other through the system and
have their own modules
and processes as shown above.
Students
0
UniSZA Hostel
Allocation
System
Admin
-
19
3.6 Data Flow Diagram 0
Students info record
criteria details record
view results record
Request for report Students record
Hostel record
Results record
Figure 3.5: Data Flow Diagram (DFD) Level 0
Students
1.0
Manage
profile
4.0
Generate report
2.0
Manage hostel
3.0
Manage
results
Admin
D1 | Students
D2 | Hostel
D3 | Results
-
20
3.7 DFD 1 Manage Profile
Login Students record
Profile students
Students record
Profile students
Figure 3.6: Data Flow Diagram Level 1 (3.7 Manage Profile)
Students
Admin
D1 | Students
2.1
View profile
2.2
Update profile
-
21
3.8 DFD 1 Manage Hostel
View criteria
Hostel record
View information
Hostel record
Figure 3.7: Data Flow Diagram Level 1 (3.8 Manage Hostel)
Admin 3.1
Provide information
3.2
Manage hostel
D2 | Hostel
-
22
3.9 DFD 1 Manage Result
Apply hostel
Results record
Results record
View results
Feedback
Figure 3.8: Data Flow Diagram Level 1 (3.9 Manage Result)
Students 4.1
Get result
4.2
Manage result
D3 | Results Admin
-
23
3.10 ERD
Figure 3.9: Entity Relationship Diagram (ERD)
Students apply Hostel
Email
(PK)
Password
Semester
Start sem
End sem Faculty
Name
Faculty Room no.
Block
Results
Room no.
Password
Block Validity
Priority
Block
get
semester
End sem Start sem
-
24
3.11 Database Modelling
3.11.1 Introduction
A database modelling is a type of data modelling that determines
the logical
structure of a database and fundamentally determines in which
manner data can be
stored, organized, and manipulated. The following diagram
illustrates the various tables
that consist in the system database.
3.11.2 Data tables in Database
Figure 3.10: Data tables in database
-
25
3.11.3 Table admin
Figure 3.11: Table admin
3.11.4 Table courses
Figure 3.12: Table courses
-
26
3.11.5 Table registration
Figure 3.13: Table registration
3.11.5 Table rooms
Figure 3.14: Table rooms
-
27
3.11.6 Table userlog
Figure 3.15: Table userlog
3.11.7 Table userregistration
Figure 3.16: Table userregistration
-
28
3.12 Software Requirement
Xamp Server
- Managed connection MySQL in the localhost server.
Mozilla Firefox, Google Chrome
- Browser to the system.
Windows 10 Home Premium
- OS of the computer used in developing the system.
Notepad++
- Design of the prototype for the visual.
Microsoft Word 2013
- Preparation for the documentations for the project
proposal.
Microsoft Office 2013
- Preparation of slides for the presentation of the project
proposal.
- Preparation of project poster.
-
29
3.13 Conclusion
Software development methodology is an important element to
consider because
the software must be delivered to the client on time and it also
must meet the user
requirement and needs. Choosing the right methodology and
approach in developing
the software is a critical process because it depends on the
type of software to be
developed and also time and cost constraints.
-
30
CHAPTER 4
SYSTEM IMPLEMENTATION
4.1 Introduction
In this chapter, the main focus is on the system implementation
phase of the
system development process. Generally, system implementation is
the phase where the
realization of an application, or execution of a plan, idea,
model, design, specification,
standard, algorithm, or policy. This chapter discusses about the
software product that is
being implemented using the plan.
4.2 Interface Design
Interface design is the process of designing the interface by
considering various
aspects such as the method of accepting user input and produce
output. Interface is
considered to be one of the most crucial parts in developing a
system. Therefore it is
important that the interface is designed in a way that it eases
user to accomplish their
task by interacting with the system efficiently and
effectively.
-
31
In Visual Hostel Allocation System, the interfaces were designed
for two (2)
types of user, which are the students and the administrator. The
following diagrams
illustrate in detailed every steps involved in the system.
4.2.1 Buttons, icons and their functions
Name of the button/icon Graphical representation of the
button/icon
Functions
Login
Login into
the system
Register
Register new
user
Update
Update user
profile
Cancel
Cancel the
information
Change password
Change user
password
Close
User can
close the
document
-
32
that show the
results
Forgot password
User can
click to get
the old
password
Delete
Delete the
data
Edit
Edit students
data
Learn more
Get more
information
about hostel
Menu
Navigate to
home, hostel
info ,register
and facilities
Search
Search rooms
number
Table 4.1: Buttons, icons and their functions
-
33
4.2.2 User view
4.2.2.1 Homepage
Figure 4.1: Homepage
Figure 4.2: Homepage below
-
34
Figure 4.3: Hostel information (location)
Figure 4.4: Hostel information (images and floor plan)
-
35
Figure 4.5: Hostel information (hostels video)
Figure 4.6: Facilities and service
-
36
Figure 4.6: Facilities and service
Figure 4.6: Facilities and service
-
37
Figure 4.1 and figure 4.2 shows the homepage for the user and
the administrator.
In this screen, the user and administrator can sign in into the
VHAS for hostel
application. Users also can view the images and video in hostel
info and facilities pages.
4.2.2.2 User login screen
Figure 4.7: User login screen
Figure 4.3 shows the login screen for user. In this screen, user
key in their email
and password in order to get access into the system. However, if
the user is still new
and does not have any account yet, the user is required to click
on the register icon “User
Registration” in order to enter the application process.
-
38
4.2.2.3 User registration screen
Figure 4.8: User registration screen
Figure 4.4 shows the user registration screen after the user
clicks the “User
Registration” button in left side of the login page. Here, the
user required to enter their
info. After that, the user us required to click the register
button to confirm the
registration process and click the user login button in left
side and sign in.
-
39
4.2.2.4 Dashboard
Figure 4.9: Dashboard
The figure 4.5 shows the dashboard page. In this dashboard, it
contains two
detail about my profile and my room.
4.2.2.5 Create student profile screen
-
40
Figure 4.10: Create student profile screen
After clicking the dashboard button, user is required to click
the profile screen
as shown in the figure 4.6. In this screen, the user is required
to create student profile
by filling up all the fields as shown in the figure above.
Finally, by clicking the update
button, the user successfully set up an account.
4.2.2.6 Change password screen
Figure 4.11: Change password screen
Figure 4.7 shows the change password screen. The user can update
their
password and clicking the change password button.
-
41
4.2.2.7 Book hostel screen
Figure 4.12: Hostel application screen
When the user clicks submit button from the previous screen, the
user is
redirected into hostel application confirmation screen where the
user able to view the
details that being enter in profile screen to ensure there were
no errors because each
user entitled to make one (1) hostel application at a time. If
the user have to update their
profile, they can go to profile screen to update it. If the user
already verifies the
particulars, the user finally clicks on register button and now
application info being sent
to the administrator.
-
42
4.2.2.8 Room details screen
Figure 4.13: Room details screen
Once the users already booked the hostel, they will be able view
room details
screen and user also can print the information by clicking print
data.
-
43
4.2.2.9 User access log screen
Figure 4.14: User access log
Figure 4.10 shows user access log screen. User can view their
login time in
access log screen.
-
44
4.2.2.10 User logout
Figure 4.15: User logout
If the user decided to logout from the system, the user needs to
click account
button in left side and click again at logout button. Once user
clicks on it, the user ends
their session and logged out from the system.
-
45
4.3.1 Administrator/ staff view
4.3.1.1 Administrator login screen
Figure 4.16: Administrator login screen
Figure 4.12 shows the login screen for administrator. In this
screen,
administrator key in their username or email and password in
order to get access into
the system.
-
46
4.3.1.2 Administrator profile screen
Figure 4.17: Administrator profile screen
Once the administrator successfully login, the administrator
will be redirected
to profile screen as shown in the figure 4.13.
-
47
4.3.1.3 Administrator dashboard screen
Figure 4.18: Administrator dashboard screen
The figure 4.14 shows the administrator dashboard screen. In
this screen, it
contains three (3) dashboard which is student’s information,
total rooms and total
courses.
-
48
4.3.1.4 Courses screen (add courses)
Figure 4.19: Add courses screen
When the administrator clicks ‘Courses’ button, there are two
(2) drop down
which is add courses and manage courses. In add courses screen
in figure 4.15, the
administrator able add course by filling up course details.
-
49
4.3.1.5 Courses screen (manage courses)
Figure 4.20: Manage courses screen
Figure 4.16 shows manage courses screen. There is a list of
courses detail that
be added previously at add courses screen. When the
administrator clicks pending tab
in action table, the administrator able to edit the course
details while when the
administrator clicks ‘x’ icon, the data about the course will
deleted.
-
50
4.3.1.6 Rooms (add rooms)
Figure 4.21: Add rooms screen
When the administrator clicks ‘Rooms’ button, there are two (2)
drop down
which is add rooms and manage rooms. In add rooms screen in
figure 4.15, the
administrator able add rooms by filling up room details.
-
51
4.3.1.7 Rooms (manage rooms)
Figure 4.22: Manage rooms screen
The figure 4.18 shows manage rooms screen. There are list of
rooms detail that
be added previously at add rooms screen. When the administrator
clicks pending tab in
action table, the administrator able to edit the room details
while when the administrator
clicks ‘x’, the data about the rooms will deleted.
-
52
4.3.1.8 Manage students screen
Figure 4.23: Manage students screen
The figure 4.19 shows manage students screen. The administrator
are able to
delete the data by simply clicking on delete icon.
-
53
4.3.1.9 User access logs screen
Figure 4.24: User access logs screen
When the administrator click ‘user access logs’, the
administrator able to view
user login time records.
-
54
4.3.1.10 Report screen
Figure 4.25: Report screen
When the administrator clicks report button, the administrator
is able to view a
bar graph of statistics of the percentage of students that
applied for hostels based on
their study (academic) programmes.
-
55
4.3.1.10 administrator logout
Figure 4.26: Administrator logout
If the administrator decided to logout from the system, the
administrator needs
to click account button in left side and click again at logout
button. Once administrator
clicks on it, the user ends their session and logged out from
the system.
-
56
4.4 Summary
This chapter focus primarily on the system implementation phase
of the system
development process. One of the main concerns of the
implementation phase is the
interface design. Therefore it is important that the interface
is designed in a way that it
eases user to accomplish their task by interacting with the
system efficiently and
effectively. A well designed interface possesses the ability to
attract and change user’s
perception towards a system. In this project, the system
interfaces were designed by
considering various HCI design elements as to promote the better
interaction of user
and the system.
-
57
CHAPTER 5
SYSTEM TESTING AND RESULTS
5.1 Introduction
Software testing is a process, to evaluate the functionality of
a software
application with an intent to find whether the developed
software met the specified
requirements or not and to identify the defects to ensure that
the product is defect free
in order to produce the quality product.
In this chapter, the software testing is focused in detailed
with screenshots of the
interfaces and some explanations on the testing performed and
the outcomes. Apart
from that, various type of testing that being conducted on the
software product is also
being discussed in this chapter along with its outcome.
5.2 Testing methods
5.2.1 Static testing
Static testing is a software testing method that involves
examination of the
program's code and its associated documentation but does not
require the program be
executed. Static testing may be conducted manually or through
the use of various
software testing tools. Specific types of static software
testing include code analysis,
inspection, code reviews and walkthroughs.
-
58
5.2.2 Dynamic testing
Dynamic testing is when you are working with the actual system
by providing
an input and comparing the actual behaviour of the application
to the expected
behaviour. In other words, working with the system with the
intent of finding errors.
5.2.3 White box testing
White Box Testing is a software testing method in which the
internal structure/
design is known to the tester. The main aim of White Box testing
is to check on how
System is performing based on the code. It is mainly performed
by the Developers or
White Box Testers who has knowledge on the programming.
5.2.4 Black-box testing
Black Box Testing is a method of testing in which the internal
structure/
code/design is not known to the tester. The main aim of this
testing to verify the
functionality of the system under test and this type of testing
requires to execute the
complete test suite and is mainly performed by the Testers, and
there is no need of any
programming knowledge.
-
59
5.3 Test cases
The following are the sample of test cases used in the software
testing procedure
for the Visual Hostel Allocation System.
5.3.1 General procedure
Step Procedure
1. Go to http://localhost/hostel/admin/login.
php
2. Input the following details:
Email : [email protected]
Password : 12345
3. Click on the login button
Table 5.1: Test case for general procedure
http://localhost/hostel/
-
60
5.3.2 Test for success login
Test for success login
Step Procedure Expected result Outcome Comments
1.
Go to http://localhost/
hostel/ admin/login.php
Login page is
loaded
Success
-
2.
Input the following details :
Email : [email protected]
Password : 12345
3.
Click on the login button
Administrator
dashboard is
loaded
Success
-
Post-test
procedure
1.
Click on the logout link
Administrator
logged out from
the system
Success
-
Table 5.2: Test case for success login
http://localhost/hostel/http://localhost/hostel/
-
61
5.3.3 Test for failed login
Test for success login
Step Procedure Expected result Outcome Comment
s
1.
Go to http://localhost/
hostel/ admin/login.php
Login page is loaded
Success
-
2.
Input the following
details :
Email :
[email protected]
Password : 123
3.
Click on the login button
Login error page is
loaded with display
“Invalid email or
password
Success
-
Post-test procedure
1.
Click on the logout link
Administrator
logged out from the
system
Success
-
Table 5.3: Test case for failed login
http://localhost/hostel/http://localhost/hostel/
-
62
Figure 5.1: Screen for failed login
-
63
5.3.4 Test case for view and delete student
Test for view and
delete student
Step Procedure Expected result Outcome Comments
1.
Begins with general
procedure
Administrator
successfully login
Success
-
2.
Select ‘manage
students’ button
A pop up confirmation
message ‘Data deleted’ is
appear
Success
3.
Click OK on the pop
up confirmation
message
The selected student is
deleted
Success
-
Table 5.4: Test case for view and delete student
Post-test procedure
1.
Click on the logout
link
Administrator logged
out from the system
Success
-
-
64
Figure 5.2: Screen for view and delete student record
-
65
5.3.5 Test case for add courses
Table 5.5: Test case for add course
Test for add courses
Step Procedure Expected result Outcome Comments
1.
Begins with general
procedure
Administrator
successfully login
Success
-
2.
Select ‘courses’ button
and click ‘add courses’
A form to add course
appear
Success
3.
Fill the form and click
add course
The new course
added
Success
-
Post-test procedure
1.
Click on the logout link
Administrator
logged out from the
system
Success
-
-
66
Figure 5.3: Screen for added courses
-
67
5.3.6 Test case for delete courses
Table 5.6: Test case for delete courses
Test for view and delete
courses
Step Procedure Expected result Outcome Comments
1.
Begins with general
procedure
Administrator
successfully login
Success
-
2.
Select ‘courses’ button
and click ‘manage
courses’
A list of courses
appear
Success
3.
Click delete and pending
icon
The courses deleted
when click delete
icon and the form
to edit course will
be appear when
click on pending
icon
Success
-
Post-test
procedure
1.
Click on the logout link
Administrator
logged out from
the system
Success
-
-
68
Figure 5.4: Test for delete courses
-
69
5.3.7 Test case for add room
Table 5.7: Test case for add rooms
Test for add room
Step Procedure Expected result Outcome Comments
1.
Begins with general
procedure
Administrator
successfully login
Success
-
2.
Select ‘rooms’ button and
click ‘add room’
The form for
adding room
appear
Success
3.
Fill the form and click
create room
A pop up ‘room
has been added
successfully’
Success
-
Post-test
procedure
1.
Click on the logout link
Administrator
logged out from
the system
Success
-
-
70
Figure 5.5: Test for add room
-
71
5.3.8 Test case for manage room
Table 5.8: Test case for manage rooms
Test for add room
Step Procedure Expected result Outcome Comments
1.
Begins with general
procedure
Administrator
successfully
login
Success
-
2.
Select ‘rooms’ button
and click ‘manage room’
The list of room
info appear
Success
3.
Click the delete icon
A pop up ‘data
deleted’
Success
-
Post-test
procedure
1.
Click on the logout link
Administrator
logged out from
the system
Success
-
-
72
Figure 5.6: Test for delete students
5.4 Conclusion
As a conclusion, in this chapter the software testing procedure
were carried out
with various samples of test cases to test the system’s outcome
with the expected results.
Based on the testing carried out, the results shows that the
Visual Hostel Allocation
System has passed in the entire test conducted using the test
cases as it successfully
showed the exact output as being expected.
-
73
CHAPTER 6
CONCLUSION AND RECOMMENDATIONS
6.1 Introduction
This chapter discusses the overall conclusion from carrying out
the study, the
outcomes and the constraints of VHAS. The outcomes is the
functional prototype of
VHAS that implements various HCI elements as proposed while
constraints are
anything that prevents the system from achieving its goal and
objectives.
6.2 Outcomes of the Study
The Visual Hostel Allocation System is the outcome from the
project work t to
be used by students and the administrator of UniSZA hostel
management. Through this
system, students able to apply hostel, edit and view their
information and get the results
of their applications automatically.
6.3 Project Constraints
There are several problems and limitations that occurred
throughout the development
of the system. The problems and limitations are:
Visual Hostel Allocation System was developed only for female
students in
Tembila Campus.
This system has to improve the security of web-based system.
-
74
For the disabled students, the application form should add more
information
such as the need to fill out a disabled identification card
number to avoid giving
false information.
6.4 Future Works
The Visual Hostel Allocation System can be improved for a better
application.
This could be accomplished by adding secure gateway feature to
ease student’s
workload. Moreover, this system could also be enhanced by
upgrading the feature via
the implementation as a mobile application software. Mobile
application software is a
computer program designed to run on smartphones and other mobile
devices. As the
usage of smart phone and other mobile devices has become
increasingly prevalent, the
popularity of mobile application software has continued to rise
in demand.
6.5 Summary
Visual Hostel Allocation System is a user-friendly web-based
application that
eases students’ workload by applying the hostel, update their
information, view the
profile, automatically get results and also can print the data.
The administrator and the
hostel management staffs are able to manage student’s
information and applications.
VHAS also provides a good user interaction experience by
implementing HCI design
and guideline in its interface design. Hence, it is anticipated
that the results from this
project work could be useful for UniSZA to ease their daily
workload and tasks.
-
75
REFERENCES
[1] https://portal.upsi.edu.my/
[2] https://www.usim.edu.my/ms/#
[3] http://www.ums.edu.my/
[4] Dix, A. (2009). Human-computer interaction. In Encyclopedia
of database systems
(pp. 1327-1331). Springer, Boston, MA.
[5] Balaji, S., & Murugaiyan, M. S. (2012). Waterfall vs.
V-Model vs. Agile: A
comparative study on SDLC. International Journal of Information
Technology and
Business Management, 2(1), 26-30.
[6] Larman, C., & Basili, V. R. (2003). Iterative and
incremental developments. A
brief history. Computer, 36(6), 47-56.
-
76
GANTT CHART (PROPOSAL)
Activity/
Week
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Topic
Discussion
and
Determination
Project Title
Proposal
Proposal
Writing
Introduction
Proposal
Writing –
Literature
Review
Proposal
Progress
Presentation &
Evaluation
Discussion &
Correction
Proposal &
Proposed
Solution
Methodology
-
77
Proposed
Solution
Methodology
Proposed
Solution –
Methodology
(Continued)
Proof of
Concept
Drafting
Report of the
Proposal
Drafting
Report of
Proposal
(Continued)
Submit draft
of report to
supervisor
Seminar
Presentation
Correction
Report
Final Report
Submission
-
78
GANTT CHART (DEVELOPMENT)
Activity/Week 1 2 3 4 5 6 7 8
Progress
presentation
Development,
implementation &
documentation
Development,
implementation,
slides &
documentation
Development,
implementation
& documentation
Development,
implementation,
slides &
documentation of
chapter 5
Documentation of
chapter 5,
evaluation of pre-
presentation(slides
& system)
Submission of
thesis draft
Final presentation
and submission of
amended thesis
draft
Thesis submission
