Tag Archives: codeka

Migrando Codeka a KumbiaPHP

En esta entrada pretendo mostrar como podría realizarse la migración de Codeka a KumbiaPHP a fin de mejorar la programación con el uso de MVC y otras herramientas que nos proporciona KumbiaPHP, es mi intención que esta entrada no solo sirva a los desarrolladores de Codeka como un ejemplo de una posible migración sino que también sea de utilidad para aquellas personas que están comenzando en el uso de KumbiaPHP.

Requisitos:

  • Tener instalado Apache, PHP5 y Mysql
  • Conocimientos en MVC y POO.

Una pequeña introducción a lo que es Codeka y KumbiaPHP..

KumbiaPHP

KumbiaPHP es un framework para aplicaciones web libre escrito en PHP5. mas información

Codeka

Codeka es una aplicación para controlar la facturación y gestionar el almacén de una pequeña o mediana empresa.mas información.

Codeka maneja información de clientes, proveedores y otras entidades. podemos decir que cuenta con el modulo clientes, modulo proveedores y otros. En este caso y dado que solo pretendo dar un pequeño ejemplo que como se vería Codeka usando KumbiaPHP voy a migrar a KumbiaPHP el modulo de proveedores, es decir,  las cuatro operaciones básicas que se pueden realizar sobre la tabla proveedores además de una vista de búsqueda.

La Base de Datos:

Crearemos una base de datos, en mi caso la he llamado codeka y en esta base de datos vamos a crear tres tablas : proveedores, provincias y entidades.

Vamos a utilizar casi la misma estructura de dichas tablas en codeka, digo casi la misma ya que tenemos que realizar unos pequeños cambios a fin de cumplir con algunas convenciones de KumbiaPHP, estas convenciones están relacionadas con la clase ActiveRecord que es la clase principal para la administración y funcionamiento de modelos dentro de la arquitectura MVC.

Detallo a continuación los cambios realizados en cada tabla:

Tabla proveedores

la llave primaria pasa de ser codproveedores a id, ya que de esta forma ActiveRecord asumirá que se trata de la llave primaría de la entidad y que es autonumérica.

Igualmente las llaves foráneas pasaran a llamarse provincias_id y entidades_id, esto le indica a ActiveRecord que existen otras dos tablas llamadas provincias y entidades y que estas contienen un campo id que es foránea a este. Todo esto nos facilitara establecer relaciones entre los modelos a la hora de programar.

CREATE TABLE IF NOT EXISTS `proveedores` (
 `id` int(5) NOT NULL AUTO_INCREMENT,
 `nombre` varchar(45) NOT NULL,
 `nif` varchar(12) NOT NULL,
 `direccion` varchar(50) NOT NULL,
 `provincias_id` int(2) NOT NULL,
 `localidad` varchar(35) NOT NULL,
 `entidades_id` int(2) DEFAULT NULL,
 `cuentabancaria` varchar(20) NOT NULL,
 `codpostal` varchar(5) NOT NULL,
 `telefono` varchar(14) NOT NULL,
 `movil` varchar(14) NOT NULL,
 `email` varchar(35) NOT NULL,
 `web` varchar(45) NOT NULL,
 `borrado` varchar(1) NOT NULL DEFAULT '0',
 PRIMARY KEY (`id`)
)

Tablas provincias y entidades

En estas dos tablas sus llaves primarias pasaran a llamarse id por lo ya dicho.

CREATE TABLE IF NOT EXISTS `provincias` (
  `id` int(2) NOT NULL AUTO_INCREMENT,
  `nombreprovincia` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
)
CREATE TABLE IF NOT EXISTS `entidades` (
 `id` int(2) NOT NULL AUTO_INCREMENT,
 `nombreentidad` varchar(50) NOT NULL,
 `borrado` varchar(1) NOT NULL DEFAULT '0',
 PRIMARY KEY (`id`)
)

Instalando KumbiaPHP

Tenemos que descargar una copia de KumbiaPHP desde aquí, 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 kumbiaCodeka, copiamos esta carpeta en el directorio publico de nuestro servidor, kumbiaCodeka es el nombre de nuestro proyecto pero esto podria cambiar. Vamos a conocer un poco la estructura de directorios de KumbiaPHP a fin de saber en que directorios vamos a trabajar.

kumbiaCodeka/
|-- app
|   |-- application.php
|   |-- config
|   |-- controllers
|   |-- extensions
|   |   |-- filters
|   |   |-- helpers
|   |   `-- scaffolds
|   |-- index.php
|   |-- libraries
|   |-- locale
|   |-- model_base.php
|   |-- models
|   |-- public
|   |-- temp
|   `-- views
|       |-- errors
|       |-- pages
|       |-- partials
|       `-- templates
|-- core
|   |-- console
|   |-- docs
|   |-- extensions
|   |   |-- helpers
|   |   `-- scaffolds
|   |-- kumbia
|   |-- libraries
|   |-- tests
|   |-- vendors
|   `-- views
|       |-- errors
|       `-- templates

Los dos directorios principales son app y core, app es el directorio de nuestra aplicación y core es el nucleo de kumbiaPHP, nosotros vamos a trabajar en el directorio app en los subdirectorios controllers,models y views. esto siguiendo MVC y sabiendo que los Modelos representan la información sobre la cual la aplicación opera, su 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 usuario e invocan cambios en las vistas o en los modelos según sea necesario.

Antes de continuar vamos a verificar que todo este trabajando bien en nuestras configuraciones a nivel de servidor web, para esto abrimos nuestro navegador web y colocamos http://localhost/kumbiaCodeka/, si todo esta funcionando bien deberia mostrarnos la siguiente imagen.

kumbiaBienvenida

Configuraciones(Base de datos).

Si echamos un vistazo a la arquitectura de directorios que mostramos arriba podemos encontrar en el directorio app(directorio de nuestra aplicación) el subdirectorio config, en este directorio podemos encontrar los archivos de configuración de nuestra aplicación (config.ini, routes.ini, databases.ini y boot.ini). Cada uno de estos archivos nos permite configurar ciertos aspectos de nuestra aplicación.

Dado que ya creamos nuestra base de datos(codeka) vamos a trabajar en el archivo databases.ini el cual nos permite establecer la configuración de conexión a la base de datos, si le damos un vistazo a este archivo podemos ver que esta dividido en tres secciones [development] , [production] y  [test]. Esto se debe a que en KumbiaPHP podemos configurar nuestra aplicación en modo desarrollo, produccion y test. Dependiendo de esto nuestra aplicación va a tomar los datos de conexión a la base de datos de la sección que corresponda, por ahora vamos a conformarnos con saber que por defecto nuestra aplicación se ejecuta en modo desarrollo por lo que tenemos que configurar la sección [development]. Nuestro archivo databases.ini en su sección [development] quedaría asi.

[development]
host = localhost
username = usuario
password = contrasenia
name = codeka
type = mysql

Los valores asignados a host, username y password van a depender de tu configuración de mysql y name es el nombre de la base de datos que ya creamos(codeka).

Creando los modelos

Cuando hablamos de modelos dijimos que estos representan la información sobre la cual la aplicación opera. Viendo la base de datos que creamos podemos deducir que nuestra aplicacion va a trabajar con informacion de proveedores, provincias y entidades por lo que para poder manipular esta informacion tendremos que crear tres modelos cada uno correspondiente a una de las tablas que tenemos en nuestra base de datos. Este trabajo lo vamos a realizar en el subdirectorio models del directorio de nuestra aplicacion y tenemos que seguir las convenciones que nos dicen que el archivo que contiene nuestro modelo se debe llamar igual que la tabla de nuestra base de datos(ambos en smallcase) , vamos a crear el modelo correspondiente a la tabla proveedores a fin verlo en la practica. En el directorio models crearemos el archivo proveedores.php cuyo contenido debe ser el siguiente:

<?php
class Proveedores extends ActiveRecord{

}
?>

Como vemos creamos una clase con el mismo nombre de nuestra base de datos pero esta vez en camellcase. Esta clase debe heredar de la clase ActiveRecord que como ya dijimos es la clase principal para la administración y funcionamiento de modelos, esto es muy importante ya que es lo que nos permitira mas adelante trabajar las entidades de nuestos modelos más naturalmente como objetos.

De igual forma crearemos los modelos Entidades y Procincias:

kumbiaCodeka/app/models/provincias.php

<?php
class Provincias extends ActiveRecord{

}
?>


kumbiaCodeka/app/models/entidades.php

<?php
class Entidades extends ActiveRecord{

}
?>

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 sistema MVC. El framework permite mediante plantillas reutilizar código.

Las vistas deberían contener una cantidad mínima de código en PHP para que fuese suficientemente entendible por un diseñador Web y además, para dejar a las vistas sólo las tareas de visualizar los resultados generados por los controladores y presentar las capturas de datos para usuarios.

Vamos estudiar un poco como es la presentación de codeka a fin de difinir como vamos a migrar este aspecto de Codeka a KumbiaPHP. En Codeka en la pagina principal tenemos un menu y una pagina estatica que nos presenta el logo de Codeka, si a travez del menu seleccionamos proveedores veremos el mismo menu y en el espacio que ocupaba  la pagina de presentación tendremos una vista que nos presenta opciones de busqueda y un listado de proveedores, de esto podemos decir que tenemos tres componentes, primero una plantilla que define la estructura del la pagina web, en segundo lugar un partial que nos presenta un menu y por ultimo el vistas que van cambiando segun las acciones que el usuario va solicitanto.

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

Creando 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/templates, en este directorio vamos a crear el archivo principal.phtml(las vistas, plantillas y partials tienen la extensión .phtml que indica que es php con htm), el contenido de ese archivo sera el siguiente:

kumbiaCodeka/app/views/templates/principal.phtml

<html>
    <head>
        <title>Codeka Facturacion Web</title>

        <?php echo stylesheet_link_tag('estilos','use_variables: true') ?>
        <?php echo stylesheet_link_tag('style','use_variables: true') ?>
        <?php echo Kumbia::stylesheet_link_tags(); ?>
    </head>
    <body>
        <?php View::partial('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 la clase View(la cual viene definida en el core de kumbiAPHP) mas específicamente utilizamos dos de sus métodos, 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 kumbiaCodeka/app/views/partials).El segundo método es el método View::content() el cual se utiliza para indicar donde KumbiaPHP debe renderizar (mostrar) el contenido almacenado en el buffer de salida, es decir el próximo nivel de la vista que generalmente corresponde a la vista asociada a una acción de un controlador, esto lo veremos mas adelante.

Otro elemento de KumbiaPHP que utilizamos en esta plantilla es stylesheet_link_tag($archivo_css, , [use_variables: true]) que es un helper, los helpers son una serie de funciones que facilitan y agilizan la escritura de código HTML al escribir una vista. El objetivo de los helpers es el de encapsular grandes cantidades de código HTML o Javascript minimizándolo en una sola función, en este caso utilizamos el helper stylesheet_link_tag($archivo_css, , [use_variables: true]) que nos permite incluir un archivo css que está ubicado en app/public/css. Por ultimo tenemos el metodo stylesheet_link_tags() de la clase Kumbia el cual imprime los CSS cargados mediante stylesheet_link_tag. Como podemos ver hemos cargado 2 archivos CSS(estilos,style). el archivo estilos contiene los estilos de nuestra aplicacion y el archivo style contiene algunos estilos relacionados con KumbiaPHP. a continuacion dejo un enlace para que se descargen el archivo estilos.css ya que style viene por defecto con KumbiaPHP.

kumbiaCodeka/app/public/css/

estilos.css

Creando el partial menu

Los partials son pequeñas vistas que pueden incluirse dentro de otra vista para evitar repetir código. En nuestro caso vamos a crear un partial para el menu de nuestra aplicacion, En la estrucctura de directorios de KumbiaPHP los partials deben se creados en el directorio app/public/partials/. nuestro partial quedara de la siguiente forma:

app/public/partials/menu.phtml

<?php echo stylesheet_link_tag('menu','use_variables: true') ?>
<?php echo stylesheet_link_tag('theme','use_variables: true') ?>
<?php echo Kumbia::stylesheet_link_tags(); ?>
<?php echo javascript_include_tag('JSCookMenu') ?>
<?php echo javascript_include_tag('theme') ?>
<script language="JavaScript">
    <!--
    var MenuPrincipal = [
        [null,'Inicio','<?php echo URL_PATH ?>','_self','Inicio'],
        [null,'Inter. Comerciales',null,null,'Ventas clientes',
            [null,'Proveedores','<?php echo URL_PATH ?>proveedores','_self','Proveedores'],
            [null,'Clientes','<?php echo URL_PATH ?>clientes','_self','Clientes']
        ],
    ];

    --></script>
<div id="MenuAplicacion" align="center"></div>
<script language="JavaScript">
    <!--
    cmDraw ('MenuAplicacion', MenuPrincipal, 'hbr', cmThemeGray, 'ThemeGray');
    -->
</script>

En este archivo hacemos uso de un helper ya conocido stylesheet_link_tag($archivo_css, , [use_variables: true]) con el fin de cargar dos archivos CSS que necesitamos para generar el menu de nuestra aplicacion. De igual forma hacemos uso de un segundo helper javascript_include_tag($archivo_js) el cual nos permite incluir archivos javascript en nuesta vista, el resto es codigo javascript. Les dejos los enlaces para descargarce los archivos css y js que utilizamos para el menu de nuestra aplicacion. muy importante tener en cuenta que los archivos css van en el directorio app/public/css y los archivos js van en el directorio app/public/javascript

app/public/css/

menu.css

theme.css

app/public/javascript/

JSCookMenu.js

theme.js

Creando la pagina de presentacion de Codeka

Quienes hemos utilizado Codeka sabemos que la pagina inicial nos presenta el logo de codeka y alguna informacion sobre la version que estamos utilizando, esta es una pagina estatica. KumbiaPHP nos proporciona un controlador que nos permite trabajar con paginas estaticas por lo que haremos uso del mismo a fin de mostrar esta pagina. El controlador al que me refiero es el PagesController el cual viene con kumbiaPHP en el directorio de nuestra aplicacion mas especificamente en el directorio app/controllers(este es el directorio donde vamos a ubicar todos los controladores de nuestra aplicación ). El PagesController a travez de su metodo show($view) nos permite mostrar vistas que están en app/views/pages/, por medio del parametro que le pasamos al metodo show() podemos especificar cual es la vista que queremos mostrar, antes de continuar vamos a crear la vista presentacion.phtml en el directorio que corresponde app/views/pages/ ya que pretendemos mostrarla con el metodo show() del controlador PagesController.

app/views/pages/presentacion.phtml

<table width="90%" border="0" align="center">
<tr height="90px">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr height="200px">
<td>&nbsp;</td>
<td>
<div align="center"><?php echo img_tag('central.jpg') ?></div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<div align="center" class="Estilo6">CodeKa Facturaci&oacute;n Web</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<div align="center" class="Estilo6">Versi&oacute;n 1.0</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<div align="center" class="Estilo6">&copy; 2008</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<table width="50%" border="0" align="center">
<tr>
<td>
<div align="center"><span class="Estilo5">Resolución óptima 1024 x 768 píxeles  </span></div></td>
</tr>
</table>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="27">&nbsp;</td>
<td>
<table width="50%" border="0" align="center">
<tr>
<td width="38%">
<div align="right"><?php echo img_tag('firefox.gif', "width: 80", "height: 15") ?></div></td>
<td width="62%"><span class="Estilo5">Aplicación optimizada para Firefox </span></td>
</tr>
</table>
</td>
<td>&nbsp;</td>
</tr>
</table>

El código de esta vista es mayormente código html por lo que solo hare mención al helper img_tag el cual podemos ver dos veces en esta vista. El helper img_tag($src) genera una etiqueta img, el primer parámetro corresponde al nombre del archivo de imagen que se encuentra en app/public/img. Puede recibir ‘n’ parámetros adicionales de la etiqueta html ‘img’ para cambiar los atributos de ésta.
Dejo los enlaces para que se descargen las imagenes que de la vista presentacion.phtml, recordar que deben guardar estas imagenes en el directorio app/public/img/.

central.jpg

firefox.gif

Como ya vimos en la prueba de funcionamiento que hicimos al solicitar http://localhost/kumbiaCodeka/ nos mostró una pagina de presentación de KumbiaPHP. Esto es debido a que cuando instalamos kumbiaPHP en el archivo de configuración routes.ini(archivo para configuración de enrutamientos estáticos) que se encuentra en app/config/ tenemos la siguiente directiva / = pages/show/kumbia/info que le indica a kumbiaPHP que cada vez que se solicite la raiz de nuestra web debe redireccionar al controlador pages a su metodo/accion show pasando como parametro ‘kumbia/info’. este parámetro corresponde a una vista llamada info.phtml en el directorio app/views/pages/kumbia/. A fin de que podamos ver la pagina de presentacion de Codeka vamos a sustiturir esa directiva por la siguiente / = pages/show/presentacion.

Y para terminar con esa parte de Migrando Codeka a KumbiaPHP vamos a agregar el metodo initialize() en el controlador ApplicationController el cual podemos encontrar en la raiz de nuestra aplicacion es decir en el directorio kumbiaCodeka/app/.Este controlador es muy importante ya que del mismo heredan todos los controladores de mi aplicación y por lo tanto las configuraciones que haga en este controlador van a afectar a todos los controladores de mi aplicacion. En este caso vamos a agregar el método initialize() el cual se ejecuta antes de llamar al controller y al definirlo en el controlador ApplicationController este metodo sera heredado por todos los controladores de mi aplicacion. nuestro controlador ApplicationController debe quedar asi:

kumbiaCodeka/app/application_controller.php

<?php
/**
 * Todas las controladores heredan de esta clase en un nivel superior
 * por lo tanto los metodos aqui definidos estan disponibles para
 * cualquier controlador.
 *
 * @category Kumbia
 * @package Controller
 **/
class ApplicationController extends Controller {

    public function initialize ()
    {
        $this->template='principal';
    }
}

Al finalizar todas estas configuracion vamos a abrir nuestro navegador web y colocamos http://localhost/kumbiaCodeka/, si todo esta funcionando bien debería mostrarnos la siguiente imagen.

kumbiaCodeka

Agradezco de antemano cualquier comentario que puedan hacer a fin de mejorar este minitutorial. Tambien quiero aprovechar la oportunidad para agradecer a todo el equipo de desarrollo de kumbiaPHP por la ayuda prestada en relacion al uso del framework.

Bibliográfica:

wiki de KumbiaPHP

Manual PDF de KumbiaPHP Framework