TUP ParkWise: Parking Monitoring System for Technological
University of the Philippines - Manila
Shanne Marvin F. Calimlim
College of Science – Computer Studies
Technological University of the Philippines – Manila
Manila, Philippines
shannemarvin.calimlim@tup.edu.ph
Jeanesa T. Dugang
College of Science – Computer Studies
Technological University of the Philippines – Manila
Caloocan City, Philippines
jeanesa.dugang@tup.edu.ph
1.​ PROJECT OVERVIEW
1.1​ Project Name
●​ TUP ParkWise
1.2​ Description
TUP ParkWise is a parking monitoring system for
the Technological University of the Philippines
(TUP) that provides real-time updates on available
parking spaces. It helps users save time by
allowing them to check parking availability before
going to the campus, reducing unnecessary trips
when no spaces are open. The system enhances
campus security by tracking vehicles entering and
exiting, monitoring parking activities, and recording
how long each vehicle stays. With a QR code
verification system, only authorized vehicles can
access the parking areas, adding an extra layer of
safety. TUP ParkWise is designed to make parking
management simple and efficient while improving
convenience, security, and traffic flow for students,
staff, and visitors.
1.3​ Goals and Objectives
Goals
●​ To provide a real-time parking monitoring
system that improves the convenience and
efficiency of parking management at TUP
●​ To track vehicles entering and exiting
campus, ensuring only authorized vehicles
can park
●​ To allow users to check parking availability
before arriving, reducing unnecessary trips
to campus
Objectives​
●​ Display live updates of available parking
spaces for users to check before heading to
the campus
●​ Implement a QR code system for verifying
authorized vehicles and controlling access
to parking spaces
●​ Track when vehicles, enter, exit, and how
long they stay to improve security.
Xyrus Dylan A. Folloso
College of Science – Computer Studies
Technological University of the Philippines – Manila
Cavite, Philippines
xyrusdylan.folloso@tup.edu.ph
●​ Provide administrators with tools to easily
monitor and manage parking activities on
campus
2.​ SYSTEM ARCHITECTURE
2.1​ Components
●​ Frontend
Technologies Used:
1.​ HTML (Hyper Text Markup Language) –
Used to structure the content of the web
pages, including sign up form, parking ticket,
dashboards, and buttons handler.
2.​ CSS (Cascading Style Sheets) – Used to
style the layout and appearance of the web
pages including colors, fonts, layout, and
device responsiveness.
3.​ JavaScript – Used to add interactivity to the
pages, such as validating forms, real-time
duration timer, displaying local time, and
updating the content dynamically of each
page.
Interfaces
1.​ User Interface
Allows the users to view real-time available
parking spaces inside the university and to
generate their personalized parking ticket via
QR code.
Key features:
●​ Public viewing of available parking spaces
for both vehicle types such as cars and
motorcycles.
●​ Personalized QR code as parking ticket.
2.​ Admin Interface
Enables the administrators and the security
personnel specifically to monitor the vehicles
inside the campus.
Key features:
●​ The user information and vehicle details
and displayed after QR code scanned.
●​ The duration of the vehicle inside the
campus is displayed on the dashboard.
●​ The parking records are saved on the
history tab after a transaction.
●​ Backend
Technologies Used:
1.​ Node.js (JavaScript) – Used to handle
server-side logic, process real-time updates,
manage parking data, and communicate with
the database.
Key Responsibilities
1.​ Get all parking logs
This host fetched all the parking logs or
parking transactions and displayed it on the
history tab. Meanwhile, all the transactions
that are not processed yet are displayed on
the dashboard.
2.​ Updating parking logs
This host updates the logs from the dashboard
when the vehicle exits the campus. It provides
time out, complete duration time, and security
personnel that are in-charge.
3.​ Get the security information
This host is responsible for getting the security
information for verification when the personnel
logged in. This is also responsible for
displaying the security information in each
parking transaction recorded.
4.​ Get the user information
This host is responsible for getting the user
information in each parking transaction
whether entering or exiting the campus.
5.​ Creating security personnel accounts
This host is responsible for creating new
accounts for new security personnel that are
on duty.
6.​ Creating new user accounts
This host is responsible for creating new
accounts for new users who desire to get their
personalized parking ticket.
7.​ Handling the available parking spaces
This host is responsible for handling the
available parking spaces for all vehicle types –
car vehicle and motor vehicle. Additionally, it is
responsible for displaying the total number of
occupied spaces. This host is utilized by the
security personnel.
●​ Database
Technology Used:
1.​ MongoDB Atlas – Used to store the user
parking logs, user information, vehicle details,
security personnel information, and parking
history records.
Key tables
1.​ Users: Stores user information, such as
names, contact details, and login credentials.
2.​ Vehicles: Contains vehicle details, including
type (car or motorcycle), license plate number,
and user type.
3.​ Parking Logs: Records parking transactions,
including entry and exit times, duration, and
associated user and vehicle information.
4.​ Security Personnel: Manages information
about security staff, including login credentials
and assigned duties.
5.​ Parking spaces: Tracks the status of total
number of vacant spaces and occupied
spaces.
6.​ Parking History: Archive past parking
transactions for reference and reporting.
●​ APIs
Technology Used:
1.​ Postman - Used for testing and validating API
endpoints, ensuring the backend services
handle requests and responses correctly and
efficiently.
3.​ FUNCTIONAL REQUIREMENTS
3.1​ User Features
1.​ Public Viewing of Available Parking
Spaces:
Users can view the total number of available
parking spaces on campus. They can also see
separate counts for free spaces for cars and
motorcycles, which helps them to quickly
decide where to park.
2.​ Sign-Up Feature:
A sign-up button allows users to create an
account by inputting their personal
information, including name, contact number,
vehicle type, brand and model, plate number,
vehicle color and their driver type (e.g.,
Student, Faculty, Visitor).
3.​ Personalized Parking Ticket with QR Code:
Users will receive a personalized parking
ticket containing a QR code after they signed
up, which they can use for verification when
entering or exiting the parking area. This
feature ensures only authorized vehicles are
granted access to the parking spaces.
3.2​ System Features
1.​ Login Feature for Admins:
A login feature is implemented for admins
(security personnel) to ensure restricted
access to the admin features of the system.
Only authorized personnel will be able to
access the features for security purposes.
2.​ Set Available Parking Spaces:
Admins can set the available parking space for
motorcycles and cars, and these updates will
be reflected in the user’s public viewing of
available parking spaces.
3.​ Admit and Exit Vehicles:
Admins can admit vehicles into the parking
area and exit them by scanning the parking
ticket of the user (QR code) ensuring smooth
flow and access.
4.​ Quick Monitoring through Dashboard:
Admins can monitor parking activities in
real-time through dashboard, improving
security and enabling faster response.
5.​ Monitor Vehicle Duration:
Admins can track the duration of each
vehicle’s stay on the university premises,
ensuring accurate time records for security
and management purposes.
6.​ Digital Records of Vehicle History:
Admins can access digital records of vehicle
entries and exits, allowing them to track the
history of all vehicles entering and leaving the
parking area.
4.​ NON-FUNCTIONAL REQUIREMENTS
4.1​ Performance
●​ Response Time
The system ensures that core actions, such as
checking parking availability, scanning QR
codes, and updating logs, are processed
within 150ms under normal conditions.
●​ Concurrent Usage
The system supports up to 150 users
interacting simultaneously, with scalability to
accommodate up to 300 users during peak
hours, ensuring smooth operation.
●​ Service Availability
TUP ParkWise aims for a service availability
rate of 99.9%, ensuring minimal downtime and
consistent performance, supported by a robust
backend infrastructure.
●​ Error Recovery
The system efficiently handles errors, such as
failed data entries or QR code scans, by
providing user feedback and recovery options
within 2 seconds to maintain a seamless user
experience.
4.2​ Security
●​ Data Confidentiality
User data, including account details and
vehicle information, is encrypted using secure
hashing algorithms to protect sensitive
information such as passwords.
●​ User Authentication
The system implements role-based access
control, allowing users, admins, and security
personnel to perform only their authorized
functions,
ensuring
proper
access
management.
●​ Safe Data Practices
TUP ParkWise adheres to the Data Privacy
Act of 2012, ensuring that user information is
handled ethically and securely to protect
users' privacy rights.
●​ Input Validation
All user inputs undergo thorough validation to
prevent security risks, ensuring only clean and
verified data is entered into the system,
mitigating potential vulnerabilities.
4.3​ Scalability
●​ Expanding User Base
The system is designed to support up to
10,000 registered users and can manage over
20,000 parking transactions, ensuring smooth
performance even with future growth.
●​ Scalable Resource Management
TUP ParkWise employs strategies to efficiently
manage large data loads, maintaining optimal
query and request response times under
varying levels of user activity.
●​ Cloud Hosting
Deployed on a scalable cloud infrastructure,
the system can dynamically adjust resources
based on traffic demands, ensuring consistent
performance during peak usage periods.
●​ Modular Design
The system features a modular architecture,
allowing for seamless integration of future
enhancements, such as advanced analytics or
additional user interfaces, without impacting
existing functionalities.
5.​ DESIGN DETAILS
5.1​ Database Design
The TUP ParkWise system database design
comprises five primary tables: user, security_personnel,
logs, parking_ticket, and parking_spaces. Each table
stores critical data for managing and monitoring the
parking operations within the Technological University
of the Philippines (TUP). This document provides an
overview of each table and the relationships between
them to support the system's functionality.
Figure 1. Entity Relationship Diagram
1.​ User Table
The user table contains personal and vehicle
information of users who access the parking system.
Key attributes include:
Primary Key: user_id
Attributes: first_name, middle_name, last_name,
extension_name, contact_no, date_of_birth, sex,
plate_no, vehicle_type, vehicle_color, vehicle_brand,
vehicle_model, user_type
This table is crucial for identifying the users and their
vehicles, enabling personalized services such as ticket
generation and parking space allocation.
2.​ Security Personnel Table
The security_personnel table holds the information of
security staff managing the parking system. Key
attributes include:
Primary Key: agent_id
Attributes: first_name, middle_name, last_name,
extension_name
This table ensures that all parking activities are
monitored and recorded by authorized personnel,
facilitating accountability and security.
3.​ Logs Table
The logs table records the entry and exit events of
vehicles in the parking area. Key attributes include:
Primary Key: log_id
Foreign
Keys:
agent_id
(references
security_personnel), user_id (references user)
Attributes: plate_no, vehicle_type, contact_no, time_in,
time_out,
al-time updates on available spaces, and generating
reports on parking activities.
4.​ Parking Ticket Table
The parking_ticket table stores data related to parking
tickets issued to users. Key attributes include:
Primary Key: user_id (references user)
Attributes: user_name, plate_no, user_type
This table helps in associating issued tickets with users
and their vehicles, streamlining the parking entry and
exit process.
5.​ Parking Spaces Table
The parking_spaces table maintains a real-time count
of available and occupied parking slots. Key attributes
include:
Primary Key: count_id
Attributes: count_car, count_motor,
occupied_count_car, occupied_count_motor
This table is vital for updating the dashboard with the
current parking status, assisting both users and security
personnel in making informed decisions about parking
availability.
5.2​ User Interface (UI) Design
Figure 3. User Sign Up
​
Next is Figure 3, which shows the User Sign-Up interface. In
this section, you will need to fill out your personal
information, including your first name, middle name, last
name, extension name, contact number, birthdate, and sex.
You will also be required to provide important details about
your vehicle, such as the plate number, vehicle type (Car or
Motorcycle), color, brand, model, and user type (Student,
Faculty, Visitor)​
Figure 2. User Public Viewing of Available Parking
Spaces​
In Figure 2, the box in the middle displays the total number
of available parking spaces. Below it, you can view the
available spots for cars and motorcycles. To see the updated
number of available spaces, click the reload button. There is
also a 'Sign Up' button, which allows you to register and
receive a parking ticket that you will need to enter and exit
the premises
Figure 4. User Personalized Parking Ticket​
Figure 4 shows the User Personalized Parking Ticket. This
interface will serve as your parking ticket, which you will use
to enter and exit the premises. It will be displayed after you
have created your account by signing up.
Figure 7 is where the security personnel can handle the car
parking space. The security personnel can specify how many
cars can be parked inside the campus.
Figure 5. Security Personnel Homepage
Figure 5 shows the Security Personnel Homepage. This
interface is responsible for the login feature, which security
personnel need to access the other features of the system.
Figure 8. Motorcycle Parking Spaces Handler
Figure 8 is where the security personnel can handle the
motorcycle parking space. The security personnel can
specify how many motorcycles can be parked inside the
campus.
Figure 6. Security Personnel Home Dashboard
Figure 6 shows the Security Personnel Home dashboard.
This interface will be the landing page after the security
personnel logged in to the system.
Figure 9. Scan QR for vehicle admission and exit
verification
Figure 9 is the Scan QR. This is what the security personnel
will use for parking admission and parking exit verification of
the drivers.
Figure 10. Vehicle Admission
Figure 7. Car Parking Spaces Handler
For the Vehicle Admission (Figure 10), this is what it will look
like if the admin scans the QR code of the driver and if the
driver is not currently parked in the campus parking lot.
Figure 11. Vehicle Exit Verification
For the Vehicle Exit Verification (Figure 11), this is what it will
look like if the admin scans the QR code of the driver and if
the driver is currently parked in the campus parking lot.
Figure 12. Security Personnel Dashboard​
Figure 12 is the Security Personnel Dashboard. This shows
the current vehicles parked inside the campus. It also shows
what is the plate number of the vehicle, driver type, vehicle
type, their contact number, the time they were admitted,
duration of how long they are parked in the slot, what gate
they were admitted, who admitted them, and the purpose of
their visit.
Figure 13. Parking History
Figure 13 (Parking History) shows the history of the vehicles
that have entered and exited the campus. Just like the
dashboard, it shows what is the plate number of the vehicle,
driver type, vehicle type, their contact number, the time they
were admitted, the time they exited, duration of how long
they were parked in the slot, what gate they were admitted
and exited, who admitted them, and the purpose of their visit.
Figure 14. Log out Handler
For figure 14, it is the Log out handler. It is used for the
security personnel to log out their accounts so that no other
security personnel or any unauthorized personnel can use
their accounts.
6.​ DEVELOPMENT PROCESS
6.1​ Methodology
Agile methodology suits the TUP ParkWise system
due to its flexibility, iterative development, and
emphasis on user feedback. The system
incorporates various features such as real-time
parking updates, user sign-up, and personalized
tickets, all of which require regular testing and
adjustments. Agile allows for the incremental
delivery of functional features, enabling continuous
improvement based on feedback from users and
admins. This iterative process ensures that issues
can be addressed early, and new features can be
added as the project progresses. Additionally, Agile
fosters collaboration and ongoing communication
within the development team, making it ideal for a
system designed to meet the dynamic needs of
students, faculty, and security personnel.
6.2​ Tools and Technologies
●​ Programming Languages
The TUP ParkWise system utilized JavaScript
for both frontend and backend functionality.
HTML and CSS were used to structure and
style the user interface, ensuring it was
visually appealing and user-friendly. MongoDB
was employed to store and manage the
system's data efficiently.
●​ Frameworks
For the frontend, Bootstrap was used to
provide pre-built components, creating a
responsive, mobile-friendly interface. On the
backend, Node.js was used to build the
server-side logic, enabling fast processing of
requests and improving overall system
performance.
●​ Version Control
Git: The team used Git for version control to
track changes in the codebase, ensuring that
all modifications were documented and
reversible if necessary. This allowed the team
to maintain a clean, organized development
workflow.
GitHub: GitHub served as the remote
repository for the project, enabling team
members to collaborate efficiently. It provided
a platform for storing the project’s code,
managing branches, and conducting code
reviews, while also facilitating version tracking
across multiple contributors.
6.3​ Testing​
​
For testing, several processes were
carried out to ensure the proper functionality of the
system. The team scanned QR codes multiple
times to check if the system correctly recognized
when a vehicle entered or exited. We tested
whether the QR code was readable and if the
duration timer started running after admitting a
vehicle into the system. Additionally, the team
verified if the system properly saved the records in
the history for future reference.
In terms of backend testing, Postman was
used to test the system's APIs. The team made
API requests to ensure that the server-side
functionality was working as expected, including
checking if the correct data was returned and if the
server was processing requests properly. This
allowed for efficient debugging and ensured the
backend features were fully operational.
7.​ DEPLOYMENT
7.1​ Environment Setup
●​ Hosting Platform: TUP ParkWise is deployed
on Netlify, a cloud-based hosting service that
supports continuous deployment and
scalability.
●​ Version Control: The source code is
managed using Git and hosted on GitHub,
providing a reliable and collaborative
environment for version control and code
management.
●​ Dependencies: Ensure that all project
dependencies and build tools are properly
configured in the project’s package.json file for
seamless deployment.
7.2​ Deployment Process
●​ Linking GitHub Repository
The GitHub repository containing the TUP
ParkWise source code is linked to Netlify. This
allows automatic deployment of the application
whenever updates are pushed to the main
branch.
●​ Build Settings
Configure the build settings in Netlify by
specifying the build command (e.g., npm run
build) and the publish directory (e.g., dist/ or
build/) where the production-ready files are
located.
●​ Continuous Deployment
Netlify is set up to monitor the GitHub
repository for any changes. Upon detecting
new commits, it automatically triggers the build
process and deploys the updated version of
TUP ParkWise.
●​ Environment Variables
Secure environment variables are configured
in Netlify to store sensitive information, such
as API keys and database connection strings,
ensuring they are not exposed in the
codebase.
●​ Testing and Monitoring
After deployment, the system undergoes
thorough testing to ensure that all features
work as expected. Performance and uptime
are monitored using Netlify’s analytics tools to
ensure a smooth user experience.
●​ Rollback Plan
In case of deployment issues, Netlify’s
versioning feature allows for easy rollback to a
previous stable version, minimizing downtime
and user disruption.
8.​ APPENDIX
8.1​ Glossary
1.​ Admin: The security personnel or authorized
users who have access to manage the parking
system, monitor vehicle entries and exits, and
update parking spaces.
2.​ Backend: The server-side portion of the
system responsible for handling requests,
parking spaces.
3.​ Bootstrap: A popular front-end framework
used to design responsive, mobile first
websites. It provides pre-built components,
such as buttons and forms, that speed up the
development process.
4.​ CSS (Cascading Style Sheets): A stylesheet
language used to describe the presentation of
web pages, including layout, colors, and fonts.
It works alongside HTML to make the front end
visually appealing.
5.​ Database: A system used to store, manage,
and retrieve data. In this case, MongoDB is
used to store vehicle records, parking space
availability, and user information.
6.​ Dashboard: A visual interface for the admin
(security personnel) to monitor parking
activities, including vehicle entry, exit, and
available parking spaces.
7.​ Front-end: The client-side interface of the
system that users interact with. It includes the
website’s design, layout, and functionality,
developed using HTML, CSS, and JavaScript.
8.​ Git: A version control system that tracks
changes in the codebase, allowing developers
to manage different versions of the project and
collaborate efficiently.
9.​ Github: A platform used for remote version
control and collaboration on the TUP ParkWise
project, where the codebase is stored and
managed.
10.​ HTML (Hypertext Markup Language): The
standard language used to create the structure
and content of web pages. It defines elements
like headings, paragraphs, links, and images
on the front end.
11.​ MongoDB: A NoSQL database used in the
system to store and retrieve data related to
user profiles, vehicle records, and parking
space availability.
12.​ Node.js: A JavaScript runtime environment
used to build the backend server-side logic of
the TUP ParkWise system.
13.​ Parking Space Availability: Real-time
information about the number of available
parking spaces for cars and motorcycles within
the university premises.
14.​ Parking Ticket: A personalized ticket,
generated through the system after sign-up,
containing a QR code that users can scan for
vehicle entry and exit.
15.​ Postman: A tool used for testing backend
APIs. It allows developers to send requests to
the server, test responses, and debug the
backend functionality.
16.​ QR Code: A machine-readable code that
contains information. In the TUP ParkWise
system, QR codes are used for parking tickets,
which are scanned upon vehicle entry and exit
to track parking activity.
17.​ Sign-Up: The process where users create an
account by entering personal information and
vehicle details in order to generate a
personalized parking ticket.
18.​ User: Individuals (students, faculty, or visitors)
who utilize the parking system to check
available spaces and generate parking tickets.
19.​ Vehicle History: The record of vehicle entries
and exits, including timestamps, stored in the
system for monitoring and tracking purposes.
20.​ Version Control: A system that tracks
changes to the codebase, allowing developers
to manage updates, maintain history, and work
collaboratively.
21.​ Duration Monitoring: The feature that tracks
and displays the time a vehicle stays within the
parking premises, used for monitoring
purposes by the admin.
8.2​ References
[1]
[2]
[3]
[4]
Cambridge Dictionary, “Admin,” Cambridge Dictionary.
https://dictionary.cambridge.org/us/dictionary/english/admin
[Accessed Jan. 15, 2025].
Coursera, “Front-End and back-end,” Coursera.
https://www.coursera.org/articles/front-end-vs-back-end?utm
_source=gg&utm_medium=sem&utm_campaign=b2c_apac_
career-academy_coursera_ftcof_professional-certificates_art
e_aug-24_dr_geo-set-2-multi-audience_pmax_gads_lg-all&u
tm_content=b2c&campaignid=21573875733&adgroupid=&d
evice=c&keyword=&matchtype=&network=x&devicemodel=
&adpostion=&creativeid=&hide_mobile_promo&assetgroupid
=6511393614&gad_source=1&gclid=Cj0KCQiAs5i8BhDmAR
IsAGE4xHwpk-ow1pDHUTe7ywU6g9emEW1MB7LTJb-E_tt7
AVZ7Sp1GvDMc6SsaAiGgEALw_wcB
[Accessed Jan. 15, 2025].
Coursera, “Bootsrap,” Coursera.
https://www.coursera.org/articles/what-is-bootstrap?utm_sou
rce=gg&utm_medium=sem&utm_campaign=b2c_apac_care
er-academy_coursera_ftcof_professional-certificates_arte_a
ug-24_dr_geo-set-2-multi-audience_pmax_gads_lg-all&utm_
content=b2c&campaignid=21573875733&adgroupid=&devic
e=c&keyword=&matchtype=&network=x&devicemodel=&adp
ostion=&creativeid=&hide_mobile_promo&assetgroupid=651
1629686&gad_source=1&gclid=Cj0KCQiAs5i8BhDmARIsA
GE4xHzMTyFV_EMUrDM1djl3hpyFxsLNs0CHZDs3CnvSW
wy9-zi1XMokFpMaAs2NEALw_wcB
[Accessed Jan. 15, 2025].
Oracle, “Database,” Oracle.
https://www.oracle.com/ph/database/what-is-database/
W3Schools, “Introduction to Git and Github,” W3Schools.
https://www.w3schools.com/git/git_intro.asp?remote=github
[Accessed Jan. 15, 2025].
[6] W3School, “Introduction to HTML,” W3Schools.
https://www.w3schools.com/Html/html_intro.asp [Accessed
Jan. 15, 2025].
[7] MongoDB, “What is MongoDB?,” MongoDB.
https://www.mongodb.com/company/what-is-mongodb
[Accessed Jan. 15, 2025].
[8] Nodejs, “Introduction to Nodejs,” Nodejs.
https://nodejs.org/en/about
[9] Postman, “What is Postman?,” Postman.
https://www.postman.com/product/what-is-postman/
[Accessed Jan. 15, 2025].
[10] Investopedia, “What is QR code?,” Investopedia.
https://www.investopedia.com/terms/q/quick-response-qr-co
de.asp
[Accessed Jan. 15, 2025].
[5]
[11] ASANA, “What is Agile?,” ASANA.
https://asana.com/pt/resources/agile-methodology?gad_sour
ce=1&gclid=Cj0KCQiAs5i8BhDmARIsAGE4xHwvhmvSs3l1e
XKJKcLLhhCdFuc7Srsk2tgiZGheNGgwhowf2REo2mMaAs9
2EALw_wcB&gclsrc=aw.ds
[Accessed Jan. 15, 2025].
A.​ Team Leader: Jeanesa T. Dugang
B.​ Group Members: BSCS – 3A
Shanne Marvin F. Calimlim
Xyrus Dylan A. Folloso
C.​ Presentation Date: January 08, 2025