Institutionen För Data- Servlet Laboration Stockholm

Institutionen för Data- Servlet Laboration Stockholm

och Systemvetenskap IS7 April 1999

SU/KTH Komponentbaserad systemanalys

nikos dimitrakas

INSTITUTIONEN FÖR DATA-

OCH SYSTEMVETENSKAP

SU / KTH

SERVLET LABORATION

IS7

KOMPONENTBASERAD SYSTEMANALYS

VÅRTERMINEN 1999

http://l238.dsv.su.se/courses/is7/laboration.html

nikos dimitrakas

1 Introduction to the Environment

In this exercise (described in chapter 2) we will build a little web application that provides the possibility of ordering flowers online. We will provide the user with the following functionality:

Users will be able to

write their name, address, credit-card number…
put some flowers in their shopping cart
look at the items in the shopping cart
check-out and accept the order-placement
get a list of other flower-shops on line (use of database)

To do all this we will use the following products:

IBM Websphere Studio 1.0 / This tool provides help for designing servlets, javabeans, queries, and connections between all these. Websphere Studio generates some of the code which can be completed in an editor of your choice. NetObjects Scriptbuilder is the default editor that is installed with Websphere Studio.
Netscape Enterprise Server 2.6 / This is a webserver product that provides the possibility to publish the applications on the web.
IBM Websphere Application Server 2.0 / This is the application server that takes care of servlets, compiles jsp-files, creates and manages sessions and database connections. Websphere Appserver is connected to the Netscape webserver.

The following figure illustrates how the webserver and the appserver are connected to each other and to the rest of their environment. The webserver is in charge of receiving requests from clients and then forward them to the appserver which is in charge of servlets and jsp.

1.1 Netscape Server Enterprise

On every machine (the ones used for this course) there is a Netscape webserver installed (normally under e:\Netscape\SusteSpot). This means that the machine listens on port 80 for http requests. You can test this be starting a browser and trying the following URL:

http://localhost/ or http://%nameofmachine% for example http://altair.dsv.su.se/

This server can also be administered on port 14614:

http://localhost:14614/

username: admin

password: admin

You are welcome to change the password on your machine if you wish.

1.2 Websphere Application Server

On every Netscape Server there is a Websphere Application Server attached. The Websphere Appserver is located under e:\Websphere\AppServer. The servlets that we will create later have to be deployed on the Websphere Appserver. Websphere searches automatically for .class (compiled java classes) and .servelt (servlet configuration) files in the e:\Websphere\Appserver\classes directory and the e:\Websphere\Appserver\servlet directory.

Websphere AppServer can be administered at port 9527

http://localhost:9527

username: admin

password: admin (also changeable)

A very useful feature here is the possibility to create aliases for directories or files so that they can be accesses through http. For example I can create a alias (URL prefix) called temp that will be mapped to the e:\temp directory:

After pressing OK and applying the changes it will be possible to see the contents of the e:\temp directory with a webbrowser at the following URL:

http://altair/temp/

useful information about Websphere AppServer is also available:

http://localhost:9527/doc/index.html

1.3 Websphere Studio

Websphere Studio is a tool for creating most of the necessary files for webapplications. Studio can also be configured so that it can “publish” the publishable files (what it does is basically copy them to predefined directories where Websphere AppServer and Netscape Server can find them. That can be set in the Options|Publishingservers menu:

Here you can define the “publish”-paths for different types of files.

The documentation of Websphere Studio can be accessed by a web-browser at:

e:/WebSphere/Studio/DOC/html/2tabcontents.html

Websphere Studio provides Wizards that guide you through the most common steps of creating JavaBeans, servlets, SQL statements, html and jsp files. We will explore these features in more detail later.

1.4 Other tools

Other tools that can be relevant are:

· Script Builder – for editing html, jsp, java, .servlet files

Script Builder provides some support on those types of files.

· MS Access – to build the database

2 FlowerShop exercise

As mentioned before this exercise is about creating a little on-line flower shop. Our flower shop will use the “shopping cart” technique. That is, the customer will be able to add different items to their shopping cart (or basket). This basket is just a temporary data structure that will be stored in a session.

A session is like a cookie but is stored on the server and is active as long as a web-client is connected to the server. A session is managed automatically by Websphere Appserver, and it can be accessed and manipulated by servlets. It can also provide data to jsp files.

We will create servlets that receive data from the client and store the data in java beans which are in turn stored in the session. These servlets return jsp files to the client (a response).

We will also create a servlet that accesses a database.

Let’s start building this application step by step.

2.1 Register a URL prefix at the webserver

It can be a good idea to create a special directory where we will publish all the html and jsp files together with some image files. Then we can also map this directory to a URL prefix at our webserver.

In this example we will use the following directory: “E:\FlowerShop”. We will map this directory to a URL prefix called FlowerShop. (you are welcome to choose your own names, as long as you map them correctly to the ones used in this exercise)

· Create the directory on the hard-disk

· Start the administration of the webserver and add an URL Prefix according to the following image:

· Press OK and then Save and Apply

To test that the URL Prefix “FlowerShop” is active start a webbrowser and try to connect to your server and add the prefix:

http://localhost/FlowerShop

That should show you the contents of the E:\FlowerShop directory:

Now that our webserver is connected to the FlowerShop directory, we can start building the actual application.

2.2 Create a publishing server in Websphere Studio

· Launch Websphere Studio. (It is normally located under IBM Websphere on the start menu.)

· We can now create a new “publishing server” in Websphere Studio. That will allow us to just select “publish” for the project and all the publishable files will get copied to the given locations. Create a new “publishing server” according to the next figure:

Now we are ready to start creating our application.

2.3 Create a project in Websphere Studio

· Choose File | New Project…

The New Project Wizard appears.

· Fill the field Name with the name you wish your project to have (for this exercise we will use the name: FlowerShop). The Default package name is automatically filled.

· Press OK.

Now you can see on the left pane of Websphere Studio that a project with the name FlowerShop has been created:

What has happened is that a directory with the name FlowerShop has been created in the default project directory (where all Websphere Studio projects are placed). One more directory called classes has been created inside FlowerShop project directory. All the classes that we generate will be automatically placed in this directory.

2.4 Create a JavaBean with Websphere Studio

We can start by creating a JavaBean to store the customers information:

· Activate the FlowerShop Project and choose Tools|Studio Wizard:

The Studio Wizard appears. The first question is “What would you like to create?”

· Choose the JavaBean option.

· Press the “Next >” button

· Name the bean CustomerInfo

· Press the “Next >” button

· Add some properties according to the next figure:

· Press the “Finish” button

We can now see that Websphere Studio has created two files under the classes directory:

2.5 Create a servlet using a JavaBean

We can now create a servlet that will use this JavaBean.

· Start the Studio Wizard again and choose to create a basic servlet using a JavaBean

· Name your servlet “CustomerRegistrationServlet”

· On the next step choose to use the FlowerShop.CustomerInfo bean and check the option to store the bean in the user’s session

The next question is whether to create an input page (an html page that lets the user define values for the properties that we choose).

· Choose the “Yes, please” option and check all the properties. (we will later edit the html file, that Studio generates, to add some color and picture)

· Complete the next step according to the following figure:

· At the next step (action) we answer no, since we do not have any extra functionality in our JavaBean

The next step is about creating an output page (a jsp) that the servlet will return to the client after it’s done.

· Choose yes and check the property firstName; we will change this page later to be a thank you for registering page.

· On the output layout step there is nothing to do, we move to the next step.

Here we can choose whether to have a special page to be returned when an error has occurred during the servlet execution.

· We choose no and just press finish.

We can now see that Studio has generated several files:

There is an html file that is the input file, then there is a jsp file that is the output file that is returned by the servlet, and finally there is the servlet which consists of three files:

the .servlet file which is the configuration file
the .java file which is the source code of the servlet
the .class file which is the compiled servlet

2.6 Look at the generated code

It can be interesting to open these files and see the source code.

· Double-click on the html file to open it in Script Builder

We can see that there is a form that has the name of the servlet declared as the action. That means that when we press the submit button of that form then the servlet will get invoked and also all the parameters of the form will be attached to the request.

The /servlet part of the action is a special alias that gets the WebSphere AppServer to start an invoker servlet that invokes the right servlet. This is all taken care by the application server without us having to do anything.

We can now look at the source code of the servlet. This code is quite well commented.

First the session is assigned to a variable session, or a new session is created if no session is already active.

Then an instance of the CustomerInfo bean is created and stored in the session.

All the parameters are retrieved from the request and stored in the bean.

Finally the output page is sent back to the client as a result. The name of the output file is actually fetched from the servlet configuration file (the .servlet file).

Let’s open the .servlet file then.

We can see the following lines:

<default-page>

<uri>/CustomerRegistrationServletOutputPage.jsp</uri>

</default-page>

This is the URL that the servlet calls. This is actually not the correct URL. We have placed our application under a URL prefix with the name FlowerShop. Websphere Studio does not know that and has therefore assumed that all the files are placed at the root of the webserver. What we need to do is simply add this prefix to the default page in the .servlet file. The code should be:

<default-page>

<uri>/FlowerShop/CustomerRegistrationServletOutputPage.jsp</uri>

</default-page>

Finally we can look at the jsp file. This is a file that has to be compiled by the application server before it is sent to the client.

The line:

is defining that there is a bean called CustomerRegistrationServlet of type FlowerShop.CustomerInfo stored in the session and the next line:

should be replaced by the value of the property firstName that is stored in that bean.

2.7 Publish the project

We can now try to publish our application and see if everything works correctly.

· Mark the Project and right click with the mouse. Choose publish!

· Choose the right publishing server, and press continue:

A window with information appears:

· Press publish!

2.8 Test the “application”

We can now start a browser and see if everything is working:

· Go to the /FlowerShop/CustomerRegistrationServletInputPage.html

· Fill the form and press submit

That triggers the execution of the servlet. The parameters are sent to the servlet which places them in a java bean stored in the session. The servlet then returns the jsp to the browser:

The jsp is actually compiled by the application server before it is returned to the browser. If we look at the source code we only see classic html:

All the <bean> and <insert> tags have been replaced by the application server with the current values in the session.

2.9 Change the input and output files

We can know edit the jsp file to be a thank you for registering page. We can also change the formatting of both the jsp and the html files.

Here is an example of what you can do:

The name of the customer is still fetched from the bean with an <insert> tag. The rest is usual html:

You can design the “user-interface” of your application as you like (it is on the other hand part of the exercise that you DO change the source code).

2.10 Create a shopping cart

Now we will create one more java bean which will keep the amounts of flowers that the customer has placed in the shopping cart. To make this simple we will accept that our shop only sells four types of flowers:

/ Name: flower1
Price: 200:-
/ Name: flower2
Price: 300:-
/ Name: flower3
Price: 400:-
/ Name: flower5
Price: 450:-

Pictures of flowers are available at: