Ground Sunlight

Windowsで作る - PHPプログラミングの開発環境

ユーザ用ツール

サイト用ツール

トレース:
apricot:app:user-list

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
apricot:app:user-list [2020/05/12 23:50]
y2sunlight [HTMLテンプレート] 		apricot:app:user-list [2020/05/21 10:41] (現在)
y2sunlight [Apricot ユーザ一覧画面]
行 1: 行 1:
->編集中 
- 
----- 
- 
 ====== Apricot ユーザ一覧画面 ====== ====== Apricot ユーザ一覧画面 ======
  --- //[[http://www.y2sunlight.com|y2sunlight]] 2020-05-11//  --- //[[http://www.y2sunlight.com|y2sunlight]] 2020-05-11//
行 18: 行 14:
     * [[apricot:app:db-model|Apricot データベースとモデル]]     * [[apricot:app:db-model|Apricot データベースとモデル]]
     * Apricot ユーザ一覧画面     * Apricot ユーザ一覧画面
-    * [[apricot:app:user-edit|Apricot ユーザ編集画面]]+    * [[apricot:app:user-edit|Apricot ユーザ登録画面]]
     * [[apricot:app:validation|Apricot バリデーション]]     * [[apricot:app:validation|Apricot バリデーション]]
     * [[apricot:app:transaction|Apricot トランザクション]]     * [[apricot:app:transaction|Apricot トランザクション]]
-  * [[apricot:ext:top|Apricot 拡張]]+  * [[apricot:ext:middleware|Apricot 拡張]]
  
  
 ユーザ一覧画面を作ります。\\  ユーザ一覧画面を作ります。\\ 
-画面の作り方の基本は[[apricot:app:top#スタブ画面|スタブ画面]]と同じです。本章の前にそちらをご覧下さい。+画面の作り方の基本は[[apricot:app:top#スタブ画面|スタブ画面]]と同じです。本章の前にそちらもご覧下さい。
  
 ---- ----
行 148: 行 144:
     public function create()     public function create()
     {     {
-        // Stab+        // Stub
         $title = 'ユーザ新規登録';         $title = 'ユーザ新規登録';
-        return render("stub", ["title"=>$title]);+        $messages[] = "This is Stub."; 
 + 
 +        return render('stub',['title'=>$title,'messages'=>$messages]);
     }     }
  
行 159: 行 157:
     public function edit(int $id)     public function edit(int $id)
     {     {
-        // Stab+        // Stub
         $title = 'ユーザ編集';         $title = 'ユーザ編集';
-        return render("stub", ["title"=>$title]);+        $messages[] = "This is Stub."; 
 + 
 +        return render('stub',['title'=>$title,'messages'=>$messages]);
     }     }
 } }
 </code> </code>
  
-  * **index()**+  * **index()** : ユーザ一覧
     * ボイラープレートのrender()関数を呼び出してレスポンスをレンダリングしています     * ボイラープレートのrender()関数を呼び出してレスポンスをレンダリングしています
     * **render(string $view=null, array $variables=[])**     * **render(string $view=null, array $variables=[])**
行 172: 行 172:
       - $variables : テンプレート変数の連想配列\\ 上例では検索結果( $users )をテンプレートに渡しています。       - $variables : テンプレート変数の連想配列\\ 上例では検索結果( $users )をテンプレートに渡しています。
  
-  * **create()**,**edit()**+  * **create()** : ユーザ新規登録 
 +  * **edit()** : ユーザ編集
     * スタブを実装しています (次章の[[apricot:app:user-edit|ユーザ編集画面]]で実装します)     * スタブを実装しています (次章の[[apricot:app:user-edit|ユーザ編集画面]]で実装します)
  
行 228: 行 229:
 </code> </code>
  
-  * ''extends'', ''push'', ''scripts'', ''section'' の各ディレクティブについては、[[apricot:app:top#htmlテンプレート|スタブ画面]] を参照して下さい。+  * ''extends'', ''push'', ''section'' の各ディレクティブについては、[[apricot:app:top#htmlテンプレート|スタブ画面]] を参照して下さい。
   * ボイラープレート''<nowiki>__</nowiki>()'', '' route()'' については、[[apricot:app:top#layoutbladephp|layout.blade.php]] を参照して下さい。   * ボイラープレート''<nowiki>__</nowiki>()'', '' route()'' については、[[apricot:app:top#layoutbladephp|layout.blade.php]] を参照して下さい。
-  * ''ユーザ一覧表示'' + 
-    * テンプレート変数 $users を使いユーザ一覧を表示しています。 +  * **ユーザ一覧表示** 
-    * @foreachはPHPのforeachと同じ機能を有するディレクティブです。 +    * テンプレート変数 ''$users'' を使いユーザ一覧を表示しています。 
-    * ViewHelper::formatDatetime は日時のフォーマットを行うアプリの[[apricot:app:top#ヘルパークラス|ヘルパー関数です]]。+    * ''@foreach'' はPHPの foreach と同じ機能を有するディレクティブです。 
 +    * ''ViewHelper::formatDatetime'' は日時のフォーマットを行うアプリの[[apricot:app:top#ヘルパークラス|ヘルパー関数です]]。
  
 HTMLテンプレートに関しては本編[[http://www.y2sunlight.com/ground/doku.php?id=basic-library:bladeone:3.37|BladeOne]]のリンクを項を参照して下さい。 HTMLテンプレートに関しては本編[[http://www.y2sunlight.com/ground/doku.php?id=basic-library:bladeone:3.37|BladeOne]]のリンクを項を参照して下さい。
 +
 +\\
 +
 +===== ホーム画面の変更 =====
 +
 +Apricotのメニューからユーザ一覧画面を表示するために、layout.blade.php を以下のように変更します。
 +
 +{{fa>folder-open-o}} ** /apricot/assets/view **
 +<code php layout.blade.php>
 +...
 +
 +            <ul class="navbar-nav mr-auto">
 +                <li class="nav-item"><a class="nav-link" href="{{route('users')}}">{{__('messages.app.menu.menu1')}}</a></li>
 +                <li class="nav-item"><a class="nav-link" href="{{route('stub/2')}}">{{__('messages.app.menu.menu2')}}</a></li>
 +                <li class="nav-item"><a class="nav-link" href="{{route('stub/3')}}">{{__('messages.app.menu.menu3')}}</a></li>
 +                <li class="nav-item"><a class="nav-link" href="http://y2sunlight.com/ground/doku.php?id=apricot:top" target="_blank">{{__('messages.app.menu.about_me')}}</a></li>
 +            </ul>
 +
 +...
 +</code>
 +
 +  * Menu1のリンクを ''route('stub/1')'' から ''route('users')'' に変更します。
  
 \\ \\
行 241: 行 265:
 ===== 翻訳テキスト ===== ===== 翻訳テキスト =====
  
-ユーザ一覧画面用の翻訳テキストを言語ファイル( messages.php )に追加します。+翻訳ファイル( messages.php )を以下のように変更します。
  
 {{fa>folder-open-o}} ** apricot/assets/lang/ja ** {{fa>folder-open-o}} ** apricot/assets/lang/ja **
行 247: 行 271:
 <?php <?php
 return [ return [
 +    'app'=>[ 
 +        'title'=>env('APP_NAME'), 
 +        'menu'=>[ 
 +            'menu1'=>'Users', 
 +            'menu2'=>'Menu2', 
 +            'menu3'=>'Menu3', 
 +            'logout'=>'Logout', 
 +            'about_me'=>'About Me', 
 +        ], 
 +    ],
     ...     ...
  
行 264: 行 297:
 </code> </code>
  
-\\ +  * メニュー項目表示 ''app.menu.menu1'' の値を 'Menu1' から 'Users' に変更します。 
- +  * ユーザ一覧画面用の翻訳テキストを ''user.index'' に追加します。
-===== ホーム画面の変更 ===== +
-==== HTMLレイアウト ==== +
- +
-Apricotのメニューに[Users]を追加するために、layout.blade.php を以下のように変更します。 +
- +
-{{fa>folder-open-o}} ** /apricot/assets/view ** +
-<code php layout.blade.php> +
- +
-            <ul class="navbar-nav mr-auto"> +
-                <li class="nav-item"><a class="nav-link" href="{{route('users')}}">{{__('messages.app.menu.menu1')}}</a></li> +
-                <li class="nav-item"><a class="nav-link" href="{{route('stub/2')}}">{{__('messages.app.menu.menu2')}}</a></li> +
-                <li class="nav-item"><a class="nav-link" href="{{route('stub/3')}}">{{__('messages.app.menu.menu3')}}</a></li> +
-                <li class="nav-item"><a class="nav-link" href="http://y2sunlight.com/ground/doku.php?id=apricot:top" target="_blank">{{__('messages.app.menu.about_me')}}</a></li> +
-            </ul> +
- +
-</code> +
- +
-  * route('stub/1') を route('users') に変更します。+
  
 \\ \\
- 
  
 ===== テスト実行 ===== ===== テスト実行 =====
行 296: 行 310:
 </code> </code>
  
-[Users]メニューをクリックすると次の画面が表示されます+[{{apricot:app:app02.png?nolink}}] 
 +■ [Users]メニューをクリックすると次の画面が表示されます
  
-[{{apricot:app:app02.png?nolink}}] +[{{apricot:app:app05.png?nolink}}] 
-■ ユーザ一覧中のユーザをクリックするとタブ画面が表示されます。\\  +■ [新規]ボタンを押すとユーザ新規登録画面のスタブが表示されます\\  
-■ [新規]ボタンをクリックするとスタブ画面が表示されます。\\ +■ リスト内のユーザをクリックするとユーザ編集画面のスタブが表示されます
  
 \\ \\
  
apricot/app/user-list.1589295026.txt.gz · 最終更新: 2020/05/12 23:50 by y2sunlight

ページ用ツール

特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki