Ruby on Rails ショッピングカート part2 カタログリスト

Ruby on Rails において ショッピングカート とは以下を示します。

  1. コントローラ、アクションメソッド作成
     %cd depot/
     %ruby 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.rhtml
    
  2. アクションメソッドの編集
     ここでは、ある程度"抽象度"をもたせて記述。
     「販売可能な商品のリストをモデルに要求する」くらいの感じで。
    
     find()メソッドは、データベースから返された各行に
     対応するProductオブジェクトが収められた配列を返す。
     そして、この配列をコントローラに返すみたいな。
    
    1. /app/controllers/store_controller.rb
       def index
         @products = Product.salable_items
       end
      
    2. /app/models/product.rb
       # 販売可能な商品のリストを返す
       # 販売可能日が新しい順に表示
       def self.salable_items
         find(:all,
              :conditions => "date_available <= now()",
              :order      => "date_available desc")
       end
      
  3. ビューの編集
     画像サイズが大きいので、幅を指定しましたよ!!
    
    1. /app/views/index.rhtml
       <table cellpadding="5" cellspacing="0">
       <% for product in @products %>
         <tr valign="top">
           <td>
             <img width="300" src="<%= product.image_url %>" />
           </td>
           <td width="450">
             <h3><%=h product.title %></h3>
             <small>
               <%= product.description %>
             </small>
             <br />
             <strong><%= sprintf("$%0.2f", product.price) %></strong>
             <%= link_to 'カートに入れる',
                         :action => 'add_to_cart',
                         :id => product %>
             <br />
           </td>
         </tr>
         <tr><td colspan="2"><hr /></td></tr>
       <% end %>
       </table>
      
  4. カタログリスト表示
     http://www.bishounen.sakura.ne.jp/rails_depot/store
    
    • http://www.bishounen.sakura.ne.jp/rails/images/knowledge/145_01_catalog.jpg
  5. レイアウトを追加
     ページに装飾するために、スタイルシートを作成して、スタイルを固定したい。
     まずはレイアウトを作成して、そのレイアウトにページを埋め込むようにしよう!!
    
     画像を"rails.png"にしちゃった。
     画像サイズが大きいので、高さを指定しましたよ!!
    
    1. /app/views/layouts/store.rhtml
       <html>
           <head>
             <title>Pragprog Books オンラインストア</title>
             <%= stylesheet_link_tag "depot", :media => "all" %>
           </head>
           <body>
               <div id="banner">
                   <img height="45" src="/rails_depot/images/rails.png"/>
                   <%= @page_title || "Pragmatic Bookshelf" %>
               </div>
               <div id="columns">
                   <div id="side">
                       <a href="http://www....">ホーム</a><br />
                       <a href="http://www..../faq">FAQ</a><br />
                       <a href="http://www..../news">ニュース</a><br />
                       <a href="http://www..../contact">お問い合わせ</a><br />
                   </div>
                   <div id="main">
                       <%= @content_for_layout %>
                   </div>
               </div>
           </body>
       </html>
      
  6. ビューを編集
     画像サイズが大きいので、幅を指定しましたよ!!
    
    1. /app/views/store/index.rhtml
       <% for product in @products -%>
           <div class="catalogentry">
               <img width="300" src="<%= product.image_url %>"/>
               <h3><%= h(product.title) %></h3>
               <%= product.description %>
               <br />
               <br />
               <span class="catalogprice"><%= sprintf("$%0.2f", product.price) %></span>
               <%= link_to 'カートに入れる',
                           {:action => 'add_to_cart', :id => product },
                           :class => 'addtocart' %><br/>
           </div>
           <div class="separator">&nbsp;</div>
       <% end %>
       <%= link_to "カートを表示する", :action => "display_cart" %>
      
  7. 画面表示
     スタイルシートがまだ存在しないので、スタイルがバラバラ・・・・・
    
    • http://www.bishounen.sakura.ne.jp/rails/images/knowledge/145_02_stylesheets_before.jpg
  8. スタイルシートと追加
     レイアウトに"depot"を指定したので、スタイルシートを追加
    
    1. /public/stylesheets/depot.css
       #banner {
         background:     #9c9;
         padding-top:    10px;
         padding-bottom: 10px;
         border-bottom:  2px solid;
         font:           small-caps 40px/40px "Times New Roman", serif;
         color:          #282;
         text-align:     center;
       }
       #banner img {
         float:          left;
       }
       #columns {
         background:     #141;
       }
       #main {
         margin-left:    11em;
         padding-top:    4ex;
         padding-left:   2em;
         background:     white;
       }
       #side {
         float:          left;
         padding-top:    1em;
         padding-left:   1em;
         padding-bottom  1em;
         width:          10em;
         background:     #141;
       }
       #side a {
         color:          #ada;
         font:           larger sans-serif;
         font-weight:    bold;
       }
      
       .catalogentry {
         padding:       1ex 0ex;
       }
       .catalogentry img {
         float:         left;
         margin-right:  2em;
       }
       .catalogentry h3 {
         font:          20px bold;
         color:         #282;
         margin-top:    0ex;
         margin-bottom: 0.5ex;
       }
       .catalogentry p {
         font:          12px sans-serif;
         margin-bottom: .5ex;
       }
       .catalogprice {
         font:          20px bold;
         padding-right: 1em;
       }
       .separator {
         border-bottom: 1px solid #282;
         clear:         both;
       }
      
    • http://www.bishounen.sakura.ne.jp/rails/images/knowledge/145_03_stylesheets_after.jpg

ご訪問頂き有難う御座います。 当サイトを効率良く使うためにまずは FrontPage を見て下さい。 検索方法、一覧表示などの各情報を纏めています。
当サイトの説明 → Frontpage