はじめに
入力後、確認画面をはさんで保存する方が、ユーザーにとって優しいと思いとました。
「入力」→「確認画面」→「保存」→「表示」の方法を紹介します。
目次
- 基礎構築
- 「入力」→「確認画面」→「保存」の実装
- 「入力画面」
- 「確認画面」
- 「保存」と「表示」
開発環境
ruby 2.6.5
rails 6.0.0
データベース mysql2 0.4.4
実装
それでは実装して行きます〜
1. 基礎構築
コントローラー作成
rails g controller new create show
class UsersController < ApplicationController
def new
end
def create
end
def show
end
end
この時同時にビューの雛形も自動生成もされます。
ルーティング
ルーティングも設定します。
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
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. 「入力」→「確認画面」→「保存」の実装
最終的なコントローラーの記述は以下になります。
保存の際のバリデーションも最低限設定してます。
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
便宜上、最低限のバリデーションをモデルにかけます。
class User < ApplicationRecord
validates :name, :age, :email, presence: true
end
3. 「入力画面」
コントローラーを記述します。
def new
@user = User.new
end
ビューを記述します。
三つの項目を作りました。
<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. 「確認画面」
・コントローラーを記述します。
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ファイル作成し、下記を記述します。
<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. 「保存」と「表示」
・コントローラー
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を判断するのが目的で、「その変数に格納されたレコードに該当するページ」という意味になります。
def show
@user = User.find_by(id: params[:id])
end
ユーザーのページを表示させるアクションを作ります。
・ビュー
最後、完了画面を作ります。
<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
最後に
私はプログラミング初学者ですが、同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。
今回は個人開発に当たって、最初の作業の記録を兼ねて投稿させていただきました。
それでは、また次回お会いしましょう〜