メニュー

Laravelのビュー/レイアウトとは

ビューとは

ビューはアプリケーションのフロントエンドを担当する。

Laravelでは、表示用のテンプレートをあらかじめ用意し、それを利用して画面表示を行うことが可能。

テンプレートは、「resources」フォルダ内にある「views」フォルダの中に配置する。また、PHPファイルとして作成する。

レイアウトという大枠を作ってそこにビューを組み込むのが一般的なやり方。

 

レイアウトの定義

以下の様に、レイアウトは大枠を定義する。

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>

        <!-- CSSとJavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- ナビバーの内容 -->
            </nav>
        </div>

        @yield('content')
    </body>
</html>

@yield('content')」にビューを組み込んで内容を表示させる。

@yield('content')

ビューの定義

以下の様に画面に入力項目やボタンを追加する。

<!-- resources/views/tasks.blade.php -->
@extends('layouts.app')

@section('content')

    <!-- Bootstrapの定形コード… -->

    <div class="panel-body">
        <!-- 新タスクフォーム -->
        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- タスク名 -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">タスク</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- タスク追加ボタン -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> タスク追加
                    </button>
                </div>
            </div>
        </form>
    </div>

@endsection

@extends('layouts.app')」は先ほどの「resources/views/layouts/app.blade.php」レイアウトを使用するという意味。

@section('content')」から「@endsection」の内容を、先ほどのレイアウトで定義した「@yield('content')」の部分に挿入する。

 

ビューの表示

ルーティング機能を利用し、テンプレートの表示が可能。

Route::メソッド ( ※値 , function (){

    return view(テンプレート , [連想配列]);

});


第1引数使用するテンプレートの名前を指定。

第2引数テンプレートに渡す値を連想配列で指定。指定された連想配列の値は、そのままテンプレート内で使うことが可能。

ルーティングで割り当てるアドレス

 

具体例は以下の通り。

Route::get('/', function () {
    return view('
tasks');
});

 

 


子記事一覧
子記事はありません

同階層の記事一覧
  1. インストール方法
  2. クイックスタート & チュートリアル(初心者向け)
  3. クイックスタート & チュートリアル(中級者向け)
  4. ルーティング
  5. ビュー/レイアウト
  6. Bladeテンプレート
  7. コントローラー
  8. マイグレーションとテーブル定義
  9. Eloquentモデル (ORM)
  10. データベース
  11. SQL
  12. バリデーション
  13. .envファイルの設定値へのアクセス
  14. 動作環境による分岐処理
  15. configフォルダ配下の設定値へのアクセス
  16. assetヘルパーを利用したpublicフォルダへのアクセス
  17. storageフォルダへのアクセス
  18. アプリケーション名の変更
  19. メンテナンス
  20. ログイン画面(認証システム)の作成
  21. ログインユーザー情報の取得
  22. ルートの認証化
  23. 本番サーバーへのデプロイ方法
  24. 多言語化
  25. csrf_field
  26. ファイルのダウンロード
  27. CSVのアップロードおよび読み込み(maatwebsite/excel)
  28. ページタイトルの設定
  29. コマンド一覧
  30. エラー一覧
  31. SQLの実行ログ出力方法
  32. キャッシュのクリア
  33. Selectの結果の最初もしくは最後に任意の値を追加する方法
  34. コントローラー内で他のコントローラーを呼び出す方法
  35. ajaxでPOST通信する際の注意点
  36. ソーシャルログインの実装
  37. セッション情報の確認
  38. ログイン、ユーザー登録、パスワードリセット後のリダイレクト先の変更方法
  39. redirectやreturn viewにメッセージを付与する方法
  40. クッキー(cookie)の設定と取得


▼ 詳細情報 ▼
▼ 過去バージョン ▼



最近コメントのあった記事

コメント一覧


コメントがありません