Presentation is loading. Please wait.

Presentation is loading. Please wait.

Servlet入門(2) 入力フォームをつかったWebアプリ

Similar presentations


Presentation on theme: "Servlet入門(2) 入力フォームをつかったWebアプリ"— Presentation transcript:

1 Servlet入門(2) 入力フォームをつかったWebアプリ
大岩研究会 今野隆平

2 前回やったこと Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った
サーブレットがアプリケーションサーバによって実行される仕組みを知った Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v

3 前回やったこと(1) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った
HTTPを利用して稼動させるサーバ上のアプリケーション アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v

4 前回やったこと(2) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った
WebサーバをWebアプリケーションのために拡張したもの サーブレットの実行環境を実装している サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v

5 前回やったこと(3) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った
サーバ側で動作するJavaのプログラム HTTPリクエストを受け取り何らかの処理をしてHTTPレスポンスで結果を返す Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v

6 前回やったこと(4) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った
Webアプリを作成できるようになった(^^)v Webアプリ用ディレクトリを作成 Webアプリのフォルダ構成を構築 簡単なServletを実装、コンパイル、配置 Webアプリをブラウザから起動!!!! Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v

7 今回の目標 ブラウザからメッセージを送信して、サーブレットでそれを受信する仕組みが説明できるようになる。
HTMLフォームへの入力をServletに送り、なんらかの処理をさせて結果をブラウザに表示するWebアプリを作る。

8 Servletが実行される仕組み(1) ~みんなのイメージでは~
TimeServletを要求 Web Browser Tomcat ??? 現在時刻が表示された! TimeServlet.class

9 Servletが実行される仕組み(2) ~実際に起こっていたこと~
Web Application Server (Tomcat) Http Request GET TimeServlet HTTP/1.0 ①要求 Web Browser Web Server Http Response Header+ Body(<html>… <h1>11:45 JST</h1> …</html>) ⑤結果 ②委託 ④結果 Servlet Engine TimeServlet.class ③実行

10 Servletが実行される仕組み(3) ブラウザがWebサーバに接続し、HTTPリクエストを送信する。
サーブレットコンテナは指定されたサーブレットをリクエスト、レスポンスオブジェクトを引数に実行する。 サーブレットはリクエストオブジェクトを介して要求を受け取り、処理をし、結果をレスポンスオブジェクトを通してWebサーバに返す。 Webサーバは処理結果をレスポンスとしてブラウザに返す。

11 Webアプリに重要なこと Q.Webアプリにとって重要なことって何でした? A.人を幸せにするコンセプトを持っている。
⇒単なる動的なページではだめ!

12 立派なWebアプリへの第一歩 前回のWebアプリは これから作るWebアプリは リクエストがあった日付を表示する。
ユーザーの意志をプログラムに伝えることができない。 これから作るWebアプリは ユーザからのメッセージを受け取り、何らかの処理をして結果を返すインタラクティブなもの。 コンセプトも付けよう。

13 題材:「サブゼミ支援Webアプリ」 「サブゼミ疑問解決掲示板」 Webアプリ: コンセプト: 授業外で生じた疑問をみんなで共有・解決し、
授業の理解を深めて、よりよいサブゼミにする。 概要: 授業外で生じた疑問を質問として掲示板に 投稿。投稿者の疑問を解決できると思う人が 回答を投稿する。 対象: 研究会のみんな 運営: 実際に、サブゼミを支援するために公開します。 みんなでいいものを作ろう!

14 画面遷移図-サブゼミ支援Webアプリ Webアプリの顔 トップページ 投稿の結果が index.html 表示される 投稿画面
ToukouServlet 投稿の結果が 表示される index.html toukou.html 投稿画面 メッセージの送信

15 利用シナリオ-サブゼミ支援Webアプリ 投稿者: 杉浦学 タイトル: web.xmlの冒頭宣言に関する質問 内容:
デモを見てみよう!

16 ブラウザとServletのメッセージ送受信
WebBrowser ApplicationServer GET toukou.html <html> <head> <title>投稿画面</title>… toukou.html POST ToukouServlet 投稿者=“杉浦学”… 杉浦学 <html> <head>… <h2>杉浦学さんの投稿</h2> … ToukouServlet.class

17 HTTP GETとHTTP POST 先ほどの図でGET、POSTと出てきました。役割の違いは何でしょう?
ファイルを取得するための要求。 メッセージを送って、処理した結果のHTMLをもらうための要求。

18 メッセージ送信編

19 メッセージの入力から送信まで GET toukou.html <html> <head>
WebBrowser ApplicationServer GET toukou.html <html> <head> <title>投稿画面</title>… toukou.html POST ToukouServlet 投稿者=“杉浦学”… 杉浦学

20 メッセージを送信する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>..

21 HTMLフォームを使う(1) ~フォームを宣言する~
<form name=“form1” method=“post” action=“../servlet/ToukouServlet”>… “action”・・・メッセージの送信先 メッセージの入力を受け付ける部品を書く(後述)。 メッセージを送信するための部品を書く(後述)。 …</form>

22 HTMLフォームを使う(2) ~メッセージを入力するための部品~
<input type= " text " size= " 20 " name= " contributor " > “name”・・・部品の名前 <textarea name= " content " cols="50" rows="10"></textarea>

23 HTMLフォームを使う(3) ~メッセージを送信するための部品~
<input type= " submit " name= " submit " value= "投稿" > <input type= " reset " name= " reset " value= "リセット" >

24 送信される形式 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誕生以前の手法です。

25 メッセージ送信編 終了 質問どうぞ~

26 メッセージ受信編

27 メッセージの受信から返答まで POST ToukouServlet 投稿者=“杉浦学” <html> <head>…
WebBrowser ApplicationServer POST ToukouServlet 投稿者=“杉浦学” <html> <head>… <h2>杉浦学さんの投稿</h2> … 杉浦学 ToukouServlet.class

28 送られてきたメッセージ すると・・・ アプリケーションサーバ(Tomcat)が ハッシュテーブルにマッピングしてくれる
POST ./servlet/ToukouServlet HTTP/1.1 Length: 64 contributor=杉浦学&title=web.xmlの冒頭宣言 &question= web.xmlの冒頭宣言はなんであんなに… リクエストのメッセージ すると・・・ アプリケーションサーバ(Tomcat)が ハッシュテーブルにマッピングしてくれる

29 ハッシュテーブルとは 文字列を鍵(Key)として値(Value)を取得することができる。 今回の場合。。。
フォームの部品に指定した“name”がKey フォームに入力された文字列がValue Key Value contributor =  杉浦学 title =  web.xmlの冒頭宣言 name =  web.xmlの冒頭宣言はなんで…

30 サーブレット2つの部分 ToukouServlet.java アプリケーションサーバから メッセージを (ハッシュテーブル) 受け取る部分
HTMLを生成する 部分 ブラウザへ

31 メッセージを 受け取る部分 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を生成する 部分

32 メッセージを受け取る準備 ~入力を日本語形式に指定する~
HTMLフォームからのメッセージを受け取る前に、 メッセージのエンコーディングを指定して文字化けを防ぐ。 request.setCharacterEncoding("Shift_JIS");

33 メッセージを受け取る String contributor = request.getParameter("contributor");
送信されたメッセージが格納されたハッシュテーブルから、 キーを指定してバリューを取得し、それぞれの変数に代入する。 String contributor = request.getParameter("contributor"); //キーcontributorのバリューを取得して文字列contributorに入れる String type = request.getParameter("type"); //キーtypeのバリューを取得して文字列typeに入れる String content = request.getParameter(“content"); //キーcontentのバリューを取得して文字列contentに入れる

34 投稿者の例で確認しよう Key Value contributor = 杉浦学 title = web.xmlの冒頭宣言
String contributor = request.getParameter("contributor"); Key Value contributor =  杉浦学 title =  web.xmlの冒頭宣言 name =  web.xmlの冒頭宣言はなんで… 文字列 contributor 杉浦学

35 HTML生成を生成する準備 ~出力を日本語形式に指定する~
出力を日本語形式に指定して、 ブラウザでの文字化けを解消する。 response.setContentType("text/html;charset=Shift_JIS"); レスポンスに文字列を出力するための PrintWriterを取得する。 PrintWriter out = response.getWriter();

36 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>"); //*****ここまででメッセージを表示できた***** *「“」を文字列として出力する場合は注意!「\”」と書きます。

37 メッセージ受信編 終了 質問どうぞ~

38 では、実習です。 ①自分で、コンセプトがあって人が幸せになるような掲示板を考えて、実装しましょう。 ②テキストボックス、テキストエリア以外の
(題材のソースは、配布します。参考にしてください) ②テキストボックス、テキストエリア以外の HTMLフォーム部品を自分の掲示板に加えてください。投稿結果画面にも反映させてください。 (例:題材Webアプリに「質問」、「回答」選択欄)

39 Webアプリの構造(復習) Webアプリのディレクトリ構造を作って関連ファイルを入れましょう。
GimonKaiketu-Web WEB-INF classes ToukouServlet.class lib web.xml html toukou.html index.html

40 補足資料 ~HTMLフォーム部品~ text-テキストボックス textarea-テキストエリア radio-ラジオボタン
checkbox-チェックボックス select-リストボックス submit-送信ボタン reset-リセットボタン その他password、hidden *「とほほWWW入門」に詳細なHTMLリファレンスがあります  

41 お疲れ様でした!!! 今後は、今回作ったWebアプリを拡張していきます。 次回は投稿をファイルに保存する方法を学びます。
わくわくo(^-^)o


Download ppt "Servlet入門(2) 入力フォームをつかったWebアプリ"

Similar presentations


Ads by Google