Creación de una aplicación web

Veremos con una serie de sencillos pasos como se crea nuestra aplicación sin usar el generador, sino,todo a mano

Paso 1: Introducción y descarga

En la página web del proyecto encontrarás la última versión para descargar del framework, descárgala ya que puedes utilizarla para coordinar con la línea general del tutorial, que se hizo con la versión 0.1.1 [Enero-Febrero del 2008] Puedes utilizar el editor Zend Studio o Eclipse para llevar un mejor control de la creación de tu aplicación y de la depuración de la misma con información de variables, clases, objetos y otros bloques de código que se implementan en este documento. La página web completa y el código fuente lo puedes encontrar bajo licencia LGPL en el servidor de la forja de rediris, aquí. Cuando crees plantillas html, css, xml, también puedes editarlas dentro del editor. Puedes cambiar fácilmente las plantillas para ajustarlas a otra aplicación al igual que el código de la aplicación puedes reutilizarlo para cualquier otro proyecto. Puedes utilizar la galería de módulos de zenphp para insertar funcionalidades a tu aplicación: manejadores de formularios, manipuladores de imágenes, ajax, etc. Para ello consulta los documentos de diseño de zenphp en la forja de rediris del proyecto: introducción, organigramas, diseño de clases, manuales, tutoriales, etc. Para cambiar la plantilla general de tu aplicación, ve al directorio de /media/plantillas/es (o del idioma que sea) y modifica la base_web.html. Las imágenes irán en /media/img donde podrás añadir nuevos elementos para tu aplicación. * Una vez descargado zenphp, se descomprime en una carpeta dentro del servidor, si es el directorio de apache /var/www/usuario/html/ Paso a explicar entonces la jerarquía de directorios tomando este directorio: * /zenphp/ :: contiene el núcleo de zenphp, no deberíamos de tocar el contenido de éste directorio * /zenphp/zen.php :: donde configuraremos un par de constantes para el sitio web * /aplicaciones/ : contiene las clases de usuario,configuraciones de base de datos y: * modelos/ : donde guardaremos los modelos de datos de la aplicación * vistas/ : aquí se guardan los visualizadores (vista+controlador) de nuestra aplicación * ayudantes/ : algunas clases que sirven como ayuda de nuestra aplicación y se asocian a la clase principal * /media :: es el directorio donde guardaremos el contenido multimedia de la página web * media/plantillas/ :: aquí guardaremos todas las plantillas necesarias * media/plantillas/es/ :: "es" ,en el idioma por defecto, que se define en /zenphp/zen.php con ^{define('ZF_IDIOMA_DEFECTO', 'es');} de donde se toman las plantillas * media/idiomas/ :: directorio para almacenar subdirectorios de idiomas: * media/idiomas/es/ :: ejemplo de idioma,español por defecto, ficheros con las definiciones de constantes de idiomas, ejemplo: indice.php * media/idiomas/en/ :: idem …para el inglés, etc. * media/img/ :: aquí guardaremos las imágenes de la plantilla HTML * media/swf/ :: para almacenar los objetos flash * media/scripts/ :: contiene los ficheros javascript que utilizamos * media/etc/ :: resto de archivos: pdf, vídeos,lo que sea

Paso 2: Configuración y depuración

Configuración Opcional * Para mantenerlo todo muy ordenado, lo primero que tenemos que hacer después de copiar los ficheros,es tener a mano las plantillas,es decir, copiar los ficheros HTML,XML ,etc en el directorio de idioma por defecto: /media/plantillas/es/ ; copiar las imágenes en /media/img/, los objetos flash en /media/swf , los javascripts en /media/scripts/,etc. * Si queremos tener zenphp en otro directorio por motivos de seguridad o cualquier otro directorio, y con la constante ZF_DIR_PPAL_ZEN sabremos cuál es la ruta...,lo mismo ocurre con los demás: plantillas,idiomas,etc. aunque no aseguro si la versión de zenphp será totalmente estable por hacer esto,quizás haya que corregir alguna linea...

Si estamos usando Zend Studio para crear la aplicación, iremos a Proyecto -> Nuevo Proyecto y aparecerá el “Asistente de Proyectos”, pondremos el nombre, "aplicacion_local", pulsamos en “Siguiente” y ahora en “Añadir Directorio”, buscaremos ahora nuestro directorio del servidor y pulsaremos “siguiente” hasta finalizar comprobando nuestra configuración del servidor de depuración; en el caso de que necesitemos usar un directorio de FTP tendríamos que haber añadido el servidor antes de pulsar en “Nuevo Proyecto”. Ahora estamos en condiciones de empezar con la configuración de la aplicación. Para empezar abrimos el archivo /zen.php y configuramos las tres variables que necesitamos: ZF_SITIO_WEB, ZF_NOMBRE_SITIO, ZF_CORREO_ADMIN con nuestros valores del sistema.

Paso 3: Creación de la aplicación

• En el directorio de /aplicaciones del proyecto creamos: /aplicaciones/aplicacion.php,aplicaciones/aplicacion_admin.php, /aplicaciones/aplicacion.config.php y /aplicaciones/aplicacion.config.php
• Realizar todas las tareas de las plantillas: generar una plantilla base_web.html en /media/plantillas/es (idioma por defecto) donde colocar las etiquetas de #titulo#,#scripts#,#contenido#,#pie#,etc. **recortar todas las plantillas y mantener la estructura organizada: articulos/elementos.html, articulos/mostrar.html, productos/elementos.html, etc.
• Dar permisos de escritura al directorio media/img
• Crear los modelos, vistas y controladores en las clases aplicaciones/aplicacion.php

• Cuando zenphp intenta cargar la libreria comprimida zen_protoculous.js, si no existe en ningún directorio devuelve error. En todo caso intenta cargar...( Prototype y Scriptaculous combinados) comprueba si existe en /media/js ó /media/scripts ,si no existe intentará copiarla allí y si no puede,usará zenphp/contenido/js/zen_protoculous.js**

• Crear /index.php con la instancia de la clase <?php require_once('zenphp/zen.php'); zen___carga_aplicacion('aplicacion'); $ap = new MiProyecto(); $ap->enrutador->delegar(); ?>

• Crear /admin/ , /admin/index.php con el contenido como el del paso 10 pero para la interfaz de administración del CMS: <?php require_once('../zenphp/zen.php'); zen___carga_aplicacion('aplicacion_admin'); $ap_admin = new aplicacion_admin(); $ap_admin -> enrutador-> delegar(); ?>
• Cargar el editor Zend Studio y crear el proyecto, añadir el directorio del proyecto.
• Crear la base de datos ``` CREATE DATABASE aplicacion;

  ALTER DATABASE aplicacion DEFAULT CHARACTER SET utf8 COLLATE utf8_bin;

  -- Estructura de tabla para la tabla articulos

CREATE TABLE articulos ( ida int(11) NOT NULL auto_increment, titulo varchar(250) collate utf8_bin NOT NULL default '', HTML text collate utf8_bin, fecha date NOT NULL default '0000-00-00', imagen varchar(250) collate utf8_bin default NULL, tipo enum('articulo','evento','galeria') collate utf8_bin NOT NULL default 'articulo', PRIMARY KEY (ida) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=13 ;

--

-- Estructura de tabla para la tabla enlaces

CREATE TABLE enlaces ( ide int(11) NOT NULL auto_increment, titulo varchar(250) collate utf8_bin NOT NULL default '', url text collate utf8_bin NOT NULL, PRIMARY KEY (ide) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=3 ;

--

-- Estructura de tabla para la tabla galerias

CREATE TABLE galerias ( idg int(11) NOT NULL auto_increment, nombre varchar(250) collate utf8_bin NOT NULL default '', listado mediumtext collate utf8_bin, PRIMARY KEY (idg) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=3 ;

--

-- Estructura de tabla para la tabla noticias

CREATE TABLE noticias ( idn int(11) NOT NULL auto_increment, titulo varchar(250) collate utf8_bin NOT NULL default '', HTML text collate utf8_bin, fecha date NOT NULL default '0000-00-00', imagen varchar(250) collate utf8_bin default NULL, tipo enum('noticia','opinion','evento') collate utf8_bin NOT NULL default 'noticia', PRIMARY KEY (idn) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=12 ;

--

-- Estructura de tabla para la tabla usuarios

CREATE TABLE usuarios ( idu int(11) NOT NULL auto_increment, nombre varchar(75) collate utf8_bin default NULL, usuario varchar(16) collate utf8_bin NOT NULL default '', password varchar(32) collate utf8_bin NOT NULL default '', correo varchar(150) collate utf8_bin default NULL, nivel tinyint(2) NOT NULL default '1', PRIMARY KEY (idu) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=3 ;

``` * Añadir a /.htaccess:

<sup>AddDefaultCharset UTF-8</sup> * Añadir a La plantilla base_web.html: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> * Fichero de configuración de la base de datos <?php define('aplicacion_usuario','usuario'); define('aplicacion_servidor','localhost'); define('aplicacion_contrasena','password'); define('aplicacion_bd','nombre_bd'); ?>

• Crear la clase principal en /aplicaciones/aplicacion.php, ésta clase hace de central de contenido, es por asi decirlo, el centro neurálgico de toda aplicación. Es por eso que en la parte cliente hereda de zen_aplicacion y en la parte de administración hereda de zen_aplicacion_admin, en ésta segunda, todas las clases terminan por admin para facilitar su reconocimiento y distinguirlas en el espacio de nombres del conjunto de aplicaciones en un mismo directorio. El contenido de la clase aplicacion es el siguiente: • Una clase zen_html en la variable $html , para mostrar el contenido con una plantilla, que estará dentro de dicha clase HTML • Una clase zen_basedatos en la variable $bd que en nuestro caso será del tipo mysql y estará configurada por el fichero /aplicaciones/aplicacion.config.php • Una clase noticias que extiende de un modelo de datos y por lo tanto contiene un visualizador. Término acuñado por el autor para montar en una misma clase, una vista y un controlador que se asocian al modelo de datos para representar información. • Una clase artículos que dispone de la misma filosofía que las noticias pero se añaden otras opciones y campos a la tabla • Una clase galerias para mostrar una galería de imágenes en la web • Una clase enlaces para mostrar enlaces a otras webs ,administrables

El contenido de la clase aplicacion_admin es el mismo que el de la clase aplicacion pero las clases además disponen en su interfaz del visualizador (recordar que es el controlador+vista en uno) los formularios para altas/bajas/modificaciones de artículos,noticias,imágenes,etc.

Contenido de las clases de la aplicación /index.php: (recordar) ``` enrutador->establecer_direccion_base("/"); $aplicacion->enrutador->delegar(); $aplicacion->html->mostrar($aplicacion->contenido); ?>

```

/aplicaciones/aplicacion.php: ``` / class aplicacion extends zen_aplicacion { /* * Visualizador HTML para la clase * * @var html_aplicacion / var $html; /* * Clase para mostrar noticias * * @var noticias / var $noticias; /* * Constructor * @param str $inicializadores clases separadas por comas, a inicializar * @return prueba / function aplicacion($inicializadores=""){ parent::zen_aplicacion($inicializadores); $this->html =& new html_aplicacion($this); require_once('modelos/clase_noticias.php'); $this->noticias =& new noticias($this); } } /* * Para mostrar el HTML por pantalla con una plantilla * / class html_aplicacion extends zen_html { /* * Clase plantilla para leer y mostrar HTML * * @var zen_plantilla / var $plantilla; /* * Clase Aplicacion ppal * * @var aplicacion / var $padre; /* * Constructor * * @param aplicacion $_padre * @return html_prueba */ function html_aplicacion(&$_padre){ parent::zen_html($_padre); $c =& $this->padre->contenido; $c['scripts'] = ""; }

function index(){ $c =& $this->padre->contenido; $c['titulo'] = "Inicio"; $c['contenido'] = $this->plantilla->devolver_contenido("indice.html"); //$c['contenido'] = $this->padre->noticias->html->listado_indice();

 parent::index();

} } ?>

```

/aplicaciones/modelos/noticias.php_: ``` / var $padre; /* * Visualizador : vista + controlador en uno * * @var html_noticias / var $html; /* * Constructor de noticias * * @param aplicacion $padre * @return noticias */ function noticias(&$padre){ parent::zen_modelo_datos($padre,"idn,titulo,HTML,fecha,imagen,tipo","noticias",null,""); require_once(ZF_DIR_APLICACIONES.'vistas/clase_html_noticias.php'); $this->html =& new html_noticias($this); }

} ?>

```_

/aplicaciones/vistas/html_noticias.php : <?php class html_noticias extends zen_html_modelo_datos { /** * Clase de noticias asociada * * @var noticias */ var $padre; /** * Constructor del visualizador * * @param noticias $_padre * @return html_noticias */ function html_noticias(&$_padre){ parent::zen_html_modelo_datos($_padre); }

http://localhost/mi_aplicacion/ para probarlo... ;)

Copia del tutorial descargable

Hay una copia de este documento en PDF para la web de la AZA: descargar.