Google App Engine for phpの
twigのテンプレートについての続きです
今回はform処理部分について記載します
フォーム処理
処理概要
ユーザーにデータを登録してもらったり
管理画面で記事を投稿したりするページです
twigではmacroとimportの機能を使って
部品化しました
公式サイトは以下のURLです
http://twig.sensiolabs.org/doc/tags/macro.html
作り
カテゴリ | プログラム | 詳細 |
---|---|---|
php | form.php | 実行されるプログラム |
twig | base.html.twig | デザインのベースのテンプレート |
twig | _form.html.twig | フォームの部品 |
twig | form.html.twig | フォームを呼びだすところ |
ソース
/form.php
<!--?php require_once './vendor/autoload.php'; //初期化 $buf = ””; $data = ””; $errormessage =''; //テンプレートの読み込み Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("views"); $twig = new Twig_Environment($loader); $template = $twig--->loadTemplate("form.html.twig"); //postされた場合の処理 if($_SERVER["REQUEST_METHOD"] == "POST") { $buf = array(); $data = $_POST; //本来ならここでバリデーション $buf['email'] = $_POST['email']; $buf['disp'] = $_POST['disp']; $errormessage ='入力が不完全です'; } $page = array( "description" => "サイトマップ作成ツール", "keywords" => "sitemap,tool,post,form", "title" => "投稿ページテストページ", "postdata" => $buf, "errormessage" => $errormessage ); //出力 $template->display($page); ?>
postした場合だけバリデーションしています
/views/_form.html.twig
{% macro headermessagedisp(errormessage) %} <div class="form-group"> {% if errormessage is not empty %} <label class="col-10 control-label"> エラー:{{ errormessage }} </label> {% else %} <label class="col-10 control-label">ユーザー登録用デモ画面 </label> {% endif %} </div> {% endmacro %} {% macro mailinput(emaildata) %} <div class="form-group"> <label class="col-sm-2 control-label">メールアドレス</label> <div class="col-sm-8"> <input type="email" name="email" class="form-control" placeholder="メール" value="{{emaildata}}"> </div> </div> {% endmacro %} {% macro disptextareainput(dispdata) %} <div class="form-group"> <label class="col-sm-2 control-label">詳細</label> <div class="col-sm-8"> <textarea class="form-control" rows="3" name="disp">{{dispdata}}</textarea> </div> </div> {% endmacro %} {% macro sexradio(sexdata) %} <div class="form-group"> <label class="col-sm-2 control-label">性別</label> <div class="col-sm-8"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 男性 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 女性 </label> </div> </div> </div> {% endmacro %} {% macro areaselect(areadata) %} <div class="form-group"> <label class="col-sm-2 control-label">都道府県</label> <div class="col-sm-8"> <select class="form-control"> <option>北海道</option> <option>青森</option> <option>秋田</option> <option>山形</option> </select> </div> </div> {% endmacro %} {% macro agreecheckbox(agreedata) %} <!-- checkbox --> <div class="form-group"> <label class="col-sm-2 control-label">利用規約</label> <div class="col-sm-8"> <div class="checkbox"> <label> <input type="checkbox" value=""> 同意する </label> </div> </div> </div> {% endmacro %}
フォームの部品です
Message、テキスト、テキストエリア、ラジオボタン、セレクトボックス、チェックボックス
の部品を用意しています
/views/form.html.twig
{% extends 'base.html.twig' %} {% block body %} <div class="row"> <div class="col-lg-8"> <form class="form-horizontal" role="form" method="POST"> {% import '_form.html.twig' as ent %} {{ ent.headermessagedisp(errormessage) }} {{ ent.mailinput(postdata.email) }} {{ ent.disptextareainput(postdata.disp) }} {{ ent.sexradio(postdata.sex) }} {{ ent.areaselect(postdata.area) }} {{ ent.agreecheckbox(postdata.agree) }} <div class="form-actions"> <button type="submit" class="btn btn-primary">変更を保存する</button> <button type="reset" class="btn">キャンセル</button> </div> </form> </div><!-- /col-lg-8 --> </div><!-- /row --> {% endblock %}
フォーム部品のテンプレートをimportしています
その部品単位で呼び出す事ができます
部品することで再利用がする事できます
masalibが思った事
部品単位にすることで再利用しやすいです
smartyにもあるのかな・・・
ある程度の部品を用意すれば
簡単にフォームがつくれるかも
次はtwigのフィルターについて
調査した結果を記載します