Agile Web Development with Rails, Edition 5

8.2 Iteration C2: Add a Page Layout 7.3 Playtime

8.1 Iteration C1: Create the Catalog Listing

Show the model, view, and controller working together.

Create a second controller with a single index action

rails generate controller Store index
      create  app/controllers/store_controller.rb
       route  get 'store/index'
      invoke  erb
      create    app/views/store
      create    app/views/store/index.html.erb
      invoke  test_unit
      create    test/controllers/store_controller_test.rb
      invoke  helper
      create    app/helpers/store_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/store.coffee
      invoke    scss
      create      app/assets/stylesheets/store.scss

Route the 'root' of the site to the store

edit config/routes.rb
Rails.application.routes.draw do
  root 'store#index', as: 'store_index'
 
  resources :products
  # For details on the DSL available within this file, see
  # http://guides.rubyonrails.org/routing.html
end

Demonstrate that everything is wired together

get /

Store#index

Find me in app/views/store/index.html.erb

In the controller, get a list of products from the model

edit app/controllers/store_controller.rb
class StoreController < ApplicationController
  def index
    @products = Product.order(:title)
  end
end

In the view, display a list of products

edit app/views/store/index.html.erb
<p id="notice"><%= notice %></p>
 
<h1>Your Pragmatic Catalog</h1>
 
<% @products.each do |product| %>
  <div class="entry">
    <%= image_tag(product.image_url) %>
    <h3><%= product.title %></h3>
    <%= sanitize(product.description) %>
    <div class="price_line">
      <span class="price"><%= product.price %></span>
    </div>
  </div>
<% end %>

Add some basic style

edit app/assets/stylesheets/store.scss
// Place all the styles related to the Store controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
 
.store {
  h1 {
    margin: 0;
    padding-bottom: 0.5em;
    font:  150% sans-serif;
    color: #226;
    border-bottom: 3px dotted #77d;
  }
 
  /* An entry in the store catalog */
  .entry {
    overflow: auto;
    margin-top: 1em;
    border-bottom: 1px dotted #77d;
    min-height: 100px;
 
    img {
      width: 80px;
      margin-right: 5px;
      margin-bottom: 5px;
      position: absolute;
    }
 
    h3 {
      font-size: 120%;
      font-family: sans-serif;
      margin-left: 100px;
      margin-top: 0;
      margin-bottom: 2px;
      color: #227;
    }
 
    p, div.price_line {
      margin-left: 100px;
      margin-top: 0.5em; 
      margin-bottom: 0.8em; 
    }
 
    .price {
      color: #44a;
      font-weight: bold;
      margin-right: 3em;
    }
  }
}

Show our first (ugly) catalog page

get /

Your Pragmatic Catalog

Dcbang

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.0
Adrpo

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.0
7apps

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.0

8.2 Iteration C2: Add a Page Layout 7.3 Playtime