Laravelで簡単なCMSを作成(一覧と記事登録ページ)

CakePHPにはチュートリアルとして公式にコンテンツ管理チュートリアルが用意されていますが、Laravelにはそもそもチュートリアルが用意されていない？のでCakePHPのチュートリアルをLaravelで自分なりにアレンジしてみたいと思います。

MVCを作成

Model, View, Controllerを作成していきます。

Controllerを作成

artisanコマンドでControllerのひな形を作成します。

php artisan make:controller ArticlesController

作成したファイルに肉付けします。

app/Http/Controllers/ArticlesController.php

<?php

namespace App\Http\Controllers;

use App\Models\Article;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Gate;

class ArticlesController extends Controller
{
    public function index()
    {
        $articles = Article::all();
        return view('articles.index', ['articles' => $articles]);
    }

    public function add()
    {
        return view('articles.add');
    }

    public function create(Request $request)
    {
        $article = Article::create([
            'title' => $request->title,
            'body' => $request->body,
            'user_id' => Auth::id(),
            'slug' => $request->title,
        ]);

        return redirect('/articles');
    }
}

Modelを作成

Controllerと同様にartisanコマンドでひな形を作成して肉付けします。

php artisan make:model Article

app/Models/Article.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'body',
        'slug',
        'user_id',
    ];
}

Viewを作成

resources/views/articlesディレクトを作成して、一覧・登録ページを用意します。Laravel Breezeはビュー層にTailwind CSSを使用しているのでhtmlのclassにはこれを利用してます。

resources/views/articles/add.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Articles') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">

                    <form action="add" method="post">
                        @csrf
                        <div class="grid grid-cols-1 gap-6">
                            <label class="block">
                                <span class="text-gray-700">Title</span>
                                <input type="text" name="title" class="mt-1 block w-full">
                            </label>
                            <label class="block">
                                <span class="text-gray-700">Body</span>
                                <textarea class="mt-1 block w-full" rows="3" name="body"></textarea>
                            </label>
                            <input type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" value="send">
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</x-app-layout>

一覧ページを用意します。

resources/views/articles/index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Articles') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">

                <table class="table-auto">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Author</th>
                            <th>Updated</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($articles as $article)
                            <tr>
                                <td>{{$article->title}}</td>
                                <td>{{$article->user_id}}</td>
                                <td>{{$article->updated_at}}</td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>

                </div>
            </div>
        </div>
    </div>
</x-app-layout>

ルートを登録

一覧・作成ページを表示させるために、web.phpにルーティングを定義します。

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| 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('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth'])->name('dashboard');

Route::get('/articles', 'App\Http\Controllers\ArticlesController@index');
Route::get('/article/add', 'App\Http\Controllers\ArticlesController@add');
Route::post('/article/add', 'App\Http\Controllers\ArticlesController@create');

require __DIR__.'/auth.php';

作成したリソースは以下になります。

メソッド	URI	アクション
GET	/articles	一覧
GET	/article/add	記事登録ページ表示
POST	/article/add	記事登録

記事の更新機能を付ける場合は、下記の記事を参考に。