Rails2.2でサンプルアプリを作ってみる(3)

Rails2.2を利用したサンプルアプリ作成の続きです。

すでにここまで作成が終わっているものとして話を進めていきます。

  1. Rails2.2でサンプルアプリを作ってみる(1) - 積み重ねた日々
  2. Rails2.2でサンプルアプリを作ってみる(2) - 積み重ねた日々

今回の作業内容

今回は、以下の変更を行っていきたいと思います。

  • 商品カタログを作成する
  • ページにレイアウトを追加する
  • ヘルパーを使った価格のフォーマット
  • カートへのリンクを追加する

商品カタログを作成する

今までは、売り手側の管理画面を作成していたので、新たに顧客に見せる商品カタログページを作成する必要があります。

まずはControllerを作成します。これは今までと同じように作成します。

$ script/generate  controller store index
      exists  app/controllers/
      exists  app/helpers/
      create  app/views/store
      exists  test/functional/
      create  app/controllers/store_controller.rb
      create  test/functional/store_controller_test.rb
      create  app/helpers/store_helper.rb
      create  app/views/store/index.html.erb

http://localhost:3000/store へアクセスし、以下の画面が表示されることを確認します。

このままでは商品カタログにならないので、商品データを取得するロジックを入れます。まずはController(app/controllers/store_controller.rb)に入れます。

class StoreController < ApplicationController
  def index
    @products = Product.find_products_for_sale
  end
end

次にModel(app/models/product.rb)に実際に取得するメソッドを作成します。

class Product < ActiveRecord::Base
  def self.find_products_for_sale
    find(:all, :order => 'title')
  end
  # 以降は、前回のバリデーションの記述

ここで、find_products_for_saleメソッドにself.を付けることに注意します(Javaでいうところのstaticメソッドに相当し、rubyではクラスメソッドと呼ぶみたいです)。

最後にView(app/views/store/index.html.erb)も変更します。

<h1>Your Pragmatic Catalog</h1>

<% for product in @products -%>
  <div class="entry">
    <%= image_tag(product.image_url) %>
    <h3><%=h product.title %></h3>
    <%= product.description %>
    <span class="price"><%= product.price %></span>
  </div>
<% end %>

もう一度、http://localhost:3000/store へアクセスし、以下の商品カタログ画面が表示されることを確認します。


ページにレイアウトを追加する

オンラインストアのすべてのページで使うレイアウトを定義し、商品カタログページにも適用します。

あらたに app/views/layouts/store.html.erb を作成しますが、すでに公開されているstore.html.erbをそのまま利用します。

ここでのポイントは3点ほどあります。

1つ目は、CSSファイルへのリンク生成用ヘルパーメソッドを使っています。(これは前回使ったやつですね)

  <%= stylesheet_link_tag "depot", :media => "all" %>

2つ目は、@page_titleというインスタンス変数です。この変数にはページの見出しが入ってきます。

    <%= @page_title || "Pragmatic Bookshelf" %>

3つ目は、以下の記述を行うとリクエストから呼び出されるViewを代入します。

      <%= yield :layout %>

最終的には、以下のレイアウトになりました。

ヘルパーを使った価格のフォーマット

価格部分が、12.34であれば、$12.34となるべきなので、通貨フォーマット用のヘルパーメソッド(number_to_currency)を使います。

具体的には、app/views/store/index.html.erbの以下の行を変更します。

    <span class="price"><%= product.price %></span>

変更後は、以下のようになります。

    <span class="price"><%= number_to_currency(product.price) %></span>

実際にただの少数が通貨フォーマットに変わっています。


カートへのリンクを追加する

ヘルパーメソッド button_to を使ってリンクボタンを作成します。

    <%= button_to "Add to Cart", :action => :add_to_cart, :id => product %>

追加後は、以下のように変わりました。

次回へ続きます。
Rails2.2でサンプルアプリを作ってみる(4) - 積み重ねた日々 へ続きます。