4回目の続きとなります。
まだ読んでいない方は是非どうぞ。
タイトル通り、ページ遷移を行いたいと思います。
簡単な流れとして、「最初はグー」のページを作成し、手を選択すると結果ページへ遷移させます。
結果ページは既にできていますので、「最初はグー」のページを作成するだけです。
まだ結果ページを作成していない方は、こちらの記事1〜ご覧ください。
StartJanken.jspの作成
新しくJSPファイルを作成します。
「WebContent」上で右クリックし「新規」→「JSPファイル」をクリックして下さい。
「JSPファイル」がない場合は「その他」から探してみて下さい。
本記事では「StartJanken.jsp」とします。
「WebContent」直下に作成することを確認し、「完了」をクリックして下さい。
今回は少しゲームっぽくしたいと思っていますので、「手」の画像を使います。
下図イメージになります。
かなりちゃっちいですけど許して下さい。
イメージの保存
「WebContent」上で右クリックし「新規」→「フォルダー」をクリックして下さい。
ファイル名を「img」をとします。
私は既に作成済みですので「存在します」となっています。
入力を終えたら「完了」をクリックして下さい。
次にジャンケンの画像を今作成した「img」フォルダに保存します。
画像名を
・「グー」→0
・「チョキ」→1
・「パー」→2
としています。
察しの良い方はこの画像名で何をしようとしているかわかるはずです。
下図のように保存できればOKです。
これで下準備が整いましたので、StartJanken.jspの編集に取り掛かりたいと思います。
StartJanken.jspの編集
構成は、Janken.jspとほぼ同じです。
リンクが画像になっただけです。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ジャンケン対決</title>
<script type="text/javascript" src="./js/method.js"></script>
</head>
<body>
<form name="janken" action="JankenServlet" method="get">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 text-center">
<p>最初はグーーー(PCの手)</p>
<img alt="pcHand" src="./img/0.gif">
<p>最初はグーーー(あなたの手)</p>
<img alt="userHand" src="./img/0.gif">
<p>あなたの手を選んでください</p>
<input type="hidden" name="hand" value="" />
<a href="javaScript:select('0')"><img alt="グー" src="./img/0.gif"></a>
<a href="javaScript:select('1')"><img alt="チョキ" src="./img/1.gif"></a>
<a href="javaScript:select('2')"><img alt="パー" src="./img/2.gif"></a>
</div>
</div>
</div>
</form>
</body>
</html>ついでに、プロジェクトからプログラムを実行できるようにしましょう。
web.xmlの編集
次は「web.xml」を作成します。
「WebContent/WEB-INF」の直下に「web.xml」を作成して下さい。
今回は「WebContent」直下じゃないので気をつけて下さい。
「WEB-INF」上で右クリック→「新規」→「ファイル」をクリックします。
ファイル名を「web.xml」と入力し「完了」をクリックして下さい。
下図のように編集します。
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<display-name>Janken</display-name>
<welcome-file-list>
<welcome-file>StartJanken.jsp</welcome-file>
</welcome-file-list>
</web-app>これでプロジェクトから実行できるようになります。
それでは実行しましょう！
実行
「Janken」プロジェクト上で右クリック→「実行」→「サーバーで実行」をクリックします。
ローカルホストにアクセスして下さい。
http://localhost:8080/Janken/JankenServletこのように表示できれいればOKです。
手を選択してみて下さい。
前回記事までに作ったページが出力されてればOKです！
私はグーを出しましたが負けました。。
ページ遷移しっかりできたでしょうか。
次回は、結果のページにも画像を適用して、勝敗履歴を表示したいと思います。
本記事最後までご覧いただきありがとうございました。
コメント