Top > Ruby on Railsあれこれ > 2-1 電子カタログを作ろう

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 
 
-
|
|
|
|
|
|
!
 
 
 
 
 
 
 
 
 
 
 
 
SET NAMES utf8;
 
CREATE TABLE `rails`.`catalogs` (
  `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(255) NOT NULL,
  `price` INTEGER UNSIGNED NOT NULL,
  `detail` TEXT NOT NULL,
  `pictureurl` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`id`)
)
ENGINE = InnoDB;
 
INSERT INTO catalogs VALUES(1,'牛肉',1500,'国産牛ロース100g','/images/previewimage.jpg');
INSERT INTO catalogs VALUES(2,'牛肉',2850,'国産牛ロース200g','/images/previewimage.jpg');
INSERT INTO catalogs VALUES(3,'牛肉',4050,'国産牛ロース300g','/images/previewimage.jpg');
INSERT INTO catalogs VALUES(4,'牛肉',6375,'国産牛ロース500g','/images/previewimage.jpg');
INSERT INTO catalogs VALUES(5,'牛肉',12000,'国産牛ロース1kg','/images/previewimage.jpg');
INSERT INTO catalogs VALUES(6,'牛肉',1000,'外国産牛ロース100g','/images/previewimage2.jpg');
INSERT INTO catalogs VALUES(7,'牛肉',1800,'外国産牛ロース200g','/images/previewimage2.jpg');
INSERT INTO catalogs VALUES(8,'牛肉',2700,'外国産牛ロース300g','/images/previewimage2.jpg');
INSERT INTO catalogs VALUES(9,'牛肉',4500,'外国産牛ロース500g','/images/previewimage2.jpg');
INSERT INTO catalogs VALUES(10,'牛肉',9000,'外国産牛ロース1kg','/images/previewimage2.jpg');

  0
gem install will_paginate
  0
  1
  2
  3
Successfully installed will_paginate-2.2.2
1 gem installed
Installing ri documentation for will_paginate-2.2.2...
Installing RDoc documentation for will_paginate-2.2.2...
  0
  1
  2
  3
----------------------------------
end
 
require 'will_paginate'

  0
  1
  2
  3
  4
  5
  6
development:
  adapter: mysql
  encoding: utf8
  database: rails
  username: rails
  password: rails
  host: localhost
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
class CatalogsController < ApplicationController
  
  # 商品一覧を表示します。
  # GET /catalogs
  def index
    
    #ページ番号(:page)に該当するレコードだけをoffset, limitを使用して取得しています。
    @catalogs = Catalog.paginate(:page => params[:page], :per_page => 5, :order => "id")
 
    #レスポンスページ名を明示的に指定します。
    respond_to do |format|
      format.html { render :action => "catalog.html.erb" }
    end
  end
end
  0
  1
class Catalog < ActiveRecord::Base
end
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>カタログ</title>
</head>
<body>
 
詳細を見たい商品の商品番号をクリックして下さい。
<table border="1">
  <thead>
    <tr>
      <th>商品番号</th>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <% for catalog in @catalogs %>
    <tr>
      <td><%= link_to catalog.id, :action => 'show', :id => catalog %></td>
      <td><%=h catalog.name %></td>
      <% #価格は3桁毎にカンマ区切り %>
      <td align="right"><%= number_with_delimiter(catalog.price, delimiter=",") %></td>
    </tr>
    <% end %>
  </tbody>
</table>
 
<% # ページ制御リンクを生成します。%>
<%= will_paginate %>
 
</body>
</html>
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
class CatalogsDetailController < ApplicationController
 
  # 商品の詳細を表示します。
  # GET /catalogs/show/1
  def show
    @catalog = Catalog.find(params[:id])
 
    #レスポンスページ名を明示的に指定します。
    respond_to do |format|
      format.html { render :action => "catalogDetail.html.erb" }
    end
    
  end
  
end
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>商品詳細</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>商品番号</th>
        <th>商品名</th>
        <th>価格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><%=h @catalog.id %></td>
        <td><%=h @catalog.name %>&nbsp;<%=h @catalog.detail %></td>
        <td align="right"><%= number_with_delimiter(@catalog.price, delimiter=",") %></td>
      </tr>
      <tr>
        <td colspan="3"><%= image_tag(@catalog.pictureurl) %></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

添付ファイル: fileror-sample2-1_5.jpg 285件 [詳細] fileror-sample2-1_4.jpg 258件 [詳細] fileror-sample2-1_3.jpg 268件 [詳細] fileror-sample2-1_2.jpg 270件 [詳細] fileror-sample2-1_1.jpg 278件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:25:33 (2921d)