はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して6ヶ月目に入りました。PHP,Laravelを学習しポートフォリオを作成中です。ポートフォリオ作成手順及び、エラー内容を中心に記録していこうと思います。今回は投稿画面の作成を行いました。本投稿は流れのメモが重点になっておりますので、削除した部分や追加した部分の詳細は割愛致します。
ざっくりと投稿画面を作成
ワイヤーフレーム内容とは違いますが、まずは投稿画面が機能する状態まで作成してみました。
- localhost/posts/create
投稿結果が反映されるような画面を作成
- locallhost/posts
エラーが発生
-
添付のエラーが発生
-
エラーの原因
投稿テーブルにcreated_atカラムが存在していなかった。
このカラムはLaravelのlatest()メソッドがデフォルトで使用するため、created_atが無いとエラーになる。
対策内容
latest()の代わりに別の並び替え方法を使用
latest()メソッドはcreated_atをデフォルトで使用するが、別のカラムで並び替えを実施
- コントローラーの修正 PostController.phpのindexメソッドを以下のように修正し解決
public function index()
{
$posts = Post::orderBy('id', 'desc')->get(); // id カラムで並び替え
return view('posts.index', compact('posts'));
}
エラー2
実際に投稿機能を使用した時、添付のエラーが発生
- エラーの原因
Posts テーブルに updated_at や created_at カラムが存在しない発生。
Post::create() メソッドは、デフォルトでタイムスタンプ (updated_at と created_at) を保存しようとするが、それらのカラムがテーブルにないため、このエラーが発生。
対策内容
タイムスタンプは今回は不要な為、モデルでタイムスタンプを無効化し解決
app/Models/Post.phpに以下を追加
public $timestamps = false; // タイムスタンプを無効化
変更した部分
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class PostController extends Controller
{
// 投稿一覧を表示
public function index()
{
$posts = Post::orderBy('id', 'desc')->get(); // id カラムで並び替え
return view('posts.index', compact('posts'));
}
// 投稿フォームを表示
public function create()
{
return view('posts.create');
}
// 投稿を保存
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:255',
'content' => 'required|string',
'preferred_gender' => 'nullable|string',
'preferred_group_size' => 'nullable|string',
]);
Post::create([
'title' => $request->title,
'content' => $request->content,
'preferred_gender' => $request->preferred_gender,
'preferred_group_size' => $request->preferred_group_size,
'user_id' => Auth::id(),
]);
return redirect()->route('posts.index')->with('success', '投稿が完了しました！');
}
}
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;
// タイムスタンプを無効化
public $timestamps = false;
protected $fillable = [
'title',
'content',
'preferred_gender',
'preferred_group_size',
'user_id',
];
public function user()
{
return $this->belongsTo(User::class);
}
}
database/migrations/2024_11_19_072137_create_posts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('posts', function (Blueprint $table) {
$table->id(); // 自動的にインクリメントされるID
$table->string('title'); // 投稿タイトル
$table->text('content'); // 投稿内容
$table->string('preferred_gender')->nullable(); // 希望性別（nullを許容）
$table->string('preferred_group_size')->nullable(); // 希望人数（nullを許容）
$table->foreignId('user_id')->constrained()->onDelete('cascade'); // 投稿者のユーザーID（外部キー制約付き）
// $table->timestamps(); // created_at と updated_at のタイムスタンプ
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('posts'); // posts テーブルを削除
}
};
resources/views/posts/create.blade.php
<x-app-layout>
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-2xl font-bold mb-4">新規投稿</h2>
<form method="POST" action="{{ route('posts.store') }}">
@csrf
<div class="mb-4">
<label for="title" class="block text-sm font-medium text-gray-700">タイトル</label>
<input type="text" id="title" name="title" required class="block w-full border-gray-300 rounded-md shadow-sm">
</div>
<div class="mb-4">
<label for="content" class="block text-sm font-medium text-gray-700">内容</label>
<textarea id="content" name="content" rows="4" required class="block w-full border-gray-300 rounded-md shadow-sm"></textarea>
</div>
<div class="mb-4">
<label for="location" class="block text-sm font-medium text-gray-700">活動場所</label>
<input type="text" id="location" name="location" required class="block w-full border-gray-300 rounded-md shadow-sm">
</div>
<div class="mb-4">
<label for="preferred_gender" class="block text-sm font-medium text-gray-700">希望性別</label>
<select id="preferred_gender" name="preferred_gender" class="block w-full border-gray-300 rounded-md shadow-sm">
<option value="">指定なし</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div class="mb-4">
<label for="preferred_group_size" class="block text-sm font-medium text-gray-700">希望人数</label>
<select id="preferred_group_size" name="preferred_group_size" class="block w-full border-gray-300 rounded-md shadow-sm">
<option value="">指定なし</option>
<option value="one">一人</option>
<option value="two">二人</option>
<option value="three">三人</option>
</select>
</div>
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md">投稿する</button>
</form>
</div>
</x-app-layout>
resources/views/posts/index.blade.php
<x-app-layout>
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-2xl font-bold mb-4">投稿一覧</h2>
@foreach ($posts as $post)
<div class="border-b py-4">
<h3 class="text-lg font-semibold">{{ $post->title }}</h3>
<p class="text-gray-600">{{ $post->content }}</p>
<p class="text-gray-500">活動場所: {{ $post->location }}</p>
</div>
@endforeach
</div>
</x-app-layout>
routes/web.php
use App\Http\Controllers\ProfileController;
use App\Http\Controllers\AuthController; // AuthController をインポート
use App\Http\Controllers\PostController; // PostController をインポート
use Illuminate\Support\Facades\Route;
// ホーム画面ルート
@@ -25,4 +26,12 @@
Route::post('/login', [AuthController::class, 'showLoginForm'])->name('login');
Route::post('/login', [AuthController::class, 'login']);
// 投稿関連のルート
Route::middleware(['auth'])->group(function () {
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');
});
require __DIR__.'/auth.php';
次回実施内容
- 投稿画面の作成②
最後までご覧いただき本当にありがとうございました！！