サーブレットJSPを学びましょう。
サーブレットJSPを学ぼう！！＃8
1. フォームの基本
一般的なアプリケーションは、ユーザーがデータ入力できる仕組みを持ちます。
Webアプリケーションではフォームでそれを実現します。
フォームを使うとWebページに入力したデータをサーバサイドプログラムに送信できます。
このフォームは検索サイトやショッピングサイトなどのほとんどのWebサイトでつかわれており、Webアプリケーションには欠かせない存在です。
まずは「検索」を襟に、フォームの大まかな仕組みを理解しましょう。
ユーザーが送信ボタンをクリックすると、ユーザーが入力したデータはリクエストとともにアプリケーションサーバへ送られます。
アプリケーションサーバはリクエストされたサーバサイドプログラムを実行し、その際に、送られてきたデータを渡します。
サーバサイドプログラムはわたされたデータを使用して処理を行います。
1-1. フォームの構造
フォームは複数のHTMLのタグを組み合わせ作成しますが、フォームの小僧を理解すれば簡単に作成することができます。
下記に簡単なフォームの例をあげるのでフォームの構造とタグの関係を理解していきましょう！
Webページにある入力項目のひとまとまりが「フォーム」です。
フォーム自体はブラウザに表示されません。
フォームの中には、データ入力や送信のための部品を配置します。
この例では「テキストボックス」「ラジオボタン」「送信ボタン」の３種類の部品が入っています。
この構造をタグで書くと下記のコードのようになります。
下記に簡単なフォームの例をあげるのでフォームの構造とタグの関係を理解していきましょう！
Webページにある入力項目のひとまとまりが「フォーム」です。
フォーム自体はブラウザに表示されません。
フォームの中には、データ入力や送信のための部品を配置します。
この例では「テキストボックス」「ラジオボタン」「送信ボタン」の３種類の部品が入っています。
この構造をタグで書くと下記のコードのようになります。
<form action="FormServlet" method="post">
名前；<input type="text" name="name"><br>
デイ別：
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1"><br>
<input type="submit" value=""送信>
</form>1-2. フォームの部品
HTMLには、データ入力や送信のための部品が用意されています。
各部品はタグを使って作成します。
部品作成自体はタグをかくだけなので難しくありませんが、部品の識別名には注意が必要です。
各部品には識別のために固有の名前つけます。
名前を付け忘れたり、複数の部品で重複する名前をつけたりすると、正しくデータ意を送信することが出来ません。
今回は、代表的な３つの部品を作成するタグを紹介します。
入力したテキストの値が送信されます。
name属性の値が同じものが１つの選択肢のグループになります。
選択したボタンのvalue属性の値が送信されます。
フォームに最低１つは必要です。
各部品はタグを使って作成します。
部品作成自体はタグをかくだけなので難しくありませんが、部品の識別名には注意が必要です。
各部品には識別のために固有の名前つけます。
名前を付け忘れたり、複数の部品で重複する名前をつけたりすると、正しくデータ意を送信することが出来ません。
今回は、代表的な３つの部品を作成するタグを紹介します。
①テキストボックス
１行のテキストにゅうりょくできる部品です。入力したテキストの値が送信されます。
<input type=”text” name=”名前”>②ラジオボタン
１つの選択肢のグループの中から、１つだけを選択する部品です。name属性の値が同じものが１つの選択肢のグループになります。
選択したボタンのvalue属性の値が送信されます。
<input type=”radio” name=”名前”value=”値”>③送信ボタン
クリックするとフォームに入力したデータを送信します。フォームに最低１つは必要です。
<input type=”submit”value=”送信”>1-3. フォームの作成
フォームはformタグで作成します。
このformタグの内容に上記のコードにフォームの部品を書きます。
formのタグの外に部品を書くと、その値の部品は送信されないので注意してください。
なお一つのformタグに入れる送信ボタンは原則１つにします。
２つ以上作成すると、混乱を招くことがあります。
また、formタグではaction属性、method属性をつかって送信に関する情報を指定する必要があります。
action属性には送信先となるサーバサイドプログラムを指定します。
フォームないの送信ボタンをクリックするとブラウザはこの属性にして舌先をリクエストすると同時にデータを送信します。
リクエストを受けたサーバサイドプログラム亜hリクエストとともに送信されたきたデータを実行時に所得出来ます。
method属性にはリクエストメソッドをしていした、送信先のサーバサイドプログラムへのリクエストをGETリクエストにするかPOSTリクエストにするかを選択します。
1-4. データ送信の仕組み
フォームの送信ボタンをクリックすると、フォームの部品に入力したデータは「部品名=値」の形式で送信されます。
この形式をリクエストパラメータと言います。
リクエストパラメータは、送信の際に「ＵＲＬエンコード」という変換処理が行われます。
ここでは変換処理の詳しい貝瀬を割愛しますが、ＵＲＬエンコードはブラウザ使用する文字コードをもとに行われます。
そのため、へんかんされリクエストパラメータを受け取ったサーバーサイドプログラムでは、ＵＲＬ円コードに使用された文字コードと同じ文字コードを使って元に戻す必要があります。
1-5. GETリクエストとPOSTリクエスト
リクエストパラメータを送信するリクエストのリクエストメソッドには、ＧＥＴまたはＰＯＳＴを使用します。
どちらのリクエストメソッドを使用するかは、フォームの作成者がformタグのmethod属性で決定します。
ＧＥＴリクエストは新しい情報を所得するような場面でしようしＰＯＳＴリクエストはフォームに入力した情報を登録すような場目で使用するという決まりになっています、フォームの作成者は、フォームのリクエスト先のプログラムが受け取ったリクエストパラメータをつかって何を行うかで、ＧＥＴかＰＯＳＴかを選択する必要があります。
1-6. サーブレットクラスでリクエストパラメータの値を取得
まず、サーブレットクラスでリクエストパラメータを所得する例を見てみましょう。
下記のコードは送信されるリクエストパラメータを所得するサーブレットクラスです。
下記のコードは送信されるリクエストパラメータを所得するサーブレットクラスです。
@WebServlet("/FormServlet")
public class FormServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//リクエストパラメータの文字コードを指定
request.setCharacterEncoding("UTF-8");・・・①
//リクエストパラメータの所得
String name = request.getParameter("name");
String gender = request.getParameter("gender");・・・②
//以降は省略
}
}①リクエストパラメータの文字コードを指定する
URLエンコードで変換されたリクエストパラメータをもとに戻すためにURLエンコードで使用した文字コードをsetCharacterEncording()の引数に指定します。②getParameter()でリクエストパラメータの値を所得
例えばリクエストパラメータ「name-minato」の値「minato」を所得するには、リクエストパラメータの名前である「name」を引数に指定します。2. フォームを使ったプログラムの作成
今回は、フォームを利用した「ユーザー登録もどき」を作っていきたいと思います。
もそきなので、実際にはファイルやデータベースにデータを記録しません。
これまで練習してきたものよりも少し規模が大きくなるので、画面の様子から見ていきます。
2-1. プログラムを作成する
今回は、フォームを利用した「ユーザー登録もどき」を作っていきたいと思います。
もそきなので、実際にはファイルやデータベースにデータを記録しません。
これまで練習してきたものよりも少し規模が大きくなるので、画面の様子から見ていきます。
もそきなので、実際にはファイルやデータベースにデータを記録しません。
これまで練習してきたものよりも少し規模が大きくなるので、画面の様子から見ていきます。
2-2. プログラムを作成する
全体像のイメージがつかめたら、下記のコードのJSPファイルform.JSP」を動的Webプロジェクト「example」のwebappの直下に作成してください。
登録情報入力画面をレスポンスするJSPファイル
次に動的Webプロジェクト「example」に「servlet.FormServlet」を作成しましょう。
Eclipseを用いてdoPost()を持つサーブレットクラスを作成するにはサーブレットクラスの作成時にdoGet()ではなくdoPost()にチェックを入れてください。
登録結果画面をレスポンスするサーブレットクラス
登録情報入力画面をレスポンスするJSPファイル
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー登録練習</title>
</head>
<body>
<form action="FormServler" method="post">
名前：<br>
<input type="text" name="name"><br>
性別：<br>
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<input type="submit" value="登録">
</form>
</body>
</html>次に動的Webプロジェクト「example」に「servlet.FormServlet」を作成しましょう。
Eclipseを用いてdoPost()を持つサーブレットクラスを作成するにはサーブレットクラスの作成時にdoGet()ではなくdoPost()にチェックを入れてください。
登録結果画面をレスポンスするサーブレットクラス
package 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 Formervlet
*/
@WebServlet("/FormServlet")
public class FormServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//リクエストパラメータをチェック
request.setCharacterEncoding("UTF-8");
String name = request.ge