Visualizar el catálogo

‡ Para crear una visualización de la lista de productos
± tenemos ya un controlador
‡ Controlador1
± permite al vendedor administrar la aplicación

± Creamos otro controlador
‡ Controlador2
± interactúe con los clientes

Crear controlador
‡ ruby script/generate controller controlador2 index
± pedimos crear un controlador con el script generate
‡ creamos una clase Controlador2Controller ‡ en el fichero controlador2_controller ‡ contiene un único método de acción
± index » en los servidores Web, si llamas a un controlador Rails sin especificar la acción, Rails llama por defecto a la acción index

controlador2_controller.rb
‡ class Controlador2Controller < ApplicationController ‡ def index ‡ end ‡ end

‡ Arrancas el servidor
± carrito2> ruby script/server webrick ± entramos en ± http://localhost:3000/controlador2 ± vemos

‡ Controlador2#index ‡ Find me in app/views/controlador2/index.html.erb

‡ Todo está conectado correctamente
± la página nos dice incluso dónde encontrar el fichero de la plantilla que diseña esta página

‡ Debemos llevar la lista de los productos fuera de la BD y hacerla disponible al código en la vista que visualizará la tabla
± debemos cambiar el método index del controlador en el fichero controlador2_controller.rb

controlador2_controller.rb
‡ class Controlador2Controller < ApplicationController ‡ def index ‡ @products = Product.encontrarproductos end ‡ end

‡ así no puede funcionar ‡ debemos definir el método encontrarproductos en el modelo product.rb ‡ utilizaremos el metodo find de Rails

el modelo product.rb
‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ class Product < ActiveRecord::Base validates_presence_of :title, :description, :image_url validates_numericality_of :price validates_uniqueness_of :title validate :precio_valido validates_format_of :image_url, :with => %r{\.(gif|jpg|png)$}, :message => 'deben tener un formato valido' protected def precio_valido errors.add(:price, 'no puedes tener precio menor 0') if price.nil? || price < 5.01 end

‡ ‡
‡ end

def self.encontrarproductos find(:all, :order => "title") end

‡ método find
± parametro :all
‡ dice a Rails que queremos todas las filas que concuerden con la condición que se ha pasado

± parametro :order
‡ indica el orden de presentación de elementos

‡ el metodo find devuelve un array que contiene un objeto Product para cada fila que devuelve la BD
± el metodo opcional :order para ordenar las filas por título ± el método encontrarproductos
‡ devuelve el array al controlador

± hemos convertido el método encontrarproductos en un método de clase
‡ poniendo delante self ‡ lo llamamos en la clase de forma global
± NO en una instancia en particular ± Product.encontrarproductos

‡ ahora debemos cambiar la plantilla de la vista
± app/views/controlador2/index.html.erb

index.html.erb
‡ <h1>Catalogo de productos - Controlador 2</h1> ‡ <% for product in @products -%> ‡ <div class="entrada"> ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡

<%= image_tag(product.image_url) %> <h3><%= h product.title %></h3> <%= product.description%> <div class="lineaprecio"> <span class="precio"><%= product.price %> </span> <div> </div> <%end%>

‡ el metodo h(string)
± elimina cualquier elemento HTML en el titulo del producto ± no lo utilizamos para suprimir la descripción

‡ el método auxiliar image_tag
± se genera una etiqueta HTML <img> que utiliza como argumento la fuente de la foto

‡ las paginas de un sitio Web comparten el mismo diseño
± plantilla estándar para situar el contenido ± en Rails añadimos diseños
‡ es una plantilla en la que se pueden introducir contenidos adicionales

Crear diseños en Rails
‡ podemos crear un archivo de plantilla
± app/views/layouts ± el nombre del fichero con el mismo nombre que el controlador
‡ todas las vistas que presente ese controlador tendrán un diseño por defecto
± nuestro controlador se llama controlador2 ± al diseño le llamamos » controlador2.html.erb

controlador2.html.erb
‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title> Catalogo de productos </title> <%= stylesheet_link_tag 'estilo1', :media => "all" %> </head> <body id="padre"> <div id="banner"> <%= image_tag("logo.png") %> <%= @page_title || "Catalogo nuevo de productos" %> </div> <div id="menu"> <div id="side"> <a href="http://www.google.com">buscador</a><br/> <a href="http://www.google.com">buscador2</a><br/> <a href="http://www.google.com">buscador3</a><br/> </div> <div id="principal"> <%= yield :layout %> </div> </div> </body> </html>

‡ <%= stylesheet_link_tag 'estilo1', :media => "all" %>
± metodo auxiliar de Rails para generar una etiqueta <link> hacia una hoja de estilos

‡ <%= @page_title || "Catalogo nuevo de productos" %>
± el encabezado de la pagina con el valor de la variable de instancia @page_title

‡ <%= yield :layout %>
± llamamos a yield pasandole el nombre :layout ± Rails sustituye el contenido de la página
‡ lo que ha generado la vista solicitada por la solicitud ‡ en nuestro caso será la página del catalogo que ha generado index.html.erb

C:\trabajo\carrito2\public\stylesheets
‡ Creamos el fichero css para aplicar un estilo

‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡

@charset "utf-8"; /* CSS Document */ body{ background-color:#CCF;}

h1 { font: 150% sans-serif; color: #226; border-bottom: 3px dotted #77d; } /* Styles for products/index */ #product-list table { border-collapse: collapse; } #product-list table tr td { padding: 5px; vertical-align: top; } #product-list .list-image { width: 60px; height: 70px; } #product-list .list-description { width: 60%; } #product-list .list-description dl { margin: 0; } #product-list .list-description dt { color: #244; font-weight: bold; font-size: larger; }

Formato al precio
‡ la BD almacena el precio como un número ‡ para mostrarlo como moneda
± damos formato al precio de la vista ± <span class= precio > <%= sprintf( $%0.02f , product.price) %> </span>
‡ debe funcionar ‡ integra en la vista el formato de la moneda ‡ si después queremos internacionalizar la aplicación
± complicamos el mantenimiento

‡ más sencillo usar un método auxiliar para dar formato al precio con una moneda ‡ Rails tiene una integrada
± number_to_currency ± usamos este auxiliar en la vista
‡ en la plantilla del indice
± <span class="precio"><%= product.price %> </span> ± por ± <span class="precio"><%= number_to_currency(product.price) %> </span>

Vinculo Añadir al carrito
‡ Crear un vinculo para Añadir al carrito
± hemos usado el método auxiliar link_to para generar vinculos desde una vista Rails hacia otra acción en el controlador
‡ genera una etiqueta HTML <a href ‡ genera solicitud GET hacia el servidor
± solicitud GET NO cambia el estado de nada en el servidor ± solo se usan para recoger info

‡ podemos utilizar
± :method => :delete

‡ tb podemos usar el método
± button_to
‡ vincula tb una vista a la aplicación ‡ pero generando un formulario HTML que contiene solo un botón ‡ genera solicitud HTTP Post

‡ modificamos la página index en la vista para nuestro controlador

C:\trabajo\carrito2\app\views\control ador2/index.html.erb
‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ <h1>Catalogo de productos - Controlador 2</h1> <% for product in @products -%> <div class="entrada"> <%= image_tag(product.image_url) %> <h3><%= h product.title %></h3> <%= product.description%> <div class="lineaprecio"> <span class="precio"><%= number_to_currency(product.price) %> </span> <div> </div> <%end%>

‡ <%= button_to "Añadir al carrito" %>

Diseño final
‡ como div y form son ambos de tipo bloque
± aparecen en diferentes lineas ± solución
‡ en css los pasamos a display:inline

‡ #principal .entry form, #principal .entry form div{ ‡ ‡ display:inline; ‡ }