7
19

More than 3 years have passed since last update.

【注文機能】rails 注文機能実装 確認画面も作成します〜

Last updated at Posted at 2020-06-18

【ゴール】

モデルの情報を検索できる検索窓の作成

【メリット】

■ UXの向上
■ MVC理解度向上

【開発環境】

■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

【実装】

アプリケーション作成

※前回の「form_with」の反復練習も込めて「scaffold」封印。
※モデル、コントローラーは指定して作成しておく

mac.terminal
$ rails new search
$ rails g model Item name:string text:text price:integer
$ rails g controller items
$ rails g model Order quantity:integer amount:integer item:references
$ rails g conrtroller orders show confirm 
$ rails db:migrate

モデルを編集

※ item : order = 1 : 多
※oredrに関してはデータ型「references」を使用しているのでアソシエーションを自動作成

models/items.rb
has_many :orders

ルートを編集

※ネストさせます
※itemの中にorderを入れることによりitem_idの取得を簡単に!!
※確認画面「confirm」はHTTPメソッドは「POST」で!!

config/routes.rb
root 'items#index'
  resources :items do 
    get 'order' => 'orders#show'
    post 'order/confirm' => 'orders#confirm'
    post 'order' => 'orders#create'
  end

ビューを追記

items/index.html.erb
<h2>アイテム一覧</h2>

<% @items.each do |item| %>
  <%= item.name %>
  <%= item.text %>
  <%= item.price %>
<% end %>

<h2>アイテム作成</h2>

<%= form_with modle: @item do |f| %>
  <%= f.text_field :name %>
  <%= f.text_area :text %>
  <%= f.text_field :price%>
  <%= f.submit %>
<% end %>
order/show.html.erb
<h2>注文画面</h2>

<p>アイテム情報</p>
  <%= @item.name %>
  <%= @item.price %>

<%= form_with ([model: @item, @order],local: true url: item_order_confirm_path) do |f| %>
  <%= f.text_field :quantity %> <br>
  <%= f.text_field :amount %> <br>
  <%= f.submit "送信" %> <br>
<% end %>

「hidden_field」で情報を隠してDBへ送信

order/confirm.html.erb
<h2>注文確認画面</h2>
  <%= @order.amount %>
  <%= @order.quantity %>
  <%= @item.name %>
  <%= @item.price %>
<%= form_with model:[@item, @order], url:(item_order_path) do |f| %>
  <%= f.hidden_field :amount %>
  <%= f.hidden_field :quantity %>
  <%= f.submit %>
<% end %>

コントローラーを編集

※itemの情報をネストしているので、「params[:itm_id]」で取得可能

orders_controller.rb
  def show
    @item = Item.find(params[:item_id])
    @order = @item.order.new
  end

  def confirm
    @item = Item.find(params[:item_id])
    @order = @item.order.new(order_params)
  end

  def create
    @item = Item.find(params[:item_id])
    @order = @item.order.new(order_params)
    @order.save
    redirect_to items_path
  end

  private
  def order_params
    params.require(:order)
    .permit(:amount,
            :quantity,
            :item_id)
  end

以上です。

【合わせて読みたい】

■form_withに関して
https://qiita.com/tanaka-yu3/items/50f54f5d4f4b8dfe19f3

■確認画面表示に関して
https://qiita.com/tomoharutt/items/7959d28764912c64562f

7
19
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
7
19