デジットさんの生活便利サイトトップへ デジットさんのSmartyでQuickForm(その2)

トップページ > ホームページ作成 > SmartyでQuickFormその2

フォームの自動入力チェックをしてくれるQuickFormの入力フォームをSmartyのテンプレートを使うことで入力ボックスのサイズなどを指定して細かく画面デザインを決めます。

QuickFormとSmartyを組み合わせる

SmartyでQuickFormで紹介したデザインより更にレベルアップします。入力フォームの入力ボックスの大きさを決めたり、メール送信やデータ登録などをしてもらう時の、ユーザーからの連続送信防止の対策も行います。

サンプルリスト

SmartyでQuickFormのサンプルと違う所だけ説明していきます。

クラスファイルの例

クラスファイルの例です。QuickFormの入力要素・自動チェック項目・表示する釦などの定義です。ファイル名は、「Qfrm_mail.php」としました。
変更点は、「array()」で入力ボックスのサイズ指定と入力文字数制限を行ったことです。また、入力項目やチェック項目を多少変更しました。

<?php
// QuickForm用 class のサンプル(フォームと釦と表示の定義)

//ライブラリの読み込み
require_once("HTML/QuickForm.php");

//QuickFormフォームの定義
class QfrmSmpl{
var $_form;
//コンストラクタの定義 $sbmtAct 「送信」釦のリンク先
function QfrmSmpl($sbmtAct){
$this -> _form = new HTML_QuickForm("frmSmpl","post",$sbmtAct);
}
//フォーム要素・入力チェックの定義
function setForm(){
$this -> _form -> addElement("text","txtName","名前",array('size' => 20, 'maxlength' => 30));
$this -> _form -> addElement("text","txtTitle","タイトル",array('size' => 50, 'maxlength' => 70));
$this -> _form -> addElement("text","txtEmail","E-mail",array('size' => 30, 'maxlength' => 100));
$this -> _form -> addElement("text","txtEmail2","E-mail(確認用)",array('size' => 30, 'maxlength' => 100));
$this -> _form -> addElement("textarea","txtrComment","コメント",array('cols' => 50, 'rows' => 5));
}
//フォーム入力チェックの定義(, null, "client")で、クライアント側でチェック
function checForm(){
$this -> _form -> applyFilter(__ALL__,"trim"); //最初および最後から空白・改行取り除き
$this -> _form -> addRule("txtName","名前を入力!","required", null, "client");
$this -> _form -> addRule("txtEmail","メールアドレスを入力!","required", null, "client");
$this -> _form -> addRule(array("txtEmail","txtEmail2"),"メールアドレス不一致!","compare", null, "client");
$this -> _form -> addRule("txtEmail","無効なメールアドレス!","email", null, "client");
$this -> _form -> addRule("txtrComment","コメントを入力!","required", null, "client");
$this -> _form -> setRequiredNote("<font color='red'>*</font>必須入力");
}
//「フォームが有効である」かチェック 有効ならTRUE
function frmVldt(){
return $this -> _form-> validate();
}
// 入力された値を取得
// 戻り値:要素名と入力された値の連想配列
function getVals() {
return $this->_form->exportValues();
}
//「送信」釦の定義 $btnName:釦の名前
function setSbmit($btnName){
$buttons[] = &HTML_QuickForm::createElement("submit",$btnName,"送信");
$buttons[] = &HTML_QuickForm::createElement("reset","reset","リセット"); //釦を並べて表示
$this -> _form -> addGroup($buttons,"BTNG", null," ");
}
//「戻る」と「送信」釦の定義 $rtnName:戻る $sbmtName:送信
function setRtnSbmit($rtnName,$sbmtName){
$buttons[] = &HTML_QuickForm::createElement("submit",$rtnName,"修正");
$buttons[] = &HTML_QuickForm::createElement("submit",$sbmtName,"送信");
$this -> _form -> addGroup($buttons,"BTNG", null," ");
}
//画面の表示
function dispFrm(){
$this -> _form -> display();
}
//画面のフリーズ
function freezeFrm(){
$this -> _form -> freeze();
}
}
?>

Smartyのテンプレートファイルの例

ディレクトリ「templates」にテンプレートファイルを置きます。ここでは、テンプレートファイルは「smpl_mail.tpl」としました。「width=""」で表の横幅を設定しました。その他は、「入力必須」などの表示を整えたくらいです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>お問い合わせフォームサンプル(SmartyとQuicForm)</title>
</head>
<body>

<!-- QuickFormで設定したform属性を変数にセットしてassign -->
<form {$form.attributes}>
<div>
<table border="0" bgcolor="#ffff99">
<tr bgcolor="#ccff99">
<td align="center" valign="top" width="150"><b>項目</b></td>
<td valign="top" align="left" width="450"> <b>入力欄</b>
</tr>
<tr>
<td align="center" valign="top"><font color="ff6666" size=1>※</font><b>{$form.txtName.label}</b></td>
<td valign="top" align="left"> {$form.txtName.html} <font color="ff6666" size=1>{$form.txtName.error}  </font></td>
</tr>
<tr>
<td align="center" valign="top"><b>{$form.txtTitle.label}</b></td>
<td valign="top" align="left">{$form.txtTitle.html}</td>
</tr>
<tr>
<td align="center" valign="top"><font color="ff6666" size=1>※</font><b>{$form.txtEmail.label}</b></td>
<td valign="top" align="left">{$form.txtEmail.html} <font color="ff6666" size=1>{$form.txtEmail.error}  </font></td>
</tr>
<tr>
<td align="center" valign="top"><b>{$form.txtEmail2.label}</b></td>
<td valign="top" align="left">{$form.txtEmail2.html}</td>
</tr>
<tr>
<td align="center" valign="top"><font color="ff6666" size=1>※</font><b>{$form.txtrComment.label}</b></td>
<td valign="top" align="left">{$form.txtrComment.html}<br/> <font color="ff6666" size=1>{$form.txtrComment.error}  </font></td>
</tr>
<tr>
<td align="center" valign="top"><font color="ff6666" size=1>※必須項目</font></td>
<td valign="top" align="left">{$form.BTNG.html}</td>
</tr>
</table>
</div>
</form>
<!-- 送信確認コメント -->
<p>
{$value}
</p>
</body>
</html>

Smartyのデザインを使ったQuickFormの実行ファイルの例

QuickFormQを実行するファイルです。ファイル名は、「smpl_mail_index.php」としました。
今回はお問い合わせメール送信の例にしましたので、「define("MAIL_TO","*********@**.**.**") 」に自分のメールアドレスを記入します。フォームに入力されたデータは、「getVals()」関数でとりあえず「$vals」に格納してから、自分で設定したメール送信関数「mail_submit($vals)」を呼びました。送信成功した時は、送信成功のテキストとJavaスクリプトを利用したウインドウを閉じる釦のデータ「input type=\"button\" value=\"閉じる\" onclick=\"self.close()\">」を「$com」に返し、表示させることにしました。
メール送信の関数については、メール送信のページで説明します。

<?php
//QuickFormで定義したclassファイルの読み込み
require_once "./Qfrm_mail.php";

require_once "/usr/local/lib/php/Smarty/Smarty.class.php";
require_once "HTML/QuickForm.php";
require_once "HTML/QuickForm/Renderer/ArraySmarty.php";

//submit釦のaction先(自分のファイル)指定
$qfrmindex = new QfrmSmpl("smpl_mail_index.php");

//設定
define("MAIL_TO","*********@**.**.**"); //送信先メールアドレスを定義

//フォームの定義・チェック
$qfrmindex -> setForm(); //要素とチェックの定義
$qfrmindex -> checForm(); //入力チェック

//確認画面の場合 「戻る」と「送信」釦を表示
//入力値が有効 かつ 釦名が"SUBMIT_INDX"の場合
if ($qfrmindex -> frmVldt() and isset($_POST["BTNG"]["SUBMIT_INDX"])){
$qfrmindex -> setRtnSbmit("RTN_CNF","SBMT_CNF");
$qfrmindex -> freezeFrm(); //要素をフリーズ
//最終画面の場合 釦表示なし
}elseif(isset($_POST["BTNG"]["SBMT_CNF"])){
$qfrmindex -> freezeFrm(); //要素をフリーズ
// 入力結果を$valsに格納
$vals = $qfrmindex -> getVals();
$com = mail_submit($vals);
//メール送信
//入力画面の場合 最初の表示と「戻る」で戻った場合
}else{
$qfrmindex -> setSbmit("SUBMIT_INDX"); //釦設定
//smartyへのレンダリング表示へ
}
// Smartyの設定
$smarty = new Smarty;
$smarty->template_dir = "./templates";
$smarty->compile_dir = "./templates_c";
$smarty->cache_dir = "./cache";

// renderer for Smarty templates の取得
$renderer =& new HTML_QuickForm_Renderer_ArraySmarty($smarty);
$qfrmindex->_form->accept($renderer);
$smarty->assign('form', $renderer->toArray());
$smarty -> assign("value",$com);

// 表示
$tmp_name = "smpl_mail.tpl";
$smarty->display($tmp_name);

//メール送信 関数
function mail_submit($t_name){
mb_language('ja');//e-mailメッセージを"ja"にエンコー ディング
mb_internal_encoding("UTF-8");//内部文字エンコーディングは"UTF-8"
$m_name = $t_name["txtName"]; //差出人
$m_to = MAIL_TO; //あて先
$m_subject =$t_name["txtTitle"] ;//タイトル
$m_from = $t_name["txtEmail"]; //送信者
$m_comm = $t_name["txtrComment"]; //コメント
//内容の前に名前やメールアドレスを追加
$mail_temp = "名前      :";
$mail_temp .= $m_name;
$mail_temp .= "\nメールアドレス:";
$mail_temp .= $m_from;
$mail_temp .= "\nタイトル   :";
$mail_temp .= $m_subject;
$mail_temp .= "\n内容     :";
$mail_temp .= $m_comm;
$mail_temp = wordwrap($mail_temp, 70); //1行70文字以上対策
$rc = mb_send_mail($m_to,$m_subject,$mail_temp,"From:$m_from");
if ($rc){
$com = "入力ありがとうございました。<br/><br/><input type=\"button\" value=\"閉じる\" onclick=\"self.close()\"> "; //ウィンドウを「閉じる釦」も追加
}else{
$com = "メールが送信できませんでした。";
}
return $com;
}
?>

連続送信防止の方法

通常のウインドウですと、「戻る」釦で前の画面を戻りフォームのデータを再度「送信」したり最終画面で「更新」釦を押したりすると、同じメールが何度も送られてしまいます。これを防止するには、「session_start()」をつかい既に送信されたかどうかをチェックする方法もありますが、ここでは簡単にツールバーのないウインドウを開かせることで対策しました。
「smpl_mail_index.php」をそのまま実行すると、ウインドウにツールバーは表示されてしまいますが、メール送信フォームを呼ぶ時に次のようにJavaスクリプトを利用し、ツールバーのないウインドウで「smpl_mail_index.php」を開かせます。これで、「戻る」釦や「更新」釦が操作できなくなります。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>メールフォーム呼び出し</title>
<script language ="JavaScript">
<!--
//ツールバーの無いブラウザ表示
function dsp_browse(){ //ブラウザ表示
urladd = "../test/smpl_mail_index.php";
newWin = window.open( urladd,"","width=640,height=400,resizable=yes ");
}
//-->
</script>

</head>
<body>
<p>
メールフォーム呼び出しは、次をクリック。<br/>
<a href = "javascript:dsp_browse()">メールフォーム</a>
</p>
</body>
</html>

サンプル画面

このサンプルリストを実行した画面のサンプルは、SmartyでQuickFormその2の画面で確認できます。
レンタルサーバーの「ロリポップ」では、動作確認しております。

ホームページを公開するレンタルサーバーは、 ロリポップ! がお薦め、 PHP5を使うならPHP5から選ぼう。

関連ページ

ホームページ作成

PHP5を使う

アフィリエイトをする

PHPの使い方

デジットさんのホームページ入門に移行中

スポンサード リンク

Amazon.co.jpアソシエイト:
PHP&プログラミング

売れている順 新刊順

:%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%20php :php2_  :10

とことん!ホームページホームページ入門役立つサイトデジットさんのリストラ日記仮福真琴の精神科医はうそだらけ

2005-2010 Copyright © Digit-01 All Rights Reserved.