LasIndias.blog

Conquistar el trabajo es reconquistar la vida

Grupo de Cooperativas de las Indias

videoblog

libros

Migrando Codeka a KumbiaPHP: Convención sobre Configuración

El objetivo de esta migración es aprovechar las buenas prácticas de programación y otras herramientas que nos proporciona KumbiaPHP

El futuro aquí y ahora: Keynes, Marx, Dewey, Foucault, Dreikurs, Zamenhof, etc.

kumbiaphpCodeka es una aplicación web para controlar la facturación y gestionar el almacén de una pequeña o mediana empresa. Y KumbiaPHP es un framework libre escrito en PHP5 para el desarrollo de aplicaciones web. En esta entrada quiero mostrar los pasos a seguir para realizar la migración de Codeka a KumbiaPHP. El objetivo de esta migración es aprovechar las buenas prácticas de programación y otras herramientas que nos proporciona KumbiaPHP.

En esta actualización del trabajo de migración vamos a utilizar la versión 1.0 BETA 2 de KumbiaPHP y la versión ampliada de Codeka desarrollada por Eduardo Pagán. En esta primera entrada vamos a instalar KumbiaPHP, familiarizarnos con su estructura de directorios, jugar con su sistema de vistas, y para terminar, hablaremos de una característica importante de KumbiaPHP: convenciones sobre configuración.

Instalando KumbiaPHP

Tenemos que descargar una copia de KumbiaPHP desde la rama master de Github (en desarrollo). Una vez obtenida la copia del framework, descomprimimos y renombramos la carpeta con el nombre de nuestro proyecto; para efecto del ejemplo llamaremos a nuestro proyecto «CodeKu». Y para terminar, copiamos la carpeta «CodeKu» en el directorio público de nuestro servidor. A continuación podemos ver la estructura de directorios de KumbiaPHP.

CodeKu/
|--core
|--default
|  |--app
|--.htaccess

En «core» encontraremos todos los archivos del framework, y en «default» tenemos la aplicación por defecto. Nosotros vamos a trabajar sobre esta aplicación por defecto en los subdirectorios «controllers», «models» y «views». Trabajaremos en estos directorios siguiendo el patrón MVC, donde los Modelos representan la información sobre la cual la aplicación opera y la lógica de negocios. Las Vistas visualizan el modelo usando páginas Web e interactuando con los usuarios de éstas, y los Controladores responden a acciones de usuarios e invocan cambios en las vistas o en los modelos según sea necesario.

Antes de empezar a jugar con KumbiaPHP vamos a verificar que todo esté trabajando bien en nuestras configuraciones a nivel de servidor web. Para esto abrimos nuestro navegador web y colocamos http://localhost/CodeKu/, y si todo esta funcionando bien debería mostrarnos la siguiente imagen.

KumbiaPHP

Las Vistas

Cuando hablamos de la estructura de directorio dijimos que las vistas visualizan el modelo usando páginas Web e interactuando con los usuarios de éstas. KumbiaPHP posee un sistema de presentación basado en Vistas (Views), que viene siendo el tercer componente del patrón MVC. El framework permite reutilizar código mediante plantillas.

Las vistas deberían contener una cantidad mínima de código en PHP para ser comprensibles para un diseñador Web. Es recomendable que las vistas solo se ocupen de la tarea de visualización de los resultados generados por los controladores y presentar las capturas de datos para los usuarios.

Vamos a estudiar un poco como es la presentación de Codeka, a fin de definir como vamos a migrar este aspecto de Codeka a KumbiaPHP. En Codeka, en la página principal, tenemos un menú y una página estática inicial que nos presenta el logo de Codeka y algunos detalles básicos sobre la aplicación. Estando sobre la página inicial, si a través del menú seleccionamos proveedores, veremos el mismo menú, y en el espacio que ocupaba la página inicial de presentación tendremos una vista que nos presenta opciones de búsqueda y un listado de proveedores. Así que podemos concluir que tenemos tres componentes: una plantilla que define la estructura de la página web, un partial que nos presenta un menú, y por ultimo las vistas que van cambiando según las acciones que el usuario va solicitando.

Vamos a plasmar esta idea para que puedan ver como funciona el sistema de vistas en KumbiaPHP.

Montando la plantilla principal

Las plantillas son un tipo de archivo pre-formateado utilizado como base para otros archivos. Todas la plantillas de mi aplicacion las vamos a crear en el directorio app/views/_shared/templates. En este directorio vamos a modificar el archivo default.phtml (las vistas, plantillas y partials tienen la extensión .phtml, que indica que es php con htm) para que su versión final sea la siguiente:

<!DOCTYPE html>
<html lang="es">
<html>
    <head>
        <title>Codeka Facturacion Web</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <?php Tag::css('theme'); ?>
        <?php Tag::css('estilos'); ?>
        <?php echo Html::includeCss(); ?>

        <?php echo Tag::js('JSCookMenu'); ?>
        <?php echo Tag::js('theme'); ?>


    </head>
    <body>
        <?php View::partial('/codeku/menu') ?>
        <?php View::content() ?>
    </body>
</html>

Como podemos ver en esta plantilla, definimos la estructura del documento XHTML (doctype, html, head, etc). Dentro de la etiqueta «body» tenemos algo de código php en el cual utilizamos dos métodos de la clase View (la cual viene definida en el core de KumbiaPHP). El primero es el método View::partial($partial), el cual le indica a KumbiaPHP que debe mostrar el partial cuyo nombre pasamos como argumento (en este caso un partial llamado «menu» que debe estar en el directorio CodeKu/app/views/_shared/partials).El segundo método es el View::content(), el cual se utiliza para indicar donde KumbiaPHP debe renderizar (mostrar) el contenido almacenado en el buffer de salida, que generalmente corresponde a la vista asociada a la acción de un controlador.

Helpers

Los helpers son una serie de funciones que facilitan y agilizan la escritura de código HTML al escribir una vista. Su objetivo es encapsular grandes cantidades de código HTML o Javascript minimizándolo en una sola función.

En nuestra plantilla utilizamos los siguiente tres helpers, dos de la clase «Tag» y uno de la clase «Html»:

  • Tag::css() Incluye un archivo CSS a la lista
  • Tag::js() Incluye un archivo JavaScript a la vista, partial o template
  • Html::includeCss() Incluye los archivos CSS que previamente fueron cargados a la lista mediante Tag::css()

Mediante estos «helpers» hemos cargado los archivos CCS y JS de Codeka. Para el correcto funcionamiento de estas funciones los archivos deben estar presentes en sus correspondientes directorios en la ruta /default/public/. Todos los archivos utilizados en este tutorial se pueden descargar desde nuestro repositorio en Github.

Creando el partial menú

Los partials son pequeñas vistas que pueden incluirse dentro de otras vistas para evitar repetir código. En nuestro caso vamos a crear un partial para el menú de nuestra aplicacion. En la estrucctura de directorios de KumbiaPHP los partials deben ser creados en el directorio views/_shared/partials/, donde crearemos una carpeta «codeku» para los partial de nuestra aplicación. El código para nuestro partial es el siguiente:

<!--
var MenuPrincipal = &#91;
	&#91;null,'Inicio','/',null,'Inicio'&#93;,
	&#91;null,'Inter. Comerciales',null,null,'Ventas clientes',
		&#91;null,'Proveedores','proveedores',null,'Proveedores'&#93;,
		&#91;null,'Clientes','clientes', null,'Clientes'&#93;
	&#93;,
	&#91;null,'Productos',null,null,'Productos',
		&#91;null,'Articulos','articulos',null,'Articulos'&#93;,
		&#91;null,'Familias','familias',null,'Familias'&#93;
	&#93;,
	&#91;null,'Ventas clientes',null,null,'Ventas clientes',
		&#91;null,'Partes de Trabajo','partes_trabajo',null,'Partes de Trabajo'&#93;,
		&#91;null,'Presupuestos','presupuestos_clientes',null,'Presupuestos'&#93;,
		&#91;null,'Albaranes','albaranes_clientes',null,'Albaranes'&#93;,
		&#91;null,'Facturar albaranes','./lote_albaranes_clientes/index.php','principal','Facturar albaranes'&#93;,
		&#91;null,'Ventas Mostrador','./ventas_mostrador/index.php','principal','Ventas Mostrador'&#93;,
		&#91;null,'Facturas','./facturas_clientes/index.php','principal','Facturas'&#93;
	&#93;,
	&#91;null,'Compras proveedores',null,null,'Compras proveedores',
		&#91;null,'Facturas','./facturas_proveedores/index.php','principal','Proveedores'&#93;,
		&#91;null,'Albaranes','./albaranes_proveedores/index.php','principal','Albaranes'&#93;,
		&#91;null,'Facturar albaranes','./lote_albaranes_proveedores/index.php','principal','Facturar albaranes'&#93;,
	&#93;,
	&#91;null,'Tesoreria',null,null,'Tesoreria',
		&#91;null,'Cobros','./cobros/index.php','principal','Cobros'&#93;,
		&#91;null,'Pagos','./pagos/index.php','principal','Pagos'&#93;,
		&#91;null,'Caja Diaria','./cerrarcaja/index.php','principal','Caja Diaria'&#93;,
		&#91;null,'Libro Diario','./librodiario/index.php','principal','Libro Diario'&#93;,
	&#93;,
	&#91;null,'Mantenimientos',null,null,'Mantenimientos',
		&#91;null,'Trabajadores','./trabajadores/index.php','principal','Trabajadores'&#93;,
		&#91;null,'Etiquetas','./etiquetas/index.php','principal','Etiquetas'&#93;,
		&#91;null,'Impuestos','./impuestos/index.php','principal','Impuestos'&#93;,
		&#91;null,'Entidades bancarias','./entidades/index.php','principal','Entidades bancarias'&#93;,
		&#91;null,'Ubicaciones','./ubicaciones/index.php','principal','Ubicaciones'&#93;,
		&#91;null,'Embalajes','./embalajes/index.php','principal','Embalajes'&#93;,
		&#91;null,'Formas de pago','./formaspago/index.php','principal','Formas de pago'&#93;,
	&#93;,
	&#91;null,'Copias Seguridad',null,null,'Copias de Seguridad',
		&#91;null,'Hacer copia','./backup/hacerbak.php','principal','Hacer copia'&#93;,
		&#91;null,'Restaurar copia','./backup/restaurarbak.php','principal','Restaurar copia'&#93;,
	&#93;,
	&#91;null,'Creditos','creditos.php','principal','Creditos'&#93;
&#93;;

-->

  body { background-color: rgb(255, 255,255);
    background-image: url(images/superior.png);
    background-repeat: no-repeat;
	margin: 0px;
    }

  #MenuAplicacion { margin-left: 10px;
    margin-top: 0px;
    }




 <div id="MenuAplicacion" align="center"></div>

<!--
	cmDraw ('MenuAplicacion', MenuPrincipal, 'hbr', cmThemeGray, 'ThemeGray');
-->

Montando la vista inicial de presentación de Codeka

La página principal de Codeka nos presenta el logo de la aplicación e información sobre la versión que estamos utilizando. Para incluir esta información dentro de la plantilla default.phtml vamos a trabajar sobre la vista index.phtml del IndexController presente en la ruta app/views/index/. Tenemos que editar este archivo, borrar su contenido previo e insertar el siguiente código:

<table width="90%" border="0" align="center">
  <tr height="90px">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr height="200px">
    <td></td>
    <td><div align="center"><?php echo Html::img('central.jpg', null, array('width'=>'550', 'height'=>'200', 'border'=>'0')); ?></div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><div align="center" class="Estilo6">CodeKa Facturacion Web </div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><div align="center" class="Estilo6">Version 1.1 </div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><div align="center" class="Estilo6"> 2008 - <?php echo date("Y"); ?></div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td><div align="center"></div></td>
    <td></td>
    <td></td>
  </tr>
</table>

El código de esta vista es mayormente código html y algunos nuevos helpers que podéis consultar en el manual de KumbiaPHP.

Ahora ya podemos volver a visitar http://localhost/CodeKu/, y si todo está funcionando correctamente debería mostrarnos la página inicial de Codeka. ¿Magia?

codeku

Convención sobre Configuración

Quizás os preguntéis donde hemos especificado o configurado el cambio de plantilla, o bien donde hemos indicado el controlador a ejecutarse para la raíz de nuestro proyecto. En realidad no hemos configurado estas opciones sino que hemos aprovechado un conjunto de convenciones u opciones por defecto definidas en nuestro framework. KumbiaPHP sigue la filosofía conocida como «Convención sobre Configuración». Así, sabemos que el controlador por defecto es IndexController y que la plantilla por defecto es default.phtml, ubicada en app/views/_shared/templates.

En la siguiente entrega sobre la migración de Codeka a KumbiaPHP trabajaremos en el CRUD de proveedores.

«Migrando Codeka a KumbiaPHP: Convención sobre Configuración» recibió 7 desde que se publicó el Domingo 23 de Febrero de 2014 . Si te ha gustado este post quizá te gusten otros posts escritos por Manuel Ortega.

Deja un comentario

Si no tienes todavía usuario puedes crear uno, que te servirá para comentar en todos nuestros blogs en la
página de registro de Matríz.

Diseño y programación por el Grupo de Cooperativas de las Indias. Visita el blog de las Indias y suscríbete al videoblog.