FuelPHPのテンプレートコントローラ

FuelPHPでTwitterBootstrapを使う前にFuelPHPのテンプレートコントローラについて調べることにしました。テンプレートコントローラの元になるテンプレートを作成しておけばいつでも簡単にテンプレートを利用できます。

1. まず、テンプレートコントローラとは何なのかを調べてみます。FuelPHPのドキュメントによると、『テンプレートコントローラとは、befereメソッドやafterメソッド等のいくつかの事前定義によって構築されたテンプレートをサポートしているベースコントローラを拡張したもので、基本的には、ヘッダー、フッター、サイドバーなどのレイアウトでビューをラップするために使用することが出来ます。』と説明しています(誤訳があったら済みません)。

2. テンプレートコントローラは他の全てのコントローラのようにapp/classes/controllerの中に作成することが出来ます。それらはデフォルトの『Controller_』を使いController_Templateクラスを拡張する必要があります。つまり、

class Controller_Example extends Controller_Template{

の形で利用します。

3. デフォルトのテンプレートファイルはapp/views/template.phpとなっていますので、テンプレートファイルがなければ、それを作成し、あればそれを利用することが出来ます。

4. デフォルトのテンプレートファイルは、コントローラの中で、$template=’テンプレート名’と指定することで、簡単に変更することが出来ます。

5. それでは、app/views/フォルダにsample_template.phpを作成して、下記のように記述します。TwitterBootstrapのレスポンシブレイアウトを使って、作成しています。

app/views/sample_template.php

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title><?php echo $title; ?></title>
 <meta name="viewport" content="width=device-width,minimum-scale=1">
 <?php echo Asset::css('bootstrap.min.css');?>
 <?php echo Asset::css('bootstrap-responsive.min.css');?>
 <?php echo Asset::css('my-style.css');?>
</head>
<body>
<div class="navbar">
 <div class="navbar-inner">
 <div class="container">
 <ul class="nav">
 <li><a class="brand" href="#"><?=$title?></a></li>
 <li><a href="#">Home</a></li>
 <li><a href="#">Link1</a></li>
 <li><a href="#">Link2</a></li>
 </ul>
 <form class="navbar-search pull-left">
 <input type="text" class="search-query" placeholder="search">
 </form>
 </div><!--/nav-->
 </div><!--/navbar-innner-->
</div><!--/navbar-->
<div class="container">
 <div id="header" style="background-color:red">
 <p>ここがヘッダーです </p>
 </div><!--/header-->
 <div class="row" id="content">
 <div class="span4" style="background-color:green">
 <p>サイドバー</p>
 <p>ここはサイドバーです</p>
 </div><!--/span4-->
 <div class="span8">
 <?php echo $content; ?>
 </div><!--/span8-->
 </div><!--/content-->
 <div id="footer" style="background-color:yellow; text-align: center;">
 <p>copyright(c)2012 WinRoad徒然草 </p>
 </div><!--/footer-->
</div><!--/container-->
 <?php echo Asset::js('jquery-1.7.1.min.js');?>
 <?php echo Asset::js('bootstrap.min.js');?>
</body>
</html>

6. サンプルコントローラを作成してみます。

app/classes/controller/sample.php

<?php
class Controller_Sample extends Controller_Template{
 //テンプレートファイルを指定
 public $template='sample_template';
 public function action_index(){
 //タイトルをテンプレートに渡す
 $this->template->title='Winroad徒然草';
 //Collectionsテーブルのデータを降順で取得
 $query=DB::select()->from('collections')->limit('5')->execute();
 //ビューファイルの呼び出し
 $this->template->content=View::forge('sample/index');
 //データベース情報をテンプレートに渡す
 $this->template->content->set('query',$query->as_array());
 }
}

7. indexビューを作成します。尚、レイアウトの関係で、アンカータグを作成していますが、リンク先がテンプレートを使っていませんので、リンクをクリックすると、現状ではエラーになりますので、悪しからず。

app/views/sample/index.php

<h2>サンプルページ</h2>
<table width="100%" border="1">
 <tr>
 <th scope="col">ID</th>
 <th scope="col">タイトル</th>
 <th scope="col">作成日</th>
 <th scope="col">コード</th>
 <th scope="col">保管場所</th>
 </tr>
<?php foreach($query as $row): ?>
 <tr>
 <td><?=$row['id']?></td>
 <td><?php echo Html::anchor('collection/detail/'.$row['id'],
 $row['title'],array(
 'class'=>'btn','id'=>'a_btn',
 ))?></a></td>
 <td><?=$row['created']?></td>
 <td><?=$row['col_code']?></td>
 <td><?=$row['save_space']?></td>
 </tr>
<?php endforeach;?>
</table>

8. ブラウザで確認してみます。下記のようなサイトになりました。尚、奇抜な配色ですが、ヘッダー部分、サイドバー部分、コンテンツ部分、フッター部分が分かり易いように背景色を付けています。

9. スマートフォンでも確認してみます。トップのナビゲーションバーが幅広くなっています。これは、TwitterBootstrapの設定で隠すことも出来ます。今日は、TwitterBootstrapの勉強ではありませんので、その辺は省略します。

10. 只ちょっと気になるのが、アンカーリンクのボタンです。大きさがバラバラで、余り見た目がよくありません。これは何とかならないのでしょうか。

11. 簡単に修正できますので、ちょっと修正しましょう。これを修正するために、アンカーボタンに『’id’=>’a_btn’』で、idを指定しています。TwitterBootstrapの設定のところで、『my-style.css』を作成しておいたのがここで役に立ちます。my-style.cssに下記のコードを記述します。

public/assets/css/my-style.css

#a_btn{
 padding 0;
 width=99%;
 }

12.  たったこれだけでボタンの大きさが均等になりました。width=100%でもいいのですが、ボタンのデザインの関係上、左側が若干あいているように見えますので、あえて99%にして左右均等に見えるようにしました。

ちょっと横道に逸れましたが、本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ