実技(Webプログラミング実習2)2

1.SQL2復習
2.Webアプリケーションの作成1(Model周り)
3.Webアプリケーション制作(Controller)
4.Webアプリケーション制作(view)
5.Webアプリケーション制作(仕上げ)
〇model.Jyanken.java

package model;

import java.io.Serializable;

public class Jyanken implements Serializable{
	private String userName;
	private String userHand;
	private String pcName="PC";
	private String pcHand;
	private String result;
	public Jyanken() {

	}
	public Jyanken(String userName,String userHand) {
		this.userName=userName;
		this.userHand=userHand;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getUserHand() {
		return userHand;
	}
	public void setUserHand(String userHand) {
		this.userHand = userHand;
	}
	public String getPcName() {
		return pcName;
	}
	public void setPcName(String pcName) {
		this.pcName = pcName;
	}
	public String getPcHand() {
		return pcHand;
	}
	public void setPcHand(String pcHand) {
		this.pcHand = pcHand;
	}
	public String getResult() {
		return result;
	}
	public void setResult(String result) {
		this.result = result;
	}


}

〇model.JyankenLogic

package model;

public class JyankenLogic {
	public void logic(Jyanken j) {
		String[] hands= {"グー","チョキ","パー"};
		int index=(int)(Math.random()*hands.length);
		j.setPcHand(hands[index]);
		String result;
		if(j.getUserHand().equals(j.getPcHand())) {
			result="DRAW";
		}else if(
				j.getUserHand().equals(hands[0]) && j.getPcHand().equals(hands[1])
				||
				j.getUserHand().equals(hands[1]) && j.getPcHand().equals(hands[2])
				||
				j.getUserHand().equals(hands[2]) && j.getPcHand().equals(hands[0])
				)
		{
			result="WIN!";
		}else {
			result="LOSE";
		}
		j.setResult(result);

	}
}

3.Servlet,Jsp,HTML,CSS
〇controller.JyankenMain.java

package controller;

import java.io.IOException;

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 model.Jyanken;
import model.JyankenLogic;

/**
 * Servlet implementation class JyankenMain
 */
@WebServlet("/main")
public class JyankenMain extends HttpServlet {
	private static final long serialVersionUID = 1L;
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher rd=request.getRequestDispatcher("/WEB-INF/view/form.jsp");
		rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String userName=request.getParameter("userName");
		String hand=request.getParameter("hand");
		Jyanken jk=new Jyanken(userName,hand);
		JyankenLogic jl=new JyankenLogic();
		jl.logic(jk);
		request.setAttribute("jk", jk);
		RequestDispatcher rd=
				request.getRequestDispatcher("/WEB-INF/view/result.jsp");
		rd.forward(request, response);
	}

}

〇/WEB-INF/view/form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="/jyankenapp/css/main.css">
<title>ジャンケンゲーム</title>
</head>
<body>
<div id="container">
<header>Let's じゃんけん!</header>
<div id="main">
<h1>ジャンケンゲーム</h1>
<div class="formBox">
<form action="/jyankenapp/main" method="post">
<label id="nameLabel" for="userName">名前</label>
<input type="text" id="userName" name="userName">
<div class="radioBox">
<label><input type="radio" name="hand" value="グー">グー</label>
<label><input type="radio" name="hand" value="チョキ">チョキ</label>
<label><input type="radio" name="hand" value="パー">パー</label>
</div>
<button type="submit" id="submitBt">いざ勝負!</button>
</form>
</div>
</div>
<footer>&copy;joytas.net</footer>
</div>


</body>
</html>

〇/jyankenapp/css/main.css

#container{
	width:960px;
	margin:0 auto;
	background:#aaa;
}
header{
	box-sizing:border-box;
	text-align:center;
	padding-top:100px;
	padding-bottom:100px;
	font-size:50px;
	background-image:url("../images/header.jpg");
	background-size:cover;

}
#main{
	padding:50px;
}
#main h1{
	text-align: center;
	font-size:40px;
	margin-bottom:30px;
}
.formBox{
	width:500px;
	margin:0 auto;
	border:2px solid #333;
	border-radius:20px;
	padding:30px;
	background:#ddd;
	font-size:28px;
	text-align:center;
}

.radioBox{
	margin-top:20px;

}
#submitBt{
	box-sizing:border-box;
	display:block;
	width:80%;
	height:50px;
	margin:20px auto 10px;
	border-radius:10px;
	border:2px solid #333;
	background:#1b45bb;
	color:white;
	font-size:24px;
}
#submitBt:hover{
	opacity:0.7;
	cursor:pointer;
}
footer{
	text-align:center;
	padding:20px 0;
	background:#444;
	color:white;
	font-size:20px;
}
table{
	width:300px;
	margin:0 auto;
	background:#eee;
}
td,th{
	border:1px solid #555;
	padding:10px 0;
	font-size:30px;
	text-align:center;
}
h2{
	text-align:center;
	font-size:40px;
	margin-top:30px;
}
#retryBt{
	display:block;
	width:200px;
	margin:50px auto;
	padding:10px 0;
	text-align:center;
	border:2px solid #333;
	border-radius:10px;
	background:#1b45bb;
	color:white;
	font-size:40px;
	text-decoration: none;
}
#retryBt:hover{
	opacity:0.7;
}

〇/view/result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="model.Jyanken"%>
<%
Jyanken jk=(Jyanken)request.getAttribute("jk");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="/jyankenapp/css/main.css">
<title>ジャンケンゲーム</title>
</head>
<body>
<div id="container">
<header>Let's じゃんけん!</header>
<div id="main">
<h1>Result</h1>
<table>
<tr><th><%=jk.getUserName() %></th><td><%=jk.getUserHand() %></td></tr>
<tr><th><%=jk.getPcName() %></th><td><%=jk.getPcHand() %></td></tr>
</table>
<h2><%=jk.getResult() %></h2>
<a href="/jyankenapp/main" id="retryBt">Retry</a>
</div>
<footer>&copy;joytas.net</footer>
</div>
</body>
</html>