Microsoft PowerPoint - Lecture_2

Size: px

Start display at page:

Download "Microsoft PowerPoint - Lecture_2"

さなえあると
5 years ago
Views:

1 プログラミング Java III 第 2 回 :WebForm およびサーブレット入門 Ivan Tanev

2 講義の構造 1. ダイナミックWebコンテンツとサーブレット 2.Webフォーム 3. 演習 2

3 1. ダイナミック Web コンテンツとサーブレット 3

4 1. ダイナミック Web コンテンツとサーブレット Internet Response: HTML テキストユーザー 4

5 1. ダイナミック Web コンテンツとサーブレット Internet Response: HTML テキストユーザー保存されている所のコンテンツ (Web Server) = 表示されている所のコンテンツ (Web Browser) 5

6 ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 HTML 4 Internet HTML テキスト Response: HTML テキストユーザート保存されている所のコンテンツ (Web Server) サーブレットの実行された結果はWeb Clientに送られていますこの結果は = ダイナミックな結果である! 表示されている所のコンテンツ (Web Browser) 6

7 ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request Request 2 3 HTML トサーバサイドスクリプト 4 Internet HTML テキスト Response: HTML テキスト HTML テキストユーザー Java Class 7

8 ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 トHTML 4 Internet HTML テキスト Response: HTML テキストユーザーサーブレットの構造? Java Class 開発? サーブレットの特徴? Web クライアントから Java Class を呼び出す ( 実行 )? 8

9 ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request サーブレットの特徴 2 3 トHTML 4 Sun Microsystems で開発されたサーブレットはサーバサイドスクリプト Internet である HTML テキスト HTML テキストユーザーサーブレットの特徴? 9

10 1. ダイナミック Web コンテンツとサーブレットーブレッテキストサ2 3 トHTML サーブレットの特徴? 4 Request Internet HTML テキストサーブレットの特徴実行されている所はサーブレットコンテナおよび HTML テキストサーブレットエンジンと呼ばれていますユーザーこのスクリプトは Java 言語で開発されている 10

11 ーブレッ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

12 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

13 1. ダイナミック Web コンテンツとサーブレット 2 3 トーブレッテキストサデータベース HTML 4 サーバの状態サーブレットの特徴 Request サーブレットの実行されたダイナミックな結果は : サーバのダイナミックな状態が関係ある ( 例 : 時間など HTML ) テキストデータベースのダイナミックな状態が関係 Internet HTML あるテキスト ( 例 : 辞典 Online Commerceなど ) ユーザーコンテンツはユーザーインプットのダイナミックな状態と関係ある ( 例 : 辞典 Online Commerceなど ) 13

14 ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 トHTML 4 Internet HTML テキスト Response: HTML テキストユーザー Web クライアントから Java Class を呼び出す ( 実行 )? 14

15 ーブレッテキストサ1. ダイナミック Web コンテンツとサーブレット Request 2 3 トHTML 4 Internet HTML テキスト Response: HTML テキストユーザー Web クライアントから Java Class を呼び出す ( 実行 )? 15

16 2.Web フォーム表示からソース(C) を開いて下さい 16

17 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

18 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

19 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

20 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

21 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

22 3. 演習 A.Web フォームを作り出す (Notepad で ) B.Web フォームを Web サーバに Upload (FTP Client で ) C.Web フォームのアクセス (Internet Explorer で ) D. サーブレットのソース (java) を確認 (Notepad で ) 22

23 3. 演習 A.Web フォームを作り出す (Notepad で )!!! 23

24 3. 演習 A.Web フォームを作り出す (Notepad で )! 24

25 3. 演習 A.Web フォームを作り出す (Notepad で ) Virtual path (URL): /servlet/ Physical path (Local PC): C:\ORACLE\ora9.2\Apache\Jserv\servlets\ 実行されたサーブレット HelloFromServlet.class のコンパイルされた Java Class 25

26 3. 演習 A.Web フォームを作り出す (Notepad で ) 作り出したファイル名を Lecture2_Form.html を設定する! 26

27 3. 演習 B.Web フォームを Web サーバに Upload (FTP Client で )! ネットワークフォルダーを開く! FFTP を実行する 27

28 3. 実習 B.Web フォームを Web サーバに Upload (FTP Client で )! ホストの設定基本のページでFTPサーバーのパラメターを設定して下さいパスワードも guest です 28

29 3. 実習 B.Web フォームを Web サーバに Upload (FTP Client で ) 接続してから isd-si.doshisha.ac.jp のサーバー /teaching/programming_3/ のフォルダーを表示されています! 自分のフォルダーを選択する 29

$E:\temp\Lecture2_Form.$

30 3. 実習 B.Web フォームを Web サーバに Upload (FTP Client で ) Web フォームファイル E:\temp\Lecture2_Form.html Web サーバのフォルダー /1XXXXXXXX に Upload する! /1XXXXXXXX 30

31 3. 実習 C.Web フォームのアクセス (Internet Explorer で ) Internet Explorer のアドレスバー : Enter 押してからサーブレットを実行するボタンを押す!! 31

32 3. 実習 C.Web フォームのアクセスサーブレットを実行するボタンを押して下さい! サーブレット名, パラメタサーブレットの実行結果 32

33 3. 演習 D. サーブレットのソース (java) を確認 (Notepad で ) /1XXXXXXX! FTPクライアントサーブレットソースファイル HelloFromServlet.java Notepadで開いて下さい!! 33

34 3. 演習 D. サーブレットのソース (java) を確認 (Notepad で ) 同じく Web フォームファイルファイル Lecture2_Form.html Notepad でも開く! 34

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.

35 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

36 3. 実習 D. サーブレットのソース (java) を確認! サーブレットの実行結果を検査してください 36

37 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.

.. //servlet/hellofromservlet ブレ4 HTML 5 ットテキスト HTML テキスト dynamic サーブレットコンテナ HelloFromServlet.

<META HTTP-EQUIV='Content-Type' Content='text/html; charset=shift_jis'></meta> </HEAD> <BODY

38 3. 実習 ( まとめ ) Lecture2_Form.htm /Lecture2_Form.html Web サーバ Web 1 フォーム (static) HTML テキスト 2 Internet 3 サー //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

39 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

Microsoft PowerPoint - Lecture_3

Microsoft PowerPoint - Lecture_3 プログラミング III 第 3 回 : サーブレットリクエスト & サーブレットレスポンス処理入門 Ivan Tanev 講義の構造 1. サーブレットの構造 2. サーブレットリクエストサーブレットレスポンスとは 3. 演習 2 Lecture2_Form.htm 第 2 回のまとめ Web サーバ Web 1 フォーム static 2 Internet サーブレ4 HTML 5 ットテキスト