目次

http://www0.info.kanagawa-u.ac.jp/~kaiya/wa/ dotcampus ショートコード 179067 ウエブアプリケーション 2015 第 15 回 PHP その3 2016/1/14 海 谷 治 彦 1

目 次 フレームワークについて CakePHP 全 体 のまとめ 2

フレームワーク 別 にウエブアプリに 特 化 した 概 念 ではない. ライブラリと 同 様, 再 利 用 のためのコード 群. ライブラリと 違 い(というか 逆 に), 全 体 の 枠 組 みは, ほぼできており, 利 用 者 は, 一 部,クラスやメソッド のみ 記 述 することで,アプリが 完 成 する. 一 般 に, 全 体 の 作 業 ( 業 務 )の 流 れは 既 に 作 成 され ており, 個 々のステップでの 処 理 をカスタマイズす る 感 じ. フレームワークの 使 い 方 を 知 るのにとても 時 間 が かかる.( 実 際 に 書 くコードは 少 なくても) 3

CakePHP PHP 用 のフレームワーク. JavaのSpring/Struts 等 に 比 べればマイナーだが PHPではそこそこメジャー. RDBの 表 から,Model, Controller, View を 対 話 的 に 生 成 する 機 能 を 有 する. 要 は, 業 務 モデル(DBの 表 )を 作 れば,ウエブアプ リに 必 要 な 入 出 力 処 理 や 画 面 を 生 成 してくれる. 本 授 業 では, 以 下 のバージョンを 使 う. cakephp 2.5.8 PHP 5.2.8でも 動 くため, 授 業 でのバージョンは 5.3.3 4

http://cakephp.jp/ ダウンロード この 授 業 では2.5.8をつかってください. 5

アプリ 作 成 の 流 れ 図 中, は 処 理, はデータをあらわす. 手 作 業 で 作 成 しなければいけないのは,スキーマ ファイルのみ. 他 は, 多 少 のy/n 指 定 がいるが, 基 本, 自 動 生 成 さ れる. テキスト エディタ テーブル 生 成 モデル の 生 成 モデルの PHPソース ビュー の 生 成 スキーマ ファイル RDBの テーブル コントローラー の 生 成 コントローラーの PHPソース ビューの PHPソース 6

データの 概 要 スキーマファイル 基 本,ER 図 をPHPの 配 列 を 用 いて, 記 述 したもの. 要 はデータ 構 造. 例 は 後 述. モデルのPHPソース スキーマファイルをアプリ 中 で 実 際 に 使 うPHPクラスに 変 換 したもの. コントローラーのPHPソース モデルに 対 する 処 理 を 実 装 したPHPクラス. 通 常,CRUD( 後 述 )の 処 理 が 実 装 されている. ビューのPHPソース ブラウザに 表 示 される 見 た 目 の 部 分 のクラス. 7

復 習 MVCについて Model-View-Controller の 略. オブジェクト 指 向 プログラミングで 習 ったかもしれない. アプリケーションを 作 る 際 に 上 記 の 三 つに 分 けて 設 計 すると 良 い という 指 針. Model アプリで 扱 う 業 務 や 活 動 のみを 扱 う 部 分. ショッピングサイトの 業 務 なら 商 品, 注 文, 顧 客 等 がコレに 相 当. 基 本,システムとは 関 係 ない 業 務 依 存 の 部 分. 主 に 普 通 のクラスやJavaBeans 等 で 実 現 される. View システムとしてユーザーと 相 互 作 用 する 部 分. 入 出 力. ウエブアプリならウエブページに 相 当 し, 主 にJSPが 担 当. Controller ModelとViewを 関 連 付 け, 業 務 の 進 行 を 制 御 する 部 分. 主 にServletが 担 当. 8

復 習 MVCのメリット 特 にModelと 他 を 分 離 することで, 実 現 方 法 を 簡 単 に 変 更 できる. 例 えば,ウエブアプリをやめて,アンドロイドの 専 用 アプ リを 作 ろうという 時 にも,Modelはそっくりそのまま 流 用 できる.(Javaの 場 合, 特 に) Modelで 表 現 される 業 務 は 往 々にして 類 似 したも のが 多 いので, 再 利 用 ができる. 我 々が 想 像 する 以 上 に 業 務 というのはワンパターン アマゾンも 楽 天 もやってることはほぼ 同 じ. 吉 野 家, 松 屋,すき 家 もほぼ 同 じ. アプリケーションフレームワーク 等. 9

スキーマファイルの 例 下 記 の 例 では,id, name, age を 持 つデータ $users が 定 義 されている. 複 数 のデータを 定 義 してもよい. スキーマとはデータ 構 造 のことと 考 えてもよい. <?php class AppSchema extends CakeSchema { public $users = array( 'id' => array('type'=>'integer', 'key'=>'primary', 'null'=>false, 'default'=>null), 'name' => array('type'=>'string', 'length'=>255, 'null'=>false, 'default'=>''), 'age' => array('type'=>'integer', 'null'=>false, 'default'=>0), 'indexes' => array('primary'=>array('column'=>'id', 'unique'=>1)), 'tableparameters' => array() ); }?> 10

CRUD Create, Read, Update, Delete の 接 頭 語 (Acronym). データに 対 する 最 も 一 般 的 な 処 理 群 を 表 す. これに 加 えて, 一 覧 (Index)の 処 理 も 実 装 する 場 合 がある. 11

モデル 等 の 生 成 以 下 のような 対 話 的 なツールで 生 成 できる. 基 本,y/nやdefault 値 を 選 べばよい. 無 論, 凝 ったことをするにはそれなりの 設 定 が 必 要. 12

作 成 された 画 面 例 ユーザーのCRUD+Iが 実 行 可 能 となっている. 以 下 を 作 るのに 実 際 に 書 いたのはスキーマのみ. 13

エピローグ 14

復 習 本 講 義 の 目 的 手 段 顛 末 ウエブアプリケーションの 仕 組 みを 理 解 し, 将 来 の 技 術 革 新 に 追 従 できる 素 養 を 身 に 着 ける. 現 時 点 でのウエブアプリケーションを 構 成 する 技 術 や 言 語 を 知 り, 試 用 してみる. 今 後 も 急 速 に 変 化 し 続 けるウエブアプリケーション の 動 向 を 理 解 し, 必 要 な 時 に 実 践 できるでしょう. 15

復 習 クライアントサイドの 具 体 的 技 術 HTML5, CSS3 ブラウザ 上 で 文 字 や 図 形 を 描 画 するための 言 語 音 声 や 動 画 の 再 生 も 可 能. クライアント 側 でのデータ 保 存 に 関 する 仕 様 もある. JavaScript ブラウザ 上 で 計 算 を 行 うための 言 語. 基 本,C 言 語 に 似 てる. 文 字 列 やデータ 等 の 変 換 も 計 算 として 行 える. 事 実 上, 唯 一 のクライアントサイドの 処 理 言 語 16

復 習 クライアントサイドの 主 な 役 割 入 力, 表 示,データの 送 受 信 表 示 送 受 信 入 力 17

復 習 BOM 自 体 の 主 な 変 数 関 数 innerheight 画 面 内 側 の 高 さ innerwidth 画 面 内 側 の 幅 onclick サンプル windowownprops.html 画 面 がクリックされた 際 に 呼 び 出 される 関 数 を 保 持 する 変 数. 一 般 に Callback 関 数 と 呼 ばれる. alert() 画 面 に 文 字 列 を 含 む 小 さいウインドウを 表 示 して 警 告 を 利 用 者 に 示 すことができる. open() 新 規 windowをあける,ブラウザによってはタブか. close() windowを 閉 じる.ブラウザによってはタブか. たいてい, 設 定 で 禁 止 されている 場 合 が 多 い. 18

復 習 BOMの 主 な 変 数 document 現 在 表 示 している 文 書 をあらわすオブジェクト document.write 等 もこのオブジェクトのメソッド( 関 数 ) たぶん,もっともよくお 世 話 になるオブジェクト location 現 在 表 示 しているURLを 表 すオブジェクト navigator ブラウザの 情 報 history ブラウザの 表 示 履 歴 サンプル (document 以 外 の 動 作 テスト) windowprops.html 19

復 習 DOM: Document Object Model 表 示 されているページのデータにアクセスするた めのオブジェクト. 本 来,window.document. と 書 くが,window. は 略 せるので,document. と 書 くのが 普 通. ある 意 味,もっともJSを 特 徴 的 に 使 う 際 に 重 要 とな るデータ 構 造. 構 造 は 無 論, 個 々のページに 依 存 する. 20

復 習 できること ページ 中 の 要 素 を 変 更 できます. スタイルも 含 めて 変 更 できます. 要 素 の 中 身 (innerhtml)が 変 更 できます. 要 素 の 属 性 も 変 更 できます. <img src= xxx alt= image > の src alt 等 が 属 性 かなり 後 の formhiden.html 参 照 ページ 中 に 要 素 の 追 加 削 除 ができます. ページ 中 の 要 素 に 対 するCallbackを 設 定 できます. 例 えば,<div></div>の 要 素 を 押 したら, 警 告 がでると か. 21

復 習 サーバーサイドの 具 体 的 技 術 JavaによるJSP/Servlet 銀 行 系 等 の 大 規 模 で 信 頼 性 の 必 要 なシステム 向 け. PHP お 手 軽 にサイトを 作 るサーバーサイド 言 語. Cに 似 ている. Ruby on Rails 昨 今, 流 行 っている 模 様.わりと 頑 丈. 伝 統 的 なCGI (Common Gateway Interface) Perl, Ruby, C 等 でサーバー 側 処 理 をするもの. いまどきは 見 かけない. 22

復 習 サーバーサイドの 主 な 役 割 検 索, 計 算,データ 保 存, 手 順 のナビゲート, 画 面 データの 生 成 等 送 受 信 計 算 生 成 検 索 データ 保 存 23

HTMLにコードを 埋 め 込 む ブラウザまで 埋 め 込 まれたコードが 届 く. JavaScript サーバーで 実 行 されHTML 等 に 展 開 される. JSP PHP 24

<!DOCTYPE html> <html> <head> <meta charset="utf-8"><title>テストの 問 題 </title> <script> onload=function(){ var lis=document.getelementsbytagname("li"); var w=document.getelementbyid("want"); var x="init"; if(lis==undefined w==undefined){ x="none"; }else{ for(i=0; i<lis.length; i++) if(lis[i]==w) { x=(i+1); lis[i].style.textdecoration="underline"; } } var cho=document.getelementbyid("choice"); if(cho!=undefined) cho.innerhtml=x; } </script> </head> JavaScript の 例 <body> Which beer do you want? <span id="choice">x</span> <ol> <li>guinness (Ireland) <li>beck (Deutschland) <li id="want">heineken (Netherlands) <li>grolsch (Netherlands) </ol> </body> </html>

JSPの 例 <HTML> <HEAD> <TITLE> JSP loop </TITLE> </HEAD> <BODY> <ul> <% int i; for(i=0; i<10; i++){ %> <li> number <%= i*3 %> <% } %> </ul> </BODY> </HTML> <HTML> <HEAD> <TITLE> JSP loop </TITLE> </HEAD> <BODY> <ul> <li> number 0 <li> number 3 <li> number 6 <li> number 9 <li> number 12 <li> number 15 <li> number 18 <li> number 21 <li> number 24 <li> number 27 </ul> </BODY> </HTML> 26

復 習 ステートレス ( 状 態 が 無 い) httpはリクエストとレスポンスの 対 からなる. あるブラウザから 連 続 してリクエスト/レスポンスを 行 っても,それらの 間 を 関 係 付 けるものは 無 い. このような 特 徴 をステートレスと 呼 ぶ. 一 連 処 理 という 意 識 は 無 い 入 力 画 面 準 備 ブラウザ JSプログラム web storage 等 選 択 肢 を 送 る 結 果 が 返 ってくる サーバー プログラム サーバー 側 のデータ 27

復 習 ステートレスの 例 以 下 のような 状 態 遷 移 図 に 従 うHTMLページ 群 を 作 成 することは 可 能 である. サンプル 中 の vendor0/ 下 のHTMLファイル 参 照. しかし, 単 なるばらばらのHTMLファイル 群 なので, 状 態 遷 移 に 沿 わないでページにアクセスすることができ る. 例 えば, 金 を 払 わず Coke や Fanta を 得 られる. 50JPY start 100JPY fanta dropfanta morecoin 50JPY showmenu coke dropcoke 28

復 習 状 態 をウエブアプリで 使 うには? ブラウザが 状 態 を 示 す 値 ( 状 態 変 数 )を 記 憶 し, 毎 回,サーバーにその 値 を 送 信 する. ウエブストレージやクッキー(Cookie)が 利 用 可 能. ブラウザが 一 連 の 処 理 を 示 す 識 別 子 を 記 憶 し, 毎 回,サーバーにその 値 を 送 信 する. この 一 連 の 処 理 をセッション(session)と 呼 ぶ. この 識 別 子 をセッションIDと 呼 ぶ. 具 体 的 な 状 態 を 示 す 値 は,サーバー 側 で,セッションID と 対 応 付 けて 記 録 する. 29

復 習 Formの 典 型 様 式 メッセージを 受 け 取 るページを 指 定.このページはリクエスト 処 理 の 能 力 がないといけない. get もしくは post を 指 定. 違 いは 後 述. <form action="http://www.example.com/form.php" method="post"> Topic: <input type="text" name="topic" size="20"> <br> <textarea rows="5" cols="22" name="feedback"> </textarea> <br> <input type="submit" value="send"> </form> ユーザーの 入 力 値 を 最 終 的 に 受 け 取 りページ に 送 るための 呪 文. ユーザー 入 力 場 所 の 指 定. 詳 細 は 後 述. 30

復 習 GETとPOST GET 本 来 はサーバーからのデータ 取 得 リクエストに 用 いる. よって,クライアント 側 から 原 則 データを 送 ることはできない. しかし,URL 自 体 にデータを 付 記 することで,データを 無 理 やり 送 ることが 可 能 となっている. 送 ったデータはURLを 見 ただけで 丸 見 え. POST サーバーにデータを 送 る 本 来 のリクエスト. リクエストの 本 体 (ヘッダーより 下 )に 送 るデータが 付 記 される. 一 応,ぱっと 見 にはデータは 見 えないが, 暗 号 化 されていな いHTTPは 簡 単 に 傍 受 できるので, 実 際 にはデータは 丸 見 え. 31

Form 入 力 値 を 取 り 出 す 基 本 的 に form の action で 指 定 されたページでの み 取 り 出 せる. Key-value の 連 想 配 列 になっているので,keyをあ らかじめ 知 っておいて,それで 取 り 出 す. 言 語 によって 取 り 出 し 方 はさまざま. PHP: 連 想 配 列 が 直 に 見 えている. JSP/Servlet: request.getparameter() 等 のメソッドで 値 を 取 り 出 せる. 取 り 出 した 値 を 継 続 的 に 使 いたいなら,sessionの attributeにしたり,cookieにしまったり,dbに 入 れ たりしないといけない. 32

復 習 ウエブブラウザ ソフトウェアの 種 類 IE, Firefox, Chrome 等 のブラウザ. ウエブサーバー HTTPによりブラウザとの 通 信 を 行 うソフトウェア Apache, IIS, Nginx 等 が 具 体 例. アプリケーションサーバー 特 定 の 業 務 や 活 動 の 手 順 をガイドするソフトウェア. 本 授 業 ではtomcat(+spring 等 )がこの 位 置 づけに 近 い. データベースマネージメントシステム ( 略 してデータベース or DBMS) データを 永 続 化 するためのソフトウェア. MySQL, MongoDB 等 モジュール 各 ソフトウェアの 機 能 拡 張 をするための 部 品 実 際 はOSの 仲 介 がハードとの 間 に 必 ず 入 るが,それは 省 略. 33

復 習 構 成 例 2: 比 較 的 大 規 模 航 空 券 予 約 等 のシステム ( 現 実 とは 異 なります) VAIO : クライアント Chrome : ウエブブラウザ HTTPS 子 会 社 のサーバー : サーバー ANAのサイト : サーバー オラクルの : データベース IIS : ウエブサーバー AJP 予 約 システム : アプリケーションサーバー VISA Card : サーバー 決 済 システム : アプリケーションサーバー Master Card 決 済 システム : アプリケーションサーバー 34

最 終 演 習 提 出 は 必 須 です. 締 切 は1 週 間 後 くらいでお 願 いし ます.テキストファイルもしくはPDFでお 願 いします. 1. 本 授 業 において 面 白 かった 話 題 を200 字 以 上 で 述 べてください. 2. 本 授 業 で 難 しかった 話 題 を200 字 以 上 で 述 べてく ださい. 3. 本 授 業 で 取 り 上 げてほしかった 話 題 があれば 列 挙 してください. 以 上,よろしくお 願 いします. 35

過 去 の 演 習 について もし, 過 去 の 演 習 を 提 出 していない 方 がいれば, 今 月 中 に 提 出 をしてください. 遅 れても, 出 さないよりだしたほうがマシです. 既 に 提 出 している 方 は 再 提 出 しないでください.タ イムスタンプが 上 書 きされて 遅 提 出 扱 いになってし まいますので. 36

半 年 間,ご 苦 労 さまでした 試 験,がんばってください. 前 にも 告 知 しましたが, 試 験 には, 本 を 含 め 紙 類 のみ 無 制 限 に 持 ち 込 み 可 能 です. PC, 携 帯 電 話 等 の 電 子 機 器, 技 術 者 や 専 門 家 (お 兄 さんやお 父 さん 等 )の 持 込 は 不 可 です. 以 上 37