【Rails】「入力」→「確認画面」→「保存」→「表示」

#はじめに
入力後、確認画面をはさんで保存する方が、ユーザーにとって優しいと思いとました。
「入力」→「確認画面」→「保存」→「表示」の方法を紹介します。



###目次
1. 基礎構築
2. 「入力」→「確認画面」→「保存」の実装
3. 「入力画面」
4. 「確認画面」
5. 「保存」と「表示」






#開発環境
ruby 2.6.5
rails 6.0.0
データベース mysql2 0.4.4

#実装
それでは実装して行きます〜






#1. 基礎構築

####コントローラー作成


```ターミナル.
rails g controller new create show
```

```app/controllers/events_controller.rb
class UsersController < ApplicationController
  def new
  end

  def create
  end

  def show
  end
end
```
この時同時にビューの雛形も自動生成もされます。

####ルーティング
ルーティングも設定します。

```config/routes.rb
Rails.application.routes.draw do
  root to: 'users#new'
  resources :users, only: [:new, :create, :show] do
    collection do #ここが大事
      post :confirm #ここが大事
    end
  end
end
```
上記にconfirmを追記する事で「確認画面」への分岐が可能になります。

####テーブル作成

モデルを作成してマイグレーションファイルを編集します。

```ターミナル.
rails g model user
```

```db/migrate/2020XXXXXXXXX_create_user.rb
class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.string :name
      t.string :age
      t.string :email

      t.timestamps
    end
  end
end
```

```ターミナル.
rails db:migrate
```
基礎が実装できました。
続いて詳しく中身を実装して行きます。





#2. 「入力」→「確認画面」→「保存」の実装

最終的なコントローラーの記述は以下になります。
保存の際のバリデーションも最低限設定してます。

```app/controllers/events_controller.rb
class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def confirm
    @user = User.new(user_params)
    render :new if @user.invalid?
  end

  def create
    @event = Event.new(event_params)
    if params[:back]
      render :new
    else pay_event && @event.save!
      redirect_to @event
    end
  end

  def show
    @user = User.find_by(id: params[:id])
  end

  private

  def user_params
    params.require(:user).permit(:name, :age, :email)
  end
end

```
便宜上、最低限のバリデーションをモデルにかけます。

```app/models/user.rb
class User < ApplicationRecord
  validates :name, :age, :email, presence: true
end

```






#3. 「入力画面」

コントローラーを記述します。

```app/controllers/events_controller.rb
  def new
    @user = User.new
  end
```

ビューを記述します。
三つの項目を作りました。

```html:app/views/users/new.html.erb
<h1>ユーザー登録</h1>

<%= form_with(model: @user, url:confirm_users_path, local: true) do |f| %>

<div>
  <%= f.label :名前 %>
  <%= f.text_field :name %>
</div>

<div>
  <%= f.label :年齢 %>
  <%= f.text_field :age %>
</div>

<div>
<%= f.label :Email %>
<%= f.text_field :email %>
</div>

<%= f.submit "確認画面へ" %>

<% end %>
```
`url:confirm_users_path`で「確認画面」に遷移させます。







#4. 「確認画面」
・コントローラーを記述します。

```app/controllers/events_controller.rb
  def confirm
    @user = User.new(user_params)
    render :new if @user.invalid?
  end

#省略

  private
  def user_params
    params.require(:user).permit(:name, :age, :email)
  end

#省略

```
`(user_params)`で入力したデータを取り、`@user`に代入します。
この時`private`内にストロングパラメーターでpermitを忘れずにしてください。

・ビューを記述します。
先ず、confirm.html.erbファイル作成し、下記を記述します。

```html:app/views/users/confirm.html.erb
<h1>確認画面</h1>

<p>名前: <%= @user.name%></p>
<p>年齢: <%= @user.age%></p>
<p>Email: <%= @user.email%></p>
#ここまでは表示用

#ここからは保存用
<%= form_with(model: @user, local: true) do |f| %>
  <%= f.hidden_field :name %>
  <%= f.hidden_field :age %>
  <%= f.hidden_field :email %>
  <%= f.submit "送信" %>
  <%= f.submit "戻る", name: :back %>
<% end %>
```

`@user`に代入されてる入力データが表示・展開されます。
この時`form_with`だけでを使うと、「確認画面」で編集できてしまうので、`hidden_field`で隠します。
その代わり、上部の`<p>`タグ部分で表示させます。

これで確認画面は完了です。







#5. 「保存」と「表示」

・コントローラー

```app/controllers/events_controller.rb
  def create
    @event = Event.new(event_params)
    if params[:back]
      render :new
    else pay_event && @event.save!
      redirect_to @event
    end
  end
```

保存後、`redirect_to @user`とする事で、そのユーザーのページへ遷移します。
ここの`@user`はインスタンス変数の役割ではなく、`:id`を判断するのが目的で、「その変数に格納されたレコードに該当するページ」という意味になります。


```app/controllers/events_controller.rb
  def show
    @user = User.find_by(id: params[:id])
  end
```
ユーザーのページを表示させるアクションを作ります。


・ビュー
最後、完了画面を作ります。

```html:app/views/users/show.html.erb
<h1>登録完了しました</h1>

<p>名前: <%= @user.name%></p>
<p>年齢: <%= @user.age%></p>
<p>Email: <%= @user.email%></p>

<%= link_to "戻る", root_path %> 
```
完成です！！




#まとめ
「入力」→「確認画面」→「保存」→「表示」の方法でした。


個人開発中のアプリケーションに、この「確認画面」をシンプルカレンダー(Simplecalendar)と合わせて実装をします。興味があればそちらも参考にしてみてください。

【Rails】シンプルカレンダー(Simplecalendar)を導入して、追加イベントに「確認画面」を挟み込む
https://qiita.com/AKI3/items/1b4850bb39be61dbc1a4




###最後に
私はプログラミング初学者ですが、同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。
今回は個人開発に当たって、最初の作業の記録を兼ねて投稿させていただきました。
それでは、また次回お会いしましょう〜

#参考
https://qiita.com/ngron/items/d55aac6e81a9fb2fe81c