Eclipse & Tomcat - Create a Webapp - Hello World Tutorial

Directory Structure under: C:\xampp\tomcat\bin\webapps\mytomcat-eclipse-helloworld-scratch List of Directories: \WEB-INF \WEB-INF\lib \WEB-INF\src \WEB-INF\src\java \WEB-INF\src\myeclipse \WEB-INF\classes \pages List of files: \index.jsp \pages \pages\myhelloworld_bean.jsp \pages\myhelloworld_jstl.jsp \WEB-INF\web.xml \WEB-INF\lib\jstl.jar - copy this file. \WEB-INF\lib\standard.jar - copy this file. \WEB-INF\src\myeclipse\MyHelloWorldBean.java \WEB-INF\src\myeclipse\MyHelloWorldServlet.java

1 Download and Install Eclipse
Eclipse IDE for Java Developers

2 Download and Install XAMPP to its default location

XAMPP comes really handy with

Apache 2.2.21

MySQL 5.5.16

PHP 5.3.8

phpMyAdmin 3.4.5

FileZilla FTP Server 0.9.39

Tomcat 7.0.21 (with mod_proxy_ajp as connector)

3 Download Eclipse Tomcat Launcher plugin

At the time of this article tomcatPluginV33.zip

Extract the archive tomcatPluginV33.zip under C:\eclipse\plugins this should create a sub folder com.sysdeo.eclipse.tomcat_3.3.0

4 Set JAVA_HOME to C:\Program Files\Java

5 Set JRE_HOME to C:\Program Files\Java\jre6

6 Let's get started

To give you the big picture, in the steps below, you will use Eclipse to
create the following directory structure and files.

This examples Tomcat "webapps" directory is located at:

C:\xampp\tomcat\bin\webapps

 

7 Eclipse - Create a Java Project

8 Launch Eclipse

9 Tomcat Plugin

The Sysdeo Tomcat Plugin is our best friend. After you have installed it, you will notice these buttons and menues in your IDE.

The left button starts Tomcat, the middle button stops it, the right button restarts Tomcat. Right now, they won't work if you press them. To enable them, you first need to configure a few things. Go to the menu "Window-> Preferences" there, you will see this dialogue box.

Configure Tomcat Plugin

Windows-->Preferences-->Tomcat

Now you need to go to the menu item "Tomcat" and select your Tomcat version. At the time of writing that would be the 7.x version. Now we adjust the field "Tomcat Home" to point to the install directory that we selected before at install time. The Sysdeo plugin now knows where to look for the server.xml file and automatically assumes the standard path to look for the file. Eclipse is now able to manage this configuration file, i.e. add a new <context> for a new application

Browse for tomcat home and select tomcat version

Click on JVM settings and add JVM Parameters

-Xmx2000M

-Xms1000M

-XX:MaxPermSize=128m

Now we are ready to test start our Tomcat server. Click on the start button in the Tomcat menu and watch the console output. If Tomcat boots up without any stacktraces open your browser, and try to open the following address http://localhost:8080/ . If you see an image

that is similar, to the one below everything is working okay

• 10 File, New, Project, Java Project, Next


• 11 Project Name: mytomcat-eclipse-helloworld-scratch


• 12 UnCheck - Use default location.


• 13 Click "Browse" and navigate to the Tomcat webapps"
  directory (ex: C:\xampp\tomcat\bin\webapps\webapps).


• 14 This is a little tricky so follow closely.  We want to create a
  new directory.
  
  
  
  • Note:  The "webapps" directory should be selected.
  
  
  • Click "Make New Folder"
  
  
  • In the browse window list, you should be able replace the words "New
    Folder" with: mytomcat-eclipse-helloworld-scratch
    
    Note:  If you can't, in the browse window scroll to the "New
    Folder" and right click, choose "Rename" and change the folder name to
    mytomcat-eclipse-helloworld-scratch
  
  
  • Click "OK".
  
  
  • Check the value of "Location:" to make sure you have selected the
    correct folder.
    
    Location should now show: C:\Tomcat\Tomcat6.0\webapps\mytomcat-eclipse-helloworld-scratch
  
  
  • Click "Next" to go to the "Java Settings" screen.
  
  
  
  


• 15 Source Folder
  
  
  
  • Click "Create new source folder".
    
    Folder name: WEB-INF/src
    
    Click "Finish"
  
  
  • Right click on "src" and choose "Remove from Build Path". 
    Later you will delete the folder.
    
    (Note: We just created the src file in a directory that web users
    can't directly get to: WEB-INF/src)
  
  
  
  


• 16 Output Folder
  
  
  
  • Change the "Default output folder" to: mytomcat-eclipse-helloworld-scratch/WEB-INF/classes
    
    (Note: Currently the default will be:
    mytomcat-eclipse-helloworld-scratch/bin)
  
  
  
  


• 17 Click "Finish"


• 18 In the "Package Explorer" right click on "src" and choose delete.

19 Eclipse - Build Path - add the Tomcat lib jars files.

• Right click on the project.


• Click "Build Path", "Configure Build Path", then
  click the tab "Libraries"


• Check to see if "JRE System Library"
  is listed.  If not complete the next steps in this bullet.
  
  Click "Add Library", "JRE System Library",
  "Next", "Finish".
  
  Note: Under the tab "Order and Export" this lib file should be directly
  under the WEB-INF/src directory.
  
  You can't compile .java files without this library!!!


• Click "Add External JARs"


• Browse to the Tomcat common library directory.
  
  Ex: C:\xampp\tomcat\lib


• Select all of the JAR files (Ctrl-A), then click "Open".


• Click "OK" to leave the "Java Build Path" screen.

20 Create the "WEB-INF\lib" Folder

• Right click on "WEB-INF", "New", "Folder". 


• Folder name: lib


• Click "Finish"


• Library files - for this project we will be using 2 .jar files:
  standard.jar & jstl.jar. 
  
  These 2 jar files need to reside in: webapps\mytomcat-eclipse-helloworld\WEB-INF\lib
  
  
  
  • 
    mytomcat-eclipse-helloworld-scratch-lib.zip - download and extract this
    zip file into the new "lib" directory you just created.
    
    Note:  If you downloaded the files in this tutorial you will have this
    file in the directory:
    
    Pathname: tomcat\tutorial_tomcat_eclipse\webapps\mytomcat-eclipse-helloworld-scratch-lib.zip
    
    (Note: These lib files came from the Apache JSTL project called
    "standard".)
  
  
  • If you don't place the files properly in the lib directory you will get
    compile errors etc...
  
  
  
  

21 Create the "WEB-INF\src\myeclipse" Package

• Right click on "WEB-INF/src" (not
  "WEB-INF"), "New", "Package". 
  Folder name: myeclipse


• Click "Finish"

22 Create the "pages" Folder

• Right click on "mytomcat-eclipse-helloworld-scratch",
  "New", "Folder".  Folder name: pages


• Click "Finish"

23 Create the "WEB-INF\web.xml" file.

• Right click on "WEB-INF" (not "WEB-INF/src"), "New", "File". 
  File name: web.xml


• web.xml -
  copy this content into the file.  Right click on the filename, open
  with, Text Editor.  If you open with the XML editor you can't copy and
  paste.  After you copy-n-paste, then open with "XML Editor".


• Notice the 2 tags: <servlet> & <servlet-mapping>.  This is planning
  for the .java servlet file we will create.

24 Create the "index.jsp" file

• Right click on "mytomcat-eclipse-helloworld-scratch", "New", "File". 
  File name: index.jsp


• index.jsp -
  copy this content into the file. (Warning:
  If the server & browser doesn't show this file as a Text file then do a
  view source so you can copy-n-paste.)


• Note:
  
  
  • This JSP has just HTML tags.

25 Create the "MyHelloWorldBean.java" Java source file.

• Right click on "myeclipse"
  under the directory "WEB-INF/src", "New", "Class". 
  
  
  Name: MyHelloWorldBean
  
  Click "Finish"
  


• 
  MyHelloWorldBean.java -
  copy this content into the file. (Warning:
  If the server & browser doesn't show this file as a Text file then do a view
  source so you can copy-n-paste.)

26 Create the "MyHelloWorldServlet.java" Java source file.

• Right click on "myeclipse"
  under the directory "WEB-INF/src", "New", "Class". 
  
  
  Name: MyHelloWorldServlet
  
  Click "Finish"


• 
  MyHelloWorldServlet.java -
  copy this content into the file. (Warning:
  If the server & browser doesn't show this file as a Text file then do a view
  source so you can copy-n-paste.)

27 Create the "myhelloworld_jstl.jsp" JSP file.

• Right click on "pages", "New", "File". 
  
  
  File Name: myhelloworld_jstl.jsp
  
  Click "Finish"


• 
  myhelloworld_jstl.jsp -
  copy this content into the file. (Warning:
  If the server & browser doesn't show this file as a Text file then do a view
  source so you can copy-n-paste.)

28 Create the "myhelloworld_bean.jsp" JSP file.

• Right click on "pages", "New", "File". 
  
  
  File Name: myhelloworld_bean.jsp
  
  Click "Finish"


• 
  myhelloworld_bean.jsp -
  copy this content into the file. (Warning:
  If the server & browser doesn't show this file as a Text file then do a view
  source so you can copy-n-paste.)

29 Reload the webapp or Stop Tomcat.

30Test your Web App

• 31 Start Tomcat and/or Reload this WebApp


• 32 Go to:
  http://localhost:8080/mytomcat-eclipse-helloworld-scratch/pages/myhelloworld_jstl.jsp








Hello World (JSTL Example)













JSTL Example (c:out): Hello World




 



• 33 Go to: http://localhost:8080/mytomcat-eclipse-helloworld-scratch/pages/myhelloworld_bean.jsp







Hello World (JSP & Java Bean Example)









Bean Example MyHelloWorld.getStrMyMessage(): Hello World




 



• 34 Go to: http://localhost:8080/mytomcat-eclipse-helloworld-scratch/MyHelloWorldServlet










Hello World (Servlet Example)









Hello World






35 Optional - Change Text - Hello World





• Using Eclipse, modify the following files then Reload the web app
  or Stop/Start Tomcat.







• filename: index.jsp
  
  For the title & h1 tags change the following:
  
  from:
  
  mytomcat-eclipse-helloworld
  
  to:
  
  mytomcat-eclipse-helloworld-scratch


• filename: WEB-INF\src\myeclipse\MyHelloWorldBean.java
  
  from:
  
  setStrMyMessage("Hello World");
  
  to:
  
  setStrMyMessage("Hello World - Hi");


• filename: WEB-INF/src/myeclipse/MyHelloWorldServlet.java
  
  from:
  
  <p>Hello World</p>
  
  to:
  
  <p>Hello World - Hi</p>


• filename: pages/myhelloworld_jstl.jsp
  
  from:
  
  <c:out
  value="Hello
  World"/>
  
  to:
  
  <c:out
  value="Hello World
  - Hi"/>




• Reload Web App or Stop/Start Tomcat Service
  (because you changed a .java file!) - see steps
  above!


• Test your Web App again