Laravel 開発環境の構築（CentOS7）

# ①Laravelのインストールとディレクトリ構成

下記を参考にphp開発環境の構築及びDBの設定が済んでいることを前提とします．

参考：[Vagrantでphp開発環境を構築(CentOS7.2)](https://qiita.com/koukibuu3/items/1f5867b8f7939d2bbfb2)

- 下記コマンドを実行してください（Laravelをインストールします）．

```bash:仮想マシン
# laravelインストーラをインストールする
$ composer global require "laravel/installer=~1.1"
# laravelプロジェクトを作成する
$ composer create-project laravel/laravel /var/www/[プロジェクト名] --prefer-dist
```

ディレクトリ構成は下記のようになっており，主にコントローラである`Http/Controllers/`と，ビューである`resources/views/`配下を編集することで開発を進めていきます．

```bash:ディレクトリ構成
app
  ├ Http/
  |  └ Controllers/
  |      ├ Auth/
  |      └ Controller.php
  ├ config/
  |  ├ app.php
  |  └ database.php
  ├ database/
  |  └ migrations/
  ├ public/
  |  ├ css/
  |  └ js/
  ├ resources/
  |  ├ assets
  |  └ views
  ├ routes/
  |  └ web.php
  └ .env
```

- `Http/Controllers/` : コントーラを配置するフォルダ．
- `config/app.php` : アプリケーション全体の設定をするファイル（ロケール情報など）．
- `config/database.php` : 接続するデータベースに関しての設定をするファイル．
- `database/migrations/` : マイグレーションファイルを配置するフォルダ．
- `public/` : 外部からアクセス可能なフォルダ．CSSやJSはここに配置する．
- `resources/views/` : ビューを配置するフォルダ．
- `routes/` : ルーティング情報を配置するフォルダ．

# ②サンプルページの作成

Laravelでviewを作成する際は，Bladeというテンプレートエンジンを用います．

今回は下記のような構成で，サンプルページを作ってみることにします．

- `layouts/common.blade.php` : ベースとなるテンプレートファイル
- `layouts/head.blade.php` : HTMLのHeadタグの中に書き込むテンプレートファイル
- `layouts/header.blade.php` : ヘッダーのテンプレートファイル
- `layouts/footer.blade.php` : フッターのテンプレートファイル
- `pages/sample.blade.php` : サンプルページのビューファイル（ページごとに作成します）

テンプレートファイルは，layout/ディレクトリを作ってその配下に，ビューファイルはpages/ディレクトリを作ってその配下に配置しました．これらの配置場所によって，呼び出す際の指定方法が変わってくるので気をつけてください．


参考：[Blade テンプレートについて - Laravel学習帳](http://laraweb.net/knowledge/2174/)
参考：[LaravelのBladeテンプレートでレイアウト部分を共通にする](http://cly7796.net/wp/php/to-a-common-layout-in-blade-template-of-laravel/)

```html:common.blade.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
    {{-- Head部分 --}}
    @yield('head')
</head>
<body>
    {{-- ヘッダー部分 --}}
    @yield('header')

    <div class="container">

    <div class="main">
        {{-- コンテンツ部分 --}}
        @yield('content')
    </div>

    <div class="sub">
        {{-- サブコンテンツ部分 --}}
        @yield('sub')
        {{-- ページサブコンテンツ部分 --}}
        @yield('pageSub')
    </div>

    </div>
    {{-- フッター部分 --}}
    @yield('footer')
</body>
```

```html:head.blade.php
@section('head')
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Laravelサンプルサイト | @yield('title')</title>
<meta name="description" content=@yield('description')>
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- テンプレート共通CSS -->
<link type="text/css" href="{{asset('/css/app.css')}}" rel="stylesheet">
@yield('pageCss')
@stop
```

```html:header.blade.php
@section('header')
<header class="header">
    <h1>Laravelサンプルサイト</h1>
</header>
@stop
```

```html:footer.blade.php
@section('footer')
<footer class="footer">
    <small>@created by koukibuu3</small>
</footer>
<!-- テンプレート共通JS -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="{{{asset('/js/app.js')}}}"></script>
@yield('pageJs')
@stop
```

```html:sample.blade.php
{{-- レイアウトの読み込み --}}
@extends('layouts.common')

{{-- CSSの読み込み --}}
@section('pageCss')
<!-- ページ独自CSS -->
<link type="text/css" href="{{asset('/css/sample.css')}}" rel="stylesheet">
@stop

@section('title')
サンプルページ
@stop

{{-- Headの読み込み --}}
@include('layouts.head')

{{-- ヘッダーの読み込み --}}
@include('layouts.header')

{{-- メインコンテンツ --}}
@section('content')
    <h2>This is sample page.</h2>
    <table>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>EMAIL</th>
        </tr>
        <?php foreach ($data as $val) { ?>
        <tr>
            <td><?php echo $val->id; ?></td>
            <td><?php echo $val->name; ?></td>
            <td><?php echo $val->email; ?></td>
        </tr>
        <?php } ?>
    </table>
@stop

{{-- JSの読み込み --}}
@section('pageJs')
<!-- ページ独自JS -->
<script type="text/javascript" src="{{{asset('/js/sample.js')}}}"></script>
@stop

{{-- フッターの読み込み --}}
@include('layouts.footer')
```