How to build a Web Application Using Java

Java is one of the most used programming languages for developing dynamic web applications. A web application is computer software that utilizes the web browser and technologies to perform tasks over the internet. A web application is deployed on a web server.

Java provides some technologies like Servlet and JSP that allow us to develop and deploy a web application on a server easily. It also provides some frameworks such as Spring, Spring Boot that simplify the work and provide an efficient way to develop a web application. They reduce the effort of the developer.

We can create a website using static HTML pages and style them using CSS, but we need server-side technology when we want to create a dynamic website.

In this section, we will see how to create a website using Java Servlets and HTML. Further, we will see how these technologies are useful for developing a web application.

5.8M

96

Prime Ministers of India | List of Prime Minister of India (1947-2020)

In this section, we have included:

• What is a Web Application
• Web Server and Client
• HTML and HTTP
• What is URL
• What is Servlet
• Why Servlets are Useful for Developing a Web Application
• First Web Application Using Java Servlet
• Summary

Let's understand the components of a web application:

What is a Web Application

A web application is computer software that can be accessed using any web browser. Usually, the frontend of a web application is created using the scripting languages such as HTML, CSS, and JavaScript, supported by almost all web browsers. In contrast, the backend is created by any of the programming languages such as Java, Python, Php, etc., and databases. Unlike the mobile application, there is no specific tool for developing web applications; we can use any of the supported IDE for developing the web application.

Web Server and Client

The web server is a process that handles the client's request and responds. It processes the request made by the client by using the related protocols. The main function of the webserver is to store the request and respond to them with web pages. It is a medium between client and server. For example, Apache is a leading webserver.

A client is a software that allows users to request and assist them in communicating with the server. The web browsers are the clients in a web application; some leading clients are Google Chrome, Firefox, Safari, Internet Explorer, etc.

HTML and HTTP

The HTML stands for HyperText Markup Language; it is a common language for Web Server and Web Client communication. Since both the web server and web client are two different software components of the web, we need a language that communicates between them.

The HTTP stands for HyperText Transfer Protocol; it is a communication protocol between the client and the server. It runs on top of the TCP/IP protocol.

Some of the integral components of an HTTP Request are as following:

HTTP Method: The HTTP method defines an action to be performed; usually, they are GET, POST, PUT, etc.

URL: URL is a web address that is defined while developing a web application. It is used to access a webpage.

Form Parameters: The form parameter is just like an argument in a Java method. It is passed to provide the details such as user, password details on a login page.

What is URL

URL stands for Universal Resource Locator used to locate the server and resource. It is an address of a web page. Every web page on a project must have a unique name.

A URL looks like as follows:

1. http://localhost:8080/SimpleWebApplication/  

Where,

http or https: It is the starting point of the URL that specifies the protocol to be used for communication.

Localhost: The localhost is the address of the server. When we run our application locally, it is called localhost; if we deployed our project over the web, then it is accessed by using the domain name like "javatpoint.com". The domain name maps the server to IP addresses.

8080: This is the port number for the local server; it is optional and may differ in different machines. If we do not manually type the port number in the URL, then by default, the request goes to the default port of the protocol. Usually, the port no between 0 to 1023 are reserved for some well-known services such as HTTP, HTTPS, FTP, etc.

We have discussed all the major components of a web application. Let's move towards our main motive How to build a web application in Java.

First, understand servlet:

What is Servlet

A Servlet is a Java program that runs within a web server; it receives the requests and responds to them using related protocols (Usually HTTP). The Servlets are capable enough to respond to any type of request; they are commonly used to make the application functional.

We can create a static website using only HTML and CSS, but when it comes to dynamic, we need a server-side programming language. For these applications, Java provides Servlet technology, which contains HTTP-specific servlet classes.

The javax.servlet and javax.servlet.http packages contain interfaces and classes for creating servlets. All servlets should implement the Servlet interface, which defines life-cycle methods. To implement a generic service, we can use the GenericServlet class by extending it. It provides doGet and doPost methods to handle HTTP-specific services.

Why are the Servlets Useful?

Web servers are capable enough to serve static HTML requests, but they don't know how to deal with dynamic requests and databases. So, we need a language for dynamic content; these languages are PHP, Python, Java, Ruby on Rails, etc. In Java, there are two technologies Servlet and JSPs, that deals with dynamic content and database. Java also provides frameworks such as Spring, Spring Boot, Hibernate, and Struts to use the servlet and JSP easily.

The Servlets and JSPs are server-side technologies that extend the functionality of a web server. They support dynamic response and data persistence. We can easily create a web application using these technologies.

Let's create our first web applications:

First Web Application Using Java Servlet

To create a web application, we need the following tools:

Java

IDE ( Eclipse or Netbeans)

Database (Oracle or Mysql)

Server (Tomcat)

Before Creating any web application, ensure that all of the above tools are properly installed on your system.

Now, follow the below steps to develop a web application:

Step1: Open Eclipse Create a Dynamic Web Project

Open the Eclipse IDE, navigate to File-> New-> Dynamic Web Project.

If the dynamic web project is not listed in your IDE, then go to the other option and search for it. Click on it to continue.

Step2: Provide Project Name

Now, enter the project name and click Next to continue.

Follow the prompt and tick the generate web.xml deployment descriptor.

Now, our project is ready; the project structure will look as follows:

Step3: Create a Servlet

Now, create a servlet by right-clicking on the Java Resources/src folder. To create a servlet right click on the src folder and navigate to the New-> Servlet menu. Here, provide the Servlet name:

Click on the Finish button. It will create a TestServlet as specified. You can choose any of your Servlet names.

TestServlet.java:

1. import java.io.IOException;  
2. import javax.servlet.ServletException;  
3. import javax.servlet.annotation.WebServlet;  
4. import javax.servlet.http.HttpServlet;  
5. import javax.servlet.http.HttpServletRequest;  
6. import javax.servlet.http.HttpServletResponse;  
7.   
8. /** 
9.  * Servlet implementation class TestServlet 
10.  */  
11. @WebServlet("/TestServlet")  
12. public class TestServlet extends HttpServlet {  
13.     private static final long serialVersionUID = 1L;  
14.          
15.     /** 
16.      * @see HttpServlet#HttpServlet() 
17.      */  
18.     public TestServlet() {  
19.         super();  
20.         // TODO Auto-generated constructor stub  
21.     }  
22.   
23.     /** 
24.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
25.      */  
26.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
27.         // TODO Auto-generated method stub  
28.         response.getWriter().append("Served at: ").append(request.getContextPath());  
29.     }  
30.   
31.     /** 
32.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
33.      */  
34.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
35.         // TODO Auto-generated method stub  
36.         doGet(request, response);  
37.     }  
38.   
39. }  

Step4: Add the Servlet Jar file

We can see our Servlet is displaying lots of errors it is because we have not added the servlet-api jar file yet. To add the jar file, right-click on the project and select the configuration option by navigating to Build Path-> Configure Build Path option. Now, click on the Add External JARs option.

Navigate to the directory where you have installed your server and select the servlet-api.jar file.

Click Open to continue.

Now select Apply and Close option. It will add the jar file to our project.

Step5: Create a HTML or JSP file

Now, our first web application is almost ready. We can create HTML pages that we want to display on our website.

To create an HTML page, right-click on the WebContent folder and select the New HTML file option from the New-> HTML File menu with the name index.html.

We have created the follwing HTML file:

index.html:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta charset=<em>"UTF-8"</em>>  
5. <title>First Web Application</title>  
6. </head>  
7. <body>  
8. <h1>Welcome</h1>  
9. <ul>  
10.   <li><a href="#">Home</a></li>  
11.   <li><a href="#">News</a></li>  
12.   <li><a href="#">Contact</a></li>  
13.   <li><a href="#">About</a></li>  
14. </ul>  
15. </body>  
16. </html>  

Step6: Map the File

Now, map this file in the web.xml file. The web.xml is a deployment descriptor for the Servlet applications. Since, Servlet 3.0, we can use annotations instead of the deployment descriptor.

To map a servlet, we have to provide the servlet details such as Servlet name and class. Consider the below code:

1. <servlet>  
2.   <servlet-name>MyHttpTestServlet</servlet-name>  
3.   <servlet-class>TestServlet</servlet-class>  
4. </servlet>  
5. <servlet-mapping>  
6.   <servlet-name>MyHttpTestServlet</servlet-name>  
7.   <url-pattern>/welcome</url-pattern>  
8. </servlet-mapping>  

We can also define our welcome file; a welcome file is the first file of the project that initiates the project, also known as Home. We can define multiple welcome files.

Consider the below code:

web.xml:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">  
3.   <display-name>BasicWebApplication</display-name>  
4.   <welcome-file-list>  
5.     <welcome-file>index.html</welcome-file>  
6.     <welcome-file>index.htm</welcome-file>  
7.     <welcome-file>index.jsp</welcome-file>  
8.     <welcome-file>default.html</welcome-file>  
9.     <welcome-file>default.htm</welcome-file>  
10.     <welcome-file>default.jsp</welcome-file>  
11.   </welcome-file-list>  
12.   <servlet>  
13.     <servlet-name>MyHttpTestServlet</servlet-name>  
14.     <servlet-class>TestServlet</servlet-class>  
15.   </servlet>  
16.   <servlet-mapping>  
17.     <servlet-name>MyHttpTestServlet</servlet-name>  
18.     <url-pattern>/welcome</url-pattern>  
19.   </servlet-mapping>  
20. </web-app>  

From the above code, we can see by default the servlet defines several welcome files. If you want to use any file other than the listed files, you can define that here.

Now, our first web application is ready.

Step7: Run the Application

To run the application, right-click on the project and run it on the server by selecting Run-> Run on Server option.

It will take some time to load the application.

We can also test it on other browsers by entering the URL.

Now, we can design this by adding more web pages and styles.

In the above screen, we have updated our index.html file as follows:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta charset="UTF-8">  
5. <title>First Web Application</title>  
6. </head>  
7. <style>  
8. ul {  
9.   list-style-type: none;  
10.   margin: 0;  
11.   padding: 0;  
12. }  
13. body {  
14. background-color: #E6E6FA;  
15. }  
16. </style>  
17. <body>  
18. <h1>Welcome</h1>  
19. <ul class="points">  
20.   <li><a href="#">Home</a></li>  
21.   <li><a href="#">News</a></li>  
22.   <li><a href="#">Contact</a></li>  
23.   <li><a href="#">About</a></li>  
24. </ul>  
25. <img alt="image" src="image.jpg" width="300" height="200">  
26. </body>  
27. </html>  

Add the image file into WebContent folder.

Summary:

In this section, we have discussed how to create a web application using Java Servlets. Java facilitates with other frameworks such as Spring and Spring Boot that helps us to develop web applications easily. These frameworks reduce the effort of the developer.

Check out our Spring and Spring Boot tutorials.

Next TopicIs Java Interpreted or Compiled

← PrevNext →