FACULTY OF INFORMATION MANAGEMENT

UNIVERSITY TEKNOLOGI MARA

PUNCAK PERDANA CAMPUS
SHAH ALAM

IMS607 – ADVANCED WEB DESIGN AND CONTENT MANAGEMENT

GROUP ASSIGNMENT – FINAL PROJECT

COLLEGE E-OUTING MANAGEMENT SYSTEM

PREPARED BY
Nur Hanis Binti Zulkanain 2019601498
Emysha Nadira Binti Nor Azalan 2019897588
Fatin Hazirah Binti Saini 2019829854
Fatin Haziqah Binti Saini 2019688914

Group
NIMBSF8A

Prepared For
Mr. Amzari Bin Abu Bakar

Submission Date
30th January 2023
 ACKNOWLEDGEMENT

We would like to express our deep and sincere gratitude to our lecturer, Mr. Amzari Bin
Abu Bakar, lecturer of subject IMS607, Advanced Web Design And Content Management at
Information Technology Faculty, UiTM Puncak Perdana, for giving us the opportunity to do
research and providing invaluable guidance throughout this assignment. His guidance and
teaching on the methodology to carry out the assignment and to present the assignment works
as clearly as possible. It was a great privilege for what he has offered to us.

Secondly, thank you to the classmates of NIMBSF8A, for the help in discussing the
content to gather all different information, collecting data from time to time in making this
assignment, despite our busy schedules.

Last but not least, thanks to our family and friends who understand and continue to
support us to complete this assignment. Finally, many thanks go to all the people who have
supported us to complete the assignment work directly or indirectly.
 TABLE OF CONTENT

ACKNOWLEDGEMENT 2
TABLE OF CONTENT 3
TABLE OF FIGURE 6
CHAPTER 1 : PROJECT IDENTIFICATION 7
1.1 INTRODUCTION 7
1.2 CLIENT BACKGROUND 8
1.3 CLIENT BUSINESS DESCRIPTION 8
1.4 ORGANIZATIONAL CHART 11
1.5 IT UTILIZATION/ORGANIZATION PLANNING 13
1.6 PROBLEM STATEMENT 13
1.7 APPENDIX 15
1.8 REFERENCES 16
CHAPTER 2 : PROJECT INITIATION AND PLANNING 17
2.1 INTRODUCTION 17
2.2 BASELINE PROJECT PLAN (BPP) 17
2.2.1 INTRODUCTION 17
2.2.2 PROJECT OVERVIEW 18
2.2.3 PROJECT RECOMMENDATION 18
2.2.4 SYSTEM DESCRIPTION 18
2.3 SYSTEM OBJECTIVES 19
2.4 SYSTEM BENEFITS 19
2.5 SCHEDULE, TIMELINE AND RESOURCE ANALYSIS 19
2.5.1 GANTT CHART 20
2.6 APPENDIX 21
2.7 REFERENCES 22
CHAPTER 3 : PROJECT ANALYSIS 23
3.1 INTRODUCTION 23
3.2 SYSTEM REQUIREMENT 23
3.3 STRUCTURING SYSTEMS REQUIREMENTS: CONCEPTUAL DATA
MODELLING 24
3.3.1 ENTITY RELATIONSHIP DIAGRAM (ERD) 24
3.1.2 ENTITY RELATIONSHIP DIAGRAM (ERD) COMPLETE DATABASE
VIEW 25
 3.4 APPENDIX 26
3.5 REFERENCES 27
CHAPTER 4 : DESIGN 28
4.1 INTRODUCTION 28
4.2 DATABASE DESIGN 29
4.2.1 CONCEPTUAL DATA MODEL 29
4.2.2 RELATIONAL DATA MODEL 30
4.3 DATA DICTIONARY 31
4.4 FORMS AND REPORT DESIGN 34
4.4.1 Outing Application Form 34
4.4.2 Outing Approval Form 35
4.4.3 Return Time Form 36
4.4.4 Outing Report 37
4.5 INTERFACE DESIGN 38
4.5.1 Login Page 38
4.5.2 Student Home Page 40
4.5.3 Outing Logs / View Application Page 41
4.5.4 Warden Home Page 42
4.5.5 Student Outing Logs Page 43
4.5.6 Print Report Page 44
4.5.7 Warden Email Notification Page 45
4.5.8 Student Email Notification Page 46
4.6 APPENDIX 47
4.7 REFERENCES 48
CHAPTER 5 : IMPLEMENTATION 49
5.1 INTRODUCTION 49
5.2 CODING DESIGN 49
5.2.1 db_conn.php 49
5.2.2 index.php 50
5.2.3 check_login.php 52
5.2.4 student_home.php 53
5.2.5 submit_application.php 56
5.2.6 outing_logs.php 58
5.2.7 update_return_time.php 58
5.2.8 warden_home.php 59
5.2.9 new_students_logs.php 63
 5.2.10 application_approval_action.php 64
5.2.11 logs_history.php 65
5.2.12 logout.php 65
5.3 TESTING 66
5.4 INSTALLATION 67
5.4.1 Database Setup 67
5.4.2 Server Setup 68
5.5 USER GUIDE 69
5.6 USER SUPPORT 92
5.7 CONCLUSION 93
5.8 APPENDIX 94
5.9 REFERENCES 95
 TABLE OF FIGURE

Figure 1 : Organization Chart of Kolej Vokasional Datu Seri Abu Zahar Isnin ...................... 11
Figure 2 : Dormitory Management Unit Organization Chart of Kolej Vokasional Datuk Seri
Abu Zahar Isnin..................................................................................................................... 12
Figure 3 : Example of KVDSAZI Hostel Outing Log Book .................................................... 15
Figure 4 : Gantt chart for the development of College E-Outing Management System ........ 20
Figure 5 : A user's guide to the College E-Outing System .................................................... 21
Figure 6 : Entity Relationship Diagram ................................................................................. 24
Figure 7 : ERD with complete database view ....................................................................... 25
Figure 8 : Relationship between Student table and Outing table .......................................... 29
Figure 9 : Relationship between Warden table and Outing table .......................................... 29
Figure 10 : ERD with complete database view ..................................................................... 30
Figure 11 : Outing Application Form ..................................................................................... 34
Figure 12 : Outing Approval Form ......................................................................................... 35
Figure 13 : Return Time Form ............................................................................................... 36
Figure 14 : Outing Report Print View .................................................................................... 37
Figure 15 : System interface as warden ............................................................................... 38
Figure 16 : System interface as student ............................................................................... 39
Figure 17 : Interface of Student Home Page ........................................................................ 40
Figure 18 : Interface of Outing Logs / View Application Page ............................................... 41
Figure 19 : Interface of Warden Home Page ........................................................................ 42
Figure 20 : Interface of Student Outing Logs Page ............................................................... 43
Figure 21 : Interface of Print Report Page ............................................................................ 44
Figure 22 : Interface of Warden Email Notification Page ...................................................... 45
Figure 23 : Interface of Student Email Notification Page ...................................................... 46
Figure 24 : Our support group in Whatsapp .......................................................................... 92
CHAPTER 1 : PROJECT IDENTIFICATION

1.1 INTRODUCTION

The use of the internet has greatly influenced the pattern of life in society today.
Various parties have explored web technology to assist in the execution of daily tasks. It can
be said that almost all government agencies including educational institutions have used
internet technology as an information storage field. Although there are colleges that have
applied the system online, there are still colleges that have not yet developed a college E-
Outing management system for students who want to go out. This system is designed to help
administrators manage student outing applications.

Dormitory students must fill in the form and send the form to the management no later
than 7 days before the application date. Therefore, the applicant who has submitted the
application form must ensure that the form has been approved. This results in too much time
being taken to apply for outing requests by students. In addition, a lot of time needs to be
taken by the management to approve the student outing request. Furthermore, management
finds it difficult to read details on forms when students handwriting is not good and the
condition of the paper becomes bad when wet. In addition, many hard copies of the form come
out at the guard’s house as the form cannot be destroyed again until at least 5 years for
management reference. The last problem is that it makes it difficult for management to retrieve
data when it is needed. So, as a result of a survey by the hostel management, a computerized
system is necessary to help administrators store such information.

Therefore, the College E-Outing Management System has been developed. The
system was developed to help administrators manage student outing applications anywhere
and anytime. In fact, the system can store students ’personal information. This system will
play a role such as saving student personal information, updating student personal information
and displaying a list of students who have applied for an outing.
1.2 CLIENT BACKGROUND

Kolej Vokasional Datuk Seri Abu Zahar Isnin (known as KVDSAZI) is a vocational college built
on a 40-acre plot of land. KVDSAZI is a vocational college that started in 2014. Efforts to
become an excellent school remain until now. Kolej Vokasional Datuk Seri Abu Zahar Isnin
was the Sekolah Menengah Teknik Jasin (SMTJ) which is located about four kilometers from
Jasin town. The location of this school is located in Bukit Telemong in Simpang Kelubi on an
area of 40 acres of land that used to be a palm oil plantation. Among the villages and
settlements around this school are Kampung Kelubi, Kampung Kesang Tua, Kampung
Kemengkang, Kampung Seri Kesang, Felda Kemendor, Serkam Estate and Air Baruk.

Sekolah Menengah Teknik Jasin is one of 8 technical high schools built under the
fourth Asian Development Bank (ADB) Loan Scheme. This school was first built on 1 October
1997 with an estimated cost of RM29 million and is the fourth technical secondary school in
the state of Melaka.

1.3 CLIENT BUSINESS DESCRIPTION

Vocational college is one of the schools that offers skills training as opposed to academics
(70% vocational & 30% academic). This college was created so that students who are less
interested in academics or students with lower academic achievements can get an education
that can improve their standard of living in the future. The skills they acquire are skills that can
generate money or be able to get a job in the future. Vocational College is one of the colleges
that leads to a skills diploma. Therefore, this vocational college is very suitable for those who
are fond of skills and weak in academics. For general knowledge, this vocational college is
one of the 4-year programs which are 2 years for the Malaysian Vocational Certificate (pre-
diploma or student certificate) while the other 2 years are for the Malaysian Vocational Diploma
(diploma).

Kolej Vokasional Datuk Seri Abu Zahar Isnin (KVDSAZI) offers 9 programs. First, the
Database & Web Application program. The Database and Web Application Program is an ICT
course offered at the Vocational College. This program aims to guide and train, as well as
open up opportunities for the new generation to develop a more effective and useful database
in line with the current technology and the development of online systems that are increasingly
popular in this era. Career opportunities after graduation are Website Developer, Database
System Developer, Data Manager, Website Graphic Designer and Data Analyst.

Second, the Computer Systems & Networks program. This program is designed to
introduce students to the latest computer and networking technologies. This program provides
students with the basics of preparation, maintenance, operation and configuration of computer
systems as well as networks and data storage in addition to administrative management and
information system integration. While this program, students learn practical technology related
to computer systems and networks to ensure they gain in-depth knowledge. In addition to
technical skills, students also learn soft skills to prepare students for the industrial market. Job
opportunities for this program are Information System Officer, System Analyst, Information
System Executive, Computer Security Executive, System Administrator, Network
Administrator, Assistant Engineer, Assistant System Administrator, Computer System
Supervisor, Computer System Technician and Computer & Network System Entrepreneur.

The third program is Banking. This program provides the basics of banking such as
economics, statistics, accounting, banking law, customer service, products, marketing,
processing and collection, loan procurement and ethics in banking. Career opportunities for
this program are clerks, cashiers, working in banks, finance companies, insurance companies
and accountants.

Fourth is the Marketing program. In this program, students can learn the main elements
of the internal and external environment of business, understand the role of shareholders in
business formulation and cover different approaches in the field of management. Marketing
Manager, Marketing Executive, Marketing Consultant, Marketing Researcher, and Marketing
Planner are among the career fields that are currently being pursued.

The fifth program is Retail. This program provides students with the knowledge and
skills of business management in accordance with the requirements of the industry, especially
in the field of retail. Career opportunities for this program are Retail Managers or Supervisors
at supermarkets, outlets, stores or branches. In addition, become a Marketing Executive,
Retail Operations Executive, Customer Service Executive, Human Resource Management
Executive and Entrepreneur.

Sixth, Business program. The program is designed to enhance and enrich students'
knowledge across multiple business disciplines and help to prepare students to meet career
challenges in contemporary business. This is a dynamic field of study for students who want
to develop skills in various studies such as administration, human resource management,
accounting, finance, marketing, insurance, banking and also entrepreneurship. This program
is able to educate and equip students with comprehensive knowledge and skills in related
fields by combining all aspects of business studies and entrepreneurship. Therefore,
graduates have various career options such as Assistant Business Administration Officer,
Assistant Management Officer, Assistant Government Officer, E-Commerce Entrepreneur,
Sales and Marketing Executive, Assistant Human Resource Officer, Business Planner,
Assistant Business Development Officer, Business Researcher, Assistant Officer Marketing,
Assistant Investment Officer, Assistant Operations Officer, Entrepreneur, Insurance Agent,
Assistant Customer Service Officer and Assistant Banking Operations.

The seventh program is Construction Technology. This program provides exposure,

knowledge and skills in the field of construction. The training provided covers the basic works
of building construction starting from the work of planning and preparing plans, estimating
materials, preparing the construction site, construction works including architectural,
mechanical and electrical work up to the completion and handing over of the building.
Graduates of this course will receive a Diploma in Construction Technology. Students who
graduate successfully have bright opportunities to work in the construction sector as a
Construction Technology Technician or Construction Technology Technician Assistant.

Eighth is the Bakery & Pastry program. The pastry arts major provides students with
practical training in food production to develop professionalism and excellence in academics.
Students are developed with skills in bakery and pastry making, cost control, food sanitation
and nutrition as well as marketing knowledge. Hands-on exposure is also coordinated with
conventional academic courses to have an impact on dynamic studies as well as graduates
meeting the requirements of the industry. Job opportunities for this program are Artisan Bread
Baker, Entrepreneur, Cafe or Catering Planner, Pastry Chef, Chocolatier, Bakery Manager
and Cafe or bakery Owner.

The ninth program is Culinary Arts. This program exposes students to kitchen
operations and maintenance, food and restaurant preparation, dessert preparation, eastern
and western cuisine, local cakes, bread, pastries and sweets, food art, halal food preparation
and food management. Students who graduate successfully have bright opportunities to work
as Chefs and Cooks' Assistants in the Hospitality Sector, Restaurant Business Entrepreneurs,
Frozen Food Producer Entrepreneurs, Entrepreneurs in the Field of Serving and Catering,
Working in the Catering Division, Aviation and Shipping Catering. Students can also become
entrepreneurs as Food Shop and Caterer Entrepreneurs.
1.4 ORGANIZATIONAL CHART

Figure 1 : Organization Chart of Kolej Vokasional Datu Seri Abu Zahar Isnin
Figure 2 : Dormitory Management Unit Organization Chart of Kolej Vokasional Datuk Seri Abu Zahar Isnin
1.5 IT UTILIZATION/ORGANIZATION PLANNING

As for the use or use of information technology (IT) at KVDSAZI, there are several
systems that they use to run and operate their business. First, KVDSAZI has an online website
to promote their college, products and services. They use online websites to share and provide
every information about the business such as its background information, programs offered,
and inspiring success of students. In fact, they also use the website to offer students who have
graduated from Penilaian Menengah Rendah or PT3 to enter KVDSAZI.

Next, at KVDSAZI, they only use logbooks and pens to record student outing
information. Then, instead of handwritten records, they keep the logbook for at least 5 years
before disposing of it. Therefore, it is difficult for them to retrieve the data of students who are
out at a certain time if needed.

1.6 PROBLEM STATEMENT

Problem is characterized by a matter or circumstance viewed as unwanted or

destructive and waiting to be managed and survived. Any matter or circumstance that is
unwanted or can really hurt the association is known as the problem. Problem can be in many
structures whether in actual structure or non-physical and brought about by many variables
whether it comes from inside or beyond the association, for example, the occurrence in the
work environment, the information lost, gear glitch and a lot more matters or circumstances
that can be known as a problem in associations. The most terrible circumstance of the problem
is the point at which the significant information is being controlled or taken to structure the
associations.

Based on the information provided by Mr Farhan, the current system is facing problem
as such:

I. Too much time taking to apply for the outing request by students.
As per said, the student needs to get the outing application form at the management
office. The management office is not always available since the staff were busy with
college activities as well. (Z. Ahmad, personal interview, July 18, 2022).
 II. Too much time taking to get the approval for the outing request.
The students then need to submit their form to the warden in charge before they could
go for an outing. Sometimes, the warden is not available and they have to submit it to
the management office and again the same problem occurs where the management
office is always closed and not available.

III. Hard to read the details on the form.

As experience of signing the form, Mr Farhan mentioned that sometimes it was hard
to read the details on the form when the student’s handwriting is not good and the
condition of the paper went bad when it is wet, the ink will also melt away.

IV. Too many hard copies of forms in the guard house.

Currently, there are so many hard copies of outing forms at the guard house. The forms
cannot be destroyed yet until at least 5 years for management references. Plus, to
destroy the papers, they have to burn them all because on the paper students need to
fill up their IC number as well as this is confidential, and it is just a waste to just burn
those papers.

V. Difficult to retrieve data on the logbook system.

Using the logbook also makes it difficult for them to retrieve or get the data when it is
needed. They must go through each page just to find a single record.
1.7 APPENDIX

Figure 3 : Example of KVDSAZI Hostel Outing Log Book

1.8 REFERENCES

Kolej Vokasional Jasin. (2015). Retrieved July 15, 2022, from

http://vochjazz.blogspot.com/

Kolej Vokasional Datuk Seri Abu Zahar Isnin | Data Sekolah di Malaysia. (2021). Daa-
Taa.com. https://myschool.daa-
taa.com/sekolah/Kolej%20Vokasional%20Datuk%20Seri%20Abu%20Zahar%20
CHAPTER 2 : PROJECT INITIATION AND PLANNING

2.1 INTRODUCTION

Project initiation is the main period of the undertaking the board life cycle and in this
stage, organizations choose if the venture is required and the way that is helpful it will be for
them. The two measurements that are utilized to pass judgment on a proposed project and
decide the assumptions from it are the business case and possibility study.

2.2 BASELINE PROJECT PLAN (BPP)

2.2.1 INTRODUCTION

A baseline in project management is an obviously characterized beginning

stage for your venture plan. It is a proper reference to highlight measures and look at
your task's advancement against. This permits you to survey the exhibition of your task
over the long run.

For instance, suppose your project is on track to complete in about a month

and a half. Is that positive or negative? On the off chance that your timetable pattern
has a four-week consummation, you can see that there is an issue, and your group
might have to gain changes in accordance with accelerating your headway.

A project baseline regularly has three parts: timetable, cost, and degree.
Frequently, these three baselines are independently observed, controlled, and
answered to guarantee each is on target. When completely coordinated, it could be
alluded to as a performance measurement baseline (PMB).

A PMB furnishes you with the capacity to effectively screen and oversee what
an adjustment of one part means for the others. For instance, when your baselines are
incorporated, you can rapidly tell what a timetable postpone will mean for project costs.
Be that as it may, numerous associations don't have the devices and cycles expected
to incorporate the three baselines completely.
2.2.2 PROJECT OVERVIEW

Kolej Vokasional Datuk Seri Abu Zahar Isnin collects and records information on
outings using a manual technique. The management of college outing records is made
easier by the planned College E-Outing Management System. College E-Outing
Management System is created utilising a customised prototype model, which includes
phases for gathering requirements, rapid design, prototype development, user
evaluation, prototype refinement, and engineer product. The technology allows the
college to enhance their management process, according to the results of a user
acceptance test based on the finished product.

2.2.3 PROJECT RECOMMENDATION

Currently, KVDSAZI is still using the manual registration for outing activities.
Where students need to fill in their information into a log book. The log book is currently
being placed at the guard house, so students need to queue up and wait for their turn
to fill in the book.

There are a few problems with manual registration. Wardens and guards are
having difficulty retrieving and tracking the student’s records. They need to go through
one page by page to find the records. Next, it is also difficult for the wardens to filter
one data by one data because they need to make a report for every outing activity by
the students.

Lastly, by computerizing the registration hopefully it will reduce the problems

that are currently faced by the college. Because computers will make the flow easier
and smoother, wardens can just filter to search the student’s records.

2.2.4 SYSTEM DESCRIPTION

A system for managing college outings will be developed. Administrators can handle
student outing requests using the technology virtually anywhere at any time. In truth,
the system has the ability to keep the personal data of students. This system will
 perform functions like storing student personal information, updating student personal
information, and showing a list of students who have submitted applications for an
outing.

2.3 SYSTEM OBJECTIVES

● To provide a more secure way to warden to permit their students to go out of

college through a message from register login.
● To help the hostel warden to manage the outing record information.
● To provide a more secure, authenticated and authorized environment to hostel
students regarding their out-in permission which reduces pen paper work,
frauds and also saves time.

2.4 SYSTEM BENEFITS

There are several benefit systems, among which are helping organizations reduce the
space required to store the data and reduction of costs due to more efficient time
management. Besides that, it can provide automatic service between user and system. In
addition, the data which is saved into the database will give the benefit to the administrator in
doing the administrative task. This administrator did not need to update the outing's
information everyday because data which is more reliable.

2.5 SCHEDULE, TIMELINE AND RESOURCE ANALYSIS

In this project, we found a few resources such as:

• Hardware (personal computer, storage box, hard disc)

• Software (cloud, programming)
• Manpower (staff, outsourcing)
• Hard copy (user manual)
2.5.1 GANTT CHART

A gantt chart is a project management tool that visualizes the work completed in a time period relative to the planned time for the work.
Gantt charts help in scheduling, managing and monitoring specific tasks and resources in a project. The chart shows the project
timeline, which includes scheduled and completed work over a period of time. This is our gantt chart for this project :

Figure 4 : Gantt chart for the development of College E-Outing Management System
2.6 APPENDIX

Figure 5 : A user's guide to the College E-Outing System

2.7 REFERENCES

Theory Gold (2020, May 23). Define your system objectives. Box Theory Gold. Retrieved
January 1, 2023, from https://www.boxtheorygold.com/define-your-system-objectives
CHAPTER 3 : PROJECT ANALYSIS

3.1 INTRODUCTION

In this topic, we will discuss the system analysis that consists of the user requirements,
the Entity Relationship Diagram (ERD).

From all the diagrams, we can have a clear picture about the flow for the system
including the data flow and also system flow. By using ERD diagrams, we can also know the
flow for the system from each user that is involved in this system. Next, we can learn the
relationships between the tables that will be added onto the database.

We had a meeting with the hostel management to discuss the user requirements. From
the discussion we can say that we got most of the requirements needed to build this outing
management system.

3.2 SYSTEM REQUIREMENT

There are several requirements for the system. Such a system allows the student to apply for
an outing through the system. The system should be able to overcome the problem where
they can simply apply through the system and don’t have to wait for the management for any
outing forms anymore. Next, the warden is able to approve the outing application at any time.
To enable the warden to approve the student’s outing application at any time and will make
the waiting time for the student lesser. In addition, the system should be able to generate
reports where it enables the management to view or download the outing report for references.
Lastly, good security to control the recorded data. Appropriate security to make the entire
system secure and only allows students to enter their own matrix number to login the system.
3.3 STRUCTURING SYSTEMS REQUIREMENTS: CONCEPTUAL DATA MODELLING

3.3.1 ENTITY RELATIONSHIP DIAGRAM (ERD)

Figure 6 : Entity Relationship Diagram

The diagram above shows the Entity Relationship Diagram (ERD) for this
system. This system has two users which are student and warden. There are three
tables included in the database that work as storing data.

First table is the Student table, this table stores all the student’s data such as
matrix number, name, block, dorm and phone number. Second table is the Warden
table. On this table it stores the warden’s data such as staff id number, name and
phone number. The last table is, Outing table, this table records all the outing activity
by students and updating the outing status that were approved by warden.

The relationship between Student table and Outing table is one to many where
one student can apply for multiple outings and multiple outings can be applied by one
student. Then, the relationship between Outing table and Warden table is many to one,
where multiple outings can be approved by one warden and only one warden is
allowed to approve multiple outing applications.
3.1.2 ENTITY RELATIONSHIP DIAGRAM (ERD) COMPLETE DATABASE VIEW

Figure 7 : ERD with complete database view

3.4 APPENDIX
3.5 REFERENCES

What is Entity Relationship Diagram (ERD)? (n.d.). Visual Paradigm. Retrieved January 1,
2023, from https://www.visual-paradigm.com/guide/data-modeling/what-is-entity-
relationship-diagram/

Rodina, D. (n.d.). Foreign Key (Entity Relationship Diagram) - Software Ideas Modeler.
Software Ideas Modelers. Retrieved January 1, 2023, from
https://www.softwareideas.net/erd-foreign-key

Rodina, D. (n.d.-b). Primary Key (Entity Relationship Diagram) - Software Ideas Modeler.
Software Ideas Modelers. Retrieved January 1, 2023, from
https://www.softwareideas.net/erd-primary-key
CHAPTER 4 : DESIGN

4.1 INTRODUCTION

In system development, designing is also one of the important steps in any project
implementation. System design is the process of defining elements of a system that includes
modules, architecture, components and their interfaces and data. With design, it will help to
show the logical idea of the user interface as well as the database design.

For this project, we are using phpMyAdmin as our database. PhpMyAdmin is a web
application written primarily in PHP that uses MySQL to manage the database. MySQL acts
as the database management system and also known as database server.

Design model for the database shows the logical structure of the database that
includes the relationship between the tables and to determine how data will be stored and
accessed. There are many types to represent the database models. On this assignment, we
will use an entity relationship diagram (ERD) to represent the database design.

ERD also known as entity relationship model which is a graphical representation that
depicts relationships among people, objects, places and many more. It also captures the
relationships between entities from multiple tables from the database. The relationship can be
shown as one-to-one, one-to-many or many-to-many.
4.2 DATABASE DESIGN

4.2.1 CONCEPTUAL DATA MODEL

For this project, we named our database as eouting_system, which brings the symbolic
to the system which is College e-Outing Management System.

Entities:
i. Student
ii. Warden
iii. Outing

Relationships:
i. Students apply for an outing application.
- One student can apply many outing application (1:M)
- One outing application can be applied by multiple student (1:M)

Figure 8 : Relationship between Student table and Outing table

ii. Warden approved outing application.

- One Warden can approve multiple outing application (1:M)
- Multiple outing application can be approved by one warden (M:1)

Figure 9 : Relationship between Warden table and Outing table

4.2.2 RELATIONAL DATA MODEL

Figure 10 : ERD with complete database view

4.3 DATA DICTIONARY

Table Name Attributes Contents Type Format Required Primary Key Extra
(PK) /
Foreign Key
(FK)
Student Matrix_No Student’s Integer (10) 999… YES PK N/A
matrix number
Student_Name Student’s Varchar (50) xxxxxxx… YES N/A N/A
name
Password Student’s login Varchar (255) xxxxxxx… YES N/A MD-5
password Encrypted
Email Student’s Varchar (255) xxxxx@xxx.. YES N/A N/A
email
Phone_No Student’s Varchar (255) 9999… YES N/A N/A
phone number
Block Student’s Varchar (15) xxxxxxx… YES N/A N/A
block
Dorm Student’ dorm Varchar (5) xxxx.. YES N/A N/A
Warden Staff_ID Warden’s ID Integer (10) 999… YES PK N/A
number
 Warden_Name Warden’s Varchar(50) xxxxxxx… YES N/A N/A
name
Password Warden’s Varchar (255) xxxxxxx… YES N/A MD-5
login Encrypted
password
Phone_No Warden’s Varchar (255) 9999… YES N/A N/A
phone number
Email Warden’s Varchar (255) xxxxx@xxx.. YES N/A N/A
email
Outing Outing_ID Outing ID Integer (20) 999… YES PK Auto
Increment
Matrix_No Student’s Integer (10) 999… YES FK N/A
matrix number
Staff_ID Warden’s ID Integer (10) 999… YES FK N/A
number
Student_Name Student’s Varchar (50) xxxxxxx… YES N/A N/A
name
Outing_Date Outing date Date YYYY-MM-DD YES N/A N/A
Outing_Time Outing time Time (6) HH-MM-SS YES N/A N/A
Outing_Location Outing Varchar (50) xxxxxxx…. YES N/A N/A
location
Reason Reason for Text xxxxxxxx…. YES N/A N/A
outing
Return_Date Return date date YYYY-MM-DD YES N/A N/A
Return_Time Return time Time (6) HH-MM-SS YES N/A Null
Approval_Status Outing status Varchar (10) xxxxxxxx…. YES N/A N/A
4.4 FORMS AND REPORT DESIGN

4.4.1 Outing Application Form

Form: Student Outing Application Form

User: Student
Task: Student key in their outing details and submit the application
System: Web Application
Processes:
- Student submit new outing application
- Warden receive email update as notification

Sample:

Figure 11 : Outing Application Form

4.4.2 Outing Approval Form

Form: Outing Approval Form

User: Warden
Task: Warden update the outing status
System: Web Application
Processes:
- Warden update outing application
- If approve, will show the status as Approved
- If rejected, will show the status as Rejected
- If no update, will show the status as Pending

Sample:

Figure 12 : Outing Approval Form

4.4.3 Return Time Form

Form: Return Time Form

User: Student
Task: Student update their return time on outing logs table
System: Web Application
Processes:
- Student update their return time
- Return button will be disable if the status of the outing is Pending
- Return button will be enable if the status of the outing is Approved or Rejected

Sample:

Figure 13 : Return Time Form

4.4.4 Outing Report

Report: Student Outing Logs

User: Warden
Task: Warden prints the student outing logs report
System: Web Application
Processes:
- Warden clicks on the print button on Student Outing Logs page
- Warden clicks on print this page for printing

Sample:

Figure 14 : Outing Report Print View

4.5 INTERFACE DESIGN

4.5.1 Login Page

Interface: Login Page

User: Warden & Student
Expected Behaviour:
i. Users select their role.
ii. Warden login using staff id and password.
iii. Student login using matrix id and password.
iv. Login button
System: Web Application

Sample:
i. If role as Warden

Figure 15 : System interface as warden

ii. If role as Student

Figure 16 : System interface as student

4.5.2 Student Home Page

Interface: Student Home Page

User: Student
Expected Behaviour:
i. Students are able to view their name, matrix number, phone number, block and
dorm on top of the website.
ii. Student able to key in outing application form (outing date, outing time, return
date, location and reason)
iii. Student able to submit their outing application
System: Web Application

Sample:

Figure 17 : Interface of Student Home Page

4.5.3 Outing Logs / View Application Page

Interface: Outing Logs / View Application Page

User: Student
Expected Behaviour:
i. Students are able to view their name, matrix number, phone number, block and
dorm on top of the website.
ii. All outing applications that have been submitted will be displayed on this page.
iii. Applications with Approved, Rejected and Pending status will be displayed on
this page.
iv. Table list will display maximum 5 data and requires the user to click on the next
page to view more.
v. Students are able to update their return time by clicking on the “I am back”
button.
vi. “I am back” button will only be enabled for outing statuses as “Approved”.
vii. “I am back” button will be disabled for outing statuses such as “Pending” or
“Rejected”.
viii. Return time will be displayed in Red if students update their return time after 6
PM onwards.
System: Web Application

Sample:

Figure 18 : Interface of Outing Logs / View Application Page

4.5.4 Warden Home Page

Interface: Warden Home Page

User: Warden
Expected Behaviour:
i. Wardens are able to view their name, staff id and phone number on top of the
website.
ii. Warden able to view all new outing applications
iii. New outing application status will always be on “Pending” status.
iv. Table list will display maximum to 3 data due to more data displayed for each
application and requires the user to click on the next page to view more.
v. Warden is able to update the new outing application by clicking on “Approve”
or “Reject” status on the Status column.
vi. The updated outing application will automatically be removed from the New
Outing Applications table and will be displayed on the Student Outing Logs
page.
System: Web Application

Sample:

Figure 19 : Interface of Warden Home Page

4.5.5 Student Outing Logs Page

Interface: Student Outing Logs Page

User: Warden
Expected Behaviour:
i. Wardens are able to view their name, staff id and phone number on top of the
website.
ii. Warden able to view all student outing logs.
iii. All outgoing applications with statuses as “Pending”, “Approved” and “Rejected”
will be displayed on this page.
iv. Table list will display maximum 5 data and requires the user to click on the next
page to view more.
v. Warden is able to click on the “Print” button to print the outing log for reporting
purposes.
System: Web Application

Sample:

Figure 20 : Interface of Student Outing Logs Page

4.5.6 Print Report Page

Interface: Print Report Page

User: Warden
Expected Behaviour:
i. Warden clicks on the Print button on the Student Outing Logs page.
ii. Pop up with outing logs will appear.
iii. All the outing logs will be displayed as table view.
iv. Warden clicks on “Print” this page” button to start connecting to printer and
printing.
System: Web Application

Sample:

Figure 21 : Interface of Print Report Page

4.5.7 Warden Email Notification Page

Interface: Warden Email Notification Page

User: Warden
Expected Behaviour:
i. Once student submitted their outing application, warden will receive an email
notification
System: Web Application

Sample:

Figure 22 : Interface of Warden Email Notification Page

4.5.8 Student Email Notification Page

Interface: Student Email Notification Page

User: Student
Expected Behaviour:
i. Students will receive an email notification update once the warden has updated
their outing application.
System: Web Application

Sample:

Figure 23 : Interface of Student Email Notification Page

4.6 APPENDIX
4.7 REFERENCES

What is Systems Design? Definition of Systems Design, Systems Design Meaning. (2022,
December 13). The Economic Times. Retrieved December 13, 2022, from
https://economictimes.indiatimes.com/definition/systems-design

Biscobing, J. (2019, September 11). Entity Relationship Diagram (ERD). Data Management.
Retrieved December 13, 2022, from
https://www.techtarget.com/searchdatamanagement/definition/entity-relationship-
diagram-ERD

What is a Database Model. (n.d.). Lucidchart. Retrieved December 13, 2022, from
https://www.lucidchart.com/pages/database-diagram/database-models

phpMyAdmin vs MySQL - What is the difference? (2018, October 9). TablePlus. Retrieved
December 13, 2022, from https://tableplus.com/blog/2018/10/phpmyadmin-vs-
mysql.html
CHAPTER 5 : IMPLEMENTATION

5.1 INTRODUCTION

College E-Outing Management System is a system that was developed using System
Development Life Cycle (SDLC) methodology. SDLC consists of multiple phases.
Implementation is one of the crucial phases in using SDLC methodology approach. In this
stage the system will be installed in the production environment. This will include the testing
phase and user support.

This chapter includes the program or coding design, testing and installation. The
programming languages that were used to develop the system are PHP for functions and
HTML and CSS for design and styling the system. After implementation, we provide the
system support through WhatsApp group chats that includes the client’s users and our support
team.

5.2 CODING DESIGN

Below is the coding design used in development of College E-Outing Management System :

5.2.1 db_conn.php
5.2.2 index.php
5.2.3 check_login.php
5.2.4 student_home.php
5.2.5 submit_application.php
5.2.6 outing_logs.php

5.2.7 update_return_time.php
5.2.8 warden_home.php
5.2.9 new_students_logs.php
5.2.10 application_approval_action.php
5.2.11 logs_history.php

5.2.12 logout.php
5.3 TESTING

During the testing phase, we have created multiple data for users to continue with testing.

Below are the details for testing purpose:

Student Login Credentials :

No. Student Name Matrix No Password Email Email
(Login ID) Password
1. Nur Hanis Binti 1001 1234 usereoutingsyst Outing_123!
Zulkanain [email protected]

Warden Login Credentials :

No. Warden Name Staff ID Password Email Email
(Login ID) Password
1. Nur Hanis Binti 2001 1234 usereoutingsyst Outing_123!
Zulkanain [email protected]
5.4 INSTALLATION

5.4.1 Database Setup

Step 1: Go to https://db.ricomtr.com/

Step 2: Login to database with login credentials provided

Step 3: Choose database and click on “Import”

Step 4: Choose “.sql” file to import

Step 5: Scroll down and click on “Import” to continue importing the file.

5.4.2 Server Setup

Step 1: Download Core FTP LE and continue the installation process

Step 2: Site Manager pop up will appear, key in the details on (Site Name, Username,
Password, Port as 21) and click on “Connect”
 Step 3: Drag and drop file on the right section

Step 4: Check the system on the browser

5.5 USER GUIDE

A user manual is a guidebook that is given to a user to assist in the effortless use of a
certain system, product, or service. It is often referred to as a user handbook or an instruction
manual. These publications include in-depth details about operations, standards and
guidelines, troubleshooting manuals, features and others.
 USER GUIDELINE
College E-Outing Management
System
 Contents

Overview .............................................................................................................. 3
STUDENT FLOW .................................................................................................... 4
Login Student ....................................................................................................... 5
Outing Application ................................................................................................ 7
View Application .................................................................................................. 8
Update Return Time ............................................................................................. 9
Back to Home ..................................................................................................... 10
Logout ................................................................................................................ 11
WARDEN FLOW .................................................................................................. 12
Login Warden ..................................................................................................... 13
Outing Approval ................................................................................................. 15
Outing Report ..................................................................................................... 17
Back to Home ..................................................................................................... 21
Logout ................................................................................................................ 22
 Overview

Kolej Vokasional Datuk Seri Abu Zahar Isnin collects and records information on outings using
a manual technique. The management of college outing records is made easier by the planned
College E-Outing Management System. College E-Outing Management System is created utilising a
customised prototype model, which includes phases for gathering requirements, rapid design,
prototype development, user evaluation, prototype refinement, and engineer product. The technology
allows the college to enhance their management process, according to the results of a user
acceptance test based on the finished product.

The function of College E-Outing Management System is students apply for an outing
application. While the warden can approve outing application.
Login Student

1. Access using the URL as per below :

https://ricomtr.com/8ag4/outing-system-group-1/index.php

2. Login as Student.
3. Kindly key in the Matrix No and Password. The default logon credential has been created for
all nominated users.
4. Click on Login button.
5. After key in login detail, screen for apply outing will display.
Outing Application

On this screen students can apply outing easily.

1. Students only need to select the date of outing & return, time of outin, location and reason.
2. Then click on the Submit button.

3. After submitting the application, a message will appear stating that the application has been
successfully submitted.
 View Application

Students can view their application.

1. Students need to click on View Application button.

2. Screen Outing Logs will be display.

Update Return Time

Once warden approve, students’ needs update their return time on outing logs table.

• Return button will be disable if the status of the outing is Pending or Rejected
• Return button will be enable if the status of the outing is Approved

1. Students need to click on I am back button to update return time.

2. After click on the button, the return time will update.

 Back to Home

Students can back to home menu for submit another application.

1. Students need to click on Home button.

2. Screen for apply outing will be display.

Logout

1. To logout, student just need to click on Logout button

2. After clicking on logout button, the main login page will be displayed
Login Warden

1. Access using the URL as per below :

https://ricomtr.com/8ag4/outing-system-group-1/index.php

2. Login as Warden.
3. Kindly key in the Staff ID and Password. The default logon credential has been created for
all nominated users.
4. Click on Login button.
5. After key in login detail, list of outing application will display.
Outing Approval

On this screen warden can approve outing easily. Warden only needs to click on Approve or Reject
button.

Example : Approve

1. Warden clicks on Approve button

2. A successfully approve message will appear

Example : Reject

1. Warden clicks on Reject button

2. A successfully reject message will be displayed

 Outing Report

On this screen warden can view student outing logs & prints the student outing logs report.

1. Click on Student Outing Logs button

2. List of student outing logs will display

3. Click on Print button for print report.
4. Print page will appear. Just click on Print this Page button
5. Set on destination printer, copies, layout. Then click on Print button
 Back to Home

Warden can back to home menu for approve another application.

1. Warden just needs to click on Home button.

2. Screen for outing approval will be display.

Logout

1. To logout, warden need to click on Logout button.

2. After clicking on logout button, the main login page will be displayed.
5.6 USER SUPPORT

User support is value added from us to support all users e-Outing Management System. We are ready to respond, assist and resolve
problems faced by users in a timely manner depending on the type and complexity of the request.

Sample :

Figure 24 : Our support group in Whatsapp

5.7 CONCLUSION

e-Outing Management System will provide a lot of benefits and advantages to the
students & wardens. The use of technology can strengthen the systems and make it very
robust. All issues which arose in the previous manual system will be resolved through the
implementation of the new system.

There are several advantages to using benefit systems, some of which include
assisting organisations in reducing the amount of space needed to keep data and cost savings
through more efficient time management. It can also offer automated service between the user
and the system. The data that is recorded in the database will also help the administrator while
doing administrative duties.
5.8 APPENDIX
5.9 REFERENCES

Martin, M. (2022, December 24). Software Development Life Cycle (SDLC) Phases &
Models. Guru99. Retrieved January 3, 2023, from https://www.guru99.com/software-
development-life-cycle-tutorial.html

What Is the Software Development Life Cycle (SDLC) and How Does It Work? | Synopsys.
(n.d.). Retrieved January 3, 2023, from https://www.synopsys.com/glossary/what-is-
sdlc.html

CNET. (n.d.). Core FTP LE. Download.com. Retrieved January 3, 2023, from
https://download.cnet.com/Core-FTP-LE/3000-2160_4-10195752.html