WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
Bootstrap用Formマクロ集

Bootstrap用Formマクロ集

このエントリーをはてなブックマークに追加

作成したフォームマクロの覚え書き用のページです。少しずつ増やしていきます。

チェックボックス用

Form::macro('cb',function($name,$value){
 $markup='';
 $markup.='<div class="checkbox">'."\n";
 $markup.='<input type="checkbox"';
 $markup.=' name="'.$name.'"';
 $markup.=' value="'.$value.'"';
 if(Input::get($name)==$value){
 $markup.=' checked';
 }
 $markup.='> ';
 $markup.=$value;
 $markup.='</div>';
 return $markup;
 });
  • Form::cb(チェックボックス名,値)で使用
  • 7-9行目:バリデーション時に前ページでチェックを入れた箇所にチェックが入っているように作成

ラジオボタングループ用

Form::macro('rb',function($name,$values){
 $markup="";
 foreach($values as $key=>$value){
 $markup.='<div class="radio">'."\n";
 $markup.='<input type="radio"';
 $markup.=' name='.$name;
 $markup.=' value='.$key;
 if(Input::get($name)==$key){
 $markup.=' checked';
 }
 $markup.='> '.$value."\n";
 $markup.='</div>'."\n";
 }
 return $markup;
  • Form::rb(ラジオボタン名,値とラベル名の配列)で使用
  • 3-13行目:第2引数$valuesの数だけ繰り返し
  • 8-10行目:ラジオボタンの値と取得したキーが一致したラジオボタン(直前値)にチェックが入るように作成

非表示イベント付きradioボタン

//表示非表示Javascriptイベント付きradioボタン
 Form::macro('jsHiddenRadio',function($name,$values){
 $event=$name.'Event()';
 $onload=$name.'Event';
 $input=Session::get($name,'');
 $markup='';
 $markup.='<script type="text/javascript">'."\n";
 $markup.='function '.$event.'{'."\n";
 $markup.='radio = document.getElementsByName("'.$name.'") '."\n";
 $markup.='if(radio[0].checked){'."\n";
 $markup.='document.getElementById("'.$name.'").style.display = "none";'."\n";
 $markup.='}else if(radio[1].checked){';
 $markup.='document.getElementById("'.$name.'").style.display = "";'."\n";
 $markup.='}'."\n".'}'."\n";
 $markup.='window.onload ='.$onload.';'."\n";
 $markup.='</script>'."\n";
 //$valueの数だけ繰り返し
 foreach($values as $key=>$value){
 $markup.='<div class="radio">';
 $markup.='<label>';
 $markup.='<input type="radio"';
 $markup.=' name='.$name;
 $markup.=' value="'.$key.'"';
 $markup.=' onclick='.$event;
 if(Input::get($name)==$key){
 $markup.=' checked';
 }
 $markup.='> '.$value;
 $markup.='</label>';
 $markup.='</div>';
 }
 $markup.='<div id='.$name.' style="display:none;">';
 return $markup;
 });
 //表示非表示イベントの終了タグ
 Form::macro('hiddenEnd',function(){
 $markup='</div>';
 return $markup;
 });
  • Form::jsHiddenRadio(ラジオボタン名,値の配列)で使用。Form::hiddenEnd()と一緒に使用するように作成
  • ラジオボタンのキー1にチェックが入っている場合、Form::jsHiddenRadio()とForm::hiddenEnd()の間のタグが表示されるように作成
  • 基本的にYES/NOで表示非表示を切り替える場合に使用する目的で作成
  • 3つ以上のラジオボタンを扱う場合には修正が必要。

アコーディオンパネル

//アコーディオンパネルの開始タグ
 Form::macro('accordionOpen',function($id,$value){
 $markup='';
 $markup.='<div class="panel panel-default">'."\n";
 $markup.='<div class="panel-heading">'."\n";
 $markup.='<h4 class="panel-title">'."\n";
 $markup.='<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$id.'">'."\n";
 $markup.=$value."\n";
 $markup.='</a>'."\n";
 $markup.='</h4>'."\n";
 $markup.='</div>'."\n";
 $markup.='<div id="collapse'.$id.'" class="panel-collapse collapse">'."\n";
 $markup.='<div class="panel-body">'."\n";
 return $markup;
 });
 //アコーディオンパネルの終了タグ
 Form::macro('accordionClose',function(){
 $markup='';
 $markup.='</div>';
 $markup.='</div>';
 return $markup;
 });
  • Form::accordinonOpen()~Form::accordionClose()の間にデータを表記
  • Form::accordionOpen(id名,アコーディオンパネルのタイトル)で使用します。

使用例

<div class="panel-group" id="accordion">
 {{Form::accordionOpen('fubi',Session::get('fubi','資材の不備はありませんか'))}}
 {{Form::jsHiddenRadio('fubi',['ありません','あります'])}}
 <label>不備箇所にチェックを入れてください</label> 
 {{Form::cb('fubi1','破損箇所あり')}}
 {{Form::cb('fubi2','劣化箇所あり')}}
 {{Form::cb('fubi3','亀裂箇所あり')}}
 {{Form::cb('fubi4','数量不足')}}
 {{Form::cb('fubi5','サイズ違い')}}<br>
 <label>内容と状況を記述して下さい</label>
 {{Form::txt('fubi_naiyou','内容')}}
 {{Form::txt('fubi_joukyou','状況')}}
 {{Form::hiddenEnd()}}
 {{Form::accordionClose()}}
</div>
  •  2行目:バリデーションに応じて表題のタイトルを変化させるように作成
  • 3行目:ラジオボタンの『あります』にチェックが入っていたら、4-12行目を表示。デフォルトでは、『ありません』のボタンが選択されている状態。ラジオボタンのどちらも選択されていない状態にするためには、[‘1’=>’ありません’,’2’=>’あります’]とする。

Horizontalフォーム

//Horizontalフォームのオープンタグ
Form::macro('horizontalOpen',function($options=[]){
$markup = "";
$url=$_SERVER['REQUEST_URI'];
$class='form-horizontal';
if(!empty($options['url'])){
$url=$options['url'];
}
if(!empty($options['class'])){
$class=' '.$options['class'];
}
$options="'class'=>$class";
$markup.=Form::open([
'class'=>$class,
'url'=>$url,
]);
});
//Horizontalのテキストフォームタグ
 Form::macro('horizontalText',function($name,$value,$options=[]){
 //markupをリセット
 $markup = '';
 //$labelをリセット
 $label = '';
 //$typeに初期値'text'を代入
 $type = 'text';
 //$placeholderをリセット
 $placeholder = '';
 //$typeが指定されていたら
 if (!empty($options['type'])){
 //$typeにオプションの指定値を代入
 $type = $options['type'];
 }
 //$placeholderが指定されていたら
 if (!empty($options['placeholder'])){
 //$placeholderにオプションの指定値を代入
 $placeholder = $options['placeholder'];
 }
 $label=$name;
 //ラベル名が指定されていたら
 if (!empty($options['label'])){
 //$labelにオプションのラベル値を代入
 $label = $options['label'];
 }
 //フィールドサイズとラベルサイズの初期値を設定
 $field_size = 8;
 $label_size = 4;
 //$sizeが指定されていたら
 if (!empty($options['size'])){
 //$field_sizeとlabel_sizeに指定値を代入
 $field_size = $options['size'];
 $label_size = 12 - ($field_size);
 }
 $class = 'form-control';
 //$classが指定されていたら
 if (!empty($options['class'])){
 //$classに空白+クラスの指定値を代入
 $class = " " . $options['class'];
 }
 //必須項目オプション
 $required = '';
 //$requiredが指定されていたら
 if (!empty($options['required'])){
 //$classに空白+requiredの指定値を代入
 $required = " " . $options['required'];
 }
 //マークアップの生成
 $markup.='<div class="form-group">'."\n";
 $markup.='<label';
 $markup.=' class="col-sm-'.$label_size;
 $markup.=' control-label">'."\n";
 $markup.=' '.$label;
 $markup.='</label>'."\n";
 $markup.='<div class="col-sm-'.$field_size;
 $markup.='">'."\n";
 $markup.='<input type="'.$type.'"';
 $markup.=' name="'.$name.'"';
 $markup.=' value="'.$value.'"';
 $markup.=' class='.$class;
 $markup.=' placeholder="'.$placeholder.'"';
 $markup.=' '.$required.'>'."\n";
 $markup.='</div></div>'."\n";
 return $markup;
 });
  •  2-7行目:Horizontalフォーム用のオープンタグです。閉じタグは、Form::close()でOKです。
  • 9-64行目:Horizontalフォームのテキスト用タグです。
  • Form::horizontalText(‘フィールド名’,’値’,オプションの配列)で使用します。
  • input type=”” の初期値はtextに指定してあります。オプションで何も指定しなければ、基本的にtextが代入されます。
  • ラベル名の初期値はフィールド名にしてあります。オプションで何も指定しなければ、フィールド名が代入されます。
  • フィールドサイズの初期値を8に指定してあります。オプションで何も指定しなければ、ラベルサイズが4、フィールドサイズが8になります。サイズを指定するときは、フィールドのサイズのみを指定します。つまり、オプションで’size’=>’9’と指定すると、ラベルサイズが3で、フィールドサイズが9になります。
  • 44-52行目:クラスの初期値をclass=”form-control”にしていてあります。クラスを追加したいときは、オプションで指定できます。 
  • 59-65行目:必須項目オプションです。’required’=>’required’を指定すると、必須項目になります。何も入力しないで、送信ボタンをクリックすると、『このフィールドは必須です』とエラーメッセージが送信されます。必須項目だけのバリデーションなら、これだけで事足ります。

Form::horizontal()の使用例

<h2>{{$user->name}}データの更新</h2>
 {{ Form::horizontalOpen() }}
 {{ Form::horizontalText('name',$user->name,['label'=>'氏名'])}}
 @if($errors->has('name'))
 <div class="alert alert-danger">
 {{$errors->first('name')}}
 </div>
 @endif
 {{ Form::horizontalText('email',$user->email,['label'=>'Eメール','type'=>'email'])}}
 @if($errors->has('email'))
 <div class="alert alert-danger">
 {{$errors->first('email')}}
 </div>
 @endif
 {{ Form::horizontalText('password','',['label'=>'パスワード','type'=>'password'])}}
 @if($errors->has('password'))
 <div class="alert alert-danger">
 {{$errors->first('password')}}
 </div>
 @endif
 <br>
 {{Form::submit('送信',[
 'class'=>'btn btn-primary col-sm-6 col-sm-offset-4'
 ])}}
 {{ Form::close() }}

 tableフォーム

//テーブルFormの開始タグ
 Form::macro('tableOpen',function($class=null){
 $markup='<table class="table';
 if(!empty($class)){
 $markup.=' '.$class;
 }
 $markup.='">'."\n";
 return $markup;
 });
 //テーブルFormの終了タグ
 Form::macro('tableClose',function(){
 $markup='</table>';
 return $markup;
 });
  • 2-9行目:テーブルの開始タグです。オプションでクラスの追加が出来ます。
  • (例)Form::open(‘table-borderd’);
  • 複数追加するときは、スペースの後に続けます。
  • 11-14行目:テーブルの終了タグです。</table>だけですので、なくても大丈夫ですが、開始と終了をセットにしておいたほうが間違いが少ないと思います。

テーブルリスト(一覧表示)

//テーブルの一覧(表題及びデータ)
 Form::macro('tableList',function($items,$data){
 $markup='';
 $markup='<thead>'."\n";
 $markup.='<tr>'."\n";
 foreach($items as $label){
 $markup.='<th>'.$label.'</th>'."\n";
 }
 $markup.='</tr>'."\n";
 $markup.='<tr>'."\n";
 foreach($data as $datum){
 foreach($items as $key=>$value){
 $markup.='<td>'.$datum->$key.'</td>'."\n";
 }
 $markup.='</tr>'."\n";
 }
 return $markup;
 });
  • Form::tableList(‘表示項目’,’データ’) で使用します。
  • 第1引数に、フィールド名と項目名を連想配列で指定します。
  • 第2引数に、表示するデータを指定します。

tableListの使い方

{{Form::tableOpen()}}
  {{Form::tableList(['name'=>'ユーザー名','email'=>'Eメール'],$users)}}
{{Form::tableClose()}}
  • 第2引数の$usersから取得したデータを元に、第1引数の’name’と’email’のフィールドの値をデータの数だけ繰り返して表示します。そして、’ユーザー名’と’Eメール’はテーブルのラベル(<th>項目)として表示します。

テーブルビュー(明細表示)

//テーブルの詳細(表題及びデータ)
 Form::macro('tableView',function($items,$data,$options=[]){
 $markup='';
 foreach($items as $key=>$label){
 $markup.='<tr>'."\n";
 if(!empty($options['width'])){
 $markup.='<th width="';
 $markup.=$options['width'];
 $markup.='">';
 }else{
 $markup.='<th>';
 }
 $markup.=$label;
 $markup.='</th>'."\n";
 $markup.='<td>'.$data->$key.'</td>'."\n";
 $markup.='</tr>'."\n";
 }
 return $markup;
 });
  • Form::tableView()は、テーブルでデータの詳細を表示するために作成しました。
  • Form::tableView()は、3つの引数を持ちます。
  • 第1引数は、詳細表示する項目です。’フィールド名’=>’ラベル名’(例:’name’=>’ユーザー名)で指定します。
  • 第2引数は、詳細表示するデータです。
  • 第3引数は、オプションです。デフォルトでは、何も指定していません。とりあえず、テーブルのサイズ(thカラムのサイズ)だけを作成しました。 [‘width’=>’20%’] みたいな感じで指定します。

tableViewの使い方

@extends('tbs.base')
 @section('content')
 <h3>ユーザー詳細</h3>
 {{Form::tableOpen('table-bordered table-striped')}}
 {{Form::tableView([
 'id'=>'ID',
 'name'=>'ユーザー名',
 'email'=>'Eメール',
 'tel'=>'電話番号',
 'z_code'=>'郵便番号',
 'address'=>'住所',
 ],$user,['width'=>'20%'])}}
 {{Form::tableClose()}}
 @stop

リンク付きテーブルリスト

上記のテーブルリストを若干修正しましたので、下記に記述しておきます。

//テーブルの一覧(表題及びデータ)
 Form::macro('tableList',function($items,$data,$links){
 $markup='';
 $markup.='<thead>'."\n";
 $markup.='<tr>'."\n";
 foreach($items as $label){
 $markup.='<th>'.$label.'</th>'."\n";
 }
 $markup.='</tr>'."\n";
 $markup.='<tr>'."\n";
 foreach($data as $datum){
 foreach($items as $key=>$value){
 $markup.='<td>'.$datum->$key.'</td>'."\n";
 }
 foreach($links as $url=>$label){
 $url=$url."/".$datum->id;
 $markup.='<td>';
 $markup.=link_to($url,$label);
 $markup.='</td>'."\n";
 }=
 $markup.='</tr>'."\n";
 }
 return $markup;
 });
  • Form::tableList()の引数を3つに修正しました。
  • 第1引数は、項目フィールドを項目名とラベル名の連想配列で、指定します。
  • (例)[‘name’=>’氏名’,’email’=>’Eメール’] のように指定します。
  • 第2引数は、一覧表示するデータを指定します。
  • そして、第3引数にリンク先を追加しました。’url’=>’ラベル名’で指定します。
  • (例)[‘user/view’=>’詳細’,’user/delete’=>’削除’] のように指定します。

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です