【３】 Posts を表示させる
■ データベースを作成しよう
の続き…。
routes/web.php を編集(追加)。
Route::resource(‘posts’, ‘PostController’);
if (env(‘APP_ENV’) === ‘local’) {
URL::forceScheme(‘https’);
}
ルーティングは
php artisan route:list
コマンドで確認☆
ビューの作成
app/Http/Controllers/PostController.php
の index アクションを以下のように修正
public function index()
{
return view('posts.index'); ← 追加!!
}
resources/views に posts ディレクトリを作成
posts ディレクトリの中に
index.blade.php
を作成
ローカルサーバーを起動
Visual Studio Code のターミナルで
下記のコマンドを実行。
php artisan serve --port=8080
ブラウザで
http://127.0.0.1/アプリケーション名/public/posts
にアクセス。
ブラウザに「 Posts 」と表示されていれば ＯＫ☆
ちょっと 休憩。
app/Http/Controllers/PostController.php
の create アクションを以下のように編集
public function create()
{
return view('posts.create');
}
resources/views/posts/create.blade.php
を作成
<form method="POST" action="/posts">
{{ csrf_field() }}
<input type="text" name="title">
<input type="text" name="content">
<input type="submit">
</form>
app/Http/Controllers/PostController.php
の store アクションを以下のように変更
public function store(Request $request)
{
$post = new Post();
$post->title = $request->input('title');
$post->content = $request->input('content');
$post->save();
return redirect()->route('posts.show', ['id' => $post->id])->with('message', 'Post was successfully created.');
}
■ 個別の詳細ページを作成
app/Http/Controllers/PostController.php
の show アクションを以下のように変更
public function show(Post $post)
{
return view('posts.show', compact('post'));
}
resources/views/posts/show.blade.php
を以下のように作成
@if (session('message'))
{{ session('message') }}
@endif
{{ $post->title }}
{{ $post->content }}
■ 作成した投稿一覧を作成
app/Http/Controllers/PostController.php
の index アクションを以下のように変更
public function index()
{
$posts = Post::all();
return view('posts.index', compact('posts'));
}
resources/views/posts/index.blade.php
で受け取った $post を @foreach で展開
<h1>Posts</h1>
@foreach($posts as $post)
<a href="/posts/{{ $post->id }}">{{ $post->title }}</a>
@endforeach
<a href="/posts/create">New Post</a>
■ 各投稿の編集ページ作成
resources/views/posts/index.blade.php
に /posts/:id/edit へのリンクを作成
<h1>Posts</h1>
@foreach($posts as $post)
<a href="/posts/{{ $post->id }}">{{ $post->title }}</a>
<a href="/posts/{{ $post->id }}/edit">Edit</a>
@endforeach
<a href="/posts/create">New Post</a>
各投稿の閲覧ページからも編集画面へ移動できるように
resources/views/posts/show.blade.php
にもリンクを作成
@if (session('message'))
{{ session('message') }}
@endif
{{ $post->title }}
{{ $post->content }}
<a href="/posts/{{ $post->id }}/edit">Edit</a>
app/Http/Controllers/PostController.php
の edit アクションを編集
public function edit(Post $post)
{
return view('posts.edit', compact('post'));
}
ビューを作成する。
resources/views/posts/edit.blade.php
<form method="POST" action="/posts/{{ $post->id }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="PUT">
<input type="text" name="title" value="{{ $post->title }}">
<input type="text" name="content" value="{{ $post->content }}">
<input type="submit">
</form>
app/Http/Controllers/PostController.php
の update アクションを以下のように実装
public function update(Request $request, Post $post)
{
$post->title = $request->input('title');
$post->content = $request->input('content');
$post->save();
return redirect()->route('posts.show', ['id' => $post->id])->with('message', 'Post was successfully updated.');
}
■ 投稿した内容を削除する （ 削除機能の実装 ）
resources/views/posts/index.blade.php
に投稿を削除するためのリンクを作成
<h1>Posts</h1>
@foreach($posts as $post)
<a href="/posts/{{ $post->id }}">{{ $post->title }}</a>
<a href="/posts/{{ $post->id }}/edit">Edit</a>
<form action="/posts/{{ $post->id }}" method="POST" onsubmit="if(confirm('Delete? Are you sure?')) { return true } else {return false };">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button type="submit">Delete</button>
</form>
@endforeach
<a href="/posts/create">New Post</a>
app/Http/Controllers/PostController.php
の destroy アクションで投稿を削除するように修正
public function destroy(Post $post)
{
$post->delete();
return redirect()->route('posts.index');
}
ターミナルに、下記コマンドを入力。
php artisan serve --port=8080（ ローカルサーバーを起動 ）
ブラウザで表示 ↓
http://ＩＰアドレス/posts
Posts の下に「 New Post 」のリンクが表示されれば、
第一段階は、ＯＫ☆
次に、「 New Post 」のリンク をクリック。
テキストフィールド(２つ)と、
[ 送信 ] ボタンが表示されれば、ＯＫ☆
■ GitHub(ギットハブ) に保存。
Visual Studio Code のターミナルに
一行ずつ 下記のコマンドをコピペ
git add .
git commit -m “posts commit”
git push -u origin main
おつかれさま でした～☆
次は 。。。
