Rails導入編 | カート機能の実装 | 13 | 買い物ビューの作成 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【12 | ナビゲーションバーの利用】 << 【ホーム】 >> 【14 | セッションカートの実装】

買い物ができる機能の表示部分を実装します。
ビューを作成する前に、ジェネレーターでコントローラーを作成します。
コントローラーの名前は「markets」で作成します。
ターミナルでrails generate controller Markets indexと入力します。

コマンド
rails generate controller Markets index

ブラウザで以下のURLにアクセスしてみます。
http://localhost:3000/markets/index

ルートの設定

このindexページをアプリケーションのrootのURLとして設定します。
「SampleCart/config/routes.rb」ファイルを開いて以下のように編集します。

記述編集　【SampleCart/config/routes.rb】

Rails.application.routes.draw do

  #root
  root 'markets#index', as: 'markets_index'

  # get
  get 'markets/index'
  get 'says/hello'
  get 'says/goodby'

  resources :goods

  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
  # Can be used by load balancers and uptime monitors to verify that the app is live.
  get "up" => "rails/health#show", as: :rails_health_check

  # Defines the root path route ("/")
  # root "posts#index"
end

root 'markets#index', as: 'market_index'の記述を追加し、URLhttp://localhost:3000/でindexページにアクセスできるようにしました。
「as:」オプションにより「markets_index_path」というメソッドが作成されます。

コントローラー

商品リストとして表示させるため、marketsコントローラーのindexメソッドに記述を追加します。
「SampleCart/app/controllers/markets_controller.rb」ファイルを以下のように編集します。
「order()」メソッドを使い、商品名（title）の降順で表示するようにしています。

記述編集　【SampleCart/app/controllers/markets_controller.rb】

class MarketsController < ApplicationController
  def index
    @goods = Good.order(:title)
  end
end

ビュー

ビューの編集をします。
「SampleCart/app/views/markets/index.html.erb」ファイルを以下のように編集します。

記述編集　【SampleCart/app/views/markets/index.html.erb】

<div class="container mt-4">
    <div class="row">
        <!-- 右側(カート)-->
        <div class="col-md-4">
        </div>
        <!-- 左側(商品リスト) -->
        <div class="col-md-8">
            <div class="row">
                <% @goods.each do |good| %>
                    <div class="col-md-4">
                        <div class="card">
                            <img src="<%= good.image_url %>" class="card-img-top">
                            <div class="card-body">
                                <h6 class="card-title"><strong><%= good.title %></strong></h6>

                                <div class="badge bg-danger fs-6">
                                    <%= good.price %>円
                                </div>
                                <br/>
                                <div class="badge bg-secondary">
                                    <%= good.maker %>
                                </div>
                                <div class="badge bg-primary">
                                    <%= good.category %>
                                </div>
                                <div class="mt-4">
                                    <%= link_to "この商品の詳細", good, class: "btn btn-success" %>
                                </div>
                            </div>
                        </div>
                    </div>

                <% end %>
            </div>
        </div>        
    </div>
</div>