Laravel5 チュートリアル ブログもどきを作る(2) ブログ記事投稿フォームの作成

前回までで、DB・テーブルの設定ができたので、今回は管理画面側のブログ記事を投稿するフォームを作っていきます。まずは、保存処理などは考えずに、単純に View テンプレートを読み込んで表示するだけの処理を実装していきます。



## ルーティングの設定
`routes/web.php` を開いて、下記のようにルーティングを追加します。

```routes/web.php
// http://{ホスト名}/admin/form に GET でアクセスすると、AdminBlogController の form メソッドを実行するという意味
// name メソッドでエイリアスをつけることができる
Route::get('admin/form', 'AdminBlogController@form')->name('admin_form');
```

post でアクセスしたい場合は `Route::post()` を、PUT でアクセスしたい場合は `Route::put()` を指定します。
その他にも様々な使い方があるので、エイリアスも含めて追って紹介していきます。気になる方は、[ドキュメント](https://readouble.com/laravel/5.5/ja/routing.html)を参照してください。



## コントローラーの作成
続いて、コントローラーを作成します。管理画面側の処理になるので、AdminBlogController という名前のコントローラークラスを作ります。コントローラークラスは、下記 artisan コマンドで作成できます。

```
php artisan make:controller AdminBlogController
```

コマンドを実行すると `app/Http/Controllers/AdminBlogController.php` というファイルができていると思いますので、それを開いて下記のように編集します。指定した View テンプレートを表示するだけの処理です。

```app/Http/Controllers/AdminBlogController.php
<?php

namespace App\Http\Controllers;

class AdminBlogController extends Controller
{
    /**
     * ブログ記事入力フォーム
     *
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function form()
    {
        // resources/views 配下にある、どのテンプレートを使うか指定。ディレクトリの階層はピリオドで表現できる
        // この例では resources/views/admin_blog/form.blade.php が読み込まれる
        return view('admin_blog.form');
    }
}
```



## View テンプレートの作成
では、読み込まれるテンプレート `resources/views/admin_blog/form.blade.php` を作成していきます。Laravel では Blade というテンプレートを利用しています。
View テンプレートは artisan コマンドで作成できないので、ディレクトリも含めて自力で作成してください。Blade テンプレートは `.blade.php` という拡張子が付きます。慣れるまではファイル名に注意してください。

今回は、まず下記のように、ごくごく簡素なブログ投稿フォームを用意します。

```html:resources/views/admin_blog/form.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブログ記事投稿フォーム</title>
</head>

<body>
<h2>ブログ記事投稿・編集</h2>

<form method="POST">
    日付<br>
    <input name="post_date" size="20" value="" placeholder="日付を入力して下さい。"><br><br>

    タイトル<br>
    <input name="title" value="" placeholder="タイトルを入力して下さい。"><br><br>

    本文<br>
    <textarea cols="50" rows="15" name="body" placeholder="本文を入力してください。"></textarea><br>

    <input type="submit" value="送信">
    {{--CSRFトークンが生成される--}}
    {{ csrf_field() }}
</form>

</body>
</html>
```

ここでは、フォーム部品の名前が articles テーブルのカラム名と同じであることに注目してください。これが後々効いてきます。
CSRF用のトークンを自動で生成してくれる `{{ csrf_field() }}` を忘れずに書いておきましょう。このトークンは GET メソッド以外で送信する場合は必須で、これが無いと Exception を吐いてしまいます。
ここまでできたら、`http://{ホスト名}/admin/form` にアクセスして、フォームが表示されるかどうか、確認してください。

ただ、このままだと、見た目が少しよろしくないので、bootstrap と CSS を使って、少し見栄えをよくしておきます。

```html:resources/views/admin_blog/form.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブログ記事投稿フォーム</title>
    {{--asset ヘルパー関数を使うと public/ 配下ファイルへのURLを生成してくれる--}}
    {{--bootstrap.min.css は最初からインストールされている--}}
    <link rel="stylesheet" href="{{ asset('/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/blog.css') }}">
</head>

<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2>ブログ記事投稿・編集</h2>

            <form method="POST">
                <div class="form-group">
                    <label>日付</label>
                    <input class="form-control" name="post_date" size="20" value="" placeholder="日付を入力して下さい。">
                </div>

                <div class="form-group">
                    <label>タイトル</label>
                    <input class="form-control" name="title" value="" placeholder="タイトルを入力して下さい。">
                </div>

                <div class="form-group">
                    <label>本文</label>
                    <textarea class="form-control" rows="15" name="body" placeholder="本文を入力してください。"></textarea>
                </div>

                <input type="submit" class="btn btn-primary btn-sm" value="送信">
                {{--CSRFトークンが生成される--}}
                {{ csrf_field() }}
            </form>
        </div>
    </div>
</div>

</body>
</html>
```

```public/css/blog.css
body {
    font-size: 12px;
    color: #696969;
}
h2 {
    font-size: 24px;
    border-bottom: 1px solid #1e90ff;
    padding: 5px 0 5px 0;
    margin-bottom: 25px;
}
.form-group input[name="post_date"] {
    width: 200px;
}
```

これで、下記のような見た目になります。

![form.png](https://qiita-image-store.s3.amazonaws.com/0/252417/c7cdf7f8-7e7c-562e-a965-86a048b4e426.png)


[次回は、ブログ記事の保存処理を実装していきます。](https://qiita.com/yumgoo17/items/71c2feb5dd9d0138d74e)



## 参考資料
### Laravel 日本語ドキュメント
* [ルーティング](https://readouble.com/laravel/5.5/ja/routing.html)
* [コントローラ](https://readouble.com/laravel/5.5/ja/controllers.html)
* [Bladeテンプレート](https://readouble.com/laravel/5.5/ja/blade.html)

### プログラムソース（github）
* [github yumgoo17/like_blog](https://github.com/yumgoo17/like_blog)