antologia Desarrollo de Aplicaciones Web

Universidad Tecnolgica de Puebla

Desarrollo de Aplicaciones Web Antologa

Versin 1.0


2

Introduccin

La utilizacin de las tecnologas de la informacin en las actividades cotidianas en el mundo contemporneo cada vez cobra mayor importancia, por ello cobra vital importancia el desarrollo de aplicaciones web. Objetivo Crear aplicaciones Web manejadas por PHP, utilizando el lenguaje as como sus extensiones. Dirigido a Todas aquellas personas dedicadas a la programacin de aplicaciones y que deseen desarrollar soluciones WEB utilizando este lenguaje. Requisitos Haber programado aplicaciones HTML en un nivel bsico. Manejo de los conceptos de Orientacin a objetos y programacin con SQL a nivel bsico.5. Alcance

El alumno desarrollar un sitio y aplicaciones web con acceso a base de datos, para realizar de manera eficiente los procesos en una organizacin. Herramientas a utilizar PHP, MySQL, HTML y Apache.


3

ndice 1. Fundamentos de Sitios Web.

I. Entorno de las aplicaciones Web (Internet, Intranet y Extranet) II. Metodologa de desarrollo y publicacin de un Sitio Web

III. Lenguaje XHTML 2. Programacin de una aplicacin Web

I. Fundamentos de programacin Web II. Configuracin del Entorno Web

III. Mtodos de conexin de forma abierta IV. Mtodos de conexin a datos usando directamente los drivers del

proveedor. V. Manipulacin de datos a travs de un programa


4

Captulo I Fundamentos de Sitios Web.

I. Entorno de las aplicaciones Web (Internet, Intranet y Extranet)

Figura 1.1 Concepto de Aplicacin WEB 1 Cuando se habla de un sitio web se refiere en realidad a un conjunto de archivos, que pueden ser de texto, audio, grficos, etc., unidos mediante un lenguaje de marcas denominado HTML. Este lenguaje permite crear las llamadas pginas web, que no son ms que archivos con la extensin htm html. Las mismas, se alojan en servidores web, que son computadoras adaptadas especialmente, y que estn conectadas en forma permanente a Internet. La ventaja del HTML es que permite presentar varios archivos en forma simultnea (texto junto con un video, grficos en forma de botones, etc.) y adems, cuenta con la posibilidad de crear enlaces o hipervnculos (hyperlinks en idioma ingls), que se encargan de conectar las pginas web entre s. Esto significa que se puede "saltar" de una pgina web ubicada en USA, a otra que est en Espaa o Japn en forma inmediata, haciendo que las distancias geogrficas desaparezcan en la red. Para poder acceder a los sitios web se necesita un navegador, que es el software encargado de presentar esa informacin.

Sitio Web: conjunto de archivos Pgina Web: archivo en formato HTML o HTM

1 http://www2.ing.puc.cl/~jnavon/page2


5

Hipervnculo: objeto que se utiliza para enlazar archivos (pginas Web, imgenes, audio, etc.)

Servidor Web: computadora conectada a internet que aloja Sitios Web o archivos que pueden ser solicitados a travs de la red

En la ingeniera de software se denomina aplicacin web a aquellas aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a travs de Internet o de una intranet mediante un navegador. En otras palabras, es una aplicacin software que se codifica en un lenguaje soportado por los navegadores web (HTML, JavaScript, Java, asp.net,php, etc.) en la que se confa la ejecucin al navegador.2 Otra definicin seala que Una aplicacin web es un conjunto de recursos web que participan en el funcionamiento de la propia aplicacin web3 y est compuesta por:

Componentes de servidor dinamicos Servlets, Jsps Bibliotecas de clases utilitarias Elementos web estaticos paginas HTML, imgenes, sonidos Componentes de cliente dinamicos Applets, Javabeans y clases Un descriptor de desarrollo y de configuracin de la aplicacin web en forma

de uno o ms archivos xml. Declaracion de los servlets Enlaces entre urls y servlets Enlaces entre los tipos MIME y las palicaciones correspondientes Declaraciones de las pginas de incio por defecto.

Internet es un conjunto descentralizado de redes de comunicacin interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes fsicas heterogneas que la componen funcionen como una red lgica nica, de alcance mundial. Sus orgenes se remontan a 1969, cuando se estableci la primera conexin de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, Estados Unidos4.

Uno de los servicios que ms xito ha tenido en Internet ha sido la World Wide Web (WWW, o "la Web"), hasta tal punto que es habitual la confusin entre ambos trminos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la consulta remota de archivos de hipertexto. sta fue un desarrollo posterior (1990) y utiliza Internet como medio de transmisin.

2 http://es.wikipedia.org/wiki/Aplicacin_web 3 J2EE Desarrollo de aplicaciones WEB, Autor: Benjamin Aumaille, Ed. Ediciones ENI, Pag. 26 4 http://es.wikipedia.org/wiki/Internet


6

Figura 1.2 Internet

Una intranet5 es una red de ordenadores privados que utiliza tecnologa Internet para compartir dentro de una organizacin parte de sus sistemas de informacin y sistemas operacionales. El trmino intranet se utiliza en oposicin a internet, una red entre organizaciones, haciendo referencia por contra a una red comprendida en el mbito de una organizacin.

Tiene como funcin principal proveer lgica de negocios para aplicaciones de captura, informes y consultas con el fin de facilitar la produccin de dichos grupos de nivel de grupo de trabajo. Las redes internas corporativas son potentes herramientas que permiten divulgar informacin de la compaa a los empleados con efectividad, consiguiendo que estos estn permanentemente informados con las ltimas novedades y datos de la organizacin. Tambin es habitual su uso en universidades y otros centros de formacin, ya que facilita la consulta de diferentes tipos de informacin y el seguimiento de la materia del curso.

5 http://es.wikipedia.org/wiki/Intranet


7

Figura 1.3 Intranet6

Una extranet7 es una red privada virtual que utiliza protocolos de Internet, protocolos de comunicacin y probablemente infraestructura pblica de comunicacin para compartir de forma segura parte de la informacin u operacin propia de una organizacin con proveedores, compradores, socios, clientes o cualquier otro negocio u organizacin. Se puede decir en otras palabras que una extranet es parte de la Intranet de una organizacin que se extiende a usuarios fuera de ella. Usualmente utilizando la Internet. La extranet suele tener un acceso semiprivado, para acceder a la extranet de una empresa no necesariamente el usuario ha de ser trabajador de la empresa, pero si tener un vnculo con la entidad. Es por ello que una extranet requiere o necesita un grado de seguridad, para que no pueda acceder cualquier persona. Otra caracterstica de la extranet es que se puede utilizar como una Internet de colaboracin con otras compaas.

Figura 1.4 Extranet 8

Similitudes y diferencias de Extranet con Internet e Intranet

El principal aspecto en comn entre estos tres trminos es que los tres utilizan la misma tecnologa.

Las diferencias de la extranet con Internet y la Intranet se dan principalmente en el tipo de informacin y en el acceso a ella. Adems, una extranet requiere mayor seguridad e implica acceso en tiempo real a los datos, ya que estos tienen que estar actualizados.

6 http://www.offclick.com/intranet.htm 7 http://es.wikipedia.org/wiki/Extranet 8 http://arquitecturaestefany.blogspot.com/2009/03/extranet.html


8

La extranet se dirige a usuarios tanto de la empresa como externos, pero la informacin que se encuentra en la extranet es restringida, solo tienen acceso a esta red aquellos que tengan permiso. En cambio a la intranet solo acceden los empleados y las reas internas de la empresa y permite el intercambio de informacin entre los trabajadores. Por ltimo, a la internet puede dirigirse cualquier usuario y tiene distintos usos, como recabar informacin de los productos, contactar con cualquier persona de la empresa, etc.

En la siguiente tabla se muestran de manera resumida las diferencias entre las aplicaciones en una empresa:

Aplicacin Usuarios Informacin

Intranet Internos Intercambio entre trabajadores

Extranet Internos y externos Colaboracin con terceros, acceso restringido

Internet Cualquier usuario Objetivos diferentes

II. Metodologa de desarrollo y publicacin de un Sitio Web

2.1 Tipos de sitios WEB 9 Los sitios se pueden clasificar de muchas maneras. Cada tipo de sitio tiene unas caractersticas y limitaciones propias. Una buena organizacin es vital para conseguir los objetivos del Sitio. Esta es una forma de clasificar los sitios: 1) Por su audiencia

a) Pblicos: Es un WebSite normal, una pgina dirigida al pblico general, sin restricciones de acceso en principio.

b) Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo los proveedores

de una empresa determinada, o los clientes.

c) Intranet: Son sitios cuyo acceso est restringido a una empresa u organizacin, normalmente funcionan dentro de redes privadas, aunque no siempre es as.

2) Por su dinamismo en sitios interactivos y sitios estticos:

a) Sitios Interactivos: El usuario puede influir sobre el contenido del sitio que variar en funcin de cada usuario y de los objetivos de ste. Normalmente, las pginas se generan cuando el usuario las solicita, personalizando la informacin que se le ofrece.

b) Sitios estticos: Los usuarios no pueden modificar o aadir nada al sitio, de cuyos contenidos se

encargan exclusivamente sus diseadores. 3) Por su apertura en Estructuras abiertas, cerradas y semicerradas:

9 http://www.lawebera.es/manuales/primeros-pasos/como-empezar/tipos-de-webs.php


9

a) Estructura abierta: Todos los documentos disponen de su direccin y los usuarios pueden acceder a cualquier punto del WebSite.

b) Estructura cerrada: Limita el acceso a unos pocos puntos de entrada (incluso a uno slo). Un ejemplo

sera un sitio que requiere un registro previo para entrar, el usuario siempre tendra que pasar primero por el registro antes de poder acceder al resto de la pgina.

c) Estructura semicerrada: A medio camino entre ambas, obliga a los usuarios a acceder por unos puntos

especficos, cmo por ejemplo slo la pgina principal y las pginas de entrada a las secciones ms importantes.

4) Por su profundidad

a) Basada en el nmero de enlaces que hay que pulsar para llegar al contenido. En general los usuarios prefieren sitios poco profundos. Una buena regla a seguir es que el usuario no tenga que pulsar ms de 3 enlaces para encontrar lo que busca.

5) Por sus objetivos

a) Comerciales: Estn creados para promocionar los negocios de una empresa. Su finalidad es econmica. Su audiencia puede estar formada por clientes (actuales y potenciales), inversores (actuales y potenciales), empleados (actuales y potenciales) e incluso la competencia y los medios de comunicacin. Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y Promocionales (promocionan productos).

b) Informativos: Su finalidad principal es distribuir informacin. La audiencia de este tipo de sitios

depende del tipo de informacin que distribuyen.

c) Ocio: Aunque normalmente son sitios con una finalidad econmica, son un caso especial. No son sitios fciles de crear ni de mantener y a veces siguen reglas propias; puesto que a veces es ms importante sorprender al usuario con innovaciones que mantener la consistencia y la estructura.

d) Navegacin: Su finalidad es ayudar al usuario a encontrar lo que busca en Internet. Dentro de este

grupo se sitan los llamados portales, que intentan abarcar prcticamente todo dentro del propio sitio.

e) Artsticos: Son un medio de expresin artstica de su creador o creadores. Este tipo de sitios suele saltarse todas las convenciones y las nicas normas a aplicar son las que el propio artista o artistas deseen.

f) Personales: Al igual que los anteriores, son un medio de expresin de su creador o creadores. Sus

objetivos y su audiencia pueden ser de lo ms variopinto. Dentro de este grupo puede haber de todo desde colecciones de fotos de la familia hasta tratados cientficos de primer orden.

2.2 MEDIDAD DE SEGURIDAD DE SITIOS WEB10 Para muchas aplicaciones de negocios, como la publicidad y promociones simples, es probable que no se necesite tratar con precauciones de seguridad. Pero si se permite que los usuarios tengan acceso a datos delicados, se debern tomar medidas para proteger a los datos. Debido a que cada vez son ms las personas que desean transferir documentos e informacin de tarjetas de crdito o cualquier tipo de transmisin de datos en forma segura y sin el temor a los crackers y piratas. Las medidas de seguridad bsicas a tener en cuenta son:

10 http://www.monografias.com/trabajos5/laweb/laweb.shtml


10

2.2.1 La encriptacin de datos Es una tcnica para ocultar datos de manera que slo puedan ser vistos por aquellos que deben verlos. Consiste en reemplazar un mensaje enviado con un algoritmo difcil de adivinar. Los servidores seguros tratan de encriptar los datos entre el navegador y el servidor. En algn momento durante el ciclo de compras, despus que los datos llegan al servidor seguro, el sistema debe desencriptar los datos. Aun si los datos son desencriptados slo por un instante, la informacin podra ser interceptada por algn pirata. Crear un sistema en el que la informacin permanezca encriptada a lo largo del ciclo es prcticamente imposible. La configuracin ms segura es una que transmita la informacin al propietario de la empresa en formato encriptado, pase la informacin a una computadora que no est en Internet y luego desencripte la informacin. Adems si en una empresa se utiliza un mismo algoritmo para encriptar y desencripar datos, se necesitar que alguna tercera pieza de datos desencripte el cdigo, que seria una clave. Esto slo funcionar si tanto la persona transmisora como la parte receptora conocen la clave. Si la persona receptora no conoce la clave, tiene que enviar la clave a esa parte, y est puede ser interceptada. 2.2.2 Firma digital Ofrece un mtodo de encriptacin de datos que evita tener que compartir claves para leer mensajes. Es la tcnica llamada encriptacin de clave pblica, donde cada usuario tiene dos claves: una clave pblica y una clave privada. Los algoritmos de encriptacin y desencriptacin son adaptados de manera que slo la clave pblica puede desencriptar los datos encriptados por la clave privada. Por consiguiente, puede transmitir con libertad la clave pblica al mundo. 2.2.3 Creacin de un sitio seguro Las ventajas de crear un sistema seguro antes de ser pirateado deben ser obvias. La prevencin es la mejor medicina y esto se aplica tambin ala seguridad de las computadoras. Se debe mantener la seguridad de los archivos de datos de tal forma que solo las personas correctas puedan verlos. Esto es crucial para los siguientes tipos de datos y archivos: contraseas de usuarios, archivos de facturacin, registros de sistema y de usuarios, informacin de tarjetas de crditos, informacin confinada de sistemas remotos, compiladores, herramientas de administracin. Firewalls, wrappers y proxies Los firewalls, wrappers y proxies ofrecen una buena lnea de defensa para los propietarios de servidores Web y administradores de sistemas. Los firewalls pueden ser software o hardware que protege los puertos y evita que los piratas penetren al sistema. Los firewalls permiten que tengan acceso al sistema slo ciertos nombres de dominio confiables. Los wrappers se encuentran disponibles en CERT al igual que en otros archivos en Internet. Los wrappers se ejecutan como una capa de software alrededor de su otro software. Un usuario que se conecta a FTP primero entrara en contacto con el wrapper, el cual luego habilitara al FTP. El usuario no sabe que existe el wrapper y no puede detectar ninguna diferencia en el sistema.


11

Los wrappers son interesantes porque son flexibles. Pueden actuar como firewalls y en realidad pueden rechazar usuarios con base en sus nombres de usuarios al igual que en sus nombres de dominios. Adems permite crear callejones sin salida que permiten atrapar piratas. El modo proxy es un mtodo permite ocultar datos por medio de reenrutamiento de las solicitudes. Es til para usuarios que estn detrs de una firewall. Los usuarios establecen una direccin proxy de su navegador para que apunte hacia su servidor Web. El servidor Web maneja entonces la direccin real de los datos hacia el mundo exterior. Esto reduce la direccin que el usuario est tomando cuando deja su sistema, permitindole al usuario enrutar los datos los datos a travs de los agujeros en sus propias firewalls. La otra ventaja es que las solicitudes pueden ser filtradas por el software del servidor. Al filtrar la informacin, puede restringir el contenido y rastrear el uso al igual que modificar la informacin en ese instante. Los servidores proxy tambin pueden ser dirigidos a otros servidores proxy, lo cual les permite ocultar datos en forma efectiva. Otra ventaja de los servidores proxy es que los servicios como FTP, Telnet, Gopher, NetnNews, etc., pueden ser erutados a servidores diferentes. Esto le permite distribuir diversas cargas de servidor Web a diferentes servidores fsicos. Adems de beneficiarse con el ocultamiento de los datos, ser reduce la carga del servidor. 2.3 Desarrollo de aplicaciones El desarrollo de aplicaciones web involucra decisiones no triviales de diseo e implementacin que inevitablemente influyen en todo el proceso de desarrollo, afectando la divisin de tareas. Los problemas involucrados, como el diseo del modelo del dominio y la construccin de la interfaz de usuario, tienen requerimientos disjuntos que deben ser tratados por separado. El alcance de la aplicacin y el tipo de usuarios a los que estar dirigida son consideraciones tan importantes como las tecnologas elegidas para realizar la implementacin. As como las tecnologas pueden limitar la funcionalidad de la aplicacin, decisiones de diseo equivocadas tambin pueden reducir su capacidad de extensin y reusabilidad. Es por ello que el uso de una metodologa de diseo y de tecnologas que se adapten naturalmente a sta, son de vital importancia para el desarrollo de aplicaciones complejas. En la actualidad existen tecnologas ampliamente usadas para el desarrollo de aplicaciones web, pero muchas de ellas obligan al desarrollador a mezclar aspectos conceptuales y de presentacin. Esto sucede principalmente con aquellas tecnologas no basadas en objetos. La eleccin de tecnologas complejas demora el proceso e incrementa los costos, pero en ocasiones permite adecuarse a metodologas de diseo ms fcilmente. Como es el caso de las tecnologas orientadas a objetos, las cuales tienden a demorar el desarrollo en etapas tempranas. El tiempo de desarrollo en la actualidad es crtico, tanto por razones de marketing como por lmites en el presupuesto y los recursos, pero la adopcin de estas tecnologas hace que el mantenimiento se transforme en una actividad ms simple, la divisin en capas sea una tarea natural del desarrollo y el tiempo invertido en el diseo facilite el trabajo necesario para el resto de las actividades. 2.4 Aplicaciones web y la importancia del desarrollo en capas Las aplicaciones hipermedia han evolucionado en los ltimos aos y se han concentrado mayormente en la web. Las antiguas aplicaciones distribuidas en cds dieron lugar a aplicaciones dinmicas, de constante actualizacin e incluso personalizables, capaces de adaptarse a los tipos de usuarios y en casos avanzados, a cada usuario en particular. Estas caractersticas encuentran el medio ideal en la web, ya que de otra forma sera costoso su mantenimiento y evolucin. La complejidad del desarrollo ocurre a diferentes niveles: dominios de aplicacin sofisticados (financieros, mdicos, geogrficos, etc.); la necesidad de proveer acceso de navegacin simple a grandes cantidades de datos multimedia, y por ltimo la aparicin de nuevos dispositivos para los cuales se deben construir interfaces


12

web fciles de usar. Esta complejidad en los desarrollos de software slo puede ser alcanzada mediante la separacin de los asuntos de modelizacin en forma clara y modular. La justificacin de tanto trabajo puede encontrarse en cualquier aplicacin que requiera navegacin: en trminos de programacin orientada a objetos, si los elementos por los que se navega son los del diseo conceptual se estara mezclando la funcionalidad hipermedia con el comportamiento propio del objeto. Por otro lado, si los nodos de la red de navegacin tienen la capacidad de definir su apariencia, se estara limitando la extensin de la aplicacin para ofrecer nuevas presentaciones del mismo elemento y eventualmente se estara dificultando la personalizacin de la interfaz. Es necesario, entonces, mantener separadas las distintas decisiones de diseo segn su naturaleza (conceptual, navegacional, de interfaz) y aplicar las tecnologas adecuadas a cada capa en el proceso de implementacin. 2.5 OOHDM11 Las metodologas tradicionales de ingeniera de software, o las metodologas para sistemas de desarrollo de informacin, no contienen una buena abstraccin capaz de facilitar la tarea de especificar aplicaciones hipermedia. El tamao, la complejidad y el nmero de aplicaciones crecen en forma acelerada en la actualidad, por lo cual una metodologa de diseo sistemtica es necesaria para disminuir la complejidad y admitir evolucin y reusabilidad. Producir aplicaciones en las cuales el usuario pueda aprovechar el potencial del paradigma de la navegacin de sitios web, mientras ejecuta transacciones sobre bases de informacin, es una tarea muy difcil de lograr. En primer lugar, la navegacin posee algunos problemas. Una estructura de navegacin robusta es una de las claves del xito en las aplicaciones hipermedia. Si el usuario entiende dnde puede ir y cmo llegar al lugar deseado, es una buena seal de que la aplicacin ha sido bien diseada. Construir la interfaz de una aplicacin web es tambin una tarea compleja; no slo se necesita especificar cules son los objetos de la interfaz que deberan ser implementados, sino tambin la manera en la cual estos objetos interactuarn con el resto de la aplicacin. En hipermedia existen requerimientos que deben ser satisfechos en un entorno de desarrollo unificado. Por un lado, la navegacin y el comportamiento funcional de la aplicacin deberan ser integrados. Por otro lado, durante el proceso de diseo se debera poder desacoplar las decisiones de diseo relacionadas con la estructura navegacional de la aplicacin, de aquellas relacionadas con el modelo del dominio. OOHDM propone el desarrollo de aplicaciones hipermedia a travs de un proceso compuesto por cuatro etapas: diseo conceptual, diseo navegacional, diseo de interfaces abstractas e implementacin. 2.5.1 Diseo Conceptual En esta actividad se construye un esquema conceptual representado por los objetos del dominio, las relaciones y colaboraciones existentes establecidas entre ellos. En las aplicaciones hipermedia convencionales, cuyos componentes de hipermedia no son modificados durante la ejecucin, se podra usar un modelo de datos semntico estructural (como el modelo de entidades y relaciones). De este modo, en los casos en que la informacin base pueda cambiar dinmicamente o se intenten ejecutar clculos complejos, se necesitar enriquecer el comportamiento del modelo de objetos. En OOHDM, el esquema conceptual est construido por clases, relaciones y subsistemas. Las clases son descritas como en los modelos orientados a objetos tradicionales. Sin embargo, los atributos pueden ser de mltiples tipos para representar perspectivas diferentes de las mismas entidades del mundo real.

11 Construyendo aplicaciones web con una metodologa de diseo orientada a objetos; Silva - Mercerat


13

Se usa notacin UML (Lenguaje de Modelado Unificado) y tarjetas de clases y relaciones similares a las tarjetas CRC (Clase Responsabilidad Colaboracin). El esquema de las clases consiste en un conjunto de clases conectadas por relaciones. Los objetos son instancias de las clases. Las clases son usadas durante el diseo navegacional para derivar nodos, y las relaciones que son usadas para construir enlaces. 2.5.2 Diseo Navegacional La primera generacin de aplicaciones web fue pensada para realizar navegacin a travs del espacio de informacin, utilizando un simple modelo de datos de hipermedia. En OOHDM, la navegacin es considerada un paso crtico en el diseo aplicaciones. Un modelo navegacional es construido como una vista sobre un diseo conceptual, admitiendo la construccin de modelos diferentes de acuerdo con los diferentes perfiles de usuarios. Cada modelo navegacional provee una vista subjetiva del diseo conceptual. El diseo de navegacin es expresado en dos esquemas: el esquema de clases navegacionales y el esquema de contextos navegacionales. En OOHDM existe un conjunto de tipos predefinidos de clases navegacionales: nodos, enlaces y estructuras de acceso. La semntica de los nodos y los enlaces son las tradicionales de las aplicaciones hipermedia, y las estructuras de acceso, tales como ndices o recorridos guiados, representan los posibles caminos de acceso a los nodos. La principal estructura primitiva del espacio navegacional es la nocin de contexto navegacional. Un contexto navegacional es un conjunto de nodos, enlaces, clases de contextos, y otros contextos navegacionales (contextos anidados). Pueden ser definidos por comprensin o extensin, o por enumeracin de sus miembros. Los contextos navegacionales juegan un rol similar a las colecciones y fueron inspirados sobre el concepto de contextos anidados. Organizan el espacio navegacional en conjuntos convenientes que pueden ser recorridos en un orden particular y que deberan ser definidos como caminos para ayudar al usuario a lograr la tarea deseada. Los nodos son enriquecidos con un conjunto de clases especiales que permiten de un nodo observar y presentar atributos (incluidos las anclas), as como mtodos (comportamiento) cuando se navega en un particular contexto. 2.5.3 Diseo de Interfaz Abstracta Una vez que las estructuras navegacionales son definidas, se deben especificar los aspectos de interfaz. Esto significa definir la forma en la cual los objetos navegacionales pueden aparecer, cmo los objetos de interfaz activarn la navegacin y el resto de la funcionalidad de la aplicacin, qu transformaciones de la interfaz son pertinentes y cundo es necesario realizarlas. Una clara separacin entre diseo navegacional y diseo de interfaz abstracta permite construir diferentes interfaces para el mismo modelo navegacional, dejando un alto grado de independencia de la tecnologa de interfaz de usuario. El aspecto de la interfaz de usuario de aplicaciones interactivas (en particular las aplicaciones web) es un punto crtico en el desarrollo que las modernas metodologas tienden a descuidar. En OOHDM se utiliza el diseo de interfaz abstracta para describir la interfaz del usuario de la aplicacin de hipermedia. El modelo de interfaz ADVs (Vista de Datos Abstracta) especifica la organizacin y comportamiento de la interfaz, pero la apariencia fsica real o de los atributos, y la disposicin de las propiedades de las ADVs en la pantalla real son hechas en la fase de implementacin. 2.5.4 Implementacin En esta fase, el diseador debe implementar el diseo. Hasta ahora, todos los modelos fueron construidos en forma independiente de la plataforma de implementacin; en esta fase se toma en cuenta el entorno particular en el cual se va a correr la aplicacin.


14

Al llegar a esta fase, el primer paso que debe realizar el diseador es definir los tems de informacin que son parte del dominio del problema. Debe identificar tambin, cmo son organizados los tems de acuerdo con el perfil del usuario y su tarea; decidir qu interfaz debera ver y cmo debera comportarse. A fin de implementar todo en un entorno web, el diseador debe decidir adems qu informacin debe ser almacenada. 2.6 Ejemplo de una implementacin OOHDM En este ejemplo se describirn las etapas de desarrollo de una aplicacin web simple, siguiendo la metodologa OOHDM. En cada capa de diseo, la implementacin correspondiente se basa en diferentes tecnologas, elegidas con el propsito de minimizar la dificultad del desarrollo y aprovechar al mximo las virtudes de la metodologa. 2.6.1 Capa Conceptual En OOHDM, el desarrollo se inicia diseando la capa conceptual, siendo el principal objetivo de esta etapa capturar los conceptos involucrados en el dominio de la aplicacin y describirlos en detalle, haciendo uso de diagramas que permitan expresar con claridad el comportamiento, la estructura y las relaciones entre dichos conceptos. La Programacin Orientada a Objetos facilita el traslado del diseo conceptual a la implementacin, proveyendo al programador con herramientas que permiten reducir la distancia entre el problema del mundo real y la programacin de la solucin en la computadora. El modelo de objetos del ejemplo consta de las entidades bsicas de un dominio especfico: un comercio de venta de productos B2C (Negocio a Consumidor). En este dominio, entidades como producto, categora de productos, carro de compras, usuario, venta, se interrelacionan para responder a la navegacin del usuario por la aplicacin y a sus actividades transaccionales. Todas las entidades mencionadas se construyen a partir de informacin persistente, propiedad mantenida por la empresa en forma directa a travs de un DBA (Administrador de Bases de Datos) o simplemente aprovechando una funcionalidad incorporada de la aplicacin que permita manipular la base de datos. El anlisis anterior de las entidades del dominio permite afirmar que dichas clases comparten (al menos) el comportamiento correspondiente a la interfaz con la capa de persistencia: todas las entidades fuertes son capaces de construirse a partir de identificadores, coincidentes con las claves primarias de las tablas correspondientes de la base de datos. Las clases del diseo conceptual que representen a estas entidades podrn obtener sus atributos al iniciarse y actualizar los cambios cuando sea necesario (realizando eventualmente algn tipo de almacenamiento temporal para mejorar la eficiencia). La consistencia de la informacin queda asegurada, entonces, por el comportamiento de los objetos del modelo.

Figura 1.5: Paquete de interfaz con la base de datos, dentro del Diseo Conceptual La clase abstracta que define el comportamiento bsico de las entidades del modelo y concentra la lgica de interaccin con la base de datos ser denominada EntidadAbstracta. Para cumplir con los objetivos propuestos, esta clase debe ser capaz de crear una conexin con la base de datos, ejecutar consultas y retornar los resultados para ser procesados. Por una cuestin de eficiencia, la creacin de conexiones a la base de datos podra ser delegada a un singleton, es decir, una clase capaz de controlar su instanciacin para


15

retornar siempre la misma instancia en reiteradas llamadas a su constructor. Una clase con estas caractersticas podra ser instanciada por EntidadAbstracta para luego solicitarle una conexin. Slo la informacin ms importante y de menor volumen es cargada desde la base de datos en el momento de la instanciacin. La informacin restante puede ser cargada bajo demanda, a partir de un eventual requerimiento de la aplicacin. Para ilustrar esta idea con claridad puede considerarse cargar los siguientes atributos en la instanciacin de un Producto: descripcin, categora, cantidad disponible y precio. En algn momento de la ejecucin, la aplicacin puede requerir los productos relacionados de un determinado producto BD Subconjunto de clases del diseo conceptual que interactan con la base de datos Diseo Conceptual Jerarqua de entidades Resto del modelo (por ejemplo, el usuario podra solicitar una lista de productos relacionados con el producto televisor, tales como video grabadora, filmadora, mesa para televisor, etc.); dado el volumen de esta informacin y lo espordico de su requerimiento, se sugiere entonces consultar a la base de datos para obtener esta informacin slo cuando es requerida. Notar que la conexin a la base usada en cada consulta es siempre la solicitada en el momento de la instanciacin, evitando con esto creaciones y destrucciones reiteradas de conexiones a la base de datos. Un modelo conceptual de estas caractersticas, obliga a considerar a todas las entidades del dominio como subclases de EntidadAbstracta (al menos todas aquellas entidades que se mantienen en la base de datos). Esta decisin de diseo puede refinarse an ms para evitar al mximo la incorporacin de comportamiento de persistencia en las clases del dominio. Para alcanzar este objetivo puede utilizarse interfaces (mediante las cuales se pueden establecer contratos entre clases, permitiendo as ligar a las clases del dominio con las encargadas de interactuar con la base de datos) y/o un modelo paralelo de wrappers que encapsulen a las clases del dominio (estos wrappers pueden encargarse directamente de la persistencia o interactuar con otras clases para factorizar cdigo, dejando en cada wrapper el comportamiento especfico requerido por la entidad encapsulada). Es importante destacar que el diseo conceptual puede estar compuesto de otras clases que por su naturaleza no puedan considerarse subclases de EntidadAbstracta. Estos casos son simplemente colaboradores de entidades concretas, clases requeridas para realizar alguna actividad especfica y de corta vida til, o algunos casos de entidades dbiles desde el punto de vista de diseo entidad-relacin. Considrese como ejemplo la informacin relacionada con la navegacin del usuario en una determinada sesin, irrelevante para otras sesiones e incluso para el resto de la aplicacin. En este caso, se requiere una clase para contener la informacin mencionada y el comportamiento para manipularla, pero no requiere considerar la persistencia dentro de su funcionalidad.


16

Figura 1.6: Instanciacin de una subclase concreta de EntidadAbstracta 2.6.2 Capa Navegacional La capa navegacional se compone de objetos construidos a partir de objetos conceptuales, y constituyen en general los elementos cannicos de las aplicaciones hipermedia tradicionales: nodos, enlaces, anclas y estructuras de acceso. Sin embargo, estas clases pueden extender el comportamiento caracterstico para funcionar como adaptadores de los objetos conceptuales y delegar as operaciones especficas del dominio. Entonces, los objetos navegacionales pueden actuar como observadores, para construir vistas de objetos conceptuales, y como adaptadores, para extender la actividad navegacional de un nodo y poder aprovechar el comportamiento conceptual del objeto adaptado. Estas dos perspectivas pueden implementarse aprovechando las virtudes inherentes de diferentes tecnologas: JSP para observar y Servlets para adaptar.


17

Figura 1.7: Construccin de un nodo de la capa navegacional Como puede observarse, la cadena se inicia con un requerimiento del usuario que navega por la aplicacin. Al acceder a un enlace, una pgina JSP es invocada para construir una pgina XML. En principio, el archivo XML generado puede ser til para transferir informacin entre servidores cooperativos, o simplemente entre un cliente y un servidor con un esquema tradicional. En cualquier caso, la portabilidad brindada por las caractersticas simples de XML hacen posible una transferencia transparente incluso entre plataformas completamente heterogneas. Antes de abordar la implementacin de la capa de presentacin es necesario describir la segunda perspectiva de los nodos, vistos como adaptadores de objetos conceptuales. Un ejemplo donde se observa claramente este tipo de nodos es el carro de compras. Para mostrar el contenido del carro de compras del usuario es necesario instanciar el objeto conceptual CarroDeCompras (notar que el identificador del usuario que navega la aplicacin y solicita acceder a su carro de compras es el nico dato que se necesita para invocar al constructor de dicha entidad). De este modo, el nodo construido a partir de esta informacin no slo concentra los datos de las compras sino que adems ofrece un men de operaciones para manipular el carro de compras, como borrar un elemento, cambiar la cantidad solicitada de un producto, vaciar el carro, finalizar la compra. Todas estas operaciones no son responsabilidad del nodo, sino que son realizadas por el objeto conceptual. Entonces, delegar responsabilidad es lo nico que debe hacer el nodo navegacional en este caso: la actividad delegada contina dentro de un servlet y finalmente es el servlet quien se encarga de redireccionar la navegacin a una pgina JSP para eventualmente mostrar un resultado. Los servlets son una herramienta muy til para realizar actividades del lado del servidor y retornar informacin al cliente para informarle sobre el trabajo realizado o para solicitarle parmetros y retomar alguna operacin. Continuando con el carro de compras, en caso que la operacin elegida por el usuario sea vaciar el contenido


18

(entre otras operaciones que puede seleccionar), una transaccin debe ejecutarse a cargo del objeto CarroDeCompras correspondiente, a fin de modificar la base de datos satisfaciendo el deseo del usuario. Dado que este deseo es manifestado a travs de un requerimiento (por ejemplo, realizando un get a travs de una URL, o un post a travs de un formulario HTML) la accin debe continuar en algn sector de la aplicacin, sin necesidad de mostrar informacin durante el proceso, al menos en este caso puntual. Entonces, puede construirse un paquete de servlets capaces de realizar operaciones especficas e incluso agruparse en jerarquas para aprovechar la herencia de comportamiento. A manera de ejemplo, se puede considerar la jerarqua de servlets de la siguiente figura, diseados para servir acciones especficas referidas al CarroDeCompras.

Figura 1.8: Jerarqua de servlets para administrar el carro de compras El servlet abstracto de la aplicacin es una clase que podra ser til si se tiene comportamiento comn a todos los servlets construidos para una aplicacin especfica. Luego, el servlet abstracto CarroDeComprasServlet define el comportamiento y la estructura de los servlets que encapsulan la lgica de una operacin determinada sobre el carro de compras. No es necesario construir una subclase por operacin concreta; varias operaciones pueden encapsularse en una nica clase y parametrizarse adecuadamente si son semejantes. AgregarProductoServlet servlet abstracto de la aplicacin EliminarProductoServlet VaciarCarroServlet inalizarCompraServlet HttpServlet CarroDeComprasServlet En este escenario, cada subclase concreta de servlet tiene la responsabilidad de ejecutar una operacin y retornar al cliente mostrando una pgina fija o calculada dinmicamente en funcin del resultado de la operacin. Un ejemplo que puede considerarse para cualquier actividad es alternativa entre un resultado exitoso o uno errneo, de la operacin ejecutada. En el primer caso, la navegacin podra continuar por una pgina JSP capaz de ilustrar la forma de proseguir la actividad, o de mostrar los resultados de la misma. En el segundo caso, la navegacin se vera interrumpida por una pgina JSP que informara sobre el error producido y eventualmente solicitara la correccin de parmetros, u ofreciera reintentar la operacin. 2.6.3 Capa de Interfaz Abstracta Tanto un nodo actuando como observador como un nodo actuando como adaptador, finalmente contina por mostrar cierta informacin y para ello necesita definir la forma de presentacin mediante la cual dicha informacin ser visualizada en la interfaz. Para ello se incorporan las dos ltimas tecnologas a las que se har mencin en este artculo: XSL y un mecanismo de anlisis sintctico para obtener una pgina HTML en funcin de un par de documentos XML/XSL. Las pginas XSL, ubicadas tambin del lado del servidor, definirn la apariencia de los nodos que se generaron en formato XML. Cada pgina XSL define la forma en que los elementos del XML asociados sern mostrados, haciendo uso de cdigo HTML y eventualmente CSS, para dar el formato deseado a las pginas


19

finales. Enlaces y estructuras de acceso tambin son presentados conforme con los estilos adoptados para este tipo de informacin navegacional. El vnculo entre un XML y su apariencia puede establecerse en forma explcita, con una etiqueta especial situada en la primera lnea del archivo XML, o bien podra ser calculado en forma dinmica para satisfacer demandas de personalizacin. En cualquier caso, retornar al cliente con un archivo XML que haga referencia a un archivo XSL ubicado en el servidor tiene al menos dos inconvenientes: genera un trfico de ida y vuelta innecesario, ya que podra evitarse enviando directamente el cdigo HTML al cliente, y puede requerir caractersticas especiales en el explorador del cliente que pueden privarlo de visualizar la pgina correctamente.

Figura 1.9: Generacin de un documento HTML a partir de una fuente XML + XSL El lenguaje XSLT (Transformaciones XSL40) se utiliza para componer hojas de estilo XSL. Estos documentos contienen instrucciones que mediante el uso de Xalan-Java, por ejemplo, sirven para llevar a cabo las transformaciones y producir un documento de salida, una secuencia de caracteres o de bytes, un DOM (Modelo de Objetos de Documento), etc. En el caso particular mencionado anteriormente, se desea obtener un documento de salida con formato HTML a partir de un par de documentos XML / XSL.

III. Lenguaje XHTML

XHTML es una reformulacin de HTML 4.0 y XML 1.0. HTML fu concebido como un lenguaje para el intercambio de documentos cientficos y tcnicos. Siendo que HTML es una aplicacin SGML, se vali de un reducido grupo de etiquetas para la formulacin de documentos relativamente simples. HTML se populariz rpidamente y super las expectativas que motivaron su creacin. La flexibilidad de HTML y la constante invencin de nuevos elementos para ser usados con este lenguaje, ha creado el desorden y falta de compatibilidad con algunos navegadores, cosa que con su reformulacin en el XHTML, se pretende corregir.

Por su lado, XML es un simple y muy flexible formato de texto derivado de SGML diseado especialmente para documentos web. Permite a los desarrolladores crear sus propias etiquetas. A diferencia del HTML, XML es muy estricto en su estructura. Ms que por el formato, XML se preocupa de la estructura. En HTML, es posible visualizar documentos mal estructurados, etiquetas mal anidadas o inconclusas, en XML si se abre una etiqueta, debe cerrarse.


20

XML es ampliamente usado para estructurar datos (inventarios, catlogos, por ejemplo). Una de sus ventajas es la capacidad que provee al permitir la transferencia estructurada de informacin que puede ser utilizada por otras aplicaciones.

As que XHTML reune la capacidad de formato de HTML y esta se consolida con la formalidad del XML (y sus reglas) a la hora de estructurar documentos para la portacin de datos. Esto le permite a la vez, ser manejado y validado por cualquier herramienta estndar. Nos permite echar mano de la modularizacin.

Esta reformulacin nos permite desarrollar sitios que podrn ser vistos por personas discapacitadas, ya que existen agentes de usuario que pasan la informacin (obviamente debido a la bien formada estructura) a formatos como Braile.

Reglas bsicas del XHTML

Al ser una recomendacin y un estndar, es necesario observar que nuestros documentos XHTML deben respetar ciertas reglas bsicas :

1. Todos los elementos deben estar debidamente jerarquizados

Cuando se escriba un documento es muy comn que erroneamente se cierren elementos de forma inadecuada, por ejemplo:

El Veloz murcielago hind coma feliz cardillo y caa

En este ejemplo, se ha cerrado la etiqueta de prrafo antes de lo debido, en algunos navegadores esto pasar desapercibido, sin embargo la forma correcta es la siguiente:

El Veloz murcielago hind coma feliz cardillo y caa

2. Todo documento debe estar bien formado

Lo cual quiere decir que losdocumentos deben tener al menos la siguiente estructura:

... ...

3. Los nombres de las etiquetas deber estar en minsculas

Al ser XHTML una aplicacin XML, est hace diferencia entre maysculas y minsculas, por lo que y son dos cosas muy diferentes


21

1.1. 4. Todas las etiquetas deben cerrarse

En versiones anteriores del HTML era posible dejar etiquetas sin cerrar, incluso algunos autores te deca que no era necesario cerrar tal o cual etiqueta, en XHTML es obligatorio que todas las etiquetas sean cerradas, por lo que:

Esto es un prrafo

Es incorrecto, en su lugar debe ser:

Esto es un prrafo

El cual tiene su etiqueta de cierre correspondiente. en los casos donde las etiquetas son unarias como , , y otras, el cierre se da dentro de ella misma, terminando la etiqueta con />, por ejemplo:

Este texto hace un Salto de Lnea y despus pone una lnea abajo

5. Los nombres de los atributos deben ir en minsculas

Por lo antes mencionado en el punto 3, todos los nombres de atributos para una etiqueta deben ir en minsculas, por ejemplo:

es invlido, en su lugar sera lo correcto

6. Los valores de los atributos deben ir entre comillas

Esto para evitar confusiones, por ejemplo:

es incorrecto, en su lugar use

7. El atributo id reemplaza al atributo name

En XHTML el atributo name est descontinuado, en su lugar use el atributo id:

Slo en casos de compatibilidad con navegadores antiguos debe usarse el atributo name, si se est usando XHTML transicional, el atributo name es permitido.

El DOCTYPE

Todos los documentos XHTML vlidos deben llevar un elemento llamado DOCTYPE, el cual no es parte del documento en s, sino que define el tipo de DTD (Document Type Definition o Definicin de tipo de documento) a emplear en los documentos, es obligatorio y puede ser uno de estos tres:


22

XHTML 1.0 Strict: Se usa cuando se desea utilizar al 100% XHTML, su nombre lo dice bien claro, es XHTML estricto, la declaracin del mismo es como sigue:

HTML 1.0 Transitional: Es el ms usado ya que permite manejar elementos de XHTML y HTML 4.01, adems de que se debe usar cuando el navegador no soporta correctamente CSS, su declaracin es la que sigue:

XHTML 1.0 Frameset: Se debe usar cuando se manejan frames, su declaracin es la siguiente:

Comprender los elementos del lenguaje XHTML y hojas de estilo.


23

Captulo II

Programacin de una aplicacin Web

I. Fundamentos de programacin Web Identificar las instrucciones, comandos y funciones del lenguaje de programacin web.

En el proceso de desarrollo de aplicaciones web tienen que ser tomadas decisiones concernientes al tipo de lenguaje de programacin utilizado en el sitio, por ello es de considerarse las diferentes alternativas de lenguajes existentes. Como punto de partida es de considerarse que cdigo deber ser ejecuta del lado cliente (el equipo donde se visualiza la pgina) o del lado servidor (el equipo donde reside el sitio) En las siguientes graficas12 se muestra dos escenarios, en el primero la ejecucin de la aplicacin se realiza del lado cliente, esto representa ventajas en el sentido de que la comunicacin hacia el servidor pudiera reducirse significativamente y por ende el servidor puede atender un mayor nmero de peticiones. En este mismo sentido cuando una aplicacin web es ejecutada del lado cliente, se reduce los requerimientos que debe de tener el servidor para alojar la aplicacin web.

12 Grficos tomados de: http://www.adelat.org/media/docum/nuke_publico/lenguajes_del_lado_servidor_o_cliente.html


24

La ejecucin de cdigo del lado servidor a su vez tiene grandes ventajas, una de ellas es la posibilidad de no tener tantos requerimientos a los navegadores para que puedan visualizar la aplicacin debido a que el procesamiento se lleva a cabo en el servidor, en la grafica se aprecia tecnologas que se ejecutan en el lado del servidor, as como tecnologas que se ejecutan en el lado del cliente.

Es importante hacer notar que muchas veces se requiere ejecucin de cdigo tanto del lado cliente como del lado servidor. Los lenguajes de programacin ms utilizados en la actualidad en la construccin de sitios web son: Lenguajes del lado cliente:

HTML. Lenguaje basado en etiquetas

Java Script. A travs de este lenguaje es posible el establecimiento de cdigo que ser ejecutado en el propio navegador

Applets de Java Visual Basic Script

FLASH CSS


25

Lenguajes del lado cliente:

CGI

PERL

ASP

PHP

JSP

Lenguajes del lado cliente servidor

DHTML XML

Programando con PHP Sintaxis de PHP La ventaja que tiene PHP sobre otros lenguajes de programacin que se ejecutan en el servidor (como podran ser los script CGI Perl), es que nos permite intercalar las sentencias PHP en las paginas HTML, es un concepto algo complicado de entender si no se ha visto nunca como funciona unas pginas PHP o ASP. Vamos a ver un ejemplo sencillo para comprenderlo mejor. Seguiremos este criterio durante todo el manual.

Ejemplo de PHP


26

Parte de HTML normal.

El cdigo PHP ejecutado tiene dos partes: la primera imprime Parte de PHP" y la segunda es un bucle que se ejecuta 10 veces de 0 a 9, por cada vez que se ejecuta se escribe una lnea, la variable $i contiene el nmero de lnea que se est escribiendo. Variables Una variable es un contenedor de informacin, en el que podemos meter nmeros enteros, nmeros decimales, carcteres... el contenido de las variables se puede leer y se puede cambiar durante la ejecucin de una pgina PHP. En PHP todas las variables comienzan con el smbolo del dlar $ y no es necesario definir una variable antes de usarla. Tampoco tienen tipos, es decir que una misma variable puede contener un nmero y luego puede contener carcteres.

Ejemplo de PHP

Existen 2 tipos de variables, las variables locales que solo pueden ser usadas dentro de funciones y las variables globales que tienen su mbito de uso fuera de las funciones, podemos acceder a una variable global desde una funcin con la instruccin global nombre_variable; Aritmticos


27

Estos son los operadores que se pueden aplicar a las variables y constantes numricas.

Operador Nombre Ejemplo

+ Suma 5 + 6 - Resta 7 - 9 * Multiplicacin 6 * 3 / Divisin 4 / 8 % Mdulo 7 % 2 ++ Suma 1 $a++ -- Resta 1 $a--

Ejemplo:

Ejemplo de PHP

Comparacin Los operadores de comparacin son usados para comparar valores y as poder tomar decisiones. Operador Nombre Ejemplo Devuelve verdadero cuando:

== Igual $a == $b $a es igual $b != Distinto $a != $b $a es distinto $b < Menor que $a < $b $a es menor que $b > Mayor que $a > $b $a es mayor que $b = $b $a es mayor o igual que $b


28

Condicionales Las sentencias condicionales nos permiten ejecutar o no unas ciertas instrucciones dependiendo del resultado de evaluar una condicin. Las ms frecuentes son la instruccin if y la instruccin switch. Sentencia if ... else

La sentencia if ejecuta una serie de instrucciones u otras dependiendo de la condicin que le pongamos. Probablemente sea la instruccin ms importante en cualquier lenguaje de programacin. Con la sentencia switch podemos ejecutar unas u otras instrucciones dependiendo del valor de una variable, en el ejemplo anterior, dependiendo del valor de la variable $posicion se ejecuta el bloque 1 cuando el valor es "arriba", el bloque 2 cuando el valor es "abajo" y el bloque 3 si no es ninguno de los valores anteriores. Bucles Los bucles nos permiten iterar conjuntos de instrucciones, es decir repetir la ejecucin de un conjunto de instrucciones mientras se cumpla una condicin. Sentencia while

Mientras la condicin sea cierta se reiterar la ejecucin de las instrucciones que estn dentro del while.

Ejemplo de PHP Inicio


29

$i=0; while ($i Final

Sentencia for La instruccin for es la instruccin de bucles ms completa. En una sola instruccin nos permite controlar todo el funcionamiento del bucle. El primer parmetro del for, es ejecutado la primera vez y sirve para inicializar la variable del bucle, el segundo parmetro indica la condicin que se debe cumplir para que el bucle siga ejecutndose y el tercer parmetro es una instruccin que se ejecuta al final de cada iteracin y sirve para modificar el valor de la variable de iteracin. Funciones El uso de funciones nos da la capacidad de agrupar varias instrucciones bajo un solo nombre y poder llamarlas a estas varias veces desde diferentes sitios, ahorrndonos la necesidad de escribirlas de nuevo.

Manejo de cadenas Dado el uso del lenguaje PHP el tratamiento de cadenas es muy importante, existen bastantes funciones para el manejo de cadenas, a continuacin explicaremos las ms usadas. * strlen(cadena). Nos devuelve el nmero de carcteres de una cadena * split(separador,cadena). Divide una cadena en varias usando un carcter separador. * sprintf(cadena de formato, var1, var2...). Formatea una cadena de texto al igual que printf pero el resultado es devuelto como una cadena. * substr(cadena, inicio, longitud). Devuelve una subcadena de otra, empezando por inicio y de longitud longitud.


30

* chop(cadena). Elimina los saltos de lnea y los espacios finales de una cadena. * strpos(cadena1, cadena2). Busca la cadena2 dentro de cadena1 indicndonos la posicin en la que se encuentra. * str_replace(cadena1, cadena2, texto). Reemplaza la cadena1 por la cadena2 en el texto.

Ejemplo de PHP

Envo y recepcin de datos El lenguaje PHP nos proporciona una manera sencilla de manejar formularios, permitindonos de esta manera procesar la informacin que el usuario ha introducido. Al disear un formulario debemos indicar la pgina PHP que procesar el formulario, as como en mtodo por el que se le pasar la informacin a la pgina.

Ejemplo de PHP Ejemplo de procesado de formularios Introduzca su nombre:


31

Por razones de seguridad para acceder a las variables del formulario hay que usar el array de parmetros $_POST[] o $_GET[] dependiendo del mtodo usado para enviar los parmetros.

Method GET y POST En la pgina anterior hemos comentado que los datos de un formulario se enva mediante el mtodo indicado en el atributo METHOD de la etiqueta FORM, los dos mtodos posibles son GET y POST. La diferencia entre estos dos mtodos radica en la forma de enviar los datos a la pgina, mientras que el mtodo GET enva los datos usando la URL, el mtodo POST los enva por la entrada estndar STDIO

Ejemplo de PHP Ejemplo de procesado de formularios Introduzca su nombre: Introduzca sus apellidos: Ejemplo de PHP Ejemplo de procesado de formularios Introduzca su nombre: Introduzca sus apellidos: Ejemplo de PHP


32

Ejemplo de procesado de formularios El nombre que ha introducido por GET es: El nombre que ha introducido por POST es:

Envo de correo electrnico PHP nos ofrece la posibilidad de enviar emails de una manera sencilla y fcil, para ello el lenguaje nos proporciona la instruccin mail( )

En el parmetro destinatario pondremos la direccin de email a donde se enviar el mensaje, en el parmetro tema el tema o subject del mensaje y el parmetro texto del mensaje el cuerpo del mensaje en formato texto plano. Existe una sintaxis extendida de la instruccin mail( ) que nos permite aadir informacin adicional a la cabecera del mensaje.

En la informacin de cabecera podremos incluir parmetros adicionales al mensaje como Reply-To:, From:, Content-type:... que nos permiten tener un mayor control sobre el mensaje. A su vez, si el sitio web realiza conectividad a base de datos esta decisin tiene tomarse de una manera conjunta, entre las tecnologas de motores de bases de datos que ms se utilizan tenemos:

Microsoft SQL Server Mysql Oracle

En secciones posteriores se detallara la utilizacin del motor de base de datos Mysql. Tarea: Realizar investigacin de versiones gratuitas de SQL Server y Oracle

Sistemas operativos donde se ejecutan Tamao mximo de la base de datos


33

II. Configuracin del Entorno Web

En la actualidad existen diferentes tecnologas que dan soporte a los servidores de pginas web, estas constituyen la base en la cual las pginas son alojadas y desplegadas cuando una peticin se realiza a travs de un navegador web

Un estudio de Netcraft13, muestra que los servidores de pginas web que dominan en mercado son Apache 14 e IIS15, como se muestra en la siguiente figura:

Tomando de referencia esta informacin, en los anexos de este documento se muestra los procesos para la configuracin del servidor de pginas web Apache e IIS. PRACTICA: Realizar la instalacin del servidor de pginas web Apache e IIS (Se sugiera la utilizacin de Vmware)

III. Mtodos de conexin de forma abierta

Existen diferentes mecanismos a travs de los cuales es posible establecer conectividad a bases de datos entre los cuales tenemos:

ODBC, JDBC, PDO O NATIVA

13 http://news.netcraft.com/ 14 http://www.apache.org/ 15 http://www.iis.net/


34

A continuacin se describe cada uno de ellos. ODBC ODBC16 (Open Database Connectivity) es una plataforma estndar de acceso a sistemas de manejo de bases de datos. ODBC es independiente del sistema operativo o del lenguaje de programacin que se est utilizando. A travs de estas tecnologas es posible establecer conexiones con bases de datos tales como:

Oracle SQL Server Access Sybase Interbase Firebird C/D-ISAM LINC Developer System Z

Un ejemplo de la utilizacin de ODBC desde cdigo PHO es la siguiente17:


35

odbc_close($connect); ?>

Un ejemplo de la utilizacin de ODBC desde cdigo C# es la siguiente18:

using System; using System.Collections.Generic; using System.Text; using System.Data.Odbc; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { OdbcConnection DbConnection = new OdbcConnection("DSN=SAMPLE_ISAM"); DbConnection.Open(); OdbcCommand DbCommand = DbConnection.CreateCommand(); DbCommand.CommandText = "SELECT * FROM NATION"; OdbcDataReader DbReader = DbCommand.ExecuteReader(); int fCount = DbReader.FieldCount; Console.Write( ":" ); for ( int i = 0; i < fCount; i ++ ) { String fName = DbReader.GetName(i); Console.Write( fName + ":" ); } Console.WriteLine(); while( DbReader.Read()) { Console.Write( ":" );

18 http://www.easysoft.com/developer/languages/csharp/CSharpODBCExample1.cs


36

for (int i = 0; i < fCount; i++) { String col = DbReader.GetString(i); Console.Write(col + ":"); } Console.WriteLine(); } DbReader.Close(); DbCommand.Dispose(); DbConnection.Close(); } } }

JDBC JDBC (Java Database Connectivity) es una plataforma estndar de acceso a bases de datos desde Java

DB2 FoxPro Ingres InterBase LDAP MS Access MS SQL Server

MySQL Oracle Paradox PostgreSQL Progress Sybase

El listado completo de manejadores de bases de datos soportados por JDBC se puede encontrar en: http://developers.sun.com/product/jdbc/drivers/ Un ejemplo de la utilizacin de JDBC a base de datos SQL Server es el siguiente19 :

DriverManager.getConnection( "jdbc:odbc:dsn_name;user=***;password=***"); DriverManager.getConnection("jdbc:odbc:dsn_name",properties);

19 http://www.herongyang.com/jdbc/JDBC-ODBC-SQL-Server-Connection.html


37

// properties contains "user" and "password" /** * OdbcSqlServerConnection.java * Copyright (c) 2007 by Dr. Herong Yang. All rights reserved. */ import java.sql.*; public class OdbcSqlServerConnection { public static void main(String [] args) { Connection con = null; try { Class.forName("sun.jdbc.odbc.JdbcOdbcDriver") ; // Connect with a full url string con = DriverManager.getConnection( "jdbc:odbc:SQL_SERVER;user=sa;password=HerongYang"); System.out.println("First connection ok."); con.close(); // Connect with a url string and properties java.util.Properties prop = new java.util.Properties(); prop.put("user", "sa"); prop.put("password", "HerongYang"); con = DriverManager.getConnection("jdbc:odbc:SQL_SERVER", prop); System.out.println("Second connection ok."); con.close(); } catch (Exception e) { System.err.println("Exception: "+e.getMessage()); } } }

Un ejemplo de la utilizacin de JDBC a base de datos Oracle es el siguiente20 : Connection connection = null; try { // Load the JDBC driver String driverName = "oracle.jdbc.driver.OracleDriver";

20 http://www.exampledepot.com/egs/java.sql/ConnectOracle.html


38

Class.forName(driverName); // Create a connection to the database String serverName = "127.0.0.1"; String portNumber = "1521"; String sid = "mydatabase"; String url = "jdbc:oracle:thin:@" + serverName + ":" + portNumber + ":" + sid; String username = "username"; String password = "password"; connection = DriverManager.getConnection(url, username, password); } catch (ClassNotFoundException e) { // Could not find the database driver } catch (SQLException e) { // Could not connect to the database }

IV. Mtodos de conexin a datos usando directamente los drivers del

proveedor.

Debido a Identificar los diversos mtodos de conexin definidas por el proveedor de base de datos (OLEDB, SQLServer, Oracle,MySQL)

V. Manipulacin de datos a travs de un programa

Esta seccin tiene como objeto mostrar el empleo de las instrucciones de insercin, borrado, actualizacin y consulta en una base de datos con la finalidad de que estas operaciones sean posteriormente incorporadas dentro del desarrollo de su aplicacin web. NOTA: Como punto de partida es necesario tener habilitado un servidor de pginas web Apache con soporte de PHP y un motor de base de datos Mysql, para ellos te tienen diferentes opciones, desde trabajarlo en Linux, o utilizar soluciones integradas como es el caso de AppServer para ambientes Windows

Conexin Ingrese a su localhost y crea una base de datos denominada familia que contenga a la tabla agenda donde los campos de dicha tabla se describen a continuacin


39

Una vez creada, se deber realizar el cdigo en HTML la cual haga referencia a los campos mostrados con anterioridad, el cdigo lucir de la siguiente manera:

Escribe tu nombre: Escribe tu direccion: Escribe tu Telefono: input type="reset" value="BORRAR DATOS">

Una vez que tienes la interfaz, que es el cdigo en HTML, el cdigo PHP que va a realizar la ejecucin es el siguiente: Este cdigo va a hacer referencia al archivo denominado conectar, y su nica funcin es proveer una conexin con la base de datos y as no estar repitiendo de manera consecutiva el mismo cdigo. Cuando ya se tiene el cdigo en un archivo y se emplea el mismo, utiliza la instruccin require(" "); y en este caso quedar de la siguiente forma


40

require("conectar.php");

Este es el cdigo que corresponde al archivo InsertarPHP.php


41

Despus de presionar el botn de enviar datos o continuar, la confirmacin esperada ser

Actividad Lee detenidamente las oraciones y ve realizando paso a paso cada una de las instrucciones marcadas.

Crea una base de datos denominada Super.


42

Dentro de la base se crearan las tablas de damas y caballeros, cada una de las tablas tendrn los campos consecutivo, cdigo (XX-DDD), descripcin (20) , cantidad(3), precio unitario (5), total(12).

Importante: debern de insertar mnimo 5 registros en cada tabla (damas y caballeros) Una vez que se tienen creada la base de datos con las tablas, se deber de realizar el script para conectarte a la base de datos y el cdigo para insertar datos. Se beber de entregar el cdigo debidamente documentado de manera individual y proponer cual es la sintaxis y/o condigo para eliminar un registro.

Consulta de un Registro En esta ocasin, se va a trabajar con la consulta de un registro de la tabla agenda que se haba creado previamente, para lo cual se deben de realizar los siguientes pasos:

Contar con el archivo conectar.php; recuerda que en este archivo contiene las instrucciones para conectarte al servidor, y a la base de datos.

La interfaz de esta pgina, va a ser sencilla y est dada en primera instancia por el siguiente cdigo:

Escribe el nombre a buscar o consultar:

Como puede observarse, este formulario va a hacer referencia a un archivo denominado bsqueda.php, que es donde se va a realizar la bsqueda del elemento dentro de nuestra tabla agenda de la base de datos familia; el cdigo de dicho archivo es el siguiente:


43

echo ""; while ($regis=mysql_fetch_row($resul)){ echo ""; foreach($regis as $clave){ echo "",$clave,""; } } echo ""; } else{ echo "no se encontr el registro"; } mysql_close(); ?>

La descripcin de este cdigo es la siguiente:

$resul=mysql_query("Select * from agenda where(Nombre like '$v1')");

Esta lnea, indica que se va a generar una consulta de la tabla agenda donde el criterio de bsqueda ser el campo Nombre que sea igual a lo que contenga la variable $v1.

while ($regis=mysql_fetch_row($resul)) En esta lnea de cdigo, la instruccin especifica mysql_fetch_row, devuelve el arreglo con los valores de la consulta, que sera nuestro criterio ($result).

foreach($regis as $clave) Esta lnea tiene como finalidad asignar a una variable temporal lo que contenga $regist.

mysql_close(); Observe que despus de haber mostrado el archivo especificado, se debe de cerrar la conexin a la base de datos que se habilito en el archivo conectar.php, esto con la finalidad de que no puedan generarse errores sobre el manejo de datos. Las pantallas sern algo similar a las siguientes


44

Actividad De la Base de datos anterior (super), debern de utilizar el mtodo de bsqueda para localizar los artculos por medio de su cdigo y nombre; de ambas tablas (damas y caballeros).

Eliminacin de un registro con confirmacin


45

A continuacin se va a mostrar la eliminacin (borrado) de un registro de en la tabla agenda que se haba creado previamente, para lo cual se deben realizar los siguientes pasos:

Contar con tu archivo conectar.php; recuerda que en este archivo se tienen las instrucciones para conectarte a tu servidor, y a la base de datos.

La interfaz de esta pgina, va a ser sencilla y est dada de primera instancia por el siguiente cdigo:

Escribe el nombre a eliminar o borrar:

Como se puede observar, este formulario va a hacer referencia a un archivo denominado eliminar.php, que es donde reside el cdigo para eliminar previa confirmacin de la accin dentro de nuestra tabla agenda de la base de datos familia; el cdigo de dicho archivo es el siguiente:


46

echo ""; } else{ echo "no se encontr el registro","",""; } mysql_close(); ?> Como puede observarse, en esta ocasin se est haciendo el llamado a un tercer archivo denominado SiConfirmoEliminacion.php, este archivo lo que hace realmente es eliminar el archivo que se encontr previamente en el anterior (eliminar.php), es decir si uno quisiera eliminar un registro de la base de datos con la plena seguridad de que es ese, entonces solo se tendra que hacer el archivo SiConfirmoEliminacion.php. El archivo SiConfirmoEliminacion.php es el siguiente:

Las pantallas sern algo similar a las siguientes


47

Despliegue del contenido de una tabla de la base de datos. En esta ocasin, se va a trabajar con el listado (despliegue) de un registro de nuestra tabla agenda que se haba creado previamente, para lo cual debes de realizar los siguientes pasos:

Contar con tu archivo conectar.php; recuerda que en este archivo contiene las instrucciones para conectarte a tu servidor, y a la base de datos.

La interfaz de esta pgina, va a ser sencilla y est dada de primera instancia por el siguiente cdigo:


48

Como observaste, ahora la interfaz solo lleva la gestin del botn de Mostrar, ya que como se supone se va a desplegar todo el contenido de la tabla de datos, el archivo que ejecuta dicha accin es listado.php, el cual contiene el siguiente script

Las pantallas sern algo similar a las siguientes


49

Actividad De la Base de datos anterior (super), debern de utilizar el mtodo de despliegue general por cada una de las tablas (damas, caballeros). Como ya se tiene todas las acciones o las ms comunes, ahora debern de entregar ya todo integrado es decir trabajar en el aspecto de presentacin a todo este trabajo de practica utilizando hojas de estilo, realizar la aplicacin lo ms detallado posible y obviamente entendible.


50

Entregables Las actividades a realizarse se dividen en dos fases, la primera enfocada al anlisis de requerimientos y diseo de la aplicacin web y la segunda se enfoca a la implementacin y pruebas de la misma. As los entregables de las fases sern: Primera fase: Determinar los requerimientos de funcionalidad del programa mediante tcnicas de anlisis para determinar las variables de entrada y salida del problema especfico.

Determina el objetivo del programa. Realiza un mapa conceptual del problema. Genera un listado de variables E/S asocindoles un tipo de dato.

Proponer una solucin mediante un algoritmo o diagrama de flujo, para atender los requisitos de un problema especfico.

Establece los pasos lgicos a seguir y su orden. Usa las estructuras de control necesarias. Presenta el pseudocdigo del problema o diagrama de flujo correspondiente al

modelado de objetos. Define un escenario de pruebas para evaluar que los resultados son acordes a

los requerimientos.

Establecer los elementos de las pginas de un Sitio Web por medio del anlisis de requerimientos de datos para cubrir las necesidades de comunicacin de una organizacin.

Realiza la especificacin los requerimientos (apariencia, informacin a presentar, funcionalidad del sitio).

Elabora el Mapa del sitio. Disea el prototipo de interface de acuerdo con los criterios de usabilidad.

Segunda fase:

Desarrollar la aplicacin utilizando algn lenguaje de programacin para solucionar un problema especfico.

Realiza la traduccin del diseo al lenguaje de programacin. Interpreta los errores de compilacin y los corrige. Generar un programa ejecutable y realiza la verificacin de los resultados

(errores lgicos) al menos con 2 corridas usando valores de entrada diferentes.


51

Presenta el cdigo fuente del programa de acuerdo a las buenas prcticas de programacin (tabulaciones, comentarios, nombres de variables, entre otras).

Adicionalmente en la segunda fase se entregar en medio electrnico:

Sitio Web (Formularios, Contadores, Accesos a Base de Datos con sus funciones de interaccin: altas, bajas, modificaciones, consultas y reportes).

Base de Datos. Archivo de conexin de Base de datos. Documentacin electrnica (Manual de usuario y tcnico).


52

Bibliografa

Java 2 Interfaces grficas y aplicaciones para internet (2da. Edicin), Ceballos, Francisco Javier, AlfaOmega Ra-Ma

The web designers Idea Book: The Ultimate Guide, Mcneil, Patrick, FW Publications Inc.

Principios de seguridad en el comercio electrnico (1era Edicin), Puentes Cairo, Juan Francisco. AlfaOmega Ra-Ma

Web Applications Design Patters (Interactive Technologies. 1st Ed.), Vora, P. Morgan Kaufmann.

Documents

antologia Desarrollo de Aplicaciones Web