Agile Web Development with Rails, Edition 4

Agile Web Development with Rails, Edition 4

6.2 Iteration A2: Making Prettier Listings 2 Instant Gratification

6.1 Iteration A1: Creating the Products Maintenance Application

This section mostly covers database configuration options for those users that insist on using MySQL. SQLite3 users will skip most of it.

Create the application.

bundle exec /home/rubys/git/rails/railties/bin/rails new depot --skip-bundle --dev
      create  
      create  README.rdoc
      create  Rakefile
      create  config.ru
      create  .gitignore
      create  Gemfile
      create  app
      create  app/assets/images/rails.png
      create  app/assets/javascripts/application.js
      create  app/assets/stylesheets/application.css
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/mailers
      create  app/models
      create  app/views/layouts/application.html.erb
      create  app/mailers/.gitkeep
      create  app/models/.gitkeep
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/backtrace_silencers.rb
      create  config/initializers/inflections.rb
      create  config/initializers/mime_types.rb
      create  config/initializers/secret_token.rb
      create  config/initializers/session_store.rb
      create  config/initializers/wrap_parameters.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  doc
      create  doc/README_FOR_APP
      create  lib
      create  lib/tasks
      create  lib/tasks/.gitkeep
      create  lib/assets
      create  lib/assets/.gitkeep
      create  log
      create  log/.gitkeep
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/favicon.ico
      create  public/index.html
      create  public/robots.txt
      create  script
      create  script/rails
      create  test/fixtures
      create  test/fixtures/.gitkeep
      create  test/functional
      create  test/functional/.gitkeep
      create  test/integration
      create  test/integration/.gitkeep
      create  test/unit
      create  test/unit/.gitkeep
      create  test/performance/browsing_test.rb
      create  test/test_helper.rb
      create  tmp/cache
      create  tmp/cache/assets
      create  vendor/assets/javascripts
      create  vendor/assets/javascripts/.gitkeep
      create  vendor/assets/stylesheets
      create  vendor/assets/stylesheets/.gitkeep
      create  vendor/plugins
      create  vendor/plugins/.gitkeep
bundle install
Using rake (0.9.2.2) 
Using i18n (0.6.1) 
Using multi_json (1.3.6) 
Using activesupport (3.2.8) 
Using builder (3.0.3) 
Using activemodel (3.2.8) 
Using erubis (2.7.0) 
Using journey (1.0.4.20120614141756) 
Using rack (1.4.1) 
Using rack-cache (1.2) 
Using rack-test (0.6.2) 
Using hike (1.2.1) 
Using tilt (1.3.3) 
Using sprockets (2.7.0) 
Using actionpack (3.2.8) 
Using mime-types (1.19) 
Using polyglot (0.3.3) 
Using treetop (1.4.11) 
Using mail (2.4.4) 
Using actionmailer (3.2.8) 
Using arel (3.0.2.20120221150532) 
Using tzinfo (0.3.33) 
Using activerecord (3.2.8) 
Using activeresource (3.2.8) 
Using bundler (1.2.0) 
Using coffee-script-source (1.3.3) 
Using execjs (1.4.0) 
Using coffee-script (2.2.0) 
Using rack-ssl (1.3.2) 
Using json (1.7.5) 
Using rdoc (3.12) 
Using thor (0.16.0) 
Using railties (3.2.8) 
Using coffee-rails (3.2.2) 
Using jquery-rails (2.1.3) 
Using rails (3.2.8) 
Using sass (3.2.1) 
Using sass-rails (3.2.5) 
Using sqlite3 (1.3.6) 
Using uglifier (1.3.0) 
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

Look at the files created.

ls -p
app/	   db/	    Gemfile.lock  public/      script/	vendor/
config/    doc/     lib/	  Rakefile     test/
config.ru  Gemfile  log/	  README.rdoc  tmp/

Generate scaffolding for a real model, modify a template, and do our first bit of data entry.

Generating our first model and associated scaffolding

rails generate scaffold Product title:string description:text image_url:string price:decimal
      invoke  active_record
      create    db/migrate/20121011071108_create_products.rb
      create    app/models/product.rb
      invoke    test_unit
      create      test/unit/product_test.rb
      create      test/fixtures/products.yml
      invoke  resource_route
       route    resources :products
      invoke  scaffold_controller
      create    app/controllers/products_controller.rb
      invoke    erb
      create      app/views/products
      create      app/views/products/index.html.erb
      create      app/views/products/edit.html.erb
      create      app/views/products/show.html.erb
      create      app/views/products/new.html.erb
      create      app/views/products/_form.html.erb
      invoke    test_unit
      create      test/functional/products_controller_test.rb
      invoke    helper
      create      app/helpers/products_helper.rb
      invoke      test_unit
      create        test/unit/helpers/products_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/products.js.coffee
      invoke    scss
      create      app/assets/stylesheets/products.css.scss
      invoke  scss
      create    app/assets/stylesheets/scaffolds.css.scss

Break lines for formatting reasons

edit app/controllers/products_controller.rb
class ProductsController < ApplicationController
  # GET /products
  # GET /products.json
  def index
    @products = Product.all
 
    respond_to do |format|
      format.html # index.html.erb
      format.json { render :json => @products }
    end
  end
 
  # GET /products/1
  # GET /products/1.json
  def show
    @product = Product.find(params[:id])
 
    respond_to do |format|
      format.html # show.html.erb
      format.json { render :json => @product }
    end
  end
 
  # GET /products/new
  # GET /products/new.json
  def new
    @product = Product.new
 
    respond_to do |format|
      format.html # new.html.erb
      format.json { render :json => @product }
    end
  end
 
  # GET /products/1/edit
  def edit
    @product = Product.find(params[:id])
  end
 
  # POST /products
  # POST /products.json
  def create
    @product = Product.new(params[:product])
 
    respond_to do |format|
      if @product.save
        format.html { redirect_to @product,
          :notice => 'Product was successfully created.' }
        format.json { render :json => @product, :status => :created,
          :location => @product }
      else
        format.html { render :action => "new" }
        format.json { render :json => @product.errors,
          :status => :unprocessable_entity }
      end
    end
  end
 
  # PUT /products/1
  # PUT /products/1.json
  def update
    @product = Product.find(params[:id])
 
    respond_to do |format|
      if @product.update_attributes(params[:product])
        format.html { redirect_to @product,
          :notice => 'Product was successfully updated.' }
        format.json { head :no_content }
      else
        format.html { render :action => "edit" }
        format.json { render :json => @product.errors,
          :status => :unprocessable_entity }
      end
    end
  end
 
  # DELETE /products/1
  # DELETE /products/1.json
  def destroy
    @product = Product.find(params[:id])
    @product.destroy
 
    respond_to do |format|
      format.html { redirect_to products_url }
      format.json { head :no_content }
    end
  end
end
edit app/views/products/index.html.erb
<h1>Listing products</h1>
 
<table>
  <tr>
    <th>Title</th>
    <th>Description</th>
    <th>Image url</th>
    <th>Price</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
 
<% @products.each do |product| %>
  <tr>
    <td><%= product.title %></td>
    <td><%= product.description %></td>
    <td><%= product.image_url %></td>
    <td><%= product.price %></td>
    <td><%= link_to 'Show', product %></td>
    <td><%= link_to 'Edit', edit_product_path(product) %></td>
    <td><%= link_to 'Destroy', product,
            :method => :delete, :data => { :confirm => 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>
 
<br />
 
<%= link_to 'New Product', new_product_path %>

Add precision and scale to the price

edit db/migrate/20121011071108_create_products.rb
class CreateProducts < ActiveRecord::Migration
  def change
    create_table :products do |t|
      t.string :title
      t.text :description
      t.string :image_url
      t.decimal :price, :precision => 8, :scale => 2
 
      t.timestamps
    end
  end
end

Apply the migration

rake db:migrate
mv 20121011071108_create_products.rb 20110711000001_create_products.rb
==  CreateProducts: migrating =================================================
-- create_table(:products)
   -> 0.0037s
==  CreateProducts: migrated (0.0040s) ========================================
 

Restart the server.

Get an (empty) list of products

get /products

Listing products

Title Description Image url Price

New Product

Show (and modify) one of the templates produced

edit app/views/products/_form.html.erb
<%= form_for(@product) do |f| %>
  <% if @product.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@product.errors.count, "error") %>
      prohibited this product from being saved:</h2>
 
      <ul>
      <% @product.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
 
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :description %><br />
    <%= f.text_area :description, :rows => 6 %>
  </div>
  <div class="field">
    <%= f.label :image_url %><br />
    <%= f.text_field :image_url %>
  </div>
  <div class="field">
    <%= f.label :price %><br />
    <%= f.text_field :price %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Create a product

get /products/new

New product





Back
post /products
You are being redirected.
get http://localhost:3000/products/1

Product was successfully created.

Title: CoffeeScript

Description: <p> CoffeeScript is JavaScript done right. It provides all of JavaScript's functionality wrapped in a cleaner, more succinct syntax. In the first book on this exciting new language, CoffeeScript guru Trevor Burnham shows you how to hold onto all the power and flexibility of JavaScript while writing clearer, cleaner, and safer code. </p>

Image url: cs.jpg

Price: 29.0

Edit | Back

Verify that the product has been added

get /products

Listing products

Title Description Image url Price
CoffeeScript <p> CoffeeScript is JavaScript done right. It provides all of JavaScript's functionality wrapped in a cleaner, more succinct syntax. In the first book on this exciting new language, CoffeeScript guru Trevor Burnham shows you how to hold onto all the power and flexibility of JavaScript while writing clearer, cleaner, and safer code. </p> cs.jpg 29.0 Show Edit Destroy

New Product

And, just to verify that we haven't broken anything

rake test
Loaded suite /home/rubys/.rvm/gems/ruby-1.8.7-p352/gems/rake-0.9.2.2/lib/rake/rake_test_loader
Started
 
Finished in 0.000512 seconds.
 
0 tests, 0 assertions, 0 failures, 0 errors
Loaded suite /home/rubys/.rvm/gems/ruby-1.8.7-p352/gems/rake-0.9.2.2/lib/rake/rake_test_loader
Started
.......
Finished in 0.467387 seconds.
 
7 tests, 10 assertions, 0 failures, 0 errors

6.2 Iteration A2: Making Prettier Listings 2 Instant Gratification