学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース

Ruby on RailsでWebアプリケーション開発その29 注文一覧ページにページネーションの実装(will_paginate)

<<前  [TOP]  次>>


多くの注文を受けた時、ページのスクロールが大変なので1ページに表示する件数を10件までにしたいという時にこの「ページネーション」を利用します。
これには、gemに「will_paginate」をインストールしなければなりません。
まずは「Gemfile」に「gem 'will_paginate'」と追記します。


【shop/Gemfile】

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.10'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.13', '< 0.5'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'coffee-script-source', '1.8.0'

gem 'rails-i18n'

gem 'will_paginate'



コマンドプロンプトで「shop」フォルダに移動して「bundle install」を実行します。
f:id:MrRadiology:20180302164404p:plain
f:id:MrRadiology:20180302164454j:plain


次に、サンプルのオーダを登録するためのスクリプトを作成します。
「shop」フォルダの中に「script」というフォルダを新規作成し、その中に「load_orders.rb」というファイルを新規作成します。


【script/load_orders.rb(新規作成)】

Order.transaction do

	(1..100).each do |i|

		Order.create(:name => "ScriptSample #{i}", :address => "#{i}SampleAddress", :email => "sample#{i}@sample.jp",:tel_number => "000-0000-0000", :pay_type =>"現金")

	end

end



コマンドプロンプトで「shop」フォルダに移動して、「rails runner script/load_orders.rb」と入力し、スクリプトを実行します。
f:id:MrRadiology:20180305092731p:plain


WEBrickを起動して、確認してみます。
f:id:MrRadiology:20180305093600p:plain
注文内容は空ですが、オーダーは100件追加されています。


ordersコントローラの「index()」メソッドに「paginate()」メソッドを呼び出すように記述します。


【app/controllers/orders_controller.rb】

class OrdersController < ApplicationController
  before_action :set_order, only: [:show, :edit, :update, :destroy]

  # GET /orders
  # GET /orders.json
  def index

    @orders = Order.pagenate :page=>params[:page],  :per_page =>10

	respond_to do |format|
		format.html
		format.json { render json: @orders }
	end

  end

  # GET /orders/1
  # GET /orders/1.json
  def show
  end

  # GET /orders/new
  def new
	@cart = current_cart
	if @cart.line_items.empty?
		redirect_to market_url, notice: 'カートは空です。'
		return
	end

	@order = Order.new

	respond_to do |format|
		format.html
		format.json { render json: @order }
	end
  end

  # GET /orders/1/edit
  def edit
  end

  # POST /orders
  # POST /orders.json
  def create
    @order = Order.new(order_params)
    @order.add_items(current_cart)

    respond_to do |format|
      if @order.save
	Cart.destroy(session[:cart_id])
	session[:cart_id] = nil
        format.html { redirect_to market_url, notice: 'ご注文ありがとうございました。' }
        format.json { render json: @order, status: :created, location: @order }
      else
        format.html { render :new }
        format.json { render json: @order.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /orders/1
  # PATCH/PUT /orders/1.json
  def update
    respond_to do |format|
      if @order.update(order_params)
        format.html { redirect_to @order, notice: '注文情報を更新しました。' }
        format.json { render :show, status: :ok, location: @order }
      else
        format.html { render :edit }
        format.json { render json: @order.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /orders/1
  # DELETE /orders/1.json
  def destroy
    @order.destroy
    respond_to do |format|
      format.html { redirect_to orders_url, notice: 'Order was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_order
      @order = Order.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def order_params
      params.require(:order).permit(:name, :address, :email, :tel_number, :pay_type)
    end
end



変更したindex()メソッドのみ抜粋します。

def index

    @orders = Order.paginate :page=>params[:page],  :per_page =>10

	respond_to do |format|
		format.html
		format.json { render json: @orders }
	end
end

「:per_page」パラメータで10ページごとの表示を指定しています。


次にindexビューにページネーションのリンクを追加します。


【app/views/orders/index.html.erb】

<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<br>
<h1>注文一覧</h1>
<br>
<table>
  <thead>
    <tr>
      <th>注文ID</th>
      <th>注文内容</th>
      <th>氏名</th>
      <th>住所</th>
      <th>メールアドレス</th>
      <th>電話番号</th>
      <th>支払い方法</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @orders.each do |order| %>
      <tr>
	<td><%= order.id %></td>

	<td>
	<% order.line_items.each do |item| %>
		[商品ID:<%= item.good.goods_id %>]
		[商品名:<%= item.good.title %>]
		[数量:<%= item.quantity %>]
		[金額:<%= (item.total_price).to_i %>円]
		<br>
	<% end %>
	</td>
        <td><%= order.name %></td>
        <td><%= order.address %></td>
        <td><%= order.email %></td>
        <td><%= order.tel_number %></td>
        <td><%= order.pay_type %></td>
        <td><%= link_to '詳細', order, :class => 'btn' %></td>
        <td><%= link_to '編集', edit_order_path(order), :class => 'btn' %></td>
        <td><%= link_to '削除', order, method: :delete, data: { confirm: '本当に削除してもよろしいですか?' }, :class => 'btn' %></td>
      </tr>

    <% end %>
  </tbody>
</table>

<br>

<%= link_to '戻る',{:action=>"index", :controller=>"goods"}, :class => 'btn' %>
<br>
<br>
<%= will_paginate @orders %>



追記したのは次の1行です。

<%= will_paginate @orders %>



どのように表示されるようになったから確認してみます。
f:id:MrRadiology:20180305105519j:plain
注文が10件ずつの表示で全部で11ページに分割されました。


<<前  [TOP]  次>>