在上一篇隨筆中,我們為Products創建了一個維護用的列表頁面,效果如圖:
這次我們使用上面維護的Products列表來創建一個最終用戶使用的購物頁面。
1.創建控制器(Controller),命名為store,我們通過命令行來創建它:
depot> ruby script/generate controller Store index
打開...rails_apps\depot\app\controllers目錄下的store_controller.rb文件,向其中添加代碼:
def index @products = Product.salable_items end
當然,我們還需要給Product定義salable_items方法,打開rails_apps\depot\app\models目錄下的product.rb文件,添加代碼:
def self.salable_items find(:all, :conditions => "date_available <= now()", :order => "date_available desc") end
2.創建表示層,在rails_apps\depot\app\views\store目錄下,創建一個index.rhtml文件,修改其內容如下:
<html> <head> <title>Pragprog Books Online Store</title> <%= stylesheet_link_tag "depot", :media => "all" %> </head> <body> <div id="banner"> <img src="http://images.cnblogs.com/logo.png"/> || <%= @page_title || "Pragmatic Bookshelf" %> </div> <div id="columns"> <div id="side"> <a href="http://www....">Home</a><br /> <a href="http://www..../faq">Questions</a><br /> <a href="http://www..../news">News</a><br /> <a href="http://www..../contact">Contact</a><br /> </div> <div id="main"> <%= @content_for_layout %> <% for product in @products -%> <div class="catalogentry"> <img src="<%= product.image_url %>"/> <h3><%= h(product.title) %></h3> <%= product.description %> <span class="catalogprice"><%= sprintf("$%0.2f", product.price) %></span> <%= link_to 'Add to Cart', {:action => 'add_to_cart', :id => product }, :class => 'addtocart' %><br/> </div> <div class="separator"> </div> <% end %> <%= link_to "Show my cart", :action => "display_cart" %> </div> </div> </body> </html>
可以看到,在index.rhtml中,使用了css樣式,css樣式的文件名字叫depot
<%= stylesheet_link_tag "depot", :media => "all" %>
我們可以在rails_apps\depot\public\stylesheets目錄下創建一個depot.css文件來定義我們的樣式。
好了,最終的表示結果應該是這樣:
這時,可以看到畫面上有一個AddCart鏈接,下一篇我們在此基礎上添加一個購物車(cart)應用。