About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

First Webpage in Java

Components needed to make a Java Webpage

In this lesson, we are going to make a webpage with Java. In order to make a webpage with Java, we need the below components to be installed on our computer. 

  1. JDK (Java Development Kit) - It consists of everything that a Java developer needs to build a program. It contains JVM (Java Virtual Machine) and JRE (Java Runtime Environment). JVM is the java interpreter that translates the Java code into Bytecode and JRE is the runtime environment for the Java Programs
  2. IDE (Integrated Development Environment) - When we download JDK, we get everything to compile and run our Java programs. IDE provides a GUI development environment, where we can see the Program files, edit the programs, manage servers, and run the applications. Examples of Java IDEs are Eclipse, Netbeans, IntelliJ, etc
  3. Apache Tomcat Server - With JDK and IDE, we have everything to develop and run the Java applications, but we also have to deploy the application right? For that, we need the Apache Tomcat Server. So, Apache Tomcat Server is used to deploy the applications.

I am not going into further details of these components in this article. If you want me to make an article for this, please write to me at [email protected]. Let's see how to set up these components on our computer.

Follow the below steps to create a webpage for the first time. 

Step 1: Set up the Java Development Kit (JDK)

JDK can be downloaded from Java SE (Standard Edition) Download as shown in the below image:

Java Standard Edition Download Page
Java Standard Edition Download Page

Clicking this will open a new page where you can find a list of installers for the different operating systems. Download any of them as per the operating system you are working on.

JDK Installers
JDK Installers

This will download the installer as shown in the below image:

JDK Installer
JDK Installer

Running this will open the JDK installer wizard as shown below:

JDK Installer Wizard
JDK Installer Wizard

Clicking on the next button will take to the next step where you can change the folder where JDK is to be installed as shown in the below image:

Step 2 of the JDK installer wizard
Screen 2 of the JDK installer wizard

Clicking on next will start the installation as once it is done, you can see the below screen which can be closed.

JDK Installation Wizard Completion Screen
JDK Installation Wizard Completion Screen

Step 2: Set up the Integrated Development Environment (IDE)

Well, I use Eclipse IDE to develop the Java Programs, you can use any other IDE like IntelliJ or Netbeans.

You can download the Eclipse installer from www.eclipse.org. This URL will take you to the below page:

Eclipse IDE Download Page
Eclipse IDE Download Page
Eclipse Downloads Mirror Selection Page
Eclipse Downloads Mirror Selection Page

This will download the installer as shown below. Run the installer which in turn opens the installer wizard:

Eclipse Installer
Eclipse Installer

The installer wizard will be like below:

Eclipse Installer Wizard
Eclipse Installer Wizard

As shown in the image, select the second option which is Eclipse IDE for Enterprise Java Developers. This will take you to the second screen as shown below:

Eclipse Installer
Eclipse Installer

Click on the install button and it will start the installation. This is all we need to do to install eclipse on our computer.

Step 3: Let's create a Webpage

Open Eclipse and below screen will be displayed where we have provision to change the workspace path. But use the default workspace as shown below:

Setting Workspace
Setting Workspace

Clicking on Launch will open the eclipse screen as shown below:

Eclipse IDE start screen
Eclipse IDE start screen

Click on create a new Java EE Web Project or navigate to File > New > Dynamic Web Project, it will open the below screen where you can set the Project Name and the server:

New Dynamic Web Project
New Dynamic Web Project

Till now, we have not installed apache tomcat, so Target runtime needs to be set as none for now. After naming the project, click on the finish button, this will create a project as shown below:

Eclipse Project Explorer (If not visible navigate to Window > View > Project Explorer)
Eclipse Project Explorer (If not visible navigate to Window > View > Project Explorer)

Inside the WebContent folder, create a new folder named views and add a JSP page to it as shown below:

Creating New Folder inside WebContent
Creating New Folder inside WebContent

I have named this folder as View. After creating the folder, add a JSP page inside it. JSP pages are the Java Server Pages which can container HTML, CSS, Javascript as well the Java Code

Adding New JSP Page
Adding New JSP Page

Name the JSP page as you wish and clicking on the Next button will give you the option to select the HTML version, by default it will be HTML5. I don't want to change the HTML version, so I will name it and click on the finish button

Naming JSP File
Naming JSP File

The JSP page will look like the below image, I am going to add <h1>Hello World</h1> to the page as shown below:

JSP Page
JSP Page

After making changes to the HTML code, save it. The next step is to view this page on a browser. For that, we need an apache tomcat server.

Step 4: Setting up the server

Download Apache Tomcat from tomcat.apache.org. This URL will open the below page and download Tomcat 9 as eclipse does not allows adding Tomcat 10 as of now.

Apache Tomcat Homepage
Apache Tomcat Homepage

Clicking the Tomcat 9 link will open the below page:

Tomcat 9 Download Page
Tomcat 9 Download Page

Now, extract the downloaded zip file and you can place them wherever you want to.

Now, go to eclipse and navigate to Windows > View > Servers, to see the servers window as shown below:

Creating a new server
Creating a new server

On clicking the create new server link, it will open a window as shown below:

New Server Dialogue Box
New Server Dialogue Box

On clicking Next, it will take to Add and Remove screen, from where add the project which we want to run as shown below:

Adding Projects to the Server
Adding Projects to the Server

After adding the  project, click on the finish button, you can now see the new server in the server window as shown below:

Tomcat 9 Server
Tomcat 9 Server

Step 5: Run the JSP Page

Right-click on the JSP page that we have created and navigate to Run As > Run on Server as shown below:

To run the JSP page on Server
To run the JSP page on Server

This will open a server selection window, select the server that we have created and click on the finish button as shown below:

Server Selection window to run the page
Server Selection window to run the page

Your windows defender may block this from running which will show a popup from where you can allow this to run.

Following these steps will show you the output as shown below:

Output Window
Output Window

Step 6: Set this page as a landing page

If you want to see this page while running the project, add below code in the web.xml file and run the project by following the same steps that we did for the JSP page

web.xml file
web.xml file

If web.xml is not there, then you have to generate it manually. To do this, right-click on the project and navigate to Java EE Tools > Generate Deployment Descriptor Stub, the file will be generated inside WEB-INF.

Changing Port

If you face any problem running the application on the port 8080, we can change it from the servers window as shown below:

Changing the server port to run the application
Changing the server port to run the application

I Hope, you understood how to create a webpage with Java. For any queries, you can write to me at [email protected]. To get notified for the releases, subscribe through email. If you found this article useful, please share it. Thank you 😊.