[Rails] "Input"-> "Confirmation screen"-> "Save"-> "View"

Introduction

After inputting, I thought it would be easier for the user to save it with a confirmation screen in between. Introducing the method of "Input"-> "Confirmation screen"-> "Save"-> "Display".

table of contents

  1. Foundation construction
  2. Implementation of "Input"-> "Confirmation screen"-> "Save"
  3. "Input screen"
  4. "Confirmation screen"
  5. "Save" and "View"

Development environment

ruby 2.6.5 rails 6.0.0 Database mysql2 0.4.4

Implementation

Let's implement it ~

1. Foundation construction

Controller creation

Terminal.


rails g controller new create show

app/controllers/events_controller.rb


class UsersController < ApplicationController
  def new
  end

  def create
  end

  def show
  end
end

At the same time, the view template is also automatically generated.

routing

Also configure the routing.

config/routes.rb


Rails.application.routes.draw do
  root to: 'users#new'
  resources :users, only: [:new, :create, :show] do
    collection do #This is important
      post :confirm #This is important
    end
  end
end

By adding confirm to the above, it is possible to branch to the "confirmation screen".

Create table

Create a model and edit the migration file.

Terminal.


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

Terminal.


rails db:migrate

The basics have been implemented. Next, we will implement the contents in detail.

2. Implementation of "Input"-> "Confirmation screen"-> "Save"

The final controller description is below. We also set the minimum validation for saving.

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

For convenience, we will apply minimal validation to the model.

app/models/user.rb


class User < ApplicationRecord
  validates :name, :age, :email, presence: true
end

3. "Input screen"

Write the controller.

app/controllers/events_controller.rb


  def new
    @user = User.new
  end

Describe the view. I made three items.

html:app/views/users/new.html.erb


<h1>user registration</h1>

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

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

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

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

<%= f.submit "To confirmation screen" %>

<% end %>

Use url: confirm_users_path to move to the" confirmation screen ".

4. "Confirmation screen"

-Write the controller.

app/controllers/events_controller.rb


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

#abridgement

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

#abridgement

Takes the data entered in (user_params) and assigns it to @ user. At this time, don't forget to permit with the strong parameter in private.

-Describe the view. First, create a confirm.html.erb file and write the following.

html:app/views/users/confirm.html.erb


<h1>confirmation screen</h1>

<p>name: <%= @user.name%></p>
<p>age: <%= @user.age%></p>
<p>Email: <%= @user.email%></p>
#Up to this point for display

#From here for storage
<%= form_with(model: @user, local: true) do |f| %>
  <%= f.hidden_field :name %>
  <%= f.hidden_field :age %>
  <%= f.hidden_field :email %>
  <%= f.submit "Send" %>
  <%= f.submit "Return", name: :back %>
<% end %>

The input data assigned to @ user is displayed and expanded. At this time, if you use only form_with, you can edit it on the" confirmation screen ", so hide it with hidden_field. Instead, it is displayed in the <p> tag part at the top.

This completes the confirmation screen.

5. "Save" and "View"

·controller

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

After saving, set redirect_to @user to move to the user's page. The @ user here is not the role of the instance variable, but the purpose is to determine the: id, which means "the page corresponding to the record stored in that variable".

app/controllers/events_controller.rb


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

Create an action to display the user's page.

・ View Finally, make a completion screen.

html:app/views/users/show.html.erb


<h1>Your registration is complete</h1>

<p>name: <%= @user.name%></p>
<p>age: <%= @user.age%></p>
<p>Email: <%= @user.email%></p>

<%= link_to "Return", root_path %> 

done! !!

Summary

It was a method of "input"-> "confirmation screen"-> "save"-> "display".

We will implement this "confirmation screen" together with the Simple calendar in the application under personal development. If you are interested, please refer to that as well.

[Rails] Introduce a simple calendar and insert a "confirmation screen" in additional events https://qiita.com/AKI3/items/1b4850bb39be61dbc1a4

Finally

I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled. This time, I posted it as a record of the first work for personal development. See you next time ~

reference

https://qiita.com/ngron/items/d55aac6e81a9fb2fe81c

Recommended Posts

[Rails] "Input"-> "Confirmation screen"-> "Save"-> "View"
[Rails] Implement star rating (input, save, display)
[Rails] View sharing
Display a confirmation screen before registering a record with rails
[Note] Rails3 routing confirmation
[Order function] rails Order function implementation Confirmation screen will also be created ~
[Rails] Save images using carrierwave
View monthly calendar in Rails
Rails routing controller view relationship
[Rails 6] How to create a dynamic form input screen using cocoon
[Rails] Add a confirmation screen and a completion screen to devise membership registration.