LostAndFound Complete SourceCode
LostAndFound Complete SourceCode
Code
Project Overview
A full-stack Java web application for managing lost and found items with Google Maps integration,
user authentication, and file upload capabilities.
Technology Stack
Frontend: HTML5, CSS3, JavaScript
Project Structure
LostAndFound/
├── src/com/lostandfound/
│ ├── model/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ ├── dao/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ ├── servlet/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ └── util/
│ ├── [Link]
│ └── [Link]
├── WebContent/
│ ├── WEB-INF/
│ │ └── [Link]
│ ├── css/
│ │ └── [Link]
│ ├── js/
│ │ └── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
└── database/
└── [Link]
Database Setup
SQL Schema
File: database/[Link]
-- Create Database
CREATE DATABASE IF NOT EXISTS lostandfound;
USE lostandfound;
-- Users Table
CREATE TABLE users (
user_id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
full_name VARCHAR(100) NOT NULL,
phone VARCHAR(20),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
-- Items Table
CREATE TABLE items (
item_id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT NOT NULL,
item_type ENUM('lost', 'found') NOT NULL,
title VARCHAR(200) NOT NULL,
description TEXT NOT NULL,
category VARCHAR(50) NOT NULL,
location_address VARCHAR(255) NOT NULL,
latitude DECIMAL(10, 8),
longitude DECIMAL(11, 8),
contact_name VARCHAR(100) NOT NULL,
contact_phone VARCHAR(20) NOT NULL,
contact_email VARCHAR(100),
status ENUM('active', 'resolved', 'closed') DEFAULT 'active',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(user_id) ON DELETE CASCADE
);
-- Categories Table
CREATE TABLE categories (
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50) NOT NULL UNIQUE,
icon VARCHAR(50),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Sample Items
INSERT INTO items (user_id, item_type, title, description, category, location_address, la
(2, 'lost', 'iPhone 13 Pro', 'Lost black iPhone 13 Pro near Central Park.', 'Electronics'
(3, 'found', 'Brown Leather Wallet', 'Found wallet with ID cards near Times Square.', 'Wa
Package: [Link]
Location: src/com/lostandfound/dao/[Link]
package [Link];
import [Link];
import [Link];
import [Link];
static {
try {
[Link](DB_DRIVER);
[Link]("MySQL JDBC Driver loaded successfully.");
} catch (ClassNotFoundException e) {
[Link]("MySQL JDBC Driver not found!");
[Link]();
}
}
2. [Link]
Package: [Link]
Location: src/com/lostandfound/model/[Link]
package [Link];
import [Link];
public User() {}
public User(String username, String email, String password, String fullName, String p
[Link] = username;
[Link] = email;
[Link] = password;
[Link] = fullName;
[Link] = phone;
}
3. [Link]
Package: [Link]
Location: src/com/lostandfound/model/[Link]
package [Link];
import [Link];
import [Link];
public Item() {}
Package: [Link]
Location: src/com/lostandfound/model/[Link]
package [Link];
public Category() {}
5. [Link]
Package: [Link]
Location: src/com/lostandfound/dao/[Link]
package [Link];
import [Link];
import [Link];
import [Link].*;
[Link](1, [Link]());
[Link](2, [Link]());
[Link](3, [Link]([Link]()));
[Link](4, [Link]());
[Link](5, [Link]());
return [Link]() > 0;
} catch (SQLException e) {
[Link]();
return false;
}
}
[Link](1, username);
[Link](2, username);
[Link](3, [Link](password));
ResultSet rs = [Link]();
if ([Link]()) {
User user = new User();
[Link]([Link]("user_id"));
[Link]([Link]("username"));
[Link]([Link]("email"));
[Link]([Link]("full_name"));
[Link]([Link]("phone"));
return user;
}
} catch (SQLException e) {
[Link]();
}
return null;
}
[Link](1, userId);
ResultSet rs = [Link]();
if ([Link]()) {
User user = new User();
[Link]([Link]("user_id"));
[Link]([Link]("username"));
[Link]([Link]("email"));
[Link]([Link]("full_name"));
[Link]([Link]("phone"));
return user;
}
} catch (SQLException e) {
[Link]();
}
return null;
}
}
6. [Link]
Package: [Link]
Location: src/com/lostandfound/dao/[Link]
package [Link];
import [Link];
import [Link].*;
import [Link];
import [Link];
[Link](1, [Link]());
[Link](2, [Link]());
[Link](3, [Link]());
[Link](4, [Link]());
[Link](5, [Link]());
[Link](6, [Link]());
[Link](7, [Link]());
[Link](8, [Link]());
[Link](9, [Link]());
[Link](10, [Link]());
[Link](11, [Link]());
if (result > 0) {
ResultSet rs = [Link]();
if ([Link]()) {
[Link]([Link](1));
}
return true;
}
} catch (SQLException e) {
[Link]();
}
return false;
}
while ([Link]()) {
[Link](extractItemFromResultSet(rs));
}
} catch (SQLException e) {
[Link]();
}
return items;
}
[Link](1, itemType);
ResultSet rs = [Link]();
while ([Link]()) {
[Link](extractItemFromResultSet(rs));
}
} catch (SQLException e) {
[Link]();
}
return items;
}
7. [Link]
Package: [Link]
Location: src/com/lostandfound/util/[Link]
package [Link];
import [Link];
import [Link];
import [Link];
return [Link]();
} catch (NoSuchAlgorithmException e) {
throw new RuntimeException(e);
}
}
8. [Link]
Package: [Link]
Location: src/com/lostandfound/util/[Link]
package [Link];
import [Link];
public class ValidationUtil {
9. [Link]
Package: [Link]
Location: src/com/lostandfound/servlet/[Link]
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link].*;
import [Link];
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
private UserDAO userDAO = new UserDAO();
if () {
[Link]("[Link]?error=Passwords do not match");
return;
}
if ([Link]() < 6) {
[Link]("[Link]?error=Password must be at least 6 charact
return;
}
if ([Link](user)) {
[Link]("[Link]?success=Registration successful! Please logi
} else {
[Link]("[Link]?error=Registration failed. Username or em
}
}
}
10. [Link]
Package: [Link]
Location: src/com/lostandfound/servlet/[Link]
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link].*;
import [Link];
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
private UserDAO userDAO = new UserDAO();
if (user != null) {
HttpSession session = [Link]();
[Link]("user", user);
[Link]("userId", [Link]());
[Link]("username", [Link]());
[Link]("[Link]");
} else {
[Link]("[Link]?error=Invalid username or password");
}
}
}
11. [Link]
Package: [Link]
Location: src/com/lostandfound/servlet/[Link]
package [Link];
import [Link];
import [Link];
import [Link].*;
import [Link];
@WebServlet("/LogoutServlet")
public class LogoutServlet extends HttpServlet {
12. [Link]
Package: [Link]
Location: src/com/lostandfound/servlet/[Link]
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link].*;
import [Link];
@WebServlet("/PostItemServlet")
public class PostItemServlet extends HttpServlet {
private ItemDAO itemDAO = new ItemDAO();
if ([Link](item)) {
[Link]("[Link]?success=Item posted successfully");
} else {
[Link]("post-" + itemType + ".jsp?error=Failed to post item");
}
}
}
13. [Link]
Package: [Link]
Location: src/com/lostandfound/servlet/[Link]
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link].*;
import [Link];
import [Link];
@WebServlet("/ViewItemsServlet")
public class ViewItemsServlet extends HttpServlet {
private ItemDAO itemDAO = new ItemDAO();
[Link]("items", items);
[Link]("[Link]").forward(request, response);
}
}
JSP Files
14. [Link]
Location: WebContent/[Link]
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lost & Found Portal - Home</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<div>
<div>
<h1>🔍 Lost & Found Portal</h1>
<p>Find what you've lost, return what you've found</p>
<div>
<a href="[Link]">Get Started</a>
<a href="[Link]">Login</a>
</div>
<div>
<div>
<div>📢</div>
<h3>Post Lost Items</h3>
<p>Report items you've lost with detailed descriptions</p>
</div>
<div>
<div>✅</div>
<h3>Report Found Items</h3>
<p>Help others by posting items you've found</p>
</div>
<div>
<div>🗺️</div>
<h3>Map Integration</h3>
<p>View exact locations on interactive maps</p>
</div>
<div>
<div>📸</div>
<h3>Media Upload</h3>
<p>Upload images and videos of items</p>
</div>
</div>
</div>
</div>
<footer>
<p>© 2024 Lost & Found Portal. All rights reserved.</p>
</footer>
</body>
</html>
15. [Link]
Location: WebContent/[Link]
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - Lost & Found Portal</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<div>
<div>
<h2>Create Account</h2>
<%
String error = [Link]("error");
if (error != null) {
%>
<div><%= error %></div>
<%
}
%>
<div>
<label>Username</label>
<input type="text" name="username" required>
</div>
<div>
<label>Email</label>
<input type="email" name="email" required>
</div>
<div>
<label>Phone Number</label>
<input type="tel" name="phone" required>
</div>
<div>
<label>Password</label>
<input type="password" name="password" required>
</div>
<div>
<label>Confirm Password</label>
<input type="password" name="confirmPassword" required>
</div>
<p>
Already have an account? <a href="[Link]">Login here</a>
</p>
</div>
</div>
</body>
</html>
16. [Link]
Location: WebContent/[Link]
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Lost & Found Portal</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<div>
<div>
<h2>Welcome Back</h2>
<%
String error = [Link]("error");
String success = [Link]("success");
if (error != null) {
%>
<div><%= error %></div>
<%
}
if (success != null) {
%>
<div><%= success %></div>
<%
}
%>
<div>
<label>Password</label>
<input type="password" name="password" required>
</div>
<p>
Don't have an account? <a href="[Link]">Register here</a>
</p>
</div>
</div>
</body>
</html>
17. [Link]
Location: WebContent/[Link]
<html>
<head>
<meta charset="UTF-8">
<title>Dashboard - Lost & Found</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<nav class="navbar">
<div>
<h2>Lost & Found Portal</h2>
<div>
<a href="[Link]">Dashboard</a>
<a href="ViewItemsServlet">Browse Items</a>
<span>Welcome, <%= [Link]() %></span>
<a href="LogoutServlet">Logout</a>
</div>
</div>
</nav>
<div>
<h1>Dashboard</h1>
<div>
<a href="[Link]">
<h3>📢 Report Lost Item</h3>
<p>Post details about an item you've lost</p>
</a>
<a href="[Link]">
<h3>✅ Report Found Item</h3>
<p>Help return an item you've found</p>
</a>
<a href="ViewItemsServlet?type=lost">
<h3>🔍 Browse Lost Items</h3>
<p>View all reported lost items</p>
</a>
<a href="ViewItemsServlet?type=found">
<h3>📦 Browse Found Items</h3>
<p>View all reported found items</p>
</a>
</div>
</div>
</body>
</html>
18. [Link]
Location: WebContent/[Link]
<html>
<head>
<meta charset="UTF-8">
<title>Report Lost Item</title>
<link rel="stylesheet" href="css/[Link]">
<script src="[Link]
</head>
<body>
<div>
<h2>Report Lost Item</h2>
<form action="PostItemServlet" method="post">
<input type="hidden" name="itemType" value="lost">
<div>
<label>Item Title</label>
<input type="text" name="title" required>
</div>
<div>
<label>Description</label>
<textarea name="description" rows="4" required></textarea>
</div>
<div>
<label>Category</label>
<select name="category" required>
<option value="">Select Category</option>
<option value="Electronics">Electronics</option>
<option value="Documents">Documents</option>
<option value="Jewelry">Jewelry</option>
<option value="Bags">Bags</option>
<option value="Keys">Keys</option>
<option value="Wallets">Wallets</option>
<option value="Pets">Pets</option>
<option value="Clothing">Clothing</option>
<option value="Books">Books</option>
<option value="Others">Others</option>
</select>
</div>
<div>
<label>Location Address</label>
<input type="text" name="locationAddress" id="address" required>
</div>
<div>
<label>Latitude</label>
<input type="text" name="latitude" id="latitude" value="40.7128" requi
</div>
<div>
<label>Longitude</label>
<input type="text" name="longitude" id="longitude" value="-74.0060" re
</div>
<div></div>
<div>
<label>Contact Name</label>
<input type="text" name="contactName" required>
</div>
<div>
<label>Contact Phone</label>
<input type="tel" name="contactPhone" required>
</div>
<div>
<label>Contact Email (Optional)</label>
<input type="email" name="contactEmail">
</div>
<script>
let map, marker;
function initMap() {
const defaultPos = { lat: 40.7128, lng: -74.0060 };
[Link]('dragend', function(e) {
[Link]('latitude').value = [Link]();
[Link]('longitude').value = [Link]();
});
if ([Link]) {
[Link](function(position) {
const pos = {
lat: [Link],
lng: [Link]
};
[Link](pos);
[Link](pos);
[Link]('latitude').value = [Link];
[Link]('longitude').value = [Link];
});
}
}
[Link] = initMap;
</script>
</body>
</html>
19. [Link]
Location: WebContent/[Link]
<html>
<head>
<meta charset="UTF-8">
<title>Report Found Item</title>
<link rel="stylesheet" href="css/[Link]">
<script src="[Link]
</head>
<body>
<div>
<h2>Report Found Item</h2>
<form action="PostItemServlet" method="post">
<input type="hidden" name="itemType" value="found">
<div>
<label>Item Title</label>
<input type="text" name="title" required>
</div>
<div>
<label>Description</label>
<textarea name="description" rows="4" required></textarea>
</div>
<div>
<label>Category</label>
<select name="category" required>
<option value="">Select Category</option>
<option value="Electronics">Electronics</option>
<option value="Documents">Documents</option>
<option value="Jewelry">Jewelry</option>
<option value="Bags">Bags</option>
<option value="Keys">Keys</option>
<option value="Wallets">Wallets</option>
<option value="Pets">Pets</option>
<option value="Clothing">Clothing</option>
<option value="Books">Books</option>
<option value="Others">Others</option>
</select>
</div>
<div>
<label>Location Address</label>
<input type="text" name="locationAddress" id="address" required>
</div>
<div>
<label>Latitude</label>
<input type="text" name="latitude" id="latitude" value="40.7128" requi
</div>
<div>
<label>Longitude</label>
<input type="text" name="longitude" id="longitude" value="-74.0060" re
</div>
<div></div>
<div>
<label>Contact Name</label>
<input type="text" name="contactName" required>
</div>
<div>
<label>Contact Phone</label>
<input type="tel" name="contactPhone" required>
</div>
<div>
<label>Contact Email (Optional)</label>
<input type="email" name="contactEmail">
</div>
<script>
let map, marker;
function initMap() {
const defaultPos = { lat: 40.7128, lng: -74.0060 };
[Link]('dragend', function(e) {
[Link]('latitude').value = [Link]();
[Link]('longitude').value = [Link]();
});
if ([Link]) {
[Link](function(position) {
const pos = {
lat: [Link],
lng: [Link]
};
[Link](pos);
[Link](pos);
[Link]('latitude').value = [Link];
[Link]('longitude').value = [Link];
});
}
}
[Link] = initMap;
</script>
</body>
</html>
20. [Link]
Location: WebContent/[Link]
<html>
<head>
<meta charset="UTF-8">
<title>View Items - Lost & Found</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<nav class="navbar">
<div>
<h2>Lost & Found Portal</h2>
<div>
<a href="[Link]">Dashboard</a>
<a href="ViewItemsServlet">All Items</a>
<a href="ViewItemsServlet?type=lost">Lost Items</a>
<a href="ViewItemsServlet?type=found">Found Items</a>
<a href="LogoutServlet">Logout</a>
</div>
</div>
</nav>
<div>
<h1>Browse Items</h1>
<%
List<Item> items = (List<Item>) [Link]("items");
if (items != null && ![Link]()) {
for (Item item : items) {
%>
<div>
<div>
<h3><%= [Link]() %></h3>
<span>
<%= [Link]().toUpperCase() %>
</span>
</div>
CSS File
21. [Link]
Location: WebContent/css/[Link]
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f5f5f5;
color: #333;
line-height: 1.6;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Navigation Bar */
.navbar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 0;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar h2 {
margin: 0;
}
.nav-links {
display: flex;
align-items: center;
gap: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.nav-links a:hover {
opacity: 0.8;
}
/* Hero Section */
.hero-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 80px 20px;
text-align: center;
}
.hero-section h1 {
font-size: 3em;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 1.3em;
margin-bottom: 30px;
opacity: 0.95;
}
.hero-actions {
margin: 40px 0;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 30px;
margin: 10px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
border: none;
cursor: pointer;
font-size: 16px;
}
.btn-primary {
background: white;
color: #667eea;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-secondary {
background: transparent;
border: 2px solid white;
color: white;
}
.btn-secondary:hover {
background: white;
color: #667eea;
}
.btn-block {
width: 100%;
display: block;
}
.btn-small {
padding: 8px 16px;
font-size: 14px;
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature {
background: white;
padding: 30px;
border-radius: 10px;
text-align: center;
transition: transform 0.3s;
}
.feature:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.feature-icon {
font-size: 48px;
margin-bottom: 15px;
}
.feature h3 {
margin-bottom: 10px;
color: #667eea;
}
/* Form Container */
.form-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
}
.form-wrapper {
background: white;
padding: 40px;
border-radius: 10px;
width: 100%;
max-width: 500px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.form-wrapper h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
/* Form Elements */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #555;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #667eea;
}
.form-group textarea {
resize: vertical;
font-family: inherit;
}
/* Alerts */
.alert {
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
.alert-error {
background: #fee;
color: #c33;
border: 1px solid #fcc;
}
.alert-success {
background: #efe;
color: #3c3;
border: 1px solid #cfc;
}
/* Form Footer */
.form-footer {
text-align: center;
margin-top: 20px;
color: #666;
}
.form-footer a {
color: #667eea;
text-decoration: none;
font-weight: bold;
}
.form-footer a:hover {
text-decoration: underline;
}
/* Dashboard Actions */
.dashboard-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 30px;
}
.action-card {
background: white;
padding: 30px;
border-radius: 10px;
text-decoration: none;
color: #333;
transition: all 0.3s;
border: 2px solid #eee;
}
.action-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-color: #667eea;
}
.action-card h3 {
color: #667eea;
margin-bottom: 10px;
}
.action-card p {
color: #666;
}
/* Item Cards */
.item-card {
background: white;
padding: 25px;
margin-bottom: 25px;
border-radius: 10px;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.item-header h3 {
margin: 0;
color: #333;
}
.item-type {
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
}
.[Link] {
background: #fee;
color: #c33;
}
.[Link] {
background: #efe;
color: #3c3;
}
.item-card p {
margin: 10px 0;
color: #555;
}
.item-date {
font-size: 12px;
color: #999;
margin-top: 15px;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 20px;
background: white;
border-radius: 10px;
}
.empty-state p {
font-size: 18px;
color: #666;
margin-bottom: 20px;
}
/* Footer */
footer {
text-align: center;
padding: 30px 20px;
background: #333;
color: white;
margin-top: 50px;
}
/* Map */
#map {
border-radius: 8px;
border: 2px solid #ddd;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2em;
}
.navbar .container {
flex-direction: column;
gap: 15px;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
}
.features-grid,
.dashboard-actions {
grid-template-columns: 1fr;
}
.form-wrapper {
padding: 30px 20px;
}
}
/* Loading Animation */
.loading {
text-align: center;
padding: 40px;
}
.loading::after {
content: "...";
animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
0%, 20% { content: "."; }
40% { content: ".."; }
60%, 100% { content: "..."; }
}
JavaScript File
22. [Link]
Location: WebContent/js/[Link]
// Form Validation
[Link]('DOMContentLoaded', function() {
// Validate all forms
const forms = [Link]('form');
[Link](form => {
[Link]('submit', function(e) {
const inputs = [Link]('input[required], textarea[required], se
let isValid = true;
[Link](input => {
if (![Link]()) {
isValid = false;
[Link] = 'red';
} else {
[Link] = '';
}
});
if (!isValid) {
[Link]();
alert('Please fill in all required fields');
}
});
});
// Email validation
const emailInputs = [Link]('input[type="email"]');
[Link](input => {
[Link]('blur', function() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if ([Link] && ) {
[Link] = 'red';
alert('Please enter a valid email address');
} else {
[Link] = '';
}
});
});
// Phone validation
const phoneInputs = [Link]('input[type="tel"]');
[Link](input => {
[Link]('blur', function() {
const phoneRegex = /^[0-9]{10}$/;
const cleanPhone = [Link](/\D/g, '');
if ([Link] && ) {
[Link] = 'red';
alert('Please enter a valid 10-digit phone number');
} else {
[Link] = '';
}
});
});
});
Configuration File
23. [Link]
Location: WebContent/WEB-INF/[Link]
<web-app xmlns:xsi="[Link]
xmlns="[Link]
xsi:schemaLocation="[Link]
[Link]
version="4.0">
<welcome-file-list>
<welcome-file>[Link]</welcome-file>
</welcome-file-list>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<error-page>
<error-code>404</error-code>
<location>/[Link]</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/[Link]</location>
</error-page>
<security-constraint>
<web-resource-collection>
<web-resource-name>Protected Pages</web-resource-name>
<url-pattern>/[Link]</url-pattern>
<url-pattern>/[Link]</url-pattern>
<url-pattern>/[Link]</url-pattern>
</web-resource-collection>
</security-constraint>
</web-app>
Setup Instructions
1. Go to: [Link]
2. Create a new project or select existing
5. Click Finish
Step 6: Copy All Files
Copy each file from this PDF into the correct location in your Eclipse project according to the package
and location paths shown.
[Link]
Test Credentials
Features Implemented
✅ User Registration with validation
✅ User Login with session management
✅ Post Lost Items with location
✅ Post Found Items with location
✅ Google Maps integration
✅ Browse all items
✅ Filter by type (lost/found)
✅ View items on map
✅ Responsive design
✅ Complete CRUD operations
✅ Secure password hashing
Required Libraries
Troubleshooting
Project Complete!
This is a fully functional Lost & Found web application ready to deploy. Simply copy the code from this
PDF into your IDE following the file structure shown.