En las entradas anteriores he hecho pequeñas pruebas de conceptos, sobre archivos sin ningún tipo de estilo o presentación. Como nuestro objetivo es desarrollar aplicaciones web completas que realicen varias tareas, necesariamente tenemos que pensar en el tema del diseño web.
Como siempre, podemos hacernos nuestros sitios web desde cero, y para ser más drásticos, usando exclusivamente notepad. No es el objetivo de este blog; también como siempre, me iré por el camino más sencillo: soluciones pre-elaboradas. En la red podemos encontrar infinidad de recursos para desarrollo web: Frameworks, CMS, sistemas de plantillas, etc.
Un framework general de desarrollo me parece la opción correcta. Existen muchas opciones, entre las cuales yo me he decidido por
KumbiaPHP, por 2 razones:
1) Es un framework sumamente sencillo de usar y sobre todo práctico, con el que además he trabajado previamente y que sé que facilitará el trabajo (sí, ley de mínimo esfuerzo). En este post prometo dejar una aplicación funcional que no tomará más de 30 minutos de construir.
2) En principio, nuestra aplicación no se conectará con una base de datos, pero en un futuro cercano (espero) sí lo hará. KumbiaPHP es un framework basado en MVC, que permite trabajar en primera instancia con solamente las capas de Vista y Controlador (aunque no es lo recomendable), y en cualquier momento podemos agregar la conexión a la base de datos sin ningún problema.
A pesar de que ya lo conocía, voy a hacer como si no, y construiré el sitio, paso por paso, tal como se detalla en este excelente tutorial:
Lo primero que debemos hacer es descargar la librería del
sitio oficial.
Descomprimimos el archivo en nuestro directorio web y obtendremos la siguiente estructura:
kumbiaphp/
|--app
|--core
|--.htaccess
|--index.php
Para verificar que todo vaya bien, en un navegador vamos a la url de nuestro site, y debería mostrarse la página de bienvenida de kumbia.
Bien, siguiendo con el tutorial, vamos a crear nuestro 'Hola Twitter'.
1) Crearemos la vista y controlador de nuestra aplicación.
1.1) Dentro del directorio app/controllers creamos un archivo hola_controller.php
1.2) Dentro del directorio app/views creamos un directorio hola
En el archivo hola_controller.php definiremos una clase, con todas las funciones que queremos ejecutar en nuestro controlador. De momento queremos solamente imprimir un saludo por pantalla, así que sólo crearemos una función:
<?php
class SaludoController extends ApplicationController {
public function hola()
{
//Ver metodo render
$this->render(NULL);
}
}
Por cada controlador, debemos tener un subdirectorio dentro del directorio de vistas (app/views), y por cada función del controlador, debemos crear un archivo dentro de ese subdirectorio. Como nuestra función se llama hola(), crearemos el archivo hola.php dentro de app/views/saludo, que de momento sólo contendrá lo siguiente:
<h1>Hola TuTuitero!<h1>
Ahora vamos a http://localhost/tutuitero/saludo/hola y veremos nuestro saludo funcionando. Hemos creado nuestra primera página con kumbiaPHP. 30min? yo creo que menos! :)
Nótese que en nuestra vista sólo hemos definido un texto dentro de etiquetas H1, sin embargo la página tiene un header, un footer, un estilo de letras, un formato. Esto es debido al versátil sistema de plantillas implementado en kumbia, en el cual nos centraremos en un momento.
Hasta este punto, este es el primer post del blog en el que no he mencionado la palabra twitter. Es el momento de hacerlo, aunque sea sólo para recordar el objetivo principal que llevamos desde el principio: crear una herramienta de conexión para twitter que podamos adaptar a nuestras necesidades.
Para cubrir este objetivo, necesitamos un portal web, que podamos navegar fácilmente y que nos permita realizar actualizaciones/consultas mediante una cuenta twitter. Es por ello que hemos introducido kumbiaPHP. Vamos ahora a construir nuestro primer portal web.
Nuestro portal
Ya he dicho que dependiendo de lo que vayamos a construir, vamos a necesitar un sitio más o menos elaborado. Como siempre, podemos partir desde cero y realizar todo el diseño y funcionalidad de nuestro sitio, pero como el objetivo no es hacer un curso sobre diseño web, me iré por el camino más fácil.
Haciendo uso de las bondades que proveen las arquitecturas MVC, separando el diseño (Vista) de las capas funcionales y de control, y aprovechando la gran cantidad de plantillas web que se pueden conseguir gratuitamente por la red, voy a utilizar una de estas (que luego puede ser fácilmente sustituida), de manera de poder centrarme en la funcionalidad del sitio.
Entre los muchos sitios webs que ofrecen plantillas gratis, me gusta mucho
opendesigns.org, tienen cientos de plantillas y es simple de navegar. Escogemos alguna de las plantillas que ofrezca, repito, de acuerdo a nuestras necesidades y la descargamos. Yo me he bajado esta:
Descomprimimos el archivo y vamos a encontrar un index.html, un style.css y un directorio de imágenes. Ahora veremos como incrustar estos archivos dentro de nuestro sitio en kumbiaPHP.
Agregando una plantilla a nuestro sitio hecho con kumbiaPHP
Nos centraremos ahora en el contenido del directorio app/views. Vemos los siguientes subdirectorios: errors, pages, partials y templates (además de nuestro directorio saludo). error y pages no nos interesan (de momento), los que nos importan son partials y templates.
Dentro de partials podemos almacenar como su nombre lo indica códigos parciales que podemos incrustar en diferentes vistas, por ejemplo, el footer de nuestro site. Dentro de templates, podemos almacenar la plantilla que queremos que aplique sobre todas las vista de un controlador; no es necesario crear estos templates, y si no lo hacemos, kumbiaPHP tomará la plantilla por defecto (default.phtml).
Si tenemos varias plantillas, desde la capa de control, podemos escoger cual plantilla utilizar, simplemente con incluir la variable template dentro de la clase:
public $template = 'plantilla';
Hagamos una prueba rápida: vamos a sustituir el contenido del archivo default.phtml por el contenido del archivo index.html que viene con nuestra plantilla. Volvamos a abrir en el navegador saludo y veremos que aparece el texto de nuestra plantilla, pero muy mal formateado. Esto es debido a que no tenemos las hojas de estilo ni las imágenes, lógicamente.
Abrimos el directorio app/public y encontraremos algunos subdirectorios. Intuitivamente sabremos que debemos almacenar nuestras imagenes en el directorio img y nuestras hojas de estilo en el directorio css. Todo esto es configurable, si deseas cambiarlo, debes revisar un poco la documentación de kumbiaPHP. Guardamos el archivo style.css que vino con nuestra plantilla dentro de css, y todas las imagenes en el directorio img.
Ahora nos iremos a default.phtml y sustituiremos la línea 12 (el llamado a la hoja de estilo) por la forma en la que se debe invocar desde kumbiaPHP:
<?php echo stylesheet_link_tag('style'); ?>
Justo después colocamos la siguiente línea:
<?php echo stylesheet_link_tags(); ?>
Si volvemos a recargar la página, veremos que ahora ya ha tomado nuestro estilo, pero le hacen falta las imágenes. La forma de especificar las imágenes es como sigue:
<?php echo img_tag('imagen.jpg','id: id_de_imagen','alt: texto alternativo'); ?>
Recorremos el texto y sustituimos de acuerdo al formato mostrado. Adicionalmente, debemos sustituir en el archivo style.css todas las referencias a imagenes del tipo "images/imagen.jpg" a "../img/imagen.jpg". Con estos cambios, tendremos nuestra página exactamente igual a como se ve el demo online en opendesigns.org.
¿Desapareció el "Hola Twitter"?
Observemos que tanto si visitamos http://localhost/tutuitero/saludo/hola o http://localhost/tutuitero vamos a ver lo mismo. Pareciera que hemos perdido el "Hola Twitter en saludo/hola". Recordemos que estamos utilizando una plantilla que será común para todas las páginas del sitio, y que esa plantilla la hemos rellenado con código html, es decir código estático, no le hemos dicho donde queremos que se muestre el contenido particular de cada página. Esto se hace con la función View::content() de kumbia, la cual incluiremos en el lugar que consideremos apropiado.
En este caso, parece lógico colocar el "Hola Twitter" en el cuerpo de nuestra plantilla, por lo tanto justo después de que comienza el div "rightcolumn", colocaremos un div en donde mostrar nuestro mensaje. Quedaría así:
<div class="textboxright">
<?php View::content(); ?>
</div>
Ahora sí notaremos la diferencia entre abrir la página principal o abrir nuestro saludo.
Con esta pequeña introducción es suficiente para comenzar a experimentar con kumbia. Es necesario revisar la documentación del framework para poder explotar todas las bondades que ofrece. Luego mostraré un ejemplo más elaborado, en el que intercambio datos entre las capas de vista y controlador, y además hago uso de las facilidades que ofrece kumbia para la implementación de vistas. Por ahora, es todo.
