LoginSignup
2
5

More than 3 years have passed since last update.

Laravel8 CRUD処理を使った投稿アプリを作成する その2 投稿入力画面の作成

Last updated at Posted at 2020-10-18

目的

  • 投稿アプリの投稿入力画面の作成を行う

実施環境

  • 筆者の実施環境を記載する。
  • ハードウェア環境
項目 情報
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をインストールする

前提条件

概要

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

詳細

  1. ルーティング情報の記載

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

      $ vi routes/web.php
      
    2. 開いたファイルに下記の2行を追記する。(Laravel8からルーティング情報の記載方法が異なっているので注意する。)

      laravel8_crud/routes/web.php
      use App\Http\Controllers\ContentController;
      // -----------省略-----------
      Route::get('/input', [ContentController::class, 'input'])->name('input');
      
    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');
      
  2. コントローラファイルの作成と記載

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

      $ php artisan make:controller ContentController
      
    2. laravel8_crudディレクトリで下記コマンドを実行してコントローラファイルを開く。

      $ vi app/Http/Controllers/ContentController.php
      
    3. 開いたコントローラファイルに下記の内容を追記する。

      app/Http/Controllers/ContentController.php
      public function input()
      {
          return view('contents.input');
      }
      
    4. 追記後のコントローラファイルの内容を下記に記載する。

      app/Http/Controllers/ContentController.php
      <?php
      
      namespace App\Http\Controllers;
      
      use Illuminate\Http\Request;
      
      class ContentController extends Controller
      {
          // 下記を追記する
          public function input()
          {
              return view('contents.input');
          }
      }
      
  3. ビューファイルの作成と記載

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

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

      vi resources/views/contents/input.blade.php
      
    3. 作成して開いたビューファイルに下記の内容を追記する。

      laravel8_crud/resources/views/contents/input.blade.php
      <h1>input</h1>
      
      <form action="" method="post">
          @csrf
          <textarea name="content" cols="30" rows="10"></textarea>
          <input type="submit" value="送信">
      </form>
      
  4. 確認

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

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

    3. 下記の様に表示されれば本記事の作業は完了である。

      127_0_0_1_8000_input.png

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5