知的システム構築工房 　　Linux設定セミナーシリーズ 第5回　Webアプリ作成 2011年3月16日（水） 株式会社 アセンディア 1.

Presentation on theme: "知的システム構築工房 　　Linux設定セミナーシリーズ 第5回　Webアプリ作成 2011年3月16日（水） 株式会社 アセンディア 1."— Presentation transcript:

1 知的システム構築工房 　　Linux設定セミナーシリーズ 第5回　Webアプリ作成 2011年3月16日（水） 株式会社 アセンディア 1

2 目的 当セミナーを通して、 Webアプリケーションを開発する環境の構築手法を体得する。

3 目標 当セミナーを受講することにより 1.Webアプリを開発・動作する環境を構築できるように なること
　　なること 　2.フレームワークを使用したWebアプリの開発ができる 　　ようになること

4 セミナー内容 1．Webアプリが動作する仕組み Webサーバの仕組み Webアプリケーションの処理
Tomcatとは Tomcatのインストール EclipseとTomcatの連携 3．Webアプリケーションの作成 Webアプリケーションの構造 web.xmlファイル <servlet>タグと<servlet-mapping>タグの関係 Webサーブレットの作成 4．フレームワークを使用したWebアプリの作成 フレームワークについて Strutsについて Strutsを用いたWeb開発

5 1．Webアプリが動作する仕組み

6 Webサーバの仕組み Webブラウザを通してネットワークで繋がれたWebサーバへアクセスし、 様々な情報を取得します。
O S　（Linux) Apache HTTP Server Tomcat 認証システム Java VM ユーザID パスワード ネットワーク Database Java class JSP,HTML,CSS table,view クライアント Webサーバ

7 Webアプリケーションの処理 Webアプリケーションは一般的に要約すると、下記のようになります。 リンク ボタン 画面遷移
単純なリンクによる画面遷移 ボタン 画面１ アクション 処理結果 画面2 アクションに対応した処理

8 Webアプリケーションを実現するさまざまな言語や技術
Apache Tomcat IIS Glassfish : アプリケーションサーバ html JSP ASP css javaScript Ajax PHP CGI Flash : アクションに対応した処理 リンク アクション Framework Struts Spring .net Framework Hibernate Java .net Servlet : ボタン 画面１ driver jdbc,odbc,ODP.net・・ mail Database メール送信 Oracle MS SQLServer MySQL PostgreSQL : Sendmail qmail :

9 2．Web開発環境の構築

10 Tomcatとは Javaサーブレット、JSPを処理するアプリケーションソフトウェア。
　　Java VM上で動作し、ApacheやIISと連携し動的なWebサービスを提供する。 　　様々なOS（Linux,Windows,MacOS）で動作する。 　　オープンソースのソフトウェアです。 Webサーバ Apache HTTP Server Tomcat Java VM OS クライアント

11 Tomcatのインストール インストールの流れ １．プログラムソースを取得する ２．プログラムソースを解凍する ３．インストール
　１．プログラムソースを取得する 　２．プログラムソースを解凍する 　３．インストール 　４．動作確認

12 　１．プログラムソースを取得する

13 ：　（中略） ：

14 ダウンロードしたファイルを /home/ユーザ名 配下へコピーします。
~]$ cp /home/sugiura/ダウンロード/apache-tomcat tar.gz ./ ~]$ gzip -d apache-tomcat tar.gz ~]$ tar -xvf apache-tomcat tar ~]$ mv apache-tomcat tomcat6 ↑開発用のTomcatを/home/ユーザ名フォルダ配下に構築します。 rootユーザに替わり、ダウンロードしたファイルを /usr/local/src配下へコピーします この作業から、運用としてのTomcatインストールを行います。

15 ２．プログラムソースを解凍する ３．インストール
　２．プログラムソースを解凍する src]# gzip -d apache-tomcat tar.gz src]# tar -xvf apache-tomcat tar 　３．インストール /opt/配下へコピーし、tomcat6とリネームします src]# pwd /usr/local/src src]# mv apache-tomcat /opt/ src]# cd /opt/ opt]# mv apache-tomcat / tomcat

16 ４．動作確認 tomcatを起動します。 [root@user01 opt]# cd tomcat/
　４．動作確認 tomcatを起動します。 opt]# cd tomcat/ tomcat]# ls LICENSE NOTICE RELEASE-NOTES RUNNING.txt bin conf lib logs temp webapps work tomcat]# cd bin/ bin]# ls bootstrap.jar cpappend.bat shutdown.sh tool-wrapper.sh catalina-tasks.xml digest.bat startup.bat version.bat catalina.bat digest.sh startup.sh version.sh catalina.sh setclasspath.bat tomcat-juli.jar commons-daemon-native.tar.gz setclasspath.sh tomcat-native.tar.gz commons-daemon.jar shutdown.bat tool-wrapper.bat bin]# ./startup.sh Using CATALINA_BASE: /opt/tomcat Using CATALINA_HOME: /opt/tomcat Using CATALINA_TMPDIR: /opt/tomcat/temp Using JRE_HOME: /usr/local/java Using CLASSPATH: /opt/tomcat/bin/bootstrap.jar ←/opt/tomcat フォルダへ入ります ←確認 ←binフォルダへ移動（binフォルダ内にプログラムがあります） ←起動シェルを実行します ←正常に起動した場合、このようなメッセージが 　　表示されます

17 http://localhost:8080/ へアクセスします
このような画面が表示されます

18 このように表示されれば、正しく機能しています。

19 正しく動作した場合、一度 tomcatを停止します。
~]# /opt/tomcat/bin/shutdown.sh Using CATALINA_BASE: /opt/tomcat Using CATALINA_HOME: /opt/tomcat Using CATALINA_TMPDIR: /opt/tomcat/temp Using JRE_HOME: /usr/local/java Using CLASSPATH: /opt/tomcat/bin/bootstrap.jar ←終了シェルを実行します ↑正常に終了した場合、このようなメッセージが表示されます

20 EclipseとTomcatの連携 Eclipse開発環境でTomcatのサービスを管理したり、プロセスをデバッグできる
非常に一般的なプラグインとして、Sysdeo Eclipse Tomcat Launcher plugin があります。 インストール方法 １．プログラムソースの取得 ２．プログラムソースの配置 ３．動作確認 ４．Eclipse環境設定

21 　１．プログラムソースを取得する

22 tomcatPluginV33.zipを選択肢、ダウンロードを行います。

23 ２．プログラムソースの配置 ダウンロードしたソースを解凍します [root@user01 ~]# cd /usr/local/src/
　　ダウンロードしたソースを解凍します ~]# cd /usr/local/src/ src]# mv /home/sugiura/ダウンロード/tomcatPluginV33.zip ./ src]# ls ImageMagick httpd openssl-1.0.0d.tar work2 ImageMagick.tar jdk-6u24-linux-i586.bin tomcatPluginV33.zip apache-tomcat tar openssl-1.0.0d work src]# unzip tomcatPluginV33.zip src]# mv com.sysdeo.eclipse.tomcat_3.3.0/ /opt/eclipse/plugins/ ←/usr/local/srcフォルダへ入ります ↑ダウンロードしたファイルを移動 ←ダウンロードしたファイルを解凍 ↑ダウンロードしたファイルをeclipseのpluginフォルダへ移動

24 　３．動作確認 Eclipseを起動します 赤く囲まれている場所にTomcatプラグインが表示されていれば、正しくインストールされています。

25 　３．動作確認 Eclipseを起動します 赤く囲まれている場所にTomcatプラグインが表示されていれば、正しくインストールされています。

26 Tomcatプラグインが動作するように、Eclipseの環境設定を行います。
/home/ユーザ名配下のTomcatを指定

27 Tomcatを起動し、正しく動作するかを確認します。

28 ３．Webアプリケーションの作成

29 Webアプリケーションの構造 http://サーバIPアドレス・ドメイン/lesson/ lesson src 一般的なサイトでの構造
トップフォルダ Webアプリケーションのコンテキスト名になります。 lesson WEB-INFフォルダ Webアプリケーションのプログラムやライブラリを配置します Webブラウザからはアクセスできません WEB-INF srcフォルダ プログラムのソースファイルを配置します（実運用では配置しません） src classesフォルダ プログラムのクラスファイルを配置します classes libフォルダ プログラムで利用するライブラリファイルを配置します lib viewフォルダ JSPファイルを配置します view 設定ファイル web.xml,struts-config.xml等Webアプリの設定ファイルを配置します コンテンツファイル htmlファイル、画像ファイル(jpg,gif)、テキストファイル等を配置します。　フォルダ分けします。

30 web.xmlファイル Webアプリケーションの各種設定は、web.xmlファイルに記述します。
web.xmlファイルは、拡張子がxmlであるように、XML形式で記述します。 <context-param>タグ：初期パラメータを設定 　　　　　　　　　　　<param-name>：パラメータ名 <param-value>: 値 <filter>タグ：HTTPリクエスト・レスポンス時に発生する処理を記述 <filter-name>：フィルター名 　 <filter-class>:フィルタークラス名 <servlet>タグ：Javaのクラスを設定 <servlet-name>:サーブレット名 <servlet-class>:Javaのクラスファイル名（拡張子はつけません） <servlet-mapping>タグ：<servlet>タグとURLとのマッピングを設定 <url-pattern>:URL名 ※タグはほんの一部です。

31 <servlet>タグと<servlet-mapping>タグの関係
例 <servlet> <servlet-name>Test</servlet-name> <servlet-class>ShowTest</servlet-class> </servlet> <servlet-mapping> <url-pattern>/showTest</url-pattern> </servlet-mapping> ShowTest 1. 2.ShowTestが実行される

32 Webサーブレットの作成 作成するアプリケーション http://localhost:8080/lesson/ShowHello
Hello!!

33 作成方法 ファイルから新規→プロジェクトを選択します Tomcatプロジェクトを選択し、次へを押下します

34 プロジェクト名にlessonと入力し、次へボタンを押下
コンテキスト～をチェックし、完了ボタンを押下

35 パッケージ・エクスプローラにlessonフォルダができていることを確認してください。

36 web.xmlの作成 <?xml version="1.0" encoding="Shift_JIS"?>
<web-app xmlns=" xmlns:xsi=" xsi:schemaLocation=" version="2.4"> <servlet> <servlet-name>Hello</servlet-name> <servlet-class>HelloServlet</servlet-class> </servlet> <servlet-mapping> <url-pattern>/ShowHello</url-pattern> </servlet-mapping> </web-app>

37 import javax.servlet.*; import javax.servlet.http.*;
Helloservlet.javaの作成 import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloServlet extends HttpServlet { public void doGet( HttpServletRequest request, HttpServletResponse response ) throws IOException, ServletException { PrintWriter out = response.getWriter(); out.println("Hello!!"); } doGet()メソッドはHttpServletからオーバーライドするメソッドです。 ブラウザからサーブレットを呼び出したときにこのメソッドが呼ばれます。 リクエスト HttpServletRequest サーブレット ブラウザ レスポンス HttpServletResponse

38 動作確認

39 GETとPOSTについて GETメソッド HTTPリクエストにおいて、引数をURLの後ろにパラメータとして送信する。
送信できる文字数の目安は２５５文字（ブラウザやサーバによって異なる） アドレスに引数情報が表示される。 　 POSTメソッド 　　HTTPリクエストにおいて、引数はFormに埋め込まれており、Formデータ 　　として送信する。送信できる文字数に制限は無く、バイナリデータも 　　送信可能 リクエストパラメータ <form method="post" action="showTest"> ユーザID <input type="text" name="userId" size="30" maxlength="30"/> パスワード <input type="password" name="userPassword" size="30" maxlength="30" /> </form> 認証システム ユーザID パスワード

40 4．フレームワークを使用した 　　　Webアプリの作成

41 フレームワークについて フレームワークとは、システムにおいて共通的な機能や部品（画面表示、DBアクセス、IO処理等）を提供するものです。
コントローラ ユーザ ロジック 画面表示 DBアクセス IO処理 フレームワークとライブラリの違い ユーザプログラム 基本的な機能 フレームワーク 呼び出す この部分だけ開発 ライブラリ コントローラの定義付けに よってユーザロジックが呼び出される 機能 機能 フレームワーク：フレームワークがユーザPGを呼び出す ライブラリ：ユーザPGがライブラリを呼び出す

42 Strutsについて 特徴 Apache Tomcatなどのサーブレットコンテナ上で動作するWebアプリケーション
フレームワークのひとつです。 特徴 1.MVC (Model-View-Controller)モデルを採用したフレームワーク 　⇒MVCモデルであるので、作業分担が容易な為、大きなシステム開発に 向いている。 2.仕様変更に対応しやすい 　⇒デザインの変更はViewを修正、データベースの変更はModel,Controller を修正,ロジックの変更はControllerを修正と、変更箇所が明確。 3.国際化対応 　⇒メッセージリソースを、各国に対応した言語に設定可能

43 Strutsを用いたWeb開発 作成するアプリケーション１
ようこそ　○○さん

44 作成方法 ファイルから新規→プロジェクトを選択します Tomcatプロジェクトを選択し、次へを押下します

45 プロジェクト名にlesson2と入力し、次へボタンを押下
コンテキスト～をチェックし、完了ボタンを押下

46 パッケージ・エクスプローラにlesson2フォルダができていることを確認してください。

47

48 ウィンドウ⇒設定

49 以下は講師の指示に従って操作をおこなってください。
1.Strutsライブラリの移行 2.JSPファイルの移行 3.Javaプログラムの移行 4.Eclipse設定