さとうきびの初心者プログラミング日記

Unity,Java,Pythonとかで調べたことをまとめていきます。間違っていることがあったら、コメント等で教えてくれるとありがたいです..!

jsp と サーブレット で値の受け渡しをする。


どんなWebアプリ?

今回は、jspサーブレットで値の受け渡しを行いました。
作ったのは、足し算をするWebアプリです。

下記のような感じで値の受け渡しを行います。
f:id:yuhgt:20170227202643p:plain

input.jspでユーザから受け取った値をCalculator.javaで計算して、
result.jspで表示します。


さっそく作りましょう!

今回のwebアプリのフォルダ構成は以下のようになります。
f:id:yuhgt:20170227202751p:plain

tomcatwebappsフォルダに上のようなフォルダ構成を作りましょう。


Calculator.java の作成

まずは値を受け取って計算をする部分を作ります。

Calculator.java

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

public class Calculator extends HttpServlet {

  public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws IOException, ServletException{

    float num1 = 0;
    float num2 = 0;
    float resultNum;

    try {
      num1 = Float.parseFloat(request.getParameter("num1"));
      num2 = Float.parseFloat(request.getParameter("num2"));
      resultNum = num1 + num2;
    } catch (NumberFormatException e) {
      resultNum = 0;
    }

    request.setAttribute("num1", num1);
    request.setAttribute("num2", num2);
    request.setAttribute("resultNum", resultNum);

    getServletConfig().getServletContext().
      getRequestDispatcher("/jsp/result.jsp").forward(request, response);
  }
}

数字ではない値を受け取った時、一応 ‘0’ を返すようにしています。

request.getParameter()で、ユーザからの根本のデータを受け取り、
request.setAttribute()で、受け取った値を処理してできた情報などを付け加える という感じでしょうか..
しっかりとした理解ができていないので、もっと調べたほうがよさそうです。

web.xml の作成

web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
         http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
         version="2.4">

  <servlet>
    <servlet-name>calculator</servlet-name>
    <servlet-class>Calculator</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>calculator</servlet-name>
    <url-pattern>/calc</url-pattern>
  </servlet-mapping>

</web-app>

web.xmlです。

自分で作っている時、"calculator"のつづりを
何箇所か"caluclator"にしていて、かなり苦戦しました.. ;;


jspファイルの作成

input.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
  <head>
    <title>input</title>
  </head>
  <body>
    <form method="POST" action="/calculationApp/calc">
      <input type="text" name="num1" size="6"> + 
      <input type="text" name="num2" size="6">
      <input type="submit" value=" = ">
    </form>

  </body>
</html>

ユーザから受け取った値をxmlマッピングした/calc に送ります。


result.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
  <head>
    <title>result</title>
  </head>
  <body>
    <%= request.getAttribute( "num1" ) %> + 
    <%= request.getAttribute( "num2" ) %> = 
    <%= request.getAttribute( "resultNum" ) %>
  </body>
</html>

サーブレットrequest.setAttribute()したものを
request.getAttribute()で受け取ることで値を表示します。

完成!

サーバを起動し、以下URLにアクセスしましょう。
http://localhost:8080/calculationApp/jsp/input.jsp

以下、実行結果です。
f:id:yuhgt:20170227215320p:plain

f:id:yuhgt:20170227215356p:plain

f:id:yuhgt:20170227215410p:plain

お疲れ様でした!
ここまで読んでくれてありがとうございます。

参考にしたサイト様

今回は、以下のサイトを参考に進めました。
ありがとうございます。

mamanigo.seesaa.net