Laravelで簡単なメモアプリを作る（1）~Viewの作成と表示~

# はじめに
[Laravel](http://laravel.jp/)とは、Webに特化したPHPフレームワーク。セキュリティ対策(CSRF対策など)もこれでできます。MVCアーキテクチャを採用しています。今回から、Laravelで簡単なメモアプリを作っていきます。今回は、Viewの作成と表示までできればいいかなって思っています。

[Laravelで簡単なメモアプリを作る（2）~データの取得と保存~](https://qiita.com/Alesion30/items/97c3bd16c4e20d4bdb72)
[Laravelで簡単なメモアプリを作る（3）~データの更新と削除~](https://qiita.com/Alesion30/items/11a9e17368b922e67a5c)

# 今回の目標物
<img width="723" alt="スクリーンショット 2019-12-31 11.25.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/677f6e21-1da3-ad96-4ac5-116fb6e8c391.png">

<img width="703" alt="スクリーンショット 2019-12-31 11.25.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/88b43946-ed4d-5ab1-56c6-d95b4d8f011b.png">

# アプリの雛形を作る
laravelのセットアップについては、こちらにまとめています。
<a href="https://qiita.com/Alesion30/items/6996e18b3c183316d058" target="_blank">laravelのセットアップ(Mac)</a>
<a href="https://qiita.com/Alesion30/items/47c7c7fe110c440067f5" target="_blank">laravelのセットアップ(Windows)</a>

`laravel new memoApp` でアプリの雛形を作る。
xampp(mamp)のフォルダーの中にあるhtdocsフォルダーの中に、先ほどできたmemoAppというフォルダを入れる。

# MVCアーキテクチャ
MVCアーキテクチャとは、見える部分であるViewと、データベースを取り扱うModelと、その二つとユーザーを繋げるControllerからなるアーキテクチャのことである。

<img width="997" alt="スクリーンショット 2019-12-31 11.33.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/40efd4a6-fc35-0411-293a-2df6a2aab711.png">

---

Viewを表示する場合

<img width="1010" alt="スクリーンショット 2019-12-31 11.35.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/b6652eb0-b21a-81cb-bb34-b0b3047f2356.png">

<img width="1010" alt="スクリーンショット 2019-12-31 11.36.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/ff7e4726-d256-9c10-fa4a-83914eb1a3fc.png">

---

データベースに、データを保存する場合

<img width="1010" alt="スクリーンショット 2019-12-31 11.36.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/1fa4ca3c-4d9c-c706-b547-8b3cc8bef5af.png">

<img width="1010" alt="スクリーンショット 2019-12-31 11.36.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/d45b6535-6c99-85f9-3521-78c375c7693f.png">

# Viewを表示させる

### Viewを作る
resources/viewsフォルダ内に**home.blade.php**と**submit.blade.php**を作成する。
拡張子が.htmlではなく.blade.phpであることに注意する！

```html:home.blade.php
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>home画面</title>
</head>

<body>
    <h1>ホーム画面です。</h1>
</body>

</html>
```

```html:submit.blade.php
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>submit画面</title>
</head>

<body>
    <h1>メモ追加画面です。</h1>
</body>

</html>
```

### コントローラーを作る
ディレクトリをmemoAppまで移動し、以下のコマンドを打つ。

```
$ php artisan make:controller MemoController
```

app/Http/Controllersフォルダ内のMemoControllerに、Viewを表示する関数を記述する。

```MemoController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MemoController extends Controller
{
    // home.blade.phpを表示
    public function showHome()
    {
        return view('home');
    }

    // submit.blade.phpを表示
    public function showSubmit()
    {
        return view('submit');
    }
}
```

実は、まだこれだけでは動かない！実は、laravelにはMVC(Model, View, Controller)に加え、web.phpという大事なファイルが存在する。

<img width="1010" alt="スクリーンショット 2019-12-31 11.49.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/194920bc-a6b8-e90f-8c8b-63ec368e9e33.png">

routesフォルダ内のweb.phpに、以下の内容を記述する。

```web.php
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

// 第一引数に相対パス、第二引数に関数を指定する
Route::get('/home', 'MemoController@showHome');

Route::get('/submit', 'MemoController@showSubmit');
```

### 表示の確認
XAMPP(MAMP)のサーバーを立ち上げて、http://localhost/memoApp/public/home とhttp://localhost/memoApp/public/submit にアクセスしてみる。

<img width="593" alt="スクリーンショット 2019-12-31 11.54.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/f3e85a5a-9c0c-f71c-eaca-6dcf21bb0223.png">

# メモアプリのViewを作る

### テンプレートの利用
laravelには、テンプレートというデザインを統一するための仕組みが存在します。詳しくは[こちら](https://readouble.com/laravel/5.5/ja/blade.html)を参考にしてください。

resources/viewsフォルダ内にlayoutsフォルダを作成し、そのフォルダの中に、app.blade.phpを作成する。

```
resources-
         |-views
             |-layouts
             |    |-app.blade.php
             |
             |-home.blade.php
             |-submit.blade.php
```

```html:layouts/app.blade.php
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MemoApp</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"
        integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
        integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous">
    </script>
</head>

@yield('css')

<body>
    <header>
        <span class="title">MemoApp</span>
    </header>
    <div class="container">
        @yield('content')
    </div>
</body>

</html>
```

### テンプレートの読み込み
テンプレートは、`@extends()`で読み込むことができる。また、`@section()`のなかに記述した内容がテンプレートの`@yield()`に埋め込まれることになる。

```html:home.blade.php
@extends('layouts.app')

@section('css')
<style>
    header {
        height: 50px;
        background-color: #000;
        color: white;
        padding-left: 20px;
        font-size: large;
        color: #ddd;
    }

    .title {
        position: absolute;
        top: 10px;
    }

    .card {
        margin-top: 40px;
    }

    .left {
        width: 70%;
    }

    .submit {
        position: absolute;
        top: 10px;
        right: 20px;
    }
</style>
@endsection

@section('content')
<div class="card" style="width: 100%;">
    <div class="card-header">
        メモ一覧
        <a href="{{ route('submit')}}" class="submit">メモを追加</a>
    </div>
    <table class="table">
        <tbody>
            <tr>
                <td class="left">メモ１</td>
                <td><a href="{{ route('submit')}}">編集</a></td>
                <td><a>削除</a></td>
            </tr>
            <tr>
                <td class="left">メモ２</td>
                <td><a href="{{ route('submit')}}">編集</a></td>
                <td><a>削除</a></td>
            </tr>
            <tr>
                <td class="left">メモ３</td>
                <td><a href="{{ route('submit')}}">編集</a></td>
                <td><a>削除</a></td>
            </tr>
        </tbody>
    </table>
</div>
@endsection
```

```html:submit.blade.php
@extends('layouts.app')

@section('css')
<style>
    header {
        height: 50px;
        background-color: #000;
        padding-left: 20px;
        font-size: large;
        color: #ddd;
    }

    .title {
        position: absolute;
        top: 10px;
    }

    .container {
        margin-top: 40px;
    }
</style>
@endsection

@section('content')
<form>
    <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control" id="title" name="title">
    </div>
    <div class="form-group">
        <label for="content">内容</label>
        <input type="text" class="form-control" id="content" name="content">
    </div>
    <a href="{{ route('home')}}" class="btn btn-primary">戻る</a>
    <button type="submit" class="btn btn-success">追加</button>
</form>
@endsection
```

XAMPP(MAMP)のサーバーを立ち上げて、http://localhost/memoApp/public/home とhttp://localhost/memoApp/public/submit にアクセスしてみる。

今回はここまで。次回は、データの取得と保存をしたいと思います。

[Laravelで簡単なメモアプリを作る（2）~データの取得と保存~](https://qiita.com/Alesion30/items/97c3bd16c4e20d4bdb72)