PHPアーカイブ : カナダ在住、WEB制作者のブログ

デザイナー（もどき）がSmartyとPHPを勉強してみる

June 13, 2010

会社の先輩からは結構前から言われていたんですが、デザイナーとプログラマーの双方のやり取りをスムーズに進めるためにも、デザイナーもSmartyの知識は持っておいた方が良いとのこと。

まぁ、小生はデザイナーにもプログラマーにもなる気が無いので、今までほったらかしにしてしまっていたのですが。。

小生！やるときはやる男です！

というわけで、動機はどうあれ、勉強しはじめましたSmarty。

その前に・・・・だ。PHPのことが良く分からん。。。。なので、最初の課題は

PHP初心者がPHPとは何かをそれとなく理解する

というわけで、先月あたりからデザイナーがwebサービスを10週間で作れるようになる方法。または私は如何にしてPHPを愛するようになったか。という記事を見ながらPHPの勉強を始めました。ほんと、よく書かれていますねこの記事。

この記事で言う「神」役はまぁ会社の先輩にお願いすると勝手に想定したとして。なんとか２週間くらいかけてこの10週間の工程を理解しながら勉強。幾つか疑問に思うことがあっても、大半は「そういうもんかー、あははー。」と言いながら流しました。

さて、PHPがなんとなーく理解できたところで。早速Smartyを勉強しよう！この時点では、先輩との案件でSmartyのテンプレートとかの概念はそれとなーく理解していましたので、なんとかなるだろーと結構舐めてかかるスタンス。

Smartyの導入

まずはSmartyをダウンロード。

・・・ダウンロードしたのはいいのですが、どう使っていいのかさっぱりわからん。だって、いつもSmartyのインスコなんてやってもらうもん。

ここはGoogle先生に聞いてみることにしました。

Smartyの使い方

おぉ、いい感じの記事を発見。これを見ながら、導入と、簡単なtplとphpと作ってみました。ここまでは簡単。上記の記事さえちゃんと読めばたぶん表示させるところまではうまくいく。

tplを編集しても、反映されない問題の解決

と思ったら、いきなり壁が。tplを編集しても反映されない。どうやっても反映されない。tplの中身なんて

<html>
<head>
<title>Smartyってスマートだよね？</title>
</head>
<body>
Hello！{$name}！
</body>
</html>

<?php
require_once($_SERVER["DOCUMENT_ROOT"]."/smarty/libs/Smarty.class.php");
$smarty = new Smarty();
$smarty -> assign("name","Senna");
$smarty -> display($_SERVER["DOCUMENT_ROOT"]."/smarty/templates/smarty_test.tpl");
?>

ってしてるだけなのに。こんなところでつまずくのか！

で、ここはまたGoogle先生に問い合わせ。調べてみると

「templates」ディレクトリ内の該当ファイルの更新日時より「templates_c」ディレクトリ内の該当ファイルの更新日時が新しい場合

【解決】 Smartyのtemplate(tpl)ファイルを更新しても、ブラウザ表示でコンパイル（変更が反映）されない

上記の場合にtplの方が反映されないらしい。そもそも最近ガンブラー対策のために念のためwinSCPでFTP接続するようにしてたのだが、winSCPのタイムスタンプってどうやって押されてるんだ？と疑問に。んで、それも調べてみると、winSCPの設定でタイムスタンプの設定をOFFにする必要があるらしい。意味分からんが、とりあえず

オプション>環境設定>転送>タイムスタンプを保存

上記の設定を無効に設定して、アップロードしたら無事にtplの変更が反映されていました。よかったよかった。というわけで次はtplで書くことのできる関数を色々見ていこうと思います。

Smarty関数を色々見てみる

とりあえず、PHPの設定は下記のような感じにしました。配列でとりあえず情報もっておけば、Smarty関数のテストするときに表示テストできるし。あとは何も考えてません。

smarty_test.php

<?php
require_once($_SERVER["DOCUMENT_ROOT"]."/smarty/libs/Smarty.class.php");

$smarty = new Smarty();
$smarty->template_dir = $_SERVER["DOCUMENT_ROOT"].'/smarty/templates';
$smarty->compile_dir = $_SERVER["DOCUMENT_ROOT"].'/smarty/templates_c';
$smarty->cache_dir = $_SERVER["DOCUMENT_ROOT"].'/smarty/cache';
$smarty->config_dir = $_SERVER["DOCUMENT_ROOT"].'/smarty/configs';

$arr[1]="北海道";
$arr[2]="熊本";
$arr[3]="福岡";
$arr[4]="静岡";
$arr[5]="東京";
$arr[6]="横浜";
$arr[7]="大阪";
$arr[8]="沖縄";
$arr[9]="バンクーバー";
$arr[10]="カナダ";
$arr[11]="トロント";
$arr[12]="モントリオール";

$smarty->assign('myArray', $arr);

$smarty->display($_SERVER["DOCUMENT_ROOT"]."/smarty/templates/smarty_test.tpl");
?>

続いて、tplの方、とにかく知ってそうな関数を全部試してみる。

smarty_test.tpl

{include file="header.tpl" page_title="Sennaのへっだー"}

<table>
{foreach from=$myArray item=foo}
<tr bgcolor="{cycle values="#eee,#fff"}">
  <td>{$foo}</td>
</tr>
{/foreach}
</table>
<select name="foo" id="foo">
{foreach from=$myArray item=foo key=num}
<option value="{$foo}">{$foo}</option>
{/foreach}
</select>

<h3>option要素の自動生成</h3>
<select name="foo" id="foo">
<option value="">選択してください</option>
{html_options options=$myArray}
</select>

<h3>optionとselect要素の両方を自動生成</h3>

{html_options values=key name=foo options=$myArray selected=3}

<h3>デバッグ</h3>

{literal}{debug}と入力すると、Smarty Debug Consoleが出現{/literal}

<h3>文中で{literal}{}{/literal}を使いたい場合</h3>

{literal}
文章中などで{}の表記を行いたい場合は、{literal}で囲ったものはSmarty処理されないらしい
{/literal}

{include file="footer.tpl"}

header.tpl

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>
<div id="header">
<h1>{$page_title}</h1>
<ul id="gnavi">
  <li><a href="">ナビ</a></li>
  <li><a href="">ナビ</a></li>
  <li><a href="">ナビ</a></li>
  <li><a href="">ナビ</a></li>
  <li><a href="">ナビ</a></li>
</ul>
</div>

footer.tpl

<div id="footer">
<ul id="footernavi">
  <li><a href="">ナビ</a></li>
  <li><a href="">ナビ</a></li>
  <li><a href="">ナビ</a></li>
</ul>
<address>コピーライト</address>
</div>

</body>
</html>

まぁ、とりあえずこんな感じ。一個一個見ていこうと思います。

プレビュー
http://studyphp.cicreators.info/smarty_test.php

{include}の使い方

見たまんま、他のtplをダウンロードするんですね。ただ、普通に読み込むだけじゃなくて、

{include file="header.tpl" page_title="Sennaのへっだー"}

みたいな感じで、値を渡すことができるんですね。ページタイトルとか、そういうのを設定するときにちょっと考えると便利そう。

{foreach}の使い方

<table>
{foreach from=$myArray item=foo}
<tr bgcolor="{cycle values="#eee,#fff"}">
  <td>{$foo}</td>
</tr>
{/foreach}
</table>

おぉ、これはちょっとだけ見たことがあるぞ。用は繰り替えす奴ね。先ほど設定した$myArrayという配列の情報を表示しているだけの超シンプルな奴です。ただ、ここで出た{cycle}という関数がすげー便利。foreachとあわせて使うためにあるのかな？繰り返す中で、背景色が変わります。

option要素の自動生成

Smartyを使えばoptionとかの要素だって自動でつくれるらしい。

<h3>option要素の自動生成</h3>
<select name="foo" id="foo">
<option value="">選択してください</option>
{html_options options=$myArray}
</select>

こんな感じ。{html_option}って書かれている部分ですね。ここでは、option要素だけ自動で作っていますが。optionとselect要素の両方を自動生成することも可能です。

{html_options values=key name=foo options=$myArray selected=3}

こんな感じ。ただ、これって、optionに含まれるvalueの値って変えられないのかな、全部idだけど。

{debug}って便利らしい

{debug}と入力すると、Smarty Debug Consoleが出現・・・・うん、意味わかんないから今度聞く

文中で｛｝を使いたい時は

{literal}
<p>文章中などで{}の表記を行いたい場合は、{literal}で囲ったものはSmarty処理されないらしい</p>
{/literal}

文章中などで{}の表記を行いたい場合は、{literal}で囲ったものはSmarty処理されないらしい

ふぅ、今日はここまでー。

取り急ぎ次はmysqlとつなげて表示テストでもしてみるか。mysqlの中のデータ表示するのって、foreachで回せばいいのなかぁ。