Pautas para el diseo de un proyecto web

Mayo 2005

Jordi Llonch
jordi@laigu.net

http://creativecommons.org/licenses/by-sa/2.0/

Pautas diseo proyecto web

Pautas
Estructura del proyecto
Separar lgica y diseo: Plantillas
Archivos de configuracin
Idiomas
Capa abstraccin base de datos
Objectos de datos
Error handler
Documentar cdigo: phpDocumentor
Crear PDFs: HTMLDOC, FOP, ClipPDF...
XMLHttpRequest y JPSpan

Pautas diseo proyecto web

Estructura del proyecto (1)

Usualmente para el desarrollo de nuestro proyecto
nos apoyamos en un framework.
En esta estructura la aplicacin a desarrollar se
encontrar en la carpeta web.
Estructura:
config
archivos de configuracin 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",
define ("DB_USER",
define ("DB_PASS",
define ("DB_NAME",

"localhost");
"");
"");
"Atlas");

Pautas diseo proyecto web

Estructura del proyecto (2)

Estructura:
lang
archivos de soporte de multidiomas

lib
libreras prpias (ej. capa de abstraccin a la
base de datos)
si queremos utilizar libreras no propas
podramos crear dentro de esta carpeta
otra con nombre external (ej. Smarty)
tambin podemos poner aqu un error
handler propio

menu
en caso que se trate de un proyecto con
backoffice podemos utilizar algun sistema
que nos genere un men.

Pautas diseo proyecto web

Estructura del proyecto (3)

Estructura:
motor
podramos utilizar algn motor que nos
genere directamente HTML y algunos
scripts que nos automaticen procesos
como el de mantenimiento de datos de una
tabla (alta, baja, modificacin...)

notes
notas y comentarios del proyecto

templates
plantillas de cabecera, pies de pgina, hoja
de estilo... (pensando en el backoffice)

tmp
donde se crearn archivos temporales
a esta carpeta se le suelen tener que dar
permisos de escritura

Pautas diseo proyecto web

Estructura del proyecto (4)

Estructura:
web
en esta carpeta desarrollaremos toda la
lgica 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: libreras no genricas, exclusivas
para el proyecto
login: sistema de acceso al
backoffice
obj-data: clases de abstraccin de
datos
templates: plantillas (para Smarty)
templates_c: compilacin de las
plantillas (Smarty)

Pautas diseo proyecto web

Separar lgica y diseo: Plantillas

Nunca se debe mezclar cdigo PHP y HTML
Cdigo mantenible
Un diseador grfico se puede ocupar del diseo
Podemos utilizar dos tcnicas:
Librera de widgets HTML
Plantillas (por ejemplo Smarty Engine)

Pautas diseo proyecto web

Archivos de configuracin
Definiremos los parmetros que configuran nuestro proyecto con
constantes.
Todos nuestros scripts incluirn el archivo de configuracin
En la configuracin 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",
define ("DB_USER",
define ("DB_PASS",
define ("DB_NAME",

"localhost");
"");
"");
"Atlas");

Pautas diseo proyecto web

Idiomas
Si queremos que nuestro proyecto soporte multidioma podemos
definir un array con las traducciones y una funcin que realice la
traduccin de conceptos:
$GLOBALS["trans"] = array(
// General
"Adreces"=>"Direcciones",
"Adult"=>"Adulto",
"Afegir"=>"Aadir",
"Afegir Document"=>"Aadir Documento",
"Afegir reserva"=>"Aadir reserva",
"Agncia"=>"Agencia",
"Agncies"=>"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

Pautas diseo proyecto web

Capa abstraccin base de datos

Para el acceso al motor de base de datos es mejor no utilizar
directamente las funciones de PHP.
De esta forma podramos migrar nuestra aplicacin a otro motor ms
fcilmente.
Existen muchas libreras de abstraccin:
ADODB
PEAR:DB
...

10

Pautas diseo proyecto web

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 cdigo SQL.
Mediante los mtodos a esta clase evitaremos ver cdigo SQL.
Los datos los debemos intercanviar en forma de arrays asociativos.
Con esta pauta podramos reutilizar cdigo usando JPSpan...

11

Pautas diseo proyecto web

Error handler
Utilizaremos nuestra funcin de proceso de errores para:
Mejorar el monitoraje de nuestras aplicacin en produccin.
Mostrar nuestro propio mensaje de error.
Avisar al administrador del sistema en caso de errores fatales.
Disponer de un registro de errores.

12

Pautas diseo proyecto web

Documentar cdigo: phpDocumentor

La frmula ms prctica de documentar un proyecto es comentar
directamente el cdigo y utilizar alguna herramienta para la
creacin de la documentaci.
phpDocumentor: http://phpdoc.org/index.php
/**
* Conexin 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;

/**
* Aadir fitxa
*
* @see uni::tractar_datos()
* @param string $tabla
* @param array $datos Datos array("col1"=>"valor1",
*
"col2"=>"valor2"...)
* @param array $conf Configuracin delayed=>true
* @return bool 1=Ok
*/
function afegir($tabla, $datos, $conf="")
{
}

13

Pautas diseo proyecto web

Crear PDFs: HTMLDOC, FOP, ClipPDF...

Para proporcionar a los usuarios documentos que deban ser

impresos la mejor opcin es generar un PDF
dinmicamente.
Si el usuario tiene instalado Adobe Acrobat Reader, este se
encastar en el navegador.
Diversas opciones:
HTMLDOC
Convierte HTML a PDF (permite algn tag especial).
http://www.easysw.com/htmldoc/
FOP
Estndar 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 creacin de un archivo
PDF.

14

Pautas diseo proyecto web

XMLHttpRequest y JPSpan
XMLHttpRequest
Es un objecto nativo JavaScript que permite hacer peticiones HTTP
des de una pgina que ya ha sido cargada.
Permite hacer Microrequests en respuesta a eventos de usuario en
una pgina web, sin la necesidad de recargar la pgina.
Se pueden implementar nociones de interfcie 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 pgina web ya cargada.
JPSpan permite definir clases en PHP y hacer llamadas remotas
desde JavaScript.
http://jpspan.sourceforge.net/wiki/doku.php

15