ウエブアプリケーション 2015
第15回 PHP その3
2016/1/14
海谷 治彦
1http://www0.info.kanagawa-u.ac.jp/~kaiya/wa/
dotcampus ショートコード 179067
目次
• フレームワークについて CakePHP • 全体のまとめ
フレームワーク
• 別にウエブアプリに特化した概念ではない． • ライブラリと同様，再利用のためのコード群． • ライブラリと違い(というか逆に)，全体の枠組みは， ほぼできており，利用者は，一部，クラスやメソッド のみ記述することで，アプリが完成する． • 一般に，全体の作業(業務)の流れは既に作成され ており，個々のステップでの処理をカスタマイズす る感じ． • フレームワークの使い方を知るのにとても時間が かかる．(実際に書くコードは少なくても) 3CakePHP
• 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をつかってください．
アプリ作成の流れ
• 図中，○は処理，□はデータをあらわす． • 手作業で作成しなければいけないのは，スキーマ ファイルのみ． • 他は，多少のy/n指定がいるが，基本，自動生成さ れる． 6 テキスト エディタ スキーマ ファイル テーブル 生成 RDBの テーブル モデル の生成 コントローラー の生成 ビュー の生成 モデルの PHPソース コントローラーの PHPソース ビューの PHPソースデータの概要
• スキーマファイル • 基本，ER図をPHPの配列を用いて，記述したもの． • 要はデータ構造． • 例は後述． • モデルのPHPソース • スキーマファイルをアプリ中で実際に使うPHPクラスに 変換したもの． • コントローラーのPHPソース • モデルに対する処理を実装したPHPクラス． • 通常，CRUD(後述)の処理が実装されている． • ビューのPHPソース • ブラウザに表示される見た目の部分のクラス． 7MVCについて
• Model-View-Controller の略． • オブジェクト指向プログラミングで習ったかもしれない． • アプリケーションを作る際に上記の三つに分けて設計すると良い という指針． • Model • アプリで扱う業務や活動のみを扱う部分． • ショッピングサイトの業務なら商品，注文，顧客等がコレに相当． • 基本，システムとは関係ない業務依存の部分． • 主に普通のクラスやJavaBeans等で実現される． • View • システムとしてユーザーと相互作用する部分．入出力． • ウエブアプリならウエブページに相当し，主にJSPが担当． • Controller • ModelとViewを関連付け，業務の進行を制御する部分． • 主にServletが担当． 8 復習MVCのメリット
• 特にModelと他を分離することで，実現方法を簡単 に変更できる． • 例えば，ウエブアプリをやめて，アンドロイドの専用アプ リを作ろうという時にも，Modelはそっくりそのまま流用 できる．(Javaの場合，特に) • Modelで表現される業務は往々にして類似したも のが多いので，再利用ができる． • 我々が想像する以上に業務というのはワンパターン • アマゾンも楽天もやってることはほぼ同じ． • 吉野家，松屋，すき家もほぼ同じ． • アプリケーションフレームワーク等． 9 復習スキーマファイルの例
• 下記の例では，id, name, age を持つデータ $users が定義されている． • 複数のデータを定義してもよい．
• スキーマとはデータ構造のことと考えてもよい．
10
<?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() ); } ?>
CRUD
• Create, Read, Update, Delete の接頭語 (Acronym). • データに対する最も一般的な処理群を表す．
• これに加えて，一覧(Index)の処理も実装する場合 がある．
モデル等の生成
• 以下のような対話的なツールで生成できる． • 基本，y/nやdefault値を選べばよい．
• 無論，凝ったことをするにはそれなりの設定が必要．
作成された画面例
• ユーザーのCRUD+Iが実行可能となっている．
• 以下を作るのに実際に書いたのはスキーマのみ．
エピローグ
本講義の目的・手段・顛末
• ウエブアプリケーションの仕組みを理解し，将来の 技術革新に追従できる素養を身に着ける． • 現時点でのウエブアプリケーションを構成する技 術や言語を知り，試用してみる． • 今後も急速に変化し続けるウエブアプリケーション の動向を理解し，必要な時に実践できるでしょう． 15 復習クライアントサイドの具体的技術
• HTML5, CSS3 • ブラウザ上で文字や図形を描画するための言語 • 音声や動画の再生も可能． • クライアント側でのデータ保存に関する仕様もある． • JavaScript • ブラウザ上で計算を行うための言語． • 基本，C言語に似てる． • 文字列やデータ等の変換も計算として行える． • 事実上，唯一のクライアントサイドの処理言語 16 復習クライアントサイドの主な役割
• 入力，表示，データの送受信 17 入力 表示 送受信 復習BOM自体の主な変数・関数
• innerHeight • 画面内側の高さ • innerWidth • 画面内側の幅 • onclick • 画面がクリックされた際に呼び出される関数を保持する変数． • 一般に Callback 関数と呼ばれる． • alert() • 画面に文字列を含む小さいウインドウを表示して警告を利用者に 示すことができる． • open() • 新規windowをあける，ブラウザによってはタブか． • close() • windowを閉じる．ブラウザによってはタブか． • たいてい，設定で禁止されている場合が多い． 18 サンプル windowOwnProps.html 復習BOMの主な変数
• document • 現在表示している文書をあらわすオブジェクト • document.write 等もこのオブジェクトのメソッド(関数) • たぶん，もっともよくお世話になるオブジェクト • location • 現在表示しているURLを表すオブジェクト • navigator • ブラウザの情報 • history • ブラウザの表示履歴 19 サンプル (document以外の動作テスト) windowProps.html 復習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> <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>
JavaScript
の例
JSPの例
26 <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>
ステートレス (状態が無い)
• httpはリクエストとレスポンスの対からなる． • あるブラウザから連続してリクエスト/レスポンスを 行っても，それらの間を関係付けるものは無い． • このような特徴をステートレスと呼ぶ． ブラウザ JSプログラム ・ ・ ・ ・ ・ 入力画面準備 選択肢を送る 結果が返ってくる サーバー 側のデータ サーバー プログラム web storage等 27 一連処理という意識は無い 一連処理という意識は無い 一連処理という意識は無い 復習ステートレスの例
• 以下のような状態遷移図に従うHTMLページ群を作成 することは可能である． • サンプル中の vendor0/ 下のHTMLファイル参照． • しかし，単なるばらばらのHTMLファイル群なので，状 態遷移に沿わないでページにアクセスすることができ る． • 例えば，金を払わず Coke や Fanta を得られる． 28 start moreCoin 50JPY showMenu 50JPY coke fanta 100JPY dropCoke dropFanta 復習状態をウエブアプリで使うには？
• ブラウザが状態を示す値(状態変数)を記憶し，毎 回，サーバーにその値を送信する． • ウエブストレージやクッキー(Cookie)が利用可能． • ブラウザが「一連の処理」を示す識別子を記憶し， 毎回，サーバーにその値を送信する． • この一連の処理をセッション(session)と呼ぶ． • この識別子をセッションIDと呼ぶ． • 具体的な状態を示す値は，サーバー側で，セッションID と対応付けて記録する． 29 復習Formの典型様式
30
<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> メッセージを受け取るページを 指定．このページはリクエスト処 理の能力がないといけない． get もしくは post を指定． 違いは後述． ユーザーの入力値を最 終的に受け取りページ に送るための呪文． ユーザー入力場所の指 定．詳細は後述． ユーザー入力場所の指 定．詳細は後述． 復習
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 復習
