Introduction to Web Development

Creating First Web Application with Java

Jan, 2025
Table of Contents
Contribute
4 min read
@usefulcodes
🥇

Setting Up a New Project in Your IDE
Understanding Web Application Structure
Creating a Simple User Interface
Implementing Basic Business Logic
Configuring Web.xml and Annotations
Running Your Application Locally
Summary

Welcome to this article on Creating Your First Web Application with Java! If you're looking to enhance your web development skills, you're in the right place. This article will guide you through the essential steps to build a simple web application using Java, providing both technical insights and practical examples. Let’s dive in!

Setting Up a New Project in Your IDE

To kick off your journey in web application development with Java, you need to set up your Integrated Development Environment (IDE). Popular choices include Eclipse, IntelliJ IDEA, and NetBeans. For this tutorial, we will use Eclipse due to its widespread use and robust features.

Download and Install Eclipse: Visit the Eclipse website and download the IDE for Java EE Developers.
Install Apache Tomcat: A common web server for Java applications, Apache Tomcat can be downloaded from the Apache Tomcat website. Make sure to choose the appropriate version that matches your Java version.
Create a New Dynamic Web Project:
Open Eclipse and navigate to File > New > Dynamic Web Project.
Name your project (e.g., MyFirstWebApp), select the target runtime (Apache Tomcat), and then click Finish.

This setup will create the necessary directory structure for your web application, including folders for Java classes, web resources, and configuration files.

Understanding Web Application Structure

Before you start coding, it’s crucial to understand the structure of a Java web application. The typical directory layout includes:

src/main/java: Contains your Java source files.
src/main/webapp: Holds your web resources (HTML, JSP, CSS, JavaScript).
WEB-INF: A protected directory that contains configuration files and libraries. web.xml: The deployment descriptor that defines servlets, filters, and other components.lib: A folder for external libraries your application depends on.
web.xml: The deployment descriptor that defines servlets, filters, and other components.
lib: A folder for external libraries your application depends on.

This structure adheres to the Maven project layout, which is a best practice in modern Java web development.

Creating a Simple User Interface

Now that your project is set up, let’s create a simple user interface. For this example, we’ll use an HTML form that allows users to input their name.

Navigate to src/main/webapp and create a new file named index.html.
Add the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web App</title>
</head>
<body>
    <h1>Welcome to My First Web Application!</h1>
    <form action="greet" method="post">
        <label for="name">Enter your name:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

This form will collect the user's name and submit it to a servlet named greet.

Implementing Basic Business Logic

To process the form submission, you’ll need to implement the business logic in a servlet. Follow these steps to create a servlet:

Right-click on src/main/java, select New > Class, and name it GreetServlet.
Extend the class from HttpServlet and override the doPost method:

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class GreetServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        String name = request.getParameter("name");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<h2>Hello, " + name + "!</h2>");
    }
}

In this code, we retrieve the name parameter from the request and generate a simple greeting message. The PrintWriter is used to send the response back to the client.

Configuring Web.xml and Annotations

Once you have created your servlet, you need to configure it, so the web application knows how to route requests. This can be done using the web.xml file or by using annotations.

Using web.xml

Open the web.xml file located in WEB-INF and add the following servlet configuration:

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <servlet>
        <servlet-name>GreetServlet</servlet-name>
        <servlet-class>GreetServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>GreetServlet</servlet-name>
        <url-pattern>/greet</url-pattern>
    </servlet-mapping>
</web-app>

Using Annotations

Alternatively, you can simplify this by using annotations directly in your servlet code:

import javax.servlet.annotation.WebServlet;

@WebServlet("/greet")
public class GreetServlet extends HttpServlet {
    // existing code
}

Using annotations can make your code cleaner and reduce the need for extensive XML configurations.

Running Your Application Locally

With the application set up, it’s time to run it locally and see your work in action.

Right-click on your project in Eclipse.
Choose Run As > Run on Server.
Select your Apache Tomcat server and click Finish.

Once the server starts, open your web browser and navigate to http://localhost:8080/MyFirstWebApp/index.html. You should see your form. Enter your name and hit submit. The application will greet you with a personalized message!

Summary

In this article, we explored the fundamental steps to set up and create your first web application using Java. We covered setting up your IDE, understanding the application structure, building a simple user interface, implementing business logic, and configuring servlets. By following these steps, you have laid the groundwork for more complex web applications.

As you advance, consider diving deeper into frameworks like Spring or JavaServer Faces (JSF), which offer powerful tools for building robust web applications.

Last Update: 09 Jan, 2025

Web Frameworks

Working with Databases Web Applications