Friday, November 04, 2011

Eclipse & Tomcat - Create a Webapp - Hello World Tutorial





Untitled Document







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



  • No comments: