Q19

Question 19

Make two files as follows:

a. main.html: shows 2 text boxes and 3 radio buttons with values "addition", "subtraction" and "multiplication" b. operate.jsp: depending on what the user selects perform the corresponding function (Give two implementations: using request.getParameter() and using expression language)

Created main.html as mentioned and taking two numbers as number input and operator as checkbox with corresponding operation value (+,-,*). Created CalcServlet.java to handle url pattern "Q19/" and render page main.html and then submit post request to url pattern "Q19/OperationsServlet" which is handled by OperationsServlet.java

Browse Code Here

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>JSP-2 | Operate On Numbers</title>
</head>
<body>
<div style="text-align: center;">

    <div class="container-fluid">
        <h1>Operate On Numbers | JSP-2 </h1>

    </div>
</div>
</div>
<form method="post" action="/Q19/OperationsServlet">
    <div class="form-group">
        <div class="container-fluid mt-5 ">
            <div class="row align-items-start">
                <div class="col-6">
                    <div class="container col-lg-6">
                        <div class="container mt-2">
                            <label for="n">
                            Enter first number</label>
                        </div>
                        <div class="container mt-2">
                            <input type="number" 
                            class="form-control w-100 p-3" 
                            id="n1" name="num1"
                           placeholder="Enter a number" 
                           required>
                        </div>
                        <div class="container mt-2">
                            <label for="n">
                            Enter second number
                            </label>
                        </div>
                        <div class="container mt-2">
                            <input type="number" 
                            class="form-control w-100 p-3" 
                            id="n2" name="num2"
                           placeholder="Enter a number" 
                           required>
                        </div>
                        <div class="container mt-3 mx-10">
                            <input type="submit" 
                            formmethod="post" 
                            class="btn btn-primary" 
                            value="DISPLAY">
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="container col-lg-6">
                        <div class="form-check">
                            <div class="container mt-4">
                                <input 
                                class="form-check-input" 
                                type="radio" 
                                name="operator" 
                                id="add" 
                                value="+">
                                <label 
                                class="form-check-label" 
                                for="add">Addition
                                </label>
                            </div>
                            <div class="container mt-5">
                                <input 
                                class="form-check-input" 
                                type="radio" 
                                name="operator" 
                                id="sub" 
                                value="-">
                                <label 
                                class="form-check-label" 
                                for="sub">
                                Subtraction
                                </label>
                            </div>
                            <div class="container mt-5">
                                <input 
                                class="form-check-input" 
                                type="radio" 
                                name="operator" 
                                id="mult" 
                                value="*">
                                <label 
                                class="form-check-label" 
                                for="mult">
                                Multiplication
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="card-footer mt-5 text-center">
    <div class="row align-items-start">
        <div class="col-6">
            <div class="container col-lg-6">
                <a class="btn btn-primary"  
                onclick="history.back(-1)" 
                role="button">
                Back
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="container col-lg-6">
                <a class="btn btn-primary" 
                href="http://localhost:8080/" 
                role="button">
                Home Page
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 24-04-2021
  Time: 11:27
  To change this template use File 
  | Settings 
  | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" 
language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>JSP-2 | Operate On Numbers</title>
</head>
<body>
<div style="text-align: center;">

    <div class="container-fluid">
        <h1>Operate On Numbers | JSP-2 </h1>

    </div>
</div>
</div>
<form method="post" action="/Q19/OperationsServlet">
    <div class="form-group">
        <div class="container-fluid mt-5 ">
            <div class="row align-items-start">
                <div class="col-6">
                    <div class="container col-lg-6">
                        <div class="container mt-2">
                            <label for="n">
                            Enter first number
                            </label>
                        </div>
                        <div class="container mt-2">
                            <input 
                            type="number" 
                            class="form-control w-100 p-3" 
                            id="n1" 
                            name="num1"
                            placeholder="Enter a number" 
                            required>
                        </div>
                        <div class="container mt-2">
                            <label 
                            for="n">
                            Enter second number
                            </label>
                        </div>
                        <div class="container mt-2">
                            <input type="number" 
                            class="form-control w-100 p-3" 
                            id="n2" 
                            name="num2"
                            placeholder="Enter a number" 
                            required>
                        </div>
                        <div class="container mt-3 mx-10">
                            <input type="submit" 
                            formmethod="post" 
                            class="btn btn-primary" 
                            value="DISPLAY">
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group ">
                        &nbsp;
                    </div>
                    <div class="form-group ">
                        &nbsp;
                    </div>
                    <div class="container col-lg-12 mt-3">
                        <div class="container-fluid mt-3 ">
                            <div class="container mt-5 ">
                                <b><p>
                                ANSWER FOR 
                                ${operation}(${operator}) 
                                = ${answer}
                                </p></b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</form>

<div class="card-footer mt-5 text-center">
    <div class="row align-items-start">
        <div class="col-6">
            <div class="container col-lg-6">
                <a class="btn btn-primary"  
                onclick="history.back(-1)" 
                role="button">Back</a>
            </div>

        </div>
        <div class="col-6">
            <div class="container col-lg-6">
                <a class="btn btn-primary" 
                href="http://localhost:8080/" 
                role="button">Home Page</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

package com.example.ITJSP;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.Objects;


@WebServlet(name = "OperationsServlet", 
value = "/OperationsServlet", 
urlPatterns = {"/Q19/OperationsServlet"})
public class OperationsServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request,
     HttpServletResponse response) throws ServletException,
      IOException {
        getServletContext().getRequestDispatcher(
        "/operate.jsp").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request,
     HttpServletResponse response) throws ServletException,
      IOException {
        String num1 = request.getParameter("num1");
        String num2 = request.getParameter("num2");
        String operator = request.getParameter("operator");

        int n1 = Integer.parseInt(num1);
        int n2 = Integer.parseInt(num2);
        double answer = 0;
        String operation = null;
        if (Objects.equals(operator, "+")) {
            operation = "ADDITION";
            answer = n1 + n2;
        } else if (Objects.equals(operator, "-")) {
            operation = "SUBTRACTION";
            answer = n1 - n2;
        } else if (Objects.equals(operator, "*")) {
            operation = "MULTIPLICATION";
            answer = n1*n2;
        } else {
            operation = "DIVISION";
            answer = n1/n2;
        }
        request.setAttribute("operation", operation);
        request.setAttribute("operator", operator);
        request.setAttribute("answer", answer);
        doGet(request, response);

    }
}

package com.example.ITJSP;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import javax.servlet.annotation.*;

@WebServlet(name = "CalcServlet", 
value = "/CalcServlet", urlPatterns = {"/Q19"})

public class CalcServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request,
     HttpServletResponse response) throws ServletException,
      IOException {

        getServletContext().getRequestDispatcher("/main.html").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request,
     HttpServletResponse response) throws ServletException, 
     IOException {

    }
}

Output

Try or Test The Corresponding Code Here

PreviousQ18 NextQ20

Last updated 4 years ago