#332 Refinery CMS Basics
- Download:
- source code
- mp4
- m4v
- webm
- ogv
Supongamos que un cliente nos pide que construyamos un sitio web para una tienda de pianos. La página se llamará Piano Plus y tendrá información acerca de la tienda, así como una página donde los usuarios puedan ver las existencias de pianos y otra que muestre la ubicación física de la tienda. No hay mucha interacción de usuario en el sitio, pero a los dueños de la tienda les gustaría poder editar el contenido de cada página. Se trata de un caso perfecto de uso de un sistema de gestión de contenidos (CMS), por lo que en este episodio vamos a construir el sitio usando Refinery CMS, que es un excelente CMS basado en engines de Rails, lo que hace que sea muy modular. Gracias a la forma en la que está escrito Refinery es muy fácil crear una nueva aplicación Rails o añadirlo sobre una que ya exista.
Instalación de Refinery
Refinery depende de ImageMagick por lo que tendremos que instalarlo antes. En OS X la forma más sencilla de instalarlo es mediante Homebrew, gracias al cual sólo tendremos que lanzar la siguiente orden:
$ brew install imagemagick
Ya podemos instalar la gema Refinery.
$ gem install refinerycms
La gema tiene varias dependencias que tardarán un poco en instalarse. Tras hacerlo podemos crear una nueva aplicación Refinery lanzando la orden refinerycms y pasando el nombre de la aplicación.
$ refinerycms piano_plus
Esto generará una aplicación Rails completa, le añadirá Refinery, y ejecutará las migraciones necesarias. Al acabar tendremos instrucciones con lo que tenemos que hacer a continuación, que es cambiarnos al directorio de la aplicación y arrancar el servidor.
$ cd piano_plus/ $ rails s
En marcha con Refinery
Ya podemos cargar nuestra aplicación con el navegador. La primera vez que lo hagamos iremos a un formulario de registro porque todavía no existen usuarios dados de alta. Con este formulario crearemos un usuario llamado admin.
Tras el registro iremos al cuadro de mandos de Refinery, que nos muestra la última actividad y tiene enlaces que permiten hacer diferentes tareas.
Hay otras pestañas en la parte superior, que nos llevan a páginas donde podremos gestionar otras partes de nuestro CMS como por ejemplo los usuarios y las páginas públicas. Estas pestañas pueden reordenarse si queremos. Veamos en primer lugar la pestaña de páginas porque es en la que estaremos la mayor parte del tiempo trabajando.
Por defecto Refinery creará varias páginas para nosotros: una portada, una página "Acerca de" y otra que se mostrará cuando aparezca un error 404. Podemos editar la página haciendo clic en el icono de edición, esto nos lleva a un formulario donde podemos editar el contenido de la página. Refinery proporciona un editor de texto enriquecido con el que podemos modificar el texto de cada sección. También existe una sección avanzada en el fondo de la página que nos permite cambiar varios aspectos de la página que estamos editando.
Echémosle un vistazo a la parte pública de nuestra web, lo que podemos hacer haciendo clic en el botón naranja de la esquina superior izquierda.
Podemos ver el contenido de la página pero vemos que viene sin estilos. Esto es bueno porque nos otorga control completo sobre el aspecto de la página que ve el visitante.
Modificando la configuración y hojas de estilo
A continuación vamos a añadir CSS a nuestra aplicación y vamos a modificar algunos valores de configuración, como por el ejemplo el nombre de la compañía. La estructura de una instalación de Refinery debería resultarnos familiar porque es, en esencia, una aplicación Rails con ciertos extras. Si examinamos el fichero de rutas veremos que monta el engine de Refinery en la ruta raíz.
# This line mounts Refinery's routes at the root of your application. # This means, any requests to the root URL of your application will go to Refinery::PagesController#home. # If you would like to change where this extension is mounted, simply change the :at option to something different. # # We ask that you don't use the :as option here, as Refinery relies on it being the default of "refinery" mount Refinery::Core::Engine, :at => '/'
Para configurar Refinery tenemos que buscar en el directorio /config/initializers/refinery donde se encuentran varios ficheros en los que podemos modificar algunos valores de configuración. Cada opción se encuentra profusamente documentada en los comentarios, por lo que merece la pena leerlos con detalle para tener una idea de qué es lo que podemos configurar. Queremos cambiar el nombre del sitio web, y esta opción de configuración está definida en el fichero core.rb, así que tendremos que descomentar la opción y cambiarla.
# Site name config.site_name = "Piano Plus"
Como este valor de configuración se encuentra un initializer tendremos que reiniciar el servidor para que surta efecto. Tras hacerlo podremos recargar la página para ver cómo ha cambiado el nombre en la cabecera y el pié de la página.
Lo siguiente que haremos será añadir estilos a la página. Se encuentra estructurada con un encabezado que contiene una imagen, una sección page que contiene el cuerpo de texto de la página y una sección side_body que contiene la barra lateral. Nuestra aplicación tiene un fichero llamado application.css en el directorio /app/assets/stylesheets que se comporta de la misma manera que lo haría en una aplicación Rails normal. Crearemos un fichero llamado layout.css.scss y pondremos en él nuestros estilos. Al recargar la página veremos que tiene mucho mejor aspecto.
Lo siguiente será editar la portada del sitio. Añadiremos un encabezado con un elemento h2 y otro párrafo con un par de piezas cortas de texto, que luego se convertirán en enlaces a otras páginas interiores que de momento no existen aún. Utilizaremos el estilo del menú para configurar el tamaño de tipografía de este párrafo. También queremos que aparezca una imagen en la página. Esta imagen se encuentra en nuestro ordenador y con Refinery podremos subirla y reescalarla. Escogeremos el tamaño medium de reescalado y flotaremos la imagen a la izquierda y la pondremos en la parte superior de la página arrastrándola.
Si en algún momento queremos comprobar el código HTML que se está generando podemos hacer clic en el botón HTML y ver el código fuente en bruto. También podemos editarlo aquí, por si el editori visual no genera exactamente el código que deseamos. Como en esta página no queremos que aparezca nada en la barra lateral simplemente iremos a la sección Side Body y eliminaremos el texto que aparece allí. Tras hacerlo simplemente guardaremos la página y veremos cómo queda en nuestro sitio.
La página ya empieza a tener mejor aspecto, si bien hemos tenido que hacer algunos ajustes en la CSS. Ya está casi completa, y tan sólo nos queda por añadir una sección con un rótulo rojo en la parte superior pero antes de hacerlo vamos a crear la página con la ubicación física de la tienda. Esto también lo haremos en la interfaz de administración de la tienda. Primero borraremos la página “About” porque no la vamos a tener que utilizar, y crearemos una que se llame “Store Location”. En esta página queremos mostrar un mapa, por lo que usaremos la vista en HTML del editor e introduciremos el siguiente fragmento que visualizará un mapa de Google en la página.
<h2>Store Location</h2> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=109+West+57th+Street,+New+York,+NY&aq=&sll=40.760254,-73.97747&sspn=0.009962,0.013025&gl=us&amo;ie=UTF8;&hq=&hnear=109+W+57th+St,+New+York,+10019&t=m;&spm=0011376,0.018238&z=15;&iwloc=A;&output=embed"></iframe>
Añadamos también algo de texto a la barra lateral de la pagina antes de guardarla. Queremos que en nuestra página principal aparezca un enlace a esta página, por lo que iremos a la página de la portada y en su editor escogeremos el texto “Store Location” haremos clic en el botón “Add Link” y añadiremos el enlace a nuestra nueva página. Ya tenemos dicha página enlazada desde la portada.
Secciones personalizadas
A continuación vamos a añadir un rótulo rojo en la parte superior de la portada, en el que pondremos algo de texto y una imagen. Queremos que esté en una sección separada, pero de momento sólo tenemos las dos secciones “Body” y “Side Body”. Podríamos añadir este rótulo a la barra lateral pero no es donde realmente tiene que ir, por lo que vamos a añadir una nueva sección. Refinery tiene una opción de configuración que determina si se pueden añadir nuevas secciones o no, y su valor por defecto es false por lo que tendremos que cambiarlo.
# Configure whether to allow adding new page parts # config.new_page_parts = true
Tendremos que reiniciar otra vez el servidor porque hemos cambiado un inicializador. Tras hacerlo podremos visitar la página de edición de la portada (o cualquier otra) y veremos nuevos botones que nos servirán para añadir o eliminar secciones, así que los usaremos para eliminar la sección de barra lateral porque no la vamos a necesitar en esta página y añadiremos una nueva sección a la que llamaremos “Banner”. También tendremos que utilizar el botón para reordenar para asegurarnos de que la sección “Banner” aparece después de la sección “Body” . Si estamos usando una versión de Refinery anterior a la 2.0.2 puede ser que veamos un error al hacerlo, en cuyo caso tendremos que añadir manualmente una nueva página desde la consola:
>> Refinery::Page.find(1).parts.create! "Banner"
La página ya tiene una sección llamada “Banner” en la que ya podemos añadir el contenido deseado tras lo que guardaremos la página..
Ya hemos añadido los estilos para esta sección por lo que cuando cambiemos a la portada veremos que ya aparece el rótulo con los estilos correctos. Para ver la página sin ver la barra de administración de Refinery tendremos que cerrar la sesión.
Podemos darnos un paseo por el sitio igual que harían nuestros visitantes. Para volver a refinery tan sólo tenemos que añadir /refinery a la URL e iremos a la página de inicio de sesión.
Todavía nos queda por añadir al sitio una nueva sección: la página con la lista de pianos, que no veremos en este episodio. Si bien podríamos hacer una página estática que mostrase todos los pianos del catálogo, sería mejor almacenar esta información en la base de datos por lo que tendremos que extender Refinery creando nuestro propio engine. Lo veremos en el próximo episodio de pago de la semana que viene.
