编程是我的爱好。

(七)-创建在线购物页面

上一篇 / 下一篇  2007-09-16 06:50:22 / 个人分类:编程语言

上一篇随笔中,我们为Products创建了一个维护用的列表页面,效果如图:

 

这次我们使用上面维护的Products列表来创建一个最终用户使用的购物页面。

 

1.      创建控制器(Controller),命名为store,我们通过命令行来创建它:

depot>ruby script/generate controller Store index

打开...rails_apps\depot\app\controllers目录下的store_controller.rb文件,向其中添加代码:

defindex

@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="/images/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">&nbsp;</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)应用

//function pageLoad() { Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(handleInitializeRequest); //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest); } function handleInitializeRequest(sender, args) { var prm = Sys.WebForms.PageRequestManager.getInstance(); var eid = args.get_postBackElement().id; if (eid.indexOf("DeleteLink")>0) { args.get_postBackElement().innerHTML = "正在删除..."; } else if (eid.indexOf("btnSubmit")>0) { document.getElementById("AjaxHolder_PostComment_ltSubmitMsg").innerHTML="正在提交..."; document.getElementById("AjaxHolder_PostComment_btnSubmit").disabled = true; } else if(eid.indexOf("refreshList")>0) { document.getElementById("AjaxHolder_PostComment_refreshList").innerHTML="正在刷新..."; } } function TempSave(ElementID) { try { CommentsPersistDiv.setAttribute("CommentContent",document.getElementById(ElementID).value); CommentsPersistDiv.save("CommentXMLStore"); } catch(ex) { } } function Restore(ElementID) { CommentsPersistDiv.load("CommentXMLStore"); document.getElementById(ElementID).value=CommentsPersistDiv.getAttribute("CommentContent"); }

TAG: ruby

小飞猪之Ruby窝 引用 删除 drive2me   /   2007-09-17 07:59:33
好家伙,一下写了这么多呀!
真好。那我就看你等额购物车例子了,我正想做一个呢。
呵呵!
小飞猪之Ruby窝 引用 删除 drive2me   /   2007-09-17 07:58:22
5
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2009-07-05  
   1234
567891011
12131415161718
19202122232425
262728293031 

数据统计

  • 访问量: 628
  • 日志数: 16
  • 建立时间: 2007-09-13
  • 更新时间: 2008-03-11

RSS订阅

Open Toolbar