デザイナーでも作れるスマートWebアプリ

Smartyでスマートプログラミング〜


テンプレートエンジンって使ってるかい?
テンプレートエンジン - Wikipedia

デザイナとプログラマなど、作業の分担ができ、チームでの開発がやりやすくなる

ロジック側はプログラマで、テンプレート側はデザイナーが使うので分業しようということだね。
つまり、テンプレートはデザイナーが触れるということだよね。


でね。phpSmartyってテンプレートエンジンは知ってるかな?
http://www.smarty.net/manual/ja/what.is.smarty.php

SmartyPHP のためのテンプレートエンジンです。具体的に言うと、php のプレゼンテーションからアプリケーションのロジックとコンテンツを分離して管理する事を容易にします。 これは、プログラマーとテンプレートデザイナーの役割が異なり、 これらの役割を違う人間が受け持っている場合に最適だと言えます

これを使えば、デザイナーさんでも掲示板とか簡単に作れるんだよ。


でも、さすがに全ては無理なので、いくつか準備が必要なんだけど、それは近くのわかる人にやってもらえばいいよね。
もしかしたら、これくらいなら頑張れば出来るかもしれないしね。

掲示板を作ってみよう

じゃぁ、さっそくだけど、Smartyを使って掲示板を作ってみようね。

■1.まずはDBが必要だよ

これは、さすがに難しいので、近くの人に聞いてみてね。
とりあえず、1行掲示板なので、以下のようなテーブルを作ってね。

create table bbs (id int auto_increment,name blob,message blob,ip varchar(15),posttime timestamp,primary key(id));
■2.ディレクトリの設置

これも、ちょっと難しいかもね。
FTPとかSCPとかで、ディレクトリをサーバに作ってね。
このエントリの下の方にサンプルファイルへのリンクがあるから、それを使ってもいいね。

ディレクトリの構造だよ

├app
├cache
├configs
├htdocs
├libs
│└Smarty
└templates_c

cacheとtemplates_cは、パーミッションを開いておく必要があるから注意してね。
あと、libs/Smartyの下にSmartyのファイルを置いてね。
Download | Smarty

■3.index.phpファイルの設置

次に、ファイルだけど、htdocsの下に、外からアクセスされるファイルを置くけど、これは残念ながらphpなんだ。
以下の内容をそのままコピーしてもいいね。index.phpというファイル名で保存してね。

<?php
require_once(dirname(__FILE__) . '/../libs/Smarty/Smarty.class.php');

$smarty = new Smarty();

$smarty->template_dir = dirname(__FILE__) . '/../app/';
$smarty->compile_dir  = dirname(__FILE__) . '/../templates_c/';
$smarty->config_dir   = dirname(__FILE__) . '/../configs/';
$smarty->cache_dir    = dirname(__FILE__) . '/../cache/';

$act = $_REQUEST['act'];
if (is_array($act)) $act = key($act);
if (!$act) $act = 'index';
$act = strtolower(str_replace('_', '/', basename($act))) . '.tpl';
if (!$smarty->template_exists($act)) $act = 'notfound.tpl';

$smarty->display($act);

actという引数をみて、それに該当するテンプレートを読み込むようにしているんだ。
指定が無ければ、indexを読み込むという感じかな。

index.php
index.php?act=bbs
index.php?act=hogehoge
みたいな感じだね。
アンダーバーでつなぐと、ディレクトリ階層が掘れるようにもしているよ。これでちょー大規模サイトもオッケーだね。

■4.次にさっそくテンプレートだよ

appの下に次のようにファイルを作るよ。

├app
 ├bbs.tpl
 ├index.tpl
 ├notfound.tpl
 └post.tpl
■5.トップページの作成だよ

まずは、index.tplだね。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Top</title>
</head>
<body>
<h1>トップページ</h1>
<a href="./?act=bbs">bbs</a>
</body>
</html>

簡単なトップページだね。きっとデザインセンスのある君ならば、もっとこったページが作れるよね。
見たとおり、単なるhtmlだよ。

■6.エラーページの作成だよ

次に、エラー時のページだよ。
これは、パラメータのactに変な文字を渡された時に使うものだよ。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NotFound</title>
</head>
<body>
ページが見つかりません
</body>
</html>

これも簡単だね。きっとデザインセンスのある(ry

■7.掲示板の一覧ページの作成だよ

次に肝心の掲示板の一覧ページだよ。
一覧ページは

めっせーじ【入力テキストボックス】なまえ【入力テキストボックス】【 投稿】
・はつげん2 [なまえ](2008-03-25 xx:xx:xx)
・はつげん1 [なまえ](2008-03-25 xx:xx:xx)

こんなイメージだよ。伝わるかな?
じゃぁ、さっそくテンプレートだよ。

{assign var='db' value='HOSTNAME'|mysql_connect:'USERNAME':'PASSWORD'}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>掲示板のサンプルだよ</title>
</head>
<body>
<h1>掲示板のサンプルだよ 一覧だよ</h1>
{if !$db || !'DBNAME'|mysql_select_db:$db}
    ごめん、DB接続でえらった
{else}
    {assign var='result' value='SELECT * FROM bbs ORDER BY id DESC'|mysql_query:$db}
    <form action="./" method="post">
        めっせーじ<input type="text" name="message" value="" size="40" />
        なまえ<input type="text" name="name" value="" size="20" />
        <input type="submit" name="act[post]" value="投稿" />
    </form>
    <ul>
        {section name=list loop=$result|mysql_num_rows}
            {assign var='row' value=$result|mysql_fetch_array:$smarty.const.MYSQL_ASSOC}
            <li>{$row.message|escape} [{$row.name|escape}]({$row.posttime|date_format:'%Y-%m-%d %H:%M:%S'})</li>
        {/section}
    </ul>
{/if}
</body>
</html>

mysql専用なんだけど、大丈夫だよね?
それぞれの環境にあわせてちょっといじくらなければならないところがあるんだけど、HOSTNAME、USERNAME、PASSWORD、DBNAMEのところは、適宜環境にあわせてね。


簡単だよね?
だって、Smartyの書き方しかしてないもんね。
phpの関数が見えるって?
気のせい気のせい

■8.掲示板の投稿ページの作成だよ

次に、投稿した時の処理だよ。投稿されたらDBに保存しないとね。

{assign var='db' value='HOSTNAME'|mysql_connect:'USERNAME':'PASSWORD'}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>掲示板のサンプルだよ</title>
</head>
<body>
<h1>掲示板のサンプルだよ</h1>
<div>
    <a href="./?act=bbs">一覧に戻るよ</a>
</div>
{if !strlen($smarty.post.name) || !strlen($smarty.post.message)}
    めっせーじとなまえは必須だよ
{elseif !$db || !'DBNAME'|mysql_select_db:$db}
    ごめん、DB接続でえらった
{else}
    {assign var='name' value=$smarty.post.name|mysql_real_escape_string}
    {assign var='message' value=$smarty.post.message|mysql_real_escape_string}
    {assign var='ip' value=$smarty.server.REMOTE_ADDR|mysql_real_escape_string}
    {assign var='sql' value="INSERT INTO bbs (name,message,ip) VALUES ('%s','%s','%s')"|sprintf:$name:$message:$ip}
    {assign var='result' value=$sql|mysql_query:$db}
    {if $result}
        登録したよ
    {else}
        ごめん、登録できなかったよ
    {/if}
{/if}
</body>
</html>

どう?簡単でしょ?
ちょっとSQLの知識は必要かもしれないけど、お約束だから大丈夫だよ。
データベース使いたくなければ、ファイルに保存でもいいと思うよ。

■さんぷるふぁいる

ここまでに書いていることをzipでまとめたファイルだよ。
http://maru.cc/files/20080325_smartybbs_sample1.zip

■さいごに

どうかな?
簡単だったでしょ?


ん? htmlとタグがまざってるって?
だってhtmlの中に書くためのがタグだよね? だから大丈夫なはずだよ。


続きだよ
デザイナーでも作れるスマートWebアプリ その2 - maru.cc@はてな