WEB PROGRAMMING

Easy Web Site Creation in the NetBeans IDE

NetBeans IDE Benefits for Web Site Developers

As many of you know, web applications often require many different programming
languages, and a way of combining various technologies.

For instance, you may use HTML and CSS for your page formatting, JavaScript for
some rollover buttons, and a Java servlet or JSP to process a form.

The latter is a good way to learn the syntax of the Java programming language and is
a great entry point if you are new to the Java platform.

One of the wonderful things about the NetBeans IDE is that you don't have to know
all the languages or how to combine the technologies.

NetBeans handles the languages, and combines technologies seamlessly for you. In
addition, the NetBeans IDE has some wonderful drag-and-drop widgets from various
built-in palettes.

For instance, you can drag and drop HTML components to create a form, Swing
components to create great looking buttons or menus, or drop in interactive Ajax
components using jMaki widgets.

The web site you see below in Figure 1 is not beautiful, nor is it a design I
recommend.

However, all of its components were simply dragged onto a page, and are fully
functional, requiring no code to be written from scratch. You can do a lot of web site
creation in the NetBeans IDE with very little programming.

Sample Web Site

Dept of Computer Science &Engg Page 1

 WEB PROGRAMMING

Getting Started
To get started, start the NetBeans IDE. On the opening screen there are links to
tutorials and sample projects. For what I'm going to show you, we'll move on to one
of the menus at the top. Follow the steps below:

Installing jMaki Plugin

Step 1: Go to the top menu and click on Tools > Plugins.

Step 2: Check the jMaki box, and install.

Step 3: Click the Close button.

Step 4: Restart the NetBeans IDE.

Step 5: Create a New Project, selecting Web as the Category, and Web Application as
the Project.

Step 6: Click the Next button.

Step 7: Give your project a name and click the Next button.

Step 8: Select the jMaki Framework, and then choose whatever layout you'd like to
start with. This is a nice new feature that creates a layout for you.

Step 9: Click Finish.

Dept of Computer Science &Engg Page 2

 WEB PROGRAMMING

NetBeans Interface

You can see the jMaki ones that provide many different types of Ajax functionality
for your site.

In addition, you can also drag and drop HTML components, such as forms, which are
always a pain to write by hand.

Lower down on the right side are JSP, JSF, and Database drag and drop features that
are invaluable for web applications and make programming so much easier.

Adding pages is easy, and NetBeans saves the page to the proper directory.

You can add additional pages to your site through this pane, though there are other
ways as well.

Dept of Computer Science &Engg Page 3

 WEB PROGRAMMING

Adding Web Components with Drag and Drop

The center area is the workspace, and the beginnings of your web project.

The NetBeans IDE automatically creates a JSP page for you when you create a web
project, and it inserts the basic HTML for the page layout that you chose previously.

Of course, you are not stuck with this layout, and may edit the page as you desire if
you know HTML and CSS. Additionally, you are not stuck with JSP pages.

You may, if you like, develop in PHP instead. For this article, though, we'll stick with
JSP pages.

You can see which text to change by looking at the black print. If you know HTML,
of course, you can add additional code, or more simply you can drag and drop HTML
components from the palette on the right, right onto the workspace.

Comments that have been inserted to indicate where you place your content for each
section or column on the page, is shown in Figure below :

I
nsert Text Over Black Type

Dept of Computer Science &Engg Page 4

 WEB PROGRAMMING

Create a separate page to be included on a tabbed pane by doing the

following:
Step 1: In the Files pane, right-click the project name, and select New > JSP.

Step 2: Enter a name for the page.

Step 3: You can save the page in a folder of your choice by clicking Browse and
choosing a folder, or you can leave it blank. By default, the NetBeans IDE saves the
pages into the web folder. This is what I did for this sample web site.

Step 4: Edit the JSP page you just created in the middle pane (the code editor).

The NetBeans IDE automatically creates your web pages as JSP pages, unless you tell
it to do otherwise.

You can also use this IDE with other programming languages, such as Ruby on Rails
or PHP.

Once the page is created and you have added the content you want, then include it
into the tabbed page by changing the Tabbed View code to the following:

Tabbed Pane Code

Dept of Computer Science &Engg Page 5

 WEB PROGRAMMING

Compile and Run Your Site

Once you have your components in place, you need to Build and Run your project.

You'll only need to do this once for every NetBeans session. After you do a build, you
can add more components, then simply Refresh or Reload the browser page.

To Build and Run your project, follow these steps:

Step 1: Go to Build in the main menu.

Step 2: Select Build Main Project (if you get a pop up box that says, "The main
project has not been set," make sure your project is selected in that window and then
click OK.)

In the Output window at the bottom of the screen, you can watch as the IDE
creates .jar files, compiles the JSP pages, and then tells you if the build was
successful.

Assuming it was, run your project with the two following steps:

Step 1: Go to Run in the main menu.

Step 2: Select Run Main Project.

For creating scripts that send data to the server and return something, such as with
forms, you'll need to get an understanding of JavaServer Pages or servlet
technologies.

Using the NetBeans IDE, you can create a front controller with a servlet, add methods
for cookie requests, and use JavaServer Pages Standard Tag Library (JSTL) for
internationalization as well as common,

structural tasks such as iteration and conditionals, tags for manipulating XML
documents, internationalization tags, and SQL tags.

The NetBeans IDE also provides a framework for integrating existing custom tags
with JSTL tags.

In the future, we will cover many of these topics so you can learn Java programming
through creating applications for web sites.

Dept of Computer Science &Engg Page 6

 WEB PROGRAMMING

Adding Other Components

Using JavaServer Faces Frameworks

The NetBeans IDE has an amazing amount of features in addition to those we just
talked about.

You'll discover as you are creating, that you get code completion in any language you
are working in.

There are also other features, such as UML modeling that you can use, easy access to
web services, and you can code, test, and debug for mobility applications.

NetBeans saves lots of time and writes so much of your code for you. This is great for
new programmers to advanced developers.

As a new developer, or someone new to the Java platform, you can learn the Java
programming language little by little by creating small web applications, and
gradually working up to complex Enterprise applications.

Dept of Computer Science &Engg Page 7