Pautas para el diseño de un proyecto web

Pautas para el diseño de un proyecto web Mayo 2005 Jordi Llonch jordi@laigu.net http://creativecommons.org/licenses/by-sa/2.0/

2 Pautas Estructura del proyecto Separar lógica y diseño: Plantillas Archivos de configuración Idiomas Capa abstracción base de datos Objectos de datos Error handler Documentar código: phpdocumentor Crear PDFs: HTMLDOC, FOP, ClipPDF... XMLHttpRequest y JPSpan

3 Estructura del proyecto (1) Usualmente para el desarrollo de nuestro proyecto nos apoyamos en un framework. En esta estructura la aplicación a desarrollar se encontrará en la carpeta web. Estructura: config archivos de configuración de nuestro proyecto ej: // Paths define ("PATH_ROOT", "/var/www/proj/atlasweb-prj/"); // Url define ("URL_HOST", "/"); define ("URL_ROOT", URL_HOST."Proj/AtlasWeb-prj/"); // Base de datos define ("DB_HOST", "localhost"); define ("DB_USER", ""); define ("DB_PASS", ""); define ("DB_NAME", "Atlas");

4 Estructura del proyecto (2) Estructura: lang lib menu archivos de soporte de multidiomas librerías própias (ej. capa de abstracción a la base de datos) si queremos utilizar librerías no propías podríamos crear dentro de esta carpeta otra con nombre external (ej. Smarty) también podemos poner aquí un error handler propio en caso que se trate de un proyecto con backoffice podemos utilizar algun sistema que nos genere un menú.

5 Estructura del proyecto (3) Estructura: motor podríamos utilizar algún motor que nos genere directamente HTML y algunos scripts que nos automaticen procesos como el de mantenimiento de datos de una tabla (alta, baja, modificación...) notes notas y comentarios del proyecto templates plantillas de cabecera, pies de página, hoja de estilo... (pensando en el backoffice) tmp donde se crearán archivos temporales a esta carpeta se le suelen tener que dar permisos de escritura

6 Estructura del proyecto (4) Estructura: web en esta carpeta desarrollaremos toda la lógica del nuestro proyecto dentro tenemos otra estructura: atlas: es un nombre de ejemplo, puede ser el nombre abreviado de nuestro proyecto img: imagenes que va a necesitar nuestro proyecto lib: librerías no genéricas, exclusivas para el proyecto login: sistema de acceso al backoffice obj-data: clases de abstracción de datos templates: plantillas (para Smarty) templates_c: compilación de las plantillas (Smarty)

7 Separar lógica y diseño: Plantillas Nunca se debe mezclar código PHP y HTML Código mantenible Un diseñador gráfico se puede ocupar del diseño Podemos utilizar dos técnicas: Librería de widgets HTML Plantillas (por ejemplo Smarty Engine)

8 Archivos de configuración Definiremos los parámetros que configuran nuestro proyecto con constantes. Todos nuestros scripts incluirán el archivo de configuración En la configuración definiremos: Paths y URLs Acceso a base de datos El Error Handler a utilizar... // Paths define ("PATH_ROOT", "/var/www/proj/atlasweb-prj/"); // Url define ("URL_HOST", "/"); define ("URL_ROOT", URL_HOST."Proj/AtlasWeb-prj/"); // Base de datos define ("DB_HOST", "localhost"); define ("DB_USER", ""); define ("DB_PASS", ""); define ("DB_NAME", "Atlas");

9 Idiomas Si queremos que nuestro proyecto soporte multidioma podemos definir un array con las traducciones y una función que realice la traducción de conceptos: $GLOBALS["trans"] = array( // General "Adreces"=>"Direcciones", "Adult"=>"Adulto", "Afegir"=>"Añadir", "Afegir Document"=>"Añadir Documento", "Afegir reserva"=>"añadir reserva", "Agència"=>"Agencia", "Agències"=>"Agencias", "Agrupar"=>"Agrupar" ); lang.es.php $lang=$_session["sess_lang"]; if ($lang=="") $lang='ca'; if ($GLOBALS["trans"] == "") include(path_lang.'lang.'.$lang.'.php'); if (!function_exists('tr')) { function tr($str_from) { global $trans; if (!is_array($trans)) return $str_from; return strtr($str_from, $trans); } } idioma.php

10 Capa abstracción base de datos Para el acceso al motor de base de datos es mejor no utilizar directamente las funciones de PHP. De esta forma podríamos migrar nuestra aplicación a otro motor más fácilmente. Existen muchas librerías de abstracción: ADODB PEAR:DB...

11 Objectos de datos Para el acceso a datos crearemos una clase para cada ámbito. De esta forma si nuestro proyecto dispone de una agenda, crearemos la clase agenda en el fichero class.agenda.php. Dentro de la clase de datos pondremos el código SQL. Mediante los métodos a esta clase evitaremos ver código SQL. Los datos los debemos intercanviar en forma de arrays asociativos. Con esta pauta podríamos reutilizar código usando JPSpan...

12 Error handler Utilizaremos nuestra función de proceso de errores para: Mejorar el monitoraje de nuestras aplicación en producción. Mostrar nuestro propio mensaje de error. Avisar al administrador del sistema en caso de errores fatales. Disponer de un registro de errores.

13 Documentar código: phpdocumentor La fórmula más práctica de documentar un proyecto es comentar directamente el código y utilizar alguna herramienta para la creación de la documentació. phpdocumentor: http://phpdoc.org/index.php /** * Conexión a la base de datos * * @package MyPacket * @version 1.3.6 * @author Jordi Llonch <jordi@laigu.net> */ class db_base { /** * Objecte a dades * @access public */ var $db=false; } /** * Añadir fitxa * * @see uni::tractar_datos() * @param string $tabla * @param array $datos Datos array("col1"=>"valor1", * "col2"=>"valor2"...) * @param array $conf Configuración delayed=>true * @return bool 1=Ok */ function afegir($tabla, $datos, $conf="") { }

Crear PDFs: HTMLDOC, FOP, ClipPDF... Para proporcionar a los usuarios documentos que deban ser impresos la mejor opción es generar un PDF dinámicamente. Si el usuario tiene instalado Adobe Acrobat Reader, este se encastará en el navegador. Diversas opciones: HTMLDOC Convierte HTML a PDF (permite algún tag especial). http://www.easysw.com/htmldoc/ FOP Estándar XML Podemos utilizar XSLT para convertir datos XML a FOP y luego utilizar algun renderizador comercial o libre. http://xml.apache.org/fop/ ClipPDF Libreria para la creación de un archivo PDF. 14

15 XMLHttpRequest y JPSpan XMLHttpRequest Es un objecto nativo JavaScript que permite hacer peticiones HTTP des de una página que ya ha sido cargada. Permite hacer Microrequests en respuesta a eventos de usuario en una página web, sin la necesidad de recargar la página. Se pueden implementar nociones de interfície complea de usuario similar a aplicaciones de escritorio. http://jpspan.sourceforge.net/wiki/doku.php?id=javascript:xmlhttprequest JPSpan Provee de unas herramientas para connectar PHP y JavaScript para el intercambio de datos des de una página web ya cargada. JPSpan permite definir clases en PHP y hacer llamadas remotas desde JavaScript. http://jpspan.sourceforge.net/wiki/doku.php