(25)【Eclipse2022】動的Webプロジェクトで入力フォーム(JSP)と応答画面(Servlet)を作成

投稿者: | 2022年11月16日

447 views

この記事は最終更新から 756日 が経過しています。

1. やりたいこと

表題の通り、以下の二つの Webページを作りたい。
ページ#1 : 名前と電話番号を入力する画面 ← JSPで実装
ページ#2 : 入力を受け付けたことを確認する応答画面 ← Servletで実装

2. やってみた

Step 1 : Eclipseで動的Webプロジェクトを新規作成

「ファイル」-「新規作成」-「動的Webプロジェクト」メニューを選択し、適当な名前を付ける。
ここではプロジェクト名を Test006 とした。

Step 2 : JSPファイルを新規作成

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Form</title>
</head>
<body>

<form action="/Test006/apply" method="post">
<p>名前 : <input type="text" name="name"></p>
<p>電話番号 : <input type="text" name="tel"></p>
<p><input type="submit" value="決定"></p>
</form>

</body>
</html>

Step 3 : Java Servletファイルを新規作成

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class apply
 */
@WebServlet("/apply")
public class apply extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	* @see HttpServlet#HttpServlet()
	*/
	public apply() {
		super();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		String tel  = request.getParameter("tel");
	
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.println("name: " + name);
		out.println("tel: " + tel);
	}
}

Step 4 : Tomcatとプロジェクトの関連付け

・サーバーペインで使用する Tomcatを選択
・ポップアップメニューを開き「追加及び除去」メニューを選択
・現在開発中のプロジェクト Test006 を追加する。

Step 5 : サーバーを実行

Step 5 : Webブラウザから入力画面にアクセス

JSPで作成した入力ページを指定する。
http://localhost:8080/Test006/form.jsp

決定ボタンを押下すると、HTTP POSTリクエストが発行され、Servletで作成したプログラムが応答を返す。

OK!
Post送信した内容がサーバー側に渡り、ServletによってPost内容を含んだページが作成・出力され、Webブラウザ側に届いた。

3. Servletと JSPの使い分け

MVC で分けるならば…

Model: Java
View: JSP
Controller: Servlet

wiki MVCモデル

そこで↓↓↓

応用

Viewは JSPにやらせる という方針であれば…
上述の Servletで応答を作成している個所を JSPに置き換えようと思う。

そこで…
Controller(Servlet)から View(JSP)に forwardして表示出力させる方法に変更してみる。

改造1: 応答出力用の JSPを新規作成

Eclipse上で JSPファイル response.jsp を新規作成する。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ page import="mypcg.person" %>
<% person psn = (person)request.getAttribute("person"); %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%= psn.getName() %> の電話番号は <%= psn.getTel() %> です。
</body>
</html>

改造2: Controller(Servlet)から Viewer(JSP)に request scopeを使ってユーザー引数を受け渡す。

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 mypcg.person;

/**
 * Servlet implementation class apply
 */
@WebServlet("/apply")
public class apply extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public apply() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		String tel  = request.getParameter("tel");

		person psn = new person(name, tel);
		request.setAttribute("person", psn);

		RequestDispatcher disp = request.getRequestDispatcher("/WEB-INF/jsp/resp.jsp");
		disp.forward(request, response);
	}
}

受け渡しに使用するオブジェクトは JavaBeans で実装する。

package mypcg;
import java.io.Serializable;

public class person implements Serializable{
	private String m_name;
	private String m_tel;

	public person() {}
	public person(String name, String tel) {
		this.m_name = name;
		this.m_tel = tel;
	}

	public String getName() { return this.m_name;}
	public void setName(String name) { this.m_name = name;}
	public String getTel() { return this.m_tel;}
	public void setTel(String tel) { this.m_tel = tel;}
}

コメントを残す

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


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)