ポートフォリオ作成時メモ part7 ~投稿画面の作成②~

はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して6ヶ月目に入りました。PHP,Laravelを学習しポートフォリオを作成中です。ポートフォリオ作成手順及び、エラー内容を中心に記録していこうと思います。今回は投稿画面の作成の続きを行いました。本投稿は流れのメモが重点になっておりますので、削除した部分や追加した部分の詳細は割愛致します。

活動場所の2ページ目を作成

活動場所を選択するをクリックして、別ページへ遷移できるように変更

活動場所の2ページ目の画面

エラーが発生

• 添付のエラーが発生
  

• エラーの原因
  web.php で指定されたルートと PostController 内のメソッド名が一致していない為であった。
  web.php で以下のルートが定義

Route::get('/posts/location', [PostController::class, 'locationCreate'])->name('posts.location.create');

しかし、PostController には対応するメソッド名が createLocation となっていた。

ルートで指定したメソッド名とコントローラー内のメソッド名が一致させる必要がある。

対策内容

PostController内のメソッド名をlocationCreateに修正

// 修正後
public function locationCreate()
{
    return view('posts.create_location');
}

アクセスできるURL名

• http://localhost/posts/location

変更した部分

app/Http/Controllers/PostController.php

     // 投稿画面の活動場所選択画面
        public function locationCreate()
    {
        return view('posts.create_location');
    }

resources/views/posts/create.blade.php

<x-app-layout>
    <div class="max-w-3xl mx-auto p-6 bg-white shadow-md rounded-lg">
        <h2 class="text-3xl font-bold mb-6 text-center">新規投稿</h2>
        <form method="POST" action="{{ route('posts.store') }}">
            @csrf

            <!-- タイトル -->
            <div class="mb-6">
                <label for="title" class="block text-lg font-medium text-gray-700">タイトル</label>
                <input type="text" id="title" name="title" required
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200">
            </div>

            <!-- 内容 -->
            <div class="mb-6">
                <label for="content" class="block text-lg font-medium text-gray-700">内容</label>
                <textarea id="content" name="content" rows="4" required
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200"></textarea>
            </div>

            <!-- 活動場所 -->
            <div class="mb-6">
                <label for="location" class="block text-lg font-medium text-gray-700">活動場所</label>
                <select id="location" name="location" required
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200" readonly>
                    <option value="">都道府県を選択</option>
                    @foreach (['北海道', '青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県', '新潟県', '富山県', '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県', '三重県', '滋賀県', '京都府', '大阪府', '兵庫県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県', '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'] as $prefecture)
                        <option value="{{ $prefecture }}">{{ $prefecture }}</option>
                    @endforeach
                </select>
                <a href="{{ route('posts.location.create') }}" class="text-blue-600 underline mt-2 block">活動場所を設定する</a>
            </div>

            <!-- 希望性別 -->
            <div class="mb-6">
                <label for="preferred_gender" class="block text-lg font-medium text-gray-700">希望性別</label>
                <select id="preferred_gender" name="preferred_gender"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200">
                    <option value="">指定なし</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </div>

            <!-- 希望人数 -->
            <div class="mb-6">
                <label for="preferred_group_size" class="block text-lg font-medium text-gray-700">希望人数</label>
                <select id="preferred_group_size" name="preferred_group_size"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200">
                    <option value="">指定なし</option>
                    <option value="one">一人</option>
                    <option value="two">二人</option>
                    <option value="three">三人</option>
                </select>
            </div>

            <!-- 投稿ボタン -->
            <div class="text-center">
                <button type="submit"
                    class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md">
                    投稿する
                </button>
            </div>
        </form>
    </div>
</x-app-layout>

resources/views/posts/create_location.blade.php

<x-app-layout>
    <div class="max-w-7xl mx-auto p-6">
        <h2 class="text-2xl font-bold mb-4">活動場所の設定</h2>
        <!-- 住所検索フォーム -->
        <div class="mb-4">
            <label for="location-search" class="block text-sm font-medium text-gray-700">住所を入力</label>
            <input type="text" id="location-search" class="block w-full border-gray-300 rounded-md shadow-sm">
            <button id="search-location" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded-md">検索</button>
        </div>
        <!-- 地図表示 -->
        <div id="map" class="w-full h-64 mb-4"></div>
        <!-- 選択した場所の名前 -->
        <div class="mb-4">
            <label for="location-name" class="block text-sm font-medium text-gray-700">活動場所の名前</label>
            <input type="text" id="location-name" class="block w-full border-gray-300 rounded-md shadow-sm">
        </div>
        <!-- 設定ボタン -->
        <button id="set-location" class="px-4 py-2 bg-blue-600 text-white rounded-md">活動場所を設定</button>
    </div>
    <!-- Google Maps API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
    <script>
        let map, marker;
        function initMap() {
            const initialPosition = { lat: 35.6895, lng: 139.6917 }; // 初期位置 (東京)
            map = new google.maps.Map(document.getElementById("map"), {
                center: initialPosition,
                zoom: 15,
            });
            marker = new google.maps.Marker({
                position: initialPosition,
                map: map,
            });
        }
        document.getElementById("search-location").addEventListener("click", () => {
            const address = document.getElementById("location-search").value;
            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({ address }, (results, status) => {
                if (status === "OK") {
                    const position = results[0].geometry.location;
                    map.setCenter(position);
                    marker.setPosition(position);
                } else {
                    alert("場所を特定できませんでした: " + status);
                }
            });
        });
        document.getElementById("set-location").addEventListener("click", () => {
            const locationName = document.getElementById("location-name").value;
            if (locationName) {
                // 入力された場所の情報を投稿フォームに渡す (sessionStorage を使用)
                sessionStorage.setItem("selectedLocation", locationName);
                window.location.href = "{{ route('posts.create') }}";
            } else {
                alert("活動場所の名前を入力してください");
            }
        });
        // 初期化
        initMap();
    </script>
</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');
    Route::get('/posts/location', [PostController::class, 'locationCreate'])->name('posts.location.create');
});

require __DIR__.'/auth.php';

次回実施内容

• 未定

最後までご覧いただき本当にありがとうございました！！