Objective

The objective of this project is to develop an application

that allows users to search for nearby electric vehicle
(EV) charging stations based on their area or locality.
The application will also provide a feature to locate these
stations on Google Maps, making it easier for EV owners
to find and navigate to the nearest charging facility.

1
Need of the project
The need for this project arises from the increasing adoption of
electric vehicles (EVs) and the growing demand for EV
charging infrastructure. As more people switch to EVs to
reduce their carbon footprint and dependence on fossil fuels,
there is a pressing need for easily accessible and reliable charging
stations.
This project aims to address this need by providing a
convenient way for EV owners to locate nearby charging
stations and navigate to them using Google Maps, thus
encouraging the use of EVs and supporting the transition to
sustainable transportation.
 3Hardware Requirements

 Processor : Intel® Pentium® 2 or other

 RAM : 2 GB or higher
 Hard Disk : 40 GB
 A Monitor with a resolution of 640 x 480 Displays

2. Software Requirements
 Operating System – Windows 7 or
higher
 Language - PHP
 Database - MySQL
 Web Server - XAMP
 Enable - PHP, JavaScript, CSS.

1. Frontend
 Forms and Input Fields: Well-designed forms and input fields for capturing
event details, participant information, and feedback.
 Forms and Input Fields: Well-designed forms and input fields for capturing
event details, participant information, and feedback.
 Multimedia Support: Ability to incorporate images, to enhance event presentations and
promotions.

2. Backend
 Database Management: Robust database management system to store and manage event
data, user information, and administrative records.
 Security Features: Integration of security measures such as encryption, authentication,
and authorization to protect sensitive data and prevent unauthorized access.
 Performance Optimization: Optimization of server-side code and database queries
to ensure fast loading times and efficient system performance.

3
3. Functional Requirements
 User Authentication: Users should be able to create accounts and log in to
the application.
 Search Functionality: Users should be able to search for nearby EV charging
stations based on their current location, area, or locality.
 Map Integration: The application should integrate with Google Maps to display the
locations of EV charging stations.
 Station Details: Users should be able to view details about each charging station, such as
the type of charger, availability, and pricing.
 Booking System: Optionally, a booking system could be implemented to allow users to
reserve a charging slot at a specific station.
 User Reviews and Ratings: Users should be able to rate and review charging stations to
provide feedback to other users.
 Notifications: The application could send notifications to users about nearby
charging stations, availability of charging slots, or status updates on their charging
session.

4. Non- Functional Requirements

 Performance: The application should be responsive and able to handle a large number of
users searching for charging stations simultaneously.
 Reliability: The application should be reliable, with minimal downtime and
accurate information about charging station availability.
 Security: User data should be stored securely, and the application should adhere to best
practices for data protection.
 Usability: The application should have a user-friendly interface that is easy to navigate,
with clear instructions for searching and locating charging stations.
 Scalability: The application should be designed to scale easily to accommodate a growing
user base and additional features in the future.

4
 4. Design
System Design
The online examination system uses client/ server architecture. At the client by using a
web browser can connect via internet or local host with the server where PHP and
MySQL in the server side are responsible for the handling event processes and save and
return data from database. It represents an overview of Eventveda (An event examination
system).

System activities
In this application an on-demand fuel delivery application for its client in Australia. This
application is developed for Android. This on-demand fuel delivery application will serve as a
platform for all the users and corporates to get fuel delivered from the truck drivers that will have
trucks fully loaded with fuel.

5
System Modules

User modules:
Register
Login
Search EV Bunk
View Bunk details
View slot vacancy
My booking
My profile

Admin modules:
Login
Approve/Reject recharge slots
Create EV Bunk
Manage Bunk details
Manage recharge details

6
User
Register – User has to register their basic details to get access with this application service.
Login – Once they have registered they need to login to avail the service at the needy time.
Search Ev Bunk – to search verified near electric recharge bunk station details based on
user need.
View Bunk details – the user search and view all the Bunk details and user can select the
nearest bunk.
View slot vacancy – The user can search nearest bunk and select bunk and check the
availability of slots.
My booking – User will select available slots then user will book a slot for a needed time
slots.
My profile – User once create a their profile like user name, Phone number, address, etc.
they are managed by my profile section.
Admin
Login – Enter username & password into the login page.
Approve/Reject recharge slots –Admin only accept whether it is verified Ev bunk or not
Ev bunk.
Create EV Bunk – To create the electric recharge bunks enters all the details of a bunk
category. All these information will be stored in the database.
Manage Bunk details – Admin can manage all the bunk details like new bunk details,
vacancy slots, etc.
Manage recharge details – Once can create new bunk details then users recharge booking
details also managed by admin

7
4.1 USE CASE DIAGRAM

Login, register

search Ev Bunk

view bunk details

user
view slot vacancy

My booking

My profile

login

approve/ reject recharge solts

create Ev Bunk
admin

manage bunk details

manage recharge details

8
4.2 E-R DIAGRAM

4.3 COLLOBORATION DIAGRAM

9
4.4 SEQUENCE DIAGRAM

user admin database

1 : login and register()

•: search ev bunk()

•: view bunk details() 4 : view slot details()

5 : my booking and my profile()

6 : login()

7 : create bunk details() 8 : approve/ reject slots()

9 : manage bunk details() 10 : manage recharge details()

10
4.5 CLASS DIAGRAM

Recharge Slot
Search Bunk
+Approve Details
+Reject +location
+City
+update Recharge Slot()
+Search Bunk
Details()

View Bunk
EV Bunk User Details
ADMIN +Bunk Detaiks
+Bunk Name +Username
+Username +Bunk +Password +View Bunk
+password Description Details()
+User login()
+Create EV
+Admin
Bunk() View Slot
Login()
Vacancy
+Slot type
Bunk Details +Slot name

+Bunk Details +View Slot

Vacancy()
+Manage Bunk
recharge Slot Details() My Booking
+Booking
+Recharge details Details
+My
+Mamage Recharge Slot()
Booking()

11
5.1 Database Table Structure
Database design

In order to fully use MySQL server technology, it is essential to make sure that the database is
well designed. The files names chosen to label all the tables created within the database
attempt to reflect the table's purpose and, therefore, contribute to well-design system.
The intimal step in designing was to decide, according to the requirements and specifications
of the project, which tables should be created, and what type of information each one
should hold. The final design had taken from as explained in figure.

Table Design
User Register & Login
User ID Name Email Id Password Web Address City Question Question 2
1

Int Varchar Varchar Varchar Varchar Varchar Varchar Varchar Varchar

100 100 100 100 100 100 100 100 100

Primary
key

Bunk Register & Login

User ID Name Email Id Password Web Address City Question 1 Question 2

Int Varchar Varchar Varchar Varchar Varchar Varchar Varchar Varchar

100 100 100 100 100 100 100 100 100

Primary
key

12
Post Bunk Details
User ID Business Location Landmark Web Web 2 Address City Geo
Name Location

Int Varchar Varchar Varchar Varchar Varchar Varchar Varchar

100 100 100 100 100 100 100 100

Primary
key

Booking Status
User ID Business Card Exp Date CVV Web Qty Price Email
Name Details

Int Varchar Varchar Varchar Varchar Varchar Varchar Varchar

100 100 100 100 100 100 100 100

Primary
key

Admin Login

User ID Email Password

Int Varchar

100 100

Primary
key

13
 5.2 SCREENSHOTS
1. USER REGITRATION
PAGE

2. USER BUNK PAGE

14
3. BOOKING PAGE

4. MAIN PAGE

15
5. INDEX PAGE

16
 6. Coding
Index.html

<!DOCTYPE html>

<html ng-app="myapp">

<head>

<!-- Basic -->

<meta charset="utf-8">

<meta name="keywords" content="HTML5

Template" />

<meta name="description" >

<meta name="author" content="pixelgeeklab.com">

<!-- Web Metas -->

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<!-- Web Fonts -->

<link href='css/css.css' rel='stylesheet'

type='text/css'>

<link rel="stylesheet" href="fonts/font.css">

<!-- Vendor CSS -->

<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">

<link rel="stylesheet" href="vendor/owlcarousel/owl.carousel.css"

media="screen">

<link rel="stylesheet" href="vendor/owlcarousel/owl.theme.css" media="screen">

<link href="vendor/owl-carousel/owl.transitions.html" rel="stylesheet"

media="screen">

<link rel="stylesheet" href="vendor/flexslider/flexslider.css" media="screen">

<link rel="stylesheet" href="vendor/chosen/chosen.css" media="screen">

<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css"

media="screen">
17
 <!-- Theme CSS -->

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

<link rel="stylesheet" href="css/theme-

animate.css">

<!-- Style Switcher-->

<!-- Head libs -->

<script
src="vendor/modernizr/modernizr.js"></script>

<!--[if IE]>

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

<![endif]-->

<!--[if lte IE 8]>

<script src="vendor/respond/respond.js"></script>

<script src="vendor/excanvas/excanvas.js"></script>

<![endif]-->

<style>

.container {

background-color: #4e4d57; position:relative;

margin-top:100px;

.row{

margin-left:50px;

18
margin-right:50px;

text-align:center;
}

.login

p{ position:relativ

e; text-

align:center; font-

size:30px;

color:#ffffff;

p{ position:relative;
text-align:center;

font-
family:''Quicksand'';

font-size:35px;

color:#ffffff; font-

weight:200;

h2{ position:relative;

text-align:center; font-

size:30px; color:#ffffff;

font-weight:200;

h3{

text-align:center; font-

size:80px;

19
 color:#ffffff;

font-weight:200;
}

img{ align:midd

le;

</style>

<!-- script back button -->

<script src="cordova.js"></script>

<script>

function onLoad()

document.addEventListener("deviceready", deviceReady, false);

function deviceReady()

document.addEventListener("backbutton", backButtonCallback, false);

function backButtonCallback()

navigator.app.exitApp();

</script>

<!-- angular js -->

20
 <script src="js/angular-1.3.js"></script>

<script
src="js/angular_cookies.js"></script>

</head>

<body >

<div class="container">

<h2>EV Recharge Bunk</h2>

<div class="row">

<div class="col-md-4" style="margin-left:0px;" >

</div>

<div class="col-md-4" >

<img class="img-responsive" src="images/wall.jpg"

width="400px" height="400px" >

<a href="user_login.html"> <button

style="background-color:white;font-weight:bold;color:#000;letter-spacing:1px">User
Login</button> </a> <br><br>

<a href="user_register.html"><button
href="user_register.html" style="background-color:white;font-
weight:bold;color:#000;letter- spacing:1px">User Register</button> </a><br><br>

<a href="worker_login.html"><button
href="worker_login.html" style="background-color:white;font-weight:bold;color:#000;letter-
spacing:1px">Bunk Login</button> </a><br><br>

<a href="worker_register.html"><button
href="worker_register.html" style="background-color:white;font-
weight:bold;color:#000;letter- spacing:1px">Bunk Register</button> </a><br><br>

</div>

21
 <div class="col-md-4" >

</div>

</div>

</div>

<script src="vendor/jquery/jquery.js"></script>

<script src="vendor/bootstrap/bootstrap.js"></script>

<script src="vendor/jquery.validation/jquery.validation.js"></script>

<script src="vendor/owlcarousel/owl.carousel.js"></script>

<script src="vendor/flexslider/jquery.flexslider-min.js"></script>

<script src="vendor/countdown/countdown.min.js"></script>

<script src="vendor/chosen/chosen.jquery.min.js"></script>

<script src="vendor/pricefilter/jquery.pricefilter.js"></script>

<script src="vendor/masonry/imagesloaded.pkgd.min.js"></script>

<script src="vendor/masonry/masonry.pkgd.min.js"></script>

<script src="vendor/uikit/uikit.js"></script>

<script
src="vendor/magnific-popup/jquery.magnific-popup.js"></script>

<!-- Theme Base, Components and Settings --

>

<script src="js/theme.js"></script>

<!-- Style Switcher -->

<script type="text/javascript"
src="style-switcher/js/switcher.js"></script>

<!-- angular js -->

<script
src="js/angular_product.js"></script>

<body onload="onLoad()">

22
</body>

</html>

//Angular_user.js (user login)

var app = angular.module("myapp", ['ngCookies']);

app.controller("myappCtrl", function($scope, $cookieStore, $cookies,

$http)
{

$scope.user_login = function()

$http.post('user_login.php',

{'email': $scope.email, 'password':$scope.password})

.success(function(data, status, headers, config)

if(data.success == 1)

alert("Login Successful");

$cookieStore.put("cook_user_email",data.email);

$cookieStore.put("cook_staff_dept",data.field_1); window.location =

"user_home.html"; // Home Page return;

}

else if(data.success == 2)

alert("Please Fill All Fields");

else

alert("Login Unsuccessful");

23
 }

});

$scope.cook_user_email =
$cookieStore.get("cook_user_email");

$scope.cook_staff_dept = $cookieStore.get("cook_staff_dept");

$scope.worker_register = function()

$http.post('worker_register.php',{ 'name':$scope.name,'email':

$scope.email,'password':$scope.password, 'web': $scope.web,'field_1':

$scope.field_1,'field_2': $scope.field_2, 'field_3': $scope.field_3})

.success(function(data, status, headers, config)

if(data.success == 1)

alert("Registered successfully");

window.location =

"worker_login.html"; return;
}

else if(data.success == 2)

alert("Please Fill All Fields");

else if(data.success == 0)

24
 {

alert("Error");

else

alert(" Un Successfull");

});

//Worker login

$scope.worker_login = function()

$http.post('worker_login.php',

{'email': $scope.email, 'password':$scope.password})

.success(function(data, status, headers, config)

if(data.success == 1)

alert("Login Successful"); window.location = "home.html";

$cookieStore.put("cook_work_email",data.email);

$cookieStore.put("cook_type",data.field_1);

// Home Page

return;

else if(data.success == 2)

25
 {

alert("Please Fill All Fields");

else

alert("Login Unsuccessful");

});

// user log out

$scope.user_logout = function()

if(confirm("Are You Sure?"))

$cookies.cook_user_email = "";

$cookies.cook_admin_email = "";

window.location = "index.html"; return;

else

return false;

//ADMIN REGISTER

$scope.user_register = function()

$http.post('user_register.php',{

26
'name':$scope.name,'email':$scope.email,'password':
$scope.password,

'web': $scope.web,'field_1': $scope.field_1,'field_2': $scope.field_2,

'field_3': $scope.field_3,'field_4': $scope.field_4 })

.success(function(data, status, headers, config)

if(data.success == 1)

alert("Registered successfully"); window.location =

"user_login.html"; return;

else if(data.success == 2)

alert("Please Fill All Fields");

else if(data.success == 0)

alert("Error");

else

alert(" Un Successfull");

});

//ADMIN LOG IN

$scope.admin_login = function()

27
$http.post('admin_login.php',

{'email': $scope.email, 'password':$scope.password})

.success(function(data, status, headers, config)

if(data.success == 1)

alert("Login Successful");

$cookieStore.put("cook_admin_email",data.email); window.location =

"admin_home.html"; // Home Page return;

else if(data.success == 2)

alert("Please Fill All Fields");

else

alert("Login Unsuccessful");

});

$scope.cook_admin_email =
$cookieStore.get("cook_admin_email");

$scope.admin_register =
function()

28
$http.post('admin_register.php',{

'name':$scope.name,'email':$scope.email, 'password':

$scope.password,'web': $scope.web})

.success(function(data, status, headers, config)

if(data.success == 1)

alert("Registered successfully"); window.location =

"admin_login.html"; return;

else

alert("Invalid Inputs");

});

$http.post('get_admin_info.php')

.success(function(data, status, headers,

config)

if(data.success == 1)

$scope.details = data.details;

});

29
 $http.post('get_user_info.php',

'email':$scope.cook_user_email

})

.success(function(data, status, headers, config)

if(data.success == 1)

$scope.userdetails = data.details;

});

$scope.myinfovar = true;

$scope.update_info =
function(email,password,name,web)

$scope.myinfovar = false;

$scope.email = email;

$scope.password = password;

$scope.name = name;

$scope.web = web;

//window.location = "home.html";

$scope.save_info = function()

30
{

$http.post('admin_update.php',{ 'name':$scope.name,'email':

$scope.email, 'password':$scope.password,'web': $scope.web})

.success(function(data, status, headers, config)

if(data.success == 1)

alert("Submited successfully"); window.location =

"admin_post_info.html"; return;
}

else

alert("Invalid Inputs");

});

$scope.newpassword = function()

$http.post('newpassword.php',

{ 'email': $scope.email, 'password':

$scope.password,
'field_3': $scope.field_3, 'field_4':
$scope.field_4

})

.success(function(data, status, headers, config)

if(data.success == 1)

31
 {

alert("Password Reset Successful"); window.location =

"index.html"; // Home Page return;

else if(data.success == 2)

alert("Please Fill All Fields");

else

alert("Login Unsuccessful");

});

});

32
User_login.php

<?php

/* Following code will match admin login credentials

*/

//user temp array

$response = array();

// include db connect class

require_once DIR .
'/db_connect.php';

// connecting to db

$db = new DB_CONNECT();

// check for post data

$data = json_decode(file_get_contents("php://input"));

$get_empid = mysql_real_escape_string($data->email);

$get_password = mysql_real_escape_string($data-
>password);

if(empty($get_empid) || empty($get_password))

$response["success"] = 2; echo json_encode($response);

}

else

$result = mysql_query("SELECT * FROM user_login WHERE email = '$get_empid' AND

password = '$get_password' ");

if
(mysql_num_rows($result))
33
{

$Allresponse = mysql_fetch_array($result);

// temp user array

$response = array();

$response = $Allresponse;

$response["success"] = 1; echo

json_encode($response);

else

// success

$response["success"] = 0;

// echoing JSON response echo

json_encode($response);

?>

34
7. Future Scope

Enhanced Navigation Integration: Integrate real-time data

on traffic conditions, road closures, and detours to provide
users with the most efficient route to the nearest EV station.

Payment Integration: Enable users to pay for charging

services directly through the app, streamlining the charging
process and providing a seamless experience.

Charging Station Availability Prediction: Use historical

data and machine learning algorithms to predict the
availability of charging stations, helping users plan their trips
more effectively.

Electric Vehicle Sharing: Integrate with electric vehicle

sharing services to promote the use of EVs as a sustainable
transportation option in urban areas.

Integration with Public Transport: Provide information

on nearby public transport options and facilitate seamless
multimodal journeys for users.

35
 8. Conclusion

In conclusion, the electrification of transportation, particularly the promotion of electric

vehicles (EVs), presents a pivotal opportunity to reduce our dependence on gasoline
and mitigate the harmful emissions that contribute to global warming and air
pollution. Advancing EV technologies in the 21st century not only offers environmental
benefits but also serves as a key driver for boosting a nation's economy and
enhancing the quality of living for its citizens.

Our proposed application aims to contribute to this movement by providing users with the
ability to easily locate nearby EV stations based on their locality. Ensuring that users
can always access a charging station within their driving capacity anywhere in the city is
crucial for the widespread adoption and convenience of EVs.

36
9. References

https://
www.sourcecodester
.com/

Software
Engineering by
K.K. Aggarwal

https://
www.academia.edu

https://
www.geeksforgeeks
.org/

37
38
39