DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
Experiment 8
Student Name: GAYTRI UID: 22BET10198
Branch: BE-IT Section/Group: BET_IoT-701/B
Semester: 6th Date of Performance: 02-04-25
Subject Name:Project based learning in Java with Lab Subject Code: 22ITH-359
1. Aim: Develop web applications using Servlets and JSP for user input handling, database
integration.
2. Problem 1: Write a servlet to accept user credentials through an HTML form and display a
personalized welcome message if the login is successful.
1. Objectives:
1. To implement a servlet that handles HTTP POST requests to process user login data
securely.
2. To design an HTML form for accepting user credentials (username and password) from
the user.
3. To validate login credentials on the server-side using basic logic (or a database in
advanced scenarios).
4. To display a personalized welcome message on successful login, enhancing user
experience.
2. Code:
1. File - [Link]
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body style="font-family: Arial, sans-serif; background: linear-gradient(135deg, #74ebd5,
#9face6); display: flex; justify-content: center; align-items: center; height: 100vh; margin:
0;">
<div style="background-color: white; padding: 40px; border-radius: 15px; box-shadow: 0
8px 16px rgba(0,0,0,0.2); width: 300px;">
<h2 style="text-align: center; color: #333;">Login</h2>
<form method="post" action="login">
<label style="color: #555;">Username:</label><br>
<input type="text" name="username" required style="width: 100%; padding: 10px;
margin: 8px 0 16px 0; border: 1px solid #ccc; border-radius: 5px;"><br>
<label style="color: #555;">Password:</label><br>
<input type="password" name="password" required style="width: 100%; padding:
10px; margin: 8px 0 20px 0; border: 1px solid #ccc; border-radius: 5px;"><br>
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
<input type="submit" value="Login" style="width: 100%; padding: 10px;
background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px;
cursor: pointer;">
</form>
</div>
</body>
</html>
2. File – [Link]
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
@WebServlet("/login") // Maps the servlet to /login
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = [Link]("username");
String password = [Link]("password");
[Link]("text/html");
PrintWriter out = [Link]();
if ("Gaytri".equals(username) && "6789".equals(password)) {
// Styled welcome page
[Link]("<html><body style='margin:0; padding:0; font-family: Arial, sans-
serif; background: linear-gradient(to right, #74ebd5, #ACB6E5); height: 100vh; display:
flex; justify-content: center; align-items: center;'>");
[Link]("<div style='background-color: white; padding: 40px; border-radius:
15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); text-align: center;'>");
[Link]("<h2 style='color: #333;'>Welcome, " + username + "!</h2>");
[Link]("<p style='color: #555;'>You have successfully logged in.</p>");
[Link]("<a href='[Link]' style='display: inline-block; margin-top: 20px;
text-decoration: none; background: #007BFF; color: white; padding: 10px 20px; border-
radius: 5px;'>Go to Home</a>");
[Link]("</div>");
[Link]("</body></html>");
} else {
// Styled failure page
[Link]("<html><body style='margin:0; padding:0; font-family: Arial, sans-
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
serif; background: linear-gradient(to right, #ff758c, #ff7eb3); height: 100vh; display:
flex; justify-content: center; align-items: center;'>");
[Link]("<div style='background-color: white; padding: 40px; border-radius:
15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); text-align: center;'>");
[Link]("<h2 style='color: #c0392b;'>Login Failed</h2>");
[Link]("<p style='color: #555;'>Invalid credentials. Please try again.</p>");
[Link]("<a href='[Link]' style='display: inline-block; margin-top: 20px;
text-decoration: none; background: #e74c3c; color: white; padding: 10px 20px; border-
radius: 5px;'>Try Again</a>");
[Link]("</div>");
[Link]("</body></html>");
}
}
}
3. Output:
Fig:1 Login Page
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
Fig:2 Dashboard
4. Learning Outcomes:
1. Understand Servlet Lifecycle:
Learned how Java Servlets are initialized, handle requests (doPost/doGet), and generate
dynamic responses.
2. Form Handling in Web Applications:
Gained practical experience in creating HTML forms and sending data to a server using
the POST method.
3. User Authentication Logic:
Understood how to validate user credentials on the server-side and respond appropriately
based on success or failure.
4. Dynamic Response Generation:
Learned to create and return personalized HTML content from the servlet using Print
Writer.
3. Problem 2: Create a servlet integrated with JDBC to display a list of employees from a
database. Include a search form to fetch employee details by ID.
1. Objectives:
1. To design a Java Servlet that interacts with a MySQL database using JDBC.
2. To implement a search functionality that allows fetching employee details based on a given
Employee ID.
3. To retrieve and display a complete list of employee records from the database using SQL
queries.
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
4. To use HTML forms for taking input (Employee ID) and submitting data to the servlet.
2. Code:
File – [Link]
<!-- src/main/webapp/[Link] -->
<!DOCTYPE html>
<html>
<head>
<title>Employee Search</title>
</head>
<body style="font-family: Arial, sans-serif; background: linear-gradient(135deg, #f6d365,
#fda085); display: flex; justify-content: center; align-items: center; height: 100vh; margin:
0;">
<div style="background-color: white; padding: 40px; border-radius: 15px; box-shadow: 0
8px 16px rgba(0,0,0,0.2); width: 350px; text-align: center;">
<h2 style="color: #333;">Search Employee by ID</h2>
<form action="employees" method="get" style="margin-top: 20px;">
<input type="text" name="id" placeholder="Enter Employee ID" required
style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid
#ccc; border-radius: 5px; font-size: 14px;">
<input type="submit" value="Search"
style="width: 100%; padding: 10px; background-color: #007BFF; color: white;
border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">
</form>
<br>
<a href="employees" style="color: #007BFF; text-decoration: none; font-weight:
bold;">View All Employees</a>
</div>
</body>
</html>
File – [Link]
import [Link].*;
import [Link].*;
import [Link].*;
import [Link];
import [Link].*;
@WebServlet("/employees")
public class EmployeeServlet extends HttpServlet {
private static final String JDBC_URL = "jdbc:mysql://localhost:3306/employee";
private static final String DB_USER = "root";
private static final String DB_PASS = "@Gaytri06";
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String empId = [Link]("id");
[Link]("text/html");
PrintWriter out = [Link]();
try {
[Link]("[Link]");
try (Connection conn = [Link](JDBC_URL, DB_USER,
DB_PASS)) {
[Link]("<!DOCTYPE html>");
[Link]("<html>");
[Link]("<head><title>Employee Info</title></head>");
[Link]("<body style='font-family: Arial, sans-serif; background: linear-
gradient(135deg, #f6d365, #fda085); display: flex; justify-content: center; align-items:
center; height: 100vh; margin: 0;'>");
[Link]("<div style='background-color: white; padding: 40px; border-radius:
15px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); width: 500px;'>");
if (empId != null && ![Link]().isEmpty()) {
// Search by ID
PreparedStatement stmt = [Link]("SELECT * FROM
employees WHERE id = ?");
[Link](1, [Link](empId));
ResultSet rs = [Link]();
[Link]("<h2 style='color: #333; text-align: center;'>Employee
Details</h2>");
if ([Link]()) {
[Link]("<p style='font-size: 16px; color: #555;'><strong>ID:</strong> " +
[Link]("id") + "</p>");
[Link]("<p style='font-size: 16px; color: #555;'><strong>Name:</strong>
" + [Link]("name") + "</p>");
[Link]("<p style='font-size: 16px; color:
#555;'><strong>Department:</strong> " + [Link]("department") + "</p>");
[Link]("<p style='font-size: 16px; color: #555;'><strong>Salary:</strong>
" + [Link]("salary") + "</p>");
} else {
[Link]("<p style='color: red; font-weight: bold;'>No employee found with
ID " + empId + "</p>");
}
} else {
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
// List all employees
Statement stmt = [Link]();
ResultSet rs = [Link]("SELECT * FROM employees");
[Link]("<h2 style='color: #333; text-align: center;'>All Employees</h2>");
[Link]("<table style='width: 100%; border-collapse: collapse; margin-top:
20px;'>");
[Link]("<tr style='background-color: #007BFF; color: white;'>");
[Link]("<th style='padding: 10px; border: 1px solid #ddd;'>ID</th>");
[Link]("<th style='padding: 10px; border: 1px solid #ddd;'>Name</th>");
[Link]("<th style='padding: 10px; border: 1px solid
#ddd;'>Department</th>");
[Link]("<th style='padding: 10px; border: 1px solid #ddd;'>Salary</th>");
[Link]("</tr>");
while ([Link]()) {
[Link]("<tr style='background-color: #f9f9f9;'>");
[Link]("<td style='padding: 10px; border: 1px solid #ddd;'>" +
[Link]("id") + "</td>");
[Link]("<td style='padding: 10px; border: 1px solid #ddd;'>" +
[Link]("name") + "</td>");
[Link]("<td style='padding: 10px; border: 1px solid #ddd;'>" +
[Link]("department") + "</td>");
[Link]("<td style='padding: 10px; border: 1px solid #ddd;'>" +
[Link]("salary") + "</td>");
[Link]("</tr>");
}
[Link]("</table>");
}
// Back button
[Link]("<div style='text-align: center; margin-top: 30px;'>");
[Link]("<a href='[Link]' style='text-decoration: none; background-color:
#007BFF; color: white; padding: 10px 20px; border-radius: 5px;'>Back to Search</a>");
[Link]("</div>");
[Link]("</div>"); // End card div
[Link]("</body>");
[Link]("</html>");
} catch (Exception e) {
[Link](out);
}
}
}
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
3. Output:
Fig:3 Search Dashboard
Fig:4 Search Employee Detail
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
Fig:5 Employee Details
4. Learning Outcomes:
1. Understand the integration of Servlets with JDBC for database connectivity and data
retrieval in Java-based web applications.
2. Gain hands-on experience in handling HTTP GET requests using the doGet() method in
servlets.
3. Learn to fetch data from a MySQL database using SQL queries and display it
dynamically on a web page.
4. Develop the ability to implement search functionality based on user input (e.g., Employee
ID) using prepared statements.
5. Problem 3: Develop a JSP-based student portal. Include a form for entering attendance details
and save them to the database using a servlet.
1. Objectives:
1. To design a user-friendly JSP interface for entering student attendance details such as
student ID, date, and status.
2. To establish a connection between JSP, Servlets, and a relational database (e.g.,
MySQL) using JDBC for seamless data storage.
3. To capture attendance data through a structured HTML form and forward it to a
backend servlet for processing.
4. To develop a Java Servlet that handles POST requests and inserts the received
attendance data into the database.
2. Code:
File – [Link]
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Student Attendance Form</title>
</head>
<body style="margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
sans-serif; background: linear-gradient(135deg, #74ebd5, #ACB6E5); height: 100vh;
display: flex; justify-content: center; align-items: center;">
<div style="background-color: #ffffff; padding: 40px; border-radius: 15px; box-shadow:
0 10px 25px rgba(0,0,0,0.2); width: 350px;">
<h2 style="text-align: center; color: #333; margin-bottom: 25px;">Student
Attendance</h2>
<form action="attendance" method="post">
<label style="font-weight: bold; color: #444;">Student ID:</label><br>
<input type="text" name="studentId" required
style="width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 20px;
border: 1px solid #ccc; border-radius: 6px; font-size: 14px;"><br>
<label style="font-weight: bold; color: #444;">Date:</label><br>
<input type="date" name="date" required
style="width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 20px;
border: 1px solid #ccc; border-radius: 6px; font-size: 14px;"><br>
<label style="font-weight: bold; color: #444;">Status:</label><br>
<select name="status" required
style="width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 25px;
border: 1px solid #ccc; border-radius: 6px; font-size: 14px;">
<option value="Present">Present</option>
<option value="Absent">Absent</option>
</select><br>
<input type="submit" value="Submit Attendance"
style="width: 100%; padding: 12px; background-color: #007BFF; color:
white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer;">
</form>
</div>
</body>
</html>
File – [Link]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
<head>
<title>Success</title>
</head>
<body style="margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
sans-serif; background: linear-gradient(135deg, #d4fc79, #96e6a1); height: 100vh;
display: flex; justify-content: center; align-items: center;">
<div style="background-color: #ffffff; padding: 40px; border-radius: 15px; box-shadow:
0 10px 25px rgba(0,0,0,0.2); width: 400px; text-align: center;">
<h2 style="color: #2d572c; margin-bottom: 2 0 p x ; " > ⬛
Attendance Recorded
Successfully!</h2>
<a href="[Link]"
style="display: inline-block; padding: 12px 25px; background-color: #28a745;
color: white; text-decoration: none; border-radius: 6px; font-size: 16px; font-weight:
bold; transition: background-color 0.3s;">
+ Enter More Attendance
</a>
</div>
</body>
</html>
File – [Link]
import [Link];
import [Link].*;
import [Link];
import [Link];
import [Link].*;
@WebServlet("/attendance") // ⬛ correct spelling public
class AttendanceServlet extends HttpServlet {
private static final String JDBC_URL = "jdbc:mysql://localhost:3306/student_portal";
private static final String DB_USER = "root";
private static final String DB_PASS = "@Gaytri06";
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String studentId = [Link]("studentId");
String date = [Link]("date");
String status = [Link]("status");
try {
[Link]("[Link]");
try (Connection conn = [Link](JDBC_URL, DB_USER,
DB_PASS)) {
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
PreparedStatement stmt = [Link](
"INSERT INTO attendance (student_id, date, status) VALUES (?, ?, ?)");
[Link](1, studentId);
[Link](2, date);
[Link](3, status);
[Link]();
[Link]("[Link]");
}
} catch (Exception e) {
throw new ServletException("DB Error", e);
}
}
}
3. Output:
Fig:7 Attendance Portal
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
Fig:7 Record Message
4. Learning Outcomes:
1. Understand the architecture and flow of JSP-Servlet-based web applications.
2. Gain knowledge of how to integrate JSP and Servlets with JDBC for real-world
database operations.
3. Learn to create and design responsive HTML forms within JSP pages for data input.
4. Develop the ability to connect to a MySQL (or any relational) database using JDBC
and execute SQL queries from a servlet.
