Tuesday, 18 March 2014

Java Tutorial 2 - Setup and Deploy Web Project

On the second day, the objective is to create and deploy a simple web project. There is not much explanation in the first few articles, just to let learner get used to the popular tools for developing software. As the tutorial progress, learner will get to know faster way of getting things done and more understanding of how things done.

Prerequisite

Completed Java Tutorial Part 1.

Create Simple Web Project

1. Introducing Eclipse interface

Provide that you have downloaded the proper version of Eclipse, start it up, you should have the right  tool to develop web project.

This is a screen of how your Eclipse may look like



The screen is normally divided like above, the left is for project explorer, middle for editor, right for Outline and bottom for Console and other miscellaneous views. The usage is quite natural, select a file on the explorer, edit it on editor and view result in Console.

Each box you see is one View. The layout of Views is called Perspective. On the top right corner of the screen, you should be able to see some default perspectives like JavaEE, Java. Choosing the right Perspective can make Eclipse temporarily customized to your need.

For example, if you compare Java and JavaEE perspectives, Java Perspective gives you short keys to create new class, interface. Clicking on New button show menu with creating new Class, Interface, Package,... In contrast, Java EE New button show menu with creating Servlet, Dynamic Web Project,... It also automatically include Server view at the bottom. Depend on your need, you will need to switch over among different perspectives.

If you are not happy with current Perspective, select Window -> Show View to add whatever View you need to the existing Perspective. The view also can be dragged and drop to any portion of screen.

2. Register Jdk with Eclipse

In the earlier tutorial, we unpacked Eclipse to "java/jdk1.7.0_51". Let Eclipse know this. Select Window -> Preference.



Navigate through the left panel until Java -> Installed JREs. From the screen shot above, I already registered some JREs with my Eclipse. If you follow this tutorial from beginning, you should only have the default jre7 from system. This is not what we want to develop with because the JRE included inside JDK installation give us better support and source code. Therefore, please click on Add, and point the jdk folder to "java/jdk1.7.0_51".

Please check the check box to make Eclipse use this JRE as default for future projects.

3. Register Tomcat with Eclipse

Open Preferences again, this time, navigate to Server -> Runtime Environment


Click on Add to register new Server Run time. Choose Apache Tomcat 7 runtime.


Continue to fill up with the Tomcat and Jdk that we prepared from last tutorial.


Too bad, this is just the runtime, not the server itself. Next step is creating new server using this runtime. You can use the New button mentioned above to create new Server but it requires more mouse clicks because New Server is not included in default menu. The faster way is to open Server view, right click to create new Server.



Repeat this stupid step of selecting server type again.


Please remember to select the server type first, because the Server Runtime Environment combo box only show the Runtime compatible to your server type. Click Finish to end the server creation.

4. Create first webapp

In this tutorial, you will simply use Eclipse to create new webapp. Click New button, select Dynamic Web Project


We are not going to use any fantastic feature of Servlet API 3.0 yet, so start with module version 2.5 first. Select the target runtime we created earlier and choose any name you like for the webapp.

You should see the project in the explorer. However, the web project created by Eclipse does not include the welcome page, we are going to create one for it


In the picture above, I used Package Explorer to view project, you can see slightly different UI if you use Project Explorer. As we set the runtime as Tomcat 7 when creating project and default JRE is jdk 1.7.0_51, we can see that both libraries are added by default to project. Eclipse store all web web contents inside WebContent folder. We are going to add welcome file index.html for it. Select New -> Web -> HTML File. Choose file name as index.html and put to WebContent folder. Put whatever content you like to the index file, for me, I just simply choose "Hello World"

5. Deploy this webapp to Tomcat

Let deploy this webapp to Tomcat server. Right click on Tomcat server and choose "Add and Remove ..." webapp. After add the sample_webapp, click finish.


The last step is to right click on Server and choose to start. By default, Tomcat will bind to port 8080. This is what printed in Console

INFO: Starting Servlet Engine: Apache Tomcat/7.0.52
Mar 19, 2014 1:31:22 AM org.apache.coyote.AbstractProtocol start
INFO: Starting ProtocolHandler ["http-bio-8080"]
Mar 19, 2014 1:31:22 AM org.apache.coyote.AbstractProtocol start
INFO: Starting ProtocolHandler ["ajp-bio-8009"]
Mar 19, 2014 1:31:22 AM org.apache.catalina.startup.Catalina start
INFO: Server startup in 374 ms

The console confirm that Tomcat start at port 8080. Hence, open your browser and key in the address

http://localhost:8080/sample_webapp

The index.html is the welcome file, it will be served when you do not specify anything after webapp.

Congratulation!

This tutorial is already too long and I will not torture you with any more theories. Congratulation if you have enough patient to complete this tutorial