32
TUTORIAL DE QCODO

Tutorial Qcodo

Embed Size (px)

Citation preview

Page 1: Tutorial Qcodo

TUTORIAL DE

QCODO

Page 2: Tutorial Qcodo
Page 3: Tutorial Qcodo

ÍNDICE

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

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

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

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

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

6. DISEÑO DE LA APLICACIÓN…………………………………………………..

5

5

8

8

13

20

Page 4: Tutorial Qcodo
Page 5: Tutorial Qcodo

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

Page 6: Tutorial Qcodo

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

Page 7: Tutorial Qcodo

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

Page 8: Tutorial Qcodo

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

Page 9: Tutorial Qcodo

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

Page 10: Tutorial Qcodo

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

Page 11: Tutorial Qcodo

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

la que estamos, con los datos de las fila que se quieran cambiar, donde

cambiará los datos, los guardará, cancelará o borrará (figura 12).

11

Page 12: Tutorial Qcodo

Tutorial CakePHP

Figura 10. Tablas generadas

Figura 11. Panel draft

Figura 12. Editar filas en la misma página

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

12

Page 13: Tutorial Qcodo

Tutorial CakePHP

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

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.

13

Page 14: Tutorial Qcodo

Tutorial CakePHP

Figura 15. Tabla Autor con los campos FK modificados

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..

14

Page 15: Tutorial Qcodo

Tutorial CakePHP

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 Password2protected $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’

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.

15

Page 16: Tutorial Qcodo

Tutorial CakePHP

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

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.

16

Page 17: Tutorial Qcodo

Tutorial CakePHP

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.

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.

17

Page 18: Tutorial Qcodo

Tutorial CakePHP

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;

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

18

Page 19: Tutorial Qcodo

Tutorial CakePHP

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

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

19

Page 20: Tutorial Qcodo

Tutorial CakePHP

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.

<?phprequire('../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).

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";?>

20

Page 21: Tutorial Qcodo

Tutorial CakePHP

</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.

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.

21

Page 22: Tutorial Qcodo

Tutorial CakePHP

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

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

22

Page 23: Tutorial Qcodo

Tutorial CakePHP

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

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.

23

Page 24: Tutorial Qcodo

Tutorial CakePHP

Figura 35 Tabla Libro

24

Page 25: Tutorial Qcodo

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.

<?phprequire('../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

Page 26: Tutorial Qcodo

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

Page 27: Tutorial Qcodo

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