Servlet入門(2) 入力フォームをつかったWebアプリ 大岩研究会 今野隆平 s00395rk@sfc.keio.ac.jp
前回やったこと Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った サーブレットがアプリケーションサーバによって実行される仕組みを知った Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v
前回やったこと(1) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った HTTPを利用して稼動させるサーバ上のアプリケーション アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v
前回やったこと(2) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った WebサーバをWebアプリケーションのために拡張したもの サーブレットの実行環境を実装している サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v
前回やったこと(3) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った サーバ側で動作するJavaのプログラム HTTPリクエストを受け取り何らかの処理をしてHTTPレスポンスで結果を返す Webアプリを作成できるようになった(^^)v Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v
前回やったこと(4) Webアプリとは何かを知った アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v Webアプリ用ディレクトリを作成 Webアプリのフォルダ構成を構築 簡単なServletを実装、コンパイル、配置 Webアプリをブラウザから起動！！！！ Webアプリとは何かを知った WebすなわちWWWは、HTML、HTTP、URLという方式を使った遠隔ファイル閲覧システムです。そのサーバー上でアプリケーションを稼動させるのがWebアプリケーションです。(IBM) アプリケーションサーバとは何かを知った サーブレットとは何かを知った Webアプリを作成できるようになった(^^)v
今回の目標 ブラウザからメッセージを送信して、サーブレットでそれを受信する仕組みが説明できるようになる。 HTMLフォームへの入力をServletに送り、なんらかの処理をさせて結果をブラウザに表示するWebアプリを作る。
Servletが実行される仕組み(1) ~みんなのイメージでは~ TimeServletを要求 Web Browser Tomcat ？？？ 現在時刻が表示された！ TimeServlet.class
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 ③実行
Servletが実行される仕組み(3) ブラウザがWebサーバに接続し、HTTPリクエストを送信する。 サーブレットコンテナは指定されたサーブレットをリクエスト、レスポンスオブジェクトを引数に実行する。 サーブレットはリクエストオブジェクトを介して要求を受け取り、処理をし、結果をレスポンスオブジェクトを通してWebサーバに返す。 Webサーバは処理結果をレスポンスとしてブラウザに返す。
Webアプリに重要なこと Q.Webアプリにとって重要なことって何でした？ A.人を幸せにするコンセプトを持っている。 ⇒単なる動的なページではだめ！
立派なWebアプリへの第一歩 前回のWebアプリは これから作るWebアプリは リクエストがあった日付を表示する。 ユーザーの意志をプログラムに伝えることができない。 これから作るWebアプリは ユーザからのメッセージを受け取り、何らかの処理をして結果を返すインタラクティブなもの。 コンセプトも付けよう。
題材：「サブゼミ支援Webアプリ」 「サブゼミ疑問解決掲示板」 Webアプリ： コンセプト： 授業外で生じた疑問をみんなで共有・解決し、 授業の理解を深めて、よりよいサブゼミにする。 概要： 授業外で生じた疑問を質問として掲示板に 投稿。投稿者の疑問を解決できると思う人が 回答を投稿する。 対象： 研究会のみんな 運営： 実際に、サブゼミを支援するために公開します。 みんなでいいものを作ろう！
画面遷移図-サブゼミ支援Webアプリ Webアプリの顔 トップページ 投稿の結果が index.html 表示される 投稿画面 ToukouServlet 投稿の結果が 表示される index.html toukou.html 投稿画面 メッセージの送信
利用シナリオ-サブゼミ支援Webアプリ 投稿者： 杉浦学 タイトル： web.xmlの冒頭宣言に関する質問 内容： デモを見てみよう！
ブラウザとServletのメッセージ送受信 WebBrowser ApplicationServer GET toukou.html <html> <head> <title>投稿画面</title>… toukou.html POST ToukouServlet 投稿者=“杉浦学”… 杉浦学 <html> <head>… <h2>杉浦学さんの投稿</h2> … ToukouServlet.class
HTTP GETとHTTP POST 先ほどの図でGET、POSTと出てきました。役割の違いは何でしょう？ ファイルを取得するための要求。 メッセージを送って、処理した結果のHTMLをもらうための要求。
メッセージ送信編
メッセージの入力から送信まで GET toukou.html <html> <head> WebBrowser ApplicationServer 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 " > “name”・・・部品の名前 <textarea name= " content " cols="50" rows="10"></textarea>
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誕生以前の手法です。
メッセージ送信編 終了 質問どうぞ～
メッセージ受信編
メッセージの受信から返答まで POST ToukouServlet 投稿者=“杉浦学” <html> <head>… WebBrowser ApplicationServer POST ToukouServlet 投稿者=“杉浦学” <html> <head>… <h2>杉浦学さんの投稿</h2> … 杉浦学 ToukouServlet.class
送られてきたメッセージ すると・・・ アプリケーションサーバ(Tomcat)が ハッシュテーブルにマッピングしてくれる 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を生成する 部分 ブラウザへ
メッセージを 受け取る部分 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"); 送信されたメッセージが格納されたハッシュテーブルから、 キーを指定してバリューを取得し、それぞれの変数に代入する。 String contributor = request.getParameter("contributor"); //キーcontributorのバリューを取得して文字列contributorに入れる String type = request.getParameter("type"); //キーtypeのバリューを取得して文字列typeに入れる String content = request.getParameter(“content"); //キーcontentのバリューを取得して文字列contentに入れる
投稿者の例で確認しよう Key Value contributor = 杉浦学 title = web.xmlの冒頭宣言 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生成を生成する ＊「“」を文字列として出力する場合は注意！「\”」と書きます。 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アプリのディレクトリ構造を作って関連ファイルを入れましょう。 GimonKaiketu-Web WEB-INF classes ToukouServlet.class lib web.xml html toukou.html index.html
補足資料 ~HTMLフォーム部品~ text-テキストボックス textarea-テキストエリア radio-ラジオボタン checkbox-チェックボックス select-リストボックス submit-送信ボタン reset-リセットボタン その他password、hidden ＊「とほほWWW入門」に詳細なHTMLリファレンスがあります http://tohoho.wakusei.ne.jp/www.htm
お疲れ様でした！！！ 今後は、今回作ったWebアプリを拡張していきます。 次回は投稿をファイルに保存する方法を学びます。 わくわくo(＾-＾)o