Agile Web Development with Rails, Edition 5

12.2 Iteration G2: Atom Feeds 11.5 Iteration F5: Broadcasting Updates

12.1 Iteration H1: Capturing an Order

Create a model to contain orders

rails generate scaffold Order name address:text email pay_type:integer
      invoke  active_record
      create    db/migrate/20171113144145_create_orders.rb
      create    app/models/order.rb
      invoke    test_unit
      create      test/models/order_test.rb
      create      test/fixtures/orders.yml
      invoke  resource_route
       route    resources :orders
      invoke  scaffold_controller
      create    app/controllers/orders_controller.rb
      invoke    erb
      create      app/views/orders
      create      app/views/orders/index.html.erb
      create      app/views/orders/edit.html.erb
      create      app/views/orders/show.html.erb
      create      app/views/orders/new.html.erb
      create      app/views/orders/_form.html.erb
      invoke    test_unit
      create      test/controllers/orders_controller_test.rb
      create      test/system/orders_test.rb
      invoke    helper
      create      app/helpers/orders_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/orders/index.json.jbuilder
      create      app/views/orders/show.json.jbuilder
      create      app/views/orders/_order.json.jbuilder
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/orders.coffee
      invoke    scss
      create      app/assets/stylesheets/orders.scss
      invoke  scss
   identical    app/assets/stylesheets/scaffolds.scss

Create a migration to add an order_id column to line_items

rails generate migration add_order_id_to_line_item order_id:integer
      invoke  active_record
      create    db/migrate/20171113144146_add_order_id_to_line_item.rb

Apply both migrations

rails db:migrate
mv 20171113144145_create_orders.rb 20171113000007_create_orders.rb
mv 20171113144146_add_order_id_to_line_item.rb 20171113000008_add_order_id_to_line_item.rb
== 20171113000007 CreateOrders: migrating =====================================
-- create_table(:orders)
   -> 0.0006s
== 20171113000007 CreateOrders: migrated (0.0006s) ============================
 
== 20171113000008 AddOrderIdToLineItem: migrating =============================
-- add_column(:line_items, :order_id, :integer)
   -> 0.0004s
== 20171113000008 AddOrderIdToLineItem: migrated (0.0004s) ====================

Add a Checkout button to the cart

edit app/views/carts/_cart.html.erb
<article>
  <% if notice %>
    <aside id="notice"><%= notice %></aside>
  <% end %>
 
  <h2>Your Cart</h2>
  <table>
 
    <%= render(cart.line_items) %>
    <tfoot>
      <tr>
        <th colspan="2">Total:</th>
        <td class="price"><%= number_to_currency(cart.total_price) %></td>
      </tr>
    </tfoot>
  </table>
 
  <div class="actions">
  <%= button_to 'Empty cart', cart,
                method: :delete,
                data: { confirm: 'Are you sure?' } %>
 
 
  <%= button_to 'Checkout', new_order_path,
                method: :get,
                class: "checkout"%>
  </div>
</article>

Style the new button

edit app/assets/stylesheets/carts.scss
// Place all the styles related to the Carts controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
 
.carts {
  table {
    border-collapse: collapse;
  }
  td {
    padding: 0.5em;
  }
  td.quantity {
    white-space: nowrap;
  }
  td.quantity::after {
    content: " ×";
  }
  td.price {
    font-weight: bold;
    text-align: right;
  }
  tfoot {
    th, td.price {
      font-weight: bold;
      padding-top: 1em;
    }
    th {
      text-align: right;
    }
    td.price {
      border-top: solid thin;
    }
  }
 
  .actions {
    text-align: right;
    form {
      display: inline;
      input[type="submit"] {
        background-color: #881;
        border-radius: 0.354em;
        border: solid thin #441;
        color: white;
        font-size: 1em;
        padding: 0.354em 1em;
      }
      input[type="submit"]:hover {
        background-color: #992;
      }
      input[type="submit"].checkout {
        background-color: #bfb;
        color: black;
        font-weight: bold;
      }
      input[type="submit"].checkout:hover {
        background-color: #efe;
      }
    }
  }
}

Return a notice when checking out an empty cart

edit app/controllers/orders_controller.rb
class OrdersController < ApplicationController
  include CurrentCart
  before_action :set_cart, only: [:new, :create]
  before_action :ensure_cart_isnt_empty, only: :new
  before_action :set_order, only: [:show, :edit, :update, :destroy]
 
  # GET /orders
  #...
 
  private
     def ensure_cart_isnt_empty
       if @cart.line_items.empty?
         redirect_to store_index_url, notice: 'Your cart is empty'
       end
     end
end

Modify tests to ensure that there is an item in the cart

edit test/controllers/orders_controller_test.rb
  test "requires item in cart" do
    get new_order_url
    assert_redirected_to store_index_path
    assert_equal flash[:notice], 'Your cart is empty'
  end
 
  test "should get new" do
    post line_items_url, params: { product_id: products(:ruby).id }
 
    get new_order_url
    assert_response :success
  end

Modify the template for new orders

edit app/views/orders/new.html.erb
<section class="depot_form">
  <h1>Please Enter Your Details</h1>
  <%= render 'form', order: @order %>
</section>

Add payment types to the order

edit app/models/order.rb
class Order < ApplicationRecord
  enum pay_type: {
    "Check"          => 0, 
    "Credit card"    => 1, 
    "Purchase order" => 2
  }
end

Modify the partial used by the template

edit app/views/orders/_form.html.erb
<%= form_with(model: order, local: true) do |form| %>
  <% if order.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(order.errors.count, "error") %>
      prohibited this order from being saved:</h2>
 
      <ul>
      <% order.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
 
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name, id: :order_name, size: 40 %>
  </div>
 
  <div class="field">
    <%= form.label :address %>
    <%= form.text_area :address, id: :order_address, rows: 3, cols: 40 %>
  </div>
 
  <div class="field">
    <%= form.label :email %>
    <%= form.email_field :email, id: :order_email, size: 40 %>
  </div>
 
  <div class="field">
    <%= form.label :pay_type %>
    <%= form.select :pay_type, Order.pay_types.keys, id: :order_pay_type,
                  prompt: 'Select a payment method' %>
  </div>
 
  <div class="actions">
    <%= form.submit 'Place Order' %>
  </div>
<% end %>

Add some CSS

edit app/assets/stylesheets/application.scss
.depot_form {
  padding: 0 1em;
  h1 {
    font-size: 1.99em;
    line-height: 1.41em;
    margin-bottom: 0.5em;
    padding: 0;
  }
  .field, .actions {
    margin-bottom: 0.5em;
    padding: 0;
  }
  .actions {
    text-align: right;
    padding: 1em 0;
  }
  input, textarea, select, option {
    border: solid thin #888;
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.5em;
    width: 100%;
  }
  label {
    padding: 0.5em 0;
  }
  input[type="submit"] {
    background-color: #bfb;
    border-radius: 0.354em;
    border: solid thin #888;
    color: black;
    font-size: 1.41em;
    font-weight: bold;
    padding: 0.354em 1em;
  }
  input[type="submit"]:hover {
    background-color: #9d9;
  }
  // Also, clean up the error styling
  #error_explanation {
    background-color: white;
    border-radius: 1em;
    border: solid thin red;
    margin-bottom: 0.5em;
    padding: 0.5em;
    width: 100%;
    h2 {
      background: none;
      color: red;
      font-size: 1.41em;
      line-height: 1.41em;
      padding: 1em;
    }
    ul {
      margin-top: 0;
      li {
        color: red;
        font-size: 1em;
      }
    }
  }
  .field_with_errors {
    background: none;
    color: red;
    width: 100%;
    label {
      font-weight: bold;
    }
    label::before {
      content: "! ";
    }
    input,textarea {
      background: pink;
    }
  }
}
get /
The Pragmatic Bookshelf

Your Pragmatic Catalog

  • Rails, Angular, Postgres, and Bootstrap

    Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

    $45.00

  • Ruby Performance Optimization

    Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

    $46.00

  • Seven Mobile Apps in Seven Weeks

    Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

    $26.00 
post /line_items?product_id=2
You are being redirected. 
get http://localhost:3000/
The Pragmatic Bookshelf

Your Pragmatic Catalog

  • Rails, Angular, Postgres, and Bootstrap

    Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

    $45.00

  • Ruby Performance Optimization

    Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

    $46.00

  • Seven Mobile Apps in Seven Weeks

    Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

    $26.00 
get /
The Pragmatic Bookshelf

Your Pragmatic Catalog

  • Rails, Angular, Postgres, and Bootstrap

    Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

    $45.00

  • Ruby Performance Optimization

    Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

    $46.00

  • Seven Mobile Apps in Seven Weeks

    Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

    $26.00

Validate that required fields are present

edit app/models/order.rb
class Order < ApplicationRecord
  # ...
  validates :name, :address, :email, presence: true
  validates :pay_type, inclusion: pay_types.keys
end

Update the test data in the orders fixture

edit test/fixtures/orders.yml
# Read about fixtures at
# http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
 
one:
  name: Dave Thomas
  address: MyText
  email: dave@example.org
  pay_type: Check
 
two:
  name: MyString
  address: MyText
  email: MyString
  pay_type: 1

Move a line item from a cart to an order

edit test/fixtures/line_items.yml
# Read about fixtures at
# http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
 
one:
  product: two
  cart: one
 
two:
  product: ruby
  order: one

Define an optional relationship from the line item to the order

edit app/models/line_item.rb
class LineItem < ApplicationRecord
  belongs_to :order, optional: true
  belongs_to :product, optional: true
  belongs_to :cart
 
  def total_price
    product.price * quantity
  end
end

Define a relationship from the order to the line item

edit app/models/order.rb
class Order < ApplicationRecord
  has_many :line_items, dependent: :destroy
  # ...
end

Add line item to order, destroy cart, and redisplay catalog page

edit app/controllers/orders_controller.rb
  def create
    @order = Order.new(order_params)
    @order.add_line_items_from_cart(@cart)
 
    respond_to do |format|
      if @order.save
        Cart.destroy(session[:cart_id])
        session[:cart_id] = nil
        format.html { redirect_to store_index_url, notice: 
          'Thank you for your order.' }
        format.json { render :show, status: :created,
          location: @order }
      else
        format.html { render :new }
        format.json { render json: @order.errors,
          status: :unprocessable_entity }
      end
    end
  end

Implement add_line_items_from_cart

edit app/models/order.rb
class Order < ApplicationRecord
  # ...
  def add_line_items_from_cart(cart)
    cart.line_items.each do |item|
      item.cart_id = nil
      line_items << item
    end
  end
end

Modify the test to reflect the new redirect

edit test/controllers/orders_controller_test.rb
  test "should create order" do
    assert_difference('Order.count') do
      post orders_url, params: { order: { address: @order.address,
        email: @order.email, name: @order.name,
        pay_type: @order.pay_type } }
    end
 
    assert_redirected_to store_index_url
  end

take a look at the validation errors

get /orders/new
The Pragmatic Bookshelf

Please Enter Your Details

post /orders
The Pragmatic Bookshelf

Please Enter Your Details

4 errors prohibited this order from being saved:

  • Name can't be blank
  • Address can't be blank
  • Email can't be blank
  • Pay type is not included in the list
get /
The Pragmatic Bookshelf

Your Pragmatic Catalog

  • Rails, Angular, Postgres, and Bootstrap

    Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

    $45.00

  • Ruby Performance Optimization

    Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

    $46.00

  • Seven Mobile Apps in Seven Weeks

    Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

    $26.00

process an order

get /orders/new
The Pragmatic Bookshelf

Please Enter Your Details

post /orders
You are being redirected. 
get http://localhost:3000/
The Pragmatic Bookshelf

Your Pragmatic Catalog

  • Rails, Angular, Postgres, and Bootstrap

    Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

    $45.00

  • Ruby Performance Optimization

    Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

    $46.00

  • Seven Mobile Apps in Seven Weeks

    Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

    $26.00

look at the underlying database

sqlite3> select * from orders
        id = 1
      name = Dave Thomas
   address = 123 Main St
     email = customer@example.com
  pay_type = 0
created_at = 2017-11-13 14:41:47.723760
updated_at = 2017-11-13 14:41:47.723760
sqlite3> select * from line_items
        id = 17
product_id = 2
   cart_id = 
created_at = 2017-11-13 14:41:39.882850
updated_at = 2017-11-13 14:41:47.725063
  quantity = 2
     price = 45
  order_id = 1

hide the notice when adding items to the cart

12.2 Iteration G2: Atom Feeds 11.5 Iteration F5: Broadcasting Updates