LoginSignup
1
0

More than 3 years have passed since last update.

Rails ウィザード形式導入について 3

Posted at

はじめに

Rails ウィザード形式導入について 1 はこちらをクリック願います。
Rails ウィザード形式導入について 2 はこちらをクリック願います。
チーム開発でフリマサイトを開発致しました。
その際、ユーザーの新規登録画面でウィザード形式を導入致しましたので、内容を整理します。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

前提

  • ユーザー情報(User)については 以下 A と記述します。
  • 住所情報(Destination)については 以下 B と記述します。

Bの登録の各アクション(create)とビュー(new,create)

ルーティング設定(new,create)

  • B情報を登録するページを表示するnew_destinationアクションのルーティングを設定します。
  • また、B情報を登録するcreate_destinationアクションのルーティングも設定します。
config/routes.rb
Rails.application.routes.draw do
  devise_for :users, controllers: {registrations: 'users/registrations'}
  #ここから↓
  devise_scope :user do
    get 'destinations', to: 'users/registrations#new_destination'
    post 'destinations', to: 'users/registrations#create_destination'
  end
  #ここまで↑
  root to: "top#index"
end

B情報のビューファイルの作成(new)

  • 該当するビューファイルであるnew_destination.html.hamlを作成しまーす!
  • 参考程度にみてください。このまま入力するとエラーが出るかも・・・です。
app/views/devise/registrations/new_address.html.haml

    .opi
      = form_for @destination do |f|
        .postal-code
          .postal-code__a
            .postal-code__a__a1
              = f.label :post_code,"郵便番号"
            .postal-code__a__a2
              必須
          .postal-code__b
            = f.text_field :post_code,size:37, maxlength:7

        .prefectures
          .prefectures__c
            .prefectures__c__c1
              = f.label :prefecture_code_name,"都道府県"
            .prefectures__c__c2
              必須
          .prefectures__d
            = f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name, {prompt:'--'}, {class: "shipping__area-input-1"}

        .municipality
          .municipality__e
            .municipality__e__e1
              = f.label :city,"市区町村"
            .municipality__e__e2
              必須
          .municipality__f
            = f.text_field :city,size:37

        .address
          .address__g
            .address__g__g1
              = f.label :house_number,"番地"
            .address__g__g2
              必須
          .address__h
            = f.text_field :house_number,size:37

        .building
          .building__i
            .building__i__i1
              = f.label :building,"建物名"
            .building__i__i2
              任意
          .building__j
            = f.text_field :building,size:37

        .phone
          .phone__number1
            .phone__number1__kk
              = f.label :phone_number,"電話番号"
            .phone__number1__yy
              任意
          .phone__number2
            = f.text_field :phone_number,size:37,maxlength:11

        .register
          %input#submit_button2{:name => "submit", :type => "submit", :value => "登録する"}/

ここで一言!

  • createアクション内で必要なインスタンス変数を定義してrenderしてます。
  • なので、new_destinationアクションをコントローラ内に定義する必要はありませ-ん!

create_destinationアクションを定義する

app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController


  # 省略

  def create_destination
    @user = User.new(session["devise.regist_data"]["user"])
    @destination = Destination.new(destination_params)
    unless @destination.valid?
      flash.now[:alert] = @destination.errors.full_messages
      render :new_destination and return
    end
    @user.build_destination(@destination.attributes)
    @user.save
    sign_in(:user, @user)
  end

  protected

  def destination_params
    params.require(:destination).permit(:post_code, :prefecture_code, :city, :house_number, :building, :phone_number)
  end

  # 省略
end

2ページ目で入力した住所情報のバリデーションチェック
  • createアクションと同様に、valid?メソッドを用いて、バリデーションチェックを行います。
2ページ目の情報とSessionで保持していた情報とあわせ、ユーザー情報として保存
  • build_destinationを用いて送られてきたparamsを、保持していたsessionが含まれる@userに代入します。
  • saveメソッドを用いてテーブルに保存します。
ログインをすること
  • 今のままだとユーザーの新規登録ができても、ログインができてません。
  • sign_inメソッドを利用してログイン作業を行います。

最後にdestination_createに対応するビューを作成

  • 該当するビューファイルであるcreate_destination.html.hamlを作成しまーす!
  • 参考程度にみてください。このまま入力するとエラーが出るかも・・・です。
app/views/devise/registrations/create_destination.html.haml
  .main
    .done
      会員登録完了
    .mozi
      ありがとうございます。     会員登録が完了しました。
    .login2
      = link_to "トップへ戻る", root_path

以上で完了です!できました?
個人で開発されるアプリにもぜひ導入してみてください!
UI性も増して、Looks Goodかと!

さいごに

日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。

1
0
0

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
1
0