Hello World! – JSP Tutorial using Eclipse IDE

lg share en Hello World! – JSP Tutorial using Eclipse IDE

**adsense_4x1Block**


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.

Hello JSP Tutorial Create a Dynamic Web Project in Eclipse Hello World! – JSP Tutorial using Eclipse IDE

Dyanamic Web Project Wizard in Eclipse

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.

Hello JSP Tutorial New Dynamic Web Project in Eclipse Hello World! – JSP Tutorial using Eclipse IDE

New Project Properties Wizard

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:

Hello JSP Tutorial Anatomy of New Dynamic Web Project Hello World! – JSP Tutorial using Eclipse IDE

Folder structure for newly created project in package explorer

web.xml
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 tag is already created in web.xml containing multiple entries for suggested landing page name for our application. Although these pages are not created yet.

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:

http://localhost:8080/Hello-JSP/

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.

Hello JSP Tutorial JSP output in Console and HTML Hello World! – JSP Tutorial using Eclipse IDE

Hello World JSP print output

Exercises:

  • 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)

24 thoughts on “Hello World! – JSP Tutorial using Eclipse IDE

  1. Pingback: Hello World! – Servlets Tutorial using Eclipse IDE « Salman's Blog

  2. Pingback: Hello World! – Struts Framework Tutorial « Salman's Blog

  3. cara como fazer que um botão submit ,depois que vc clica nele ele mostre o resultado que vc espera ver,
    vlw é em java usando jsp,
    vlw,só mais uma coisa é no eclipse
    vlw

  4. its really helpful tutorial for novice user those who wants to start working on DWeb project.

    thanks a lot :) salman

    can you please suggest me further any helpfull tutorial which makes so easy to learn as you described here in step by step ?.

  5. hello! i’m new using eclipse and i want to know something, my teacher uses eclipse and when he creates a new c++ project he wants to put the “Hello World C++ project” (included in eclipse) the predeterminated option, because always is “Empty project” predeterminated, if you could help me please, thanks
    i come from south-america and my english is not perfect, i hope you can understand what i’m saying ^^

  6. I like simple and straightforward, this is very nice.
    At our school they have the basic Eclipse Juno (no J2EE) but once I installed the J2EE version of Eclipse Kepler it worked great.
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code
 

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>