Laravel5.4でシンプルなCMSを作るチュートリアル

Laravel8版はこちら

インストール

コンポーザーでLaravelをインストールしましょう。
バージョン指定しないと現在（2017年6月）の最新バージョンである5.4がインストールされます。

1
$ composer create-project --prefer-dist laravel/laravel SimpleCMS

インストールにしばらく時間が掛かりますが、終わったらカレントを移動します。

1
$ cd SimpleCMS

ビルドインサーバーを起動してとりあえず動くか確認してみましょう。

1
$ php artisan serve

ブラウザでhttp://localhost:8000/にアクセスしてLaravelって表示されれば成功。

初期設定

configのapp.phpは言語の設定だけ変更。

1
return [
2
  // ...
3
  'timezone' => 'Asia/Tokyo',
4
  'locale' => 'ja',

データベースは今回はSQLiteを使うので.envを編集。
DB_CONNECTION=sqliteを追記して既存のMySQLの設定部分は削除します。

1
DB_CONNECTION=sqlite
2

3
#DB_CONNECTION=mysql
4
#DB_HOST=127.0.0.1
5
#DB_PORT=3306
6
#DB_DATABASE=homestead
7
#DB_USERNAME=homestead
8
#DB_PASSWORD=secret

touchコマンドでsqliteファイルを作成。

1
$ touch database/database.sqlite

設定を変更したら、ビルドインサーバーを再起動しましょう。

ユーザー認証関係

ユーザー登録とか認証とかは一発でできます。

1
$ php artisan make:auth

migrateでデータベースにテーブルを作成。

1
$ php artisan migrate

ブラウザでhttp://localhost:8000/registerにアクセスしてユーザー登録してみましょう。
ユーザー登録できたらログアウト・ログインを試してみて動いてるか確認してみます。できてますよね。

Postモデルの作成

make:modelでモデルファイルを作成。-mオプションでマイグレーションファイルも一緒に作成します。

1
$ php artisan make:model Post -m

作成したマイグレーションファイルにtitle,bodyを追記します。
XXXXには作成日のタイムスタンプが自動的に入ります。

1
public function up()
2
{
3
  Schema::create('posts', function (Blueprint $table) {
4
    $table->increments('id');
5
    $table->string('title');
6
    $table->text('body');
7
    $table->timestamps();
8
  });
9
}

migrateでpostsテーブルを作成します。

1
$ php artisan migrate

Postモデルにguardedを設定します。

1
class Post extends Model
2
{
3
    protected $guarded = ['id', 'created_at'];
4
}

ダミーデータの作成

シーダーを使ってダミーデータを作成します。

1
$ php artisan make:seeder PostsTableSeeder

1
public function run()
2
{
3
  DB::table('posts')->insert([
4
    [
5
      'title' => '最初の記事',
6
      'body' => '最初の記事のテキストです。',
7
      'created_at' => '2017-05-02 14:28:19',
8
      'updated_at' => '2017-05-02 14:28:19'
9
    ],[
10
      'title' => '2番目の記事',
11
      'body' => '2番目の記事のテキストです。',
12
      'created_at' => '2017-05-03 14:28:19',
13
      'updated_at' => '2017-05-03 14:28:19'
14
    ]
15
    // ...
16
  ]);
17
}

今回は配列でそのまま入れてますが、大量のデータが必要な場合はFakerという機能があるのでそちらを使用してたほうがいいかもしれません。

あとはDatabaseSeeder.phpに登録して、

1
public function run()
2
{
3
  $this->call(PostsTableSeeder::class);
4
}

db:seedコマンドでデータベースに投入します。

1
$ php artisan db:seed --class=PostsTableSeeder

管理画面用Postsコントローラーの作成

管理画面用のコントローラーを作成します。
make:controllerコマンドでコントローラーの雛形を作成。

1
$ php artisan make:controller Admin/PostsController --resource

各アクションを実装していきます。

1
namespace App\Http\Controllers\Admin;
2

3
use Illuminate\Http\Request;
4
use App\Http\Controllers\Controller;
5
use App\Post;
6

7
class PostsController extends Controller
8
{
9
    // バリデーションのルール
10
    public $validateRules = [
11
        'title' => 'required',
12
        'body' => 'max:500'
13
    ];
14
    public function index()
15
    {
16
        $posts = Post::orderBy('id', 'desc')->paginate(20);
17
        return view('admin.posts.index', compact('posts'));
18
    }
19
    public function create()
20
    {
21
        return view('admin.posts.create');
22
    }
23
    public function store(Request $request)
24
    {
25
        $this->validate($request, $this->validateRules);
26
        Post::create($request->all());
27
        \Session::flash('flash_message', '記事を作成しました。');
28
        return redirect('admin/posts');
29
    }
30
    public function show($id)
31
    {
32
        $post = Post::findOrFail($id);
33
        return view('admin.posts.show', compact('post'));
34
    }
35
    public function edit($id)
36
    {
37
        $post = Post::findOrFail($id);
38
        return view('admin.posts.edit', compact('post'));
39
    }
40
    public function update(Request $request, $id)
41
    {
42
        $this->validate($request, $this->validateRules);
43

44
        $post = Post::findOrFail($id);
45
        $post->update($request->all());
46

47
        \Session::flash('flash_message', '記事を更新しました。');
48
        return redirect('admin/posts');
49
    }
50
    public function destroy($id)
51
    {
52
        $post = Post::findOrFail($id);
53
        $post->delete($id);
54
        \Session::flash('flash_message', '記事を削除しました。');
55
        return redirect('admin/posts');
56
    }
57
}

ビューを作る前に

Laravel5.4にはフォームヘルパー的な機能はデフォルトで入っていないのでlaravelcollectiveをインストールします。

1
$ composer require laravelcollective/html

設定ファイルのprovidersとaliasesに追記します。

1
return [
2
    'providers' => [
3
        // ...
4
        Collective\Html\HtmlServiceProvider::class,
5
    ],
6
    'aliases' => [
7
        // ...
8
        'Form' => Collective\Html\FormFacade::class,
9
        'Html' => Collective\Html\HtmlFacade::class,
10
    ],
11
];

コントローラーでバリデーションの設定もしたので日本語で表示できるようにしてみましょう。
5.3用ですが下記ファイルをダウンロードして、resources/lang/ja/に入れます。

oppara/validation.php

attributesの日本語も設定しましょう。
今回はtitleとbodyだけですね。

1
'attributes' => [
2
  'title' => 'タイトル',
3
  'body' => '内容'
4
],

管理画面用Postsビューの作成

次は管理画面表示部分のビューを作成しましょう。
最初にレイアウトファイルを作成します。
今回は単純にresources/views/layouts/app.blade.phpをリネームしてadmin.blade.phpとした。

index.blade.php

一覧ページです。

1
@extends('layouts.admin')
2
@section('content')
3

4
<div class="container">
5
    <div class="row">
6
        <div class="col-md-12">
7
            <div class="panel panel-default">
8
                <div class="panel-heading">記事一覧</div>
9
                <div class="panel-body">
10
                    @if (Session::has('flash_message'))
11
                        <div class="alert alert-success">{{ Session::get('flash_message') }}</div>
12
                    @endif
13

14
                    <div class="mb10">
15
                        {!! link_to('admin/posts/create', '新規作成', ['class' => 'btn btn-primary']) !!}
16
                    </div>
17

18
                    <table class="table table-striped table-bordered table-hover">
19
                        <thead>
20
                        <tr>
21
                            <th>ID</th>
22
                            <th>タイトル</th>
23
                            <th>作成日</th>
24
                            <th>編集</th>
25
                        </tr>
26
                        </thead>
27
                        @foreach($posts as $post)
28
                            <tr>
29
                                <td>{{ $post->id }}</td>
30
                                <td>{{ $post->title }}</td>
31
                                <td>{{ $post->created_at->format('Y年m月d日') }}</td>
32
                                <td>
33
                                    {!! link_to_action('Admin\PostsController@show', '表示', [$post->id]) !!}
34
                                    {!! link_to_action('Admin\PostsController@edit', '編集', [$post->id]) !!}
35
                                    {!! Form::model($post,
36
                                    ['url' => [
37
                                        'admin/posts', $post->id],
38
                                        'method' => 'delete',
39
                                        'class' => 'delete-from'
40
                                    ]) !!}
41
                                        {!! Form::submit('削除', [
42
                                            'onclick' => "return confirm('本当に削除しますか?')",
43
                                            'class' => 'text-link'
44
                                            ]) !!}
45
                                    {!! Form::close() !!}
46
                                </td>
47
                            </tr>
48
                        @endforeach
49
                    </table>
50
                    {!! $posts->render() !!}
51
                </div>
52
            </div>
53
        </div>
54
    </div>
55
</div>
56
@endsection

show.blade.php

詳細ページです。

1
@extends('layouts.admin')
2
@section('content')
3

4
<div class="container">
5
    <div class="row">
6
        <div class="col-md-12">
7
            <div class="panel panel-default">
8
                <div class="panel-heading">記事詳細</div>
9
                <div class="panel-body">
10
                    <div>
11
                        <h1>{{ $post->title }}</h1>
12
                        <p>{{ $post->body }}</p>
13
                    </div>
14
                </div>
15
            </div>
16
        </div>
17
    </div>
18
</div>
19
@endsection

fields.blade.php

入力フォームは新規と編集ページ共通なので独立させます。

1
<div class="form-group">
2
    {!! Form::label('title', 'タイトル:', ['class' => 'col-sm-2 control-label']) !!}
3
    <div class="col-sm-10">
4
        {!! Form::text('title', null, ['class' => 'form-control']) !!}
5
    </div>
6
</div>
7

8
<div class="form-group">
9
    {!! Form::label('body', '内容:', ['class' => 'col-sm-2 control-label']) !!}
10
    <div class="col-sm-10">
11
        {!! Form::textarea('body', null, ['class' => 'form-control']) !!}
12
    </div>
13
</div>
14

15
<div class="form-group">
16
    <div class="col-sm-10 col-sm-offset-2">
17
        {!! Form::submit('保存', ['class' => 'btn btn-primary']) !!}
18
        {!! link_to('admin/posts', '一覧へ戻る', ['class' => 'btn btn-default']) !!}
19
    </div>
20
</div>

create.blade.php

作成画面です。先ほどのフォームをインクルードします。

1
@extends('layouts.admin')
2
@section('content')
3

4
<div class="container">
5
    <div class="row">
6
        <div class="col-md-12">
7
            <div class="panel panel-default">
8
                <div class="panel-heading">新規作成</div>
9
                <div class="panel-body">
10

11
                    @if ($errors->any())
12
                        <div class="alert alert-danger">
13
                            <ul>
14
                                @foreach ($errors->all() as $error)
15
                                    <li>{{ $error }}</li>
16
                                @endforeach
17
                            </ul>
18
                        </div>
19
                    @endif
20

21
                    {!! Form::open(['url' => 'admin/posts',
22
                                'class' => 'form-horizontal',
23
                                'id' => 'post-input']) !!}
24

25
                    @include('admin.posts.fields')
26

27
                    {!! Form::close() !!}
28
                </div>
29
            </div>
30
        </div>
31
    </div>
32
</div>
33
@endsection

edit.blade.php

編集画面は作成画面とほとんど同じですね。

1
@extends('layouts.admin')
2
@section('content')
3

4
<div class="container">
5
    <div class="row">
6
        <div class="col-md-12">
7
            <div class="panel panel-default">
8
                <div class="panel-heading">編集</div>
9
                <div class="panel-body">
10

11
                    @if ($errors->any())
12
                        <div class="alert alert-danger">
13
                            <ul>
14
                                @foreach ($errors->all() as $error)
15
                                    <li>{{ $error }}</li>
16
                                @endforeach
17
                            </ul>
18
                        </div>
19
                    @endif
20

21
                    {!! Form::model($post,
22
                    ['url' => [
23
                        'admin/posts', $post->id],
24
                        'method' => 'PATCH',
25
                        'class' => 'form-horizontal',
26
                        'id' => 'post-input'
27

28
                    ]) !!}
29
                    @include('admin.posts.fields')
30

31
                    {!! Form::close() !!}
32
                </div>
33
            </div>
34
        </div>
35
    </div>
36
</div>
37
@endsection

ルーターの作成

ルーターの設定をしてアクセスできるようにします。
管理画面なのでadminプレフィクスを付けました。
middlewareにauthを指定してすべて認証が必要なようにします。

1
Route::group(['prefix' => 'admin', 'middleware' => 'auth'], function()
2
{
3
  Route::resource('posts', 'Admin\PostsController');
4
});

/admin/postsにアクセスして動作を確認してみてください。
作成・編集など一通りの動作ができるようになったので管理画面の方は完了です。

フロントの作成

フロントに表示されるページを作成します。
編集機能はいらないので、一覧・詳細ページを作成します。
app/Http/Controllers/Admin/PostsController.phpをコピーしてapp/Http/Controllers/PostsController.phpに配置します。

1
namespace App\Http\Controllers;
2

3
use Illuminate\Http\Request;
4
use App\Http\Controllers\Controller;
5
use App\Post;
6

7
class PostsController extends Controller
8
{
9
    public function index()
10
    {
11
        $posts = Post::orderBy('id', 'desc')->paginate(20);
12
        return view('posts.index', compact('posts'));
13
    }
14
    public function show($id)
15
    {
16
        $post = Post::findOrFail($id);
17
        return view('posts.show', compact('post'));
18
    }
19
}

基本index、show以外を削除してパスを変更しただけです。
ルーターも追記しましょう。

1
Route::resource('posts', 'PostsController', ['only' => [
2
    'index', 'show'
3
]]);

ビューもコントローラーと同じように/resources/views/posts/index.blade.phpと/resources/views/posts/show.blade.phpにコピーして作成します。
ほぼ同じなので割愛いたします。

とりあえず以上です。
ここまでのものはGitHubに置いてあります。

参考サイト：
Laravel 5.4 TOC
ララ帳