This tutorial summarizes steps involved in creating simple Java Dynamic Web Project using Eclipse IDE and adding your very first JSP page in it.
We will also configure Tomcat Web Application Server with Eclipse and deploy our one page jsp web application on tomcat, from within Eclipse.
Step 1: Required Installations
Just to make sure for new Java enthusiasts (target audience for this tutorial), all required components are installed for creating first JSP Web Application.
JRE: Can’t be more simple yet comprehensive than this guide here
Tomcat: Use this guide here for latest Tomcat Installation
Ecplise: Use following tutorial for installing Eclipse. Use section specific to your environment.
Step 2: Configuring Eclipse for JRE and Tomcat Server
Being independent installations, we’ll need to configure our Eclipse IDE so that it will know where is our Java Runtime Environment located and which Web Server to be used for running our jsp web application.
Configuring JRE in Eclispe: In Eclipse IDE, go to Window > Preferences > Java > Installed JREs. In Installed JRE’s section press Add provide JRE home directory and some name for this JRE. (JRE home is usually C:\Program Files\Java\jre6 .. for windows)
Configuring Tomcat in Eclipse: In same Preferences Dialogue open Window > Preferences > Server > Runtime Environments. Press Add button for launching Add Server Wizard. Walk through the wizard selecting appropriate Tomcat Server version you have downloaded above, and setting the correct Tomcat installation directory. Above installed JRE will be set as Workbench default JRE.
Step 3: Creating Blank Java Dynamic Web Project
We’ll create a blank java web project using Eclipse so that we can add our first JSP page in it and deploy it on configured Tomcat Web Server.
In Eclipse select, File > New > Other, type ‘Dynamic’ in Wizards search field. Results will be filtered to list ‘Dynamic Web Project’ wizard. Select this wizard and press Next.
Pressing next will launch extensive ‘Dynamic Web Project’ wizard. Enter Project Name and location to create this Project. ‘Hello-JPS’ in our case. Complete this wizard with default settings on steps and press Finish.
With default settings, and ‘Java’ perspective set in Eclipse (Window > Open Perspective > Other > Java), anatomy of newly created blank Web Project will look like this in ‘Package Explorer’ panel:
Within WEB-INF folder, a deployment descriptor xml file is created by Eclipse. This descriptor file is used by Tomcat server, when application is deployed on it, to identify different components of this application and how to use them.
By default a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>Hello-JSP</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app>
So if we create a new page with one of these names, and just deploy our web project on tomcat, it will automatically know which page to use as first landing page.
Step 4: Creating Hello World JSP Page
So let’s just create our first JSP page (File > New > Other) this time enter ‘JSP’ and select ‘JSP File’ wizard. On ‘Create a new JSP File Wizard’ enter file name ‘index.jsp’ and select ‘Hello-JSP’ project. On next wizard page ‘Use JSP Template’ and select ‘New JSP File (html) template. Preview of the code for generating JSP page is displayed as well.
Once finished, a new index.jsp page will be created in WebContent folder. If not created in WebContent folder, move it inside.
Open index.jsp page and enter following line of JSP code between HTML body tags.
1 2 3 4 5 6 7 8
<%-- This is a JSP Comment before JSP Scriplet --%> <% //Prints out to console System.out.println("Hello World in Console!"); //Prints out to HTML page out.println("Hello World!"); %>
This simple code contains a JSP Comment, and a JSP Scriptlet (a piece of java code embedded within html code using JSP technology). This Scriptlet will print Hello World! message in two output streams. One is to Console and other one is to Response output stream when server is executing this java code in Response to a client Request.
Detailed JavaServer Pages Technology specifications can be found on Oracle website that will explain in depth how JSP pages are rendered on Server side and how they generate Dynamic Content inside an otherwise static HTML page.
Step 5: Deploying JSP Web Application on Tomcat using Eclipse
Time to deploy and run our Web Application Project in browser. Right click on ‘Hello-JSP’ project name in ‘Package Explorer’ panel within Eclipse.
From Project context menu select Run As > Run on Server. This will launch ‘Run on Server’ wizard. Our configured Tomcat server appears in the list, select it and press Finish.
Tip: You can check ‘Always use this server when running this project’ to bypass this step in subsequent project runs.
Clicking on Finish will start tomcat server, and runs our application on it. Eclipse will automatically launch this application in internal browser at URL:
Hint: Or you can copy paste this link any of your installed browsers and they will display the Hello World message. (In this case you won’t be able to see the Console output)
Hitting this URL displayed two Hello World messages, one in Console and other one inside rendered JSP page, just as expected.
- Right click in browser window, within Eclipse, and select View Source. What difference did you see between code we entered in jsp page, and resulting Source view.
- Change print string to something else, e.g. include your name, save the page and simply refresh Eclipse browser tab. What’s the effect?
- Add another jsp page in your web project and link two pages with each other using standard HTML Anchor tag. Both pages should have different print strings. (Hint: Create this page in a new folder named jsp under WebContent folder, and link it using /jsp/yournewpage.jsp)