はじめに

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

目次

基礎構築
「入力」→「確認画面」→「保存」の実装
「入力画面」
「確認画面」
「保存」と「表示」

開発環境

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

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

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ファイル作成し、下記を記述します。

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

ユーザーのページを表示させるアクションを作ります。

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

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

最後に

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

参考