laravelで投稿idが取れない

Laravelで画像と文章を投稿できるアプリを作成中です。投稿一覧表示、投稿作成、投稿編集、投稿削除を、すべて１つの画面で完結させたいと思っています。
編集と削除画面に関してはモーダル表示にして削除できるようにしたいです。
今の課題は、画像の、投稿IDが44,45の投稿を削除しようとしても、投稿IDが43の投稿が消えてしまいます。
投稿１つ１つを表示する分には、投稿のidは取れているのですが、該当の投稿を編集、削除するにはどうすればよいでしょうか??
GETやPOSTの処理の流れはなんとなくわかるのですが、DELETE,PUT(PATCH?)の処理の流れがいまいちわかってないところもあります。

下記は、テーブル定義と、投稿一覧（index.blade.php)、PostsControlelr,ルーティングになります。リファクタとか何もしてないので汚いコードですが、ご教示いただけると幸いです。

posts | CREATE TABLE `posts` (
  `id` int unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int NOT NULL,
  `text` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `image_path` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
)

users | CREATE TABLE `users` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email_verified_at` timestamp NULL DEFAULT NULL,
  `password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `users_email_unique` (`email`)
)

index.blade.php
1<body>
2
3  @auth
4    <a href="/logout">ログアウト</a>
5    <p>ログイン中です</p>
6    <p>ユーザー名：{{$user->name}}</p>
7    <p>ユーザーID：{{$user->id}}</p>
8  @endauth
9  @guest
10    <a href="/login">サインイン</a>
11    <p>ゲストです</p>
12  @endguest
13  <h1>インデックスのページ</h1>
14
15  @auth
16    <form action="/" method="post" enctype="multipart/form-data">
17      {{ csrf_field() }}
18
19        <div>
20          <label for="text">内容</label>
21          <textarea name="text" rows="8" cols="80" placeholder="記事の内容を入れる"></textarea>
22          <input type="file" name="image" value="">
23          {{ csrf_field() }}
24        </div>
25
26        <div>
27          <input type="submit" value="送信">
28        </div>
29    </form>
30  @endauth
31
32  {{-- 投稿一覧表示 --}}
33@foreach ($posts as $post)
34      <h4>投稿：{{$post->text}}</h4>
35      <p>投稿者のid：{{$post->user_id}}</p>
36      <p>投稿のid：{{$post->id}}</p>
37    @if ($post->image_path)
38      <!-- 画像を表示 -->
39      <img src="{{ $post->image_path }}" style="width:150px; height:150px;">
40    @endif
41    {{-- 投稿の削除 --}}
42    {{-- ログインしてるユーザーと、投稿のuser_idが一緒だったら、編集・削除ボタンを表示させる --}}
43  @if(Auth::id()==$post->user_id)
44    <button type="button" data-toggle="modal" data-target="#editModal">編集モーダル</button>
45    <button type="button" data-toggle="modal" data-target="#testModal">削除モーダル</button>
46    
47    
48
49    <!-- 削除モーダル -->
50    <div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
51      <div class="modal-dialog">
52        <div class="modal-content">
53          <div class="modal-header">
54            <p>削除してよろしいですか??</p>
55          </div>
56        <div class="modal-body">
57            <form action="/{{$post->id}}" method="post">
58                {{ csrf_field() }}
59                <input type="hidden" name="_method" value="delete">
60                <button type="submit" name="">はい</button>
61                <button type="button" data-dismiss="modal">いいえ</button>
62            </form>
63        </div>
64      </div>
65    </div>
66  </div>
67    {{-- 削除モーダル終了 --}}
68    {{-- 編集モーダル --}}
69    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
70        <div class="modal-dialog">
71          <div class="modal-content">
72            <div class="modal-header">
73              <p>編集してよろしいですか??</p>
74            </div>
75          <div class="modal-body">
76            <form action='/{{$post->id}}' method="post">
77              {{ csrf_field() }}
78              <label for="text">内容</label>
79              <textarea name="text" rows="8" cols="80" placeholder="記事の内容を入れる"></textarea>
80              <input type="hidden" name="_method" value="put">
81              <input type="submit" value="更新">
82            </form>
83          </div>
84        </div>
85      </div>
86    </div>
87    {{-- 編集モーダル終了 --}}
88    @endif
89    <hr>
90@endforeach
91
92  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
93    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
94    crossorigin="anonymous"></script>
95  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
96    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
97    crossorigin="anonymous"></script>
98  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
99    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
100    crossorigin="anonymous"></script>
101</body>
102

<?php

namespace App\Http\Controllers;
use App\Post;
use Storage;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class PostsController extends Controller
{
    public function index()
    {
      //ログインしているユーザー情報を取得
      $user = Auth::user();
      $posts = Post::all();
      return view('posts.index',['posts' => $posts,'user'=>$user]);
      // return view('posts.index');
    }

    public function store(Request $request)
    {
      // モデルからインスタンスを生成
      $post = new Post;
      //s3アップロード開始
      $image = $request->file('image');
      // バケットの`myprefix`フォルダへアップロード
      $path = Storage::disk('s3')->putFile('test', $image, 'public');
      // アップロードした画像のフルパスを取得
      $post->image_path = Storage::disk('s3')->url($path);
      // $requestにformからのデータが格納されているので、以下のようにそれぞれ代入する
      $post->text = $request->text;
      // userテーブルのidを、postsテーブルのuser_idとして保存する
      $post->user_id = $request->user()->id;
      // 保存
      $post->save();
      // 保存後 一覧ページへリダイレクト
      return redirect('/');
    }

    public function update(Request $request, $id)
      {
        // idを元にレコードを検索して$postに代入
        $post = Post::find($id);
        // editで編集されたデータを$postにそれぞれ代入する
        $post->text = $request->text;
        // 保存
        $post->save();
        // 一覧ページへリダイレクト
        return redirect('/');
      }

    public function destroy($id)
    {
      // idを元にレコードを検索
      $post = Post::find($id);
      // 削除
      $post->delete();
      
      // 一覧にリダイレクト
      return redirect('/');
    }
}

<?php

/*
|--------------------------------------------------------------------------
| 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('/','PostsController@index')->name('posts.index');
// ルートページにpostでアクセスされたら、Postsコントローラの@storeを呼び出す
Route::post('/', 'PostsController@store')->name('posts.store');

// 更新
Route::put('/{id}', 'PostsController@update')->name('posts.update');
// 削除
Route::delete('/{id}', 'PostsController@destroy')->name('posts.destroy');
// Auth::routes();

// Route::get('/home', 'HomeController@index')->name('home');

    // Authentication Routes...
    Route::get('login', 'Auth\LoginController@showLoginForm')->name('login');
    Route::post('login', 'Auth\LoginController@login');
    Route::get('logout', 'Auth\LoginController@logout')->name('logout');

    // Registration Routes...
    Route::get('register', 'Auth\RegisterController@showRegistrationForm')->name('register');
    Route::post('register', 'Auth\RegisterController@register');

行動規範の内容に同意します

回答1件

ベストアンサー

各投稿用の削除モーダルのid属性の値がtestModalとなり重複してしまい、常に最初の投稿の削除モーダルが表示されてしまうためだと思われます。編集モーダルについても同様です。

モーダルのid属性の値を一意にしてあげれば良さそうですので、例えば、以下のように$post->idを含めてはいかがでしょうか。

php
1    <button type="button" data-toggle="modal" data-target="#testModal{{$post->id}}">削除モーダル</button>
2
3    ...
4
5    <!-- 削除モーダル -->
6    <div class="modal fade" id="testModal{{$post->id}}" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">

あるいは、モーダルを@foreachの外側に出して、button要素からモーダルへ$post->idの値を渡すようにしても良いかもしれません。Varying modal contentの仕組みを使えるのではないかと思います。

投稿2020/04/05 22:59

Lulucom

総合スコア1899

fork_

2020/04/06 02:34

できました！ありがとうございます！ id属性を使えば、投稿のidを取ってくることができるということでしょうか?? 挙動がまだあまり理解できていなく... form action='/{{$post->id}}' と指定するだけでは、うまくいかないのでしょうか?? 重ね重ねすみません、ご教示いただけると幸いです。

Lulucom

2020/04/06 02:42 編集

> id属性を使えば、投稿のidを取ってくることができるということでしょうか?? いえ、HTMLの仕様として、HTML要素のid属性の値はページ内で一意とする必要がありますが、今回は、すべての投稿の削除モーダルで'testModal'という同じ値になってしまい重複していました。そのため、どの投稿の削除ボタンを押しても、常に最初の投稿の削除モーダルが表示されてしまっていたのだと思います。

fork_

2020/04/06 02:51

理解が深まりました。ご教示いただき、ありがとうございました！

行動規範の内容に同意します