JSP & Servlet(じゃんけん作成)

JSP&Servlet

サーブレットとjspを使って簡単なじゃんけんゲームを作成してみよう!

実行例

ブラウザに
http://localhost:8080/jyan/Main
と入力するとフォームが表示される。

手を選択して送信ボタンを押す。

上のように結果が表示される。
あいこの場合は「あいこです」と表示される。
なお、今回は手を入力せずに送信ボタンを押すことは考慮しなくてよい。

作例

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

2.新規サーブレットからMain.javaを作成する。今回パッケージはcontrollerとした。以下のように記述する。

package controller;

import java.io.IOException;
import java.util.Random;

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;

@WebServlet("/Main")
public class Main extends HttpServlet {
	
	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[] hands={"グー","チョキ","パー"};
	
		request.setCharacterEncoding("utf-8");
		String handStr=request.getParameter("hand");
		int userHand=Integer.parseInt(handStr);
		int pcHand=new Random().nextInt(hands.length);
		String result;
		int diff=(userHand+3-pcHand) % 3;
		if(diff==0){
			result="あいこです";
		}else if(diff==2){
			result="あなたの勝ち";
		}else{
			result="あなたの負け";
		}
		request.setAttribute("userHand", hands[userHand]);
		request.setAttribute("pcHand", hands[pcHand]);
		request.setAttribute("result",result);
		doGet(request, response);
	}
}

4.WEB-INFの中にviewフォルダを作成し、その中にmain.jspファイルを作成し以下のように記述する。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String userHand=(String)request.getAttribute("userHand");
userHand=userHand==null? "":userHand;
String pcHand=(String)request.getAttribute("pcHand");
pcHand=pcHand==null? "":pcHand;
String result=(String)request.getAttribute("result");
result=result==null? "":result;

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>here</title>
</head>
<body>
<form action="/jyan/Main" method="post">
手を選んでね:<br>
<input type="radio" name="hand" value="0" <%=userHand.equals("グー")? "checked":"" %>>グー
<input type="radio" name="hand" value="1" <%=userHand.equals("チョキ")? "checked":"" %>>チョキ
<input type="radio" name="hand" value="2" <%=userHand.equals("パー")? "checked":"" %>>パー
<input type="submit" value="送信">
</form>
<%if(result.length() >0){%>
<p>あなたは<%=userHand %></p>
<p>PCは<%=pcHand %></p>
<p><%=result %></p>
<%} %>
</body>
</html>

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>

完成

ウェブアプリケーションとして実行し、ブラウザから

無効なURLです

とリクエストを投げてみよう。最初に示した実行例のようになれば成功だ。

コメント

タイトルとURLをコピーしました