A PROJECT REPORT

ON

PADDLE UP AND TRAVERSE

Submitted by

Mr. Sachin Prajapati

in partial fulfilment of the requirements for the degree

Of

BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY)

Under the guidance of

Prof. THIRU MENAGA PRABHU NADAR
Department of Information Techno

1
Mahendra Pratap Sharada Prasad Singh College of Arts, Commerce and Science

(SEM VI) (2024 - 2025)

1
CERTIFICATE
The report titled

PADDLE UP AND TRAVERSE Completed

by

Mr. Sachin Prajapati

as a partial fulfillment of the

requirements for the degree

of

BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY)

from

The University of Mumbai

2
Project Guide Examiner

Head of Department Principle

3
4
DECLARATION

I, Mr Sachin Prajapati, hereby declare that this project entitled

PADDLE UP AND TRAVERSE represents my ideas in my own words, and where others'
ideas or words have been included, I have adequately cited and referenced the sources.

I also declare that I have adhered to all academic honesty and integrity principles and
have not misrepresented, fabricated or falsified any idea/data/fact/source in my
submission.

I understand that any violation of the above will cause disciplinary action by the
Institute and can also evoke penal action from the sources which have thus not been
properly cited or from whom proper permission has not been taken when needed.

SIGNATURE OF THE STUDENT:

PLACE:

DATE:

5
ABSTRACT

If you’re into ecological living and environmentally aware, cycle is the

most efficient mode of transportation. The best possible way to help you get in
place in time is with the help of Bicycles. There will be lesser chances of you
getting stuck in traffic and you are more likely to want to get to the destination with
the help of a Bicycle. The myriad vehicles on the roads have made it very difficult
for the daily commuters to get to their destination on time and also pollutes the
environment and emits carbon causes Air pollution. Even in the case of the people
who book a taxi for themselves, it becomes hectic for them to get stuck in the
traffic and staying there for hours.

So, Bicycle are the only solution that can come to the rescue here and help
people reach their destination on time. Cycling reduces carbon emissions and
provides better endurance for the rider. Companies have started launching Bicycle
rental mobile apps as it is a great relief to the ecosystem from vehicle pollution and
the daily honking. Secondly, there will be considerably lesser cars seen on the
roads, hence, less traffic, pure and clean Environment.

6
ACKNOWLEDGEMENT
I am pleased to present the “PADDLE UP AND TRAVERSE ” Project and take this
opportunity to express my sincere gratitude to our Prof. Thiru Menaga Prabhu Nadar
who motivated and supported me in completing this project.
No project is ever complete without the guidance of those experts who have previously
walked this Path and mastered it, becoming mentors in the process. I would like to take
this opportunity to thank all the individuals who helped me in bringing this project to
life.I am thankful to my college for providing excellent facilities that helped me complete
and present This project.I express my deepest gratitude to my project guide for their
valuable and timely advice during the
Various phases of the project. I am also grateful for the facilities, support, and patience
they provided,Along with their trust in my abilities and the flexibility they offered in
terms of working and reporting Schedules .

7
TABLE OF CONTENTS

CHAPTER NO 1: INTRODUCTION
1.1 Background
1.2 Objectives
1.3 Purpose, Scope and Applicability
1.3.1 Purpose
1.3.2 Scope
1.3.3 Applicability
CHAPTER 2: SURVEY OF TECHNOLOGIES

2.1 Survey
2.2 Survey Responses
2.3 Statistical Diagram
2.4 Survey Result

8
CHAPTER 3: REQUIREMENTS & ANALYSIS

3.1 Problem Definition

3.2 Planning and Scheduling
3.2.1 Gantt Chart
3.2.2 PERT Diagram
3.3 Hardware and Software requirement specifications
3.4 Conceptual Models
3.4.1 Use Case Diagram
3.4.2 Sequence Diagram
3.4.3 Activity Diagram
3.4.4 Flowchart Diagram
CHAPTER 4: SYSTEM DESIGN
4.1 User Interface
4.2 Pseudo Code
CHAPTER 5: Implementation CHAPTER 6: Testing
5.1 Screenshots And Descriptions
6. 1 Test Cases
CHAPTER 7: CONCLUSION

7.1 Conclusion Of The Project

7.2 Future Scope Of The Project

LIST OF TABLES

Table No 3.2.1 Gant Table and Gantt Table in Excel Table No 3.2.2 Pert Table Table No
3.4.1 Use Case Table Table No 3.4.2 Class Table Table No 3.4.3 Activity Table Table
No 3.4.4 Flowchart Table

Table No. 6.1.1 Registration form

Table No. 6.1.2 Login form
Table No. 6.1.3 Booking
Table No. 6.1.5 Payment
9
LIST FIGURES
Fig 3.2.1 Gantt Chart Fig 3.2.2 Pert Chart Fig 3.4.1 Use Case Diagram Fig 3.4.2 Class Diagram Fig
3.4.3 Activity Diagram Fig 3.4.4 Flowchart Diagram

Fig 4.2 Login Page

Fig 4.3 Registration Page
Fig 5.1 Index Page
Fig 5.2 Login Page
Fig 5.3.1 booking Page
Fig 5.3.2 booking Page
Fig 5.4 Payment Page
Fig 5.5 Subscription Page

Fig 5.6 Admin Panel Page

Fig 5.7 Cycle Details Page

CHAPTER 1: INTRODUCTION

10
If you’re into ecological living and environmentally aware, cycle is the most
efficient mode of transportation. The best possible way to help you get in place in time is
with the help of Bicycles. There will be lesser chances of you getting stuck in traffic and
you are more likely to want to get to the destination with the help of a Bicycle. The myriad
vehicles on the roads have made it very difficult for the daily commuters to get to their
destination on time and also pollutes the environment and emits carbon causes Air
pollution. Even in the case of the people who book a taxi for themselves, it becomes hectic
for them to get stuck in the traffic and staying there for hours.
So, Bicycle are the only solution that can come to the rescue here and help people
reach their destination on time. Cycling reduces carbon emissions and provides better
endurance for the rider. Companies have started launching Bicycle rental mobile apps as it
is a great relief to the ecosystem from vehicle pollution and the daily honking. Secondly,
there will be considerably lesser cars seen on the roads, hence, less traffic, pure and clean
Environment

1.1 BACKGROUND

• The purpose of this project is to provide a platform for users in an effective and efficient
way.

• Online Bicycle Rental System App is a one stop portal.

• It provides bicycle on rent as per our requirements.

• This web application would be implementable irrespective of the location.

• It provides the facility to make online booking of bicycle for us.

• Also, how many of you would want to purchase a bicycle and ride it just for leisure or
maybe just for recreation? Why would anyone spend their hard-earned money on
purchasing a bicycle when there is a solution to getting one on rent?

• It is the easiest way of getting a bicycle on rent and riding it in your city. You can also
plan a vacation and rent a bicycle from one of this app.

• This had offered scope for new apps to come into being as more people are nowadays
opting for it.

11
1.2 OBJECTIVES
• To make the process of renting the bicycle easy and getting a perfect ride which
improves strength balance and coordination.
• It will also help to prevent falls and fractures. Riding a bicycle is an ideal form of
exercise if you have osteoarthritis, because it is a low-impact exercise that places little
stress on joints.

• Tracking for the user will become easier.

• To book a bicycle from anywhere.

• To reduce the pollution.

• To maximise the use of bicycle as it will save our environment and keep us healthy.

• However, electric bikes and cars emits less pollution but the generation of electricity is
created by burning fossil fuels which is equal to emitting pollution.

1.3 PURPOSE, SCOPE AND APPLICABILITY

1.3.1 PURPOSE
• Cycling doesn’t have any carbon footprint on the environment and is any good option
for people who care about nature.

• Due to pandemic people have been neglecting their health and cycling is a great way to
harness their energy and to preserve fossil fuel.

• Modernisation and industrialist society has been side lining the atmosphere and
environment which provides all the sources to those resources.

• Cycling is not only better alternative to transportation but also less emission of carbon in
atmosphere with health benefits to the rider.

• Can keep track on our physical activities and strengths using this app.

• Increasing the rates of fuels, use of bicycle is the best and cheap option to travel
compact distances.

• To avoid overcrowding cities and roads leads to traffic and anguish the environment.

• Sometimes buying a cycle also is not possible because small houses, so renting is the
best option for the user convenience.

12
1.3.2 SCOPE
• A bicycle renting app for urban spaces. Locals and tourists can pick-up and drop their
rented bicycles all around the city. Their usage will be counted in hours. The app will
focus on the user’s experience while using the service.

• India has a rapidly growing urban scenario and generally a huge traffic. We might really
benefit from a bicycle hared renting system mainly in rapidly growing unplanned cities.

• Need not to buy a new cycle, can rent a bicycle anytime whenever required.

• To reduce the consumption of fossil fuels which are non-renewable source of energy.

• Bicycle riding uses minimal fossil fuels and is pollution-free mode of transport.

• In overcrowding urban cities, bicycles riding conserves roadway and residential

space,thereby providing opportunities for less concrete and more plant life.

• People are ready to adapt an efficient lifestyle if it means they aren’t giving up anything
like precious time or peace of mind or money.

• Services are to charge for the usage on a per-hour basis. It confuses sometimes as to a
lack of relation between what you are charged and what you used

• Payment is available by cash mode, online payment mode system.

• In online payment getaway, credit card, debit card, internet banking, payment through
UPI.

1.3.3 APPLICABILITY
• This app can be installed in MNC’s for employees who can travel by bicycles to cut off
the use of vehicles.

• Tourists can also use this to explore and to visit locations. Which will reduce the cost of
vehicles and a step towards green and clean environment.

• Any of the age can use this app to rent a bicycle according to their comfort.

• Fitness freaks can rent for a month through the subscription feature of this app.

• Number of cycles and variety are available.

13
• This bicycle can be rented at parks and events for convenience.

• Also, can be leased for weekend getaways and ride around with cycles.

1.5 ORGANISATION OF REPORT

• Heading to chapter 2, we will have an idea about the technologies used to make this
project.

• Further in chapter 3, we look forward to the requirements and problem that are solved
under this project.

• Diagrams such as use case diagram, class diagram, activity diagram and flowchart
diagram will be used to show the conceptual working of this project.

• In chapter 4, screenshots of the user interface along with pseudo code is attached.

CHAPTER 2: SURVEY OF TECHNOLOGIES

2.1 Existing System:

2.1.1 FlickBike-Deelfietsen:
FlickBike has been teaming up with different municipalities, public transport
providers and business partners to offer a convenient, honest, transparent and quality
bikesharing service.

Functionalities offered by FlickBike:

1. They love biking, especially in addition to public transport.

2. Their bikes contain as much recycled parts as possible.

3. They do NOT sell data generated by the use of the service.

4. They do NOT allow promotions and ads on their platform.

14
5. They love their partners: Municipalities, Public Transport operators, Mass
providers.

2.1.2 Yulu - EVs for Rides & Rentals:

Yulu is India's leading micro-mobility service provider, which offers unique vehicles
for the daily commute. Starting off as a mission to eliminate traffic congestion in India,
Yulu provides the safest commute solution through a user-friendly mobile app to enable
sustainable commuting.
Yulu zones are located at all the appropriate locations (including metro stations, bus stands,
office spaces, residential areas, corporate offices, etc.) to make those first and last-mile
journeys smooth, affordable, and convenient!

Functionalities offered by Yulu:

1. Smart, dockless vehicle: Electric fully automated vehicles powered by IoT
technology.

2. Prioritizing safety: All Yulu vehicles are frequently disinfected & sanitized
by WHO-recommended chemicals to ensure safety on the go. Our field staff
wears masks and gloves while handling each vehicle.

3. Last sanitized stamp: Every Yulu has a "Last Sanitised" stamp on the app
informing you when a Yulu vehicle was last disinfected.

4. Healthy & eco-friendly: Yulu leaves behind zero carbon emissions to keep
the environment healthy. What's more? Yulu Move keeps track of the number of
calories you burn to keep you healthy!

5. Easily accessible: Yulu Zones are placed at all appropriate locations

(including metro stations, bus stands, office spaces, residential areas, corporate
offices etc.)

6. Affordable: Our pricing is very nominal as we charge not for the distance
covered but for the time you rent it!

7. Convenient payment: All payments are 100% digital, so you don't have to
look for any change in your pocket. International payment is also accepted.

15
8. Saver packs: We've curated Saver Packs to cater to your every commute
need, so now you can save more on your daily rides!

9. Rental plans: Need Yulu for a longer duration? You can rent a Yulu vehicle
for up to 30 days at an affordable cost.

2.1.3 MYBYK - Pedal & EBike Rental:

MYBYK is India's first, largest, and most successful public bike share service. They
operate a fleet of 6000+ bicycles with a presence across multiple cities in India —
Ahmedabad, Kochi, Udaipur, Mumbai, and Rajkot.

At MYBYK, they believe that electric cars may seem very futuristic but they
won’t solve the problem of parking, traffic, and congestion in cities. They envision
moving India and the world towards sustainable commute solutions, one ride at a time.
They aim to bring a micro-mobility revolution in India that makes cities sustainable and
future-proof.

Functionalities offered by MYBYK:

1. Pick up and drop the MYBYK at any hub:
Unlock a bike from your nearest hub via the app and drop it at any other hub -
all under one subscription plan.

2. Take the MYBYK home with you:

Get a weekly or a monthly plan and keep the MYBYK with you!

3. Unlock the bike using the App:

Lock the bike manually anytime, anywhere and unlock it using the App

4. Digitized payments for easy access:

Unlock a bike from any Hub with our easy-to-use app. Make payment through a
completely digitized process.

5. No hassle of repair and maintenance :

We take care of all the repairs and maintenance of the bike. If you're facing any
problem with the bike, just drop it at the MYBYK hub near you, mention the issue
after ending the ride. Take another bike.

6. Affordable Commute:

16
Choose a subscription that fits your needs with Hourly, Weekly & Monthly
options. Enjoy MYBYK rides with minimal subscription plans

7. First and Last Mile Connectivity:

MYBYK connects with public transport with hubs outside Metro Stations and
BRTS Bus Stands so you can commute long distances.

2.2 Drawbacks of these websites:

1. FlickBike-Deelfietsen: The Drawback of this website is that it only offers services to few
countries which doesn’t include India.This makes the website limit It’s range and It’s to larger
userbase.

2. Yulu - EVs for Rides & Rentals: There are countless issues with yulu.
a.The app takes more than 2 mins to locate.
b.The app doesn't allow to end the ride sometimes.
c.The vehicle turns off while someone is riding it. This is terrible and can lead to
accidents.

3. MYBYK - Pedal & EBike Rental: Everything about MyByk is great except that it gives
very poor user experience. The app shows the cycles that are not even located at the specified
hub. And the ones that are actually located are not listed at all. Because of this, I cannot unlock
and use the bicycles available. Also, the previous version was better as it showed the
maintenance percentage of each bike. In the new version, it is very difficult to know the actual
bike condition just on the basis of the previous user's feedback.
2.3 ComparativeAnalysisofthesewebsites:
1. FlickBike-Deelfietsen: As this app only offers services in selective countries only and it
doesn't give services to India and Indian people, so this gives us an upper hand to implement the
model in India and provide betterment to the indian people.

2. Yulu - EVs for Rides & Rentals: As this app has countless issues with its software and
bugs we get an upper hand here by improving our software glitches and by continuously working
on it and making it more elegant to use for better user experience.

3. MYBYK - Pedal & EBike Rental: This website has a weak point of having a simple UI
Which wouldn’t feel attractive to the user so in our website we will be going to make an

17
attractive UI which will definitely be user friendly and be more understandable to the user and
this will help us reach out to larger audience.

CHAPTER 3: REQUIREMENTS AND ANALYSIS

3.1 PROBLEM DEFINITION

• In today’s urban lifestyle of peoples is turning towards physically unhealthy and

mentally unfit lifestyle.

• In urban cities the area of the apartments or rooms are quite combat now-a-days.

• Sometimes not everyone can afford Bicycles or sometime doesn’t get time to ride
regularly therefore, it requires regular maintenance.

• Therefore, introduce to an app where can rent a bicycle for an hour or else depends how
much user requires for the time.

• Renting is an affordable price can attract many users to ride a bicycle by renting. •
However, in cities it can be very useful.

• Installing in urban areas, can creates awakening for fitness and people can easily ride
bicycle without owning it.

3.2 PLANNING AND SCHEDULING

3.2.1 Gantt Chart
A Gantt chart is a project management tool that illustrates a project plan. It typically
includes two sections: the left side outlines a list of tasks, while the right side has a timeline with
schedule bars that visualise work. The Gantt chart can also include the start and end dates of
tasks, milestones, dependencies between tasks, and assignees. To keep up with the demands of
modern software development, roadmap tools like Jira Software include features like a
collapsible task structure and resource management panels. These roadmap tools help teams
maintain a coherent project strategy despite the iterative nature of the software development
process.

18
Gantt Table:

SR.NO TASK START DATE END DATE DURATION

Planning 15-Jun-23 25-Jun-23 10 days

1

Background Survey 26-Jun-23 30-Jun-23 05 days

2

Requirement Analysis 01-Jul-23 15-SeJul-23 15 days

3

System design 16-Jul-23 31-Aug-23 30 days

4

5 Program design 01-Sep-23 11-Oct-23 40 days

Coding 1 12-Oct-23 19-Dec-23 45 days

6

Testing 1 20-Dec-23 02-Feb-24 25 days

7

Coding 2 03-Feb-24 25-Feb-24 45 days

8

Testing 2 26-Feb-24 04-Mar-24 25 days

9

10 Implementation 05-Mar-24 15-Mar-24 20 days

Table 3.2.1 Gant table

19
Gantt Chart Excel:

Fig 3.2.1 Gantt Chart Excel:

20
Fig 3.2.1 Gantt Chart
3.2.2 Pert Chart
PERT was developed to take account of the uncertainty surrounding estimates of task
durations. It was developed in an environment of expensive, high-risk and state-of-the-art
projects — not that dissimilar to many of today’s large software projects.
▪ Most likely time: the time we would expect the task to take under
normal circumstances. We shall identify this by the letter m.

21
▪ Optimistic time: the shortest time in which we could expect to complete the activity,
barring outright miracles. We shall use the letter a for this.

▪ Pessimistic time: the worst possible time, allowing for all reasonable eventualities but
excluding ‘acts of God and warfare’ (as they say in most insurance exclusion clauses).
We shall call this b.

Formulas:
te = (a+4m+b)/6
Where, te –
Expected date a –
Optimistic m – Most
Likely b –
Pessimistic
sd = (b-a)/6 where, sd –
Standard Deviation b –
Pessimistic a –
Optimistic

PERT Table:

Sr no Activity Activities Optimistic Most Pessimistic Expected Time

No. Likely (b) Standard
(a) (m) (te) Deviation
(sd)

22
Planning
1. A 5 10 12 9.5 1.16

2. B 4 5 6 5.0 0.3
Background
Survey

13 18 15.1 0.83
3. C Requirement 1
Analysis 5

4. D System design 25 30 32 29.5 1.16

Program design 30 40 45 39.1 2.5

5. E

6. F Coding 1 40 45 46 44.3 1

7. G Testing 1 20 25 27 24.5 1.16

8. H Coding 2 40 45 46 44.3 1

9. I Testing 2 20 25 27 24.5 1.16

10. J Implementation 10 20 22 18.6 2

total 207 days 260 days 281 days

Table No. 3.2.2 Pert Table

23
PERT Chart:

Fig No. 3.2.2 Pert Chart

24
3.3 HARDWARE AND SOFTWARE REQUIREMENTS
HARDWARE REQUIREMENTS:
• Windows Operating System
• 500 MB free run time memory
• Recommended 4 GB of RAM

SOFTWARE REQUIREMENT:
• HTML, CSS
• PHP, JavaScript
• MySQL

3.4 CONCEPTUAL MODEL

3.4.1 USE CASE DIAGRAM:
A use case diagram is a graphical depiction of a user's possible interactions with a system.
A use case diagram shows various use cases and different types of users the system has and will
often be accompanied by other types of diagrams as well. The use cases are represented by either
circles or ellipses. The actors are often shown as stick figures.
Due to their simplistic nature, use case diagrams can be a good communication tool for
stakeholders. The drawings attempt to mimic the real world and provide a view for the
stakeholder to understand how the system is going to be designed.

COMPONENTS:

SYMBOL DESCRIPTION
COMPONENT
NAME

An actor specifies a roles played by a

user or any other system that interacts
Actor with that subject.

Use cases
Represent the different uses that a user
might have.

25
A line between actors and use cases. In
Associations complex diagrams, it is important to
know which actors are associated with
which use cases.

Include relationship between use cases is

Include «include». shown by a dashed arrow with an open
arrowhead from the including (base) use
case to the included (common part) use
case. The arrow is labelled with the
keyword «include».
Table No. 3.4.1 Use Case

26
Fig No. 3.4.1 Use Case

In the above diagram the user is directed to the registration page once done user can login
using the credentials used for registering. The user will be allowed to manage his/her profile and
have a look at nearby centre and cycles available. Once the cycle is chosen online payment
facility is available. There will be notifications and reminders available so that user does not miss
his/her ride.
In the Admin section admin can register himself and he/she should register the shop first
then the admin is allowed to add, update or delete the product according to their convenience and
can even manage the customer through dashboard.

27
3.4.2 CLASS DIAGRAM:

Class diagram describes the attributes and operations of a class and also the constraints
imposed on the system. The class diagrams are widely used in the modelling of object-oriented
systems because they are the only UML diagrams, which can be mapped directly with object
oriented languages.

COMPONENTS:

SYMBOL DESCRIPTION
COMPONENT
NAME

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.

28
Association A line between classes. In complex
diagrams, it is important to know which
actors are associated with which use
cases.
Table No. 3.4.2 Class

Fig No. 3.4.2 Class

In the above diagram the user is directed to the registration page once done user can login using
the credentials used for registering. Once the cycle is chosen online payment facility is available.
There will be notifications and reminders available so that user does not miss his/her ride. In the
Admin section admin can register himself and he/she should register the shop first then the admin
is allowed to add, update or delete the product according to their convenience and can even manage
the customer through dashboard.

3.4.3 ACTIVITY DIAGRAM:

29
Activity diagrams are graphical representations of workflows of stepwise activities and actions
with support for choice, iteration and concurrency. In the United Modelling Language, activity
diagrams are intended to model both computational and organisational processes (i.e., workflows),
as well as the data flows intersecting with the related activities.

COMPONENTS:

SYMBOL

COMPONENT NAME DESCRIPTION

Start Represents the beginning of a

process or workflow in an activity
diagram.

Activity Indicates the activities

that make up a modelled
process.

Represented a decision and

always has at least two paths
Decision branching out with condition
text to allow users to view
options.

Shows the directional flow, or

control flow, of the activity.
Control Flow An incoming arrow starts a step
of an activity; once
the step is completed, the flow
continues with the outgoing
arrow.

30
Marks the end state of an
activity and represents the
completion of all flows of a
End process.
Table No. 3.4.3 Activity

Fig No. 3.4.3 Activity Diagram

In the above diagram the user is directed to the registration page once done user can login using
the credentials used for registering. The user will be allowed to manage his/her profile and have a
look at nearby centre and cycles available. Once the cycle is chosen online payment facility is
available. The user can even choose subscription mode and choose to pay cash or online according
to their convenience.

31
In the Admin section admin can register himself and he/she should register the shop first then the
admin is allowed to add, update or delete the product according to their convenience and can
even manage the customer through dashboard.

3.4.3 FLOWCHART DIAGRAM:

A flowchart is a diagram that depicts a process, system or computer algorithm. They are widely
used in multiple fields to document, study, plan, improve and communicate often complex
processes in clear, easy-to-understand diagrams.

COMPONENTS:
SYMBOL DESCRIPTION
COMPONENT
NAME

Also known as the “Terminator Symbol”, this

symbol represents the start points, end points,
and potential outcomes of a path. Often contains
Start/End
“Start” or “End” within the shape.

Also known as an “Action Symbol”, this shape

Process
represents a process, action, or function. It’s the
most widely used symbol in flowcharting.
Indicated a question to be answered – usually
yes/no or true/false.
Decision

32
It represents data that is available for input or
output as well as representing resources used or
Data generated.

Used to indicate the direction of flow of control.

In drawing a proper flow chart, all necessary
Flow requirements should be listed out in logical
order.

33
Table No. 3.4.4 Flowchart

Fig No. 3.4.4 Flowchart

In the above diagram the user is directed to the registration page once done user can login using
the credentials used for registering. Once the cycle is chosen online payment facility is available.
The user can even choose subscription mode and choose to pay cash or online according to their
convenience.

34
CHAPTER 4: SYSTEM DESIGN
4.1 MODULES
4.1.1 REGISTRATION MODULE
• ALGORITHM:
STEP 1: The user needs to provide all the required information given in the
registration module.
STEP 2: The user needs to select one option from role registration as admin or user.
STEP 3: Then the user needs to provide a unique username and password for
security as well as remember it for future use.
STEP 4: On clicking the “Register” button user’s details will be added to the
database and a message will be displayed as “account is created successfully”.
STEP 5: If the user is already registered or is an existing user then a login module
redirecting button is provided.

35
Flowchart

Fig No 4.1.1 REGISTRATION MODULE-Flow chart

4.1.2 LOGIN MODULE

• ALGORITHM:
STEP 1: To log in, the user must have an account in the system, user will have to enter the
username and password and click on “log in”.
STEP 2: The user’s provided information will be authenticated by matching records from
the database.
STEP 3: If the information is matched a message as “login successful” will be displayed,
else an error message will be displayed and the user needs to enter information again.
STEP 4: If the user has forgotten the password, then he/she needs to click on “Forget
password?” then enter email or phone to get OTP and then enter the OTP received in the
text box provided.

36
STEP 5: If the user has not registered then to redirect to the register module user is supposed
to click on “Register”.

Flowchart

Fig 4.1.2 Flow chart

4.2 USER INTERFACE DESIGN

LOGIN PAGE

37
Fig 4.2 Login Page

REGISTRATION PAGE

38
Fig 4.3 Registration Page

4.2 PSEUDO CODE

39
Main Page
Login screen

Enter email and password if email

and password is right
Allow access
Else
Wrong email/password entered
Sign up
Enter details (Name, Email-Id, Password, Confirm Password)
If (properly filled details)
Account created
Else
Error
Home Screen
Click on book a ride button
Select a centre
Select a bicycle
Select payment mode
Confirm ride

40
CHAPTER 5: IMPLIMENTATION
5.1: SCEENSHOTS AND DESCRIPTIONS

INDEX PAGE :

Fig 5.1 Index Page

This is the first UI page appears when you open the application. By clicking on “Let’s Start”
button it will redirect to login page.

41
Logic Code:
Index page

42
<?php
session_start(); ?>
<!DOCTYPE html>
<html lang="en">

<head>
<?php include('header_links.php'); ?>
<style> #snackbar {
visibility: hidden;
minwidth: 250px;
marginleft: -145px;
backgroundcolor: #333;
color: #fff; text-align:
center; border-radius:
2px; padding: 16px;
position: fixed; z-index:
1; left: 50%; bottom:
30px; font-size: 17px;
}

#snackbar.show {
visibility: visible; eout
0.5s 2.5s;
}

@-webkit-keyframes fadein { from

{bottom: 0; opacity: 0;} to
{bottom: 30px; opacity: 1;}
}

@keyframes fadein { from

{bottom: 0; opacity: 0;} to
{bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout { from

{bottom: 30px; opacity: 1;} to
{bottom: 0; opacity: 0;}

43
}

@keyframes fadeout { from {bottom:

30px; opacity: 1;} to
{bottom: 0; opacity: 0;}
}
.bg { background-image:
url("../assets/images/slider/22.jpg"); /*background-image:
url(../assets/images/slider/22.jpg);*/ backgroundrepeat:
no-repeat; background-size: cover;
}
.login__content{
background: #9e9e9e80;
}
</style>
</head>
<body> <?php
include('connection.php');
$db_con = getDB();
?>
<div class="page page--login" data-page="login">

<!-- HEADER -->

<header class="header header--fixed">
<div class="header__inner">
<div class="header__icon"><a href="main.php"><img
src="https://www.vegathemes.net/gomobile/assets/images/icons/gray/arrowback.sv
g" alt="" title=""/></a></div>
</div>
</header> <?php if
(isset($_POST['login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$hash_pass = trim(hash('sha256', $password));
// echo $hash_pass ;
$stm = $db_con->prepare("SELECT * FROM `elec_user` WHERE name=:username
AND password=:password AND status='A'");
$stm->bindParam(":username", $username, PDO::PARAM_STR);
$stm->bindParam(":password", $hash_pass, PDO::PARAM_STR);
$stm->execute();
// $stm->debugDumpParams();

44
$row = $stm->fetchAll(PDO::FETCH_ASSOC);

45
46
$count = $stm->rowCount();
if ($count > 0) {

$_SESSION['project'] = $row[0]['id']; echo "<script>

localStorage.setItem('#64FFksjfk','".$row[0]['id']."');
window.location.href =
'bikes.php'</script>";
// print_r($_SESSION);
} else { echo "<div id='snackbar'>Incorrect
username or password</div>";
?>
<script>
// Get the snackbar DIV var x =
document.getElementById("snackbar");

// Add the "show" class to DIV

x.className = "show";

// After 3 seconds, remove the show class from DIV

setTimeout(function() {
x.className = x.className.replace("show", "");
}, 3000);
</script>
<?php
}
}

?>
<div class="login bg">
<div class="login__content">
<h2 class="login__title" style="color: #fff;">Login to your account</h2>
<div class="login-form">
<form id="LoginForm" method="post">
<div class="login-form__row">
<label class="login-form__label" style="color:
#fff;">Username</label>
<input type="text" name="username" placeholder="username"
pattern="[A-Za-z]{2,}" class="login-form__input required" />
</div>
<div class="login-form__row">

47
<label class="login-form__label" style="color:
#fff;">Password</label>
<input type="password" name="password" placeholder="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="login-form__input
required" />

</div>
<div class="login-form__row">
<input type="submit" name="login" class="login-form__submit
button button--blue button--full" id="submit" value="SIGN IN" />
</div>
</form>
<!-- <div class="login-form__forgot-pass"><a
href="forgotpassword.html">Forgot Password?</a></div> -->
<div class="login-form__bottom">
<p style="color: #fff">Don't have an account?</p>
<a href="signup.php" class="button button--green button--full"
onclick>SIGN UP</a>
<a href="signup_admin.php"><p style="color: #fff">Login as
admin?</p> </div>
</div>
</div>
</div>

</div>
<!-- PAGE END -->

<script src="../vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="../vendor/jquery/jquery.validate.min.js" ></script>
<script src="../vendor/swiper/swiper.min.js"></script>
<script src="js/jquery.custom.js"></script>
</body>

</html>

48
LOGIN PAGE:

Fig 5.2 Login Page

To login in this website user should enter first name, last name, username, email address
password. This is step 1.

49
Logic Code:
LOGIN PAGE

50
<?php
session_start(); ?>
<!DOCTYPE html>
<html lang="en">

<head>
<?php include('header_links.php'); ?>
<style> #snackbar {
visibility: hidden;
minwidth: 250px; margin-
left: -145px; background-
color: #333; color: #fff;
textalign: center;
borderradius: 2px;
padding: 16px; position:
fixed; z-index: 1; left:
50%; bottom: 30px; font-
size:
17px;
}

#snackbar.show { visibility:
visible; eout 0.5s 2.5s;
}

@-webkit-keyframes fadein { from

{bottom: 0; opacity: 0;} to
{bottom: 30px; opacity: 1;}
}

@keyframes fadein { from {bottom:

0; opacity: 0;} to {bottom: 30px;
opacity: 1;}
}

@-webkit-keyframes fadeout { from

{bottom: 30px; opacity: 1;} to
{bottom: 0; opacity: 0;}

51
$count = $stm->rowCount();
if ($count > 0) {

$_SESSION['project'] = $row[0]['id']; echo "<script>

localStorage.setItem('#64FFksjfk','".$row[0]['id']."');
window.location.href =
'bikes.php'</script>";
// print_r($_SESSION);
} else { echo "<div id='snackbar'>Incorrect
username or password</div>";
?>
<script>
// Get the snackbar DIV var x =
document.getElementById("snackbar");

// Add the "show" class to DIV

x.className = "show";

// After 3 seconds, remove the show class from DIV

setTimeout(function() {
x.className = x.className.replace("show", "");
}, 3000);
</script>
<?php
}
}

?>
<div class="login bg">
<div class="login__content">
<h2 class="login__title" style="color: #fff;">Login to your account</h2>
<div class="login-form">
<form id="LoginForm" method="post">
<div class="login-form__row">
<label class="login-form__label" style="color:
#fff;">Username</label>
<input type="text" name="username" placeholder="username"
pattern="[A-Za-z]{2,}" class="login-form__input required" />
</div>
<div class="login-form__row">

52
<label class="login-form__label" style="color:
#fff;">Password</label>
<input type="password" name="password" placeholder="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="login-form__input
required" />

</div>
<div class="login-form__row">
<input type="submit" name="login" class="login-form__submit
button button--blue button--full" id="submit" value="SIGN IN" />
</div>
</form>
<!-- <div class="login-form__forgot-pass"><a
href="forgotpassword.html">Forgot Password?</a></div> -->
<div class="login-form__bottom">
<p style="color: #fff">Don't have an account?</p>
<a href="signup.php" class="button button--green button--full"
onclick>SIGN UP</a>
<a href="signup_admin.php"><p style="color: #fff">Login as
admin?</p> </div>
</div>
</div>
</div>

</div>
<!-- PAGE END -->

<script src="../vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="../vendor/jquery/jquery.validate.min.js" ></script>
<script src="../vendor/swiper/swiper.min.js"></script>
<script src="js/jquery.custom.js"></script>
</body>

</html>

53
CYCLE BOOKING PAGE:

Fig 5.3.1 booking Page

This is booking page where user can select the cycles as per the users need, where user kay take
the look of bicycle by clicking “CYCLE IMAGE” button .

54
Fig 5.3.2 booking Page

After selecting the bicycle user need to select center where they want to ride the bicycle. Then
user need to select the date as per they want to ride, after selecting the date they need to select the
time when the want to ride bicycle.

55
Fig 5.3.3 booking Page

If user want to see the location of bicycle and user want to see the centers near by them they can
use the select location from map , they can select by clicking “SELECT LOCATION FROM
MAP” button.

56
Logic Code:
BOOKING PAGE

57
<?php
$stm = $db_con->prepare("SELECT ev.id as 'bik_id',
ev.title as 'tit_bik', ev.image, ev.price, ev.description, ec.id as 'cent',
ec.title as 'tit_cen' FROM `elec_vechicle` ev inner join elec_center ec on
ec.id = ev.center_id where ev.status = 'A';");
// $stm->bindParam(":username", $username,
PDO::PARAM_STR);
// $stm->bindParam(":password", $hash_pass,
PDO::PARAM_STR);
$stm->execute();
// $stm->debugDumpParams();
// SELECT `id`, `center_id`, `title`, `price`, `image`,
`description`,
// $row = $stm->fetchAll(PDO::FETCH_ASSOC);
$count = $stm->rowCount(); if
($count > 0) {

$bikes = $stm->fetchAll(PDO::FETCH_ASSOC);
// print_r($bikes); for
($c = 0; $c < $count; $c++) {
$bike_id = base64_encode($bikes[$c]['bik_id']);
$cent_id = base64_encode($bikes[$c]['cent']);
$tit_cen = base64_encode($bikes[$c]['tit_cen']);
$tit_bik = base64_encode($bikes[$c]['tit_bik']);
$tit_desc =
base64_encode(($bikes[$c]['description']));
?>
<div class="card">
<div class="card__product"><a
href="bike_details.php?bk=<?=$tit_bik?>&ce=<?=$tit_cen?>&ceid=<?=$cent_id?>&bi
id=<?=$bike_id?>&de=<?=$tit_desc?>"><img
src="../assets/images/photos/image1.jpg" alt="" title=""/> </a><div
class="card__price">₹
<?=$bikes[$c]['price']?></div></div>
<div class="card__details"> <h4
class="card__title"><a
href="bike_details.php?bk=<?=$tit_bik?>&ce=<?=$tit_cen?>&ceid=<?=$cent_id?>&bi
id=<?=$bike_id?>&de=<?=$tit_desc?>"><?=$bikes[$c]['tit_bik']?></a></h4>
</div>
<div class="card__more"><a class="button button--blue
button--cart addtocart"
href="bike_details.php?bk=<?=$tit_bik?>&ce=<?=$tit_cen?>&ceid=<?=$cent_id?>&bi
id=<?=$bike_id?>&de=<?=$tit_desc?>">Rent IT!</a></div>

58
</div>
<?php
}
}
?>
</div>
<!-- <a href="shop.html" class="button button--green button--full mb-
20">NEXT PAGE</a> -->
</div>

</div>
<!-- PAGE END -->

<!-- Bottom navigation -->

<div id="bottom-toolbar" class="bottom-toolbar"></div>
<!-- Social Icons Popup -->
<div id="popup-social"></div>
<!-- Alert -->
<div id="popup-alert"></div>

<script src="../vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="../vendor/jquery/jquery.validate.min.js" ></script>
<script src="../vendor/swiper/swiper.min.js"></script>
<script src="js/jquery.custom.js"></script>
</body>
</html>

59
Payment page:

Fig 5.4 Payment Page

payment page contains the online payment and subscription options if user wants the subscription
of the website they can get it through subscription option and if user wants to pay for the selected
cycle they can do it through online payment method.

60
Logic code:
Payment page

Subscription page

Fig 5.5 Subscription Page

61
Choose Your Plan and Take your bicycle with WHEELS ON FLY Embark on a journey of
convenience with our tailored subscription plans. Whether you’re a frequent rider or an
occasional traveler, we have the perfect option for you.

Monthly Freedom: At just ₹99, enjoy the flexibility of month-to-month travel. Perfect for those
who prefer short-term commitments.
Quarterly Adventure: Priced at ₹299, this plan is ideal for seasonal travelers seeking value and
convenience over a longer period. Annual Journey: Our best value at ₹999 annually, offering
uninterrupted service and the ultimate travel experience for a whole year.

Logic code:
Subscription page

62
<?php
session_start();
if(!isset($_SESSION['dixit_mldcc']) && empty($_SESSION['dixit_mldcc'])){
echo "<script>window.location.href = 'index.php'</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from www.vegathemes.net/gomobile/demos/shop.html by HTTrack
Website Copier/3.x [XR&CO'2014], Thu, 06 Jan 2022 02:41:50 GMT --> <head>
<?php include('header_links.php');
include('connection.php');
include('razorpay/razorpay_api.php') ?>
<style>
.bg {
background-image: url("../assets/images/slider/22.jpg");
}
h3{
color: #fff;
}
</style>
</head>
<body>

<!-- Overlay panel -->

<div class="body-overlay"></div>
<!-- Left panel -->
<div id="panel-left"></div>
<!-- Right panel -->
<div id="panel-right"></div>

<div class="panel-close panel-close--left"><img

src="https://www.vegathemes.net/gomobile/assets/images/icons/black/close.sv
g" alt="" title=""/></div>
<div class="panel-close panel-close--right"><img
src="https://www.vegathemes.net/gomobile/assets/images/icons/black/close.sv
g" alt="" title=""/></div>

<div class="page page--main" data-page="shop">

<header class="header header--page header--fixed">

63
<?php include('header_head.php'); ?>
</header>

<!-- PAGE CONTENT -->

<div class="page__content page__content--with-header bg">
<h3>SUBSCRIPTION PLANS</h3>
<div class="toggle mb-20">
<div class="toggle__item">
<input class="toggle__input" id="togg1" type="checkbox"
name="toggle">
<label class="toggle__label" for="togg1"
style="textalign:center;">Monthly Rs 99/-<span></span></label>
<div class="toggle__content">
<p>This plan validate upto 28 days. Where you
can book a cycle from any centre. To buy this plan <a
href="razorpay/razorpay_api.php">Click Here</a></p>
</div>
</div>
<div class="toggle__item">
<input class="toggle__input" id="togg2" type="checkbox"
name="toggle">
<label class="toggle__label" for="togg2"
style="textalign:center;">Quaterly Rs 299/-<span></span></label>
<div class="toggle__content">
<p>This plan validate upto 90 days. Where you
can book a cycle from any centre. To buy this plan <a
href="razorpay/razorpay_api.php">Click Here</a></p>
</div>
</div>
<!-- <div class="toggle__item">
<input class="toggle__input" id="togg3" type="checkbox"
name="toggle">
<label class="toggle__label" for="togg3"
style="textalign:center;">Yearly Rs 999/-<span></span></label>
<div class="toggle__content">
<p>This plan validate upto 365 days. Where
you can book a cycle from any centre. To buy this plan <a
href="razorpay/razorpay_api.php">Click Here</p>
</div>
</div> -->
</div>
</div>

64
</div>
<!-- PAGE END -->

<!-- Social Icons Popup -->

<div id="popup-social"></div>

<!-- Alert -->

<div id="popup-alert"></div>

<!-- Notifications -->

<div id="popup-notifications"></div>

<script src="../vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="../vendor/swiper/swiper.min.js"></script>
<script src="js/swiper-init.js"></script>
<script src="js/jquery.custom.js"></script>

</body>

<!-- Mirrored from www.vegathemes.net/gomobile/demos/shop.html by HTTrack

Website Copier/3.x [XR&CO'2014], Thu, 06 Jan 2022 02:41:51 GMT -->
</html>

Signin admin
<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from www.vegathemes.net/gomobile/demos/signup.html by

HTTrack
Website Copier/3.x [XR&CO'2014], Thu, 06 Jan 2022 02:41:55 GMT -->
<head>
<?php include('header_links.php'); ?>
<style>
.bg {
background-image: url("../assets/images/slider/22.jpg");
}
</style>

65
</head>
<body>

<div class="page page--login" data-page="login">

<?php
include('connection.php');
$db_con = getDB();
// print_r($_POST);
?>

<!-- HEADER -->

<header class="header header--fixed">
<div class="header__inner">
<div class="header__icon"><a href="splash.html"><img
src="https://www.vegathemes.net/gomobile/assets/images/icons/gray/arrowback
.svg" alt="" title=""/></a></div>
</div>
</header>
<?php
if (isset($_POST['register'])) {
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$hash_pass = trim(hash('sha256', $password));
$stm = $db_con->prepare("INSERT INTO `signup_admin`(`username`,
`email`, `password`, `status`) VALUES (:username, :email, :password,
'A')");
$stm->bindParam(":username", $username, PDO::PARAM_STR);
$stm->bindParam(":email", $email, PDO::PARAM_STR);
$stm->bindParam(":password", $hash_pass, PDO::PARAM_STR);
$stm->execute();
// $last_id = $db_con->lastInsertId();

66
// $cat_id = $last_id;
$count = $stm->rowCount();
if ($count > 0) {

$_SESSION['dixit_mldcc'] = $row[0]['id'];
echo "<script>window.location.href =
'admin_login.php'</script>";
}
else
{
echo "<div id='snackbar'>Incorrect details</div>";
?>
<!-- <script>
// Get the snackbar DIV
var x = document.getElementById("snackbar");

// Add the "show" class to DIV

x.className = "show";

// After 3 seconds, remove the show class from DIV

setTimeout(function() {
x.className = x.className.replace("show", "");
}, 3000);
</script> -->
<?php
}
}

?>
<div class="login bg">
<div class="login__content">

<h2 class="login__title" style="font-size: 25px">ADMIN

REGISTER</h2>
<div class="login-form">
<form id="LoginForm" method="post"> <div class="login-
form__row"> <label class="login-form__label"
style="color:#fff;">Username</label>
<input type="text"
name="username" pattern="[A-Za-z,0-9]{2,}" placeholder="username"
class="login-form__input required" />
</div>

67
<div class="login-form__row"> <label class="login-form__label"
style="color:#fff;">Email</label>
<input type="text" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="Email"
class="login-form__input required email" />
</div>
<div class="login-form__row"> <label class="login-form__label"
style="color:#fff;">Password</label>
<input type="password"
name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" value=""
placeholder="Password" class="login-form__input required" />
</div>
<div class="login-form__row">
<input type="submit"
name="register" class="login-form__submit button button--blue button--full"
id="submit" value="SIGN UP" />
</div>
</form>
<div class="login-form__bottom">
<p style="color: #fff">Already have an
account?</p>
<a href="signup.php"><p style="color: #fff">Register as
user</p>
<a href="admin_login.php" class="button
button--green button--full" onclick>LOGIN</a>
<!-- <a href="admin_login.php"><p style="color:
#fff">Login as admin?</p> -->
</div>
</div>

68
</div>
</div>

</div>
<!-- PAGE END -->

<script src="../vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="../vendor/jquery/jquery.validate.min.js" ></script>
<script src="../vendor/swiper/swiper.min.js"></script>
<script src="js/jquery.custom.js"></script>
</body>
<!-- Mirrored from www.vegathemes.net/gomobile/demos/signup.html by HTTrack
Website Copier/3.x [XR&CO'2014], Thu, 06 Jan 2022 02:41:55 GMT --> </html>

69
Admin panel:

Fig 5.6 Admin Panel Page

Navigate Your Way Through PADDLE UP & TRAVERSE Our digital menu is designed to offer you a
seamless and efficient experience. With a clean and modern interface, you can easily access all the
features you need in just a few clicks.

Home: Your starting point for a journey through our services.

Upload Cycles: Conveniently upload cycle-related data or information.
Cycles: Explore various cycle options and layers.
Upload Centres: Upload details about different centres effortlessly.
Centres: Discover the various centres we offer.
User Table: Manage and view user data in an organized manner.
Subscription Plan: Review and choose the subscription that fits your needs.
Profile: Securely access and update your personal profile.

70
Logic code:
Admin menu

<?php
session_start();
// if(!isset($_SESSION['admin']) && empty($_SESSION['admin'])){
// echo "<script>window.location.href = 'index.php'</script>";
// }
?>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from www.vegathemes.net/gomobile/demos/main.html by HTTrack
Website Copier/3.x [XR&CO'2014], Thu, 06 Jan 2022 02:41:37 GMT --> <head>
<?php include('header_links.php'); ?>
</head>
<body>

<!-- Overlay panel -->

<div class="body-overlay"></div>
<!-- Left panel -->
<div id="panel-left"></div>
<!-- Right panel -->
<div id="panel-right"></div>

<div class="panel-close panel-close--left"><img

src="https://www.vegathemes.net/gomobile/assets/images/icons/black/close.sv
g" alt="" title=""/></div>
<div class="panel-close panel-close--right"><img
src="https://www.vegathemes.net/gomobile/assets/images/icons/black/close.sv
g" alt="" title=""/></div>

<div class="page page--main" data-page="main">

<!-- HEADER -->

<header class="header header--page header--fixed">
<div class="header__inner">
<div class="header__icon"></div>
<div class="header__logo header__logo--text"><a
href="#"><b style="font-size:20px;">PADDLE UP & TRAVERSE</b></a></div>
<div class="header__icon open-panel" data-panel="right"
data-arrow="left"><a href="logout.php"><img
src="https://www.vegathemes.net/gomobile/assets/images/icons/white/logout.s
vg" alt="" title="Logout"/></a></div>
</div>

71
<h4
class="card__title">Contact</h4>
</div>
<div
class="card__more"><a class="button button-
-white button--ex-small" href="contact.php">VIEW</a></div>
</div> -->
<div class="card">
<div class="card__icon"><img
src="https://www.vegathemes.net/gomobile/assets/images/icons/blue/popup.svg
" alt="" title=""/></div>
<div class="card__details">
<h4
class="card__title">Logout</h4>
</div>
<div
class="card__more"><a class="button button-
-white button--ex-small" href="logout.php">VIEW</a></div>
</div>
</div>

</div>

</div>
<!-- PAGE END -->

<!-- Bottom navigation -->

<!-- <div id="bottom-toolbar" class="bottom-toolbar"></div> -->
<!-- Social Icons Popup -->
<!-- <div id="popup-social"></div> -->

<!-- Alert -->

<!-- <div id="popup-alert"></div> -->

<script src="../vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="../vendor/jquery/jquery.validate.min.js" ></script>
<script src="../vendor/swiper/swiper.min.js"></script>
<script src="js/swiper-init.js"></script>
<script src="js/jquery.custom.js"></script>
</body>
<!-- Mirrored from www.vegathemes.net/gomobile/demos/main.html by HTTrack
Website Copier/3.x [XR&CO'2014], Thu, 06 Jan 2022 02:41:43 GMT --> </html>

72
Upload cycles and Upload centers:

Fig 5.7 Cycle Details Page

The cycle details page is designed for entering details about a cycle. Here’s a description of this page :
Cycle Details: Admin can input the cycle’s name, select a type from a dropdown menu, provide a
description, and enter the cycle’s price.
File Upload: There’s an option to upload a file, where admin can upload cycle image.
Submission: After filling out the necessary details and uploading any required files, admin can submit
the information using the green “SUBMIT” button.

The center details page is designed for admin to enter details about a center. Here’s a description
about this page :
Purpose: The page is likely used for registering or updating information about a center, possibly
related to bicycle.
Input Fields: Admin can input the center’s name, address, pin code, email, contact number, and time.
File Upload: There’s an option to upload a file, to upload the image of center.
Submission: After filling out the necessary details and uploading any required files, admin can submit
the information using the green “SUBMIT” button

73
Logic code:
Upload cycles and upload centers

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1); error_reporting(E_ALL);
?>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from www.vegathemes.net/gomobile/demos/forms.html by HTTrack
Website Copier/3.x [XR&CO'2014], Thu, 06 Jan 2022 02:41:54 GMT --> <head>
<?php include('header_links.php'); ?>
</head>
<body>

<!-- Overlay panel -->

<div class="body-overlay"></div>
<!-- Left panel -->
<div id="panel-left"></div>
<!-- Right panel -->
<div id="panel-right"></div>

<div class="panel-close panel-close--left"><img

src="https://www.vegathemes.net/gomobile/assets/images/icons/black/close.sv
g" alt="" title=""/></div>
<div class="panel-close panel-close--right"><img
src="https://www.vegathemes.net/gomobile/assets/images/icons/black/close.sv
g" alt="" title=""/></div>

<div class="page page--main" data-page="form">

<!-- HEADER -->

<header class="header header--page header--fixed">
<div class="header__inner">
<div class="header__icon header__icon--menu open-panel" data-panel="left"
data-
arrow="right"><span></span><span></span><span></span><span></span><span></s
pan><span></span></a></div>

<input type="submit" name="submit"

class="form__submit button button--green button--full" id="submit"
value="SUBMIT" />
74
</div>
</form>
</div> </div>
</div>
</div>
<!-- PAGE END -->

<!-- Social Icons Popup -->

<div id="popup-social"></div>

<!-- Alert -->

<div id="popup-alert"></div>

<script src="../vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="../vendor/jquery/jquery.validate.min.js" ></script>
<script src="../vendor/swiper/swiper.min.js"></script>
<script src="js/swiper-init-swipe.html"></script>
<script src="js/jquery.custom.js"></script>
</body>

</html>

75
CHAPTER 6 : TESTING

6. 1 TEST CASES

Test Case acts as the starting point for the test execution, and after applying a set of input values, the
application has a definitive outcome and leaves the system at some end point or also known as
execution postcondition.

P1 – Highest Priority of the Test Case, here the user must know that what ‘must be’ and also what
‘must not be’ present in the product.

P2 – Medium Priority of the Test Case, here the user must know that what ‘should be’ and also what
‘should not be’ present in the product.

P3- Lowest Priority of the Test Case, here the user must know that what ‘could be’ and also what
‘could not be’ present in the product.

1. Registration Form

Test Priority Test case Step Input test Expected Test Case Result
case objective procedure data result

TC01 P1 If Click on This field FAIL

Null data
sign in
username is
in
not
required
entered username

TC02 P1 If Click on Null data This field FAIL

em sign in in email is
ail address address
not entered required

76
TC03 P1 If Click on Null data This field FAIL
sign in in email
password is
not entered address
required

TC04 P1 If all the Click on Data PASS

fields are sign in entered It
correctly wil
entered l redirect
to login
page.

Table No. 6.1.1 Registration form

2. Login Form

Test Priority Test case Step Input test Expected Test Case Results
case objective procedure data result

TC05 P1 If Click on Null data This field FAIL

username sign in in is
not
username required
entered

TC06 P1 If Click on Null data This field FAIL

password sign in in email is
not address
entered required

77
TC07 P1 If all the Click on Data It will PASS
fields are sign in entered redirect to
correctly
entered Booking
page.

Table No. 6.1.2 Login form

3. Booking

Test Priority Test case Step Input Expected Test Case Results
case objective procedure test result
data

TC08 P1 User select Click on Select PASS

It will
the cycle cycle
Rent it redirect to
the page
where
user can
select date
and time
slot

TC09 P2 Select date Click on All Redirect PASS

slot and fields to the
Book now
selected payment
time slot gateway

Table No. 6.1.3 Booking

4. Payment

Test Priority Test case Step Input Expected Test Case Result
case objective procedure test data result

78
TC10 P1 User select Click on Payment Payment PASS
payment proceed mode successful
option

TC11 P1 Data Click on Data Payment FAIL

entered proceed entered unsuccessful
incorrectly

Table No. 6.1.5 Payment

79
CHAPTER 7: CONCLUSIONS

7.1 CONCLUSION OF THE PROJECT:

The main aim of the project is to create awareness among the people over their fitness and
health especially in urban and cities. Renting bicycle who can’t buy for some reasons they can
rent it. After the unlock of the country after pandemic people should physically fit.

Due to rising the fuel cost all over the world all of us should move towards ecofriendly way
of transportation as much as possible. However, the fuel vehicles emit pollution which is
harmful for living organisms. Even electric vehicles need to be charged and maximum amount
of electricity is generated by burning coal and fossil fuels which creates pollution while
burning. And in today’s developing countries and deforesting and which more leads to global
warming.

The simplest and non-polluting way to travel is bicycle for nearby destinations.

7.2 FUTURE SCOPE OF THE PROJECT :

• The current application has scope for further development and enhancements. A wide area
and network across India to bring all the people to know the importance of health and
fitness. Whereas riding a cycle can help to build immune system and also can help to save
environment by riding a cycle, as cycle doesn’t need any type of fuels.

• To generate electric, it needs to burn fossil fuels and coals which emits harmful gases and
pollute the atmosphere.
• But cycle don’t need any type of fuel, so if this can be implemented in corporate offices
and other department where it is possible to travel by cycles.

• Subscription module can be implemented in this application for user to get better facility of
direct booking.

• Slot module can be added so that user can get to know the counting of cycles.

80
REFERENCES

https://www.w3schools.com/
https://stackoverflow.com/
https://ganttpro.com/ https://flutter.dev/
https://auth-db170.hostinger.com/
https://auth-db170.hostinger.com/
https://app.diagrams.net/
https://razorpay.com/
https://www.mysql.com/

81