とりあえず落ち着け

サブカル系webエンジニア見習いの備忘録

【サーバ構築】Smartyの導入

コレまでの設定でhttpもPHPSQLも準備できました。

さぁ何かwebアプリを作ろう!とした時にこんなことが起こると思います。

index.php

f:id:frozentuna1203:20120807120601p:plain

 

PHPとHTMLが混同する!

特に14行目の「HTMLの中でいきなりPHPが始まって関数を実行する」なんてところが増えたら解り難くて仕方がないでしょう。

そこで今回はテンプレートエンジン「Smarty」を利用しようと思います。

Smarty公式サイト

1. 特長

  •  PHPとHTMLを分離できます
  • 分離することでプログラマとデザイナーの責任範囲を明確にできます
  • HTML内でSmarty関数によるループ処理等ができます

2. 導入

現在利用しているのがver2.6なので、説明はver2.6準拠

3.x系は2.x系と異なる部分が多いので、この記事を参考に3.x系を設定すると正常に動かないと思います。

  • ダウンロード

 こちらのDOWNLOAD項目の1番下にver2.6.26があるのでダウンロードします。

  • 設置
ダウンロードしたものを解凍するとフォルダの中にLibsというフォルダがあるので、サーバのドキュメントルートと同階層にアップロードします。
次にlibsと同階層に「template」フォルダと「template_c」というフォルダを作ります。
templateフォルダは表示するHTMLテンプレートを置くためのフォルダ、template_cはコンパイルキャッシュファイルを置くためのフォルダです。
template_cは外部からファイルの追加を行えるようにパーミッションを777にしておきます。
これで設置は終了です。
  • 設定
使い勝手を良くするために設定を変更します。
SmartyPHPからSmartyClassのインスタンスを生成し利用することで動作します。
つまり、SmartyClassの内容を変えることが設定の変更となります。
MySmarty.class.phpというファイルを作り、SmartyClassを継承したMySmartyClassを作成しましょう。
MySmarty.class.php
//基本ディレクトリの定数定義
define("ROOT_DIR","/var/www");

//継承元のクラスを読み込む
require_once(ROOT_DIR."/libs/Smarty.class.php");

//継承してクラス生成
class MySmarty extends Smarty
{
      function __construct()
      {
           $this->template_dir = ROOT_DIR."/templates";
            $this->compile_dir = ROOT_DIR."/templates_c";
            $this->left_delimiter = "{{";
            $this->right_delimiter = "}}";
            $this->plugins_dir = array("plugins","myplugins");
           parent::__construct();
      }
}
 コレで実行準備完了

3. 実行

 では、最初の日付を表示するプログラムをsmarty対応させてみます。
index.php
<?php
       require_once("../lib/MySmarty.class.php");
       $smarty = new MySmarty();
       $date = date("y/m/d");
       $smarty->assign("date",$date);
       $smarty->display("testcode.html");
index.html
<!DOCTYPE html>
     <html>
          <head>
                <meta charset = 'UTF-8'>
                <title>日付表示</title>
          </head>
          <body>
                <h1>テストページ</h1>
                <p>今日の日付</p>
                <p>{{$date|escape}}</p>
           </body>
     </html>
 コレで分離できました。