[laravel8] ブログ記事の表示
今回はブログの記事を表示するためにルーティングを設定し、viewも作成します。
ルーティング
ルーティングの設定をする前にどのようにブログを表示させるかを考えましょう。
今回は
トップページに記事の一覧を表示 ( / )
個別記事のページ ( /posts/(記事id) )
として進めていきます。
ルーティングを設定するファイル
routes/web.php
<?php
use App\Models\Post;
use Illuminate\Support\Facades\Route;
// /にアクセスがきた時
Route::get('/', function () {
// すべての記事を取得
$posts = Post::all();
// $posts（すべての記事のコレクション）をpostsとしてviewに送る
return view('posts', [
'posts' => $posts
]);
});
// /posts/(記事ID) 記事IDが$idになる
Route::get('/posts/{post}', function ($id) {
// 記事IDが$idの記事を取得
$post = Post::findOrFail($id);
// $post(記事)
return view('post', [
'posts' => $post
]);
});・トップページ ( / )にアクセスが来た時はまず全ての記事を取得します。
$posts = Post::all();
その後にその全ての記事（$posts）をviewに送っています。
・記事の詳細ページ（/posts/(記事ID)）にアクセスが来た場合は記事IDをURLから取得します。この場合は$idに記事IDが入ってきます。
そしてその$idを使用し記事を取得する。
$post = Post::findOrFail($id);
findOrFailメソッドを使用することで$idに対応する記事が存在しない場合はModelNotFoundExceptionを投げてくれます。
記事が見つかった場合はviewへその記事のデータ($post)をviewへ送ります。
View
まず、上の記事でも紹介したようにlayoutのbladeコンポーネントを作成します。
resources/views/components/layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<link rel="stylesheet" href="/app.css">
</head>
<body>
{{ $slot }}
</body>
</html>componentsディレクトリに作成したlayout.blade.phpになりますが、$slotの変数だけあるので、別のテンプレートで
<x-layout></x-layout>
のタグに囲まれた部分が $slotの部分に入ってきます。
次にトップページに記事の一覧を表示 ( / )のviewを見ていきます。
resources/views/posts.blade.php
<x-layout>
@foreach($posts as $post)
<article>
<h1>
<a href="/posts/{{ $post->id}}" >
{{ $post->title }}
</a>
</h1>
<div>
{{ $post->excerpt }}
</div>
</article>
@endforeach
</x-layout>layoutのコンポーネントを使用するので<x-layout>を使っています。
次に、layout.blade.phpではデフォルト$slotを使用しているので、<x-layout>タグに囲まれた部分が直接layout.blade.phpの$slotの箇所に入ります。
@foreach($posts as $post)
このforeachで$postsのコレクションをループして一つ一つの記事のデータにアクセスできます。
<a href="/posts/{{ $post->id }}" >
ここで記事詳細ページへのリンクを作成しています。$post->idで記事のIDを取得できるので、記事のIDが1の場合は
<a href="/posts/1" >
のように出力されます。
{{ $post->title }} と {{ $post->excerpt }}
も同様に記事のタイトルと抜粋を出力しています。
次に 個別記事のページ ( /posts/(記事id) ) のviewを見ていきましょう。
resources/views/post.blade.php
<x-layout>
<article>
<h1>{{ $post->title }}</h1>
<div>
{!! $post->body !!}
</div>
</article>
<a href="/">戻る</a>
</x-layout>詳細ページもlayoutコンポーネントを使用するため<x-layout>を使っています。
この中で注意するところは
の記事でも紹介した、出力時にエスケープしない方法です。
{!! $post->body !!}
このように {!! !!}に囲まれている変数はエスケープされないので、ブログの記事の内容にHTMLタグが入っている場合など意図的にエスケープさせない場合に使用します。
データ入力
表示するデータがないと確認ができないので以下を参考にし、Tinkerでデータを入力しておきます。
$php artisan tinker
Psy Shell v0.10.8 (PHP 8.0.3 — cli) by Justin Hileman
>>> $post = new App\Models\Post;
=> App\Models\Post {#3343}
>>> $post->title = 'test title';
=> "test title"
>>> $post->excerpt = 'test excerpt test excerpt';
=> "test excerpt test excerpt"
>>> $post->body = 'osidbfaoidfao asdl fkans danso dikasno dfiasnd ofiasnd foiasnf oaslkansdlva';
=> "osidbfaoidfao asdl fkans danso dikasno dfiasnd ofiasnd foiasnf oaslkansdlva"
>>> $post->save();
=> true表示確認
まだデザインを適用していないので見た目は良く無いですが機能的には動いています。
トップページ
記事詳細ページ
最後に
簡単にですが、ブログの表示するところまで来ました。この記事の段階のソースコードは次になります。
この記事が気に入ったらサポートをしてみませんか？