TUTORIAL DE

QCODO
 ÍNDICE

1. INTRODUCCIÓN………………………………………………………………… 5

2. CONFIGURACIÓN………………………………………………………………. 5

3. CONCEPTOS SOBRE Qcodo……………...………………………………...... 8

4. EJEMPLO COMPLETO…………………………………………………………. 8

5. AÑADIR FUNCIONALIDAD…………………………………………………….. 13

6. DISEÑO DE LA APLICACIÓN………………………………………………….. 20
 Tutorial Qcodo

1. INTRODUCCIÓN

Qcodo es un framework para programar aplicaciones Web que sigue la

arquitectura MVC (Modelo Vista Controlador: http://es.wikipedia.org/wiki/MVC).
Para su funcionamiento requiere un servidor Web Apache, con PHP 5 y un
servidor de base de datos MySQL (aunque también trabaja con ‘MSSQL’ y
‘Postgres 8.0’). Existen herramientas como XAMPP que integran ambos servicios
en una única instalación (http://www.apachefriends.org/en/xampp.html). El
presente tutorial se ha realizado con la versión 1.6.0 de XAMPP, que incorpora las
versiones 2.2.4 de Apache, 5.2.1 y 4.4.5 de PHP y 5.0.3.3 de MySQL. La versión
de Qcodo con la que se ha trabajado y cuyo funcionamiento se va a describir es la
versión estable 0.3.21, Beta 3 de febrero del 2007. Esta herramienta se puede
descargar de su web oficial:

http://www.qcodo.com/

Para seguir este tutorial se necesitan tener conocimientos previos de

programación en PHP, de gestión de MySQL y conceptos teóricos de bases de
datos.

2. CONFIGURACIÓN

Una vez instalado un servidor (Apache+MySQL+PHP). Se crea una carpeta

dentro de la web de nuestro servidor en la que descomprimir los ficheros de
Qcodo. En nuestro caso, dicha carpeta se llamará ‘proyecto_qcodo’, y
accederemos a ella vía web mediante la dirección
‘http://localhost/proyecto_qcodo’. Para su configuración hay que seguir los
siguientes pasos.

• La carpeta proyecto_qcodo contiene:

o _README.txt: instrucciones para la instalación de Qcodo.
o _LICENCE.txt: licencia de Qcodo.

5
 Tutorial CakePHP

o _devtools_cli: contiene comandos básicos para desarrollar las

herramientas de Qcodo.
o wwwroot: este directorio contiene todos los archivos para la
ejecución de Qcodo y una carpeta con algunos ejemplos.
• El siguiente paso es mover todos los archivos que hay dentro de la carpeta
’wwwroot’ a la carpeta ‘proyecto_qcodo’. Quedando como se muestra en la
figura 1.

Figura 1. Distribución de las carpetas en Qcodo

• Posteriormente se darán los permisos de escritura a la carpeta

‘proyecto_qcodo’, para que el ‘code generador’ de Qcodo (generador de
código) pueda crear el código en las carpetas destinadas a ello.
• Tras lo anterior se configurará Qcodo, para indicarle donde están todos los
archivos. El primer paso es ir a ‘[…]/proyecto_qcodo/includes’ y abrir el
archivo ‘configuration.inc.php’. Dentro de éste en la línea 60 se indicará
donde se encuentra la carpeta ‘proyecto_qcodo’. Posteriormente sobre la
línea 62 se escribirá el nombre de la carpeta que contiene el código de
Qcodo, es decir, en nuestro caso, ‘proyecto_qcodo’, quedando como en la
figura 2.

6
 Tutorial CakePHP

60. define (‘__DOCROOT__’,’c:/Archivos de programa/xampp/htdocs/’);

61. define (‘__VIRTUAL_DIRECTORY__’,’’);
62. Define (‘__SUBDIRECTORY__’,’proyecto_qcodo’);
Figura 2. Configuración de Qcodo

• A continuación, sobre el mismo archivo ‘configuration.inc.php’, se

configurará la base de datos, especificando los parámetros de la conexión:
el motor de base de datos (MySqli5), el host, el login, la contraseña de la
base de datos y su nombre (deberá estar creada de antemano), que en
este tutorial será ‘proyecto_qcodo’ (ver figura 3).

'adapter' => 'MySqli5',

'server' => 'localhost',
'port' => null,
'database' => 'proyecto_qcodo',
'username' => 'elisa',
'password' => 'medina',
'profiling' => false)));
Figura 3. Configuración de la base de datos

Ahora accederemos a la dirección ‘http://localhost/proyecto_qcodo’, para ver la

pantalla principal de Qcodo (ver figura 4).

Figura 4. Pantalla principal de Qcodo

7
 Tutorial CakePHP

3. CONCEPTOS SOBRE Qcodo

Es un framework orientado a objeto, proporcionando una aplicación muy rápida

para el desarrollo de la plataforma. El framework tiene dos componentes
principales: el Code Generador y Qform.

The Code Generador (Generador de código).

A partir de la base de datos, Qcodo es capaz de generar el código de forma muy

rápida. Qcodo genera no solo el código objeto sino también páginas HTML
básicas donde se pueden crear, restaurar, modificar y borrar los objetos. Todo
esto sin escribir nada de código. Permite desarrollar lógica de negocios,
implementar usabilidad, etc., sin gastar tiempo en crear código HTML.

Esta implementación y customización esta escrita en código base separada del

código que es generado. Así que, los cambios realizados en la base de datos en
PHP será preservada de HTML, incluso cuando el código se regenere.

Qforms.

Qforms permite mantener la lógica por un lado y el diseño por otro. Una ventaja
que tiene este framework es que la lógica y la presentación están dentro de una
arquitectura que maneja los formularios, control y estado de la web, ofrece una
plataforma separada para desarrolladores, así pueden escribir controles. Con
ellos conseguimos menos código repetido y controles que pueden ser agrupados
dentro de las clases separadas.

4. EJEMPLO COMPLETO

Relaciones entre tablas

La normativa de Qcodo para crear relaciones entre tablas en la base de datos es

la siguiente:

• De uno a uno: no sigue ninguna normativa especial.

• De uno a muchos: para crear esta relación en la base de datos hay que
crear dos tablas, por ejemplo: libro y editorial, por tanto 1 libro tiene una
editorial pero una editorial puede tener N libros. Siguiendo este ejemplo en

8
 Tutorial CakePHP

libro escribiremos una FK con el nombre de la tabla que esta relacionada

seguido del sufijo _id, quedado ‘editorial_id’.
• De muchos a uno: se haría igual que la relación de ‘uno a muchos’.
• De muchos a muchos: se hace escribiendo en la base de datos el nombre
de dos tablas, y la tabla que relaciona las dos anteriores debe llevar un
nombre seguido del sufijo ‘_assn’. Ejemplo: para relacionar autor y libro se
harán tres tablas: ‘autor’, ‘libro’ y ‘un_nombre_assn’.
• Relaciones reflexivas: se harían igual que las relacions ‘1:N’ y ‘N:1’.

Primer paso.

CREATE TABLE autor (

id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
nombre VARCHAR(50) NOT NULL,
apellido VARCHAR(50) NOT NULL,
fecha_nacimiento DATE,
fecha_defuncion DATE,
CONSTRAINT PK_autor PRIMARY KEY (id),
KEY IDX_autor_1(nombre)
)
ENGINE=InnoDB;
CREATE TABLE libro (
id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
autor_id INTEGER UNSIGNED NOT NULL,
editorial_id INTEGER UNSIGNED NOT NULL,
tema_id INTEGER UNSIGNED NOT NULL,
titulo VARCHAR(100) NOT NULL,
num_paginas VARCHAR(20) NOT NULL,
CONSTRAINT PK_libro PRIMARY KEY (id),
KEY IDX_libro_1(autor_id),
KEY IDX_libro_2(editorial_id),
KEY IDX_libro_3(tema_id),
KEY IDX_libro_4(titulo)
)
ENGINE=InnoDB;

CREATE TABLE escribe_assn (

autor_id INTEGER UNSIGNED NOT NULL,
libro_id INTEGER UNSIGNED NOT NULL,
CONSTRAINT escribe_assn PRIMARY KEY (autor_id, libro_id),
KEY IDX_escribeassn_1(autor_id),
KEY IDX_escribeassn_2(libro_id)
)

ENGINE=InnoDB;
Figura 7. Tablas relacionadas de muchos a muchos

Crear las tablas en la base de datos MySQL, la cual se hace mediante el motor de
almacenamiento de InnoDB, ya que con MyISAM no funcionarían las relaciones

9
 Tutorial CakePHP

entre las tablas. Los campos que son clave primaria se identifican con “id”. Estas
se identifican escribiendo la siguiente línea.

CONSTRAINT PK_autor PRIMARY KEY (id),

También habría que indicarle el campo que se quiera ver, por ejemplo en la tabla
‘libro’ se quiere ver el campo ‘nombre’ de la tabla ‘autor’.

KEY IDX_autor_1(nombre)

Por tanto se escribe la palabra ‘KEY’, seguido de ‘IDX’_nombre_tabla_1, Se

pondría 1 por ser la primera PK o FK en dicha tabla?o por ser el primer
campo indexado???. Si se tuviera otra relación como por ejemplo la relación con
la tabla libros, se pondría 2, por ser el segundo campo indexado.

KEY IDX_libro_2(autor_id),

Véase un ejemplo en la figura 7.

Segundo paso

Ir al navegador, escribid ‘http://localhost/proyecto_qcodo’ cargándose una página

con tres enlaces:(figura 8):

Figura 8. Página principal de Qcodo

• /proyecto_qcodo/_devtools/codegen.php: esta función genera las

tablas. Saldrá una pantalla como en la figura 9, donde muestra el código
generado para la base de datos, así como las tablas que están

10
 Tutorial CakePHP

relacionadas y las relaciones entre ella, por ejemplo al mirar esta figura se
ve como en la tabla libros hay 5 tablas relacionadas, mientras que en la
tabla editorial no tiene ninguna relación. En el caso que algo no hubiera
funcionado correctamente saldría un mensaje de error.

Figura 9. Primer enlace de la página principal de Qcodo

• /proyecto_qcodo/form_draft: genera las vistas de los formularios de la

base de datos. Por una parte genera un enlace para cada tabla, tanto para
ver la tabla como para introducir un dato nuevo. Pero algo que lo
caracteriza de algunos frameworks es un menú (panel draft) donde
muestra todas las tablas (figura 10). Al pinchar en este icono, panel draft,
se despliega el menú con todos los formularios de las tablas de la base de
datos, al elegir una tabla, aparecerá una lista con todos los datos que
contenga. Para cada fila de datos se pueden editar y crear una fila nueva
(figura 11). Al pulsar sobre editar, generará otra tabla debajo de la tabla en

11
 Tutorial CakePHP

la que estamos, con los datos de las fila que se quieran cambiar, donde
cambiará los datos, los guardará, cancelará o borrará (figura 12).

Figura 10. Tablas generadas

Figura 11. Panel draft

12
 Tutorial CakePHP

Figura 12. Editar filas en la misma página

• /proyecto_qcodo/examples: donde hay varios ejemplos de Qcodo.

5. AÑADIR FUNCIONALIDAD

Mostrar el nombre de la clave primaria y no el identificador

Al mirar la figura 12 o cualquier tabla donde aparezcan FK, se ve que Qcodo no

muestra los nombres (de los libros en este caso) sino los objetos (libro object 1,
libro object 2, etc.), esto se debe a que QCodo no entiende que objeto es el que
tiene que mostrar. Por tanto se tendrá que cambiar el dato objeto. Teniendo en
cuenta que QCodo crea dos archivos para cada tabla, únicamente hay que
modificar los archivos que están en ‘[…]/proyecto_qcodo/includes/data_classes’.

Para entenderlo mejor se hará un ejemplo con la tabla Autor. Dentro de la carpeta
‘[…]/proyecto_qcodo/includes/data_classes’., se abrirá el archivo ‘autor.class.php’,
donde aparecerá la función, ‘function __toString(),‘ como se muestra en la figura
13. Dentro de ella hay un ‘sprintf’ en la que aparece ‘Autor Object’ que es lo que
aparecía en la tabla antes del nombre, p.e ‘Autor Object Marta’, como preferimos
que salga el nombre solo, pues se quitará ‘Autor Object’. Luego también se
cambiará ‘intId’, ahora no queremos que aparezca un ‘entero’ sino un ‘string’, por

13
 Tutorial CakePHP

tanto escribiremos ‘str’ y a continuación en vez de la ‘id’ pondremos el

nombre/nombres del campo (o campos) de la tabla, por tanto, siguiendo el
ejemplo, se escribirá ‘strNombre’, tal como aparece en la figura 14.

public function _toString() {

return sprintf (‘Autor Object %s, $this->intId’);
}
Figura 13. Función que genera Qcodo

public function __toString() {

return sprintf('%s %s', $this->strNombre, $this->strApellido);
}
Figura 14. Función modificada para que salgan dos parámetros: el nombre y el apellido

Esto que se ha realizado sobre la tabla ‘autor’, habrá que hacerlo en todas las
tablas que tengan un campo relacionado con otra tabla, así como en la tabla
‘libro’, donde se dirá que el objeto sea el ‘titulo’ del libro. Quedando las tablas
como aparecen en la figura 15. Donde en la tabla autor aparecen los títulos de los
libros en vez de los objetos.

Figura 15. Tabla Autor con los campos FK modificados

14
 Tutorial CakePHP

Crear campo password

• En la mayoría de las aplicaciones Web, nos piden una contraseña, pero

esto tiene dos peculiaridades.
o Generalmente hay dos campos llamados ‘password’, para
comprobar que en los dos campos se ha escrito lo mismo.
o Deben ser caracteres, por seguridad, para que los demás no las
puedan leer.

En la tabla ‘usuario’ de la base de datos solo se ha creado por defecto, un campo

para el password, por tanto ahora hay que crear otro campo ‘password’, para que
posteriormente compruebe que en ambos campos se ha escrito lo mismo. Esto se
realizará para mostrar como se pueden modificar los formularios creados por el
generador de Qcodo..

Para añadir un campo extra, tendremos que extender la clase ‘UuarioEditForm’

que es una clase ‘Qform’; por tanto se encuentra dentro de
‘[…]/proyecto_qcodo/form_draft/Usuario_edit.php’, en ella se añadirá un campo,
esto se hace poniendo ‘protected $tipo_campo_nombre_campo’, por ejemplo
‘protected $txtPassword2’.

Ahora para darle funcionalidad, iremos a ‘[…]/proyecto_qcodo/includes/

formbase_classes_generated/UsuarioEditFormBase.class.php’, y copiaremos el
código que Qcodo ha generado para Password en el archivo
‘[…]/proyecto_qcodo/form_draft/Usuario_edit.php’, modificando Password por
Password2

class UsuarioEditForm extends UsuarioEditFormBase {

// Añadiendo el campo Password2
protected $txtPassword2;
protected function txtPassword2_Create() {
$this->txtPassword2 = new QTextBox($this);
$this->txtPassword2->Name = QApplication::Translate('Password2');
$this->txtPassword2->Text = $this->objUsuario->Password;
$this->txtPassword2->MaxLength = Usuario::PasswordMaxLength;
}
Figura 16. Código para escribir el segundo campo ‘password’

15
 Tutorial CakePHP

Si ahora vamos al navegador, NO saldrá el Password2, eso es debido a que no

se ha escrito la parte de diseño de ese campo, para ello se tendría que ir a:

‘[…]/proyecto_qcodo/form_drafts/generated/Usuario_edit.tpl.php’.

Pero la parte del diseño es generada por QCodo, por tanto se debe mover el
archivo de la carpeta ‘[…]/proyecto_qcodo/form_drafts/generated’ a la carpeta
[…]/proyecto_qcodo/form_drafts’, quedando así (de no mover el archivo de
carpeta se volvería a regenerar el código borrando los cambios realizados):

• ‘Forms_drafts/usuario_edit.php’: esto es la parte lógica, donde hay que

escribir código PHP.
• ‘Forms_drafts/generated/usuario_edit.tpl.php’: la parte de diseño, pero
como esta parte es generada por Qcodo, no dejaría sobrescribir, por ello
habría que moverá a la extensión que indico en el siguiente punto
• ‘Forms_drafts/_usuario_edit.tpl.php’: la parte de diseño se tendrá que
mover a esta extensión.

Este cambio de extensión hay que indicarlo en ‘usuario_edit.php’(justo en la

última línea de código de dicho archivo), es decir, en la parte lógica, quedando de
la siguiente forma:

UsuarioEditForm::Run('UsuarioEditForm','usuario_edit.tpl.php')

Una vez cambiada la extensión y el archivo, solo falta escribir el código en el

archivo de diseño, es decir en ‘[…]/proyecto_qcodo/form_drafts
/_usuario_edit.tpl.php’. En este archivo está el diseño de todos los campos
creados hasta ahora (nombre, apellido, etc.) pues a continuación se creará el
campo ‘password2’.

<?php $this->txtPassword2->RenderWithName(); ?>

<br class="item_divider" />

Hasta ahora solo se han creado dos campos (password, password2), ahora se
validarán para que en los dos campos tengan los mismos valores. Para ello se
añadirá una pequeña función en ‘usuario_edit.php’ (en la parte lógica), con el fin

16
 Tutorial CakePHP

que al darle al botón ‘save’ (guardar), compruebe que en ambos campos hayan
los mismos valores. En la figura 17 se mostrará el código.

protected function btnSave_Click($strFormId,$strControlId,$strParameter){

if($this->txtPassword2->Text != $this->txtPassword->Text){
$this->txtPassword->Warning = "Las contraseñas no son iguales";
$this->txtPassword2->Warning = "Las contraseñas no son iguales";
return;
}
parent::btnSave_Click($strFormId, $strControlId, $strParameter);
}
Figura 17 Código para obligar que dos campos sean iguales

Cuando se introducen valores diferentes en password y password2, salen dos

mensajes diciendo que “las contraseñas no son iguales”, como se muestra en la
figura 18.

Figura 18. Resultado de mostrar dos contraseñas distintas

Una vez hecho todo esto, en la Figura 18, se pueden leer las contraseñas, esto es
un error, ya que las contraseñas deben aparecer con caracteres. Entonces habría
que hacerlo con objetos. Por ello el objeto del campo password es QTextBox, y
sobre éste se pueden agregar colores, estilos CSS, posiciones, etc. Y también
estilos al password. QtextBox tiene una propiedad llamada TextMode. Esta
propiedad coge los objetos como valores válidos, y estos valores son:

• SingelLine (por defecto en QTextBox)

• Multicine: hace el campo más grande.

17
 Tutorial CakePHP

• Password: pasa las letras a asteriscos.

Para cambiar el valor por defecto de QtextMode a Password solo hay que
escribirlo como muestro en la figura 19.

$this->txtPassword2->MaxLength = Usuario::PasswordMaxLength;
$this->txtPassword2->TextMode = QTextMode::Password;
$this->txtPassword->TextMode = QTextMode::Password;
Figura 19. Cambia las propiedades de QTextMode

A continuación en la figura 20 se muestra como quedarían los campos con la

propiedad password.

Figura 20. Campos con asteriscos

ENCRIPTAR

Además Qcodo también permite encriptar las contraseñas. Para encriptar

contraseñas se utiliza la función sha1(), esta función se escribirá dentro de
usuario_edit.php (parte lógica), dentro de la función stn_Save.

protected function btnSave_Click($strFormId, $strControlId,$strParameter){

if ($this->txtPassword2->Text != $this->txtPassword->Text){
$this->txtPassword->Warning = "Las contraseñas no son iguales";
$this->txtPassword2->Warning = "Las contraseñas no son iguales";
return;
}
$this->txtPassword->Text = sha1($this->txtPassword->Text);}
Figura 21. Función para encriptar

Sin embargo tal como está ahora mismo si se selecciona sobre ‘guardar/editar’,
pierde los caracteres y salen las letras, es decir la contraseña sin encriptar, por
ello, lo primero que se hará será crear una variable nueva

• Dentro de la clase ‘UsuarioEditForm’: se creará la variable Protected

$oldPassword
• En el ‘form_create’: $this->oldPassword = $this->txtPassword2->Text;

18
 Tutorial CakePHP

En btnSave_Click se escribirá lo mismo que en la figura 22.

if ($this->oldPassword != $this->txtPassword->Text){
$this->txtPassword->Text = sha1($this->txtPassword->Text);
$this->oldPassword = $this->txtPassword->Text;
}
Figura 22. Encriptar contraseñas

Figura 23. Tabla formulario de autores y listado de los mismos

TRADUCCIÓN DE ETIQUETAS.

En este framework todas las etiquetas están en inglés, etiquetas como: delete
(borrar), create (crear), next (siguiente), previous (anterior). Para traducirlas a
cualquier idioma, Qcodo ha creado hojas en las que traduce cada etiqueta a cada
idioma, pero aún así es una labor un poco lenta, ya que hay que ir a la hoja
“es.po”, situada en la carpeta ‘[…]/proyecto_qcodo/includes/qcodo/_core/i18n’ y
mirar cada etiqueta, una por una, ir buscando la dirección e ir traduciéndolas.
Haciendo todo ello solo se cambian algunas etiquetas. Para cambiarlas todas, hay
que ir, clase por clase, revisando cada etiqueta, así como en cada archivo
generado por los formularios creados (la parte lógica y la de diseño para editar el
autor, la parte lógica y la de diseño para el listado del autor, etc.).

En cada hoja las etiquetas a traducir vienen con la etiqueta

‘QApplication::Translate ('View List')’, donde se cambiaran lo que hay entre
paréntesis, quedando ‘QApplication::Translate('Mostrar lista')’.

En la Figura 24, se muestra el formulario de la tabla autores. En esta tabla se

observa el listado de todos los autores que se han creado en la base de datos.
Pero después de traducir todas las etiquetas de QCodo, ha quedado sin traducir

19
 Tutorial CakePHP

los títulos de las tablas, ya que cuando genera los listados, Qcodo escribe el
nombre de la tabla en plural (plural inglés), por esa razón escribe Autors, en vez
de Autores (en éstas no está la función template, pero si se puede quitar el código
y ponerlo como queramos). El resto de palabras como: ‘listado de’, ‘Resultados’,
‘Anterior’, ‘Siguiente’, ‘Crear autor’ e ‘Ir a modelos de formularios’, están en
castellano.

Figura 24. Traducción de etiquetas

6. DISEÑO DE LA APLICACIÓN

Una vez creados la aplicación, se cambiarán todas las vistas, para ello se va a
crear una carpeta nueva dentro de ‘[…]/proyecto_qcodo/vista1’, que contenga tres
páginas: index.php, header.inc y footer.inc, con el único propósito de ahorrar
código. A partir de ahora, todos los archivos que se creen en Qcodo deben tener
la siguiente forma:

<?include "header.inc";?>
CONTENIDO
<?include "footer.inc";?>
Figura 25. Incluir header y footer a cada archivo

• header.php: este archivo será la cabecera de las páginas Web creadas, por
tanto en el se pueden aplicarán estilos CSS así como imágenes.

<?php
require('../includes/prepend.inc.php');
...
Figura 26. Todos los archivos deben llamar a la función ‘prepend.inc.php’

A continuación se escribirá el código HTML y CSS, incluyendo en éste el

menú (figura 27).

20
 Tutorial CakePHP

• Menu.inc: en este menú se pueden poner los enlaces que se crean

necesarios, en este caso se va a poner algunas tablas como: libro y autor.
(figura 28).
• Footer.inc: en los pies de las páginas solo se cerrarán las etiquetas
abiertas en header.inc (figura 29).

<html>
<head>
<title>Time Track demo using QCodo</title>
<style>
TD, BODY{font: 12px <?php echo QFontFamily::Verdana; ?>; }
.title{font: 30px <?php echo QFontFamily::Verdana; ?>; font-weight: bold;
margin-left:-2px;}
.title_action{font: 12px <?php echo QFontFamily::Verdana;?>;
font-weight: bold; marginbottom:-4px;}
.item_divider{line-height: 16px;}
.heading{font: 16px <?php echo QFontFamily::Verdana;?>; font-weight: bold;}
</style>
</head><body>
<div class="title_action">Time Track demo using QCodo</div>
<ul>
<?include "menu.inc";?>
</ul>
Figura 27. Incluir estilos CSS y el menú

<a href="form_drafts/libro_list.php">Libro</a> |
<a href="form_drafts/autor_list.php">Autor</a> |
Figura 28. Incluir enlaces en Qcodo

...</body>
</html>
Figura 29. Cerrar etiquetas

• Index.php: se incluirán: la cabecera, los pies y el contenido necesario. En la

Figura 30, se muestra el resultado de la página principal.

Figura 30. Página Principal de Qcodo

Después de crear el menú junto con la cabecera, es el momento de dar el último

paso. Toda aplicación Web debe tener un diseño fácil de entender, pues mediante
estilos CSS y con cualquier programa de diseño se puede crear un diseño web en
esta herramienta.

21
 Tutorial CakePHP

En este caso se va a utilizar una imagen para la cabecera diseñada en un

programa de diseño, Fireworks, y cinco botones diseñados también con el mismo
programa, todo ello junto con estilos CSS. Tal como se muestra en la figura 31.

Figura 31. Menú para todas las páginas

A continuación se va a ir diseñando/modificando cada página Web que ha

generado Qcodo. En la página principal hay cinco botones para que nos
redireccionen a cada una de las tablas y un breve texto realizado con HTML y
CSS.

Página principal lleva los cinco botones para acceder a las cinco tablas, estos
botones forman parte de la cabecera, por tanto si creáramos más tablas solo se
tendría que modificar los cambios en la cabecera, afectando así a toda la
aplicación. Esta página quedaría como en la figura 32 y 33.

<? include "header.inc" ?>

<br><br><br><br><br><br><br>

<div class="title1" align="center">BIBLIOTECA</div>

<div class="item_divider" align="center"/>
<span class="heading1" align="center"><br><br>

Esta Web esta realizada por el programa QCodo, <br>

en ella se han hecho las tablas básicas de una <br>
biblioteca. Cada tabla se ha generado por Qcodo. <br>
Mientras que el diseño se ha generados con <br>
programas de diseño y CSS <br>

</div><br /><br />

<br /><br /><br />

<? include "footer.inc" ?>

32. Código para la página principal

Formulario libro, en ella aparece la lista de libros donde se puede ver, editar o
crear libros (figura 34). Al darle a ‘libro’ saldrá otro formulario donde se han creado
los siguientes campos: título, número de páginas, y tres listbox, con los que se

22
 Tutorial CakePHP

puede enlazar el libro con un autor, un tema y una editorial. Pero como la tabla
libro tiene una relación N:N con las tablas tema y autor, pues también aparecerán
dos textarea para que puedan ver/modificar/crear más temas o autores por cada
libro, tal como se muestra en la figura 35.

Figura 33. Página principal

Cuando Qcodo genera las listas de cualquier tabla, como puede ser la de libro,
genera una primera fila donde se ven todos los alumnos que hay (en la figura 34
indica que hay 11 artículos). En cada tabla hay 10 filas y en la parte superior
indica las páginas que hay, en esta tabla hay 2 páginas. Todo ello se puede
modificar o cambiar.

Figura 34. Lista de Libros

23
 Tutorial CakePHP

Si se observa la figura 34, se puede ver como las filas están ordenadas por el
identificador (id), pero se podría ordenar por cualquier otra columna, solo con
pulsar encima de la columna que queramos ordenar, como puede ser nombre,
apellido, fecha de nacimiento o fecha de defunción.

Figura 35 Tabla Libro

24
 Tutorial CakePHP

JESUJA, a continuación muestro un ejemplo de QForm, pero puesto que la

diferencia entre Qform y generador no es la que dijimos en clase, no se si poner
otro ejempolo que no tiene nada que ver con las bases de datos, o no ponerlo, de
todas yo he hecho lo que hay a continuación, pero eso que no si ponerlo o no

Para entender el funcionamiento de un Qform, se va a realizar a continuación una

estructura que necesita un Qform, para ello se necesitarán dos archivos:

Para crear un QForm se deben crear dos archivos, dentro de

‘[…]/proyecto_qcodo/includes’:

• Ejemplo.php (figura 5): contiene la lógica de la aplicación.

• Ejemplo.tpl.php (figura 6): contiene la presentación de la aplicación.

<?php
require('../includes/prepend.inc.php');

class Ejemplo extends QForm {

protected $intNumeroClicks;
protected $lblNumeroClicks;
protected $btnButton;
protected function Form_Create() {
$this->intNumeroClicks = 0;
$this->lblNumeroClicks = new QLabel($this);
$this->lblNumeroClicks->Text = $this->intNumeroClicks;
$this->btnButton = new QButton($this);
$this->btnButton->Text = "Pulse aqui";
$this->btnButton->AddAction(new QClickEvent(), new
QServerAction('btnButton_Click'));
}

protected function btnButton_Click($strFormId, $strControlId,

$strParameter) {
$this->intNumeroClicks++;
$this->lblNumeroClicks->Text = $this->intNumeroClicks;
}
}
Ejemplo::Run('Ejemplo');
?>
Figura 5. Ejemplo1.php

<html>
<head>
<title>Primer Ejemplo</title>
</head>
<body>

<?php $this->RenderBegin(); ?>

<?php $this->lblNumeroClicks->Render(); ?>
<br/><br/>
<?php $this->btnButton->Render(); ?>

25
 Tutorial CakePHP

<?php $this->RenderEnd(); ?>

</body>
</html>
Figura 6. Ejemplo1.tpl.php

Figura 6. Ejemplo1.tpl.php

En el ejemplo anterior se pretende conseguir una función en la que por cada vez
que se pulse sobre ‘pulse aquí’, incrementará el número que hay en la parte
superior del botón.

A continuación se explicará detalladamente la función cada línea de código:

require('../includes/prepend.inc.php'); con este comando se llama a la página

PHP para cargar el framework Qcodo. Es obligatorio escribir esto en cada página
donde queramos usar QForm.

class Ejemplo1 extends QForm {: para crear un QForm basado en la aplicación,

hay que crear un nuevo objeto ‘Ejemplo1’, el cual derivamos de QForm.

protected function Form_Create(){...}: el método Form_Create() llama por

primera vez a la aplicación para que sea cargada. Para realizar cualquier cambio
en Qcodo (o QForm) se hará sobre esta función.

Ejemplo1::Run('Ejemplo1'); llama al método de la clase padre (QForm),

ejecutando la aplicación.

En ejemplo.tpl.php, todo el código es HTML excepto las líneas siguientes:

<?php $this->RenderBegin();?>
<?php $this->RenderEnd();?>

Ambas necesarias para manejar el estado de QForm.

26
 Tutorial CakePHP

Todas las clases de Qcodo se pueden encontrar en: http://api.qcodo.com/.

de libro donde se ven autores y temas relacionados.

27