Servlet入門(2) 入力フォームをつかったWebアプリ
Download
Report
Transcript Servlet入門(2) 入力フォームをつかったWebアプリ
Servlet入門(2)
入力フォームをつかったWebアプリ
大岩研究会 今野隆平
[email protected]
前回やったこと
Webアプリとは何かを知った
アプリケーションサーバとは何かを知った
サーブレットとは何かを知った
サーブレットがアプリケーションサーバに
よって実行される仕組みを知った
Webアプリを作成できるようになった(^^)v
前回やったこと(1)
Webアプリとは何かを知った
– HTTPを利用して稼動させるサーバ上のアプ
リケーション
アプリケーションサーバとは何かを知った
サーブレットとは何かを知った
Webアプリを作成できるようになった(^^)v
前回やったこと(2)
Webアプリとは何かを知った
アプリケーションサーバとは何かを知った
– WebサーバをWebアプリケーションのために拡
張したもの
– サーブレットの実行環境を実装している
サーブレットとは何かを知った
Webアプリを作成できるようになった(^^)v
前回やったこと(3)
Webアプリとは何かを知った
アプリケーションサーバとは何かを知った
サーブレットとは何かを知った
– サーバ側で動作するJavaのプログラム
– HTTPリクエストを受け取り何らかの処理をし
てHTTPレスポンスで結果を返す
Webアプリを作成できるようになった(^^)v
前回やったこと(4)
Webアプリとは何かを知った
アプリケーションサーバとは何かを知った
サーブレットとは何かを知った
Webアプリを作成できるようになった(^^)v
– Webアプリ用ディレクトリを作成
– Webアプリのフォルダ構成を構築
– 簡単なServletを実装、コンパイル、配置
– Webアプリをブラウザから起動！！！！
今回の目標
ブラウザからメッセージを送信して、
サーブレットでそれを受信する仕組み
が説明できるようになる。
–HTMLフォームへの入力をServletに送
り、なんらかの処理をさせて結果をブラ
ウザに表示するWebアプリを作る。
Servletが実行される仕組み(1)
~みんなのイメージでは~
TimeServletを要求
Web
Browser
Tomcat
現在時刻が表示され
た！
？？？
TimeServlet.class
Servletが実行される仕組み(2)
~実際に起こっていたこと~
①要求
Http Request
Web Application Server
(Tomcat)
GET TimeServlet HTTP/1.0
Web
Browser
⑤結果
Http Response
Header+
Body(<html>…
<h1>11:45 JST</h1>
…</html>)
Web Server
④結果
②委託
Servlet Engine
TimeServlet.class③実行
Servletが実行される仕組み(3)
①
②
③
④
⑤
ブラウザがWebサーバに接続し、HTTPリクエ
ストを送信する。
Webサーバはリクエストを受け取り、サーブ
レットエンジンに処理を委託する。
サーブレットコンテナは指定されたサーブレット
をリクエスト、レスポンスオブジェクトを引数に
実行する。
サーブレットはリクエストオブジェクトを介して要
求を受け取り、処理をし、結果をレスポンスオ
ブジェクトを通してWebサーバに返す。
Webサーバは処理結果をレスポンスとしてブラ
ウザに返す。
Webアプリに重要なこと
Q.Webアプリにとって重要なことって何でした？
A.人を幸せにするコンセプトを持っている。
⇒単なる動的なページではだめ！
立派なWebアプリへの第一歩
前回のWebアプリは
– リクエストがあった日付を表示する。
– ユーザーの意志をプログラムに伝えること
ができない。
これから作るWebアプリは
– ユーザからのメッセージを受け取り、何らかの
処理をして結果を返すインタラクティブなもの。
– コンセプトも付けよう。
題材：「サブゼミ支援Webアプリ」
Webアプリ：
「サブゼミ疑問解決掲示板」
コンセプト： 授業外で生じた疑問をみんなで共有・解決し、
授業の理解を深めて、よりよいサブゼミにする。
概要： 授業外で生じた疑問を質問として掲示板に
投稿。投稿者の疑問を解決できると思う人が
回答を投稿する。
対象： 研究会のみんな
運営： 実際に、サブゼミを支援するために公開します。
みんなでいいものを作ろう！
画面遷移図-サブゼミ支援Webアプリ
Webアプリの顔
トップページ
index.html
投稿画面
投稿の結果が
表示される
メッセージの送信
toukou.html
ToukouServlet
利用シナリオ-サブゼミ支援Webアプリ
投稿者： 杉浦学
タイトル： web.xmlの冒頭宣言に関する質問
内容： web.xmlの冒頭宣言はなんであんな
に長いんですか？？ちょっと気に
なったので質問してみました。
デモを見てみよう！
ブラウザとServletのメッセージ送受信
ApplicationServer
WebBrowser
GET toukou.html
<html> <head>
<title>投稿画面</title>…
POST ToukouServlet
投稿者=“杉浦学”…
杉浦学
toukou.html
<html> <head>…
<h2>杉浦学さんの投稿</h2> …
ToukouServlet.class
HTTP GETとHTTP POST
先ほどの図でGET、POSTと出てきました。
役割の違いは何でしょう？
HTTP GET ファイルを取得するための要求。
メッセージを送って、処理し
HTTP POST た結果のHTMLをもらうため
の要求。
メッセージ送信編
メッセージの入力から送信まで
ApplicationServer
WebBrowser
GET toukou.html
<html> <head>
<title>投稿画面</title>…
toukou.html
杉浦学
POST ToukouServlet
投稿者=“杉浦学”…
メッセージを送信するHTMLフォーム
..<form name="form1" method="post“
action="../servlet/ToukouServlet">
<font size=“+1”>投稿者：</font>
<input type="text" size="20" name="contributor">
<font size="+1">タイトル：</font>
<input type="text" size="50" name="title" >
<font size="+1">内容：</font>
<textarea name=“content" cols="50" rows="10">
</textarea>
<input type=“submit” name=“submit” value=“投稿”>
<input type=“reset” name=“reset” value=“リセット”>
</form>..
HTMLフォームを使う(1)
~フォームを宣言する~
<form name=“form1” method=“post”
action=“../servlet/ToukouServlet”>…
“action”・・・メッセージの送信先
メッセージの入力を受け付ける部品を書く(後述)。
メッセージを送信するための部品を書く(後述)。
…</form>
HTMLフォームを使う(2)
~メッセージを入力するための部品~
<input type= " text " size= " 20 "
name= " contributor " >
<textarea name= " content "
cols="50" rows="10"></textarea>
“name”・・・部品の名前
HTMLフォームを使う(3)
~メッセージを送信するための部品~
<input type= " submit "
name= " submit " value= "投稿" >
<input type= " reset " name= " reset "
value= "リセット" >
送信される形式
HTTP POSTで送ったメッセージは
POST ../servlet/ToukouServlet HTTP/1.1
Length: 64
contributor=杉浦学＆title＝web.xmlの冒頭宣言
&question= web.xmlの冒頭宣言はなんであんなに…
のような形式で送られます。
＊HTTP GETでもメッセージを送ることができます。その場合、
GET ./servlet/ToukouServlet?contributor=杉浦学&title=web.xml… HTTP/1.1
のようにメッセージがURLに付加されて送信されます。
これは、HTTP POST誕生以前の手法です。
メッセージ送信編 終了
質問どうぞ～
メッセージ受信編
メッセージの受信から返答まで
ApplicationServer
WebBrowser
POST ToukouServlet
投稿者=“杉浦学”
<html> <head>…
<h2>杉浦学さんの投稿</h2> …
杉浦学
ToukouServlet.class
送られてきたメッセージ
POST ./servlet/ToukouServlet HTTP/1.1
Length: 64
リクエストのメッセージ
contributor=杉浦学＆title＝web.xmlの冒頭宣言
&question= web.xmlの冒頭宣言はなんであんなに…
すると・・・
アプリケーションサーバ(Tomcat)が
ハッシュテーブルにマッピングしてくれる
ハッシュテーブルとは
文字列を鍵(Key)として値(Value)を取得す
ることができる。
今回の場合。。。
– フォームの部品に指定した“name”がKey
– フォームに入力された文字列がValue
Key
Value
contributor = 杉浦学
title
= web.xmlの冒頭宣言
name
= web.xmlの冒頭宣言はなんで…
サーブレット2つの部分
ToukouServlet.java
アプリケーションサーバから
(ハッシュテーブル)
ブラウザへ
メッセージを
受け取る部分
HTMLを生成する
部分
public class ToukouServlet extends HttpServlet {
/**
* doPost() メソッドは、POSTリクエストがブラウザー
* からプログラムに発信されたときに呼び出されるメソッド
**/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException{
//*****ここからメッセージを受信するための部分*****
/**
* HTMLフォームからのメッセージを受け取る前に、
* メッセージのエンコーディングを指定して文字化けを防ぐ。
**/
request.setCharacterEncoding("Shift_JIS");
/**
* 送信されたメッセージが格納されたハッシュテーブルから、
* キーを指定してバリューをそれぞれの変数に格納する
**/
String contributor = request.getParameter("contributor");
//キーcontributorのバリューを取得して文字列contributorに入れる
String title = request.getParameter("title");
//キーtitleのバリューを取得して文字列titleに入れる
String content = request.getParameter("content");
//キーcontentのバリューを取得して文字列contentに入れる
//*****ここまででメッセージを受信できた*****
メッセージを
受け取る部分
//*****ここからがメッセージを表示する為の部分*****
//出力を日本語形式に指定して、ブラウザでの文字化けを解消する。
response.setContentType("text/html;charset=Shift_JIS");
//データの出力に必要なPrintWriterを作成する。
PrintWriter out = response.getWriter();
//**HTMLタグと受信したメッセージを出力する**/
out.println("<html>");
out.println("<body bgcolor=\"#33CCFF\" text=\"#000000\">");
out.println("<hr>");
//投稿者と現在の日付を出力する。
out.print("<b><font size=4><p>"+contributor+"さんの投稿</font></b>");
out.print("(投稿時刻："+ new java.util.Date() + ")<BR/></p>");
//タイトルを出力する。
out.println("<p><font size=5 color=\"#00339\"></font><font size=5>"+title+"</font></p><hr/>");
//内容を出力する
out.println(content+"</p><hr/>");
out.println("</body>");
out.println("</html>");
//*****ここまででメッセージを表示できた*****
}
}
HTMLを生成する
部分
メッセージを受け取る準備
~入力を日本語形式に指定する~
HTMLフォームからのメッセージを受け取る前に、
メッセージのエンコーディングを指定して文字化けを防ぐ。
request.setCharacterEncoding("Shift_JIS");
メッセージを受け取る
送信されたメッセージが格納されたハッシュテーブルから、
キーを指定してバリューを取得し、それぞれの変数に代入する。
String contributor = request.getParameter("contributor");
//キーcontributorのバリューを取得して文字列contributorに入れる
String type = request.getParameter("type");
//キーtypeのバリューを取得して文字列typeに入れる
String content = request.getParameter(“content");
//キーcontentのバリューを取得して文字列contentに入れる
投稿者の例で確認しよう
String contributor = request.getParameter("contributor");
Key
Value
contributor = 杉浦学
title
= web.xmlの冒頭宣言
name
= web.xmlの冒頭宣言はなんで…
杉浦学
文字列
contributor
HTML生成を生成する準備
~出力を日本語形式に指定する~
出力を日本語形式に指定して、
ブラウザでの文字化けを解消する。
response.setContentType("text/html;charset=Shift_JIS");
レスポンスに文字列を出力するための
PrintWriterを取得する。
PrintWriter out = response.getWriter();
HTML生成を生成する
//**HTMLタグと受信したメッセージを出力する**/
out.println("<html>");
out.println("<body bgcolor=\"#33CCFF\" text=\"#000000\">");
out.println("<hr>");
//投稿者と現在の日付を出力する。
out.print(“<b><font size=4><p>”+contributor+“さんの投稿</font></b>");
out.print("(投稿時刻："+ new java.util.Date() + ")<BR/></p>");
//タイトルを出力する。
out.println("<p><font size=5>"+title+"</font></p><hr/>");
//内容を出力する
out.println(content+"</p><hr/>");
out.println("</body>");
out.println("</html>");
//*****ここまででメッセージを表示できた*****
＊「“」を文字列として出力する場合は注意！「\”」と書きます。
メッセージ受信編 終了
質問どうぞ～
では、実習です。
①自分で、コンセプトがあって人が幸せになる
ような掲示板を考えて、実装しましょう。
（題材のソースは、配布します。参考にしてください）
②テキストボックス、テキストエリア以外の
HTMLフォーム部品を自分の掲示板に加えてくだ
さい。投稿結果画面にも反映させてください。
（例：題材Webアプリに「質問」、「回答」選択欄）
Webアプリの構造（復習）
Webアプリのディレクトリ構造を作って関連ファイルを入れましょう。
（Webアプリ名は題材の例なので、自分のものに変えてください。）
GimonKaiketu-Web
WEB-INF
classes
ToukouServlet.class
lib
web.xml
html
index.html
toukou.html
補足資料
~HTMLフォーム部品~
text-テキストボックス
textarea-テキストエリア
radio-ラジオボタン
checkbox-チェックボックス
select-リストボックス
submit-送信ボタン
reset-リセットボタン
その他password、hidden
＊「とほほWWW入門」に詳細なHTMLリファレンスがあります
http://tohoho.wakusei.ne.jp/www.htm
お疲れ様でした！！！
今後は、今回作ったWebアプリを拡張していきます。
次回は投稿をファイルに保存する方法を学びます。
わくわくo(＾-＾)o