【Laravel】基本のCRUD（掲示板アプリをつくる）

2024.04.12

UnsplashのArno Smitが撮影した写真

はじめに

この記事は、初めてLaravelを触る方向けの記事です。

新規プロジェクト作成～掲示板アプリ完成までを通して、基本のCRUDのまとめています。

環境

・OS：Windows11 Pro / WSL2(Ubuntu22.04)
・php：8.3.2
・laravel：v11.2.0
・MySQL：8.0.36

手順１：プロジェクト作成

今回はプロジェクト名を「myapp」として作成します。

コマンドラインで以下コマンドを実行してください。

composer create-project --prefer-dist laravel/laravel myapp

■動作確認

プロジェクトを作成できたら、動作確認をします。

cdコマンドで作成したmyappに移動して以下コマンドにてサーバーを起動してください。

php artisan serve

ブラウザで「localhost:8000」にアクセスするとLaravelデフォルトのページが表示されるかと思います。

手順２：.envファイルの編集

/.envを以下の様に編集します。

～省略～
APP_DEBUG=true
APP_TIMEZONE=Asia/Tokyo     #変更
APP_URL=http://localhost

APP_LOCALE=ja               #変更
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=ja_JP      #変更
～省略～

■備考：.envファイルとは

.envファイルは、DB接続情報などサーバーや各開発者のローカル環境に依存する値がまとめられています。

環境ごとの値が.envにまとめられていることで、git clone後にアプリを動かすまでの作業がとても楽になります。

手順３：DBセットアップ

今回はDBにMySQLを使用します。

１）DBの作成

DBはコマンドラインで直接作成します。

ご自身の環境にてMySQLにログインし、DB名「myapp_db」を作成してください。
※テーブルは後程、Laravelの機能を使って作成します。

【ログインコマンド】

mysql -u root -p

※コマンド実行後、パスワード入力してログインします。

【DB作成コマンド】

CREATE DATABASE myapp_db DEFAULT CHARACTER SET utf8mb4;

２）DBの接続設定

/.envを以下の様に編集します。

～～省略～～

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=myapp_db          #先程作成したDB名
DB_USERNAME=MySQLのユーザ名   #ご自身の環境に合わせて記入
DB_PASSWORD=MySQLのパスワード #ご自身の環境に合わせて記入

～～省略～～

モデル作成＆マイグレーション（テーブル作成）

今回作成するのは掲示板アプリなので、投稿を管理するモデル、テーブルを作成します。

１）Postモデルの作成

投稿を管理するPostモデルを作成します。

コマンドラインにて、プロジェクトのルートで以下コマンドを実行してください。

php artisan make:model Post -m

※php artisan make:model モデル名 -m

※「-m」はマイグレーションファイルも一緒に作成するオプション

２）マイグレーションファイルを編集する

マイグレーションファイルとはLaravelの機能を使ってテーブルを作成する際、テーブルの設計図となるファイルです。

Postテーブルは投稿を記録するテーブルなので、投稿のタイトルとコンテンツを格納するカラムを追加します。

/database/migrationsに今日の日付で「yyyy_mm_dd_~省略~_create_posts_table_.php」が作成されているので、以下のように編集します。

～～省略～～

public function up(): void
    {                 // ↓テーブル名
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('name');                       //追記
            $table->text('content')->default(`入力無し`); //追記
            $table->timestamps();          //↑バッククオート

            //$table->カラムのデータ型(カラム名)->default(デフォルト値);
        });
    }

～～省略～～

以下、マイグレーションに関して参考にしたページのリンクです。

https://qiita.com/Takahiro_Nago/items/71d30873313862ab6818

３）マイグレーション（Postテーブル作成）

プロジェクトのルートで以下コマンドを実行してください。

php artisan migrate

４）モデルの編集

/app/Models/Post.phpを以下の通り編集します。

<?php

namespace App\Models;

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

class Post extends Model
{
    use HasFactory;

    protected $fillable = [
        "name", "content"
    ];
}

ルーティング

/routes/web.phpを以下のように編集してください。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;  //この１行を忘れない！！

Route::get('/posts',              [PostController::class, 'index']  )->name('posts.index');
Route::get('/posts/create',       [PostController::class, 'create'] )->name('posts.create');
Route::post('/posts',             [PostController::class, 'store']  )->name('posts.store');
Route::get('/posts/{post}',       [PostController::class, 'show']   )->name('posts.show');
Route::get('/posts/{post}/edit',  [PostController::class, 'edit']   )->name('posts.edit');
Route::put('/posts/{post}',       [PostController::class, 'update'] )->name('posts.update');
Route::delete('/posts/{post}',    [PostController::class, 'destroy'])->name('posts.destroy');

コントローラーの作成＆編集

１）PostControllerの作成

プロジェクトのルートで以下コマンドを実行します。

php artisan make:controller PostController

※php artisan make:controller コントローラ名

上記コマンドにて/app/Http/Controllers/PostController.phpが作成されます。

２）PostControllerの編集

/app/Http/Controllers/PostController.phpを以下の様に編集します。

<?php

namespace App\Http\Controllers;

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

class PostController extends Controller
{
    // 投稿一覧画面を表示させる
    public function index()
    {
        $posts = Post::all();
        return view('posts.index', compact('posts'));
    }

    // 投稿の新規作成画面を表示させる
    public function create()
    {
        return view('posts.create');
    }

    // 投稿を新規作成する
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'content' => 'required',
        ]);

        Post::create($request->all());
        return redirect()->route('posts.index');
    }

    // 投稿の詳細画面を表示させる
    public function show(Post $post)
    {
        return view('posts.show', compact('post'));
    }

    // 投稿の編集画面を表示させる
    public function edit(Post $post)
    {
        return view('posts.edit', compact('post'));
    }

    // 投稿の編集内容を保存する
    public function update(Request $request, Post $post)
    {
        $request->validate([
            'name' => 'required',
            'content' => 'required',
        ]);

        $post->update($request->all());
        return redirect()->route('posts.index');
    }

    // 投稿を削除する
    public function destroy(Post $post)
    {
        $post->delete();
        return redirect()->route('posts.index');
    }
}

ビューの作成

ビューは以下４つ作成します。
・投稿の一覧画面
・投稿の詳細画面
・投稿の新規作成画面
・投稿の編集画面

以下の通りファイルを作成し、コードを記述してください。

投稿の一覧画面

ファイルパス：/resources/views/posts/index.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>掲示板</title>
    </head>
    <body>
        <h1>投稿一覧</h1>
        <p><a href="{{ route('posts.create') }}">新規投稿</a></p>
        <table>
            <thead>
                <th>id</th>
                <th>name</th>
                <th>content</th>
                <th></th>
            </thead>
            <tbody>
                @foreach($posts as $post)
                <tr>
                    <td>{{$post->id}}</td>
                    <td>{{$post->name}}</td>
                    <td>{{$post->content}}</td>
                    <td><a href="{{ route('posts.show', $post) }}">詳細</a></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </body>
</html>

投稿の詳細画面

ファイルパス：/resources/views/posts/show.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ $post->name }}</title>
    </head>
    <body>
        <h1>投稿詳細</h1>
        <table>
            <tr>
                <th>id</th>
                <td>{{$post->id}}</td>
            </tr>
            <tr>
                <th>name</th>
                <td>{{$post->name}}</td>
            </tr>
            <tr>
                <th>content</th>
                <td>{{$post->content}}</td>
            </tr>
        </table>
        <div style="display:flex">
            <button onclick="location.href='{{ route('posts.edit', $post) }}'">編集</button>
            <form action="{{ route('posts.destroy', $post) }}" method="post">
                @csrf
                @method('DELETE')
                <button type="submit">削除</button>
            </form>
        </div>
    </body>
</html>

投稿の新規作成画面

ファイルパス：/resources/views/posts/create.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>掲示板</title>
    </head>
    <body>
        <h1>新規投稿</h1>
        <form action="{{ route('posts.store') }}" method="post">
            @csrf
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name"><br>

            <label for="content">Content:</label><br>
            <textarea id="content" name="content"></textarea><br>
            
            <button type="submit">作成</button>
        </form>
    </body>
</html>

投稿の編集画面

ファイルパス：/resources/views/posts/edit.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>掲示板</title>
    </head>
    <body>
        <h1>編集</h1>
        <form action="{{ route('posts.update', $post) }}" method="post">
            @csrf
            @method('PUT')
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name" value="{{ $post->name }}"><br>

            <label for="content">Content:</label><br>
            <textarea id="content" name="content">{{ $post->content }}</textarea><br>

            <button type="submit">更新</button>
        </form>
    </body>
</html>