第5回 Webアプリ作成
知的システム構築工房
Linux設定セミナーシリーズ
第5回 Webアプリ作成
2011年3月16日（水）
株式会社 アセンディア
－1 －
第5回 Webアプリ作成
目的
当セミナーを通して、
Webアプリケーションを開発する環境の構築手法
を体得する。
－2 －
第5回 Webアプリ作成
目標
当セミナーを受講することにより
1.Webアプリを開発・動作する環境を構築できるように
なること
2.フレームワークを使用したWebアプリの開発ができる
ようになること
－3 －
第5回 Webアプリ作成
セミナー内容
1．Webアプリが動作する仕組み
Webサーバの仕組み
Webアプリケーションの処理
Webアプリケーションを実現するさまざまな言語や技術
2．Web開発環境の構築
Tomcatとは
Tomcatのインストール
EclipseとTomcatの連携
3．Webアプリケーションの作成
Webアプリケーションの構造
web.xmlファイル
<servlet>タグと<servlet-mapping>タグの関係
Webサーブレットの作成
4．フレームワークを使用したWebアプリの作成
フレームワークについて
Strutsについて
Strutsを用いたWeb開発
－4 －
第5回 Webアプリ作成
1．Webアプリが動作する仕組み
－5 －
第5回 Webアプリ作成
Webサーバの仕組み
Webブラウザを通してネットワークで繋がれたWebサーバへアクセスし、
様々な情報を取得します。
O S （Linux)
Apache HTTP Server
Tomcat
Java VM
Database
認証システム
ネットワーク
ユーザID
パスワード
Java class
JSP,HTML,CSS
table,view
クライアント
Webサーバ
－6 －
第5回 Webアプリ作成
Webアプリケーションの処理
Webアプリケーションは一般的に要約すると、下記のようになります。
画面遷移
リンク
ボタン
画面１
単純なリンクによる画面遷移
アクション
処理結果
アクションに対応した処理
－7 －
画面2
第5回 Webアプリ作成
Webアプリケーションを実現するさまざまな言語や技術
Webアプリケーションは様々な言語や技術で構成されています。
アプリケーションサーバ
html
JSP
ASP
css
javaScript
Ajax
PHP
CGI
Flash
:
リンク
アクションに対応した処理
アクション
Framework
Java
.net
Servlet
:
ボタン
画面１
Struts
Spring
.net Framework
Hibernate
Apache
Tomcat
IIS
Glassfish
:
driver jdbc,odbc,ODP.net・・
メール送信
mail
Sendmail
qmail
:
－8 －
Database
Oracle
MS SQLServer
MySQL
PostgreSQL
:
第5回 Webアプリ作成
2．Web開発環境の構築
－9 －
第5回 Webアプリ作成
Tomcatとは
Javaサーブレット、JSPを処理するアプリケーションソフトウェア。
Java VM上で動作し、ApacheやIISと連携し動的なWebサービスを提供する。
様々なOS（Linux,Windows,MacOS）で動作する。
オープンソースのソフトウェアです。
Webサーバ
Apache HTTP Server
Tomcat
Java VM
OS
クライアント
－10 －
第5回 Webアプリ作成
Tomcatのインストール
インストールの流れ
１．プログラムソースを取得する
２．プログラムソースを解凍する
３．インストール
４．動作確認
－11 －
第5回 Webアプリ作成
１．プログラムソースを取得する
http://tomcat.apache.org/
－12 －
第5回 Webアプリ作成
： （中略）
：
－13 －
第5回 Webアプリ作成
ダウンロードしたファイルを /home/ユーザ名 配下へコピーします。
[sugiura@user01 ~]$ cp /home/sugiura/ダウンロード/apache-tomcat-6.0.32.tar.gz ./
[sugiura@user01 ~]$ gzip -d apache-tomcat-6.0.32.tar.gz
[sugiura@user01 ~]$ tar -xvf apache-tomcat-6.0.32.tar
[sugiura@user01 ~]$ mv apache-tomcat-6.0.32 tomcat6
↑開発用のTomcatを/home/ユーザ名フォルダ配下に構築します。
rootユーザに替わり、ダウンロードしたファイルを /usr/local/src配下へコピーします
この作業から、運用としてのTomcatインストールを行います。
－14 －
第5回 Webアプリ作成
２．プログラムソースを解凍する
[root@user01 src]# gzip -d apache-tomcat-6.0.32.tar.gz
[root@user01 src]# tar -xvf apache-tomcat-6.0.32.tar
３．インストール
/opt/配下へコピーし、tomcat6とリネームします
[root@user01 src]# pwd
/usr/local/src
[root@user01 src]# mv apache-tomcat-6.0.32 /opt/
[root@user01 src]# cd /opt/
[root@user01 opt]# mv apache-tomcat-6.0.32/ tomcat
－15 －
第5回 Webアプリ作成
４．動作確認
tomcatを起動します。
[root@user01 opt]# cd tomcat/ ←/opt/tomcat フォルダへ入ります
[root@user01 tomcat]# ls ←確認
LICENSE NOTICE RELEASE-NOTES RUNNING.txt bin conf lib logs temp webapps work
[root@user01 tomcat]# cd bin/ ←binフォルダへ移動（binフォルダ内にプログラムがあります）
[root@user01 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
[root@user01 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
－16 －
第5回 Webアプリ作成
http://localhost:8080/ へアクセスします
このような画面が表示されます
－17 －
第5回 Webアプリ作成
このように表示されれば、正しく機能しています。
－18 －
第5回 Webアプリ作成
正しく動作した場合、一度 tomcatを停止します。
[root@user01 ~]# /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
↑正常に終了した場合、このようなメッセージが表示されます
－19 －
第5回 Webアプリ作成
EclipseとTomcatの連携
Eclipse開発環境でTomcatのサービスを管理したり、プロセスをデバッグできる
環境を構築します。EclipseにTomcatプラグインを適用します。
非常に一般的なプラグインとして、Sysdeo Eclipse Tomcat Launcher plugin
があります。
インストール方法
１．プログラムソースの取得
２．プログラムソースの配置
３．動作確認
４．Eclipse環境設定
－20 －
第5回 Webアプリ作成
１．プログラムソースを取得する
http://www.eclipsetotale.com/tomcatPlugin.html
－21 －
第5回 Webアプリ作成
tomcatPluginV33.zipを選択肢、ダウンロードを行います。
－22 －
第5回 Webアプリ作成
２．プログラムソースの配置
ダウンロードしたソースを解凍します
[root@user01 ~]# cd /usr/local/src/ ←/usr/local/srcフォルダへ入ります
[root@user01 src]# mv /home/sugiura/ダウンロード/tomcatPluginV33.zip ./
↑ダウンロードしたファイルを移動
[root@user01 src]# ls
ImageMagick-6.6.7-10
httpd-2.2.17
openssl-1.0.0d.tar work2
ImageMagick.tar
jdk-6u24-linux-i586.bin tomcatPluginV33.zip
apache-tomcat-6.0.32.tar openssl-1.0.0d
work
[root@user01 src]# unzip tomcatPluginV33.zip ←ダウンロードしたファイルを解凍
[root@user01 src]# mv com.sysdeo.eclipse.tomcat_3.3.0/ /opt/eclipse/plugins/
↑ダウンロードしたファイルをeclipseのpluginフォルダへ移動
－23 －
第5回 Webアプリ作成
３．動作確認
Eclipseを起動します
赤く囲まれている場所にTomcatプラグインが表示されていれば、正しくインストールされています。
－24 －
第5回 Webアプリ作成
３．動作確認
Eclipseを起動します
赤く囲まれている場所にTomcatプラグインが表示されていれば、正しくインストールされています。
－25 －
第5回 Webアプリ作成
４．Eclipse環境設定
Tomcatプラグインが動作するように、Eclipseの環境設定を行います。
/home/ユーザ名配下のTomcatを指定
－26 －
第5回 Webアプリ作成
Tomcatを起動し、正しく動作するかを確認します。
－27 －
第5回 Webアプリ作成
３．Webアプリケーションの作成
－28 －
第5回 Webアプリ作成
Webアプリケーションの構造
一般的なサイトでの構造
lesson
http://サーバIPアドレス・ドメイン/lesson/
トップフォルダ
Webアプリケーションのコンテキスト名になります。
WEB-INF
WEB-INFフォルダ
Webアプリケーションのプログラムやライブラリを配置します
Webブラウザからはアクセスできません
src
classes
srcフォルダ
プログラムのソースファイルを配置します（実運用では配置しません）
classesフォルダ
プログラムのクラスファイルを配置します
l i b
libフォルダ
プログラムで利用するライブラリファイルを配置します
view
viewフォルダ
JSPファイルを配置します
設定ファイル
web.xml,struts-config.xml等Webアプリの設定ファイルを配置します
コンテンツファイル
htmlファイル、画像ファイル(jpg,gif)、テキストファイル等を配置します。 フォルダ分けします。
－29 －
第5回 Webアプリ作成
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とのマッピングを設定
<servlet-name>:サーブレット名
<url-pattern>:URL名
※タグはほんの一部です。
－30 －
第5回 Webアプリ作成
<servlet>タグと<servlet-mapping>タグの関係
例
<servlet>
<servlet-name>Test</servlet-name>
<servlet-class>ShowTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Test</servlet-name>
<url-pattern>/showTest</url-pattern>
</servlet-mapping>
ShowTest
1.http://localhost:8080/lesson/showTest でアクセスすると、
2.ShowTestが実行される
－31 －
第5回 Webアプリ作成
Webサーブレットの作成
作成するアプリケーション
http://localhost:8080/lesson/ShowHello
Hello!!
－32 －
第5回 Webアプリ作成
作成方法
ファイルから新規→プロジェクトを選択します
Tomcatプロジェクトを選択し、次へを押下します
－33 －
第5回 Webアプリ作成
プロジェクト名にlessonと入力し、次へボタンを押下
コンテキスト～をチェックし、完了ボタンを押下
－34 －
第5回 Webアプリ作成
パッケージ・エクスプローラにlessonフォルダができていることを確認してください。
－35 －
第5回 Webアプリ作成
web.xmlの作成
<?xml version="1.0" encoding="Shift_JIS"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<servlet>
<servlet-name>Hello</servlet-name>
<servlet-class>HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Hello</servlet-name>
<url-pattern>/ShowHello</url-pattern>
</servlet-mapping>
</web-app>
－36 －
第5回 Webアプリ作成
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!!");
}
}
－37 －
第5回 Webアプリ作成
動作確認
http://localhost:8080/lesson/ShowHello
－38 －
第5回 Webアプリ作成
GETとPOSTについて
GETメソッド
HTTPリクエストにおいて、引数をURLの後ろにパラメータとして送信する。
送信できる文字数の目安は２５５文字（ブラウザやサーバによって異なる）
アドレスに引数情報が表示される。
http://localhost/lesson/showTest?userId=999&name=%90%99%89Y&tel=09011112222
リクエストパラメータ
POSTメソッド
HTTPリクエストにおいて、引数はFormに埋め込まれており、Formデータ
として送信する。送信できる文字数に制限は無く、バイナリデータも
送信可能
認証システム
ユーザID
パスワード
<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>
－39 －
第5回 Webアプリ作成
4．フレームワークを使用した
Webアプリの作成
－40 －
第5回 Webアプリ作成
フレームワークについて
フレームワークとは、システムにおいて共通的な機能や部品（画面表示、DBアク
セス、IO処理等）を提供するものです。
システム
画面表示
コントローラ
ユーザ
ロジック
DBアクセス
IO処理
基本的な機能
フレームワーク
この部分だけ開発
コントローラの定義付けに
よってユーザロジックが呼び出される
－41 －
第5回 Webアプリ作成
Strutsについて
Apache Tomcatなどのサーブレットコンテナ上で動作するWebアプリケーション
フレームワークのひとつです。
特徴
1.MVC (Model-View-Controller)モデルを採用したフレームワーク
⇒MVCモデルであるので、作業分担が容易な為、大きなシステム開発に
向いている。
2.仕様変更に対応しやすい
⇒デザインの変更はViewを修正、データベースの変更はModel,Controller
を修正,ロジックの変更はControllerを修正と、変更箇所が明確。
3.国際化対応
⇒メッセージリソースを、各国に対応した言語に設定可能
－42 －
第5回 Webアプリ作成
Strutsを用いたWeb開発
作成するアプリケーション１
http://localhost:8080/lesson2/view/InputName.jsp
ようこそ ○○さん
－43 －
第5回 Webアプリ作成
作成方法
ファイルから新規→プロジェクトを選択します
Tomcatプロジェクトを選択し、次へを押下します
－44 －
第5回 Webアプリ作成
プロジェクト名にlesson2と入力し、次へボタンを押下
コンテキスト～をチェックし、完了ボタンを押下
－45 －
第5回 Webアプリ作成
パッケージ・エクスプローラにlesson2フォルダができていることを確認してください。
－46 －
第5回 Webアプリ作成
－47 －
第5回 Webアプリ作成
ウィンドウ⇒設定
－48 －
第5回 Webアプリ作成
以下は講師の指示に従って操作をおこなってください。
1.Strutsライブラリの移行
2.JSPファイルの移行
3.Javaプログラムの移行
4.Eclipse設定
－49 －
© Copyright 2024 ExpyDoc
