Java開発環境構築7

※以下はJava開発環境構築1~6が終わった前提で話を進めている。

掲示板の作成

トップ画面と閲覧・投稿画面はJSPで作成し、トップ画面の「記事を読む」というリンクからのリクエストを受け取る閲覧サーブレットと閲覧・投稿画面の「投稿」ボタンからのリクエストを受け取る投稿サーブレットを作る。また、掲示板の1つの記事を保存するための(モデル)クラスと、そのデータとサーブレットとの間を取り持つ(コントローラ)クラスを作成する。SampleWeb0002と同じ手順でプロジェクトを作成する。
プロジェクトの種類は「動的Webプロジェクト」
名前は「SampleWeb0003」

〇「プロジェクト・エクスプローラー」ビューで、SampleWeb0003プロジェクトを選択、右クリック→[新規]→[サーブレット]を選択。次の画面で、
Javaパッケージ「blog」
クラス名「Topic」
と入力し、「完了」ボタンを押す。
掲示板の1記事を保存するための(モデル)クラスTopic.javaを作成する。
これは以下のプロパティー(フィールドおよび対応するセッタ・ゲッタ)を持つ単純なJavaクラスである。
・id 連番
・title タイトル
・content 内容
・postDate 投稿日時

Topic.java

package blog;

import java.util.Date;

/**
* トピックのビーン
*/
public class Topic {

/** 連番 */
private int id;
/** タイトル */
private String title;
/** 内容 */
private String content;
/** 投稿日 */
private Date postDate;

public String toString(){
return super.toString()
+ “,id=” + id
+ “,title=” + title
+ “,content=” + content
+ “,postDate=” + postDate
;
}

//
//単純なセッタ・ゲッタ
//
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Date getPostDate() {
return postDate;
}
public void setPostDate(Date postDate) {
this.postDate = postDate;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}

〇ビジネスロジックを書く
掲示板を処理するメインとなるコントローラクラスを作成する。このクラスでは、
・掲示板の一覧を取得する
・掲示板を投稿する
というビジネスロジックとなるメソッドを定義している。このクラスはnewが不要な唯一のインスタンスとなる、シングルトンクラスとして作っている。

BlogController.java

package blog;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
* 掲示板を操作するビジネスロジック
*/
public class BlogController {

/**
* シングルトンのインスタンス
*/
private static BlogController controller = new BlogController();

/**
* 連番用のカウンタ
*/
private int idCounter;

/**
* 掲示板のリスト
*/
private List<Topic> topics = new ArrayList<Topic>();

/**
* このクラスのインスタンスを取得
* @return BlogControllerのインスタンス
*/
public static BlogController getInstance(){
return controller;
}

private BlogController(){
}

/**
* トピックをポスト(登録)する
* @param topic トピック
*/
public void postTopic(Topic topic){
synchronized(this){
topic.setId(idCounter++);
topic.setPostDate(new Date()); //現在時間
topics.add(topic);
}
}

/**
* 全部のトピックを取得する
* @return トピックのリスト
*/
public List<Topic> getTopics() {
return new ArrayList<Topic>(topics);
}
}

〇サーブレットを作成する
次にユーザーからのリクエストを受け付けるサーブレットを作成する。ReadServletではトピックの一覧を取得し、リクエストスコープにtopicというキーで取得したデータをセットしている。画面遷移先は、/read.jsp
サーブレットのURLへのマッピングはweb.xmlファイルを使わずに、今まで同様@WebServletアノテーションで行う。

ReadServlet.java

package blog;

import java.io.IOException;
import java.util.List;

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(name = “read”, urlPatterns = “/read”)
public class ReadServlet extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
perform(request, response);
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
perform(request, response);
}

protected void perform(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
BlogController ctrl = BlogController.getInstance();
List<Topic> topics = ctrl.getTopics();

request.setAttribute(“topics”, topics);

request.getRequestDispatcher(“/read.jsp”).
forward(request, response);
}
}

〇もう1つのPostServletでは、「投稿」ボタンのリクエストにより送られてくるデータからトピックを作成し投稿処理を行っている。その後、ReadServletにディスパッチ(遷移)している。

PostServlet.java

package blog;

import java.io.IOException;

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(name = “post”, urlPatterns = “/post”)
public class PostServlet extends HttpServlet {

protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
perform(request, response);
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
perform(request, response);
}

protected void perform(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String title = request.getParameter(“title”);
String content = request.getParameter(“content”);
Topic topic = new Topic();
topic.setTitle(title);
topic.setContent(content);
BlogController ctrl = BlogController.getInstance();
ctrl.postTopic(topic);
request.getRequestDispatcher(“/read”).
forward(request, response);
}
}

〇JSPファイルのテンプレートを日本語対応に設定する
アプリの画面表示内容を受け持つJSPを作成する。JSPファイルを作成するにあたって、テンプレートを利用できるが、デフォルトの設定では日本語の文字コードが使えるようになっていない。Eclipseでの設定を変更することにより対応できるので、まずこの設定を行う。
Eclipseのメニューから[ウィンドウ]→[設定]を選ぶと設定画面が表示されるので、左のリストから「Web」→「JSPファイル」を選ぶ。右側の設定画面の「エンコード」項目を「ISO 10646/Unicode(UTF-8)」に変更する(デフォルトでは「ISO Latin-1」になっている)。これで日本語(UTF-8)に対応したテンプレートが使えるようになる。

〇JSPを作成する
JSPを作成していく。index.jspはトップ画面。単に「掲示板を読む」という閲覧画面(ReadServlet)へのリンクがあるだけである。
「プロジェクト・エクスプローラー」ビューでSampleWeb0003プロジェクトのWebContentを選択し、右クリック→[新規]→[JSPファイル]を選択。次の画面でファイル名(index.jsp)を入力し「完了」を押す。表示されるJSPファイルの内容はUTF-8に対応したものとなっている。

index.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>
</head>
<body>
<a href=”read”>掲示板を読む</a>
</body>
</html>

同様に、投稿と閲覧を兼用しているread.jspを作成する。画面上の方に投稿用のフォームがあり、「投稿」ボタンを押してサブミットすると、PostServletが呼ばれる。画面の下の方には、ReadServletでセットされたトピックを取得し、一覧表示している。

read.jsp

<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>
<%@ page import=”blog.Topic,java.util.List”%>
<!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>
</head>
<body>
<h2>掲示板</h2>
<a href=”read”>リロード</a>
<form action=”post” method=”POST”>
<br> タイトル<input type=”text” name=”title” size=”40″>
<br>
<textarea name=”content” rows=”5″ cols=”40″></textarea>
<br> <input type=”submit” value=”投稿”>
</form>
<%
List<Topic> topics = (List<Topic>) request.getAttribute(“topics”);
if (topics != null) {
for (int i = topics.size() – 1; i >= 0; i–){
Topic topic = topics.get(i);
%>
<hr>
タイトル:<%=topic.getTitle()%>
(<%=topic.getPostDate()%>)
<pre><%=topic.getContent()%></pre>
<%
}
}
%>
</body>
</html>

〇エンコードフィルタ
基本的なプログラムはできたが、このままだと日本語が文字化けして表示されてしまう。これを回避し日本語のリクエストを正しく受け付けるために、エンコードフィルタのクラスを作成する。ここでは文字コードをUTF-8固定にしている。
フィルタとしてサーバから呼び出されるよう、クラスにWebFilterアノテーションを付加している。

EncordingFilter.java

package blog;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

/**
* リクエストエンコード用フィルタ
*/
@WebFilter(filterName = “EncordingFilter”, urlPatterns = {“/*”})

public class EncordingFilter implements Filter {
public void init (FilterConfig config)
throws ServletException {
}

public void doFilter(ServletRequest request,
ServletResponse response,
FilterChain chain)
throws IOException, ServletException{
request.setCharacterEncoding(“UTF-8”);
chain.doFilter(request, response);
}

@Override
public void destroy(){
}
}

〇次に「サーバー」ビューでTomcat 9サーバを選択し、右クリック→[追加および除去]を選択。次の画面で使用可能なプロジェクトのSampleWeb0003を選択し、「追加」ボタンを押す。「完了」を押して画面を閉じる。

〇Tomcatを再起動し、
http://localhost:8080/SampleWeb0003/index.jsp
にアクセスしてみる。
閲覧・投稿画面でタイトルと内容を書き込み、「投稿」ボタンを押すと画面の下にそれらの情報が追加で表示されていくのがわかる。
しかし、現状では投稿されたデータをメモリ上に保持しているため、Tomcatを再起動するとデータが消えてしまう。次はデータをデータベースに保存できるようにする。

【引用文献】
JavaデベロッパーのためのEclipse完全攻略[4.x対応版]
石黒 尚久 (著), 永井 正昭 (著), テクニカル書籍編集部 (著)

コメントを残す

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