ログインをしてページを更新するだけでお金を稼ぐことが出来ます。
ページの作成

ページの作成

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

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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. csrf_field
  25. ファイルのダウンロード
  26. CSVのアップロードおよび読み込み(maatwebsite/excel)
  27. ページタイトルの設定
  28. コマンド一覧
  29. エラー一覧
  30. SQLの実行ログ出力方法
  31. キャッシュのクリア
  32. Selectの結果の最初もしくは最後に任意の値を追加する方法
  33. ajaxでPOST通信する際の注意点
  34. ソーシャルログインの実装
  35. セッション情報の確認
  36. ログイン、ユーザー登録、パスワードリセット後のリダイレクト先の変更方法
  37. redirectやreturn viewにメッセージを付与する方法
  38. クッキー(cookie)の設定と取得
  39. クラスの再読み込み
  40. csrfの有効時間を変更する方法
  41. ViewComposerを用いてviewに共通の値を付与する方法
  42. View::shareを用いて共通の値を各ビューに渡す方法
  43. ミドルウェアを用いた処理の共通化
  44. Middleware内でAuth::check()などを使用する方法
  45. Controller以外でリダイレクトする方法
  46. セッションの値の取得/保存/更新/削除
  47. $requestの値を変更する方法
  48. 常時SSL化
  49. ページング(ページネーション)をする方法
  50. vue.jsとの連携
  51. Vue.jsと連携するSPA実行環境構築
  52. .envの値をvue.jsで参照する方法
  53. vue.jsを本番環境にリリースする方法
コメント一覧

コメントがありません