A Project Report:

“TaskBidder”

SUBMITTED TO MSBTE, MUMBAI

IN PARTIAL FULFILLMENT OF THIRD YEAR

DIPLOMA

IN

COMPUTER ENGINEERING

By:

Name Enrollment no.

1. Ishwar Gadade 2016200312
2. Tushar Jamdade 2016200389
3. Prem Patil 2016200241
4. Dhanesh Pujare 2016200280

Under Guidance of:

Mrs. H. N. Bhandare

DEPARTMENT OF COMPUTER ENGINEERING

JSPM’s Rajarshi Shahu College of Engineering Polytechnic,

Tathawade, Pune-33
ACADEMIC YEAR: 2023-24
DEPARTMENT OF COMPUTER ENGINEERING

JSPM’s Rajarshi Shahu College of Engineering

Polytechnic, Tathawade, Pune-33

CERTIFICATE
THIS IS TO CERTIFY THAT

Name Enrollment no.

1. Ishwar Gadade 2016200312
2. Tushar Jamdade 2016200389
3. Prem Patil 2016200241
4. Dhanesh Pujare 2016200280

Have worked on a “TaskBidder”. This is a bonafide work carried out by them under the
supervision of Mrs. H. N. Bhandare and it is approved for the partial fulfilment of the
requirement of MSBTE, Mumbai for the award of the Diploma (Computer Engineering).

Prof. H. N. Bhandare Prof. V. T. Thakare Prof. V. T. Thakare

(Project Guide) (Project Co-Ordinator) (H.O.D Computer)

Dr. S. S. Gaikwad

(Principal)

Internal Examiner External Examiner

PLACE: DATE:
JSPM’s
RAJARSHI SHAHU COLLEGE OF ENGINEERING,
POLYTECHNIC

DEPARTMENT OF COMPUTER ENGINEERING

Institute’s Vision and Mission Statements:

Vision
To satisfy the aspirations of youth force, who want to lead the nation towards prosperity through techno
economic development.

Mission
To provide, nurture and maintain an environment of high academic excellence, research and entrepreneurship
for all aspiring students, which will prepare them to face global challenges maintaining high ethical and
moral standards.

Department’s Vision and Mission Statements:

Vision
To impart value based technical education for developing competent computer engineers, fulfilling
expectations of industry and society.

Mission
M1: To provide sound theoretical and practical knowledge.
M2: To improvise self-awareness and ethical values among students along with technical proficiency.
M3: To promote awareness about life-long learning and problem-solving among students.

Program Educational Objectives (PEO’s):

PEO1: Provide socially responsible, environment friendly solutions to Computer Engineering related broad
based problems adapting professional ethics.
PEO2: Adapt state-of-the-art Computer engineering broad-based technologies to work in multi-
disciplinary work environments.
PEO3: Solve broad-based problems individually and as a team member communicating effectively in the
world of work.

Program Specific Outcomes (PSO’s - For ‘I’ Scheme as given by MSBTE):

PSO 1: Computer Software and Hardware Usage: Use state-of-the-art technologies for operation and
application of computer software and hardware.
PSO 2: Computer Engineering Maintenance: Maintain computer engineering related software and
hardware systems.
ACKNOWLEDGEMENT

It is a great pleasure for us to acknowledge the assistance and contribution of a number of

individuals who helped us in developing “TaskBidder”.

First and foremost, we wish to record our gratitude and thanks to Mrs. V. T. Thakare
(Project Coordinator) for her enthusiastic guidance and help in the successful completion
of Project work. We express our thanks to Dr. S. S. Gaikwad (Principal) and Mrs. V. T.
Thakare (Head of the Computer Department) for their valuable guidance. We are also
thankful to other teachers and non-teaching staff of the Computer Engineering Department
and Library for their co-operation and help.

THANKING TO ALL OF YOU.

Ishwar Gadade
Tushar Jamdade
Prem Patil
Dhanesh Pujare
ABSTRACT

The proposed project is a smart parking reservation system that offers clients an easy way
to reserve a parking space online. It overcomes the problem of Finding a parking area in
industrial or commercial areas that is useful consumes time.

As a result, this challenge provides an internet-based reservation machine where

customers can view numerous parking regions and select the space to view whether an
area is to be had or not. If the reserved space is available, he can book it for a specific
time slot. The booked area might be marked red and could no longer be available for all
of us for the specified time. This gadget affords the additional characteristic of cancelling
the bookings. Each time, the user can cancel their books area. Users can make payment
online via Credit card, UPI, etc. Users are notified approximately after making the
payment, the booking via email along with a particular parking number. Online Vehicle
Leaving Framework, as portrayed above, can prompt mistake free, secure, solid and
quick administration framework.
CONTENTS

Chapters Content Page Number

1 Synopsis 1–2
1.1 Brief Description 2
1.2 Aim of The Project 2
1.3 Actual Methodology Followed 2
2 Introduction 3–4
2.1 Project Plan 4
2.2 Project Scope 4
3 Review Of Literature 5 – 10

3.1 Literature survey 6

3.2 Requirement Engineering 6
3.3 Feasibility Study 7
3.4 Requirement Analysis 8
3.5 Problem Recognition 9
3.6 Problem Evaluation and Synthesis 9
3.7 TimeLine of Project 9

4 Proposed System 11 – 14

4.1 Proposed System 12

4.2 Different Modules in Project 12
4.2.1 Registration 13
4.2.2 Login 13
4.2.3 Booking Parking 13
4.2.4 View Parking 13
4.2.5 Payment 13
4.2.6 View Booking 13
4.2.7 Feedback 14
4.2.8 Logout 14

5 Hardware Requirement 15 – 16

6 Software Requirement 17 – 53
7 System Testing 54 – 56

7.1 Unit Testing 55

7.2 Integration Testing 55
7.3 User Acceptance Testing 55
7.4 User Training 56

8 Diagrams 57 – 64

8.1 Architecture 58
8.2 Use Case Diagram. 59
8.3 Sequence Diagram. 60
8.4 Class Diagram. 61
8.5 ER Diagram. 62
8.6 Data Flow Diagram.
63
8.7 Flowchart.
64

9 Experimentation 65 – 67

9.1 Test Plan 66

9.2 Test Pass OR Fail Criteria 66
9.3 Test Entry OR Exit Criteria 66
9.4 Testing Type 66
9.5 Test Cases 67

10 Result 68 – 74

11 Conclusion 75 – 76

12 Future Scope 77 – 78

13 Bibliography 79 – 80

14 Paper Publication 81 – 89
14.1 Paper Published 82
14.2 Certificates 85
Online Parking Booking System (OPBS)

CHAPTER 1
SYNOPSIS

Jspm’s Rscoe Poly, Tathawade 1

Online Parking Booking System (OPBS)

1.1 Brief Description:

People’s Parking had challenges concerning the safety of its data in the store since they
Currently, a paper-based system is used, resulting in physical struggles for parking by
drivers, as well as time waste. Congestion and collisions. There was also a problem with
monitoring the profit made by the company. Whereby the company lost money to the
workers who received it (fraud). This system majorly solved the congestion, avoided
collisions, and saved time during parking activities. Parking is extremely important all
over the world, particularly in major cities. Every day, thousands of car drivers spend
numerous amounts of time locating where to park. The end result of this case involves
theft in urban areas, growing visitor congestion, and the frustration of drivers. In order to
resolve this hassle, the implementation of an online vehicle park reservation system in
this metropolis Coping with parking locations is obligatory. It will allow drivers to
reserve a parking space on the Platform whenever, anywhere. It is intended to make
online parking space reservations simpler for users.
The process of looking for parking spots is not standardized. Most people's everyday
concern and time-consuming in a big city is finding a parking spot that is free. The search
for a parking spot frequently leads to increased traffic and air pollution in a particular
location.

1.2 Aim of The Project:

The main objective of the Project on Online Parking Booking System is to manage the
details of Car, Car Number Parking, Parking Space, Parking Slots, Parking Fees. The
only person with access to the project is the administrator because it has been entirely
constructed there. The project's goal is to create an application software that will cut
down on manual management of cars, parking spaces, car numbers, and parking spots. It
keeps track of every detail pertaining to parking spaces, slots, and fees.

1.3 Actual Methodology Followed:

Procedures that we followed during the completion of micro-project are:

 Firstly, a discussion was held with the group members on the topic Online
Parking Booking System.
 The topic was divided into several modules and each and every group member
was assigned one of them.
 A thorough research on the “Online Parking Booking System” was specified to
the group members which include all the key concepts related to it.
 All of them get perfectly arranged into the specified format and all the
errors/mistakes committed resolved.

 Finally, the copy was submitted to the concerned course coordinator.

Jspm’s Rscoe Poly, Tathawade 2

Online Parking Booking System (OPBS)

CHAPTER 2
INTRODUCTION

Jspm’s Rscoe Poly, Tathawade 3

Online Parking Booking System (OPBS)

One of the biggest problem that the driver faces is finding a free parking spot, so many
driver stopping their cars at the edges of the street. Therefore, we choose this project to
prevent the frustration of finding a parking spot, and they can reserve a spot online. The
project we are working on is a smart parking booking system that provides customers an
easy way of reserving a parking space online.

It overcomes the problem of finding a parking space in commercial areas like malls
offices which unnecessary consumes time. Hence this project offers a web-based
reservation system where users can view various parking areas and select the area
whether space is available or not. If the booking space is available, then he or she can
book it for specific time slot. The booked space will be marked and will not be available
for anyone else for the selected time by user. This system provides an additional feature
of cancelling the booking. User can cancel their booked space anytime. Users can even
make payment online by credit card. After making payment users are notified about the
booking by email along with unique parking number. In this way it will help association
in better usage of assets.

2.1 Project Plan:

The first activity in Website project planning is the determination of Website

Scope. The second Website planning task is problem formulation. The scope
of the project is limited to the intranet for time being it is not deployable on
any handheld devices

2.2 Project Scope:

• Become a new user.

• Book the parking area.
• Request to Upload Issue.
• Manage owner details (Block owner details/Unblock user details and
Delete user details).
• Manage Solutions (View Solutions, you can add solutions).
• Manage Services (24/7 services for users).

Jspm’s Rscoe Poly, Tathawade 4

Online Parking Booking System (OPBS)

CHAPTER 3
REVIEW OF
LITERATURE

Jspm’s Rscoe Poly, Tathawade 5

Online Parking Booking System (OPBS)

3.1 Literature Survey:

Our group of 4 used to hangout a lot. During our hangouts we faced a lot of
problems regarding to the parking. As we know how strict laws and actions
are taken when you park in non parking area and it is so difficult to find a
empty parking space even the malls are full nowadays and not us only we see
many people who struggles for finding parking slots. That’s why being the
computer engineer students we discussed this problem and came with the
solution of online parking booking system. Which makes the day to day life a
lot easier. If we ever had to go out we can previously book our slots using
this application.

3.2 Requirement Engineering:

Requirement analysis is also known as requirements engineering. It is

sometimes referred as requirements gathering, requirements capture, or
requirements specification. The term requirements analysis can also be
applied specifically to the analysis proper, as opposed to elicitation or
documentation of the requirements, for instance. Requirements engineering
can be divided into discrete chronological steps:

• Requirement’s elicitation.

• Requirements analysis and negotiation.

• Requirements specification.

• System modelling.

• Requirements validation.

• Requirements

Jspm’s Rscoe Poly, Tathawade 6

Online Parking Booking System (OPBS)

Requirement engineering according to Laplante (2007) is “a sub discipline of

systems engineering and software engineering that is concerned with
determining the goals, functions, and constraints of hardware and software
systems. In some life cycle models, the requirement engineering process
begins with a feasibility study activity, which leads to a feasibility report.

3.3 Feasibility Study:

Feasibility study conducted once the problem is clearly understood.

Feasibility study is a high-level capsule version of the entire system-analysis
and design process. The objective is to determine the problem is solved. The
system has been tested for feasibility in following ways: -

• The Technical feasibility.

• Operational feasibility.

• Economical feasibility.

3.3.1 Technical Feasibility:

A study of functions, performance and constraints may affect the ability to

achieve an acceptable system so, that necessary function and performance are
achieved within the constraints uncovered during system analysis. The
website developed for the “Online Parking Booking System” is platform
independent and has predefined functions and constraints so the project is
technically feasible.

Jspm’s Rscoe Poly, Tathawade 7

Online Parking Booking System (OPBS)

3.3.2 Operations Feasibility:

The purpose of this project is to develop website named “Online Parking

Booking System” which facilitates Informative Platform for car owners. The
activities of the website such as user registration, manage the details of Car,
Car Number Parking, Parking Space, Parking Slots, Parking Fees has made
work easy of both car owner and administrator. So, this project is operational
feasible.

3.3.3 Economical Feasibility:

Economic analysis includes a broad range of concern that include cost benefit
analysis, long term cooperative income strategies, cost of resources needed
for development. Since the cost of resources for development of system
satisfies.

3.4 Requirement Analysis:

Requirement Analysis is the process of understanding the customer needs and

expectations from a proposed system or application and is well-defined stage
in the Software development Life Cycle model. Requirements are a
description of how a system should behave or a description of system
properties or attributes. It can alternatively be a statement of what an
application is expected to do.
The Software Requirement Analysis Process covers the complex task of
eliciting and documenting the requirements of all these users, modelling and
analysing these requirements of all these users, modelling and documenting
them as a basis for system design. Software Requirements Analysis and
Documentation Processes are critical to software project success.
Requirement Engineering is an emerging field which deals with the
systematic handling of requirements.

Jspm’s Rscoe Poly, Tathawade 8

Online Parking Booking System (OPBS)

3.5 Problem Recognition:

Our website is a free and informative. For accessing the website, one must
have the link and visit it. After that, the home page will appear which
contains the basic knowledge of our website including the working of the
website and some information of care to be taken of the pets, training the
pets, diet suggestions and the do’s and don’ts for the owner regarding their
pets. There is also a session at the end of frequently asked questions as
regards to website

3.6 Problem Evaluation and Synthesis:

The project “Online Parking Booking System” deals with this problem and
is the best solution. The car’s owner can access the information to solve the
small problems faced by them such as finding parking area or problem faced
with payment.

3.7 TimeLine of Project:

Fig. 1: Time line of project

Jspm’s Rscoe Poly, Tathawade 9

Online Parking Booking System (OPBS)

A Learning 02 Weeks
B Planning 01 Week
C Design 02 Weeks
D Coding 04 Weeks
E Testing 01 Week

Table 1: Estimation of resources

Jspm’s Rscoe Poly, Tathawade 10

Online Parking Booking System (OPBS)

CHAPTER 4
PROPOSED SYSTEM

Jspm’s Rscoe Poly, Tathawade 11

Online Parking Booking System (OPBS)

4.1 Proposed System:

The project we are working on is an “Online Parking Booking System” that

provides customers an easy way of reserving a parking space online. One of
the biggest problem that driver faces is finding a free parking spot, so many
driver stopping their cars at the edges of the street. Therefore, we choose this
project to prevent the frustration of finding a parking spot, and they can
reserve a spot online. It overcomes the problem of finding a parking space in
commercial areas like malls offices which unnecessary consumes time.
Hence this project offers a web-based reservation system where users can
view various parking areas and select the area whether space is available or
not. If the booking space is available, then he or she can book it for specific
time slot. The booked space will be marked and will not be available for
anyone else for the selected time by user. This system provides an additional
feature of cancelling the booking. User can cancel their booked space
anytime. Users can even make payment online by credit card. After making
payment users are notified about the booking by email along with unique
parking number. In this way it will help association in better usage of assets.

4.2 Different Modules in Project:

• Registration
• Login
• Book Parking
• View Parking
• Payment
• View Booking
• Feedback
• Logout

Jspm’s Rscoe Poly, Tathawade 12

Online Parking Booking System (OPBS)

4.2.1 Registration:

This module is used for registration by the new Car user. User will have to
provide details like full name, email address, car number and has create a
new password. After successful registration user can login into the website
using email address and new created password.

4.2.2 Login:

This module is used by the Car owner to login for booking their vehicle.

4.2.3 Book Parking:

This is the first module, where the car owner has to select date of parking,
enter a car number, select the start time and end time of parking. After filling
all this details user can select the parking slot and proceed to payment.

4.2.4 View Parking:

This is the module in our project where car owner can view the availability of
parking slots to park their vehicle. The Red colour shows that parking slot is
booked and the available slots are kept uncoloured.

4.2.5 Payment:

This module is opened when the car owner has filled all the data and has
selected the parking slot. Using this module user can pay via credit card /
Debit card or via UPI.

4.2.6 View Booking:

This module shows all the details about the car owner that is selected parking
slot, car number, start time, end time and date of the parking.

Jspm’s Rscoe Poly, Tathawade 13

Online Parking Booking System (OPBS)

4.2.7 Feedback:

In this module car owner can give their experienced feedback. Mostly, this
feedback will be about any problem faced by car owner such as car safety,
parking related issues, etc.

4.2.8 Logout:

After clicking “Logout” button, the user will be logged out of their account,
and redirected to login page of Online Parking Booking System website.

Jspm’s Rscoe Poly, Tathawade 14

Online Parking Booking System (OPBS)

CHAPTER 5
HARDWARE
REQUIREMENT

Jspm’s Rscoe Poly, Tathawade 15

Online Parking Booking System (OPBS)

5.1 Hardware Requirements:

A hardware compatibility is a list of computer hardware (typically including many

types of peripheral devices) that is compatible with a particular operating system or
device management software. In today's world, there is a vast amount of computer
hardware in circulation, and many operating systems too.

All the hardware requirements mentioned below are minimum requirements.

For better experience, higher the system specifications, better the

experience.

• Ram : 512 MB and higher.

• Hard-disk : 1GB and higher.
• Processor : Intel core i3 Gen 11 or later.

Jspm’s Rscoe Poly, Tathawade 16

Online Parking Booking System (OPBS)

CHAPTER 6
SOFTWARE
REQUIREMENT

Jspm’s Rscoe Poly, Tathawade 17

Online Parking Booking System (OPBS)

6.1 Software Requirements:

A software requirement is a description of a software system to be developed. It

lays out functional and non-functional requirements, and may include a set of use
cases that describe user interactions that the software must provide.
Code editor : PyCharm 2021.3, Brackets.
Software used : Canvas
Operating System : Windows 7 and higher versions.
Technologies used : HTML5, CSS3, Java Script, Python, Bootstrap, SQLite.

Code editor:
PyCharm –

PyCharm is an integrated development environment (IDE) used for programming

in Python. It provides code analysis, a graphical debugger, an integrated unit tester,
integration with version control systems, and supports web development with Django.
PyCharm is developed by the Czech company JetBrains.
It is cross-platform, working on Microsoft Windows, macOS and Linux. PyCharm has a
Professional Edition, released under a proprietary license and a Community Edition
released under the Apache License. PyCharm Community Edition is less extensive than
the Professional Edition.

Jspm’s Rscoe Poly, Tathawade 18

Online Parking Booking System (OPBS)

Features:

 Coding assistance and analysis, with code completion, syntax and error
highlighting, linter integration, and quick fixes
 Project and code navigation: specialized project views, file structure views
and quick jumping between files, classes, methods and usages
 Python code refactoring: including rename, extract method, introduce
variable, introduce constant, pull up, push down and others
 Support for web frameworks: Django, web2py and Flask
 Integrated Python debugger
 Integrated unit testing, with line-by-line coverage
 Google App Engine Python development
 Version control integration: unified user interface
for Mercurial, Git, Subversion, Perforce and CVS with changelists and merge
 Scientific tools integration: integrates with IPython Notebook, has an
interactive Python console, and supports Anaconda as well as multiple
scientific packages including Matplotlib and NumPy.

Choose the best PyCharm for you:

PyCharm is available in two editions:

1. Community (free and open-sourced): for smart and intelligent Python development,
including code assistance, refactorings, visual debugging, and version control
integration.
2. Professional (paid) : for professional Python, web, and data science development,
including code assistance, refactorings, visual debugging, version control integration,
remote configurations, deployment, support for popular web frameworks, such as
Django and Flask, database support, scientific tools (including Jupyter notebook
support), big data tools.

Jspm’s Rscoe Poly, Tathawade 19

Online Parking Booking System (OPBS)

Supported languages:

To start developing in Python with PyCharm you need to download and install Python
from python.org depending on your platform.

PyCharm supports the following versions of Python:

Python 2: version 2.7
Python 3: from the version 3.6 up to the version 3.12

Besides, in the Professional edition, one can develop Django , Flask, and Pyramid
applications. Also, it fully supports HTML (including HTML5), CSS, JavaScript, and
XML: these languages are bundled in the IDE via plugins and are switched on for you by
default. Support for the other languages and frameworks can also be added via plugins
(go to Settings | Plugins or PyCharm | Settings | Plugins for macOS users, to find out
more or set them up during the first IDE launch).

Process data:
PyCharm has an interactive Python console to perform smart operations over data with
on- the-fly syntax check with inspections, braces and quotes matching, and of course,
code completion. You can also benefit from the built-in support for Anaconda. With
PyCharm Professional, you can analyze and visualize various scientific and statistical
data. Jupyter Notebook integration enables editing, executing, and debugging notebook
source code and examining execution outputs, including stream data, images, and other
media.

Customize your environment:

Feel free to tweak the IDE so it suits your needs perfectly and is as helpful and
comfortable as it can be. Go to Settings to see the list of available customization options.

Appearance
The first thing to fine-tune is the general "look and feel." Go to File | Settings |
Appearance and Behavior | Appearance (PyCharm | Settings | Appearance and Behavior |
Appearance for macOS users) to select the IDE theme: the light themes or Darcula if you
prefer a darker setting.

Editor
The many pages available under File | Settings | Editor (PyCharm | Settings | Editor for
macOS users) help you adjust every aspect of the editor’s behavior. A lot of options are
available here, from general settings (like Drag'n'Drop enabling, scrolling configuration,
and so on.), to color configuration for each available language and use case, to tabs and

Jspm’s Rscoe Poly, Tathawade 20

Online Parking Booking System (OPBS)

code folding settings, to code completion behavior and even postfix templates.

Code style
Code style can be defined for each language under File | Settings | Editor | Code Style
(PyCharm | Settings | Editor | Code Style for macOS users). You can also create and save
your own coding style scheme.

Test:
It is a good idea to test your applications, and PyCharm helps doing it as simple as
possible.
With PyCharm, you can:
1. Create tests.
2. Create special testing run/debug configurations.
3. Run and debug tests right from the IDE, using the testing
run/debug configurations.
4. And, finally, the most important thing - you can explore test results in the test
runner tab of the Run tool window.

Steps to Install PyCharm:

Step 1
Download the required package or executable from the official website of
PyCharm https://www.jetbrains.com/pycharm/download/#section=windows.
Step 2
Download the community package (executable file) onto your system and mention a
destination folder
Step 3
Now, begin the installation procedure similar to any other software package.
Step 4
Once the installation is successful, PyCharm asks you to import settings of the existing
package if any.

Jspm’s Rscoe Poly, Tathawade 21

Online Parking Booking System (OPBS)

Brackets –

Brackets is a source code editor with a primary focus on web development. Created by
Adobe Inc., it is free and open-source software licensed under the MIT License, and is
currently maintained on GitHub by open-source developers. It is written in JavaScript,
HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most
Linux distributions. The main purpose of Brackets is its live HTML, CSS and
JavaScript editing functionality.

Features:
Brackets provides several features including:

Quick Edit
Quick Docs
Live Preview
JSLint
LESS support
Open source
Extensibility
CodeMirror
RequireJS (modules)

Jspm’s Rscoe Poly, Tathawade 22

Online Parking Booking System (OPBS)

Quick edit-
Quick edit enables inline editing of CSS, Color Property, and JavaScript elements for
developers. This built-in feature can be applied to multiple functions or properties
simultaneously and all updates are applied directly to the file associated with the
changed elements.

HTML file-
Applying quick edit to HTML elements will display all corresponding CSS properties
in a box beneath the selected element. Users can choose to create new CSS rules
directly within the editor and edit a tag's CSS properties inline without leaving the
context of the HTML file.

JavaScript file-
On JavaScript functions, quick edit performs the same procedure as with HTML
elements, but it displays the selected function’s body within the drop down box. All
updates to the function’s body will propagate and update directly within the
corresponding JavaScript file.
Files containing hex or RGB color properties
For color properties, quick edit will return an inline color picker for previewing and
color adjustment functionality.

Live preview-
When one clicks the respective code snippet in CSS/HTML the web browser
immediately shows the output relating to that code snippet in web browser. This feature
is termed as Live Preview, this feature also pushes code edits instantly to the browser to
present an updated webpage as the developers modify the code. Brackets contains a
Node.js backend that predicts what the code does as the developer types the code.

Live preview of code change on browser

Two scenarios to live preview
Functionality
HTML & CSS real time updates (without reloading)
Element Highlighting: Elements selected in HTML and CSS files are highlighted within
the browser.

Live preview limitations

Currently only works with desktop Google Chrome (not open-source Chromium), as the
target browser.
Opening developer tools in Google Chrome will close all live development connections.

Jspm’s Rscoe Poly, Tathawade 23

Online Parking Booking System (OPBS)

All files to be viewed must be inside a currently open folder in

Brackets. Only one HTML file can be previewed at a time.
Real time updates are paused when syntactically invalid HTML is encountered.
Brackets will resume pushing changes to the browser when the syntax is corrected.

Split view-
This feature splits the main view into two parts. Users can split the view either
vertically or horizontally according to their own convenience, thus allowing users to
work on two files at same time. A developer can simultaneously work on two different
files of two different types, two files of the same type, or even two different parts of the
same file at the same time. Features such as Live Preview and Quick Edit work in both
views.

Multiple file format support-

Brackets supports codes from multiple file types from C++, C, VBScript to Java,
JavaScript, HTML, Python, Perl and Ruby. The complete list comprises more than 38
file types. This gives the user flexibility to work on various files of a project
simultaneously.

Extensions-
Being built with HTML, CSS, and JavaScript, developers can provide additional
functionality to Brackets by creating extensions. These extensions can be found and
installed using the built-in extension manager. Extensions can also be found online via
Brackets Extension Registry.

Other Integrated development environments for Web development:

• Atom by GitHub
• Sublime Text 3
• Visual Studio Code
• IntelliJ IDEA
• PHPStorm
• Webstorm
• NetBeans
• Komodo Edit
• RJ TextEd
• Brackets

Jspm’s Rscoe Poly, Tathawade 24

Online Parking Booking System (OPBS)

Technologies used:
1. HTML
• It’s stands for Hyper Text Markup Language.
• HTML is used to define structure of Web Page.
• HTML is used for Creating the Web Pages.
• HTML is not a case sensitive language.
• HTML is a tag-based language.

HTML Tags:
1) <a> Tag
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes Example:
<a href="https://www.w3schools.com">Visit page</a>

2) <body> Tag
The <body> tag defines a body of html document.
Example:
<body>This is body of html document</body>

3) <button> Tag
The <button> tag defines a button.
Example:
<button>Click it</button>

4) <div> Tag
The <div> tag defines a Division section.
Example:
<div>this is div tag</div>

Jspm’s Rscoe Poly, Tathawade 25

Online Parking Booking System (OPBS)

5) <footer> Tag
The <footer> tag defines a footer of the page behave like section div.
Example:
<footer>This is a footer of the page </footer>

6) <form> Tag
The <form> tag defines a form that is used for getting some data from user using
their input fields.
Example: <form>
<input type="text">

<input type="text">
<input type="submit">
</form>

7) <head> Tag
The <head> tag used to set the a resources that requires for the web page. It can
contains external and internal resources as well Example:
<head><title>Home | welcome</title ></head>

8) <header> Tag
The <header> tag defines a header of the html document , it behave like div or
section.
Example:
<header>this is header tag</header>

9) <html> Tag
The <html> tag defines a hole document as html and it can contains a lot of tags
and scripts.
Example:
<html>

Jspm’s Rscoe Poly, Tathawade 26

Online Parking Booking System (OPBS)

<head><title>Home | welcome</title ></head>

<body>This is body of html document</body>
</html>

10) <li> Tag

The <li> tag defines a list element.
Example:
<li>this is the first element of the list</li>

11) <p> Tag

The <p> tag defines a paragraph and it can contain a lot of
text. Example:
<p>Visit W3Schools</p>

12) <script> Tag

The <script> tag tell the browser this is a script section and it contains scripts for
the page.
Example:
<script type="javascript/text"> document.console.log(“hello
world!!”);
</script>

13) <section> Tag

The <section> tag defines a section of the page, it behave like div tag.
Example: <section>This is a section</section >

14)<select> Tag
The <select> tag defines a dropdown list it can contains multiple options.
Example:
<select><option>this is option-1 </option></select>

Jspm’s Rscoe Poly, Tathawade 27

Online Parking Booking System (OPBS)

15) <span> Tag

The <span> tag used to highlight something in the text or paragraph and it also
behave like div.
Example:
<p> my name is <span> sandip</span></p>

16) <table> Tag

The <table> tag defines a table structure it can contains multiple columns and
rows. Example:
<table>
<tr>
<td> defines a table structure</td>
<td> defines a table structure</td>
</tr>
</table>

17) <tr> Tag

The <a> tag defines a table row.
Example:
<table>
<tr>
<td> defines a table structure</td>
<td> defines a table structure</td>
</tr>
</table>

18)<td> Tag
The <td> tag defines a table row data, we can say that column data.
Example:
<table>
<tr>

Jspm’s Rscoe Poly, Tathawade 28

Online Parking Booking System (OPBS)

<td> defines a table structure</td>

<td> defines a table structure</td>
</tr>
</table>

19) <ul> Tag

The <ul> tag defines a list.
Example:
<ul>
<li>this is the first element of the list</li>
</ul>

20) <h2> Tag

The <h2> tag defines the small heading of the page it font size 28px.
Example:
<h2>Visit W3Schools</h2>

21)<label> Tag
The <label> tag defines a label for the input tag.
Example:
<label for="name">Name</a><input type="text">

22) <input> Tag

The <input> tag defines used to take input data from end users.
Example:
<input type="text">

23) <link> Tag

The <link> tag defines a link external and internal resource files like css js or
other framework.
Example:

Jspm’s Rscoe Poly, Tathawade 29

Online Parking Booking System (OPBS)

<link rel="stylesheet" href="css/style.css">

24) <meta> Tag

The <meta> tag defines a the brain of the page and it contains charset, language,
favicon or much more in that we can add in it.
Example:
<meta charset="utf-8 ">Visit W3Schools</a>

25) <option> Tag

The <option> tag defines a options item for select , this is dropdown list items.
Example:
<select><option>this is option-1 </option></select>

26)<textarea> Tag
The <textarea> tag used to get input data from end user and it act like input tag,
have columns and rows

Example:
<textarea cols="15" rows="15" ></textarea>

27) <th> Tag

The <th> tag defines a table row data heading.
Example:
<table>
<tr>
<th> name</td>
<th> roll no</td>
</tr>
</table>

Jspm’s Rscoe Poly, Tathawade 30

Online Parking Booking System (OPBS)

28) <title > Tag

The <a> tag defines a tab title of the document. Example:
<head><title>Home | welcome</title ></head>

2. Cascading style sheets (CSS):

• CSS stands for Cascading Style Sheets.
• CSS is used for designing web Pages.
• CSS makes web page more attractive.
• CSS code can be used multiple times.

CSS properties/attributes:

1. color: ;
The color property is used to set the color of the text.
Example: color: blue;

2. width: ;
The width property is used to set the width of the element.
Example: width: 100px;

3. height: ;
The height property is used to set the height of the element.
Example: height: 100px;

4. margin: ;
The margin property is used to set the margin of the
element. Example:
margin: 10px 10px 10px 10px;

5. align-content: ;
The align-content property is used to set alignment of the text.

Jspm’s Rscoe Poly, Tathawade 31

Online Parking Booking System (OPBS)

Example:
align-content: Centre;

6. align-items: ;
The align-items property is used to set alignment of the child elements.
Example:
align-items: Centre;

7. animation: ;
The animation property is used to set the animation name, duration, type and
speed of the text.
Example: animation: fadeout 2s 2s ease-in;

8. appearance: ;

The appearance property is used to apply platform-specific styling to an element

that doesn’t have it by default, to remove platform-specific styling to an element
that does have it by default.

Example:
appearance: none;

9. backface-visibility: ;
The backface-visibility property defines whether or not the back face of an
element should be visible when facing the user.
Example:
backface-visibility: hidden;

10. background: ;
The background property is used to set the backgrounds as image or color of the
element.
Example:

Jspm’s Rscoe Poly, Tathawade 32

Online Parking Booking System (OPBS)

background: blue;

11. background-blend-mode: ;
The background-blend-mode property is used to blending mode of each
background layer (color and/or image).
Example: background-blend-mode: lighten;

12. background-clip: ;
The background-clip property defines how far the background (color or image)
should extend within an element.
Example:
background-clip: padding-box;

13. background-color: ;
The color property is used to set the color of the text.
Example: color: blue;

14. background-image: ;
The background property is used to set the background image of the element.
Example:
background-image: url(/images/deo.png);

15. background-position: ;
The background property is used to set the background position of image of
elements. Example:
background: 100px 50px;

16. background-repeat: ;
The background property is used to set the background image repetition or stop
the repetition of element. Example:

Jspm’s Rscoe Poly, Tathawade 33

Online Parking Booking System (OPBS)

background-repeat: no-repeat;

17. background-size: ;
The background-size property is used to set the background image size of the
element.
Example:
background-size: 100% 100%;

18. border: ;
The border property is used to set the border of the
element. Example:
border: 1px solid blue;

19. border-bottom: ;
The color property is used to set the color of the text.
Example: color: blue;

20. border-collapse: ;
The border-collapse property sets whether table borders should collapse into a
single border or be separated as in standard HTML.
Example:
border-collapse: collapse;

21. border-radius: ;
The border-radius property is used to set the border-radius of the elements.
Example:
border-radius: 5px;

22. bottom: ;
The bottom property affects the vertical position of a positioned element.
This property has no effect on non-positioned elements.

Jspm’s Rscoe Poly, Tathawade 34

Online Parking Booking System (OPBS)

Example:
bottom: 100px;

23. box-shadow: ;
The box-shadow property is used to set the shadow of the
element. box-shadow: 1px 2px 4px green;

24. clear: ;
The clear property specifies on which sides of an element floating elements are
not allowed to float.
Example:
clear: left;

25. cursor: ;
The cursor property specifies the mouse cursor to be displayed when pointing
over an element.
Example:
cursor: pointer;

26. display: ;
The display property specifies the display behavior (the type of rendering box) of
an element.
Example: display: none;

27. flex-direction: ;
The flex-direction property specifies the direction of the flexible items Example:
flex-direction: row-reverse;

28. flex-wrap: ;
The flex-wrap property specifies whether the flexible items should wrap or not.

Jspm’s Rscoe Poly, Tathawade 35

Online Parking Booking System (OPBS)

Example:
flex-wrap: wrap;

29. float: ;
The float property specifies how an element should float.
Example:
float: right;

30. font-family: ;
The font-family property specifies the font for an element.
Example:
font-family: arial, sans-serif;

31. font-size: ;
The font-size property sets the size of a
font. Example:
font-size: 12px;

32. font-stretch: ;
The font-stretch property allows you to make text narrower (condensed) or wider
(expanded).
Example:
font-stretch: expanded;

33. font-style: ;
The font-style property specifies the font style for a text.
Example:
font-style: italic;

Jspm’s Rscoe Poly, Tathawade 36

Online Parking Booking System (OPBS)

34. font-weight: ;
The font-weight property sets how thick or thin characters in text should be
displayed
font-weight: 100;

35. gap: ;
The gap property defines the size of the gap between the rows and columns.
Example: gap: 10px;

36. grid-template-columns: ;
The grid-template-columns property specifies the number (and the widths) of
columns in a grid layout.
Example:
grid-template-columns: auto auto;

37. grid-template-rows: ;
The grid-template-rows property specifies the number (and the heights) of the
rows in a grid layout.
Example: grid-template-rows: auto
auto;

38. justify-content: ;
The justify-content property is used to set the element to horizontal alignment.
Example:
justify-content: Centre;

39. left: ;
The left property affects the horizontal position of a positioned element.
This property has no effect on non-positioned elements Example:
left: 100px;

Jspm’s Rscoe Poly, Tathawade 37

Online Parking Booking System (OPBS)

40. letter-spacing: ;
The letter-spacing property is used to set the spacing between letter that present in
the text.
Example:
letter-spacing: 5px;

41. line-height: ;
The line-height property is used to set the height of the sentence.
Example:
line-height: 40px;

42. list-style: ;
The list-style property is used to set the style for the list.
Example:
list-style: bullet;

43. max-height: ;
The max-height property defines the maximum height of an element..
Example:
max-height: 100px;

44. max-width: ;
The max-width property defines the maximum width of an element.
Example:
max-width: 100px;

45. -moz-appearance: ;
The appearance property is used to apply platform-specific styling to an element
that doesn’t have it by default, to remove platform-specific styling to an element
that does have it by default with mozila support moz-appearance: none;

Jspm’s Rscoe Poly, Tathawade 38

Online Parking Booking System (OPBS)

46. -moz-border-radius: ;
The border-radius property is used to set the border-radius of the elements with
mozila support.
Example:
moz-border-radius: 45px;

47. -ms-transform: ;
The -ms-transform property applies a 2D or 3D transformation to an element. This
property allows you to rotate, scale, move, skew, etc., elements. Example:
ms-transform: translateX(50px);

48. -o-border-radius: ;
The -o-border-radius property is used to set the border-radius of the elements with
opera support.
Example:
o-border-radius: 5px;

49. -o-transform: ;
The -o-transform property applies a 2D or 3D transformation to an element. This
property allows you to rotate, scale, move, skew, etc., elements with opera
browser support.
Example:
o-transform: blue;

50. -o-transition: ;
The -o-transition property the transition effect is for elements with opera supports.
Example:
o-transition: 1s;

Jspm’s Rscoe Poly, Tathawade 39

Online Parking Booking System (OPBS)

51. outline:
The outline property is used to set the outline to elements.
Example: outline:
none;

52. overflow:
The overflow property is used to set the handle elements
overflow. Example:
overflow: hidden;

53. overflow-x:
The overflow-x property is used to set the handle the horizontal overflow of
the elements.
Example:
overflow-x: hidden;

54. overflow-y:
The overflow-x property is used to set the handle the vertical overflow of
the elements Example:
overflow-y: hidden;

55. padding:
The padding property is used to an element's padding is the space between its
content and its border.
Example:padding: 1px;

56. padding-bottom:
The padding-bottom property is used to an element's bottom padding is the space
between its content bottom and its border.

Jspm’s Rscoe Poly, Tathawade 40

Online Parking Booking System (OPBS)

Example:
padding-bottom: 20px;

57. padding-left:
The padding-left property is used to an element's left padding is the space between
its content and its border.
Example:
padding-left: 20px;

58. padding-top:
The padding-top property is used to an element's top padding is the space between
its content and its border.
Example:
padding-top: 20px;

59. perspective:
The perspective property is used to give a 3D-positioned element some
perspective. Example:
perspective: 100px ;

60. pointer-events:
The pointer-events property defines whether or not an element reacts to
pointer events Example:
pointer-events: auto;

61. position:
The position property specifies the type of positioning method used for an element
(static, relative, absolute, fixed, or sticky).
Example:position: relative;

Jspm’s Rscoe Poly, Tathawade 41

Online Parking Booking System (OPBS)

62. resize:
The resize property defines if (and how) an element is resizable by the user.
Example: resize:
none;

63. right:
The right property affects the horizontal position of a positioned element.
This property has no effect on non-positioned elements.
Example: right:
100px;

64. text-align:
The text-align property specifies the horizontal alignment of text in an
element. Example:
text-align: Centre;

65. text-decoration:
The text-decoration property specifies the decoration added to text.
Example:
text-decoration: underline;
66. text-overflow:
The text-overflow property specifies how overflowed content that is not
displayed should be signaled to the user. It can be clipped, display an
ellipsis (...), or display a custom string.
Example:
text-overflow : blue;

67. top:
The top property affects the vertical position of a positioned element.

Jspm’s Rscoe Poly, Tathawade 42

Online Parking Booking System (OPBS)

This property has no effect on non-positioned elements

Example: top: 10px;

68. transform:
The color property applies a 2D or 3D transformation to an element. This property
allows you to rotate, scale, move, skew, etc., elements.
Example:
transform: translateY(50px)

69. user-select:
The user-select property specifies whether the text of an element can be selected.
Example:
User-select:none;

70. transition: ;
The transition property the transition effect is for elements.
Example:
transition: 1s;

71. transition-delay: ;
The transition-delay property specifies when the transition effect will start.
Example:
transition-delay: 1s;

72. vertical-align: ;
The vertical-align property sets the vertical alignment of an element.
Example:
vertical-align: Centre;

Jspm’s Rscoe Poly, Tathawade 43

Online Parking Booking System (OPBS)

73. visibility: ;
The visibility property specifies whether or not an element is visible.
Example:
visibility: baseline;

74. -webkit-appearance: ;
The -webki-appearance property is used to apply platform-specific styling
to an element that doesn’t have it by default, to remove platform-specific
styling to an element that does have it by default with supports to all
browsers Example:
webkit-appearance: none;

75. -webkit-border-radius: ;
The -webkit-border-radius property is used to set the border-radius of the
elements. Example:
webkit-border-radius: 5px;

76. -webkit-locale: ;
The -webkit-locale property is used to set the language of the html document or
elements.
Example:
webkit-locale: “en”;

77. -webkit-transform: ;
The -webkit -transform property applies a 2D or 3D transformation to an
element. This property allows you to rotate, scale, move, skew, etc.,
elements with all browser supports.

Example:
webkit -transform: translateX(50px);

Jspm’s Rscoe Poly, Tathawade 44

Online Parking Booking System (OPBS)

78. -webkit-transition: ;
The -webkit -transition property the transition effect is for elements with opera
supports.
Example:
webkit-transition: 1s;

79. word-wrap: ;
The word-wrap property allows long words to be able to be broken and wrap
onto the next line..
Example: word-wrap: break-word;

80. z-index: ;
The z-index property specifies the stack order of an
element. Example: z-index:
88;

3. JavaScript:

• JavaScript is a text-based programming language used both on the

clientside and server-side that allows you to make web pages interactive.
• Where HTML and CSS are languages that give structure and style to web
pages. JavaScript gives web pages interactive elements that engage a
user.

JavaScript properties:
1] if Statement
The ‘if’ statement is the fundamental control statement that allows JavaScript to
make decisions and execute statements conditionally.
Example: var age = 20; if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}

Jspm’s Rscoe Poly, Tathawade 45

Online Parking Booking System (OPBS)

2] if...else Statement
The ‘if...else’ statement is the next form of control statement that allows
JavaScript to execute statements in a more controlled way.
Example: var age = 15; if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}else{ document.write("<b>Does not qualify for
driving</b>");
}

3] if...else if... Statement

The ‘if...else if...’ statement is an advanced form of if…else that allows JavaScript
to make a correct decision out of several conditions.
Example:
var book = "maths"; if( book == "history"
){ document.write("<b>History
Book</b>");
}else if( book == "maths" ){
document.write("<b>Maths Book</b>"); }else{
document.write("<b>Unknown Book</b>");
}

4] Switch statements
You can use a switch statement which handles exactly this situation, and it
does so more efficiently than repeated if...else if statements.
Example: var grade = 'A';
document.write("Entering switch block<br
/>"); switch (grade)
{ case 'A': document.write("Good job<br
/>"); break; case 'B':
document.write("Pretty good<br />");
break; case 'C': document.write("Passed<br

Jspm’s Rscoe Poly, Tathawade 46

Online Parking Booking System (OPBS)

/>"); break; case 'D': document.write("Not

so good<br />"); break; default:
document.write("Unknown grade<br />")
}

5] While Loop
The purpose of a while loop is to execute a statement or code block
repeatedly as long as an expression is true. Once the expression becomes
false, the loop terminates.
Example: var count = 0; document.write("Starting Loop
"); while (count < 10){ document.write("Current
Count : " + count + "<br />"); count++;
}document.write("Loop stopped!");

6] Do while loop
The do...while loop is similar to the while loop except that the condition
check happens at the end of the loop. This means that the loop will always
be executed at least once, even if the condition is false Example: var count
= 0; document.write("Starting Loop" + "<br />"); do{
document.write("Current Count : " + count + "<br />"); count+
+;

}while (count < 5); document.write

("Loop stopped!");

7] The for Loop

The ‘for’ loop is the most compact form of
looping. Example: var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++){
document.write("Current Count : " + count );
document.write("<br />");

Jspm’s Rscoe Poly, Tathawade 47

Online Parking Booking System (OPBS)

} document.write("Loop
stopped!");

8] for in loop
The for...in loop is used to loop through an object's properties. As we have
not discussed Objects yet, you may not feel comfortable with this loop.
But once you understand how objects behave in JavaScript, you will find
this loop very useful.
Example: var aProperty; document.write("Navigator
Object Properties<br /> "); for (aProperty in
navigator)
{
document.write(aProperty);
document.write("<br />");
} document.write ("Exiting from the
loop!");

9] functions

A function is a group of reusable code which can be called anywhere in

your program.
Example:
function sayHello()
{ alert("Hello
there");
}

10] Events
When the page loads, it is called an event. When the user clicks a button,
that click too is an event. Other examples include events like pressing any
key, closing a window, resizing a window, etc.

Jspm’s Rscoe Poly, Tathawade 48

Online Parking Booking System (OPBS)

Example: <input type="button" onclick="sayHello()" value="Say Hello" />

<script type="text/javascript">
function sayHello() {
document.write ("Hello World")
}
</script>

11] Javascript object

JavaScript is an Object Oriented Programming (OOP) language. A
programming language can be called object-oriented if it provides four
basic capabilities to developers:
Example:
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100); document.write("Book title is : " +
myBook.title + "<br>");

12] Array

The Array object lets you store multiple values in a single variable. It stores
a fixed-size sequential collection of elements of the same type.
Example:
var fruits = [ "apple", "orange", "mango" ];
fruits[0] is the first element fruits[1] is the
second element fruits[2] is the third
element

13] Length
Javascript array length property returns an unsigned, 32-bit integer that
specifies the number of elements in an array array.length Example:
var arr = new Array( 10, 20, 30 ); document.write("arr.length
is:" + arr.length);

Jspm’s Rscoe Poly, Tathawade 49

Online Parking Booking System (OPBS)

4. Python:

Python is an interpreted, object-oriented, high-level programming language with

dynamic semantics. Its high-level built in data structures, combined with dynamic
typing and dynamic binding, make it very attractive for Rapid Application
Development, as well as for use as a scripting or glue language to connect existing
components together. Python's simple, easy to learn syntax emphasizes readability
and therefore reduces the cost of program maintenance. Python supports modules and
packages, which encourages program modularity and code reuse. The Python
interpreter and the extensive standard library are available in source or binary form
without charge for all major platforms, and can be freely distributed.

Class –
A class is a user-defined blueprint or prototype from which objects are created. Classes
provide a means of bundling data and functionality together. Creating a new class creates
a new type of object, allowing new instances of that type to be made. Each class instance
can have attributes attached to it for maintaining its state. Class instances can also have
methods (defined by their class) for modifying their state.
Syntax: Class Definition

class ClassName:
# Statement

Function –
Python Functions is a block of statements that return the specific task.
The idea is to put some commonly or repeatedly done tasks together and make a function
so that instead of writing the same code again and again for different inputs, we can do
the function calls to reuse code contained in it over and over again. Some Benefits of
Using Functions

 Increase Code Readability

 Increase Code Reusability

Python Function Declaration

The syntax to declare a function is:

Jspm’s Rscoe Poly, Tathawade 50

Online Parking Booking System (OPBS)

For Loop in Python –

For loops are used for sequential traversal. For example: traversing a list or string or
array etc. In Python, there is “for in” loop which is similar to for each loop in other
languages. Let us learn how to use for in loop for sequential traversals.

Syntax : for iterator_var in sequence:

statements(s)

Return Statement –
A return statement is used to end the execution of the function call and “returns” the
result (value of the expression following the return keyword) to the caller. The statements
after the return statements are not executed. If the return statement is without any
expression, then the special value None is returned. A return statement is overall used to
invoke a function so that the passed statements can be executed.
Syntax:

def fun():
statements
.
.
return [expression]

Jspm’s Rscoe Poly, Tathawade 51

Online Parking Booking System (OPBS)

5. Bootstrap:

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used
for creating dynamic websites layout and web applications. Bootstrap is one of the most
popular front-end frameworks which has a nice set of predefined CSS codes. Bootstrap
uses different types of classes to make responsive websites. Bootstrap 5 is the newest
version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework
for creating responsive, mobile-first websites. It was officially released on 16 June 2020
after several months of redefining its features.

Benefits of using Bootstrap:

 Bootstrap makes it simple to get started with coding. Using Bootstrap, even if you
don’t know much about coding, you can create an appealing landing page. The sole
requirement is that you have some CSS and HTML experience.
 Having a mobile-responsive website has become a requirement, and with Bootstrap
on your side, this work is a breeze. It offers a fluid grid layout that adjusts to the size
of the screen.
 In Bootstrap, you’ll find a variety of templates. If you don’t like them, you can make
your own using the CSS file. Furthermore, if you don’t have time to start from
scratch, you can combine the customization with existing code to improve
functionality.
 One of the most notable benefits of Bootstrap is that it allows you to create landing
pages that are tailored to the needs of your target audience. It makes
recommendations for aspects like as pictures and call-to-action (CTA) that are most
appealing to your target demographic and improve user experience.

Jspm’s Rscoe Poly, Tathawade 52

Online Parking Booking System (OPBS)

 Sliders, drop-down menus, tabs, and other interactive components are needed to make
the pages more engaging. With Bootstrap on your side, you can quickly add these
components because the Bootstrap package includes various JavaScript plugins.
 On the Bootstrap website, there is easy-to-read and efficient documentation. The
framework is simple, and the documentation makes UI design much easier.
 One of the most significant benefits of utilising Bootstrap is its cross-browser
compatibility. Heave a breath of relief when it comes to presenting your landing page
across numerous browsers with Bootstrap by your side.

6. SQLite:

SQLite is an in-process library that implements a self-contained, serverless, zero-

configuration, transactional SQL database engine. It is a popular choice as an
embedded database for local/client storage in application software such as web
browsers. It is also used in many other applications that need a lightweight, embedded
database.

Installation on Windows:

If you want to install the official SQLite binary and interact with the database using
the terminal, you can follow these directions:

1. Visit the official website of SQLite to download the zip file.

2. Download that zip file.

3. Create a folder in C or D ( wherever you want ) for storing SQLite by expanding

the zip file.

4. Open the command prompt and set the path for the location of the SQLite folder
given in the previous step. After that write “sqlite3” and press enter.

Jspm’s Rscoe Poly, Tathawade 53

Online Parking Booking System (OPBS)

CHAPTER 7
SYSTEM TESTING

Jspm’s Rscoe Poly, Tathawade 54

Online Parking Booking System (OPBS)

7.1 System Testing:

System testing is the stage of implementation, which is aimed at ensuring that

the system works accurately and efficiently before live operation
commences. Testing is the process of executing the program with the intent
of finding errors and missing operations and also a complete verification to
determine whether the objectives are met and the user requirements are
satisfied. The ultimate aim is quality assurance. Tests are carried out and the
results are compared with the expected document. In the case of erroneous
results, debugging is done. Using detailed testing strategies, a test plan is
carried out on each module.

7.2 Unit Testing:

The Software units in a system are modules and routines that are assembled
and integrated to perform a specific function. Unit testing focuses first on
modules, independently of one another, to locate errors. This enables, to
detect errors in coding and logic that are contained within each module. This
testing includes entering data and ascertaining if the value matches to the
type and size supported by java. The various controls are tested to ensure that
each performs its action as required.

7.3 Integration Testing:

Data can be lost across any interface, one module can have an adverse effect
on another, sub functions when combined, may not produce the desired
major functions. Integration testing is a systematic testing to discover errors
associated within the interface. The objective is to take unit tested modules
and build a program structure. All the modules are combined and tested as a
whole. Here the Server module and Client module options are integrated and
tested. This testing provides the assurance that the application is well
integrated functional unit with smooth transition of data.

Jspm’s Rscoe Poly, Tathawade 55

Online Parking Booking System (OPBS)

Fig. Integration Testing

7.4 User Acceptance Testing:

User acceptance of a system is the key factor for the success of any system.
The system under consideration is tested for the user acceptance by
constantly keeping in touch with the system users at time of developing and
making changes whenever required.

Jspm’s Rscoe Poly, Tathawade 56

Online Parking Booking System (OPBS)

CHAPTER 8
DIAGRAMS

Jspm’s Rscoe Poly, Tathawade 57

Online Parking Booking System (OPBS)

8.1 ARCHITECTURE:
The Architecture Diagram consists of many components like the user
interface, a login-screen, an in-app store, the database, etc. To manage these
components, architecture diagram is made, so that we can logically define the
relationships and manner of interactions between all of these components for
a Web application.

The Architecture Diagram showing how everything fits together

The following diagram shows, Web application architecture diagram. It is
basically divided into two parts:
1. Front-end
2. Back-end

Fig. Web Application Architecture Diagram

Jspm’s Rscoe Poly, Tathawade 58

Online Parking Booking System (OPBS)

8.2 Use Case Diagram:

A use case diagram is a dynamic or behavior diagram in UML. Use case

diagrams model the functionality of a system using actors and use cases. Use
cases are a set of actions, services, and functions that the system needs to
perform. In this context, a "system" is something being developed or
operated, such as a web site. The "actors" are people or entities operating
under defined roles within the system.

Fig. Use Case Diagram.

Jspm’s Rscoe Poly, Tathawade 59

Online Parking Booking System (OPBS)

8.3 Sequence Diagram:

A sequence diagram simply depicts interaction between objects in a

sequential order i.e. the order in which these interactions take place. We can
also use the terms event diagrams or event scenarios to refer to a sequence
diagram. Sequence diagrams describe how and in what order the objects in a
system function. These diagrams are widely used by businessmen and
software developers to document and understand requirements for new and
existing systems.
Sequence Diagram consists of: -
• Actors
• Lifelines
• Messages

Fig. Sequence Diagram.

Jspm’s Rscoe Poly, Tathawade 60

Online Parking Booking System (OPBS)

8.4 Class Diagram:

A class diagram in the Unified Modeling Language is a type of static structure

diagram that describes the structure of a system by showing the system's classes,
their attributes, operations, and the relationships among objects.

The standard class diagram is composed of three sections:

• Upper section: Contains the name of the class. This section is always
required, whether you are talking about the classifier or an object.

• Middle section: Contains the attributes of the class. Use this section to
describe the qualities of the class. This is only required when describing a
specific instance of a class.

• Bottom section: Includes class operations (methods). Displayed in list

format, each operation takes up its own line. The operations describe how a
class interacts with data.

Fig. Class Diagram

Jspm’s Rscoe Poly, Tathawade 61

Online Parking Booking System (OPBS)

8.5 ER Diagram:

An entity relationship model, also called as entity-relationship (ER) diagram, is a

graphical representation of entities and their relationships to each other, typically used in
computing in regard to the organization of data within databases or information systems.

An ER diagram consist of:

• Entity

• Attribute

Fig. ER Diagram

Jspm’s Rscoe Poly, Tathawade 62

Online Parking Booking System (OPBS)

8.6 Data Flow Diagram:

A Data Flow Diagram (DFD) is a traditional visual representation of the information flows
within a system. A neat and clear DFD can depict the right amount of the system
requirement graphically. It can be manual, automated, or a combination of both.

Fig. DFD Level 0

Jspm’s Rscoe Poly, Tathawade 63

Online Parking Booking System (OPBS)

8.7 Flowchart:

A flowchart is a visual representation of the sequence of steps and decisions needed to

perform a process. Each step in the sequence is noted within a diagram shape. Steps are
linked by connecting lines and directional arrows. This allows anyone to view the
flowchart and logically follow the process from beginning to end.

Start

Fig. Flowchart

Jspm’s Rscoe Poly, Tathawade 64

Online Parking Booking System (OPBS)

CHAPTER 9
EXPERIMENTATION

Jspm’s Rscoe Poly, Tathawade 65

Online Parking Booking System (OPBS)

9.1 Test Plan:

Testing is a set of tasks that are preplanned and conducted systematically,
which assures working of individual modules as desired or planned.
Software testing is one of the key elements in software projects that are
often referred to as verification and validation.

9.2 Test Pass OR Fail Criteria:

When actual and expected results are same then test will be passed. When actual
and expected results are different then test will be failed.

9.3 Test Entry OR Exit Criteria:

Describe the entry and exit criteria used to start testing and determine when to
stop testing.

• Entry Criteria
As soon as have requirement we can start testing.

• Exit Criteria
When bug rate falls below certain level, we can stop testing.

9.4 Testing Type:

• Functional Testing

• Black Box Testing

• White Box Testing

• GUI Testing

• Integration Testing.

Jspm’s Rscoe Poly, Tathawade 66

Online Parking Booking System (OPBS)

9.5 Test Cases:

Test Cases ID Expected Result Actual Result Result (Pass/Fail)

Registration Page TC_01 Should accept Accepted user’s Pass
user’s Name, Mail Name, Mail Id,
Id, Car Number, Car Number,
Password Password
Login Page TC_02 Should accept Accepted Email Pass
Email Id and Id and
Password and Password and
retrieve to Booking retrieved to
page Booking page
Login Page TC_03 Should not accept Not accepted Pass
invalid Email Id and invalid Email Id
Password and Password
Book Parking TC_04 Should accept the Accepted the Pass
Page Date, Start time, Date, Start time,
End time, Car End time, Car
number from user number from
user
View Parking TC_05 Should show the Showed the Pass
Page booked slot in red booked slot in
colour red colour
View Booking TC_06 Should show all Showed all users Pass
Page users details details
Payment Page TC_07 Should accept the Accepted the Pass
payment from user payment from
user
Feedback Page TC_08 Should receive Received Pass
feedback from user feedback from
user
Logout Button TC_09 It should redirect to Redirected to Pass
login page login page

Jspm’s Rscoe Poly, Tathawade 67

Online Parking Booking System (OPBS)

CHAPTER 10
RESULT

Jspm’s Rscoe Poly, Tathawade 68

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 69

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 70

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 71

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 72

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 73

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 74

Online Parking Booking System (OPBS)

CHAPTER 11
CONCLUSION

Jspm’s Rscoe Poly, Tathawade 75

Online Parking Booking System (OPBS)

In this project, we have successfully developed a website named “Online Parking

Booking System”. Since that we live in a technologically advanced environment, the
online automobile parking reservation system enhances the current system.
Adopting parking management system significantly reduces the amount of time
consumed in seeking the parking space, renders valuable data upon the availability of the
parking area, accurate mapping of the parking space, offers guidance and suggestion for
proper vehicle parking increase the safety of the property since the parking lot is
numbering. With this new system is mandatory, it enables the user of the system to
reserve a parking slot online. After deployment of the project Online Parking Booking
System (OPBS), we believe that our website will help many car owner to park their
vehicle by learning on our website.

Jspm’s Rscoe Poly, Tathawade 76

Online Parking Booking System (OPBS)

CHAPTER 12
FUTURE SCOPE

Jspm’s Rscoe Poly, Tathawade 77

Online Parking Booking System (OPBS)

These facilities are absent from some parking lots, which makes them ineligible for
parking and violates all security regulations. By looking such a huge concern, it is highly
required that each parking area should be well equipped with high tech parking control
systems, that nevertheless lasts the best.
These characteristics are therefore crucial nowadays to protect your vehicles and to assess
the cost associated with each vehicle's entry and exit. This also helps with the Security
and time management of the parking. Because of the increased transmission of
information via technology, PPK is now easier to trade. From manual and neighbourhood
vehicle parking reservation systems to computerized and online. The Vehicle Parking
Reservation System was used to manage, register, and pay for parking spaces booking
simpler. The research has helped reduce paperwork and errors in the reservation
workplace like misspelling the quantity plate, vehicle version, time wastage, delays, and
congestion at the reservation workplace. The examine became also useful to the
researcher in the manner that it helped him in setting the received information in
computer science with a sensible attitude. This study shall additionally be useful to the
government in getting applicable records and make policies for such organizations and
encourage others to do the same.

Jspm’s Rscoe Poly, Tathawade 78

Online Parking Booking System (OPBS)

CHAPTER 13
BIBLIOGRAPHY

Jspm’s Rscoe Poly, Tathawade 79

Online Parking Booking System (OPBS)

Books: -

[1] A. Deokar, R. Bhoye, S. Nayak and N. Sharma, "Online Parking Booking

System," International Research Journal of Engineering and Technology
(IRJET), Maharashtra, 2020.
[2] D. Kanteti, D. V. S. Srikar and T. K. Ramesh, "Smart Parking System For
Commercial Stretch In Cities," IEEE, India, 2017.
[3] R. Grodi, D. B. Rawat and R.-G. Fernando, "Smart Parking: Parking
Occupancy Monitoring and Visualization System for Smart Cities," IEEE,
USA, 2016.

Websites:-

https://www.youtube.com/

https://www.w3schools.com/

https://www.tutorialspoint.com/

https://www.javatpoint.com/

https://www.geeksforgeeks.org/

https://wowjs.uk/

https://www.w3schools.com/

https://ieeeproject.org/ieee-projects/ieee-project-papers/

https://youtu.be/xYluy7L3CBg

Jspm’s Rscoe Poly, Tathawade 80

Online Parking Booking System (OPBS)

CHAPTER 14
PAPER PUBLICATION

Jspm’s Rscoe Poly, Tathawade 81

Online Parking Booking System (OPBS)

14.1 Paper Published:

Jspm’s Rscoe Poly, Tathawade 82

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 83

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 84

Online Parking Booking System (OPBS)

14.2 Certificates:

Jspm’s Rscoe Poly, Tathawade 85

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 86

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 87

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 88

Online Parking Booking System (OPBS)

Jspm’s Rscoe Poly, Tathawade 89