Laravel | BBS | Create の実装

ホーム

はじめの一歩

Todo チュートリアル

BBS チュートリアル

Ledger チュートリアル

Cart チュートリアル

サーバーの構築

付録

概要

前回の BBS は操作が分かりずらかったので作り直しました。デザインも変わりました。

WEB アプリケーションには、CRUD という機能をつけると良いとされています。 CRUD とは、Create (作成)、Read (読み込み)、Update (更新)、Delete (削除)の頭文字をとったものです。今回は、Create (作成) 機能をつけていきます。

インデックスページの変更

resources / views / index.blade.php を次のように書きかえてください。

<!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BBS</title>
    <link rel="stylesheet" href="{{ url('style.css')}}">
    </head>
    <body>
    <div class="container">
    {{-- ここから --}}
    <div class="spc">
    <div>
    <h1 class="margin-zero">BBS</h1>
    </div>
    <div>
    <form method="GET" action="{{route('posts.create')}}">
    @csrf
    <button class="margin-zero">Create</button>
    </form>
    </div>
    </div>
    {{-- ここまで変更 --}}
    <ul>
    @forelse ($posts as $post)
    <li class="h-layout">
        <div class="post-sub">
            <p class="v-center">{{Str::limit($post->body, 80)}}</p>
        </div>
        <div>
            <form method="GET" action="{{route('posts.show', $post)}}">
            @csrf
            <button class="btn-absolute">Show</button>
            </form>
        </div>
    </li>
    @empty
    <li class="no-title">No post!</li>
    @endforelse
    </ul>
    </div>
    </body>
    </html>

php artisan serve で Task アプリを起動して、localhost:8000 で確認してください。

CSS ファイルの変更

public / style.css ファイルを次のように変更してください。

body {
    background-color: #efefef;
    color: gray;
    font-family: sans-serif;
}

.container {
    width: 400px;
    margin: 32px auto;
}

h1 {
    font-size: 20px;
    color: gray;
}

ul {
    padding-left: 0;
}

li {
    list-style: none;
    margin-top: 16px;
}

.post-sub {
    width: 100%;
    height: 80px;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.v-center {
    margin: 8px;
}

.no-title {
    font-size: small;
    text-align: center;
    color: gray;
}

.h-layout {
    display: flex;
    position: relative;
}

.btn-absolute {
    position: absolute;
    right: 4px;
    bottom: 4px;
}

button {
    color: gray;
}

.margin-zero {
    margin: 0;
}

.post-all {
    width: 100%;
    min-height: 80px;
    height: 100%;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.margin-eight {
    margin: 8px;
}

.small-title {
    font-size: small;
    font-weight: bold;
}

.comment {
    width: 100%;
    min-height: 56px;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.back-link {
    text-align: right;
    font-size: small;
    color: gray;
}

a {
    color: gray;
}

/* ここから */
.h-layout {
    display: flex;
    position: relative;
}

.btn-absolute {
    position: absolute;
    right: 4px;
    bottom: 4px;
}

.margin-zero {
    margin: 0;
}

.post-all {
    width: 100%;
    min-height: 80px;
    height: 100%;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.margin-eight {
    margin: 8px;
}

.small-title {
    font-size: small;
    font-weight: bold;
}

.comment {
    width: 100%;
    min-height: 56px;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.no-title {
    font-size: small;
    text-align: center;
    color: gray;
}

.back-link {
    text-align: right;
    font-size: small;
    color: gray;
}

a {
    color: gray;
}

button {
    color: gray;
}

.spc {
    display: flex;
    margin: 32px 0;
    box-sizing: border-box;
}

.spc>div:nth-child(1) {
    width: 50%;
    text-align: left;
}

.spc>div:nth-child(2) {
    width: 50%;
    text-align: right;
}
/* ここまで追加 */

php artisan serve で Task アプリを起動して、localhost:8000 で確認してください。

コントローラーの変更

app / Http / Controllers の PostController.php に create メソッドと store メソッドを追加します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->get();

        return view('index')->with(['posts' => $posts]);
    }

    public function show(Post $post)
    {
        return view('posts.show')->with(['post'=>$post]);
    }
    
    // ここから
    public function create()
    {
        return view('posts.create');
    }
    
    public function store(Request $request)
    {
        $request->validate([
            'body'=>'required',
        ]);
        
        $post = new Post();
        $post->body = $request->body;
        $post->save();

        return redirect()->route('posts.index');
    }
    // ここまで追加します
}

Create ページの作成

resources / views / posts の中に create.blade.php を作成し、次のように記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create | BBS</title>
    <link rel="stylesheet" href="{{url('style.css')}}">
</head>
<body>
    <div class="container">
    <div class="spc">
    <div>
    <h1 class="margin-zero">Create</h1>
    </div>
    <div>
    <form method="POST" action="{{ route('posts.store') }}">
    @csrf
    <button class="margin-top">Create</button>
    </div>
    </div>
    <div>
        <textarea name="body">{{ old('body') }}</textarea>
        @error('body')
            <p class="error">{{ $message }}</p>
        @enderror
    </div>
    </form>
    <p class="back-link"><a href="{{route('posts.index')}}">Back to Index</a></p>
    </div>
</body>
</html>

php artisan serve で Task アプリを起動して、localhost:8000 で確認してください。

CSS ファイルの変更

public / style.css ファイルを再び変更します。

body {
    background-color: #efefef;
    color: gray;
    font-family: sans-serif;
}

.container {
    width: 400px;
    margin: 32px auto;
}

h1 {
    font-size: 20px;
    color: gray;
}

ul {
    padding-left: 0;
}

li {
    list-style: none;
    margin-top: 16px;
}

.post-sub {
    width: 100%;
    height: 80px;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.v-center {
    margin: 8px;
}

.no-title {
    font-size: small;
    text-align: center;
    color: gray;
}

.h-layout {
    display: flex;
    position: relative;
}

.btn-absolute {
    position: absolute;
    right: 4px;
    bottom: 4px;
}

.margin-zero {
    margin: 0;
}

.post-all {
    width: 100%;
    min-height: 80px;
    height: 100%;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.margin-eight {
    margin: 8px;
}

.small-title {
    font-size: small;
    font-weight: bold;
}

.comment {
    width: 100%;
    min-height: 56px;
    background-color: white;
    border-radius: 4px;
    border: solid 1px lightgray;
}

.no-title {
    font-size: small;
    text-align: center;
    color: gray;
}

.back-link {
    text-align: right;
    font-size: small;
    color: gray;
}

a {
    color: gray;
}

button {
    color: gray;
}

.spc {
    display: flex;
    margin: 32px 0;
    box-sizing: border-box;
}

.spc>div:nth-child(1) {
    width: 50%;
    text-align: left;
}

.spc>div:nth-child(2) {
    width: 50%;
    text-align: right;
}

/* ここから */
input[type="text"],
textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    color: gray;
}

.error {
    color: red;
    font-size: small;
}

.a-right {
    text-align: right
}

.margin-top {
    margin-top: 11px;
}
/* ここまで追加します */

php artisan serve で Task アプリを起動して、localhost:8000 で確認してください。

Show ページの変更

resources / views /posts の show.blade.php を次のように変更します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show | BBS</title>
    <link rel="stylesheet" href="{{url('style.css')}}">
</head>
<body>
<div class="container">
<div>
<h1 class="margin-zero">Show</h1>
</div>
    <ul>
    <li>
        <div class="post-all">
            <p class="margin-eight">{{$post->body}}</p>
        </div>
    </li>
    </ul>

    <p class="small-title">comment</p>

    <ul>
    @forelse ($post->comments as $comment)
    <li>
    <div class="comment">{{ $comment->body }}</div>
    </li>
    @empty
    <li class="no-title">No comment.</li>
    @endforelse
    </ul>
    {{-- ここから --}}
    <form method="POST" action="{{ route('posts.comments.store', $post) }}">
    @csrf
    <div>
    <input type="text" name="body">
    @error('body')
        <p class="error">{{ $message }}</p>
    @enderror
    </div>
    <div class="a-right">
        <button class="margin-top">Create comment</button>
    </div>
    </form>
    {{-- ここまで追加 --}}
    <p class="back-link"><a href="{{route('posts.index')}}">Back to Index</a></p>
    </div>
</body>
</html>

Comment コントローラーの変更

app / Http / Controllers の CommentController.php を次のように変更します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;    // 追加
use App\Models\Comment; // 追加

class CommentController extends Controller
{
    // ここから
    public function store(Request $request, Post $post)
    {
        $request->validate([
            'body'=>'required',
        ]);

        $comment = new Comment();
        $comment->body = $request->body;
        $comment->post_id = $post->id;
        $comment->save();

        return redirect()->route('posts.show', $post);
    }
    // ここまで追加
}

php artisan serve で Task アプリを起動して、localhost:8000 で確認してください。

1398 visits

Posted: Jul. 29, 2025

Update: Jul. 29, 2025

ホーム目次