jueves, 31 de julio de 2014

Descarga la última versión del framework

Accede a la página de jQuery para descargar la última versión del framework. En el momento de escribir este artículo la release actual es la 1.3.2, y con la que hemos realizado estos ejemplos. Sin embargo, puede que haya publicado una nueva versión que mejore la actual. 
Dan dos posibilidades para descargar, una que le llaman PRODUCTION, que es la adecuada para páginas web en producción, puesto que está minimizada y ocupa menos espacio, con lo que la carga de nuestro sitio será más rápida. La otra posibilidad es descargar la versión que llaman DEVELPOMENT, que está con el código sin comprimir, con lo que ocupa más espacio, pero se podrá leer la implementación de las funciones del framework, que puede ser interesante en etapa de desarrollo, porque podremos bucear en el código de jQuery por si tenemos que entender algún asunto del trabajo con el framework. 
Verás que la descarga es un archivo js que contiene el código completo del framework. Coloca el archivo en una carpeta en tu ordenador para hacer las pruebas.

miércoles, 30 de julio de 2014

Pasos para utilizar jQuery en tu página web

Una descripción de la puesta en marcha de tu primer script jQuery, en tu propia página web, paso a paso. 
En este artículo te vamos a explicar cómo comenzar a utilizar jQuery en tus páginas web, paso a paso, para que puedas hacer tu primer script jQuery y así comprender los fundamentos de uso de este framework Javascript. En este punto estaría bien que sepas lo que es jQuery, lo que ha sido explicado ya en el Manual de jQuery que venimos publicando en DesarrolloWeb.com. 
La idea es que puedas ir haciendo tú mismo los pasos que vamos a relatar, para que compruebes tú mismo lo sencillo que es comenzar a utilizar jQuery. Este artículo sigue el esquema con el que los propios creadores de jQuery enseñan a utilizar su producto, así que está directamente inspirado en la documentación de jQuery.

martes, 29 de julio de 2014

Demo 2 de jQuery

En este otro ejemplo vamos a ver algo un poquito más complejo. Bueno, realmente no tiene mucha mayor complejidad, pero estamos utilizando jQuery de una manera un poco distinta, que requiere algo más de código por nuestra parte. Ahora vamos a tener dos capas en nuestra página. Una capa estará siempre visible y otra capa aparecerá inicialmente oculta y la vamos a mostrar u ocultar dependiendo de si el usuario coloca el ratón encima de la capa que está siempre visible. 
Para hacerse una idea exacta de nuestro ejemplo puedes verlo en una ventana aparte. En este segundo ejemplo tenemos este código HTML, con las dos capas.

<div id="capa" style="padding: 10px; background-color: #ff8800;">Pon el ratón encima de esta
capa</div>
<br>
<div id="mensaje" style="display: none;">Has puesto el ratón encima!! <br>(Ahora quítalo de la
capa)</div>

Ahora vamos a tener un código Javascript con jQuery que defina los eventos del usuario, para cuando sitúa el ratón dentro o fuera de la primera capa.

$("#capa").mouseenter(function(evento){
$("#mensaje").css("display", "block");
});
$("#capa").mouseleave(function(evento){
$("#mensaje").css("display", "none");
});
De esta sencilla manera, hemos creado dos eventos en el DIV con id="capa". Además, hemos definido el código de los eventos por medio de funciones, que se encargarán de mostrar o ocultar la segunda capa con id="mensaje".

$("#mensaje").css("display", "block");

Esto nos selecciona la capa con id "mensaje" y con el método css() indicamos que queremos cambiar el atributo "display" al valor "block" de ese elemento.

$("#mensaje").css("display", "none");

Esta otra línea muy similar, simplemente cambia el "display" a "none" para ocultar el elemento.
Esperamos que estos dos ejemplos te hayan servido para ver rápidamente algunas cosas que se pueden hacer con jQuery con muy poco esfuerzo y que funcionan en todos los navegadores.

lunes, 28 de julio de 2014

Demo 1 de jQuery

Para empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un botón, cambiaremos el texto y al pulsar el otro pondremos otro texto distinto. 
Podemos ver el ejemplo en marcha en una página aparte. En este ejemplo tenemos una capa que tiene este código

<div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botón</div>

Luego tenemos dos botones con estos códigos:

<input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón <b>A</b>')">
<input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el botón <b>B</b>')">


Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno) que ejecutan una instrucción Javascript cuando se hace clic sobre ellos. La instrucción está en Javascript, pero hace uso de algunas herramientas disponibles en jQuery para trabajo con los elementos de la página. En este caso, por explicarlo rápidamente, se hace una selección del elemento DIV de la capa y luego se ejecuta un método sobre él para cambiar el contenido HTML del elemento.

domingo, 27 de julio de 2014

Demo muy simple de uso de jQuery

Con objetivo de que los lectores puedan hacerse una rápida idea de las posibilidades de jQuery, escribiendo unas brevísim líneas de código Javascript, vamos a publicar un par de ejemplos bien simples que nos ilustren, pero sin complicarnos demasiado. Nos servirán para la introducción a jQuery que estamos publicando en el Manual de jQuery.
La idea de este artículo no es explicar las funcionalidades que vamos a demostrar, sino ver el poco código que hemos tenido que escribir para realizar unos scripts con dinamismos sencillos. Quizás los scripts en si no digan mucho a un lector poco experimentado, pero los que ya han tenido contacto con los pormenores que hay que seguir para hacer estos efectos, de manera que sean compatibles con todos los navegadores, sabrán que jQuery nos ha simplificado mucho nuestra tarea. Así pues, no te preocupes demasiado con los detalles de estos códigos, que los explicaremos en DesarrolloWeb.com más adelante con detalle.

viernes, 25 de julio de 2014

jQuery, es para mi?

Si estás interesado en enriquecer tu página web con componentes de la llamada Web 2.0, como efectos dinámicos, Ajax, interacción, interfaces de usuario avanzadas, etc., jQuery es una herramienta imprescindible para desarrollar todas estas cosas sin tener que complicarte con los niveles más bajos del desarrollo, ya que muchas funcionalidades ya están implementadas, o bien las librerías del framework te permitirán realizar la programación mucho más rápida y libre de errores. 
Ahora bien, todas estas mejoras de la web 2.0, que en un principio puede ser muy atractivas, también tienen un coste en tiempo de desarrollo de los proyectos. Sin un framework como jQuery, el tiempo de creación y depuración de todos esos componentes dinámicos sería mucho mayor, pero aun así nadie dice que todo sea instalar el sistema y empezar correr. Sin embargo, lo más complicado de jQuery es aprender a usarlo, igual que pasa con cualquier otro framework Javascript. Requerirá del desarrollador habilidades avanzadas de programación, así como el conocimiento, al menos básico, de la programación orientada a objetos. Una vez aprendido las ventajas de utilizarlo compensarán más que de sobra el esfuerzo. 
Esperamos que con este Manual de jQuery, que vamos a publicar en DesarrolloWeb.com puedas aprender lo necesario para desarrollar tus propios componentes dinámicos en Javascript con los que enriquecer tus aplicaciones. Por otra parte publicaremos artículos con ejemplos prácticos de JQuery que iremos colocando en nuestro taller de JQuery, para aquellos que ya tengan conocimientos en esta materia. Además tenemos un Videotutorial de jQuery con una colección de vídeos para aprender paso a paso el popular framework Javascript. Podemos conocer jQuery accediendo a la página de inicio del framework Javascript: http://jquery.com/

jueves, 24 de julio de 2014

Ventajas de jQuery con respecto a otras alternativas

Es importante comentar que jQuery no es el único framework que existe en el mercado. Existen varias soluciones similares que también funcionan muy bien, que básicamente nos sirven para hacer lo mismo. Como es normal, cada uno de los frameworks tiene sus ventajas e inconvenientes, pero jQuery es un producto con una aceptación por parte de los programadores muy buena y un grado de penetración en el mercado muy amplio, lo que hace suponer que es una de las mejores opciones. Además, es un producto serio, estable, bien documentado y con un gran equipo de desarrolladores a cargo de la mejora y actualización del framework. Otra cosa muy interesante es la dilatada comunidad de creadores de plugins o componentes, lo que hace fácil encontrar soluciones ya creadas en jQuery para implementar asuntos como interfaces de usuario, galerías, votaciones, efectos diversos, etc. 
Uno de los competidores de jQuery, del que hemos publicado ya en DesarrolloWeb.com un amplio manual para programadores, es Mootools, que también posee ventajas similares. Os dejo el enlace al Manual de Mootools, que también puede ser interesante, porque seguramente lo tengamos explicado con mayor detalle que jQuery.

miércoles, 23 de julio de 2014

Qué es jQuery

Para simplificar, podríamos decir que jQuery es un framework Javascript, pero quizás muchos de los lectores se preguntarán qué es un framework. Pues es un producto que sirve como base para la programación avanzada de aplicaciones, que aporta una serie de funciones o códigos para realizar tareas habituales. Por decirlo de otra manera, framework son unas librerías de código que contienen procesos o rutinas ya listos para usar. Los programadores utilizan los frameworks para no tener que desarrollar ellos mismos las tareas más básicas, puesto que en el propio framework ya hay implementaciones que están probadas, funcionan y no se necesitan volver a programar. Nota:si no sabes lo que es Javascript seguramente no te interesará este artículo, pero puedes aprenderlo también en DesarrolloWeb.com: Qué es Javascript 
Por ejemplo, en el caso que nos ocupa, jQuery es un framework para el lenguaje Javascript, luego será un producto que nos simplificará la vida para programar en este lenguaje. Como probablemente sabremos, cuando un desarrollador tiene que utilizar Javascript, generalmente tiene que preocuparse por hacer scripts compatibles con varios navegadores y para ello tiene que incorporar mucho código que lo único que hace es detectar el browser del usuario, para hacer una u otra cosa dependiendo de si es Internet Explorer, Firefox, Opera, etc. jQuery es donde más nos puede ayudar, puesto que implementa una serie de clases (de programación orientada a objetos) que nos permiten programar sin preocuparnos del navegador con el que nos está visitando el usuario, ya que funcionan de exacta forma en todas las plataformas más habituales. Así pues, este framework Javascript, nos ofrece una infraestructura con la que tendremos mucha mayor facilidad para la creación de aplicaciones complejas del lado del cliente. Por ejemplo, con jQuery obtendremos ayuda en la creación de interfaces de usuario, efectos dinámicos, aplicaciones que hacen uso de Ajax, etc. Cuando programemos Javascript con jQuery tendremos a nuestra disposición una interfaz para programación que nos permitirá hacer cosas con el navegador que estemos seguros que funcionarán para todos nuestros visitantes. Simplemente debemos conocer las librerías del framework y programar utilizando las clases, sus propiedades y métodos para la consecución de nuestros objetivos. Además, todas estas ventajas que sin duda son muy de agradecer, con jQuery las obtenemos de manera gratuita, ya que el framework tiene licencia para uso en cualquier tipo de plataforma, personal o comercial. Para ello simplemente tendremos que incluir en nuestras páginas un script Javascript que contiene el código de jQuery, que podemos descargar de la propia página web del producto y comenzar a utilizar el framework.
El archivo del framework ocupa unos 56 KB, lo que es bastante razonable y no retrasará mucho la carga de nuestra página (si nuestro servidor envía los datos comprimidos, lo que es bastante normal, el peso de jQuery será de unos 19 KB). Además, nuestro servidor lo enviará al cliente la primera vez que visite una página del sitio. En siguientes páginas el cliente ya tendrá el archivo del framework, por lo que no necesitará transferirlo y lo tomará de la caché. Con lo que la carga de la página sólo se verá afectada por el peso de este framework una vez por usuario. Las ventajas a la hora de desarrollo de las aplicaciones, así como las puertas que nos abre jQuery compensan extraordinariamente el peso del paquete.

Introducción a jQuery

Comenzamos por los capítulos más básicos sobre jQuery, que sirven para introducirnos en el desarrollo de una manera sencilla. Hablaremos sobre la metodología de trabajo con el framework Javascript de manera general. 

 Bienvenidos al manual sobre jQuery que vamos a publicar en DesarrolloWeb.com, con el que pretendemos clarificar a los usuarios el método de trabajo y programación de aplicaciones del lado del cliente, compatibles con todos los navegadores más comunes.

miércoles, 16 de julio de 2014

Comentarios - II

A continuación necesitamos un formulario para permitir a los usuarios crear comentarios para un artículo. Editaremos la vista de detalle de artículo:

# app/views/blog/detalles.rhtml
<h1><%= @articulo.titulo %></h1> <%=
simple_format(h(@articulo.cuerpo)) %> <p><em><%=
@articulo.created_at.strftime("%d-%m-%Y [%H:%M]") %></em></p>
<h2>Comentarios</h2> <% for comentario in @articulo.comentarios %>
<%= simple_format(h(comentario.texto)) %> <p><em><%=
comentario.nombre %></em>, <%= comentario.created_at.strftime("%d-
%m-%Y [%H:%M]") %></p> <% end %> <h3>Añade tu comentario a este
artículo!</h3> <% form_tag :action => 'comenta', :id => @articulo
do %> <p><label for="comentario_nombre">Nombre</label><br/> <%=
text_field 'comentario', 'nombre' %></p> <p><label
for="comentario_texto">Mensaje</label><br/> <%= text_area
'comentario', 'texto', {:rows => 5, :cols => 80} %></p> <%=
submit_tag 'Enviar comentario' %> <% end %>


En primer lugar, hemos creado una sección que muestra los comentarios del artículo. Fíjate en que encontrar los comentarios de un artículo es tan sencillo como usar @articulo.comentarios, y realizar un bucle sobre ellos. En segundo lugar, mostramos el formulario de creación de comentarios. La acción del formulario apunta a la acción "comenta", con el id del artículo actual. Dentro del formulario incluimos un área de texto para el nombre del usuario y un área de texto para el mensaje. Sólo nos falta definir la acción "comenta". Editaremos el controlador del blog y la añadimos al final:

# app/controllers/blog_controller.rb
class BlogController < ApplicationController def index @articulos
= Articulo.find(:all, :order => 'id DESC') end def detalles
@articulo = Articulo.find(params[:id]) end def comenta
Articulo.find(params[:id]).comentarios.create(params[:comentario])
redirect_to :action => :detalles, :id => params[:id] end end

La nueva acción "comenta" busca el artículo con el id indicado por parámetro, y en sus comentarios crea uno con los parámetros del comentario (nombre y texto).

martes, 15 de julio de 2014

Comentarios - I

Para finalizar el blog, necesitamos poder recoger y mostrar los comentarios que los visitantes quieran dejar en cada artículo. Es hora de crear un nuevo modelo: Comentario. Un comentario tendrá un texto, el nombre del usuario, la fecha de creación, y el id del artículo al que está asociado.

$ script/generate model Comentario exists app/models/ exists
test/unit/ exists test/fixtures/ create app/models/comentario.rb
create test/unit/comentario_test.rb create
test/fixtures/comentarios.yml exists db/migrate create
db/migrate/003_create_comentarios.rb

Editamos el fichero de migración:

# db/migrate/003_create_comentarios.rb
class CreateComentarios < ActiveRecord::Migration def self.up
create_table :comentarios do |t| t.column :texto, :text
t.column :nombre, :string t.column :created_at, :datetime t.column
:articulo_id, :integer end end def self.down
drop_table :comentarios end end
Ejecutamos la migración para crear la nueva tabla de comentarios...
$ rake db:migrate (in /home/jaime/blog) == CreateComentarios:
migrating =============================================== --
create_table(:comentarios) -> 0.1017s == CreateComentarios:
migrated (0.1019s) ======================================

 Hemos creado la nueva tabla de comentarios, que incluye un campo para relacionarlos con el artículo que le corresponda. Ahora hemos de indicar qué tipo de relación queremos entre artículos y comentarios, editando los modelos. Queremos que un artículo pueda tener varios comentarios, y que un comentario pertenezca a un único artículo, así que esto se traduce en lo siguiente:

# app/models/articulo.rb
class Articulo < ActiveRecord::Base has_many :comentarios end
# app/models/comentario.rb
class Comentario < ActiveRecord::Base belongs_to :articulo end

lunes, 14 de julio de 2014

El listado de artículos

A continuación, edita app/views/blog/detalles.rhtml para crear la ficha de artículo. El código en esta ocasión muestra el título del artículo sin ser enlace, el cuerpo sin cortar, y además abajo la fecha en el formato dia-mes-año [hora:minuto].

<h1><%= @articulo.titulo %></h1> <%=
simple_format(h(@articulo.cuerpo)) %> <p><em><%=
@articulo.created_at.strftime("%d-%m-%Y [%H:%M]") %></em></p>

jueves, 10 de julio de 2014

Parte pública del blog - I

Ya tenemos un interfaz web que nos permite administrar los artículos. Esta zona será privada (posteriormente podríamos ponerle protección por usuario y contraseña); necesitamos una parte pública que muestre los artículos. Vamos a crear para ello un nuevo controlador, que tendrá por el momento sólo 2 acciones: "index" (la página principal que mostrará los artículos) y "detalles" (la página que mostrará todos los detalles de un artículo):

$ script/generate controller Blog index detalles exists
app/controllers/ exists app/helpers/ create app/views/blog exists
test/functional/ create app/controllers/blog_controller.rb create
test/functional/blog_controller_test.rb create
app/helpers/blog_helper.rb create app/views/blog/index.rhtml
create app/views/blog/detalles.rhtml

Ahora abriremos el controlador, app/controllers/blog_controller.rb, y definiremos las dos acciones:

# app/controllers/blog_controller.rb
class BlogController < ApplicationController def index @articulos
= Articulo.find(:all, :order => 'id DESC') end def detalles
@articulo = Articulo.find(params[:id]) end end 

Como vemos, las acciones son muy sencillas: en index, creamos el objeto @articulos que contendrá todos (:all) los artículos, ordenados a la inversa (:order => 'id DESC') para mostrar los últimos arriba. La acción "detalles" creará el objeto @articulo buscándolo por el id pasado como parámetro. Ahora necesitamos crear las vistas, que cogerán estos objetos que hemos preparado en el controlador y mostrarán su información por pantalla. Comencemos por la vista correspondiente a la acción "index", editando el fichero app/views/blog/index.rhtml. Como verás es un simple bucle que recorre @articulos, y para cada uno muestra su título, cuerpo y una línea de separación al final. El título se muestra en forma de enlace a la acción "detalles", con el id del artículo en curso dentro del bucle. El cuerpo se muestra usando tres "helpers" de texto: "h" se encarga de asegurar que el html mostrado es seguro (para evitar buena parte de ataques); "truncate" se encarga de recortar el texto en caso de que sea más largo que la longitud especificada, y "simple_format" se encarga de dar un formato muy simple a un texto para mostrarlo como HTML, por ejemplo convirtiendo los saltos de línea en párrafos.

# app/views/blog/index.rhtml
<% for articulo in @articulos %> <h1><%= link_to
articulo.titulo, :action => :detalles, :id => articulo %></h1> <%=
simple_format(truncate(h(articulo.cuerpo),200)) %> <hr /> <% end
%>

martes, 8 de julio de 2014

Crear artículos - VI

Viéndolo en orden, vemos que define todos los métodos que necesitamos para administrar los artículos. No intentes comprender ahora toda la sintaxis empleada, quédate con la idea general: 
• index corresponde a la portada principal, que hace lo mismo que list y pinta ("render") lo mismo que esa acción. 
• list genera un listado paginado con los artículos. 
• show busca el artículo cuyo id se haya indicado por parámetro y lo almacena en la variable @articulo. • new prepara un nuevo Articulo, vacío. 
• create crea un nuevo Articulo con los parámetros que le hayan pasado y lo salva en la base. Si tiene éxito, prepara un mensaje de "OK" y redirige al listado; si no, redirige de vuelta a la acción "new". • update busca el artículo por el id indicado, y se intenta actualizar con los parámetros pasados. Si tiene éxito, redirige a "show", y si no, de vuelta a "edit". 
• destroy busca el artículo por id, lo elimina y redirige al listado. A cada acción del controlador le corresponde una vista. Encontrarás los ficheros correspondientes en app/views/admin. Si los abres, verás que son simples ficheros HTML, con partes de código Ruby embebido, usando las etiquetas <% y %>, similar a otros lenguajes de script para web. 
• list.rhtml muestra el listado de artículos. 
• show.rhtml muestra una ficha de artículo. 
• new.rhtml muestra la página para crear un artículo. 
• edit.rhtml muestra la página para editar un artículo. 
• _form.rhtml contiene el formulario de artículo, compartido por las acciones new y edit. Esto es lo que se conoce como "partial", ya que contiene un código parcial, que se inserta dentro de otro para completarse. Podemos modificar todos estos ficheros a nuestro antojo. Por ejemplo, prueba a cambiar list.rhtml por lo siguiente para tener un listado algo más sencillo:

# app/views/admin/list.rhtml
<h1>Los artículos de mi blog</h1> <% for articulo in
@articulos.reverse %> <h2><%= link_to articulo.titulo, :action
=> :show, :id => articulo %></h2> <p><%=
simple_format(h(articulo.cuerpo)) %></p> <p><%= link_to 'Borrar',
{ :action => 'destroy', :id => articulo }, :confirm => '¿Seguro?',
:method => :post %></p> <hr /> <% end %> <%= link_to 'Anterior', {
:page => @articulo_pages.current.previous } if
@articulo_pages.current.previous %> <%= link_to 'Siguiente',
{ :page => @articulo_pages.current.next } if
@articulo_pages.current.next %> <br /> <%= link_to
'Nuevo', :action => 'new' %>

lunes, 7 de julio de 2014

Crear artículos - V

Si ahora volvemos al interfaz de administración, veremos que estos dos nuevos campos se han incorporado a los listados y formularios, y funcionan como esperábamos. Evidentemente, los artículos creados con anterioridad no tendrán almacenadas las fechas puesto que estos campos no existían cuando los creamos. 
Los scaffolds dinámicos son de mucha utilidad para arrancar rápidamente e ir viendo cómo queda la aplicación mientras vamos pensando qué campos necesitamos, pero llega un momento en que es mejor disponer de los códigos en ficheros de manera que los podamos modificar a nuestro antojo para personalizar el aspecto (por ejemplo traducir las frases en inglés!). Para ello ejecutamos:

$ script/generate scaffold Articulo Admin exists app/controllers/
exists app/helpers/ exists app/views/admin exists
app/views/layouts/ exists test/functional/ dependency model exists
app/models/ exists test/unit/ exists test/fixtures/ identical
app/models/articulo.rb identical test/unit/articulo_test.rb
identical test/fixtures/articulos.yml create
app/views/admin/_form.rhtml create app/views/admin/list.rhtml
create app/views/admin/show.rhtml create app/views/admin/new.rhtml
create app/views/admin/edit.rhtml overwrite
app/controllers/admin_controller.rb? [Ynaqd] y force
app/controllers/admin_controller.rb overwrite
test/functional/admin_controller_test.rb? [Ynaqd] y force
test/functional/admin_controller_test.rb identical
app/helpers/admin_helper.rb create app/views/layouts/admin.rhtml
create public/stylesheets/scaffold.css

Vemos que el script nos solicita nuestro permiso para sobreescribir un par de ficheros existentes, que se crearon al generar el controlador. Contestaremos afirmativamente en ambos casos con "y". Examinemos rápidamente los códigos que nos ha generado este scaffold. Abre de nuevo el fichero app/controllers/admin_controller.rb:

# app/controllers/admin_controller.rb
class AdminController < ApplicationController def index list
render :action => 'list' end # GETs should be safe (see
http://www.w3.org/2001/tag/doc/whenToUseGet.html) verify :method
=> :post, :only => [ :destroy, :create, :update ], :redirect_to =>
{ :action => :list } def list @articulo_pages, @articulos =
paginate :articulos, :per_page => 10 end def show @articulo =
Articulo.find(params[:id]) end def new @articulo = Articulo.new
end def create @articulo = Articulo.new(params[:articulo]) if
@articulo.save flash[:notice] = 'Articulo was successfully
created.' redirect_to :action => 'list' else render :action =>
'new' end end def edit @articulo = Articulo.find(params[:id]) end
def update @articulo = Articulo.find(params[:id]) if
@articulo.update_attributes(params[:articulo]) flash[:notice] =
'Articulo was successfully updated.' redirect_to :action =>
'show', :id => @articulo else render :action => 'edit' end end def
destroy Articulo.find(params[:id]).destroy redirect_to :action =>
'list' end end

domingo, 6 de julio de 2014

Crear artículos - IV

Después de trastear un rato con este interfaz de administración, caemos en la cuenta de que nos gustaría que el modelo Articulo tuviera más campos. Nos gustaría poder almacenar la fecha y hora en que se creó el artículo, así como la fecha y hora de la última modificación. Para ello, lo que necesitamos es una nueva migración donde definamos los cambios en la base de datos:

$ script/generate migration fechas_en_articulos exists db/migrate
create db/migrate/002_fechas_en_articulos.rb

Editamos el archivo generado y lo dejamos así:

# db/migrate/002_fechas_en_articulos.rb
class FechasEnArticulos < ActiveRecord::Migration def self.up
add_column :articulos, :created_at, :datetime
add_column :articulos, :updated_at, :datetime end def self.down
remove_column :articulos, :created_at
remove_column :articulos, :updated_at end end


Este código se lee fácilmente: añadir a la tabla "articulos" dos columnas "created_at" y "updated_at" de tipo fecha y hora; y si nos echamos atrás, eliminar esas columnas. ¿Por qué le hemos puesto nombres en inglés a estos campos de fecha? Pues para aprovecharnos de que si lo hacemos así, Rails se encargará automáticamente de rellenar estos campos de fecha sin que tengamos que programarlo, cada vez que se cree o actualice un artículo. Para aplicar estos cambios ejecutaremos:

$ rake db:migrate (in /home/jaime/blog) == FechasEnArticulos:
migrating =============================================== --
add_column(:articulos, :created_at, :datetime) -> 0.0453s --
add_column(:articulos, :updated_at, :datetime) -> 0.0066s ==
FechasEnArticulos: migrated (0.0522s)
======================================

sábado, 5 de julio de 2014

Crear artículos - III

Acabamos de generar nuestro primer controlador, al que hemos bautizado como "admin". Por ahora está vacío, no hace nada, como podemos comprobar visitando http://localhost:3000/admin: nos indicará que ninguna acción ha respondido al método index. Para comenzar rápidamente, vamos a hacer uso de una característica de Rails llamada scaffold, que se traduce por "andamio", y es precisamente eso: al igual que al construir edificios uno se apoya en andamios al comienzo de la construcción, y posteriormente termina quitándolos cuando la construcción está avanzada y ya no los necesitamos. Un scaffold nos genera listados, formularios y lógica de proceso para las operaciones más comunes en una interfaz de administración: crear, visualizar, modificar y eliminar.
Edita el fichero app/controllers/admin_controller.rb y ponlo como en el siguiente ejemplo:

# app/controllers/admin_controller.rb
class AdminController < ApplicationController scaffold :articulo
end
A continuación, reinicia WEBrick (para la mayoría de los cambios no es necesario reiniciarlo, pero como hemos modificado el fichero de configuración de base de datos, lo necesitaremos hacer), y dirígete de nuevo a http://localhost:3000/admin... prueba el interfaz y crea unos cuantos artículos de prueba, modífícalos, elimina, etc... Si creas más de 10 podrás ver cómo aparecen automáticamente los enlaces de paginación. Todo esto te lo acabas de ahorrar, no necesitas programarlo ya que el scaffold de Rails lo ha generado por tí.

viernes, 4 de julio de 2014

Crear artículos - II

Además de las columnas que definamos aquí, Rails incluirá automáticamente para cada tabla una columna "id" para el identificador único de cada fila de la tabla. Nos podemos fijar también en que nosotros pedimos definir el modelo Articulo (en singular), y Rails siguiendo sus convenciones, supone que nos pondremos de acuerdo en llamar a la tabla "articulos", como el plural del modelo. Rails es lo suficientemente listo como para saber hacer el plural incluso en casos irregulares como Person -> people. También podemos definir nuestras propias reglas de pluralización para definir las reglas gramaticales de otros idiomas y hacer que por ejemplo pluralice correctamente un modelo Camion como camiones, en lugar de "camions". Para aplicar esta definición del modelo Articulo en la base de datos, ejecutaremos:

$ rake db:migrate (in /home/jaime/blog) == CreateArticulos:
migrating ================================================= --
create_table(:articulos) -> 0.0990s == CreateArticulos: migrated
(0.0993s) ========================================

Al ejecutar esta orden, Rails leerá el fichero config/database.yml para saber cómo acceder a la base de datos, y aplicará las órdenes definidas en la migración para crear las tablas en MySQL. Si en el fichero de configuración hubiéramos especificado otro tipo de base de datos (PostgreSQL, Oracle, Sqlite, SQL Server...) en lugar de MySQL, Rails habría sabido cómo crear las tablas; él se ocupa de la sintaxis SQL de cada tipo de base de datos y nosotros podemos definirlo a un nivel más alto de abstracción. Ya tenemos nuestro modelo Articulo creado y la tabla que almacenará sus datos; ahora necesitamos un controlador para administrar los artículos, que nos permita crearlos, modificarlos, borrarlos... 
Para ello ejecutaremos:

$ script/generate controller Admin exists app/controllers/ exists
app/helpers/ create app/views/admin exists test/functional/ create
app/controllers/admin_controller.rb create
test/functional/admin_controller_test.rb create
app/helpers/admin_helper.rb

jueves, 3 de julio de 2014

Crear artículos - I

Queremos crear un blog, así que lo primero que necesitamos es poder escribir nuestros artículos. Para nosotros, un artículo tendrá un título y un texto principal, así que comenzaremos con esto. Lo primero que necesitamos es generar el modelo Articulo, para lo que usaremos el script de generación de modelos:

$ script/generate model Articulo exists app/models/ exists
test/unit/ exists test/fixtures/ create app/models/articulo.rb
create test/unit/articulo_test.rb create
test/fixtures/articulos.yml create db/migrate create
db/migrate/001_create_articulos.rb

Vemos que al lanzarlo, el script comprueba que existan los subdirectorios necesarios, y crea varios ficheros: en orden, articulo.rb contendrá la lógica del modelo; los archivos dentro de test nos facilitan el testeo de esta lógica, y el fichero creado dentro de db/migrate nos facilita especificar la estructura de la tabla que almacenará los artículos en la base de datos. Vamos a abrir y rellenar este fichero:

# db/migrate/001_create_articulos.rb
class CreateArticulos < ActiveRecord::Migration def self.up
create_table :articulos do |t| t.column :titulo, :string
t.column :cuerpo, :text end end def self.down
drop_table :articulos end end


Vemos que en este fichero define dos métodos, uno llamado self.up que realizará los cambios necesarios, y otro llamado self.down que deshace estos mismos cambios en caso de que quisiéramos echarnos atrás. Las acciones que realizamos dentro de self.up son muy sencillas de leer: si lo leemos en inglés casi nos sale la frase "crea una tabla articulos y haz una columna título que es una cadena y una columna cuerpo que es un texto". Por otro lado, self.down dice simplemente "tira la tabla articulos".