学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails5.1 | 28 | Webアプリケーション開発 | 注文一覧ページの実装

<<前  [TOP]  次>>


まずは商品管理画面から注文一覧ページへのリンクを作成します。
「app/views/goods」フォルダの「index.html.erb」ファイルに「注文を見る」ボタンの実装です。


【app/views/goods/index.html.erb】

<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>

<h1>Railsはじめてマート</h1>

<table>
  <thead>
    <tr>
      <th>商品画像</th>
      <th>商品ID</th>
      <th>商品名</th>
      <th>説明</th>
      <th>画像URL</th>
      <th>価格</th>
      <th>登録日</th>
      <th>メーカー</th>
      <th>カテゴリー</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @goods.each do |good| %>
      <tr>
	<td text-align:center;><img height="80" src="<%=h good.image_url %>"/></td>
        <td><%= good.goods_id %></td>
        <td><%= good.title %></td>
        <td><%= good.description %></td>
        <td><%= good.image_url %></td>
        <td><%= (good.price).to_i %></td>
        <td><%=h ((good.date).to_date).strftime('%Y年%m月%d日') %></td>
        <td><%= good.maker %></td>
        <td><%= good.category %></td>
        <td><%= link_to '詳細', good, class: 'btn' %></td>
        <td><%= link_to '編集', edit_good_path(good), class: 'btn' %></td>
        <td><%= link_to '削除', good, method: :delete, data: { confirm: '本当に削除してもよろしいですか?' }, class: 'btn' %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to '商品登録', new_good_path, class: 'btn' %><span>  </span><%= link_to '注文を見る',{:action=>"index", :controller=>"orders"}, :class => 'btn' %>



「注文を見る」ボタンの記述は以下の部分です。

<%= link_to '注文を見る',{:action=>"index", :controller=>"orders"}, :class => 'btn' %>






次にordersビューの「index.html.erb」ファイルを編集します。


【app/views/orders/index.html.erb】

<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>

<h1>注文一覧</h1>

<table>
  <thead>
    <tr>
      <th>注文ID</th>
      <th>注文内容</th>
      <th>氏名</th>
      <th>住所</th>
      <th>メールアドレス</th>
      <th>電話番号</th>
      <th>支払い方法</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @orders.each do |order| %>
      <tr>
	<td><%= order.id %></td>

	<td>
	<% order.line_items.each do |item| %>
		[商品ID:<%= item.good.goods_id %>]
		[商品名:<%= item.good.title %>]
		[数量:<%= item.quantity %>]
		[金額:<%= (item.total_price).to_i %>円]
		<br>
	<% end %>
	</td>
        <td><%= order.name %></td>
        <td><%= order.address %></td>
        <td><%= order.email %></td>
        <td><%= order.tel_number %></td>
        <td><%= order.pay_type %></td>
        <td><%= link_to '詳細', order, :class => 'btn' %></td>
        <td><%= link_to '編集', edit_order_path(order), :class => 'btn' %></td>
        <td><%= link_to '削除', order, method: :delete, data: { confirm: '本当に削除してもよろしいですか?' }, :class => 'btn' %></td>
      </tr>

    <% end %>
  </tbody>
</table>

<br>

<%= link_to '戻る',{:action=>"index", :controller=>"goods"}, :class => 'btn' %>






続いて「show.html.erb」の編集です。


【app/views/orders/show.html.erb】

<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<br>
<h1>注文情報の表示</h1>
<br>
<table>
  <thead>
    <tr>
      <th>商品ID</th>
      <th>商品名</th>
      <th>数量</th>
      <th>金額</th>
    </tr>
  </thead>

  <tbody>

	<% @order.line_items.each do |item| %>
          <tr>
		<td><%= item.good.goods_id %></td>
		<td><%= item.good.title %></td>
		<td><%= item.quantity %></td>
		<td><%= (item.total_price).to_i %></td>
          </tr>
	<% end %>
  </tbody>
</table>
<br>
<p>
<font size="4px">
  <strong>【注文ID:】 </strong>
  <%= @order.id %>
</font>
</p>

<p>
<font size="4px">
  <strong>【氏名:】 </strong>
  <%= @order.name %>
</font>
</p>

<p>
<font size="4px">
  <strong>【住所:】 </strong>
  <%= @order.address %>
</font>
</p>

<p>
<font size="4px">
  <strong>【メールアドレス:】 </strong>
  <%= @order.email %>
</font>
</p>

<p>
<font size="4px">
  <strong>【電話番号:】 </strong>
  <%= @order.tel_number %>
</font>
</p>

<p>
<font size="4px">
  <strong>【支払い方法:】 </strong>
  <%= @order.pay_type %>
</font>
</p>
<br>
<span>  </span><%= link_to '編集', edit_order_path(@order), class: 'btn' %><span>   </span><%= link_to '戻る', orders_path, class: 'btn' %>






続いて「edit.html.erb」の編集です。


【app/views/orders/edit.html.erb】

<h1>注文情報の編集</h1>

<%= render 'form' %>

<span> </span><%= link_to '戻る', orders_path, class: 'btn' %>






最後にordersコントローラの編集です。
情報を更新した時のメッセージを日本語にします。


【app/controllers/orders_controller.rb】

class OrdersController < ApplicationController
  before_action :set_order, only: [:show, :edit, :update, :destroy]

  # GET /orders
  # GET /orders.json
  def index
    @orders = Order.all
  end

  # GET /orders/1
  # GET /orders/1.json
  def show
  end

  # GET /orders/new
  def new
	@cart = current_cart
	if @cart.line_items.empty?
		redirect_to market_url, notice: 'カートは空です。'
		return
	end

	@order = Order.new

	respond_to do |format|
		format.html
		format.json { render json: @order }
	end
  end

  # GET /orders/1/edit
  def edit
  end

  # POST /orders
  # POST /orders.json
  def create
    @order = Order.new(order_params)
    @order.add_items(current_cart)

    respond_to do |format|
      if @order.save
	Cart.destroy(session[:cart_id])
	session[:cart_id] = nil
        format.html { redirect_to market_url, notice: 'ご注文ありがとうございました。' }
        format.json { render json: @order, status: :created, location: @order }
      else
        format.html { render :new }
        format.json { render json: @order.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /orders/1
  # PATCH/PUT /orders/1.json
  def update
    respond_to do |format|
      if @order.update(order_params)
        format.html { redirect_to @order, notice: '注文情報を更新しました。' }
        format.json { render :show, status: :ok, location: @order }
      else
        format.html { render :edit }
        format.json { render json: @order.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /orders/1
  # DELETE /orders/1.json
  def destroy
    @order.destroy
    respond_to do |format|
      format.html { redirect_to orders_url, notice: 'Order was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

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

    # Never trust parameters from the scary internet, only allow the white list through.
    def order_params
      params.require(:order).permit(:name, :address, :email, :tel_number, :pay_type)
    end
end



編集したのは以下の部分だけです。

def update
    respond_to do |format|
      if @order.update(order_params)
        format.html { redirect_to @order, notice: '注文情報を更新しました。' }
        format.json { render :show, status: :ok, location: @order }
      else
        format.html { render :edit }
        format.json { render json: @order.errors, status: :unprocessable_entity }
      end
    end
end






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


<<前  [TOP]  次>>