Rails2.2でサンプルアプリを作ってみる(3)
Rails2.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) - 積み重ねた日々 へ続きます。