8月28日

今までの復習をかねて、最初からWebアプリをつくってみる。

プロジェクト:exam

ID、受験番号、成績を格納するDBを作成する。
受験番号と成績を入力したら、DBに登録する。
受験番号を入力し、成績を検索する。

Springプロジェクトを作成する

テキストp.40~p.44と6月2日のページを参考にする。
プロジェクトを作成し、http://locahost:8080/exam/ にアクセスすると、Click to enter を表示する。

プロジェクトの更新

exam プロジェクトを右クリックし、[Maven]-[プロジェクトの更新]を選択。

Mavenインストール

exam プロジェクトを右クリックし、[実行]-[Maven install]を選択。

Webアプリの実行

サーバータブでTomcatサーバーを起動。
サーバータブで起動したTomcatサーバーにexamアプリを追加。
http://localhost:8080/exam/ にアクセスする。

検索画面を作る

HomeControllerを作成する。(p.163)
home.jspを作成する。(テキストではshowMessage.jspを表示している)
mvc-config.xmlを修正する。(p.167)

HomeController.java

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class HomeController {

	@RequestMapping(value = "/home", method = RequestMethod.GET)
	public String home(Model model) {
		model.addAttribute("title", "成績の検索");
		return "home";
	}
}

home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${title}</title>
</head>
<body>

<h1>${title}</h1>

</body>
</html>

文字化け対策をする

テキストp.187を参照し、CharacterEncodingFilterを追加する。

入力フォームを作成する

home.jsp に受験番号を入力するフォームを追加する。

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${title}</title>
</head>
<body>

<h1>${title}</h1>

<p>受験番号を入力してください</p>
<form action="/exam/home" method="post">
    <input type="text" name="number" />
    <input type="submit" />
</form>

</body>
</html>

exam-1

コントローラで検索リクエストを受け取る

HomeController.java に query() メソッドを追加する。
検索結果は result.jsp で表示する。
リクエストパラメータは @RequestParam で受け取る。
得点は適当な値を設定しておく。

検索結果を表示する

result.jsp で検索結果を表示する。まだデータベースがないので、HomeControllerで適当な値を設定しておく。

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${title}</title>
</head>
<body>

<h1>${title}</h1>
<p>
受験番号 ${number} の得点は ${score} です。
</p>

<a href="/exam/home">戻る</a>
</body>
</html>

exam-2

データ登録画面を作成する

edit.jsp

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${title}</title>
</head>
<body>

<h1>${title}</h1>

<p>受験番号と得点を入力してください</p>
<form action="/exam/edit">
受験番号<input type="text" name="number"/>
得点<input type="number" name="score" />
<br/>
<input type="submit" value="登録"/>
</form>
</body>
</html>

データ登録画面を表示するためのコントローラを作成する

EditController.java では、http://localhost:8080/exam/edit をリクエストされたら、edit.jsp を表示する。

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class EditController {

	@RequestMapping(value = "/edit", method = RequestMethod.GET)
	public String home(Model model) {
		model.addAttribute("title", "成績の入力");
		return "edit";
	}
}

データ登録画面を表示する

http://localhost:8080/exam/edit にアクセスすると、データ登録画面を表示する。

exam-4

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です