LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@miriwo(大川 峻)inBOOM TECH CAFE

Laravel8 CRUD処理を使った投稿アプリを作成する その3 投稿保存処理の作成

Last updated at Posted at 2020-10-19

目的

  • 投稿内容を保存する処理を追加する

実施環境

  • 筆者の実施環境を記載する。
  • ハードウェア環境
項目 情報
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」とする。
  • 作成するMySQLのデータベース名は「laravel８_crud_DB」とする。
  • 下記に今回の作業のあとのソースコードのリモートリポジトリのリンクを記載する。
  • 投稿をデータベースのテーブルに保存したあとリダイレクトするURLはhttp://127.0.0.1:8000/inputとする。

概要

  1. ルーティング情報の記載
  2. コントローラファイルの記載
  3. モデルファイルの作成
  4. テーブルの作成
  5. ビューファイルの修正
  6. 確認

詳細

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

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

      $ vi routes/web.php

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

      laravel8_crud/routes/web.php
      Route::post('/save', [ContentController::class, 'save'])->name('save');

    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');
  2. コントローラファイルの記載

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

      $ vi app/Http/Controllers/ContentController.php

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

      laravel8_crud/app/Http/Controllers/ContentController.php
      use App\Models\Content;
// -----------省略-----------
public function save(Request $request)
{
    $input_content = new Content();
    $input_content->content = $request['content'];
    $input_content->save();

    return redirect(route('input'));
}

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

      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('input'));
    }
    // 上記までを追記する
}
  3. モデルファイルとマイグレーションファイルの作成

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

      $ php artisan make:model Content --migration
  4. テーブルの作成

    1. laravel8_crudディレクトリで下記コマンドを実行して作成したマイグレーションファイルを開く。(YYYY-MM-DDにはマイグレーションファイル作成日が、XXXXXXにはランダムな数字が入る。)

      $ vi database/migrations/YYYY_MM_DD_XXXXXX_create_contents_table.php

    2. 下記の様に記載を行う。記載後のマイグレーションファイルの内容を下記に記載する。

      laravel8_crud/database/migrations/YYYY_MM_DD_XXXXXX_create_contents_table.php
      <?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateContentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contents', function (Blueprint $table) {
            $table->id();
            // 下記を追記する
            $table->string('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contents');
    }
}

    3. laravel8_crudディレクトリで下記コマンドを実行してマイグレーションを行い、テーブルを作成する。

      $ php artisan migrate
  5. ビューファイルの修正

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

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

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

      laravel8_crud/resources/views/contents/input.blade.php
      <h1>input</h1>

<!-- 下記を修正 -->
<form action="{{route('save')}}" method="post">
    @csrf
    <textarea name="content" cols="30" rows="10"></textarea>
    <input type="submit" value="送信">
</form>
  6. 確認

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

      $ php artisan serve

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

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

      127_0_0_1_8000_input.png

    4. リダイレクト処理が実行されて今一度http://127.0.0.1:8000/inputのページが表示される。

      127_0_0_1_8000_input.png

    5. 下記コマンドを実行してMySQLにログインする。(MySQLのrootユーザのパスワードを忘れてしまった方はこちら→Mac ローカル環境の MySQL 8.0 のrootパスワードを忘れた時のリセット方法)

      $ mysql -u root -p

    6. 下記SQLを実行する。

      select * from laravel８_crud_DB.contents;

    7. 下記の様に出力されれば本記事の作業は完了である。(contentの内容は皆さんがブラウザのテキストボックスに入力した内容)

      +----+--------------------------+---------------------+---------------------+
| id | content                  | created_at          | updated_at          |
+----+--------------------------+---------------------+---------------------+
|  1 | これはテストです             | 2020-07-14 07:50:16 | 2020-07-14 07:50:16 |
+----+--------------------------+---------------------+---------------------+
3
2
5

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
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?