第5回 Smartyを使って実用的なページを作ってみる(その1) (その1)
4回にわたってSmartyの使い方を説明してきました。PHPからSmartyテンプレートへの値の渡し方、制御構造の記述方法、関数と修飾子の使い方、と基本的な部分を通して説明しましたが、理解できましたでしょうか?
さて今回は、今まで説明してきた内容をふまえて、実務で参考になりそうなWebページを作ってみます。
問い合わせフォームを作る
企業のサイトにもネットショッピングのサイトにも、サイトオーナーに対して問い合わせを受け付けるためのフォームが用意されています。そこで今回は、この簡単な問い合わせフォームをSmartyを使って構築してみたいと思います。
仕様を整理する
まずページ構成ですが、以下の2つのページを用意します。
・入力フォームページ
問い合わせ内容をユーザーに入力してもらうフォーム
・問い合わせ完了ページ
入力された問い合わせが、受け付け完了したことを伝えるページ
入力された内容にエラーがあった場合のエラー表示ページも必要ですが、これは入力フォームページにエラーメッセージを表示する仕様とします。
さて、入力フォームでは以下の項目を記入してもらいます。
・問い合わせ種類(意見・要望、質問・問い合わせ、その他)
・問い合わせ件名
・問い合わせ内容詳細
・入力者の名前
・入力者のメールアドレス
これらはすべて必須項目とします。
問い合わせ完了ページでは入力された内容を表示し、その内容で問い合わせを受理したことを伝えます。
テンプレートのひな形を用意する
「template」がひな形の意味なので、ちょっとおかしなタイトルではありますが、それはさておき…
通常Webサイトを作る際、各ページ共通のヘッダやフッタ、デザインが使われていると思います。これらをあらかじめひな形として用意して、各ページ共通で使うことが出来れば、作業効率も上がり、また保守も容易になります。
第4回で{include}関数の説明をしました。この時の例ではヘッダファイルとフッタファイルを用意して、各ページ共通のヘッダとフッタをそれぞれ別テンプレートファイルとして用意しました。今回の例ではヘッダ、フッタファイルを用いずに、ページの中身を別テンプレートファイルとして、ひな形のテンプレートファイルからインクルードする方法で作成してみたいと思います(*1)。このようにすることで、各ページ共通で使用するファイルは一つだけになり、管理がちょっと楽になるメリットがあります。
以下がひな形となるテンプレートファイルです。ファイル名はtemplate.tplとします。
template.tpl (文字コードはUTF-8とします)
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>問い合わせフォーム</title>
<style type="text/css">
{literal}
.error-message{ margin:5px; font-size:80%; color:red; }
{/literal}
</style>
</head>
<body>
<h1>問い合わせフォーム</h1>
{include file=$content_tpl params=$params}
</body>
</html>
注目はbodyタグの中。$content_tplという変数に格納されている値をインクルードするファイルとして指定しています。更に$paramsというパラメータも渡せるようにしておきます。これら2つの値はPHP側から受け取ります。
またstyleタグ内のスタイルシートの定義を、前回説明した{literal}を用いてエスケープしています。
今回のひな形は非常に簡素なものですが、includeの前にヘッダとなるロゴアイコンなどを配置して見栄えをよくすることも出来ます。
----
*1)ページごと異なるCSSやJavascriptファイルを読み込むなど、ヘッダやフッタの値が変わる場合は、第4回の例のようにヘッダファイル、フッタファイルをインクルードしてパラメータを渡す方法のほうが柔軟に対応できると思います。
