Java Web Application Tutorial: Servlet & JSP
with NetBeans/Tomcat
Prerequisites
• NetBeans IDE (with Java EE support)
• Apache Tomcat server
• JDK 8 or higher
Step 1: Create a New Web Application Project
1. Open NetBeans IDE
2. Go to File → New Project
3. Select Java with Maven → Web Application (or Java Web → Web Application for older
versions)
4. Click Next
5. Enter project details:
• Project Name: HelloUserApp
• Project Location: Choose your preferred location
6. Click Next
7. Select Apache Tomcat as the server
8. Set Java EE Version to Java EE 7 Web or higher
9. Click Finish
Step 2: Create the HTML Form ([Link])
1. In the Projects panel, expand your project
2. Right-click on Web Pages → New → HTML File
3. Name it [Link]
4. Replace the content with:
<!DOCTYPE html>
<html>
<head>
<title>User Name Form</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 50px auto;
padding: 20px;
background-color: #f0f0f0;
}
.form-container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h2 {
color: #333;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Welcome! Please Enter Your Name</h2>
<form action="HelloServlet" method="POST">
<label for="username">Your Name:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Step 3: Create the Servlet
1. Right-click on Source Packages → New → Servlet
2. Enter servlet details:
• Class Name: HelloServlet
• Package: [Link] (or your preferred package)
3. Click Next
4. Keep the default URL pattern as /HelloServlet
5. Click Finish
6. Replace the servlet code with:
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
/**
* HelloServlet - receives username and forwards to greeting page
* @author naylab
*/
@WebServlet(name = "HelloServlet", urlPatterns = {"/HelloServlet"})
public class HelloServlet extends HttpServlet {
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
// Get the username from the form
String username = [Link]("username");
// Set the username as a request attribute to pass to JSP
[Link]("username", username);
// Forward the request to the JSP page
[Link]("[Link]").forward(request, response);
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on
the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
// Redirect GET requests to the form page
[Link]("[Link]");
}
/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Hello Servlet - receives username and forwards to greeting
page";
}// </editor-fold>
}
Step 4: Create the JSP File
1. Right-click on Web Pages → New → JSP
2. Name it [Link]
3. Click Finish
4. Replace the content with:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Greeting Page</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 50px auto;
padding: 20px;
background-color: #f0f0f0;
}
.greeting-container {
background-color: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
h1 {
color: #4CAF50;
margin-bottom: 20px;
}
.username {
color: #333;
font-size: 24px;
font-weight: bold;
}
a {
display: inline-block;
margin-top: 20px;
color: #4CAF50;
text-decoration: none;
padding: 10px 20px;
border: 2px solid #4CAF50;
border-radius: 4px;
transition: all 0.3s;
}
a:hover {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="greeting-container">
<%
// Get username from request attribute (set by servlet)
String username = (String) [Link]("username");
// Fallback to parameter if attribute is null
if (username == null) {
username = [Link]("username");
}
// Default value if still null
if (username == null || [Link]().isEmpty()) {
username = "Guest";
}
%>
<h1>Hello, <span class="username"><%= username %></span>!</h1>
<p>Welcome to our Java Web Application</p>
<a href="[Link]">Go Back</a>
</div>
</body>
</html>
Step 5: Configure [Link] (Optional)
If you're not using annotations, create/edit WEB-INF/[Link]:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="[Link]
xmlns:xsi="[Link]
xsi:schemaLocation="[Link]
[Link]
<servlet>
<servlet-name>HelloServlet</servlet-name>
<servlet-class>[Link]</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet</servlet-name>
<url-pattern>/HelloServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>[Link]</welcome-file>
</welcome-file-list>
</web-app>
Step 6: Deploy and Run
1. Start tomcat
2. Right-click on your project in the Projects panel
3. Select Clean and Build
4. Right-click again and select Run
5. NetBeans will deploy the application to Tomcat and open it in your browser
6. The default URL will be: [Link]
Step 7: Test the Application
1. Enter your name in the form
2. Click Submit
3. You should see a greeting page with "Hello, [your name]!"
Project Structure
HelloUserApp/
├── Source Packages/
│ └── [Link]/
│ └── [Link]
├── Web Pages/
│ ├── WEB-INF/
│ │ └── [Link]
│ ├── [Link]
│ └── [Link]
└── Libraries/
How It Works
1. [Link]: Displays a form where users enter their name
2. Form submission: When submitted, the form sends a POST request to /HelloServlet
3. HelloServlet: Receives the username parameter and forwards it to the JSP
4. [Link]: Displays the personalized greeting using the username
Troubleshooting
• 404 Error: Check that Tomcat is running and the URL mapping is correct
• Servlet not found: Verify the @WebServlet annotation or [Link] configuration
• Blank name: Ensure the form input name matches the parameter name in the servlet
• Server issues: Check Tomcat logs in NetBeans Output window
Next Steps
• Add input validation
• Use sessions to remember the user
• Connect to a database to store user information
• Add CSS frameworks like Bootstrap for better styling
• Implement error handling and custom error pages