Laravel6チュートリアル初心者向け:単独の投稿ページを表示してみよう!

更新日:

今回は、データベース内に保存されている複数の投稿を、それぞれ投稿ページで1ページずつ表示するチュートリアルをやっていきます。

 

ポイント

前回のチュートリアルでは、複数の投稿を1ページにリスト形式で表示するチュートリアルをやりました。

Laravel6チュートリアル初心者向け:データベースの値を取得して表示してみよう

 

今回は、それぞれの単独の投稿ページ(記事ページ)を表示するやり方をチュートリアルとして解説していきます。

 

Laravel6チュートリアル初心者向け:投稿ページを作ってみよう。

注意ポイント

今回のチュートリアルは、前回の続きになるので、

前回、前々回のチュートリアルで準備したファイルが必要です。

まずは、前々回のチュートリアルからやって、ファイルを揃えてください。

(前々回)Laravel6チュートリアル初心者向け:フォームを作成し投稿を保存してみよう!

(前回)Laravel6チュートリアル初心者向け:データベースの値を取得して表示してみよう

 

  1. コントローラーにクエリを書く
  2. 単独ページ用ブレードを作成
  3. ルートを設定
  4. リストページからリンクを貼る

という手順で一緒にやってきましょう。

 

コントローラーにクエリ(データベースへの問い合わせ文)を書く

では、前回のチュートリアルで作成したFormController.phpを開いてください。

 

classの{ } の中に、黄枠のfunction show を追記します。

コピーしました

コピー

public function show ($id){    
  $data = Form::where('id', $id)->first();
  return view('show')->with(['data' => $data]);
}

記入したら、上書き保存します。

 

中身の意味は後述します。

 

ブレードを作成する

投稿ページ(記事ページ)を表示するためのブレードを作成します。

まず、空のテキストエディタを開いてください。

 

継承のチュートリアルをやってる場合は

以下を記述し、show.blade.phpという名前で、resources\viewsフォルダに保存してください。

コピーしました

コピー

@extends('layout')
@section('content')
    <div class="content3">
        <p class="created">{{$data->created_at}}</p>
        <h1>{{$data->title}}</h1>
        <hr>
        <p>{!! nl2br($data->main)!!}</p>
    </div>
@endsection

 

 

継承のチュートリアルをやってない場合は、

以下を記述し、show.blade.phpという名前で、resources\viewsフォルダに保存してください。

コピーしました

コピー

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="{{asset('css/style.css')}}">
    </head>
    <body>
    <div class="wrapper">
        <div class="header">
            <h1>Laraサイト</h1>
        </div>
        <div class="sidebar">
            <p>ここがサイドバー</p>
        </div>

        <div class="content3">
        <p class="created">{{$data->created_at}}</p>
        <h1>{{$data->title}}</h1>
        <hr>
        <p>{!! nl2br($data->main)!!}</p>
        </div>

        <div class="footer">
            <p>お問い合わせ</p>
        </div>
    </div>
    </body>
</html> 

 

 

ルートを設定する

次に、routes\web.phpを開きます。

黄枠部分を追記してください。

コピーしました

コピー

// 投稿一覧を表示する
Route::get('/show/{id}', 'FormController@show');

 

実際にブラウザで表示してみる

コマンドプロンプト(shell/ターミナル)を開いて、

cdでLaravelプロジェクトに移動します (例 cd D:\XAMPP\htdocs\newsite)。

そして、php artisan serve と入力、Enterします。

言ってる事が分からない場合はこの記事でやり方を1から解説してるから確認して↓

PC上のLaravelサイトをブラウザに表示する方法。初心者でも必ずできる。

Neby

 

ブラウザで、http://localhost:8000/show/2と入力し、表示します。

もし、何も表示されない場合は、show/1, show/3などと、数字を変えてください。

データベースに保存されている投稿が表示されるはずです。アドレスの数字を変えるたびに違う投稿が表示されます。

というのも、今回web.phpにshow/{id}と書きました。

この{id}というのは、データベースに保存されている投稿のIDの事です。

 

そう、それぞれの投稿には、自動的にidが付与されています。なので、このidが一致する投稿を呼び出してるわけです。

web.phpのURL部分に、show/{id}のように、{ }を使う事で、その値(入力された文字)をコントローラーに渡せるようになります。

 

今回、コントローラーには、function show ( )の中にRequest, $requestではなく、$idと書きました。

というのも、今回はフォームに入力された値ではなく、URLの{ }の部分(パラメーター)を$id(変数)として受け取るので、($id)としています。

例えば、/show/3 とURLを入力したなら、$idには、3という数字が自動的に代入されるという事です。

 

そして、クエリ(データベースへの問い合わせ文)ですが、

$data = Form::where('id', $id)->first();

つまり、「formsテーブルの、場所(where)がidで、$id(今回なら3)と一致するものを探し、最初に出てきたもの(first)だけ、取り出して$dataに代入してください」

というクエリになってます。

つまり、データベースのidが3番の投稿が取り出されるわけです。

 

そして、前回のチュートリアルでは、全部の投稿を取り出してリスト化しました。

この時は、->get()というクエリを使いました。get()を使うと複数の投稿を取り出せます。
逆に->first()とすると、仮にデータベースクエリで複数件の投稿がヒットしたとしても、1番最初にヒットしたものしか出しません。

今回のidのように、もともと重複が無いものに対しても、first()を使います。

 

そして、前回は複数の投稿があったので、
ブレード上ではforeach文を使いましたが、
今回は1つしか取り出しませんから、foreachを使ってないわけです。

 

複数の投稿を取り出す場合は、get()で取り出し、foreachを使う必要があるけど、1つの投稿だけ取り出すなら、first()で取り出し、foreachは不要になるんだ。
Neby

 

リンクを作って、記事ページに飛べるようにしよう!

さて、現状では、URLで数字を手入力しないと投稿ページは表示できないわけですが、これを前回作った投稿リストページから、リンクを貼って飛べるようにしてみましょう。

前回作ったpost.blade.phpを開いてください。

 

<h1>{{$datas->title}}</h1>

という部分を探して、それを以下に書き換えて、保存してください。

コピーしました

コピー

<h1><a href="/show/{{$datas->id}}">{{$datas->title}}</a></h1>

これは、タイトルにaタグを加えてリンクを作り、飛び先のURLを/show/{{$datas->id}}としました。こうする事で、それぞれの投稿IDが表示され、/show/3 のようになるわけです。

 

ブラウザで、http://localhost:8000/createを表示します。

タイトルがリンク化され、リンクをクリックすると、個別の投稿表示ページに飛ぶようになりました。

 

今までのチュートリアルで、ルート、コントローラー、ブレードの3つをどう使うかが分かってきたんじゃないかな?

フォームで投稿→データベースに保存→ページに投稿を表示

の流れを作れば、ブログでも口コミサイトでもLaravelで作れるわけ。

Neby
うん、結構Laravelの構造や使い方が分かってきたよ。でも、もっと本格的に文字に色を付けたりとか、画像を入れたりとかはどうやればいいのか分からないなぁ。

 

というわけで、次のチュートリアルでは、wysiwygエディタという、文字装飾などを入れられるフォームを使う方法をやっていきます。

Laravel6チュートリアル:WYSIWYGエディタ(Quill)を使ってみよう!

 

写真で血圧記録

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-PHP Laravel入門