Chapter3　レイアウトの作成（3-4）

## ベースレイアウトの作成

```helloapp.php
<html>
<head>
    <title>@yield('tit;e')</title>
    <style>
        body {
            font-size: 16pt;
            color: #999;
            margin: 5px;
        }
        h1 {
            font-size: 50pt;
            text-align: right;
            color: #f6f6f6;
            margin: -20px 0px -30px 0px;
            letter-spacing: -4pt;
        }
        ul {
            font-size: 12pt;
        }
        hr {
            margin: 25px 100px ;
            border-top: 1px dashed #ddd;
        }
        .menutitle {
            font-size: 14pt;
            font-weight: bold;
            mergin: 0px;
        }
        .content {
            margin: 10px;
        }
        .footer {
            text-align: right;
            font-size: 10pt;
            margin: 10px;
            border-bottom: solid 1px #ccc;
            color: #ccc;
        }
    </style>
</head>
<body>
    <h1>@yield('title')</h1>
    @section('menubar')
    <h2 class="menutitle">*メニュー</h2>
    <ul>
        <li>@show</li>
    </ul>
    <hr size="1">
    <div class="content">
        @yield('content')
    </div>
    <div class="footer">
        @yield('footer')
    </div>
</body>
</html>
```

## 継承レイアウトの作成

```index.php
@extends('layouts.helloapp')

@section('title','Index')

@section('menubar')
    @parent
    インデックスページ
@endsection

@section('content')
    <p>ここが本文のコンテンツです。</p>
    <p>必要なだけ記述できます。</p>
@endsection

@section('footer')
    copyright 2020 tuyano.
@endsection

```


# コンポーネントを組み込む

```index.php
@extends('layouts.helloapp')

@section('title','Index')

@section('menubar')
    @parent
    インデックスページ
@endsection

@section('content')
    <p>ここが本文のコンテンツです。</p>
    <p>必要なだけ記述できます。</p>

    @component('components.message')
        @slot('msg_title')
            CAUTION
        @endslot

        @slot('msg_content')
            これはメッセージの表示です。
        @endslot
    @endcomponent
@endsection

@section('footer')
    copyright 2020 tuyano.
@endsection
```

```message.php
<style>
    .message {
        border: double 4px #ccc;
        margin: 10px;
        padding: 10px;
        background-color: #fafafa;
    }
    .msg_title {
        margin: 10px 20px;
        color: #999;
        font-size: 16pt;
        font-weght: bold;
    }
    .msg_content {
        margin: 10px 20px;
        color: #aaa;
        font-size: 12pt;
    }
</style>
<div class="message">
    <p class="msg_title">{{$msg_title}}</p>
    <p class="msg_content">{{$msg_content}}</p>
</div>
```

# サブビューについて

```index.php
@extends('layouts.helloapp')

@section('title','Index')

@section('menubar')
    @parent
    インデックスページ
@endsection

@section('content')
    <p>ここが本文のコンテンツです。</p>
    <p>必要なだけ記述できます。</p>

    @include('components.message',['msg_title'=>'ok','msg_content'=>'サブビュー'])

@endsection

@section('footer')
    copyright 2020 tuyano.
@endsection
```

# `@each`によるコレクションビュー

item.phpに繰り返し表示したいリストを記述する

```item.php
<li>{{$item['name']}}[{{$item['mail']}}]</li>
```

`@each`にて繰り返しビューを表示するように、
`@section('content')`の中を修正する。

```index.php

**省略**

@section('content')
    <p>ここが本文のコンテンツです。</p>
    <p>必要なだけ記述できます。</p>

    <ul>
        @each('components.item',$data,'item')
    </ul>

@endsection

**省略**

```

コントローラーに繰り返し表示したいデータを
`Hello.index`に連想配列にて引き渡す。

```HelloController.php
class HelloController extends Controller
{
    public function index() {

        $data = [

            ['name'=>'山田太郎','mail'=>'taro@yamada'],
            ['name'=>'田中はなこ','mail'=>'thanako@flower'],
            ['name'=>'鈴木さちこ','mail'=>'sachiko@happy']

        ];

        return view('hello.index',['data'=>$data]);

    }

}

```