プログラミング Java III 第 2 回 :WebForm および サーブレット入門 Ivan Tanev
講義の構造 1. ダイナミックWebコンテンツとサーブレット 2.Webフォーム 3. 演習 2
1. ダイナミック Web コンテンツとサーブレット 3
1. ダイナミック Web コンテンツとサーブレット Internet Response: HTML テキスト ユーザー 4
1. ダイナミック Web コンテンツとサーブレット Internet Response: HTML テキスト ユーザー 保存されている所のコンテンツ (Web Server) = 表示されている所のコンテンツ (Web Browser) 5
ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 HTML 4 Internet HTML テキスト Response: HTML テキスト ユーザー ト保存されている所のコ ンテンツ (Web Server) サーブレットの実行された結果はWeb Clientに送られています この結果は = ダイナミックな結果である! 表示されている所のコンテンツ (Web Browser) 6
ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request Request 2 3 HTML トサーバサイドスクリプト 4 Internet HTML テキスト Response: HTML テキスト HTML テキスト ユーザー Java Class 7
ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 トHTML 4 Internet HTML テキスト Response: HTML テキスト ユーザー サーブレットの構造? Java Class 開発? サーブレットの特徴? Web クライアントから Java Class を呼び出す ( 実行 )? 8
ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request サーブレットの特徴 2 3 トHTML 4 Sun Microsystems で開発された サーブレットはサーバサイドスクリプト Internet である HTML テキスト HTML テキスト ユーザー サーブレットの特徴? 9
1. ダイナミック Web コンテンツとサーブレット ーブレッテキストサ2 3 トHTML サーブレットの特徴? 4 Request Internet HTML テキスト サーブレットの特徴 実行されている所は サーブレット コンテナおよび HTML テキスト サーブレット エンジンと呼ばれてい ます ユーザー このスクリプトは Java 言語で開発されて いる 10
ーブレッ1. ダイナミック Web コンテンツとサーブレット 2 サー3 ブレットHTML テキストサHTML 4 テキスト HTML テキスト HTML テキストサRequest サーブレットの特徴 Java 言語 : Write Once Run Anywhere Internet ( 例 :CGI MS ISAPIとは?) HTML マルチスレードテキスト ( 例 :CGIとは? Thread<->Processとは?) HTML テキスト ユーザー サーブレットの特徴? 11
1. ダイナミック Web コンテンツとサーブレット ーブレッテキストサ2 3 トHTML サーブレットの特徴? 4 Request Internet サーブレットの特徴 ライフサイクル サーブレットは Servlet インターフェイス (javax.servlet のパケージ ) を実現する Servlet インターフェイスは下記の HTML Method を含んでいます : テキスト void init(servletconfig config) HTML ( 一回呼び出されていますテキスト ) void service(servletrequest request, void destroy() ServletResponse response) ユーザー 12
1. ダイナミック Web コンテンツとサーブレット 2 3 トーブレッテキストサデータベース HTML 4 サーバの状態 サーブレットの特徴 Request サーブレットの実行されたダイナミックな結果は : サーバのダイナミックな状態が関係ある ( 例 : 時間など HTML ) テキスト データベースのダイナミックな状態が関係 Internet HTML あるテキスト ( 例 : 辞典 Online Commerceなど ) ユーザー コンテンツはユーザーインプットのダイナミックな状態と関係ある ( 例 : 辞典 Online Commerceなど ) 13
ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 トHTML 4 Internet HTML テキスト Response: HTML テキスト ユーザー Web クライアントから Java Class を呼び出す ( 実行 )? 14
ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 トHTML 4 Internet HTML テキスト Response: HTML テキスト ユーザー Web クライアントから Java Class を呼び出す ( 実行 )? 15
2.Web フォーム http://tangorin.com/! 表示 から ソース(C) を開いて下さい 16
2.Web フォーム GET および POST <form id= Search class= form-inline action="dict.php" method="get"> <input type="text" class="form-control" id="searchinput" name="s" value="" > <button id="searchbutton" class="btn btn-warning" tabindex="3" type="submit"> FORM は HTML タッグ名である </form> METHOD は HTML パラメター名である 17
2.Web フォーム INPUT は HTML タッグ名である <form id= Search class= form-inline action="dict.php" method="get"> <input type="text" class="form-control" id="searchinput" name="s" value="" > <button id="searchbutton" class="btn btn-warning" tabindex="3" type="submit"> </form> TYPE, ID は HTML の INPUT タッグのパラメター名である 18
2.Web フォーム BUTTON は HTML タッグ名である <form id= Search class= form-inline action="dict.php" method="get"> <input type="text" class="form-control" id="searchinput" name="s" value="" > <button id="searchbutton" class="btn btn-warning" tabindex="3" type="submit"> </form> TYPE, ID はHTMLの BUTTON タッグのパラメター名である 19
2.Web フォーム ACTION は HTML パラメター名である <form id= Search class= form-inline c action="dict.php" method="get"> <input type="text" class="form-control" b id="searchinput" name="s" value="" > a <button id="searchbutton" class="btn btn-warning" tabindex="3" type="submit"> a searchbutton ボタンを押すとformの b c </form> searchinput のデータはこの dict.php の スクリプトへ送られています このスクリプトは Server Side で実行されています 20
2.Web フォーム <form id= Search class= form-inline action="dict.php" method="get"> <input type="text" b class="form-control" id="searchinput" name="s" value="" > a <button id="searchbutton" class="btn btn-warning" tabindex="3" type="submit"> </form> Webフォーム下記の特徴を定義されています : 何のサーバサイドスクリプトを実行するか? c 何時 ( 何のイベント ) サーバサイドスクリプトを実行するか? a 何のユーザー入力されたパラメターはスクリプトにおくるか? c b 21
3. 演習 A.Web フォームを作り出す (Notepad で ) B.Web フォームを Web サーバに Upload (FTP Client で ) C.Web フォームのアクセス (Internet Explorer で ) D. サーブレットのソース (java) を確認 (Notepad で ) 22
3. 演習 A.Web フォームを作り出す (Notepad で )!!! 23
3. 演習 A.Web フォームを作り出す (Notepad で )! 24
3. 演習 A.Web フォームを作り出す (Notepad で ) Virtual path (URL): /servlet/ Physical path (Local PC): C:\ORACLE\ora9.2\Apache\Jserv\servlets\ 実行されたサーブレット HelloFromServlet.class のコンパイルされた Java Class 25
3. 演習 A.Web フォームを作り出す (Notepad で ) 作り出したファイル名を Lecture2_Form.html を設定する! 26
3. 演習 B.Web フォームを Web サーバに Upload (FTP Client で )! ネットワーク フォルダーを開く! FFTP を実行する 27
3. 実習 B.Web フォームを Web サーバに Upload (FTP Client で )! ホストの設定 基本 のページでFTPサーバーのパラメターを設定して下さい パスワードも guest です 28
3. 実習 B.Web フォームを Web サーバに Upload (FTP Client で ) 接続してから isd-si.doshisha.ac.jp のサーバー /teaching/programming_3/ のフォルダーを表示されています! 自分のフォルダーを選択する 29
3. 実習 B.Web フォームを Web サーバに Upload (FTP Client で ) Web フォームファイル E:\temp\Lecture2_Form.html Web サーバのフォルダー /1XXXXXXXX に Upload する! /1XXXXXXXX 30
3. 実習 C.Web フォームのアクセス (Internet Explorer で ) Internet Explorer のアドレスバー : http://isd-si.doshisha.ac.jp/teaching/programming_3/1xxxxxxx/lecture2_form.html Enter 押してから サーブレットを実行する ボタンを押す!! http://isd-si.doshisha.ac.jp/teaching/programming_3/1xxxxxxx/lecture2_form.html 31
3. 実習 C.Web フォームのアクセス サーブレットを実行する ボタンを押して下さい! サーブレット名, パラメタ サーブレットの実行結果 32
3. 演習 D. サーブレットのソース (java) を確認 (Notepad で ) /1XXXXXXX! FTPクライアントサーブレットソースファイル HelloFromServlet.java Notepadで開いて下さい!! 33
3. 演習 D. サーブレットのソース (java) を確認 (Notepad で ) 同じく Web フォームファイルファイル Lecture2_Form.html Notepad でも開く! 34
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloFromServlet extends HttpServlet { 3. 演習 D. サーブレットのソース (java) を確認 サーブレット HelloFromServlet の Java ソース public void service (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // set content type and other response header fields first response.setcontenttype("text/html"); // get the communication channel with the requesting client PrintWriter out = response.getwriter(); } } // write the data out.println("<html>" + "<HEAD>" + " <TITLE>To All Students of Programming 3 at Doshisha University</TITLE>" + " <META HTTP-EQUIV='Content-Type' Content='text/html; charset=shift_jis'></meta>" + "</HEAD>" + "<BODY BGCOLOR=\"#FFFFFF\">" + " <CENTER>" + " <H2>Congratulations, your first servlet is working!</h2>" + " <H3>[ local time is <font color=blue>" + new java.util.date() + "</font> ]</H3>" + " </CENTER>" + "</BODY>" + "</HTML>"); Web フォームファイルファイル Lecture2_Form.htm のソース 35
3. 実習 D. サーブレットのソース (java) を確認! サーブレットの実行結果を検査してください 36
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloFromServlet extends HttpServlet { 3. 演習 D. サーブレットのソース (java) を確認 サーブレット HelloFromServlet の Java ソース public void service (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // set content type and other response header fields first response.setcontenttype("text/html"); // get the communication channel with the requesting client PrintWriter out = response.getwriter(); } } // write the data out.println("<html>" + "<HEAD>" + " <TITLE>To All Students of Programming 3 at Doshisha University</TITLE>" + " <META HTTP-EQUIV='Content-Type' Content='text/html; charset=shift_jis'></meta>" + "</HEAD>" + "<BODY BGCOLOR=\"#FFFFFF\">" + " <CENTER>" + " <H2>Congratulations, your first servlet is working!</h2>" + " <H3>[ local time is <font color=blue>" + new java.util.date() + "</font> ]</H3>" + " </CENTER>" + "</BODY>" + "</HTML>"); サーブレット HelloFromServlet の実行結果 <HTML> <HEAD> <TITLE>To All Students of Programming 3 at Doshisha University</TITLE> <META HTTP-EQUIV='Content-Type' Content='text/html; charset=shift_jis'></meta> </HEAD> <BODY BGCOLOR="#FFFFFF"> <CENTER> <H2>Congratulations, your first servlet is working!</h2> <H3>[ local time is <font color=blue>wed Apr 18 17:49:38 KST 2018</font> ]</H3> </CENTER> </BODY> </HTML> 37
3. 実習 ( まとめ ) Lecture2_Form.htm http://... /Lecture2_Form.html Web サーバ Web 1 フォーム (static) HTML テキスト 2 Internet 3 サーhttp://... //servlet/hellofromservlet ブレ4 HTML 5 ットテキスト HTML テキスト dynamic サーブレット コンテナ HelloFromServlet.class Web クライアント <HTML> <HEAD> <TITLE>To All Students of Programming 3 at Doshisha University</TITLE> <META HTTP-EQUIV='Content-Type' Content='text/html; charset=shift_jis'></meta> </HEAD> <BODY BGCOLOR="#FFFFFF"> <CENTER> <H2>Congratulations, your first servlet is working!</h2> <H3>[ local time is <font color=blue>wed Apr 18 17:49:38 KST 2018 </font> ]</H3> </CENTER> </BODY> </HTML> ユーザー 38
3. 演習 サーブレットの構造?Java Class の開発方法? 第 3 回の講義である import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloFromServlet extends HttpServlet { public void service (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // set content type and other response header fields first response.setcontenttype("text/html"); // get the communication channel with the requesting client PrintWriter out = response.getwriter(); } } // write the data out.println("<html>" + "<HEAD>" + " <TITLE>To All Students of Programming 3 at Doshisha University</TITLE>" + " <META HTTP-EQUIV='Content-Type' Content='text/html; charset=shift_jis'></meta>" + "</HEAD>" + "<BODY BGCOLOR=\"#FFFFFF\">" + " <CENTER>" + " <H2>Congratulations, your first servlet is working!</h2>" + " <H3>[ local time is <font color=blue>" + new java.util.date() + "</font> ]</H3>" + " </CENTER>" + "</BODY>" + "</HTML>"); 39