Embed Size (px)
Citation preview
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
(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
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
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 :
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
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
