Rails導入編 | カート機能の実装 | 11 | 商品詳細ページ編集 - 学生向けプログラミング入門

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

【10 | バリデーションの日本語化】 << 【ホーム】 >> 【12 | ナビゲーションバーの利用】

商品の詳細ページを編集します。
商品詳細ページのビューは「SampleCart/app/views/goods/show.html.erb」ファイルです。

記述編集　【SampleCart/app/views/goods/show.html.erb】

<p style="color: green"><%= notice %></p>

<div class="container">
  <div class="row">
    <!-- 右側4 -->
    <div class="col-md-4">

    </div>
    <!-- 左側8 -->
    <div class="col-md-8">

      <div class="card p-4">
        <img src="<%= @good.image_url %>" class="card-img-top w-25" style="height: 100%;">
        <div class="card-body">
          <p>
            <strong>Goods:</strong>
            <%= @good.goods_id %>
          </p>
          <p>
            <strong>Title:</strong>
            <%= @good.title %>
          </p>
          <p>
            <strong>Description:</strong>
            <%= @good.description %>
          </p>
          <p>
            <strong>Price:</strong>
            <%= @good.price %>
          </p>
          <p>
            <strong>Date:</strong>
            <%= @good.date %>
          </p>
          <p>
            <strong>Maker:</strong>
            <%= @good.maker %>
          </p>
          <p>
            <strong>Category:</strong>
            <%= @good.category %>
          </p>
          <div>
            <%= link_to "編集", edit_good_path(@good), class: "btn btn-warning" %>
            <%= link_to "一覧に戻る", goods_path, class: "btn btn-success" %>
          </div>
          <br/>
          <div>
            <%= button_to "商品を削除", @good, method: :delete, class: "btn btn-danger" %>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

このように「SampleCart/app/views/goods/show.html.erb」を編集すると、見た目は以下のようになります。
ブラウザで確認してください。
アドレスの最後の数字は、商品のIDです。
http://localhost:3000/goods/7

Bootstrapでは、グリッドシステムが提供されており、rowとcolが重要な要素です。
colクラスは、コンテンツを水平方向に配置するために使用されます。
数字は列のサイズを示し、1から12の整数を指定できます。
例えば、col-6は半分の幅の列を表し、col-12は100%の幅の列を表します。

次に商品編集ページの修正をします。
商品編集ページは、「SampleCart/app/views/goods/edit.html.erb」ファイルと「SampleCart/app/views/goods/_form.html.erb」ファイルの２つで構成されています。
レンダーファイル「SampleCart/app/views/goods/_form.html.erb」は商品登録の実装時に編集済みですので、「SampleCart/app/views/goods/edit.html.erb」を編集してレイアウトを整えます。

記述編集　【SampleCart/app/views/goods/edit.html.erb】

<div class="container mt-4 mb-4">

  <h1>商品の編集</h1>

  <%= render "form", good: @good %>

  <br>

  <div>
    <%= link_to "商品の詳細", @good, class: "btn btn-success" %>
    <%= link_to "一覧に戻る", goods_path, class: "btn btn-secondary" %>
  </div>

</div>

ブラウザを確認します。
http://localhost:3000/goods/7/edit

商品を登録したり編集したりすると、メッセージが英語で表示されます。
これを修正するには、コントローラーを編集する必要があります。
「SampleCart/app/controllers/goods_controller.rb」ファイルの「notice」の英語の部分を日本語に修正して保存します。

記述修正　【SampleCart/app/controllers/goods_controller.rb】

class GoodsController < ApplicationController
  before_action :set_good, only: %i[ show edit update destroy ]

  # GET /goods or /goods.json
  def index
    @goods = Good.all
  end

  # GET /goods/1 or /goods/1.json
  def show
  end

  # GET /goods/new
  def new
    @good = Good.new
  end

  # GET /goods/1/edit
  def edit
  end

  # POST /goods or /goods.json
  def create
    @good = Good.new(good_params)

    respond_to do |format|
      if @good.save
        format.html { redirect_to good_url(@good), notice: "商品が登録されました。" }
        format.json { render :show, status: :created, location: @good }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @good.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /goods/1 or /goods/1.json
  def update
    respond_to do |format|
      if @good.update(good_params)
        format.html { redirect_to good_url(@good), notice: "商品が更新されました。" }
        format.json { render :show, status: :ok, location: @good }
      else
        format.html { render :edit, status: :unprocessable_entity }
        format.json { render json: @good.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /goods/1 or /goods/1.json
  def destroy
    @good.destroy!

    respond_to do |format|
      format.html { redirect_to goods_url, notice: "商品が削除されました。" }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_good
      @good = Good.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def good_params
      params.require(:good).permit(:goods_id, :title, :description, :image_url, :price, :date, :maker, :category)
    end
end