SEG3202 – Lab 1 Introduction to Servlets and Netbeans IDE

draindecorumSoftware and s/w Development

Aug 15, 2012 (4 years and 11 months ago)

255 views

SEG3202 – Lab 1
Introduction to Servlets and Netbeans IDE
The objective of this lab is to introduce to Servlets programming using Netbeans 5.5 IDE.
Setup
For this lab, you need 
Netbeans IDE 5.5, Sun Java 
Application Server 
as well as J2SE JDK 1.5.0 or
 
higher. 
Sun Netbeans IDE 5.5 bundle
 includes both  Netbeans IDE 5.5 and Sun Java Application
 
Server.
Task
In this lab, you will implement a simple 
servlet based Calculator

The user enters two numbers using a form and click on a button for an operation (addition, substraction,
 
multiplication, division). The calculator servlet should then perform the requested operation and
 
present a page with the result.
Steps
You will perform the following steps:
1.
create a project
2.
create the form page
3.
create the calculator servlet
4.
build and run
Create project
1.
Start the IDE
2.
Goto 
File ­> New Project
Select
 Web 
in
 Categories 
and
 Web Application
 in 
Projects, 
and click 
Next>.
Enter project name: 
Calculator
,  browse to a project location, leave everything else as it is and click
 
Finish.
The IDE should show the new project as follow.
Create Form Page
1.
Right­click on the project and select 
New ­> HTML
Enter
 
index
 
as
 HTML File Name 
and click
 Finish.
2.
Add Form element
The IDE includes an editor that can be used to quickly create HTML pages by draging and droping.
 
Click on the 
Form
 in the Palette and drag between 
<body>
 and 
</body>
.
Set 
Action
 as 
calculate
 and 
Name
 as 
calculateForm,
 then click 
OK
.
3.
Add <h1>Calculator</h1> after 
<body>
4.
Drag a 
Table
 from the Palette just before element </form>. Specify number of rows as 3 and
 
number of column 2.
5.
Drag a 
Text input
 element from the Palette to between the first 
<td>
 and 
</td>
 in 
<tboby>
.
 
Specify First as name and 0 as initial value. Write “
First Number: 
” before element 
<input>

6.
Drag a 
Text input
 element from the Palette to between the second 
<td>
 and 
</td>
 in 
<tboby>
.
 
Specify Second as name and 0 as initial value. Write “
Second Number:  
” before element
 
<input>
.
7.
Drag a 
Button 
element from the Palette to between the third 
<td>
 and 
</td>
 in 
<tboby>
.
 
Specify 
Add
 as label and 
add
 as name.
8.
Drag a 
Button 
element from the Palette to between the fourth 
<td>
 and 
</td>
 in 
<tboby>
.
 
Specify 
Subtract
 as label and 
subtract
 as name.
9.
Drag a 
Button 
element from the Palette to between the fifth 
<td>
 and 
</td>
 in 
<tboby>
. Specify
 
Multiply
 as label and 
multiply
 as name.
10.
Drag a 
Button 
element from the Palette to between the sixth 
<td>
 and 
</td>
 in 
<tboby>
.
 
Specify 
Divide
 as label and 
divide
 as name.
The end result should be as follow:
<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
  </head>
  <body>
      <h1>Calculator</h1>
      <form action="calculate">
          <table border="2" cellspacing="2" cellpadding="2">
              <thead>
                  <tr>
                      <th></th>
                      <th></th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>First Number: <input type="text" name="First" value="0" /></td>
                      <td>Second Number: <input type="text" name="Second" value="0" /></td>
                  </tr>
                  <tr>
                      <td><input type="submit" value="Add" name="add" /></td>
                      <td><input type="submit" value="Subtract" name="subtract" /></td>
                  </tr>
                  <tr>
                      <td><input type="submit" value="Multiply" name="multiply" /></td>
                      <td><input type="submit" value="Divide" name="divide" /></td>
                  </tr>
              </tbody>
          </table>
      </form>
  </body>
</html>
11.
Set 
index.html
 as welcome page
Select file 
web.xml
 in sub­folder 
WEB­INF
 of 
Web Pages
.  Click on 
Pages
 and replace 
index.jsp
 with
 
index.html
 in 
Welcome Files
.
Create Calculator servlet
1.
Righ­click on the project and select 
New ­> Servlet
Specify 
CalculatorServlet
 as 
Class Name
 and 
calculator
 as 
Package
, click 
Next
.
Change 
URL Pattern(s)
 to 
/calculate
 and click 
Finish
.
2.
Replace method 
processRequest 
with the following
  /** Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * @param request servlet request
     * @param response servlet response
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF­8");
        PrintWriter out = response.getWriter();
        out.println("<html>");
        out.println("<head>");
        out.println("<title>Calculator response</title>");
        out.println("</head>");
        out.println("<body>");
        
        String sfirst = request.getParameter("First");
        String ssecond = request.getParameter("Second");
        try {
            double firstn = Double.parseDouble(sfirst);
            double secondn = Double.parseDouble(ssecond);
            double result = 0;
            if (request.getParameter("add") != null) {
                result = firstn + secondn;
            } else if (request.getParameter("subtract") != null) {
                result = firstn ­ secondn;
            } else if (request.getParameter("multiply") != null) {
                result = firstn * secondn;
            } else if (request.getParameter("divide") != null) {
                result = firstn / secondn;
            } 
            out.println("<h1>Result is: " + result + "</h1>");
        } catch (Exception e) {
            out.println("<h1>Wrong parameter types ­ enter numbers</h1>");
        }
        out.println("</body>");
        out.println("</html>");
        /* */
        out.close();
    }
Build and Run Project
Select 
Run 
­> 
Run Main Project
 from the IDE tool bar (or Right­click on the project and select 
Run
 
Project
). 
The calculator form should be displayed in a browser if not (and if BUILD IS SUCCESSFUL), go to
 
URL 
http://localhost:8080/Calculator/
.