##【ゴール】
モデルの情報を検索できる検索窓の作成
##【メリット】
■ UXの向上
■ MVC理解度向上
##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7
##【実装】
####アプリケーション作成
※前回の「form_with」の反復練習も込めて「scaffold」封印。
※モデル、コントローラーは指定して作成しておく
$ 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」**を使用しているのでアソシエーションを自動作成
has_many :orders
ルートを編集
※ネストさせます
※itemの中にorderを入れることによりitem_idの取得を簡単に!!
※確認画面**「confirm」はHTTPメソッドは「POST」**で!!
root 'items#index'
resources :items do
get 'order' => 'orders#show'
post 'order/confirm' => 'orders#confirm'
post 'order' => 'orders#create'
end
####ビューを追記
<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 %>
<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へ送信
<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]」**で取得可能
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