How to Create JavaWeb Application in Netbeans IDE

Introduction

This article explains how to create Java web applications in the Netbeans IDE 7.4

This article explains the basics of using the Netbeans IDE 7.4 to develop web applications. It describes how to create a simple web application with the use of JavaBeans, after that deploy this app on the server (in this article I used the Tomcat Server) and view its presentation on a web browser. This application developed a JSP page that contains a name field and asks you to input your name. When you provide your name it uses JavaBeans components to process the name during the HTTP session and generates the output according to given input and generates it on another JSP page.

Creating the Java web application

The following describes creating a Java web application in the Netbeans IDE using the Tomcat Server.

For developing Java web apps we need to do several steps.

Step 1

Open the Netbeans IDE.

fig-1.jpg

Step 2

Now click on the File menu then select "New project" as in the following:

Fig-2.jpg

Step 3

Now choose "Java Web" -> "Web application" as in the following:

fig-3.jpg

Step 4

Now click on "Next" then enter your project name as follows; I entered "JavaWebApp" there.

fig-4.jpg

Step 5

Click on "Next" then choose your server (I used "Apache Tomcat") then click on "Finish" as in the following:

fig-5.jpg

Step 6

Now you will see that a default "index.jsp" has been generated in your project as in the following:

fig-6.jpg

Step 7

Now create a new Java package as follows.

In the project window, expand the source package and right-click on the source package and choose a new "Java Package" as in the following:

fig-7.jpg

Step 8

In the package window provide the package name as "org.mypack.javaweb" as in the following:

fig-8.jpg

Step 9

Now click on "Finish"; a new package is created as shown in the project window with the name "org.mypack.javaweb". Now right-click on this package and select "New" -> "Java Class" as in the following:

fig-9.jpg

Step 10

Now in the class window, select your class name (I provided NameProcessor) as in the following:

fig-10.jpg

Step 11

Now click on "Finish"; your Java class with some default code will be generated. Now we need to make some changes in this file.

In the source editor of NameProcessor.java file:

1. Declare a String variable by entering the following line directly:

String username;

2. Add the constructor as in the following:

public NameProcessor() { }

3. Add the following line in the NameProcessor() constructor as described in the following figure.

fig-11.jpg

Step 12

Now we need to add the JavaBeans components to retrieve and process the username as provided by the user.

1. Right-click on the username field as passed in the String in the first line in the Source Editor and choose "Refractor" -> "Encapsulate Fields" as in the following:

fig-12.jpg

Step 13

The Encapsulated Fields dialog opens, listing the username field. Don't make any changes; leave all as the default and click on "Refactor" as in the following figure:

fig-13.jpg

Step 14

After clicking on Refactor, the getter and setter methods of JavaBeans are generated for the username filed. You will see that the modifier of the class variable is set to private and all other setter methods are generated as public. Your Java class should now look as in the following:

fig-14.jpg

Step 15

Now we need some changes in our default index.jsp file. Open this file and start editing.

1. Add a Form Item after the <h1> tag. As in the pallet (open the pallet by pressing CTRL+SHIFT+8), it's located to the right side of the source editor, expand HTML forms and drag a Form Item to that location as shown in the following figure:

fig-15.jpg

When we drag the Form Item, a window is generated that requires form values. Provide the following as shown in the following figure and then click "Ok".

  • Action: process.jsp
  • Method: GET
  • Name: Name Display Form

fig-16.jpg

2. Now drag a Text Input Item from the palette for the </form> tag then provide its value as in the following:

fig-17.jpg

Click "OK". An HTML "<input>" tag is added to the form. Now delete the empty value attribute from this tag. The selected part you need to delete will be shown in the following figure.

fig-18.jpg

3. Similarly add a Button Item (with Label:OK and Type:submit) and then type "Please Enter Name:" (just before the "<input>" tag), then change the heading from "Hello World!" to "User Entry Form Page". Now your "index.jsp" page looks like this.

fig-19.jpg

Step 16

Now create another JSP page as "right-click on project" then select "New" -> "JSP" as in the following figure.

fig-20.jpg

Step 17

Now provide the class name as "process" and click on "Finish". Now add a component of JavaBeans over there.

Expand the process.jsp file and drag a "Use Bean" icon just below the "<body>" tag and add the following detail to them as in the following:

fig-21.jpg

Step 18

Click on "OK". The "<jsp:useBean>" tag is added.

Similarly drag the following.

1. The SetBean property icon (just before the "<h1>" tag) and delete the empty value attributes from there and add the following to this tag:

<jsp:setProperty name="ourbean" property="username" /> and change the text between <h1> tags as "Welcome, !".

2. Drag a GetBean Property icon from the palette and drop it after the comma in the heading tag. Specify the following detail there.

fig-22.jpg

Now check that your process.jsp contains the following code.

fig-23.jpg

Step 19

Now run your project. Right-click on the project menu and choose Run as in the following:

fig-24.jpg

The following output is generated in your default browser:

fig-25.jpg

Now provide your name and you will get the following output:

fig-26.jpg

If you get the same output then you have done it. Thanks for reading this article, If you encounter any problem then please let me now.