Microsoft PowerPoint - CakePHPforDesign.ppt

Save this PDF as:

WORD PNG TXT JPG

Size: px

Start display at page:

Download "Microsoft PowerPoint - CakePHPforDesign.ppt"

けいしょうおおふさ
1 years ago
Views:

Transcription

1 デザイナー向けCakePHP 勉強会 1 CakePHPのデザイン周辺 ECWorks 滝下真玄 (MASA-P)

2 自己紹介 CakePHPのデザイン周辺 1

3 自己紹介 CakePHPのデザイン周辺 2

4 このセッションの着地点と内を編集すればCakePHPにデザインが適用できる CakePHPのデザイン周辺 3

5 CakePHPの仕組み CakePHPのデザイン周辺 4

6 CakePHPの仕組み HTMLの場合 HTMLファイルが呼び出されるのみリクエストサーバ処理レスポンス 5

7 CakePHPの仕組み PHPの場合各処理の役割は任意 DBアクセス計算表示などは好きなところに実装処理 A リクエスト処理 B 処理 C サーバ処理レスポンス 6

8 CakePHPの仕組み PHPの場合キライ皆さんが苦手な部分 <html> <?php ほにゃらららららららら?> <?php ほにゃらららららららら?> <?php ほにゃらららららららら?> </html> 7

9 CakePHPの仕組み WordPressの場合ここを編集してデザインを適用 Index.php リクエストテーマサーバ処理レスポンス 8

10 CakePHPの仕組み WordPressの場合 <?php get_header();?> index.php header.php single.php sidebar.php archives.php footer.php <?php the_post();?> <?php get_sidebar();?> <?php get_footer();?> index.php 9

11 CakePHPの仕組み WordPressの場合キリトリセンキリトリセン <html> header.php index.php sidebar.php キリトリセン footer.php </html> 10

12 CakePHPの仕組み CakePHPの場合ここを編集してデザインを適用コントローラモデル(M) (C) リクエストビュー(V) サーバ処理レスポンス 11

13 CakePHPの仕組み Q モデルビューコントローラ(MVC)ってなにモデルビューコントローラデータベースなどのデータソースと連携しデータを入出力したり加工をしたりするビジネスロジック処理結果やデータを表示するつまり動的にHTML 等を出力するモデルやビューあるいは各処理間でデータを受け流したり処理の制御を行う渡 12

14 CakePHPの仕組み CakePHPなどフレームワークの処理の基本単位コントローラとアクションブログシステムのコメント投稿機能を実現する Postsコントローラ投稿データを追加する投稿データを編集する投稿データを削除する addアクション editアクション deleteアクション 13

15 CakePHPの仕組み URLとコントローラアクションの関係 /controllers/action/params/ コントローラ名は複数形小文字で名前を定義するアクションは小文字なら何でもOK 上記はデフォルトのもので定義することでURLを変更することが出来る(つまりこのようになるとは限らない) 14

16 CakePHPの仕組みコントローラとビューの関係 PostsController 基本はアクションに対して一対一の関係しかし処理によって別のものを呼ぶことも可能 add add edit delete edit or edit_member delete 15

17 CakePHPの仕組み CakePHPのビュービューテンプレート(ファイル) 各アクションに一対一でひもづけるファイル一般的にビューという場合はこのファイルのことを指すレイアウトコントローラーで共通のビューを構成するもっとも外枠の部分 WordPressで言えばindex, header, footerを足しあわせたものエレメント各ビュー共通で使えるパーツ的なものなくてもOK 16

18 CakePHPの仕組み <html> レイアウト CakePHPのビューキリトリセンエレメントビューテンプレート (ファイル) エレメント </html> 17

19 デザイン関連ファイルの配置 18

20 デザイン関連ファイルの配置一般的に CakePHPのファイルはサーバにもこの通りに展開されるで囲ったところが重要な場所 19

21 デザイン関連ファイルの配置エレメントファイルを格納する場所エラー表示ビューを格納する場所(今回は省略) カスタムヘルパーを格納する場所(今回は省略) レイアウトファイルを格納する場所 (今回は省略) postsコントローラに対するビューを格納する場所 (今回は省略) 20

22 デザイン関連ファイルの配置各アクションに対するビューファイル制御によって異なるビューを呼び出したい場合も同コントローラ内にファイルを配置する 21

23 デザイン関連ファイルの配置 (今回は省略) (今回は省略) (今回は省略) (今回は省略) デフォルトのレイアウトコントローラで特に指定しなければこの名前のファイルが適用されるそのほかに使用したいレイアウトがあれば配置する 22

24 デザイン関連ファイルの配置 (今回は省略) 空のファイルエレメントファイル 23

25 デザイン関連ファイルの配置 CSSファイルを格納する場所その他ファイルを格納する場所画像ファイルを格納する場所 JavaScriptファイルを格納する場所.htaccessファイル (今回は省略) ファビコン(favorite iconファイル) リクエスト時に必ず呼ばれるindex.php (今回は省略) 24

26 デザイン関連ファイルの配置パス指定サイト内リンクに関する注意点 views/ posts/ index.ctp webroot/ img/ picture.png 例えばビュー内で画像を表示したい場合 webrootがdocument rootになるため相対パスで表現することは出来ない../../webroot/img/picture.php /img/picture.php 25

27 デザイン関連ファイルの配置パス指定サイト内リンクに関する注意点デフォルトのコントローラアクションに対するURLはデフォルトではだが設計仕様によってはこのルールにならない場合があるリンク切れの可能性もこれらを解決するためにヘルパーを活用する 26

28 ビューの記述 27

29 ビューの記述 <html> レイアウト CakePHPのビューキリトリセンエレメントビュー(ファイル) エレメント </html> 28

30 ビューの記述レイアウト <html> レイアウト <?php echo $content_for_layout;?> </html> ビューを表示する場所最低限これがないとビューが反映されない 29

31 ビューの記述ビュー(ファイル) エレメントビュー(もしくはエレメント) <?php echo $this->html->image( picture.png );?> <?php echo $this->html->link( カートを見る, array( controller => carts, action => viewcart ));?> <?php echo $this->element( example );?> 30

32 ビューの記述ヘルパーについて Htmlヘルパーリンクやimage CSSやJavaScriptのインポートなど Formヘルパーフォームタグの生成全般 Paginateヘルパーページング処理(ページ番号リンクやソーティングなど) などなど 31

33 このセッションのまとめ viewsとwebroot内を編集すればCakePHPにデザインが適用できる 32

34 ご静聴ありがとうございました 33

リンクされたイメージを表示できませんファイルが移動または削除されたか名前が変更された可能性がありますリンクに正しいファイル名と場所が指定されていることを確認してください 9 2

リンクされたイメージを表示できませんファイルが移動または削除されたか名前が変更された可能性がありますリンクに正しいファイル名と場所が指定されていることを確認してください 9 2 1 リンクされたイメージを表示できませんファイルが移動または削除されたか名前が変更された可能性がありますリンクに正しいファイル名と場所が指定されていることを確認してください 9 2 3 47 25 16. 17. 18. 8 20. 9 21 10 22. 4 5 6 4 19 26 4,305 17 75 98 386 163 4,305 1,713 813 0 769 1,782 4,403