JSP & Servlet(BMI-WEBAPP作成) | ジョイタスネット

前回作成したBMIデータをJsonとして返却するWeb-APIを利用して、
BMIを測定するWEBアプリを作成してみよう。

実行例

ブラウザにフォームが表示される。

身長と体重を入力してsendボタンを押すと結果と画像が表示される。

作例

1.エクリプスから新規作成->動的WebプロジェクトよりBMI_WEBAPPを作成する。

2.前回同様gson-2.8.1.jarファイルをWEB-INF/libフォルダに配置する。

3.新規クラスでmodelパッケージ内にBMIクラスを以下のように作成する。

package model;

import java.io.Serializable;

public class BMI implements Serializable{
	private double height;
	private double weight;
	private double bmi;
	private String imgPath;
	public BMI() {}
	public double getHeight() {
		return height;
	}
	public void setHeight(double height) {
		this.height = height;
	}
	public double getWeight() {
		return weight;
	}
	public void setWeight(double weight) {
		this.weight = weight;
	}
	public double getBmi() {
		return bmi;
	}
	public void setBmi(double bmi) {
		this.bmi = bmi;
	}
	public String getImgPath() {
		return imgPath;
	}
	public void setImgPath(String imgPath) {
		this.imgPath = imgPath;
	}

}

4.新規サーブレットからcontrollerパッケージ内にMainクラスを以下のように作成する。

package controller;

import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.google.gson.stream.JsonReader;

import model.BMI;


@WebServlet("/Main")
public class Main extends HttpServlet {
	private static final long serialVersionUID = 1L;
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//ビューへフォーワード。
		RequestDispatcher rd=request.getRequestDispatcher("/WEB-INF/view/main.jsp");
		rd.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//フォームからの送信パラメータを取得
		String height=request.getParameter("height");
		String weight=request.getParameter("weight");
		//WebAPIへ接続するURLの作成
		URL url=new URL("http://localhost:8080/BMI_API/GetData?height="+height+"&weight="+weight);
		//urlを元にHttpコネクション生成
		HttpURLConnection con=(HttpURLConnection)url.openConnection();
		//通信方法はGET
		con.setRequestMethod("GET");
		//レスポンスの本文取得
		InputStream is=con.getInputStream();
		InputStreamReader isr=new InputStreamReader(is,"UTF-8");
		JsonReader jr=new JsonReader(isr);
		//Gsonオブジェクト生成
		Gson gson=new Gson();
		//jsonからBMIクラスのインスタンスに変換
		BMI bmi=gson.fromJson(jr, BMI.class);
		//リクエストスコープにインスタンスを詰める
		request.setAttribute("bmi", bmi);
		//doGetを呼び出してviewにフォワード
		doGet(request, response);
	}

}

5.ビューを作成しよう。/WEB-INF/フォルダの直下にviewフォルダを作成し、その中に新規jspでmain.jspを以下のように作成する。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="model.BMI" %>
<%
BMI bmi=(BMI)request.getAttribute("bmi");
String height=bmi==null? "":bmi.getHeight()+"";
String weight=bmi==null? "":bmi.getWeight()+"";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>BMI測定アプリ</title>
</head>
<body>
<form action="/BMI_WEBAPP/Main" method="post">
Height:<input type="number" name="height" step="0.1" min="0.0" placeholder="Enter Height(cm)" value="<%=height %>"><br>
Weight:<input type="number" name="weight" step="0.1" min="0.0" placeholder="Enter Weight(kg)" value="<%=weight %>"><br>
<button type="submit">Send</button>
</form>
<%if(bmi !=null){ %>
<p>
Height:<%=bmi.getHeight() %><br>
Weight:<%=bmi.getWeight() %><br>
BMI:<%=bmi.getBmi() %>
</p>
<img src="<%=bmi.getImgPath() %>" width="100">
<%} %>
</body>
</html>