テンプレートを使ってみる

php

ご無沙汰です。phpでwebサービスを作る際、やはりデザインが気になります。
今までは大して気にもせず、phpスクリプトの内部にhtmlを埋め込んだりしていましたが、テンプレート使った方が何かと融通がきくので今回挑戦してみました。

Smarty マニュアル | Smarty

が有名ですが、なんかあんまり良い噂を聞かないし、もっと小規模でいいの無いかなあと探していましたらありました。はてな匿名ダイアリーに。

60行で作るPHP用テンプレートエンジン
60行テンプレートエンジンがパワーアップしてレイアウト機能に対応

こちらを使わせていただきました。名前はOtokomaeTemplate.phpで。レイアウト機能も使いました。
本体プログラムと、これと、テンプレートファイルを用意することでロジックとデザインの分離があああ！可能。

今回サンプルで載せるのは、以前作った認証システム

セッションによるログインシステム - プログラミングを始める10の理由

の応用です。adminと一般メンバーを分けるようにしています。lib.phpで他の設定書いてあるから、これをこのままコピペしても動かないと思います。あくまで参考に…

<?php

require "lib.php";

require_once('OtokomaeTemplate.php');
$TEMPLATE_DIR    = 'templates';
$LAYOUT_TEMPLATE = 'layout.php';

//初期画面


$com = "";
$LifeTime = 1440;   //タイムアウト用有効期限（秒）
$u_id = $_POST['u_id'];
$passwd = $_POST['passwd'];

if ($u_id && $passwd) {
    //総合管理者
    if($u_id == "admin"){
        if($passwd == $adminpass){
    session_start();
    $_SESSION['loginid'] =$u_id;
    header("Location: admin.php");
    exit();
}else{
    $context = array('error'=>'ユーザーIDまたはパスワードが間違っています。やり直して下さい。');
    include_template('login.php', $context);
    }
}
    
    
$p_data = file($data_file);
$p_flag = 0;
for($i=0; $i<count($p_data); $i++){
list($id,$pass) = split("<>", $p_data[$i]);
if($id == $u_id && $pass == $passwd){
$p_flag++;
}
}
if($p_flag > 0){
    session_start();
    $_SESSION['loginid'] =$u_id;
    header("Location: mypage.php");
    exit();
    
 }else{
    $context = array('error'=>'ユーザーIDまたはパスワードが間違っています。やり直して下さい。');
    include_template('login.php', $context);
}

}elseif(isset($u_id) || isset($passwd) ){
    //名前とコメントどちらか一方が無い場合エラー表示
    $context = array('error'=>'ユーザー名とパスワードは必須です。');
    include_template('login.php', $context);
}else{
    $context = array('error'=>'');
    include_template('login.php', $context);
    }

?>

ここまでがスクリプト。下が表示のためのテンプレート。htmlでしょ？

<?php $_context['title'] = '認証'; ?>
<p align="center"><FONT COLOR="red">%{$error}</FONT></p>
<form name="form1" method="post" action="">
  <table width="400" border="0" align="center">
    <tr>
      <td><div align="right">ID</div></td>
      <td><label>
        <input type="text" name="u_id" />
      </label></td>
    </tr>
    <tr>
      <td><div align="right">PASS</div></td>
      <td><label>
        <input type="password" name="passwd" />
      </label></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><label>
        <input type="submit" name="button" value="送信" />
      </label></td>
    </tr>
  </table>
  </form>

レイアウトのテンプレート

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link REL="stylesheet" href="style.css" TYPE="TEXT/CSS">
<title>%{$title}</title></head>
<body>
<div id="my_body">
<div id="my_header">
<p align="center">%{$title}</p>
</div>
<div id="my_main">
<!-- テンプレートの内容 -->
<?php echo $_content; ?>
<!-- /テンプレートの内容 -->
    </div>
  </body>
</html>

あとテンプレートの相対位置だけど、外部cssや画像へのパスはテンプレートから見た位置じゃなく、表示するスクリプトからの位置になるんだな。
理屈は簡単だけどやってみなきゃわからない事がたくさんあって勉強になりました。