INCIDENT MANAGEMENT WEB

APPLICATION
Project Report

Submitted by

Jashandeep Kaur 210240101046

Harsh Shivam 210240101040

Under the Supervision

Dr. Lokesh Kumar
Assistant Professor
CSE Department

In Partial Fulfillment of the Requirements

for the Degree of
Bachelor of Technology

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

ROORKEE INSTITUTE OF TECHNOLOGY, ROORKEE
(Affiliated to VMSB Uttarakhand Technical University, Dehradun)
April 2024
 DECLARATION

I declare that the work embodied in this Minor report is my own original work carried out by me
under the supervision of Mr. Lokesh Kumar for the session 2023-24 at “Roorkee Institute of
Technology”. The matter embodied in this internship report has not been submitted elsewhere for
the award of any other degree. I declare that I have faithfully acknowledged, given credit to and
referred to the researchers wherever the work has been cited in the text and the body of the thesis.
I further certify that I have not willfully lifted up some other’s work, Para, text, data, results, etc.
reported in the journals, books, magazines, reports, dissertations, thesis, etc., or available at web-
sites and have included them in this internship report and cited as my own work.

Date: Name(s) & Signature(s) of the Student

Jashandeep Kaur
Harsh Shivam

Place:
 ACKNOWLEDGEMENT
I am very happy to greatly acknowledge the numerous personalities involved in lending their help
to make our project “Incident Management Web Application” a successful one.

I take this opportunity to express our deep sense of gratitude to our honorable Director “Dr Parag
Jain” for providing an excellent academic climate in the college that made this endeavor possible.

I give my wholehearted admiration and a deep sense of gratitude to “Mr. Prashant Verma”,
HOD, “DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING”, Roorkee Institute
of Technology, Roorkee for his inspiration, valuable guidance, encouragement, suggestion, and
overall help throughout.

I express my sincere thanks to supervisor “Dr. Lokesh Kumar”, “Assistant Professor”,

“DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING”, “ROORKEE
INSTITUTE OF TECHNOLOGY”, for his keen interest and invaluable help throughout the
project.

Finally, we express our gratitude to all the Teaching and Non-Teaching staff of “DEPARTMENT
OF COMPUTER SCIENCE & ENGINEERING”, Roorkee Institute of Technology, Roorkee
for their timely support and suggestions.

Date: 26/04/2024 Jashandeep Kaur 210240101046

Harsh Shivam 210240101040
 TABLE OF CONTENTS

Contents

ABSTRACT

1. INTRODUCTION
2. ANALYSIS
3. SOFTWARE REQUIREMENT SPECIFICATION
4. TECHNOLOGY USED AND ITS DESCRIPTION
5. CODING
6. SCREENSHOTS
7. CONCLUSION
8. BIBILOGRAPHY
 ABSTRACT
In today's fast-paced world, efficient coordination and response are critical in managing various
emergencies and incidents such as accidents, fires, and other public safety concerns. Traditional
methods of communication and reporting often lead to delays and inefficiencies, hindering the
prompt response of concerned authorities. To address this challenge, we propose the development
of a comprehensive software solution aimed at streamlining the process of incident reporting and
management across multiple departments.
The software will serve as a centralized platform that integrates all major departments responsible
for handling incidents related to accidents, fires, and other emergency situations. It will facilitate
the seamless transmission of incident reports from citizens or relevant stakeholders to the
respective district or police stations, ensuring swift and coordinated responses. Additionally, the
software will leverage social media mining techniques to identify and capture complaints
regarding various road transportation issues, including traffic congestion, accidents, potholes,
garbage accumulation, and pollution.
Building upon this necessity, our project, "My Helping Buddy," is a pioneering web application
designed to revolutionize incident management by providing a comprehensive and centralized
platform for reporting and responding to various emergencies. With an emphasis on integration
our solution aims to bridge the gap between disparate departments and stakeholders involved in
emergency response.
The anticipated outcomes of our endeavor are manifold. By optimizing incident response times
and enhancing coordination among relevant authorities, "My Helping Buddy" strives to mitigate
the adverse impacts of emergencies on public safety and infrastructure. Furthermore, by promoting
public participation and trust through user-friendly interfaces and transparent reporting
mechanisms, the application aims to cultivate a resilient community that actively contributes to its
own safety.
Overall, the proposed software aims to revolutionize the way incidents are reported, managed, and
responded to, enhancing the efficiency and effectiveness of public safety operations while
ultimately improving the well-being and safety of communities.
 1. INTRODUCTION

In our rapidly evolving world, the need for swift and coordinated responses to emergencies has
become more crucial than ever. Whether it's accidents on the road, fires, or other unforeseen
incidents, effective communication and streamlined coordination among various departments are
paramount for saving lives and minimizing damage.
The current scenario often presents challenges in this regard, with incidents reported through
disparate channels leading to delays, miscommunication, and inefficiencies in response.
Additionally, the burgeoning use of social media platforms for reporting incidents adds another
layer of complexity, as identifying and prioritizing critical information becomes increasingly
challenging amidst the vast volume of data.
To address these challenges, we propose the development of a comprehensive software solution
that integrates all major departments involved in emergency management. This software will serve
as a centralized platform for receiving, prioritizing, and disseminating incident reports efficiently,
ensuring a swift and coordinated response to emergencies. We have created a web application “My
Helping Buddy” where users can report any incident and that data will be provided to the respected
departments along with their geolocation facility.
Moreover, "My Helping Buddy" boasts a suite of features designed to facilitate real-time
communication and collaboration among concerned departments. Through its intuitive interface
and robust backend architecture, the platform empowers emergency responders to exchange
critical updates, share resources, and coordinate response efforts with unparalleled efficiency.
Crucially, the incorporation of geospatial mapping technology affords responders a bird's-eye view
of incident locations, enabling them to identify hotspots, allocate resources judiciously, and
respond swiftly to emergent threats.
In essence, "My Helping Buddy" represents more than just a software solution; it embodies a
paradigm shift in the way we perceive and respond to emergencies in the modern age. Through its
innovative features, user-centric design, and unwavering commitment to public safety, "My
Helping Buddy" stands poised to redefine the landscape of incident management, forging a future
where emergencies are met with swift, coordinated, and effective responses, thus safeguarding the
well-being and resilience of communities across the globe.

Key Features:
Unified Incident Reporting: The website will provide a single point of contact for reporting various
incidents, including accidents, fires, road hazards, and environmental issues.
Real-time Communication: The website will facilitate seamless communication and collaboration
among concerned departments, allowing them to exchange real-time updates, share resources, and
coordinate response efforts effectively.
Geospatial Mapping: A geospatial mapping feature will enable visual representation of incident
locations, allowing responders to quickly identify hotspots and allocate resources accordingly.
Benefits:
Enhanced Coordination: The integration of various departments and communication channels will
promote seamless collaboration and coordination, ensuring a cohesive and efficient response to
emergencies.
Increased Efficiency in Handling Incidents: The incident management software streamlines the
entire incident handling process, from reporting to resolution.
Greater Public Engagement and Trust: By providing a user-friendly platform for incident reporting
and transparent communication channels, "My Helping Buddy" fosters greater public engagement
and trust in the emergency response system.
Improved Situational Awareness: By consolidating incident reports onto a single platform and
leveraging advanced analytics capabilities, "My Helping Buddy" enhances situational awareness
among emergency responders and decision-makers.
 2. ANALYSIS

Existing Incident Management Systems:

Several incident management systems exist, ranging from traditional paper-based reporting to
digital solutions. These systems often lack integration among various departments and face
challenges in real-time communication and coordination.
Traditional incident management systems, rooted in pen-and-paper processes, often struggle to
keep pace with the demands of modern emergencies. The reliance on physical documentation and
manual data entry not only introduces delays but also increases the risk of errors a nd
miscommunications. Moreover, the fragmented nature of these systems, with each department
maintaining its own set of records and procedures, hampers the seamless exchange of information
and resources during critical moments.

Gaps in Existing Solutions:

 Fragmented Communication: Traditional methods result in fragmented communication

channels, leading to delays and inefficiencies in incident response.
 Complexity in Reporting: Users may encounter barriers in reporting incidents due to
complex interfaces or lack of accessibility features.
 Lack of Geospatial Integration: Geospatial mapping is often overlooked in existing
solutions, resulting in challenges in visualizing incident locations and allocating resources
effectively.
 Scalability Issues: Some systems may struggle to scale and adapt to the evolving needs of
emergency management, especially in large-scale incidents or across multiple
jurisdictions.

Motivation/Inspiration to the Work Done:

The identified gaps and limitations in existing incident management systems serve as the primary
motivation for the development of "My Helping Buddy." Inspired by the pressing need for a
comprehensive, user-friendly, and integrated solution, we embarked on this project with the vision
of revolutionizing emergency management practices.
Recognizing the critical importance of seamless communication and coordination in incident
response, we sought to address the fragmentation inherent in traditional systems by creating a
centralized platform for incident reporting and management. By consolidating incident reports
from diverse sources onto a single interface, "My Helping Buddy" aims to streamline
communication channels and facilitate real-time collaboration among all stakeholders involved in
emergency response.
The scalability and adaptability of "My Helping Buddy" are also paramount considerations in our
design. By leveraging modern technologies and agile development methodologies, we have
engineered a solution that is capable of scaling to meet the evolving needs of emergency
management.

In conclusion, the analysis highlights the critical need for innovative incident management
solutions and underscores the motivation behind the development of "My Helping Buddy." By
addressing the identified gaps and limitations, this project seeks to contribute to the advancement
of emergency management practices and ultimately improve the safety and well-being of
communities.
 3. SOFTWARE REQUIREMENTS SPECIFICATIONS
3.1 System configurations

The Software Requirements Specification (SRS) serves as the culmination of meticulous analysis,
refining the functions and performance allocated to the software as an integral part of system
engineering. This document establishes a comprehensive information description, delineates
detailed functional requirements, portrays system behavior, and outlines performance and design
constraints, alongside validation criteria and other pertinent information crucial to the
requirements.

Software Requirements:

 Operating System: Windows 10.

 Coding Language: Java with Spring Boot framework.
 Front-End Development: HTML5, CSS3, JavaScript.
 Integrated Development Environment (IDE): Visual Studio Code
 Database Management System: MySQL.

Hardware Requirements:

 Processor: Intel Core i5 or equivalent.

 Storage: 500GB SSD.
 Memory: 8GB RAM.
 4. TECHNOLOGY USED AND ITS DESCRIPTION
Frontend:
 HTML (Hypertext Markup Language): The standard markup language for creating web
pages and web applications.
 CSS (Cascading Style Sheets): Used for styling the appearance of HTML elements on
web pages.
 JavaScript: A programming language commonly used for creating interactive effects
within web browsers.
Backend:
 Spring Framework (Spring Boot): A popular Java framework for building enterprise-level
applications. Spring Boot simplifies the setup and configuration of Spring-based
applications, enabling rapid development.
Database:
 MySQL: An open-source relational database management system (RDBMS) that uses
structured query language (SQL). It's commonly used for storing structured data in web
applications.
Programming Language:
 Java: A high-level, object-oriented programming language known for its platform
independence. Java is widely used for building web applications, mobile apps, and
enterprise software.
 5. CODING

Home Controller
package com.emergency;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.emergency.Service.UserRegisterService;
import com.emergency.entity.AccidentReport;
import com.emergency.entity.FireReport;
import com.emergency.entity.TrafficReport;
import com.emergency.entity.User;
import com.emergency.entity.UserRegister;
import com.emergency.repository.AccidentRepository;
import com.emergency.repository.FireRepository;
import com.emergency.repository.TrafficRepository;
import com.emergency.repository.UserRepository;

@Controller
public class HomeController {

@Autowired
private FireRepository fireRepo;

@Autowired
private TrafficRepository trafficRepo;

@Autowired
private AccidentRepository accidentRepo;

@Autowired
private UserRegisterService userService;

@GetMapping("/")
public String home() {
 return "index";
}

@GetMapping("/base")
public String base() {
return "base";
}

@GetMapping("/login")
public String login() {
return "login";
}

@GetMapping("/userRegister")
public String userRegister() {
return "register";
}

@PostMapping("/createUser")
public String UserRegistration(@ModelAttribute UserRegister user) {
userService.createUser(user);
return "register";
}

@PostMapping("/loginMain")
public String login(String username, String password) {
// Validate the username and password
if ("[email protected]".equals(username) && "12345".equals(password)) {
return "index"; // Redirect to dashboard if login is successful
}
if ("[email protected]".equals(username) && "admin".equals(password)) {
return "admin"; // Redirect to dashboard if login is successful
}

return null;
}

@PostMapping("/register")
@ResponseBody
public String register(@RequestParam("incidentType") String incidentType,
@RequestParam("description") String description,
@RequestParam(value = "contactInfo", required = false) String
contactInfo,
 @RequestParam(value = "location", required = false) String location) {
switch(incidentType) {
case "Fire":
FireReport fireReport = new FireReport();
fireReport.setDescription(description);
fireReport.setContactInfo(contactInfo);
fireReport.setLocation(location);
fireRepo.save(fireReport);
break;
case "Traffic":
TrafficReport trafficReport = new TrafficReport();
trafficReport.setDescription(description);
trafficReport.setContactInfo(contactInfo);
trafficReport.setLocation(location);
trafficRepo.save(trafficReport);
break;
case "Accidents":
AccidentReport accidentReport = new AccidentReport();
accidentReport.setDescription(description);
accidentReport.setContactInfo(contactInfo);
accidentReport.setLocation(location);
accidentRepo.save(accidentReport);
break;
default:
// Handle other incident types if necessary
break;
}
return "Report submitted successfully";
}

@GetMapping("/admin")
public String adminPage() {

return "admin";
}

@GetMapping("/location")
public String loc() {
return "location";
}

@GetMapping("/admin/{incidentType}")
public String showReports(@PathVariable String incidentType, Model model) {
switch (incidentType) {
 case "Fire":
Iterable<FireReport> fireReports = fireRepo.findAll();
model.addAttribute("reports", fireReports);
break;
case "Traffic":
Iterable<TrafficReport> trafficReports = trafficRepo.findAll();
model.addAttribute("reports", trafficReports);
break;
case "Accident":
Iterable<AccidentReport> accidentReports = accidentRepo.findAll();
model.addAttribute("reports", accidentReports);
break;
default:
// Handle invalid incident types or other cases if necessary
break;
}
return "reportTable"; // Return the name of the Thymeleaf template to display the
table
}
}
 Entity Package
AccidentReport
package com.emergency;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.emergency.Service.UserRegisterService;
import com.emergency.entity.AccidentReport;
import com.emergency.entity.FireReport;
import com.emergency.entity.TrafficReport;
import com.emergency.entity.User;
import com.emergency.entity.UserRegister;
import com.emergency.repository.AccidentRepository;
import com.emergency.repository.FireRepository;
import com.emergency.repository.TrafficRepository;
import com.emergency.repository.UserRepository;

@Controller
public class HomeController {

@Autowired
private FireRepository fireRepo;

@Autowired
private TrafficRepository trafficRepo;

@Autowired
private AccidentRepository accidentRepo;

@Autowired
private UserRegisterService userService;

@GetMapping("/")
public String home() {
return "index";
}
 @GetMapping("/base")
public String base() {
return "base";
}

@GetMapping("/login")
public String login() {
return "login";
}

@GetMapping("/userRegister")
public String userRegister() {
return "register";
}

@PostMapping("/createUser")
public String UserRegistration(@ModelAttribute UserRegister user) {
userService.createUser(user);
return "register";
}

@PostMapping("/loginMain")
public String login(String username, String password) {
// Validate the username and password
if ("[email protected]".equals(username) && "12345".equals(password)) {
return "index"; // Redirect to dashboard if login is successful
}
if ("[email protected]".equals(username) && "admin".equals(password)) {
return "admin"; // Redirect to dashboard if login is successful
}

return null;
}

@PostMapping("/register")
@ResponseBody
public String register(@RequestParam("incidentType") String incidentType,
@RequestParam("description") String description,
@RequestParam(value = "contactInfo", required = false) String
contactInfo,
@RequestParam(value = "location", required = false) String location) {
switch(incidentType) {
 case "Fire":
FireReport fireReport = new FireReport();
fireReport.setDescription(description);
fireReport.setContactInfo(contactInfo);
fireReport.setLocation(location);
fireRepo.save(fireReport);
break;
case "Traffic":
TrafficReport trafficReport = new TrafficReport();
trafficReport.setDescription(description);
trafficReport.setContactInfo(contactInfo);
trafficReport.setLocation(location);
trafficRepo.save(trafficReport);
break;
case "Accidents":
AccidentReport accidentReport = new AccidentReport();
accidentReport.setDescription(description);
accidentReport.setContactInfo(contactInfo);
accidentReport.setLocation(location);
accidentRepo.save(accidentReport);
break;
default:
// Handle other incident types if necessary
break;
}
return "Report submitted successfully";
}

@GetMapping("/admin")
public String adminPage() {

return "admin";
}

@GetMapping("/location")
public String loc() {
return "location";
}

@GetMapping("/admin/{incidentType}")
public String showReports(@PathVariable String incidentType, Model model) {
switch (incidentType) {
case "Fire":
Iterable<FireReport> fireReports = fireRepo.findAll();
 model.addAttribute("reports", fireReports);
break;
case "Traffic":
Iterable<TrafficReport> trafficReports = trafficRepo.findAll();
model.addAttribute("reports", trafficReports);
break;
case "Accident":
Iterable<AccidentReport> accidentReports = accidentRepo.findAll();
model.addAttribute("reports", accidentReports);
break;
default:
// Handle invalid incident types or other cases if necessary
break;
}
return "reportTable"; // Return the name of the Thymeleaf template to display the
table
}
}

FireReport
package com.emergency.entity;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class FireReport {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String description;
private String contactInfo;
private String location;

public FireReport() {
super();
// TODO Auto-generated constructor stub
}

public FireReport(Long id, String description, String contactInfo, String location) {

super();
 this.id = id;
this.description = description;
this.contactInfo = contactInfo;
this.location = location;
}

public String getLocation() {

return location;
}

public void setLocation(String location) {

this.location = location;
}

public Long getId() {

return id;
}

public void setId(Long id) {

this.id = id;
}

public String getDescription() {

return description;
}

public void setDescription(String description) {

this.description = description;
}

public String getContactInfo() {

return contactInfo;
}

public void setContactInfo(String contactInfo) {

this.contactInfo = contactInfo;
}

TrafficReport
package com.emergency.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class TrafficReport {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String description;
private String contactInfo;
private String location;

public TrafficReport() {
super();
// TODO Auto-generated constructor stub
}

public TrafficReport(Long id, String description, String contactInfo, String location) {

super();
this.id = id;
this.description = description;
this.contactInfo = contactInfo;
this.location = location;
}

public String getLocation() {

return location;
}

public void setLocation(String location) {

this.location = location;
}

public Long getId() {

return id;
}
public void setId(Long id) {
this.id = id;
}
public String getDescription() {
return description;
 }
public void setDescription(String description) {
this.description = description;
}
public String getContactInfo() {
return contactInfo;
}
public void setContactInfo(String contactInfo) {
this.contactInfo = contactInfo;
}
}

User
package com.emergency.entity;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class User {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String incidentType;
private String description;
private String contactInfo;
public User(Long id, String incidentType, String description, String contactInfo) {
super();
this.id = id;
this.incidentType = incidentType;
this.description = description;
this.contactInfo = contactInfo;
}
public User() {
super();
// TODO Auto-generated constructor stub
}
public Long getId() {
return id;
}
public void setId(Long id) {
 this.id = id;
}
public String getIncidentType() {
return incidentType;
}
public void setIncidentType(String incidentType) {
this.incidentType = incidentType;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getContactInfo() {
return contactInfo;
}
public void setContactInfo(String contactInfo) {
this.contactInfo = contactInfo;
}
}

UserRegister
package com.emergency.entity;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class UserRegister {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int id;

private String name;

private String email;

private String password;

 public UserRegister() {
super();
// TODO Auto-generated constructor stub
}

public UserRegister(int id, String name, String email, String password) {

super();
this.id = id;
this.name = name;
this.email = email;
this.password = password;
}

public int getId() {

return id;
}

public void setId(int id) {

this.id = id;
}

public String getName() {

return name;
}

public void setName(String name) {

this.name = name;
}

public String getEmail() {

return email;
}

public void setEmail(String email) {

this.email = email;
}

public String getPassword() {

return password;
}
public void setPassword(String password) {
this.password = password;
}
}
 Repository Package
AccidentRepository

package com.emergency.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.emergency.entity.AccidentReport;

public interface AccidentRepository extends JpaRepository<AccidentReport, Long>{

}

FireRepository

package com.emergency.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.emergency.entity.FireReport;

public interface FireRepository extends JpaRepository<FireReport, Long>{

}
TrafficRepository

package com.emergency.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.emergency.entity.TrafficReport;

public interface TrafficRepository extends JpaRepository<TrafficReport, Long>{

UserRegisterRepository

package com.emergency.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.emergency.entity.UserRegister;

public interface UserRegisterRepository extends JpaRepository<UserRegister, Integer>{

}

UserRepository

package com.emergency.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.emergency.entity.User;
import com.emergency.entity.UserRegister;

public interface UserRepository extends JpaRepository<User, Long>{

}
 Service Package

UserRegisterService

package com.emergency.Service;

import com.emergency.entity.UserRegister;

public interface UserRegisterService {

public UserRegister createUser(UserRegister user);

UserRegisterServiceImpl

package com.emergency.Service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.emergency.entity.UserRegister;
import com.emergency.repository.UserRegisterRepository;

@Service
public class UserRegisterServiceImpl implements UserRegisterService {

@Autowired
private UserRegisterRepository userRegRepo;

@Override
public UserRegister createUser(UserRegister user) {
return userRegRepo.save(user);
}

}
 Application Properties (Database Connectivity)

server.port=8084
spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/emergency
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

HTML Pages
Admin.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Admin Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
margin-top: 20px;
color: black;

}
.admin{
background-color: #595757;
width: 40%;
text-align: center;
justify-content: center;
border-radius: 10px;
}

button {
padding: 10px 20px;
margin: 10px;
background-color: #007bff;
 color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}

#reportTable {
margin-top: 20px;
}

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}

th, td {
padding: 10px;
text-align: left;
}

thead {
background-color: #007bff;
color: #fff;
}

tbody tr:nth-child(even) {
background-color: #f2f2f2;
}

tbody tr:hover {
background-color: #e0e0e0;
}
.sub{
text-align: center;
}
</style>

</head>
<body>
<h1>Admin Dashboard</h1>
 <div>
<button onclick="showReports('Fire')">Fire Reports</button>
<button onclick="showReports('Traffic')">Traffic Reports</button>
<button onclick="showReports('Accident')">Accident Reports</button>
</div>

<br><button style="background-image: linear-gradient(to right, #ff416c, #ff4b2b); color:

white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;"
onclick="redirectToLoginPage()">LogOut</button>

<div id="reportTable" style="margin-top: 20px;">

<!-- Table for displaying reports will be populated dynamically -->
</div>

<script>
function showReports(incidentType) {
fetch('/admin/' + incidentType)
.then(response => response.text())
.then(data => {
document.getElementById('reportTable').innerHTML = data;
})
.catch(error => {
console.error('Error:', error);
});
}

function redirectToLoginPage() {
window.location.href = '/login';
}
</script>
</body>
</html>

Base.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>My HELPING BUDDY</title>
<style>
*{
margin:0%;
padding: 0%;
box-sizing: border-box;
 background: url('https://images.unsplash.com/photo-1573068111653-
f18bef611c8a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-
repeat center center fixed;
background-size: cover;
backdrop-filter: blur(100px);
background-color: #f0f0f0;
}
h1{
margin: 30px 0 20px 0px;
font-size: 100px;
font-weight: 900;
text-transform: uppercase;
text-shadow: 2px 1px 6px black;
color: #dcaf1b;
}
p{
font-size: 35px;
color: rgb(237, 237, 28);
flex-wrap: wrap;
font-weight: 600;
letter-spacing: 1px;
text-shadow: 6px 6px 12px black;
}

#container{
width: 100%;
height: 85vh;
display: flex;
flex-direction: column;
color: white;
justify-content: center;
align-items: center;
text-align: center;
}
button{
background: none;
font-size: 18px;
padding: 5px;
cursor: pointer;
margin: 12px 0;
border: 2px solid #FFC300;
color: rgb(20, 212, 237);
}
</style>
</head>
<body>
<h1>MY HELPING BUDDY</h1>
<p>Hii, I'm your helping buddy. In case you have witness any fire incident, traffic issue,
accident, or any other
issue related to your locality. You can check in here.
<br>
<button style="background-image: linear-gradient(to right, #ff416c, #ff4b2b); color: white;
padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;"
onclick="redirectToLoginPage()">Login</button>
<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none;
border-radius: 5px; cursor: pointer; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px
rgba(0, 0, 0, 0.08); transition: all 0.15s ease;"
onclick="redirectToRegisterPage()">Register</button>

<script>
function redirectToLoginPage() {
window.location.href = '/login';
}

function redirectToRegisterPage() {
window.location.href = '/userRegister';
}
</script>

</body>
</html>

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Report Issues Website</title>
<style>

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #ef360cab;
color: #121010d8;
text-align: center;
padding: 10px 0;
}
.incident{
text-align: center;
}
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}
.category-button {
display: inline-block;
margin: 10px;
padding: 15px 30px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
body {
font-family: Arial, sans-serif;
}

h1 {
text-align: center;
margin-top: 50px;
}

form {
width: 800px;
margin: 0 auto;
padding: 30px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}

label {
display: block;
 margin-top: 20px;
}

select, textarea, input[type="text"] {

width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin-top: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
opacity: 0.8;
}
#incident-report{
background-color: #9675d7;
}
.cb {
display:flexbox;
margin: 10px;
padding: 15px 30px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
#submitbtn{
text-align: center;
}

</style>

</head>
<body>
<header>
<h1>Report Issues Website</h1>
</header>
<h2 class="incident">Report an incident</h2>
<div>
<form id="incident-form">
<div>
<input type="hidden" id="incidentType" name="incidentType"> <!-- Add a hidden input
field -->
<input type="button" class="cb" value="Fire" onclick="setIncident('Fire')">
<input type="button" class="cb" value="Traffic" onclick="setIncident('Traffic')">
<input type="button" class="cb" value="Accidents" onclick="setIncident('Accidents')">
<!-- Add buttons for other incident types -->
<label for="description">Description:</label>
<textarea id="description" name="description" rows="4" cols="50"></textarea>
<label for="contact-info">Contact Information (Optional):</label>
<input type="text" id="contact-info" name="contact-info">
<label for="location">Location:</label>
<!-- Add location input -->
<input type="text" id="location" name="location"><br>
<button type="button" onclick="getLocation()">Get Location</button>
<br> <!-- Button to get location -->
<input type="submit" id="submitbtn" value="Submit">
</div>
</form>
<br><button style="background-image: linear-gradient(to right, #ff416c, #ff4b2b); color:
white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;"
onclick="redirectToLoginPage()">LogOut</button>
</div>

<script>
function setIncident(incidentType) {
document.getElementById('incidentType').value = incidentType; // Set the incident type
value
document.getElementById('description').value = "Incident type: " + incidentType;
}

document.getElementById('incident-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission

var formData = new FormData(); // Create a new FormData object

// Get values from form inputs

 var incidentType = document.getElementById('incidentType').value; // Retrieve incident
type from hidden field
var description = document.getElementById('description').value;
var contactInfo = document.getElementById('contact-info').value;
var location = document.getElementById('location').value;

// Append form data

formData.append('incidentType', incidentType);
formData.append('description', description);
formData.append('contactInfo', contactInfo);
formData.append('location', location);

fetch('/register', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert('Report submitted successfully!');
document.getElementById('incident-form').reset(); // Clear form fields
} else {
alert('Error submitting report. Please try again later.');
}
})
.catch(error => {
console.error('Error:', error);
alert('Error submitting report. Please try again later.');
});
});

// Function to get user's current location and populate the location field
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("location").value = "Geolocation is not supported by this
browser.";
}
}

function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
 document.getElementById("location").value = "Latitude: " + latitude + ", Longitude: " +
longitude;
}

function redirectToLoginPage() {
window.location.href = '/login';
}
</script>

</body>
</html>

Location.html
<!DOCTYPE html>
<html>
<body>
<h1>Emergency!!! Send message</h1>

<button onclick="getLocation()">Emergency</button>

<p id="demo"></p>

<script>
function openGoogleMaps(latitude, longitude) {
var url = "https://www.google.com/maps?q=" + latitude + "," + longitude;
window.open(url, "_blank");
}
</script>

</body>
</html>

Login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
 padding: 0;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 100px auto;
background-color: #fff;
border-radius: 8px;
padding: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
outline: none;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 12px 20px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.signup-link {
text-align: center;
margin-top: 20px;
}
.signup-link a {
color: #007bff;
 text-decoration: none;
}
.signup-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="/loginMain" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<input type="submit" value="Login">

</form>

</div>

</body>
</html>

Register.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 50px auto;
background-color: #fff;
 border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 12px 20px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form action="createUser" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
 <input type="submit" value="Register">
</form>
</div>
</body>
</html>

Report.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Report Table</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

h2 {
text-align: center;
margin-top: 20px;
text-decoration: underline;
}

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}

th,
td {
padding: 10px;
text-align: left;
}

thead {
background-color: #5136d9;
color: #fff;
}
 tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h2>Reports</h2>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Contact Info</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr th:each="report : ${reports}">
<td th:text="${report.id}"></td>
<td th:text="${report.description}"></td>
<td th:text="${report.contactInfo}"></td>
<td th:text="${report.location}"></td>
</tr>
</tbody>
</table>
</body>
</html>
 SS-Button
// server.js
const express = require('express');
const app = express();
const NodeGeocoder = require('node-geocoder');
const nodemailer = require('nodemailer');

// Define geocoder options

const geocoderOptions = {
provider: 'openstreetmap'
};

// Initialize geocoder
const geocoder = NodeGeocoder(geocoderOptions);

// Initialize nodemailer transporter

const transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: '[email protected]',
pass: 'mxevpuzuaqcwblnd'
}
});

// Define a route to get the device's location

app.get('/location', (req, res) => {
// Fetch the device's location
geocoder.geocode('localhost', (err, location) => {
if (err) {
console.error('Error getting location:', err);
res.status(500).json({ error: 'Could not get location' });
} else {
// Send email with location
const mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'Current Location',
text: Latitude: ${location[0].latitude}, Longitude: ${location[0].longitude}
};

transporter.sendMail(mailOptions, (error, info) => {

if (error) {
console.error('Error sending email:', error);
res.status(500).json({ error: 'Could not send email' });
 } else {
console.log('Email sent:', info.response);
// Send the location as response
res.json({
latitude: location[0].latitude,
longitude: location[0].longitude,
message: 'Location sent to email'
});
}
});
}
});
});

// Start the server

const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(Server is running on port ${port});
});
6. SCREENSHOTS
 7. CONCLUSION

In conclusion, the development of the incident management web application, titled "My Helping
Buddy," marks a significant step towards enhancing emergency response and management
capabilities in our modern society.

By leveraging HTML, CSS, and JavaScript for the frontend interface, and Spring Framework
(Spring Boot) for the backend logic, we have created a user-friendly platform that streamlines the
reporting process and facilitates real-time communication among stakeholders. The integration of
MySQL as the database management system ensures secure storage and retrieval of incident data,
while Java serves as the backbone programming language, enabling robust and scalable application
development.

The proposed system's key features, including unified incident reporting, real-time
communication, and geospatial mapping capabilities, are designed to enhance coordination,
optimize resource allocation, and ultimately, improve public safety outcomes. By providing a
centralized platform for incident reporting and management, "My Helping Buddy" empowers
citizens to contribute actively to emergency response efforts while enabling authorities to make
data-driven decisions and respond promptly to critical situations.

In essence, "My Helping Buddy" represents not only a technological solution but also a testament
to our collective dedication to serving the greater good and safeguarding the well-being of our
communities. As we embark on this transformative journey, let us remain steadfast in our
commitment to building a safer, more connected, and resilient future for all.
 8. BIBLIOGRAPHY

1. ECMA International. "JavaScript (ECMAScript) Language Specification," 2021.

[Online]. Available: https://www.ecma-international.org/ecma-262/.
2. MySQL. "MySQL Documentation," 2022. [Online]. Available:
https://dev.mysql.com/doc/.
3. W3Schools. "HTML Geolocation." [Online]. Available:
https://www.w3schools.com/html/html5_geolocation.asp.
4. Spring Team. "Building REST services with Spring." Spring Boot Documentation.
Accessed on Apr. 21, 2024. [Online]. Available: https://spring.io/guides/gs/spring-boot.
5. W3Schools. "Java Introduction." Available:
https://www.w3schools.com/java/java_intro.asp. Accessed on Apr. 21, 2024.
6. https://www.w3schools.com/css/
7. https://www.nodemailer.com/
8. https://www.postman.com/
9. https://www.mysql.com/products/connector/
10. https://www.eclipse.org/downloads/
11. https://www.eclipse.org/downloads/