Help us understand the problem. What is going on with this article?

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をインストールする

前提条件

前提情報

概要

  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. ブラウザで下記にアクセスする。

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

      127_0_0_1_8000_output_と_Zoomミーティング.png

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

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

      127_0_0_1_8000_input.png

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

      127_0_0_1_8000_output.png

miriwo
web系のバックエンドの知識を習得中! 2019/07/07~毎日更新中
https://miriwo.hatenablog.com/
boomtechcafe
埼玉県の朝霞台を拠点にエンジニアの勉強会、交流会等のイベントを企画しています! 朝霞台駅か北朝霞駅が全然行けちゃうぜってエンジニアの方がいたら是非! もくもく会とかゲーム大会とかもやれたらな~って思ってます。
https://boom-teck-cafe.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away