Webプログラミング2 - shonan-it.ac.jp2012年 Webプログラミング湘南工科大学講義資料斉藤典明 Webプログラミング2 8. JSPによるWebプログラミング（1）

2012年 Webプログラミング湘南工科大学講義資料斉藤典明

Ｗｅｂプログラミング２

８. JSPによるWebプログラミング（１）

９. JSPによるWebプログラミング（２）

１０. JSPによるWebプログラミング（３）

１１. JSPによるWebプログラミング（４）


Web ブラウザ

エディタ等 ①作成

③確認

ＰＣ（クライアント／Webサーバ）

Tomcat

・コンテンツ： samp.html samp.jsp

mydir

http://localhost:8080/mydir/

index.html

samp.html

samp.jsp

②配置

（復習）動作概要（ＪＳＰ）


（復習）JSPの書式

●JSP 書式：ディレクティブ <%@ %> JSPから生成されるServletを制御宣言部 <%! %> 定数、メンバ変数、ユーザ定義メソッドを定義スクリプトレット<% %> スクリプトの記述式 <%= %> out.println( ); の短縮系コメント <%-- --%> コメントアウト

<%@ page contentType="text/html;charset=Shift_JIS" %> <HTML><TITLE>samp</TITLE><BODY> <%-- これは練習です。 --%> <%! int flag=100; %> <% out.print("Hello World!"); out.print(" "); out.print(new java.util.Date()); out.print( flag+100 ); %> <%= "Hello World" %> </BODY></HTML>

例


（復習）JSPプログラミング方法

●とりあえずやってみる（ＨＴＭＬ＋ＪＳＰ）

・動作確認：mydir 配下に以下を配置

samp.html <HTML> <TITLE>sample</TITLE> <BODY> Hello World </BODY> </HTML>

http://localhost:8080/mydir/samp.html または http://127.0.0.1:8080/mydir/samp.html

・ブラウザから以下のURLで確認

samp.jsp <%@ page contentType="text/html;charset=Shift_JIS" %> <HTML> <TITLE>sample</TITLE> <BODY> <%= "Hello World" %> </BODY> </HTML>

http://localhost:8080/mydir/samp.jsp または http://127.0.0.1:8080/mydir/samp.jsp


演習

（自分の好きなもの得意なものの）紹介サイト／解説サイトの開発

レストランや居酒屋の紹介サイト、地域やクラブの紹介サイト車やスポーツ選手の解説サイトなど扱うテーマは自由例えば：料理や目的別に分類されたカテゴリの中から目的のお店（レシピ）を選ぶと、そのお店（レシピ）の詳細が表示される。そこを訪問（作ってみた）人の感想も書き込めるようになっている。必要に応じて検索できるようになっている。


（１）ソースコードを共有フォルダから入手（２）改造方針を決めて改造（ブラウザで動作確認）・システムのテーマを決める ⇒ コンテンツの中身を決めるコンテンツを作る・つくりを細かくする ⇒ 見た目をきれいにする・規模を大きくする ⇒ データを増やす・追加機能を作る ⇒ 検索できるようにするデータを入力できるようにするなど（３）できたものをクラスで発表、レポートとして提出

演習の進め方


トップ画面メイン画面

Enter

レシピナビ

ロゴ

ボタンクリックでメイン画面に遷移

(２)トップ画面

index.html

enter.jpg

logo.jpg

画面例

(１) 画面遷移


料理１料理２料理３料理４・・・

写真

料理名のタイトル

説明文

コンテンツのメニュー料理名をクリックで右画面に料理のレシピが表示される初期画面はなにも表示されない


(３)メイン画面 main.html

menu.jsp

fristpage.html

show.jsp

画面例


１．ファイル構造本システムは次のようなファイルの配置構造をとる。

mydir WEB-INF

Index.html

main.html

img

data

fristpage.html

menu.jsp

show.jsp

enter.jpg logo.jpg

XXXX1.txt

XXXX1.jpg

XXX10.txt

XXX10.jpg

・・・

・・・

構造例

学籍番号フォルダ (number)


２．ファイルリスト本システムで作成するファイルは次のとおりである。（１）画像ファイル logo.jpg ・・・本システムのロゴ画像 enter.jpg ・・・本システムに入るためのアイコン content01.jpg ・・・同じファイル名のコンテンツに対応した画像ファイル・・・（コンテンツの数だけファイルを用意する） content10.jpg （２）HTMLファイル index.html ・・・本システムのトップページ main.html ・・・本システムのメインページ（フレームの設定ファイル） firstpage.html ・・・本システムのメインページにおける初期画面（３）JSPファイル menu.jsp ・・・コンテンツリストを生成するjspファイル show.jsp ・・・指定したコンテンツを表示するjspファイル

構造例


（４）データファイル content01.txt ・・・コンテンツファイルコンテンツファイルは下図のような１行目をヘッダとするデータ形式とする。ヘッダ部分は、Title: のあとにコンテンツの題名を記述する。・・・ content10.txt

Ｔｉｔｌｅ：

説明文

コンテンツファイルのデータ形式

構造例


① mydir の中に自分の学籍番号フォルダを作る

② 学籍番号フォルダ(=number)の中に

imgフォルダ

dataフォルダ

index.html

main.html

firstpage.html

dummy.html

を作る

③ htmlファイルを記述

index.htmlから main.html へのリンクもはる

画像ファイルを読み込んでも良い

④ ブラウザから確認する http://localhost:8080/mydir/学籍番号/

全体像を把握する

作業１


ソースコード例

（１）画像ファイル・・・略（２）HTMLファイル -------------------index.html------------------------ <HTML> <HEAD> <TITLE>実習課題</TITLE>  </HEAD> <BODY> <CENTER> <IMG SRC=“/mydir/number/img/logo.jpg”> <A HREF=“/mydir/number/main.html”> <IMG SRC=“/mydir/number/img/enter.jpg” BORDER=“0”> </A> </CENTER> </BODY> </HTML> -------------------------------------------------


-------------------main.html------------------------ <HTML> <HEAD> <TITLE>実習課題</TITLE>  <FRAMESET COLS="250,*" BORDER="0"> <FRAME NAME="left" SRC="/mydir/number/menu.jsp"> <FRAME NAME="right" SRC=“/mydir/number/firstpage.html"> </FRAMESET> </HEAD> </HTML> ----------------------------------------------------


まずはdummy.html で代用する


-------------------firstpage.html---------------------- <HTML> <HEAD> <TITLE>実習課題</TITLE>  </HEAD> <BODY> <CENTER> <IMG SRC="/mydir/number/img/logo.jpg"> </CENTER> </BODY> </HTML> ----------------------------------------------------



-------------------dummy.html---------------------- <HTML> <HEAD> <TITLE>実習課題</TITLE>  </HEAD> <BODY> ・リスト１ ・リスト２ ・リスト３ ・リスト４ ・リスト５ ・リスト６ ・リスト７ ・リスト８ ・リスト９ ・リスト１０ </BODY> </HTML> ----------------------------------------------------



①コンテンツを作成する

１０個程度、所定のデータ構造で記述し、所定のフォルダに配置

mydir/number/data の下に配置

②検索プログラム menu.jsp を作成する

③menu.jsp単体でブラウザから動作確認する

③ main.htmlの

dummy.htmlをmenu.jspに置き換える

④ブラウザで初期画面からの動作確認する

作業２

Ｔｉｔｌｅ： ○○××

説明文

XXX.txt


（４）データファイル -------------------content01.txt------------------- Title: カレーライスカレーライスの作り方は・・・材料は・・・ ---------------------------------------------------- ・・・コンテンツの数だけ同様のファイル形式で記述・・・ -------------------content10.txt------------------- Title: 味噌汁味噌汁の作り方は・・・材料は・・・ ----------------------------------------------------



方針


menu.jsp mydir

index.html

main.html

img

data

fristpage.html

XXXX1.txt XXX10.txt ・・・

その１．データフォルダ内のファイルの一覧を出力する

Ｔｉｔｌｅ： ○○××

説明文

ポイント①：特定のフォルダのファイルの

一覧を取り出す

ポイント②：ファイルの１行目の一部分を取り出すポイント③：１行目の不要な部分を消す

学籍番号フォルダ (number)


１．ファイルの入出力の扱い方

・ファイル操作の基本

実行プログラムからみたパスとＷｅｂから見たパスの違い

絶対パスと相対パスの違い

主要操作 Windows UNIX Java

ファイル一覧 dir ls list()

ファイル生成 createNewFile()

ファイルコピー copy cp

ファイル名変更 ren rename renameTo()

ファイル削除 del rm delete()

ディレクトリ作成 mkdir mkdir mkdir()

ディレクトリ削除 rd rm delete()

ディレクトリ ¥ / /

・ファイルパス

・ファイル（読み出し、書き込み） open ⇒ close

●Javaでは、以下のクラスで実施する：・Fileクラス

・FileReaderクラス

（BufferedReaderクラスも併用する）・FileWriterクラス

(BufferedWriterクラスも併用する）

解説


２．ファイルの一覧を取り出すプログラム例

data

file1.txt file2.txt file3.txt

<%@ page contentType=“text/html;charset=Shift_JIS” import="java.io.*,java.util.*" %> <HTML><HEAD><TITLE>実習課題</TITLE> <%! //変数の型宣言 String[] filelists; //コンテンツファイルを入れる配列 String filename; //コンテンツファイルを示す変数 FileReader readfile; //ファイル名を示す変数 BufferedReader line; //ファイルをハンドルするための変数 //コンテンツファイルを格納するディレクトリの変数 File datadir =new File(“c:/・・・/mydir/number/data"); %> </HEAD><BODY> <% //コンテンツディレクトリからファイルの一覧を読み出す filelists = datadir.list(); for (int i=0;i<filelists.length ; i++ ) { //ファイルの読み出し filename=datadir + "/" + filelists[i]; readfile = new FileReader( filename ); line = new BufferedReader( readfile ); while( line.ready() ) { out.println( line.readLine() + " " ); } line.close(); readfile.close(); } %> </BODY></HTML>

↑各自のPCのパスに修正

解説

Webブラウザ

出力

http://localhost:8080/mydir/samp1.jsp

samp1.jsp


３.ファイルの中身を確認するプログラム例

kiroku.txt

<%@ page contentType="text/html;charset=Shift_JIS" import="java.io.*,java.util.*" %> <HTML> <HEAD> <TITLE>実習課題</TITLE> <%! //コンテンツファイルを示す変数とファイル名の定義 String filename =“c:/・・・/mydir/number/kiroku.txt"; %> </HEAD> <BODY> <HR> <% //コンテンツファイルの読み出し FileReader readfile = new FileReader( filename ); BufferedReader line = new BufferedReader( readfile ); //ファイルの中身を１行づつ表示する（HTMLとして出力） while( line.ready() ) { out.println( line.readLine() + " " ); } //ファイルのクローズ処理 line.close(); readfile.close(); %> <HR> </BODY> </HTML>

samp2.jsp


解説

Webブラウザ

出力

http://localhost:8080/mydir/samp2.jsp


４．パターンマッチング

AAABBBCCCDDDEEEFFFXXXYYYZZZ XXX

AAABBBCCCDDDEEEFFF YYYZZZ

matcher

true/false

XXX

split

パターンマッチ(複数の方法あり）

分割

置換 XXX

split xxx

AAABBBCCCDDDEEEFFFxxxYYYZZZ

AAABBBCCCDDDEEEFFFXXXYYYZZZ

AAABBBCCCDDDEEEFFFXXXYYYZZZ

正規表現の利用で記述する ^ ・・・行の先頭 $ ・・・行末 . ・・・任意の一文字 * ・・・０回以上の繰り返しなど

解説


５．文字列に対するパターンマッチプログラム例

<%@ page contentType="text/html;charset=Shift_JIS" import="java.io.*,java.util.*,java.util.regex.*"%> <HTML> <HEAD> <TITLE>実習課題</TITLE> <%! //変数の型宣言 String Bunsyo="abc:defgh:ijk"; String[] Word; String Bunsyo2; %> </HEAD> <BODY> <% //分割 Word=Bunsyo.split(":"); for( int i=0 ; i< Word.length ; i++ ) { out.println( Word[ i ] + " "); } //置換 Bunsyo2=Bunsyo.replace(":","."); out.println( Bunsyo2 + " ");

//マッチ（正規表現なし） Pattern pattern = Pattern.compile("abc"); Matcher matchvalue; for( int i=0 ; i< Word.length ; i++ ) { matchvalue= pattern.matcher( Word[ i ] ); if( matchvalue.matches() ) { out.println( Word[ i ] +" " ); } } //マッチ（正規表現あり） pattern = Pattern.compile(".*a.*"); for( int i=0 ; i< Word.length ; i++ ) { matchvalue= pattern.matcher( Word[ i ] ); if( matchvalue.matches() ) { out.println( Word[ i ] +" " ); } } %> <HR> </BODY> </HTML>

←処理対象文字列

つづき

解説

samp3.jsp


（３）JSPファイル -------------------menu.jsp------------------- <%@ page contentType="text/html;charset=Shift_JIS" import="java.io.*,java.util.*"%> <HTML> <HEAD> <TITLE>実習課題</TITLE>  <%! //変数の型宣言 String[ ] filelists; //コンテンツファイルを入れる配列 String filename; //コンテンツファイルを示す変数 String filetitle; //コンテンツファイル内のヘッダを入れる変数 String titlename; //ヘッダからタイトル部分を抜き出した変数 File datadir; //コンテンツファイルを格納するディレクトリの変数 FileReader readfile; //ファイル内のデータを読み出すための変数 BufferedReader line; //ファイル内のデータを一行ごとに扱うための変数 %> </HEAD> -----------------（次ページへつづく）-----------------



----------------------(前ページから)------------------------- <BODY> <HR> <% //ディレクトリ内のファイル一覧 datadir =new File("c:/・・・/mydir/number/data"); //コンテンツディレクトリからファイルの一覧を読み出す filelists = datadir.list( ); // コンテンツファイルの数だけ繰り返す for (int i=0;i<filelists.length ; i++ ) { //ファイルの読み出し filename=datadir + "/" + filelists[i]; readfile = new FileReader( filename ); line = new BufferedReader( readfile ); // コンテンツファイルの１行目（＝ヘッダ）の読み出し filetitle = line.readLine( ); -----------------（次ページへつづく）-----------------

各自のＰＣで異なる



----------------------(前ページから)------------------------- //ヘッダの題名だけを抜き出し titlename = filetitle.replace("Title:", ""); //題名とファイル名をHTML形式で出力、 //ファイル名をURLの変数としてリンク先へ送信 out.println( "<A HREF=¥"/mydir/number/show.jsp? " + filelists[i] + " ¥"TARGET=¥"right¥"> " + titlename + "</A> "); //ファイルのクローズ処理 line.close( ); readfile.close( ); } %> <HR> </BODY> </HTML> ----------------------------------------------------



①一覧表示プログラム menu.jsp の出力では、

ファイル一覧から選択したファイルを引数にして表示プログラムに

渡すようなリンク（Aタグ）を作る。

②ファイル指定の入力があることを前提に表示プログラム show.jsp を作成。

③show.jsp単体を適宜ブラウザから動作確認する

（引数は手入力する）

④ブラウザで初期画面から動作を確認する

作業３


方針


menu.jsp

mydir WEB-INF

index.html

jsp

img

data XXXX1.txt XXX10.txt ・・・

２．選択したファイルの中身を右側フレームの画面に出力する

XXXX1.jpg XXX10.jpg ・・・

show.jsp

ポイント③：引数で入力されたファイル（テキストと画像）を表示する

ポイント④：あらかじめ決めておいたフォルダ構造（テキストと画像は

格納フォルダと拡張子が異なるだけ）に従って合成して出力

ポイント⑤：データファイルは１行目はヘッダなので表示させない


-------------------show.jsp------------------- <%@ page contentType= "text/html;charset=Shift_JIS" import="java.io.*,java.util.*"%> <HTML> <HEAD> <TITLE>実習課題</TITLE>  <%! //変数の型宣言 String datafile; //コンテンツのファイル名（URLの変数） String filename; //コンテンツファイルを示す変数 String picfile; //コンテンツの画像ファイル String filetitle; //コンテンツファイル内のヘッダを入れる変数 FileReader readfile; //ファイル内のデータを読み出すための変数 BufferedReader line; //ファイル内のデータを一行ごとに扱うための変数 %> </HEAD> -----------------（次ページへつづく）-----------------



----------------------(前ページから)------------------------- <BODY> <% //URLの変数から入力されたファイル名を取得 datafile=request.getQueryString( ); //ファイル名からコンテンツの画像ファイルを指定 picfile = datafile.replace("txt", "jpg"); //画像ファイルをHTML形式のリンクとして出力 out.println("<CENTER><IMG SRC=¥"/mydir/number/img/"+ picfile + "¥"> </CENTER> " ); //コンテンツファイルの読み出し filename="c:/・・・/mydir/number/data/" + datafile; readfile = new FileReader( filename ); line = new BufferedReader( readfile ); //最初の一行（ヘッダ）を無視する String filetitle = line.readLine( ); -----------------（次ページへつづく）-----------------


各自のＰＣで異なる


----------------------(前ページから)------------------------- //二行目以降はコンテンツなので表示する（HTMLとして出力） while( line.ready( ) ) { out.println( line.readLine( ) + " " ); } //ファイルのクローズ処理 line.close( ); readfile.close( ); %> <HR> </BODY> </HTML> ----------------------------------------------------



①基本動作が確認できたら、自分なりの改造をしてみる。

②初期画面に自分の学籍番号と名前を入れる。

③自分のIPアドレスを調べ友人にアクセスしてもらう

（反対に友人の作成したWebページもアクセスしてみる）

④作成した自分の学籍番号フォルダを所定の場所に提出（課題終了）

作業４


<HTML> <TITLE>samp</TITLE> <BODY> <FORM METHOD="POST" ACTION="http://localhost/mydir/samp4.jsp"> 入力してください。<INPUT TYPE="text" NAME="sono1"> 入力してください。<INPUT TYPE="text" NAME="sono2"> <INPUT TYPE="submit" VALUE="submit"> </FORM> </BODY> </HTML>

samp4.html

<%@ page contentType="text/html;charset=Shift_JIS" %> <HTML> <%! String input; %> <TITLE>samp</TITLE> <BODY> <% request.setCharacterEncoding("Shift_JIS"); input=request.getParameter("sono1"); out.print( input ); input=request.getParameter("sono2"); out.print( input ); %> </BODY> </HTML>

samp4.jsp

入力したデータが表示される

応用例１．ブラウザからの入力受け付け

http://localhost:8080/mydir/samp4.html


応用例２．ブラウザからの入力データをセーブする <%@ page contentType="text/html;charset=Shift_JIS" import="java.io.*,java.util.*" %> <HTML> <%! //変数宣言 String input1,input2; //書き出しファイル名 String filename =“c:/・・・/mydir/kiroku.txt"; %> <TITLE>samp</TITLE><BODY> <% //データの受取 request.setCharacterEncoding("Shift_JIS"); input1=request.getParameter("sono1"); input2=request.getParameter("sono2"); //上書きの指定（どちらかを有効にする） FileWriter writefile = new FileWriter( filename); //追記の指定（どちらかを有効にする） //FileWriter writefile = new FileWriter( filename, true ); //書き出し BufferedWriter line = new BufferedWriter( writefile ); line.write( input1 ); line.newLine(); line.write( input2 ); line.newLine(); //ファイルのクローズ処理 line.close(); writefile.close(); %> </BODY></HTML>


kiroku.txt

samp5.jsp


応用例３．テキストファイルＤＢ

file1.txt file2.txt file3.txt

sampdata

ポイント①：データの内容を１枚のテキストファイル(csv形式など)に記録（１件のデータ量は適度にしておく：文章を丸々入れない、文字数制限をするか、コンテンツへのリンクにしておくなど）ポイント②：テキストファイルに対して検索などをかける（カラムごとに検索をかける）

CSVデータの例

カレーライス, 2012/10/10, 斉藤, content1.txt ・・・味噌汁, 2012/11/11, 斉藤, content10.txt ・・・


応用例４．JavaScriptの活用

①URLの入力

②検索入力画面

⑤検索結果の表示

Webサーバ

③入力確認画面 JavaScript

④検索中画面 JavaScript

http://localhost・・・

Webプログラミング2 - shonan-it.ac.jp2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明 Webプログラミング2 8. JSPによるWebプログラミング（1）

Documents

Webプログラミング2 - shonan-it.ac.jp2012年 Webプログラミング湘南工科大学講義資料斉藤典明 Webプログラミング2 8. JSPによるWebプログラミング（1）