Laravel8 CRUD処理を使った投稿アプリを作成する その4 投稿一覧ページの作成

目的

• 投稿された内容の一覧を表示するページの作成を行う

実施環境

• 筆者の実施環境を記載する。
• ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.5)
ハードウェア	MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ	2 GHz クアッドコアIntel Core i5
メモリ	32 GB 3733 MHz LPDDR4
グラフィックス	Intel Iris Plus Graphics 1536 MB

• ソフトウェア環境

項目	情報	備考
PHP バージョン	7.4.8	Homebrewを用いてこちらの方法で導入→Mac HomebrewでPHPをインストールする
Laravel バージョン	8.6.0	commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン	8.0.19 for osx10.13 on x86_64	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする
Node.jsバージョン	v12.14.1	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでNode.jsをインストールする

前提条件

• 下記の記事の作業が完了していること。
  • Laravel8 CRUD処理を使った投稿アプリを作成する その3 投稿保存処理の作成

前提情報

• 作成するアプリ名は「laravel8_crud」とする。
• 作成するMySQLのデータベース名は「laravel８_crud_DB」とする。
• 下記に今回の作業のあとのソースコードのリモートリポジトリのリンクを記載する。
  • https://github.com/miriwo0104/laravel8_crud/tree/No04
• 投稿された内容の一覧ページのURLはhttp://127.0.0.1:8000/outputとする。

概要

1. ルーティング情報の記載
2. コントローラファイルの記載
3. ビューファイルの作成と記載
4. 確認

詳細

1. ルーティングの記載

   1. laravel8_crudディレクトリで下記コマンドを実行してルーティングファイルを開く。

      $ vi routes/web.php 
      

   2. 開いたファイルに下記の行を追記する。

      laravel8_crud/routes/web.php

      Route::get('/output', [ContentController::class, 'output'])->name('output');
      

   3. 追記後のルーティングファイルの内容を下記に記載する。

      laravel8_crud/routes/web.php

      <?php
      
      use Illuminate\Support\Facades\Route;
      use App\Http\Controllers\ContentController;
      
      /*
      |--------------------------------------------------------------------------
      | 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('/', function () {
          return view('welcome');
      });
      
      Auth::routes();
      
      Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
      
      Route::get('/input', [ContentController::class, 'input'])->name('input');
      Route::post('/save', [ContentController::class, 'save'])->name('save');
      // 下記を追記する
      Route::get('/output', [ContentController::class, 'output'])->name('output');
      

2. コントローラファイルの記載

   1. laravel8_crudディレクトリで下記コマンドを実行して作成したコントローラファイルを開く。

      $ vi app/Http/Controllers/ContentController.php 
      

   2. 下記の内容をクラス内に追記する。

      laravel8_crud/app/Http/Controllers/ContentController.php

      public function output()
      {
          $contents_get_query = Content::select('*');
          $items = $contents_get_query->get();
      
          return view('contents.output', [
              'items' => $items,
          ]);
      }
      

   3. すでに記載されている投稿内容を保存するアクション内のリダイレクトの記載を変更する。

      laravel8_crud/app/Http/Controllers/ContentController.php

      public function save(Request $request)
      {
          $input_content = new Content();
          $input_content->content = $request['content'];
          $input_content->save();
          //  下記を修正する
          return redirect(route('output'));
      }
      

   4. 両内容の追記後のコントローラファイルの内容を下記に記載する。

      laravel8_crud/app/Http/Controllers/ContentController.php

      <?php
      
      namespace App\Http\Controllers;
      
      use Illuminate\Http\Request;
      use App\Models\Content;
      
      class ContentController extends Controller
      {
          public function input()
          {
              return view('contents.input');
          }
      
          public function save(Request $request)
          {
              $input_content = new Content();
              $input_content->content = $request['content'];
              $input_content->save();
              //  下記を修正する
              return redirect(route('output'));
          }
      
          // 下記を追記する
          public function output()
          {
              $contents_get_query = Content::select('*');
              $items = $contents_get_query->get();
          
              return view('contents.output', [
                  'items' => $items,
              ]);
          }
          // 上記までを追記する
      }
      

3. ビューファイルの作成と記載

   1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを作成する。

      vi resources/views/contents/output.blade.php
      

   2. 作成して開いたビューファイルに下記の内容を追記する。

      laravel8_crud/resources/views/contents/output.blade.php

      <h1>output</h1>
      
      @foreach ($items as $item)
          <hr>
          <p>{{$item['content']}}</p>
      @endforeach
      

4. 確認

   1. laravel8_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。

      $ php artisan serve
      

   2. ブラウザで下記にアクセスする。

      • http://127.0.0.1:8000/output

   3. 下記の様に投稿内容が表示されることを確認する。

      

   4. ブラウザで下記にアクセスする。

      • http://127.0.0.1:8000/input

   5. テキストボックスに何かしらの文字列を入力して「送信」をクリックする。

      

   6. 下記の画面にリダイレクトし、入力内容が表示されれば本記事の作業は完了である。