ページの作成

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
テンプレートを更新

5. LaravelのBladeテンプレート(ビュー/レイアウト)とは

LaravelにはBladeというテンプレートエンジンがある。

 

Bladeテンプレートとは?

Bladeテンプレートを使うとと、共通部分(ヘッダー、サイドバー、フッター等)は親ビューに記述し、各ページのコンテンツは親ビューを継承した小ビューに記述するというようなことができる。

また、ディレクティブ(@~)を使用することで「if」や「for」を簡潔に記述することが出来る。

テンプレートの拡張子は「.blade.php」とする。

 

ビューとは

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

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

テンプレートは、「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. 親ビューと子ビュー(@section, @yield, @extends, @parent, @include)
  2. 条件分岐(@if)
  3. 繰り返し(@for, @foreach, @forelse, @while)
  4. 個別のページにcssやjsを反映させる方法
同階層のページ
  1. インストールと設定
  2. クイックスタート & チュートリアル(初心者向け)
  3. クイックスタート & チュートリアル(中級者向け)
  4. ルーティング
  5. Bladeテンプレート(ビュー/レイアウト)
  6. コントローラー
  7. マイグレーションとテーブル定義
  8. データベースの設定
  9. Eloquentモデル (ORM)
  10. SQLとクエリビルダー
  11. バリデーション
  12. .envファイルの設定値へのアクセス
  13. 動作環境による分岐処理
  14. configフォルダ配下の設定値へのアクセス
  15. assetヘルパーを利用したpublicフォルダへのアクセス
  16. storageフォルダへのアクセス
  17. アプリケーション名の変更
  18. メンテナンス
  19. ログイン画面(認証システム)の作成
  20. ログインの必須化
  21. ログインユーザー情報の取得
  22. ルートの認証化
  23. 本番サーバーへのデプロイ方法
  24. 多言語化
  25. csrf_field
  26. ファイルのダウンロード
  27. CSVのアップロードおよび読み込み(maatwebsite/excel)
  28. ページタイトルの設定
  29. コマンド一覧
  30. エラー一覧
  31. SQLの実行ログ出力方法
  32. キャッシュのクリア
  33. Selectの結果の最初もしくは最後に任意の値を追加する方法
  34. ajaxでPOST通信する際の注意点
  35. ソーシャルログインの実装
  36. セッション情報の確認
  37. ログイン、ユーザー登録、パスワードリセット後のリダイレクト先の変更方法
  38. redirectやreturn viewにメッセージを付与する方法
  39. クッキー(cookie)の設定と取得
  40. クラスの再読み込み
  41. csrfの有効時間を変更する方法
  42. ViewComposerを用いてviewに共通の値を付与する方法
  43. View::shareを用いて共通の値を各ビューに渡す方法
  44. ミドルウェアを用いた処理の共通化
  45. Middleware内でAuth::check()などを使用する方法
  46. Controller以外でリダイレクトする方法
  47. セッションの値の取得/保存/更新/削除
  48. $requestの値を変更する方法
  49. 常時SSL化
  50. ページング(ページネーション)をする方法
  51. vue.jsとの連携
  52. Vue.jsと連携するSPA実行環境構築
  53. .envの値をvue.jsで参照する方法
  54. vue.jsを本番環境にリリースする方法
  55. could not find driver(Windows, MySQL編)

最近の質問

コメント一覧

    No.267 | guest | 2022-07-24 09:13:55

    betflix6789.com เป็นผู้ให้บริการคาสิโนออนไลน์ ที่ฝาก-ถอนอัตโนมัติเว็บสล็อตแจกเครดิตฟรี ไม่ต้องฝาก ไม่ต้องแชร์ 2565เร็วที่สุด รอให้บริการสล็อต บาคาร่า ยิงปลาออนไลน์ท่านตลอด 24ชั่วโมงสมัครเลย

    No.134 | guest | 2020-08-23 08:40:51

    Chief Synthetic Intelligence Officer (Industrial). industrial internet of things and industry 4.0

    No.90 | guest | 2020-06-26 00:33:40

    casino games slots online casino slots online casino games online

    No.88 | guest | 2020-06-24 05:23:43

    online casino games casino games online online casino casino online slots online

    No.75 | guest | 2020-06-08 16:26:36

    online casino casino online online casino games casino games online casino

    No.73 | guest | 2020-06-08 14:48:30

    casino online casino games online casino games casino games online casino games online

    No.66 | guest | 2020-06-02 11:15:17

    casino games casino online real money games casino real money casino games online

    No.59 | guest | 2020-05-25 16:10:36

    real money games casino online slots online slots online online casino