読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

TWIGの調査5(form処理について)

PHP

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のフィルターについて
調査した結果を記載します