Simple Java Web Application
Objective
Develop a simple Java web application that connects to a MySQL database, provides user
authentication, and includes a basic dashboard page.
This project will help you understand the fundamentals of:
• Java Servlets
• JDBC (Database connectivity)
• Session management
• HTML, CSS, and JavaScript (frontend)
• Maven project structure and configuration
Project Overview
Project Structure
Create a Maven web application with the following layout:
training-project/
├── [Link]
├── src/
│ └── main/
│ ├── java/
│ │ └── com/example/simplewebapp/
│ │ ├── database/
│ │ │ └── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ └── webapp/
│ ├── WEB-INF/
│ │ └── [Link]
│ ├── [Link]
│ └── [Link]
└── [Link]
1. Database Setup
Database Name: simplewebapp
Table Name: users
Table Structure
Column Type Attributes
id INT AUTO_INCREMENT
email VARCHAR(255) UNIQUE, NOT NULL
password VARCHAR(255) NOT NULL
first_name VARCHAR(100) NOT NULL
last_name VARCHAR(100) NOT NULL
created_at TIMESTAMP
updated_at TIMESTAMP
Test Users
Insert at least three users into the database:
Email Password
admin@[Link] admin123
john@[Link] password123
jane@[Link] password123
Create a file named [Link] containing the SQL statements to create the table and
insert these records.
2. Maven Configuration
Define project dependencies and build configuration in [Link].
3. Database Connection Utility
Create a utility class to handle database connections.
Class: DatabaseConnection
Package: [Link]
Method:
public static Connection getConnection()
Requirements
• Load MySQL driver using [Link]()
• Read environment variables or use defaults.
• Use [Link]() to obtain the connection
• Handle exceptions properly
Use try-with-resources when performing database operations.
4. Login Servlet
Servlet Name: LoginServlet
URL Pattern: /login
Method: POST
Functionality
• Read JSON input: { "email": "...", "password": "..." }
• Validate credentials against the database
• On success:
o Create session ([Link](true))
o Store user info in session: userId, email, firstName, lastName
o Set session timeout to 30 minutes
o Return JSON response:
o {
o "success": true,
o "message": "Login successful",
o "user": { ... }
o }
• On failure:
o Invalid credentials → 401 response
o Missing parameters → 400 response
Use PreparedStatement to avoid SQL injection and Gson for JSON parsing/generation.
5. Index/Dashboard Servlet
Servlet Name: IndexServlet
URL Patterns: /api/index, /api/dashboard
Method: GET
Functionality
• Check if session exists ([Link](false))
• If session is valid:
o Retrieve user data
o Return JSON:
o {
o "authenticated": true,
o "user": { ... },
o "message": "Welcome to the dashboard!"
o }
• If no session:
o Return 401 response:
o {
o "authenticated": false,
o "message": "Please login first"
o }
6. Web Configuration ([Link])
Location: src/main/webapp/WEB-INF/[Link]
Settings
• Session timeout: 30 minutes
• Welcome files: [Link], [Link]
• MIME type mappings:
o .json → application/json
o .css → text/css
o .js → application/javascript
• Display name: Simple Web Application Training
Since servlets use @WebServlet, you don’t need to declare them in [Link].
7. Login Page ([Link])
Create a login form with:
• Email and password inputs
• Submit button
• JavaScript that:
o Prevents default submission
o Sends POST request to /login with JSON body
o Displays success or error messages
o Redirects to [Link] after successful login
Additional Requirements
• Use fetch() API and async/await
• Disable submit button during submission
• Style the form for a clean and professional look
• Include a visible message area for feedback
8. Dashboard Page ([Link])
Behavior
• Fetch user data from /api/index on page load
• If authenticated:
o Display user details (ID, email, name)
o Show welcome message
• If not authenticated:
o Redirect to [Link]
Include a logout button or link and handle redirection properly.
Use loading states while fetching data and show error messages clearly.
9. Testing Checklist
Before submission, confirm:
• Database and users are created
• Project compiles successfully (mvn clean compile)
• [Link] loads correctly at [Link]
• Login works with test credentials
• Redirect to dashboard works
• Dashboard displays user information
• Logout works correctly
• Unauthenticated users are redirected to login
• Proper error messages appear for invalid credentials
Evaluation Criteria
Area Weight Description
Functionality 40% Database connection, login, session, dashboard
Code Quality 30% Proper resource handling, SQL safety, structure
Best Practices 20% HTTP codes, JSON format, security, session handling
UI/UX 10% Design, usability, feedback, responsiveness
Helpful References
• Gson Documentation
• MDN Fetch API Guide
Submission
Provide:
1. Full project folder with all source code
2. [Link]
3. A short explanation (1–2 paragraphs) describing your implementation approach