PHP POO Nivel Avanzado 2

92
SEPARATA DEL CURSO INGENIERÍA WEB UNIDAD III: PROGRAMACION PHP UNIDAD II: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II UNIDAD I: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML – I

Transcript of PHP POO Nivel Avanzado 2

Page 1: PHP POO Nivel Avanzado 2

SEPARATA DEL CURSO INGENIERÍA WEB

UNIDAD III: PROGRAMACION PHP

UNIDAD II: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II

UNIDAD I: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML – I

Page 2: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 2

INTRODUCCIÓN

Esta separata describe los fundamentos del desarrollo de aplicaciones web, que no

son sino aplicaciones basadas en el modelo Cliente/Servidor donde la comunicación

con el usuario se hace utilizando páginas web. El código de la aplicación se puede

ejecutar en el cliente, en el servidor, o distribuirse entre ambos. Suelen utilizar una

Base de Datos para organizar y facilitar el acceso a la información.

Las ventajas que presentan son: su facilidad de manejo y de desarrollo, accesibilidad y

portabilidad.

Dentro de las tecnologías a utilizar en el cliente están: los lenguajes de guiones (como

JavaScript), las Applets Java y ActiveX. En el servidor PHP.

Page 3: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 3

UNIDAD I: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML – I

1.1. CONCEPTOS FUNDAMENTALES DE WEB.

¿Qué es una página web?

Una página Web es un documento multimedia, que puede llevar incorporado textos, imágenes, sonidos y animaciones. Una característica importante es que se puede acceder a los contenidos, propios ó externos, por medio de hipervínculos ó enlaces.

¿Qué necesitamos para visualizar páginas web?

Cuando accedemos a Internet existen una serie de ordenadores conectados permanentemente que se llaman Servidores Web. En estos ordenadores están

almacenadas las páginas Web tanto de usuarios como de empresas ofreciendo información, productos, etc.

Figura 01: Elementos necesarios para visualizar páginas web

Nosotros, cuando nos conectamos a Internet para solicitar una determinada página Web desde un ordenador, nos convertimos en Clientes Web.

El programa que necesitamos para visualizar dicha página se llama Navegador. Este programa se encarga de solicitar al servidor correspondiente una determinada página.

La transferencia de información entre Cliente-Servidor se realiza mediante un protocolo específico denominado HTTP.

En la actualidad para visualizar páginas Web existen diferentes navegadores: Netscape Navigator, Mozilla, Opera, Internet Explorer, etc.

Page 4: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 4

Las páginas Web están escritas en un lenguaje de programación llamado HTML. Se trata de

un conjunto de marcas que se van intercalando entre el texto para que el navegador sepa qué debe presentar en pantalla en todo momento.

Sitio Web

Un sitio Web está formado por un conjunto de páginas Web. En analogía, un sitio Web es, por ejemplo, una revista, mientras que una página Web es una de las páginas que constituyen dicha revista.

Cualquier sitio Web publicado en Internet puede ser visto desde cualquier parte del mundo. Las posibilidades que esto ofrece son inimaginables. Los propósitos para los que nos podemos servir de Internet y las tecnologías de la información en general vienen a cubrir todo el espectro de propósitos, ya sea para fines personales, de ocio, académicos, laborales, empresariales, etc. Su gran potencialidad dependerá pues de lo inteligentemente que empleemos dicha tecnología.

Se pueden diferenciar dos grandes grupos de sitios Web, los estáticos y los dinámicos.

Web Estática

Los sitios Web estáticos son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces (links) entre las páginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas on-line, e-mails inteligentes.

Esta es una opción más que suficiente para aquellos sitios Web que simplemente ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios, etc. Ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y su perfil de empresa.

La principal ventaja de este tipo de páginas es lo económico que resulta crearlas , con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, un sitio web estático se puede crear fácilmente sin necesidad de ningún tipo de programación especial (PHP, ASP, Java, etc).

La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos on-line, etc.

“En esta asignatura no desarrollaremos sitios web estáticos”.

Page 5: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 5

Web Dinámica (Aplicación Web)

Los sitios Web dinámicos son aquellos que permiten crear aplicaciones dentro de la

propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada, etc.

El desarrollo de este tipo de Web es más complicado, pues requiere conocimientos específicos de lenguajes de programación así como creación y gestión de bases de datos, pero la enorme potencia y servicio que otorgan este tipo de páginas hace que merezca la pena la inversión y esfuerzo invertidos respecto a los resultados obtenidos.

Una gran ventaja que proporciona crear sitios Web dinámicos es la posibilidad de trabajar con bases de datos, las cuales puede almacenar cualquier tipo de datos que a usted le interese para posteriormente realizar cualquier tipo de consultas.

¿Le gustaría saber las preferencias y opiniones de los clientes de sus productos y servicios?

¿Cuál es su cartera de pedidos generada a través de la red?

Estas y otras preguntas encuentran respuestas con las Web dinámicas y las bases de datos que son el tema central de esta asignatura.

Como una disciplina emergente, la ingeniería w eb permite crear aplicaciones interactivas

(w eb dinámicas) bajo la arquitectura cliente/servidor.

La diferencia fundamental de una w eb de tipo estático respecto a una de tipo dinámico es

que diseño y contenidos son independientes, por lo que si algún día se plantea un cambio de diseño o la inserción de un nuevo módulo, no hace falta tocar ningún contenido,

cosa que es imposible con un diseño w eb de tipo estático.

La inserción de contenidos es muy sencilla, con un procesador de textos tipo Word. Se

podrá escribir un artículo y asignarle por ejemplo una fecha de publicación y una fecha de

caducidad, no habrá que preocuparse por artículos obsoletos.

Y todo esto se podrá hacer desde cualquier parte del mundo y desde cualquier ordenador, sólo hace falta una conexión a Internet. Esto es posible porque se trabaja directamente con

el servidor de contenidos, sin programas externos. Además, como es un sistema abierto y

en continuo crecimiento no se crea una dependencia proveedor-cliente, lo cual redunda en

su beneficio si en el futuro deciden hacer cambios en la w eb.

Ingeniería Web

La Ingeniería Web es una disciplina que comprende el proceso de creación, implantación y mantenimiento de aplicaciones web cumpliendo con criterios de alta calidad y seguridad.

Page 6: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 6

En la actualidad se están desarrollando aplicaciones web que están cambiando nuestros estilos de vida; ya que con solo ingresar a estas aplicaciones podemos realizar compras, pagos de servicios básicos, realizar reservas de hoteles etc.

Aplicación Web

- Una aplicación web es un sistema computacional remoto que se accesa por Internet.

- Físicamente los datos se guardan en una base datos ligada a un servidor web.

- Para ingresar o consultar los datos, hay que estar conectado a Internet, usar un browser (Internet Explorer, Firefox) y escribir la dirección del servidor (ej.: http://www.misdatos.com) donde está la información almacenada.

- La entrada es restringida y es necesario identificarse como usuario para entrar al sistema.

- La comunicación se hace usando páginas web estilo formulario.

¿Qué particularidades tiene el desarrollo web?

Las aplicaciones web tienen sus particularidades, entre las más significativas podemos listar:

- Residente en red. Una aplicación web reside en una red, y debe dar servicio

a una comunidad diversa de clientes.

- Inmediatez. Se refiere al corto tiempo que normalmente tienen los proyectos

web para terminar, o por lo menos, lanzar una versión inicial.

- Evolución continua. A diferencia del software de aplicaciones convencional,

que evoluciona a través de versiones planeadas y cronológicamente espaciadas, las aplicaciones web están en constante evolución, y se actualizan gradualmente.

- Seguridad. Dado que no controlamos con certeza quién puede acceder a

nuestra aplicación; la seguridad y confidencialidad de la información requieren un énfasis especial.

- Estética. Es bien sabido que la primera impresión jamás se olvida, por lo que

nuestro sitio debe ser atractivo, ergonómico y usable.

- Medible. Mediante la cuantificación de resultados, podemos conocer la

cantidad de usuarios que tenemos, así como sus patrones de comportamiento.

Page 7: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 7

El proceso de ingeniería web

Es iterativo e incremental. Esto como respuesta a la continua evolución de las aplicaciones web, así como el corto tiempo en el que normalmente se requiere que sean implementadas.

Roger Pressman (en su libro: “Software Engineering: A Practitioner’s Approach”, que es una de las biblias de la ingeniería de software) sugiere un proceso de ingeniería web compuesto por las siguientes fases (Figura 02):

- Planteamiento y formulación. Identificamos los objetivos de nuestra

aplicación, y delimitamos el alcance de la primera iteración.

- Planificación. Una vez planteado el problema, podremos estimar costos,

riesgos y esfuerzo durante el desarrollo. En la planeación iterativa solamente se detalla la iteración actual, y las iteraciones subsecuentes sólo se plantean de forma general.

- Análisis. Durante esta etapa establecemos los requerimientos técnicos,

gráficos, y de contenido, que incorporaremos en la iteración.

- Ingeniería. La actividad de ingeniería incorpora dos grupos de tareas que se

realizan en paralelo: el diseño del contenido y la producción, se enfocan en el diseño, producción y adquisición del contenido de texto, gráfico y video que se vayan a integrar en la aplicación. Estas tareas son realizadas por personal no técnico. Por otro lado, están el diseño arquitectónico, de navegación e interfaz, el cual lidia con los aspectos técnicos.

- Generación de páginas y pruebas. Se prueba que el contenido dinámico se genere correctamente, utilizando las plantillas, interfaces y contenidos diseñados en la fase de ingeniería. Posteriormente se realizan las pruebas pertinentes, que dependerán del tipo de aplicación y requerimientos no funcionales (por ejemplo, pruebas de desempeño, etc.).

- Evaluación del cliente. Al final de cada iteración se debe realizar una

evaluación con el cliente, para validar el avance y determinar los cambios o mejoras (en caso de ser necesarios), que se aplicarán en las siguientes iteraciones.

Existen otros procesos de desarrollo de aplicaciones w eb, como por ejemplo UWE (Ingeniería Web basada en UML), es una metodología enfocada al modelado de aplicaciones

Web, basada en la extensión de la semántica del UML mediante la utilización de

estereotipos, al estar basada estrictamente en UML garantiza que sus modelos sean

fáciles de entender para conocedores de UML.

Su proceso de desarrollo se basa en tres fases principales: la fase de captura de

requisitos, la fase de análisis y diseño y la fase de implementación. Esta metodología la estudiaremos en la Unidad II.

Page 8: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 8

Figura 02. Ciclo de vida clásico de una aplicación web (Roger Pressman)

1.1.1. Aplicativos (editores) para crear sitos web en modo Diseño

Para el usuario sin conocimientos en tecnologías como XHTML, PHP, CSS, JavaScript, etc. resulta interesante un editor que les permita producir páginas web de manera rápida en un entorno WYSIWYG (abreviatura inglesa para what you see is what you get, o sea, “lo que ves es lo que obtienes”), por ejemplo:

KompoZer

Es uno de los mejores editores gratuitos, está diseñado para usuarios sin conocimientos técnicos que quieran crear un sitio web atractivo sin necesidad de saber HTML. Sus funciones incluyen la gestión integrada de archivos (subir y editar archivos en un servidor web), organización en pestañas (que permite trabajar en varias páginas) y el soporte de formularios, tablas y plantillas.

BlueGriffon

Merece la pena prestar atención a BlueGriffon, que es está emparentado con KompoZer, actualmente en desarrollo activo, y parece muy prometedor.

Amaya

Otro buen editor es Amaya. Se trata de un proyecto perteneciente al World Wide Web Consortium (W3C) y como tal destaca en el área del cumplimiento de los estándares y de la accesibilidad.

Page 9: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 9

1.1.2. Herramientas para el diseño web (IDEs)

Los programadores web utilizan herramientas sofisticadas que facilitan el trabajo enormemente. Dentro de estas herramientas podríamos hablar de entornos integrados de desarrollo (IDEs).

Un IDE es un programa que nos permite desarrollar código en uno o más lenguajes de programación e incorpora lo siguiente:

Un espacio para la escritura de código con cierta ayuda interactiva para generar código y para indicar los errores de sintaxis que se cometan por parte del

programador.

La posibilidad de compilar y ejecutar el código escrito.

La posibilidad de organizar los proyectos de programación.

Herramientas auxiliares para programadores para detección de errores o análisis de programas (debuggers).

Otras opciones como utilidades para pruebas, carga de librerías, etc.

Los IDEs más usados en la actualidad son:

Microsoft Visual Studio

Este IDE es la propuesta de Microsoft para desarrollar todo tipo de aplicaciones para su plataforma. NET. Desde esta interfaz podremos desarrollar aplicaciones escritas en Visual Basic, Visual C#, ASP.NET. Es uno de los entornos de programación más completos y cuanta con corrección automática de errores y auto completado inteligente.

Como casi todo el softw are de Microsoft, este IDE no es gratuito salvo en su versión

Express que puede ser un buen punto de partida para programar.

NetBeans

Es un IDE multiplataforma, soporta varios lenguajes. Además de Java, C, C++ y PHP soporta Ada, Groovy, PL/SQL, Python, Ruby y todos los relacionados con la web (HTML, CSS, JavaScript y XML).

Permite hacer desde aplicaciones sencillas hasta aplicaciones empresariales. En la

presente asignatura se usará este IDE.

Page 10: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 10

Eclipse

Es un IDE para el desarrollo de software de código abierto. Está escrito totalmente en Java, permite crear aplicaciones empresariales, móviles, etc. El software es libre tanto para uso personal como comercial.

Una de sus principales ventajas es que además de ser multiplataforma es también

multilenguaje. Permite desarrollar aplicaciones escritas en Java, C++, PHP, Ruby on Rails, Python, Javasript y Perl entre otros.

Zend Studio

Son muchos los desarrolladores que trabajan con Zend Studio, es posiblemente uno de los mejores IDE del momento.

Se trata de un programa de la casa Zend, uno de los mayores impulsores de PHP, orientada

a desarrollar aplicaciones w eb, como no, en PHP.

Aptana (Eclipse)

Aptana es un entorno de desarrollo dirigido hacia las aplicaciones web escritas en Ajax/JavaScript. Está basado en Eclipse y lo podremos encontrar para las tres plataformas mayoritarias (Win, Mac y Linux), ya sea como plugin del mismo Eclipse, o como aplicación por separado.

Php Designer

Php Designer, es un completo entorno de desarrollo y programación especialmente diseñado para desarrolladores de PHP, aunque también permite trabajar con comodidad en otros lenguajes de programación como HTML, XHTML, CSS y SQL.

Ofrece toda una serie de asistentes y diálogos integrados que facilitan en todo momento el trabajo, además cuenta con cliente de FTP y navegador de ficheros integrado, utilidades de corrección y autocompletado, búsqueda integrada en Google y soporte para proyectos.

La ventaja de que un IDE sea multilenguaje es que cuando nos acostumbramos a usarlo con

un lenguaje no tendremos que aprender a usar otro entorno de programación cuando

vamos a programar en otro lenguaje.

Page 11: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 11

1.1.3. Elementos de un Web Site

En el contexto de esta asignatura cuando hablamos de Web Site nos referimos a una

Aplicación Web (Web Site no estático, que incluye lógica del negocio) y cuando hablamos de

elementos de un w eb site nos referimos a los elementos de una aplicación w eb o mejor

dicho a los componentes de la arquitectura cliente servidor de una aplicación w eb.

La arquitectura de un sitio Web tiene tres elementos principales: servidor Web, protocolo HTTP, y uno o más clientes (browsers).

Figura 03: Arquitectura cliente-servidor de una aplicación web

Cliente

Es un programa que permite al usuario visualizar documentos descritos en HTML, desde servidores web de todo el mundo a través de Internet. Por lo general este rol lo cumple un navegador web o explorador web (del inglés, navigator o browser).

Servidor Web

Llamado también Servidor HTTP, es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales con el cliente, generando o cediendo una respuesta en cualquier lenguaje del lado del cliente.

Una aplicación del lado del servidor es cualquier programa o conjunto de instrucciones diseñadas con la finalidad de que un Servidor Web las procese para realizar alguna acción.

Las aplicaciones del lado del servidor están escritas mediante algún lenguaje de

programación, entre los que destacan: PHP, ASP.Net, Perl, Python, Ruby.

Page 12: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 12

Las aplicaciones del lado del cliente se ejecutan directamente en el brow ser sin

necesidad de realizar ninguna solicitud al servidor. Algunas tecnologías de programación del lado del cliente son: JavaScript, Java, VBScript.

Protocolo HTTP

Es la base del funcionamiento de internet. Se basa en un intercambio de peticiones y respuestas entre clientes (portátiles, teléfonos móviles, ordenadores de escritorio ) y servidores. Está diseñado para transferir lo que se llama hipertextos, páginas web o páginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de música.

Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que

establecemos una petición de un archivo HTML residente en el servidor (un ordenador que

se encuentra continuamente conectado a la red) el cual es enviado e interpretado por

nuestro navegador (el cliente).

La Figura 04 detalla la secuencia de pasos en una petición HTTP.

Figura 04: Secuencia de pasos en una petición HTTP

Lado del Cliente

Lado del Servidor

Page 13: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 13

LEYENDA:

1. El navegador efectúa la petición de la página

2. El servidor llama al intérprete del PHP si es necesario. 3. PHP ejecuta los scripts (interactuando con la base de datos si es preciso) y devuelve al

servidor el documento generado.

4. El servidor envía el documento resultante en formato HTML.

5. El documento es interpretado por el navegador, se ejecutan los scripts del lado del

cliente y se presenta el resultado en pantalla.

1.1.4. Creación del Sitio Web

Instalar WAMP

Crear el sitio (saludo.php)

<? PHP

$nombre = "Ana";

print ("<p>Hola, $nombre</p>");

?>

Para ejecutar este primer programa, en una ventana del navegador, tecleamos http://localhost/saludo.php (Apache ha de estar arrancado).

Page 14: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 14

1.2. LENGUAJE DE PROGRAMACIÓN HTML

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que

marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan ser

visualizados en los navegadores (programas que permiten visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos,

y de mostrar a los usuarios las páginas web resultantes del código interpretado.

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las

empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo.

El proceso de indicar las diferentes partes que componen la información se denomina

marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio

y el final de una sección se denominan etiquetas.

Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por

el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades.

Su sintaxis es: <identificador atributo1 atributo2 ...>

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos.

La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el

identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>

Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su

correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan

etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.

Page 15: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 15

EJEMPLO:

A continuación tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.ucvlima.edu.pe</font></p>

Este código daría como resultado el siguiente texto:

Bienvenidos a www.ucvlima.edu.pe

Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta <font..>.

1.2.1. Estructura de un documento HTML

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

Figura 05. Esquema de las partes que forman un documento HTML

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

EJEMPLO:

A continuación se muestra el código HTML de una página web muy sencilla:

<html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body> </html>

Page 16: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 16

Si quieres probar este primer ejemplo, debes hacer lo siguiente:

o Abre un editor de archivos de texto y crea un archivo nuevo.

o Copia el código HTML mostrado anteriormente y pégalo tal cual en el archivo que has creado.

o Guarda el archivo con el nombre que quieras, pero con la extensión .html

Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un

editor de texto sin formato. Si tu sistema operativo es Window s, puedes utilizar el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++, etc.

Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el siguiente aspecto:

Figura 06. Aspecto que muestra el primer documento HTML en cualquier navegador

Es importante conocer las tres etiquetas principales de un documento HTML (<html>, <head>, <body>):

<html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta <html> (con una sola excepción que se verá más adelante). En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.

<head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a

Page 17: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 17

abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página).

<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.

Figura 07. Esquema de las etiquetas principales que contiene un documento HTML

1.2.2. Listas, Tablas.

Listas

El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) y listas de definición (un conjunto de términos y definiciones similar a un diccionario).

Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.

Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas:

Listas ordenadas

Listas no ordenadas

Listas de definiciones

Lista ordenada

Contenedor Tipo de lista Efecto visual <ol>

<li> ítem 1 </li>

<li> ítem 2 </li>

</ol>

Lista ordenada

1. ítem 1

2. ítem 2

3. ítem 3

Page 18: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 18

Lista no ordenada

Contenedor Tipo de lista Efecto visual <ul>

<li> ítem 1 </li>

<li> ítem 2 </li>

</ul>

No ordenada

ítem 1

ítem 2

ítem 3

Lista de definiciones

Contenedor Tipo de lista Efecto visual <dl>

<dt>Término</dt>

<dd>Definición</dd>

</dl>

Definición

ítem 1

definición 1

ítem 2

definición 2

EJEMPLO:

El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:

<html> <head><title>Ejemplo de etiqueta UL</title></head> <body> <h1>Menú</h1> <ul> <li>Inicio</li> <li>Noticias</li> <li>Artículos</li> <li>Contacto</li> </ul> </body> </html>

Page 19: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 19

Figura 08: Ejemplo de uso de la etiqueta ul

El navegador por defecto muestra los elementos de la lista tabulados y con una pequeña viñeta formada por un círculo negro.

El aspecto con el que se muestran los elementos de las listas se puede modificar mediante

las hojas de estilos CSS. Este tema se verá en la semana 05, Lenguaje CSS.

EJEMPLO:

El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:

<html> <head><title>Ejemplo de etiqueta OL</title></head> <body> <h1>Instrucciones</h1> <ol> <li>Enchufar correctamente</li> <li>Comprobar conexiones</li> <li>Encender el aparato</li> </ol> </body> </html>

Page 20: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 20

Figura 09: Ejemplo de uso de la etiqueta ol

El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso no se emplean viñetas gráficas en los elementos, sino que se numeran de forma consecutiva.

EJEMPLO:

El siguiente código HTML muestra un ejemplo sencillo de lista de definición: <html> <head><title>Ejemplo de etiqueta DL</title></head> <body> <h1>Metalenguajes</h1> <dl> <dt>SGML</dt> <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd> <dt>XML</dt> <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd> <dt>RSS</dt> <dt>GML</dt> <dt>XHTML</dt> <dt>SVG</dt> <dt>XUL</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd> </dl> </body> </html>

Page 21: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 21

Figura 10: Ejemplo de uso de la etiqueta dl

Los navegadores formatean las listas de definición de forma similar a las otras listas, tabulando la definición y alineando a la izquierda los términos. Aunque no es habitual, cada término puede tener asociada más de una definición y cada definición puede tener asociada varios términos.

Tablas

A menudo resulta útil presentar información de una manera más estructurada que en las listas. Las tablas permiten mostrar esta información en filas y columnas. Las tablas se definen como series de filas.

Una tabla debe respetar las siguientes reglas:

- La tabla está enmarcada por las etiquetas <TABLE> y </TABLE>.

- El título de la tabla está enmarcado por <CAPTION> </CAPTION>

- Cada fila está enmarcada por<TR> </TR> (por Table Row).

- Las celdas de encabezamiento están enmarcadas por <TH> </TH> (por Table Header).

- Los datos en cada celda están enmarcados por <TD> </TD> (Table Data).

Page 22: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 22

EJEMPLO:

<TABLE BORDER="1">

<CAPTION>Este es el título de la tabla</CAPTION>

<TR>

<TH> Título A1 </TH>

<TH> Título A2 </TH>

<TH> Título A3 </TH>

<TH> Título A4 </TH>

</TR>

<TR>

<TH> Título B1 </TH>

<TD> Valor B2 </TD>

<TD> Valor B3 </TD>

<TD> Valor B4 </TD>

</TR>

</TABLE>

Los resultados de este código:

Este es el título de la tabla

Título A1 Título A2 Título A3 Título A4

Título B1 Valor B2 Valor B3 Valor B4

1.2.3. Enlaces, Hiperenlaces

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la

página que se visualizará cuando el usuario haga clic en el enlace.

Por ejemplo, para insertar el enlace:

Visita www.ucvlima.edu.pe

Habría que escribir:

<a href="http://www.ucvlima.edu.pe">Visita www.ucvlima.edu.pe </a>

Existen diferentes formas de expresar una referencia a una página a través del atributo href:

Page 23: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 23

Referencia absoluta:

Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página.

Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.

Por ejemplo, "http://www.ucvlima.edu.pe" tendrá el mismo efecto que "http://www.ucvlima.edu.pe/startpage.aspx"

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un

diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra

directamente dentro de la carpeta raíz del sitio, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir:

<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Page 24: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 24

Observa que en este caso no aparece el símbolo "/" delante del nombre del documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta que el

documento actual, habría que escribir:

<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Punto de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".

Por ejemplo, para insertar el enlace:

Punto de fijacion Tipos de enlaces

Habría que escribir:

<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>

Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos.

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se

especifica a través del atributo target al que se le puede asignar los siguientes valores:

_blank:

Abre el documento vinculado en una ventana nueva del navegador.

_self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana

que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador.

Para insertar el enlace:

Visita www.ucvlima.edu.pe en una ventana nueva

Habría que escribir:

<a href="http://www.ucvlima.edu.pe" target ="_blank">Visita www.ucvlima.edu.pe en una ventana nueva</a>

Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio).

Page 25: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 25

1.2.4. Manejo de imágenes, Sonido y Videos

Imágenes

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no

necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

<img src="imagenes/logo_animales.gif">

Teniendo encuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual

(referencia relativa al documento).

Multimedia

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden

utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se

utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.

Con el atributo loop indicamos el número de veces que se tienen que reproducir el

sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.

Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

<bgsound src="varios/audio.mid" loop="-1">

La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es

preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.

Page 26: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 26

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede

incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que insertar nada.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.

Por ejemplo para insertar un video, se podría escribir:

<embed src="varios/video.avi" autostart="false" loop="true">

Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de audio y de

vídeo.

No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.

Para insertar un archivo de audio, se podría escribir:

<embed src="varios/audio.mid" autostart="false" loop="true">

Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.

También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor es true, se ocultan los controles de reproducción.

Por ejemplo, para insertar sonido de fondo se podría escribir:

<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >

o también:

<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >

Page 27: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 27

1.3. FORMULARIOS y IFRAMES

1.3.1. Concepto de Iframe

Frame

Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargue una página html distinta.

Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorará.

Un ejmplo sencillo es el siguiente:

<HTML>

<HEAD><TITLE> Título de la página </TITLE></HEAD>

<FRAMESET ROWS=75,*>

<FRAME SRC="frames1.htm" >

<FRAME SRC="frames2.htm" >

</FRAMESET>

<NOFRAMES>

<BODY>

Lo siento,su navegador no soporta frames.

Pulse <a href="frames1.htm>aquí </A>

para acceder a los contenidos de estas páginas.

</BODY>

</NOFRAMES>

</HTML>

Cuyo resultado es el siguiente:

EL atributo ROWS (filas) es el que define el número y el tamaño de los frames, en este

caso dos filas, de 75 píxels la primera y el resto de la ventana la segunda. También se

puede dividir en columnas mediante COLS

El tamaño de los frames se puede especificar de más formas:

COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera

COLS=150,*,150 tres colunmas, la primera y tercera de 150 píxels, la segunda ocupa

el resto.

Page 28: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 28

ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.

Las etiquetas NOFRAMES y BODY solamente se usan por cortesía, de hecho se pueden

suprimir.

Las etiquetas FRAME SRC="frames.htm" cargan las página indicadas en el frame

correspondiente.

También es posible anidar frames, llamando a una página que tenga de nuevo frames

o bien declarándolo explícitamente. Un ejemplo de esto último es el que aparece

abajo.

<FRAMESET COLS=20%,*>

<FRAME SRC="frames1.htm">

<FRAMESET ROWS=20%,*>

<FRAME SRC="frames2.htm">

<FRAME SRC="frames3.htm">

</FRAMESET>

</FRAMESET>

Este código divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total.

Iframe

El elemento HTML iframe inserta un marco dentro de un documento. Éste, trabaja casi exactamente como el elemento HTML frame, excepto que el último, sólo puede ser insertado en un conjunto de marcos (elemento HTML frameset). Resulta útil, a la hora de mostrar un documento en una porción de otro.

Veamos un ejemplo como disponer este tipo de frame tan particular:

pagina1.html

<html>

<head>

<title>Ejercicio de iframes</title>

</head>

<body>

<h1>Esto es un Ejercicio de un iframe</h1>

<iframe src="pagina2.html" width="400" height="200">

No tiene disponible el navegador la capacidad de iframe

</iframe>

<h2>Esto ya está fuera del iframe</h2>

</body>

</html>

FRAME 1 FRAME 3

Page 29: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 29

Algunas propiedades útiles aplicables a un iframe:

- src Archivo a mostrar dentro del iframe.

- width Ancho en píxeles.

- height Alto en píxeles.

- frameborder Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se

muestra.

- scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto está inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún contenido del iframe no se ve.

Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación para dicho iframe.

- name Nombre del iframe si queremos acceder desde otra página. Por ejemplo

si queremos actualizar su contenido desde un enlace ubicado en otra página.

El uso habitual de los iframes es para mostrar publicidad o Webs de colaboración. Vamos a mostrar el código de la estructura básica de un iframe para poder explicar sus partes.

<html>

<head>

<title>Iframes</title>

</head>

<body>

<iframe src="http://html.hazunaweb.com/"

width="600" height="400" scrolling="auto">

Texto alternativo para navegadores que no aceptan iframes

</iframe>

</body>

</html>

Como vemos en el código anterior, debemos definir el tamaño del marco del iframe y definir si queremos que haya barra desplazadora o no. Ésta opción la especificamos gracias al atributo "scrolling". Su valor por defecto es "auto", aunque podemos definir si queremos barras desplazadoras ("yes") o si no las queremos ("no").

El iframe debe tener una fuente, que será la url que muestre en el marco que hemos

creado. En nuestro caso hemos puesto la página de inicio de este tutorial html.

Page 30: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 30

1.3.2. Formularios y sus elementos.

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones.

Los formularios son un tag más de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario.

La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación.

La etiqueta input

Nos define el registro donde el usuario puede ingresar los datos. El atributo type especifica el tipo de control a crear.

Entre ellos se encuentran los siguientes valores:

Text: Crea un control que nos permite ingresar un texto en una línea.

Nota: en este ejemplo podemos observar lo siguiente:

- action="datos.php" --> nos indica que el archivo datos.php es el encargado

de manipular los datos que el usuario ingresó en el formulario

- method="get" --> nos indica que los datos del formulario se enviarán por el

método get

- name="nombre" --> le asigna un nombre al elemento que luego puede ser

usado en scripts o en hojas de estilo

Radio botones

Se usan cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.

Page 31: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 31

Nota: en este ejemplo podemos observar lo siguiente:

- action="edades.asp" --> nos indica que el archivo edades.asp es el

encargado de manipular los datos que el usuario ingresó en el formulario

- method="post" --> nos indica que los datos del formulario se enviarán por el

método post

- name="edad" --> debemos utilizar el mismo nombre (en este caso "edad")

para todos los elementos del mismo control radio.

- value="mayor" --> define el valor del elemento <input>

Checkbox (casillas de verificación)

Permite al usuario elegir varias opciones entre todas las posibilidades.

Nota: en este ejemplo podemos observar lo siguiente:

- action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargado

de manipular los datos que el usuario ingresó en el formulario

- method="get" --> nos indica que los datos del formulario se enviarán por el método get

- name="pasa" --> debemos utilizar el mismo nombre(en este caso "pasa") para todos los elementos del mismo control checkbox.

- value="tv" --> define el valor del elemento <input>

Page 32: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 32

1.3.3. TRABAJO DE FORO EN EL CAMPUS VIRTUAL

1.4. W3C Y EL LENGUAJE XHTML

1.4.1. Estandarización W3C

El W3C, organización independiente y neutral, desarrolla estándares relacionados con la Web también conocidos como Recomendaciones, que sirven como referencia para construir una Web accesible, interoperable y eficiente, en la que se puedan desarrollar aplicaciones cada vez más robustas.

La finalidad de los estándares es la creación de una Web universal, accesible, fácil de usar y en la que todo el mundo pueda confiar. Con estas tecnologías abiertas y de uso libre se pretende evitar la fragmentación de la Web y mejorar las infraestructuras para que se pueda evolucionar hacia una Web con la información mejor organizada.

1.4.2. XHTML

XHTML significa lenguaje de marcado de hipertexto extendido.

Se utiliza para generar documentos y contenidos de hipertexto generalmente publicados en la WEB. Es además una reformulación del lenguaje HTML que se puede jactar de ser ahora compatible con XML.

EJEMPLO:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--Este es un comentario y no será tomado en cuenta por el navegador --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <title>Titulo de la página</title> </head> <body> <p>Primer documento XHTML, es decir un, Hola mundo</p> </body> </html>

Analicemos el código línea a línea:

<?xml version="1.0" encoding="UTF-8"?>

Indicamos la versión de XML empleada (esa misma vale perfectamente) así como la codificación, UTF-8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Page 33: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 33

Este es el encabezado que deberían llevar todos los documentos XHTML1.0 estríctos acordes a las específicaciones de la W3C. Es un aviso para que el agente de usuario

sepa qué tipo de documento va a interpretar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Declaración de documentos Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Como dije trataremos de concentrarnos en los documentos declarados como estríctos.

<!--Este es un comentario y no será tomado en cuenta por el navegador -->

Los comentarios comienzan con <!-- y terminan con --> (los saltos de línea no los

quiebran). No son tomados en cuenta por el agente de usuario, es decir no se interpretan (por lo que no se representan) y se utilizan frecuentemente para hacer aclaraciones en el código.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Aquí damos comienzo al documento XHTML, todo documento debe llevar esta etiqueta de apertura ( <html> ) y al finalizar debemos escribir la etiqueta de cierre que en el ejemplo se encuentra al final del código ( </html> ). Además aparecen 3

atributos, el primero específica el tipo de documento, y el segundo y el tercero deben llevar como valores el código del lenguaje en el que será escrito. Para la lengua castellana este valor es es. Puedes averiguar los códigos de otras lenguas.

<head> <title>Titulo de la página</title> </head>

Con la etiqueta de apertura <head>comienza lo que se llama el encabezado de las

páginas web, aquí se dan ciertas específicaciones y otra META información acerca del documento que ya veremos con más detalle. Pero entre ellas está el elemento utilizado en el ejemplo, mediante las etiquetas <title></title>, que encierran el título de la página. Los navegadores suelen mostrarlo cómo título de la ventana. También es utilizada por los buscadores cuando presentan resultados de los documentos a sus usuarios.

<body> <p>Primer documento XHTML, es decir un, Hola mundo</p> </body>

Page 34: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 34

1.5. LENGUAJE CSS (Cascading Style Sheets)

1.5.1. Introducción a CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

¿Por qué trabajar con Hojas de Estilo?

Las hojas de estilo nos ahorran mucho trabajo.

La manera correcta de trabajar es separando el contenido de cada página, del diseño de

la misma.

Normalmente los estilos son guardados en un archivo externo con la extensión ".css".

Este archivo le permite hacer los cambios de apariencia y disposición de los elementos

en todas las páginas de su sitio Web, con tan solo editar un solo documento CSS.

La estructura de CSS

CSS funciona a base de reglas.

Cada regla está compuesta por un selector y la declaración. La declaración a su vez está compuesta por una propiedad y su valor. La declaración debe estar definida entre llaves ({...})

Page 35: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 35

Sintaxis

selector{propiedad:valor}

Veamos un ejemplo donde el selector p indica que todos los elementos p del

documento HTML serán afectados por la declaración cuya propiedad es color y su valor es blue.

p{color:blue}

Si el valor está compuesto por varias palabras, debemos definirlo entre comillas.

p{font-family:"Times New Roman"}

Si deseas especificar más de una propiedad, deberás separarlas con un punto y coma(;).

h1{color:red; text-align:center}

Para definir los estilos de forma más clara y fácil de leer, puedes describir cada propiedad en diferentes líneas.

p

{

color:red;

text-align:center;

}

Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separándolos con una coma(,)

p, h1, h2, h3

{ color:blue; font-family:Arial;

}

El selector class

Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML. Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del

selector class debe ir antepuesto por un punto (.)

Sintaxis

p.azul {color:blue}

p.rojo {color:red}

Page 36: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 36

Con el selector class también podemos definir diferentes estilos para cualquier

elemento HTML.

Por ejemplo definimos un class rojo y uno azul.

Sintaxis

.azul {color:blue}

.rojo {color:red}

¿Dónde usar los estilos?

Hay 3 formas de insertar una hoja de estilos:

Entre líneas

Dentro de la sección Head

Hojas de estilo externas

Page 37: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 37

o Entre líneas

Definimos el estilo directamente dentro del código HTML.

Sintaxis

<selector style="propiedad: valor;propiedad: valor;">

Debemos usar esta forma cuando un único estilo es aplicado a un solo elemento.

Su uso está dado por el atributo style.

o Dentro de la sección Head

Las hojas de estilo interna deben usarse cuando una página tiene un estilo único.

Sintaxis

<head> <style type="text/css"> selector 1 {propiedad: valor;} selector 2 {propiedad: valor;} </style>

</head> <body> <etiqueta 1>Bla, bla, bla</etiqueta 1> <etiqueta 2>Texto, texto, texto</etiqueta 2>

</body>

La etiqueta <style type="text/css"> en la cabecera del documento entre las etiquetas

<head> y </head> se usa para definir los estilos correspondientes a esta página solamente.

Page 38: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 38

En este ejemplo se muestra que la etiqueta <style> con su atributo type define una

hoja de estilo.

Entre las etiquetas style definimos al selector body con un color de fondo #008080 y al selector p de color blanco.

o Hojas de estilo externas

Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias páginas.

Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web.

Los archivos de hojas de estilo deben llevar la terminación .css.

Sintaxis

Contenido del archivo de los estilos

selector { propiedad:valor; /* No olvidar el (;) al final de cada valor */ propiedad:valor; propiedad:valor; }

Sintaxis

Esta es la forma de llamar al archivo ".css" desde un documento HTML

<head> <link rel="stylesheet" type="text/css" href="/archivo.css">

</head>

Page 39: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 39

Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link>

ubicada en la cabecera del documento.

rel="stylesheet" nos indica que la relación es una hoja de estilo.

type="text/css" nos dice que el tipo es texto y css.

href="/fuentes.css" es el nombre del documento que contiene el código css.

Así se vería el documento HTML que llama al archivo "estilos.css".

1.5.2. El modelo de Caja

El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

Page 40: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 40

La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Figura 11. Las cajas se crean automáticamente al definir cada elemento HTML

Las cajas de las páginas no son visibles a simple vista porque inicialmente no

muestran ningún color de fondo ni ningún borde.

Debemos hacernos la idea que todo elemento que se crea dentro de una página

HTML genera una caja.

Podemos acceder a las propiedades del borde de esa caja mediante las CSS; las

propiedades más importantes a las que tenemos acceso son:

border-w idth : Establece la anchura de algunos o todos los bordes de los elementos

border-style : Establece el estilo de algunos o todos los bordes de los elementos

border-color : Establece el color de algunos o todos los bordes de los elementos

Veamos un ejemplo que inicialice estas propiedades:

pagina1.html

<html>

<head>

<title>Problema</title>

<link rel="StyleSheet" href="estilos.css" type="text/css">

</head>

<body>

<p class="pregunta">Quién descubrió América

y en que año fue?</p>

<p class="respuesta">Colón en 1492</p>

</body>

</html>

estilos.css

.pregunta {

background-color:#ffff00;

border-width:1px;

border-style:solid;

border-color:#000000;

}

.respuesta {

border-width:1px;

border-style:dashed;

border-color:#000000;

}

Page 41: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 41

Como podemos ver, hemos definido dos clases .pregunta que inicializa el color de

fondo en amarillo y luego define el ancho del borde en un pixel, el estilo es sólido y el color de la línea de borde es negro. Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la propiedad class de la marca HTML:

<p class="pregunta">Quién descubrió América y en que año fue?</p>

Al segundo estilo definido lo hemos hecho con la clase .respuesta

.respuesta {

border-width:1px;

border-style:dashed;

border-color:#000000;

}

El resultado es:

Otra serie de propiedades relacionadas al contorno de una marca HTML son:

margin : establece la anchura de algunos o todos los márgenes de los elementos

margin-top : Establece la anchura del margen superior de los elementos de bloque

margin-right : Establece la anchura del margen derecho de los elementos

margin-bottom : Establece la anchura del margen inferior de los elementos de bloque

margin-left : Establece la anchura del margen izquierdo de los elementos

El margen está después del borde. Veamos un ejemplo, la página HTML muestra dos párrafos con 8 pixeles de margen:

<html>

<head>

<title>Problema</title>

<link rel="StyleSheet" href="estilos.css" type="text/css">

</head>

<body>

<p>Primer párrafo</p>

<p>Segundo párrafo</p>

</body>

</html>

Page 42: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 42

La hoja de estilo:

p {

background-color:#ffffaa;

margin:8px;

}

El resultado es:

1.5.3. Posicionamiento de elementos

La propiedad position nos permite posicionar un elemento dentro de la página. Por lo

general va acompañado de las propiedades: top, right, bottom y left.

Sus posibles valores son:

static (estático)

siempre tiene la ubicación que la página da por defecto. relative (relativa) mueve el elemento relativamente de su posición normal. absolute (absoluta)

posiciona al elemento con coordinadas relativas al bloque que lo contiene. fixed (fija)

posiciona al elemento con coordinadas relativas a la ventana del navegador. La propiedad float

La propiedad float define donde ubicar un texto o una imagen dentro de otro elemento. Solo puede ubicarlo a la derecha o a la izquierda del elemento.

Ejemplo: Vamos a posicionar una imagen a la derecha del texto.

Page 43: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 43

Resultado:

Ejemplo: El siguiente ejemplo muestra tres imágenes posicionadas de forma normal:

Page 44: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 44

Aplicando el posicionamiento relativo, se desplaza la primera imagen de forma descendente:

img.desplazada {

position: relative;

top: 8em;

}

<img class="desplazada" src="imagen.png" alt="Imagen genérica" />

<img src="imagenes/imagen.png" alt="Imagen genérica" />

<img src="imagenes/imagen.png" alt="Imagen genérica" />

Resultado:

1.6. LENGUAJE JAVA SCRIPT

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los

programas escritos con JavaScript se pueden probar directamente en cualquier

navegador sin necesidad de procesos intermedios.

Page 45: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 45

1.6.1. Estructura Básica JScript

A continuación, se muestra un primer script sencillo pero completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>El primer script</title>

<script type="text/javascript">

alert("Hola Mundo!");

</script>

</head>

<body>

<p>Esta página contiene el primer script</p>

</body>

</html>

La instrucción alert() es una de las utilidades que incluye JavaScript y permite mostrar

un mensaje en la pantalla del usuario. Si se visualiza la página web de este primer script en cualquier navegador, automáticamente se mostrará una ventana con el mensaje "Hola Mundo!".

Resultado:

¿Dónde y cómo incluir JavaScript?

Existen distintos modos de incluir lenguaje JavaScript en una página.

o La forma más frecuente de hacerlo es utilizando la directiva <script> en un documento HTML (se pueden incluir tantas directivas <script> como se quiera en un documento).

El formato es el siguiente:

<script language="Javascript 1.3">

Page 46: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 46

El atributo lenguaje hace referencia a la versión de JavaScript que se va a utilizar

en dicho script.

Otro atributo de la directiva script es src, que puede usarse para incluir un archivo

externo que contiene JavaScript y que quiere incluirse en el código HTML.

<script language="JavaScript" src ="archivo.js"> </script>

El archivo externo simplemente es un archivo del texto que contiene código JavaScript, y cuyo nombre acaba con la extensión js.

o Puede incluirse también código JavaScript como respuesta a algún evento:

<input type="submit" onclick="alert('Acabas de hacer click');return false;"

value="Click">

JavaScript es sensible a mayúsculas y minúsculas, todos los elementos de JavaScript deben referenciarse cómo se definieron, no es lo mismo "Salto" que "salto".

1.6.2. Variables, Operadores

Variables:

Las variables almacenan y recuperan datos, también conocidos como "valores". Una variable puede referirse a un valor que cambia o se cambia. Las variables son referenciadas por su nombre, y el nombre que les es asignado debe ser conforme a ciertas reglas (debe empezar con una letra o ("_"); los caracteres siguientes pueden ser números (0-9), letras mayúsculas o letras minúsculas).

Ejemplos de definiciones erróneas:

var Mi Variable, 123Probando, $Variable, for, while;

Ejemplos de definiciones correctas:

var _Una_Variable, P123robando, _123, mi_carrooo;

Por supuesto, podemos inicializar una variable al declararla:

var Una_Variable="Esta Cadenita de texto";

Las variables en JavaScript pueden ser de alcance global o local. Una variable global es accesible desde cualquier <script> de la página mientras que una variable local sólo lo es desde la función en la que fue declarada.

Normalmente, se crea una nueva variable global asignándole simplemente un valor:

globalVariable=5;

Sin embargo, si usted está codificando dentro de una función y usted quiere crear una variable local que sólo tenga alcance dentro de esa función, debe declarar la nueva variable haciendo uso de var:

Page 47: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 47

function newFunction() { var localVariable=1; globalVariable=0; ... }

Tipos de datos:

Javascript reconoce seis tipos de valores diferentes: numéricos, lógicos, objetos, cadenas, nulos e indefinidos.

JavaScript tiene la peculiaridad de ser un lenguaje débilmente tipado, esto es, una variable puede cambiar de tipo durante su vida, por ejemplo uno puede declarar una variable que ahora sea un entero y más adelante una cadena.

MiVariable=4;

y después:

MiVariable="Una_Cadena";

A diferencia de otros lenguajes en Javascript no es necesario declarar las variables especificando el tipo de dato que contendrán, será el propio interprete el que le asignará el tipo apropiado.

Números Enteros o coma flotante.

Boleanos True o False.

Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.

Objetos Obj = new Object();

Nulos Null

Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido creada pero no le ha sido asignado un valor.

Operadores Aritméticos:

Operador Nombre Ejemplo Descripción

+ Suma 5 + 6 Suma dos números

- Substracción 7 - 9 Resta dos números

* Multiplicación 6 * 3 Multiplica dos números

/ División 4 / 8 Divide dos números

% Módulo: el resto después de la

división 7 % 2

Devuelve el resto de dividir ambos números,

en este ejemplo el resultado es 1

++ Incremento. a++ Suma 1 al contenido de una variable.

-- Decremento. a-- Resta 1 al contenido de una variable.

- Invierte el signo de un

operando. -a Invierte el signo de un operando.

Page 48: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 48

Operadores de Comparación:

Operador Descripción

== " Igual a" devuelve true si los operandos son iguales

=== Estrictamente "igual a" (JavaScript 1.3)

!= " No igual a" devuelve true si los operandos no son iguales

!== Estrictamente " No igual a" (JavaScript 1.3)

> " Mayor que" devuelve true si el operador de la izquierda es mayor que el de la

derecha.

>= " Mayor o igual que " devuelve true si el operador de la izquierda es mayor o igual

que el de la derecha.

< " Menor que" devuelve true si el operador de la izquierda es menor que el de la

derecha.

<= "Menor o igual que" devuelve true si el operador de la izquierda es menor o igual

que el de la derecha.

Operadores Lógicos:

Operador Descripción

&& " Y " Devuelve true si ambos operadores son true.

|| " O " Devuelve true si uno de los operadores es true.

! "No" Devuelve true si la negación del operando es true.

EJEMPLO:

<html>

<head>

<title>Ejemplo de JavaScript</title>

</head>

<body>

<script language="JavaScript">

a = 8;

b = 3;

c = 3;

document.write( (a == b) && (c > b) );document.write("<br>");

document.write( (a == b) || (b == c) );document.write("<br>");

document.write( !(b <= c) );document.write("<br>");

</script>

</body>

</html>

Resultado:

false

true

false

Page 49: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 49

El operador de asignación '='

Permite asignar un valor a una variable.

Operador Descripción

= Asigna el valor del operando de la derecha a la variable de la izquierda.

Ejemplo: inttotal=100;

+=

(tambien - =, * =, / =)

Añade el valor del operando de la derecha a la variable de la izquierda.

Ejemplo: inttotal +=100

&=

(también |=)

Asigna el resultado de (operando de la izquierda & operando de la derecha)

al operando de la izquierda

Operadores especiales:

Operador Descripción

(condición) ? trueVal : falseVal Asigna un valor especificado a una variable si la condición es

true, por otra parte asigna un valor alternativo si la condición es

false.

New El operador new crea una instancia de un objeto.

This La palabra clave 'this' se refiere al objeto actual.

, El operador ',' evalúa los dos operados.

Delete El operador delete borra un objeto, una propiedad de un objeto,

o un elemento especificado de un vector.

Void El operador Void especifica una expresión que será evaluada

sin devolver ningún valor.

Typeof Devuelve el tipo de dato de un operando.

1.6.3. Estructuras de Control

La sentencia IF

La sentencia If evalúa una condición, expresada entre paréntesis ( ). Si esta se

cumple, ejecuta el bloque de instrucciones que tiene entre llaves { }.

if (condición) { bloque de instrucciones;

}

También podemos indicar un bloque de instrucciones, con la palabra else, que se

ejecutará si no se cumple la instrucción.

if (condición) { bloque de instrucciones si se cumple;

} else { bloque de instrucciones si nos e cumple; }

Page 50: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 50

Podemos poner varios else, con otras condiciones entre paréntesis. Se irán evaluando

todas las condiciones hasta encontrar la primera cierta. Si una se cumple, se

ejecutarán sólo esas instrucciones, aunque hubiesen otras condiciones ciertas. Si no

se ha cumplido ninguna, se ejecutará el último else, si no tiene condición.

if (condición1) {

bloque de instrucciones si se cumple condición1; } else (condición2) { bloque de instrucciones si se cumple condición2;

} else (condición3) { bloque de instrucciones si se cumple condición3; } else {

bloque de instrucciones si no se ha cumplido ninguna; }

Por ejemplo:

if (nota >= 0 && nota < 5) {

return 'Suspenso'; } else (nota >= 5 && nota < 6) { return 'Suficiente';

} else (nota >= 6 && nota < 7) { return 'Bien'; } else (nota >= 7 && nota < 9) {

return 'Notable'; } else (nota >= 9 && nota <= 10) { return 'Sobresaliente';

} else { return 'La nota no es válida. Tiene que estar entre 0 y 10';

}

Las sentencias If se pueden anidar, siempre que una quede completamente dentro de

otra. Por ejemplo:

if (condición1) { if (condición2) {

si se cumple condición 1 y condición2; } else { si se cumple condición 1 pero no condición2;

} } else { si no se cumple condición1

}

La sentencia SWITCH

De forma parecida al If se comporta la sentencia Switch. Se le asigna un valor o

expresión, y se compara con cada case. Ejecuta el código de la primera coincidencia

encontrada. Si no encuentra ninguna, se ejecuta el código de default.

Page 51: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 51

switch(expresion) {

case valor1: instrucciones si coincide; break;

case valor2: instrucciones si coincide; break;

default: instrucciones si no coincide ninguna; }

El bucle WHILE

Los bucles son estructuras fundamentales en programación, ya que permiten repetir

una instrucción un número determinado de veces, o hasta que se cumpla una

determinada condición (o deje de cumplirse).

En bucle While, evalúa una condición. Si se cumple, ejecuta su bloque de

instrucciones, y vuelve a evaluar la condición. Si se cumple, vuelve a ejecutar las

instrucciones, y así sucesivamente mientras que la condición se cumpla.

while (condición) { bloque de sentencias;

}

Por ejemplo, el siguiente bucle mostraría 5 mensajes. La variable i inicialmente vale 0.

En cada vuelta del bucle, se comprueba si es menor de 5. Si lo es, se incrementa en 1

en la primera instrucción (recuerda que i++ equivale a i+=1, que equivale a i=i+1), se

muestra el mensaje en la segunda, y vuelve a comenzar el ciclo. Cuando i sea 5,

mostrará el quinto mensaje, y en la siguiente comprobación, la condición será falsa.

var i = 0; while (i < 5) {

i++; alert('Mensaje número ' + i);

}

El bucle While se puede expresar al revés, para que primero ejecute las instruciones, y

después evalúe la condición. Esto asegura que por lo menos se ejecuten las

instrucciones una vez, y se repitan mientras se cumpla la condición. Su sintaxis es:

do { bloque de sentencias;

} while (condición)

Page 52: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 52

El bucle FOR

El bucle FOR se emplea normalmente para contar, para realizar una repetición un

número determinado de veces.

Se define con un valor inicial para la variable que actúa como contador, la condición

que se ha de cumplir para que el bucle se repita, y la actualización de la variable

(normalmente un incremento). Estros tres parámetros, se separan por punto y coma

(;).

for (valor_inicial; condición; actualización) {

bloque de sentencias; }

El orden de ejecución sería: asignar el valor inicial, evaluar la condición, si se cumple,

ejecutar las sentencias, actualizar la variable, evaluar la condción, si se cumple

ejecutar las sentencias, actualizar la variable, etc...

El mismo ejemplo que hemos utilizado con el bucle While para mostrar 5 mensajes, lo

podemos expresar con un For como:

for (i=1; i<=5; i++) {

alert('Mensaje número ' + i); }

Una variante del For es la estructura For .. In, que nos permite recorrer los elementos

de un array o un objeto.

for (variable in objeto) {

bloque de sentencias; }

Si lo utilizamos con un array, lo que hará el bucle, es que para cada vuelta, variable

tomará el valor de un elemento del array, comenzando por el primero, y se repetirá

una vez para cada uno.

Por ejemplo:

function datosAlumno() {

alumno = new Array('Juan', 25, 8.5); datos = 'Datos del alumno:'; for (dato in alumno) {

datos = datos + ' ' + dato; } return datos;

}

El bucle del ejemplo se repetirá tres veces, una para cada elemento. La función

devolverá 'Datos del alumno: Juan 25 8.5'.

Page 53: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 53

1.6.4. Funciones

En JavaScript la estructura de una función es la siguiente:

function <nombre de función>(argumento1, argumento2, ..., argumento n)

{

<código de la función>

}

Debemos buscar un nombre de función que nos indique cuál es su objetivo (Si la función recibe un string y lo centra, tal vez deberíamos llamarla centrarTitulo). Veremos que una función puede variar bastante en su estructura, puede tener o no parámetros, retornar un valor, etc.

Ejemplo: Mostrar un mensaje que se repita 3 veces en la página con el siguiente texto:

'Cuidado' 'Ingrese su documento correctamente'

'Cuidado' 'Ingrese su documento correctamente'

'Cuidado' 'Ingrese su documento correctamente'

La solución sin emplear funciones es:

<html>

<head> </head> <body> <script language="javascript">

document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); document.write("Cuidado<br>");

document.write("Ingrese su documento correctamente<br>"); document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>");

</script> </body> </html>

Empleando una función: <html> <head>

</head> <body> <script languaje="javascript">

function mostrarMensaje() { document.write("Cuidado<br>");

document.write("Ingrese su documento correctamente<br>"); }

mostrarMensaje(); mostrarMensaje(); mostrarMensaje();

Page 54: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 54

</script>

</body> </html>

Es importante notar que para que una función se ejecute debemos llamarla desde fuera por su nombre (en este ejemplo: mostrarMensaje()).

1.6.5. Objetos String, Date, Math

El Objeto String

Este objeto nos permite hacer diversas manipulaciones con las cadenas, para que trabajar con ellas sea más sencillo. Cuando asignamos una cadena a una variable, JS está creando un objeto de tipo String que es el que nos permite hacer las manipulaciones.

Propiedades

length. Valor numérico que nos indica la longitud en caracteres de la cadena dada. prototype. Nos permite asignar nuevas propiedades al objeto String. Métodos

anchor(nombre). Crea un enlace asignando al atributo NAME el valor de 'nombre'. Este nombre debe estar entre comillas " " big(). Muestra la cadena de caracteres con una fuente grande. blink(). Muestra la cadena de texto con un efecto intermitente. charAt(indice). Devuelve el carácter situado en la posición especificada por 'indice'. fixed(). Muestra la cadena de caracteres con una fuente proporcional.

El Objeto Math

Este objeto se utiliza para poder realizar cálculos en nuestros scripts. Tiene la peculiaridad de que sus propiedades no pueden modificarse, sólo consultarse.

Propiedades

E. Número 'e', base de los logaritmos naturales (neperianos). LN2. Logaritmo neperiano de 2. LN10. Logaritmo neperiano de 10. LOG2E. Logaritmo en base 2 de e. LOG10E. Logaritmo en base 10 de e. PI. Número PI. SQRT1_2. Raíz cuadrada de 1/2. SQRT2. Raíz cuadrada de 2.

Métodos

abs(numero). Función valor absoluto. acos(numero). Función arcocoseno. Devuelve un valor cuyas unidades son radianes o ceil(numero). Devuelve el entero obtenido de redondear 'numero' "por arriba". cos(numero). Devuelve el coseno de 'numero' (que debe estar en radianes) o NaN. exp(numero). Devuelve el valor enumero. floor(numero). Devuelve el entero obtenido de redondear 'numero' "por abajo".

Page 55: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 55

1.6.6. Avance de Trabajo práctico y/o Investigación

Page 56: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 56

UNIDAD II: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II

2.1. Javascript con Objetos

Un objeto es una estructura que contiene tanto las variables (llamadas propiedades) como las funciones que manipulan dichas variables (llamadas métodos). A partir de esta estructura se

ha creado un nuevo modelo de programación (la programación orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Como veremos, JavaScript

simplifica en algo este modelo y hace una programación híbrida entre la programación estructurada y la programación orientada a objetos.

El modelo de la programación orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos). Las primeras son entes más abstractos que definen un

conjunto determinado de objetos. Las segundas son miembros de una clase, poseyendo las mismas propiedades que la clase a la cual pertenecen.

Construcción de Objetos

Antes de crear un objeto nuevo, es necesario definir a ese objeto mediante la descripción de sus propiedades. Se hace mediante una función que define el nombre y propiedades de la función. Esta función se define como función constructor.

Ejemplo 01: function estudiante(nombre,año,calificación) { this.nombre=nombre; this.año=año; this.calificación=calificación; }

La palabra clave this, tiene un papel especial en JavaScript y se refiere al objeto actual. En base a la función anterior puede crear un objeto con el estatuto nuevo:

estudiante1 = new estudiante("Juan",15,8);

La línea de código crea un objeto llamado estudiante1 con tres propiedades: estudiante1.nombre, estudiante1.año y estudiante1.calificación.

Para crear un objeto nuevo:

estudiante2 = new estudiante("Maria",18,9);

Ahora , puede utilizar objetos como propiedades de otros objetos. Por ejemplo:

function calificación(matemáticas,inglés,física) { this.matemáticas = matemáticas; this.inglés = inglés; this.física = física; }

Con esto puede crear dos instancias del objeto calificación para los dos estudiantes:

JuanCalificación = new calificación(45,80,90); MariaCalificación = new calificación(25,65,90);

Page 57: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 57

Y con estos objetos, puede entonces crear los objetos estudiantes:

estudiante1 = new estudiante("Juan",15,JuanCalificación); estudiante2 = new estudiante("Maria",18,MariaCalificación);

Ahora puede referirse a la calificación de matemáticas de Juan como

estudiante1.grado.matemáticas, o a la calificación de Maria en Física en estudiante2.grado.física.

Para imprimir el nombre, la edad y las calificaciones del estudiante en la ventana del documento, puede crear una función llamada verArchivo( ):

function verArchivo() {

document.w rite("Nombre: " + this.nombre + "<br>");

document.w rite("Año: " + this.año + "<br>");

document.w rite("Calificación Matemáticas: " + this.calificación.matemáticas + "<br>");

document.w rite("Calificación Inglés: " + this.calificación.inglés + "<br>");

document.w rite("Calificación Física: " + this.calificación. física + "<br>");

}

Una vez definido el método, necesita cambiar la definición del objeto para incluir el método:

function estudiante(nombre,año,calificación) { this.nombre=nombre;

this.año=año;

this.calificación=calificación;

this.verArchivo = verArchivo; }

Después puede ver el perfil del estudiante Juan, con el comando:

estudiante1.verArchivo( );

Ejemplo 02:

<html>

<head> <title>Ejemplo 13</title> <Script Language="JavaScript"> <!--

function verArchivo() {

document.w rite("<h1>Empleado: " + this.nombre + "</h1><hr><pre>"); document.w riteln("Número de Empleado: " + this.numero);

document.w riteln("Número del Seguro Social: " + this.nss);

document.w riteln("Salario Anual: " + this.salario);

document.w rite("</pre>");

}

function empleado() {

this.nombre=prompt("Coloque el nombre del Empleado","nombre");

this.numero=prompt("Coloque el número del Empleado " + this.nombre, "000-000");

Page 58: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 58

this.nss=prompt("Coloque el número del Seguro Social de " + this.nombre, "000-000");

this.salario=prompt("Coloque el salario Anual de" + this.nombre, "Bs 000");

this.verArchivo=verArchivo;

} nuevoEmpleado = new empleado(); // --> </script> </head>

<body> <Script Language="JavaScript"> <!-- nuevoEmpleado.verArchivo(); // --> </script> </body> </html>

2.2. Servidor de Aplicaciones Web y Servidor de Base de Datos

Un servidor de aplicaciones no es más que un cambio de nombre, para algunos servidores Web de nueva generación que proporcionan la lógica de negocio sobre la que construir aplicaciones. Suelen asociarse con servidores de alto rendimiento pensados para dar servicio a

sitios Web (Web sites) con grandes necesidades: afluencia de visitas, movimiento de datos, atención de transacciones hacia bases de datos, etc. Generalmente los fabricantes del sector tienen a disposición del público un servidor Web básico y otro con multitud de extensiones

fuertemente integradas al que llaman servidor de aplicaciones.

Page 59: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 59

Un servidor de aplicaciones clásico se apoya en un modelo cliente/servidor de tres capas:

Presentación: una interfaz, generalmente gráfica que reside en los clientes. El ejemplo típico

es un navegador.

Lógica de negocio: donde reside el servidor de aplicaciones y el conjunto de programas a los que da soporte.

Almacenamiento: generalmente una base de datos.

2.3. Lenguaje de Programación PHP

PHP (acrónimo de "PHP: Hypertext Preprocessor") es un lenguaje interpretado de alto nivel

embebido en páginas HTML y ejecutado en el servidor.

Hay que entender primero como funciona la solicitud de páginas en un navegador para

comenzar a programar en PHP.

Comunicación entre el cliente y el servidor sin PHP:

1 - Tipeamos en la barra del navegador la dirección y el archivo a solicitar.

2 - El web browser (navegador) envía el mensaje a través de Internet a la computadora, por

ejemplo www.lanacion.com/pagina1.htm solicitando la página (archivo) pagina1.htm 3 - El web server (servidor web, que puede ser el Apache, IIS, etc.) que es un programa que se ejecuta en la máquina www.lanacion.com, recibe el mensaje y lee el archivo solicitado

desde el disco duro.

4 - El servidor web envía el archivo solicitado por el navegador tal cual está en el disco duro.

5 - El navegador muestra en pantalla el archivo que envió el servidor web.

Este proceso siempre es el mismo cuando hablamos de páginas estáticas (páginas que no cambian), cualquiera sea el cliente que solicita la página el contenido siempre será el

mismo. La única forma que el contenido del archivo cambie es que el administrador de ese sitio web edite el contenido del archivo pagina1.htm y haga modificaciones.

Comunicación entre el cliente y el servidor con PHP:

1 - Tipeamos en la barra del navegador la dirección y el archivo a solicitar.

2 - El web browser (navegador) envía el mensaje a través de Internet a la computadora llamada www.lanacion.com solicitando la página (archivo) pagina1.php

3 - El web server (servidor web, que puede ser el Apache, IIS, etc.), recibe el mensaje y al ver que la extension es "php" solicita al intérprete de PHP (que es otro programa que se

ejecuta en el servidor web) que le envíe el archivo.

4 - El intérprete PHP lee desde el disco el archivo pagina1.php

5 - El intérprete PHP ejecuta los comandos contenidos en el archivo y eventualmente se comunica con un gestor de base de datos (ejemplos de ellos pueden ser MySql, Oracle,

Informix, SQL Server, etc.)

6 - Luego de ejecutar el programa contenido en el archivo envía éste al servidor web.

7 - El servidor web envía la página al cliente que la había solicitado.

8 - El navegador muestra en pantalla el archivo que envió el servidor web.

Para aquellas personas que conocen otros lenguajes de programación (C - Java - C# - Pascal etc.) la salida de los resultados normalmente es la pantalla, en PHP la salida es la página

HTML (luego ésta viaja por internet y llega al cliente que la solicitó)

Page 60: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 60

Funcion : isset

Permite saber si una variable está definida. La función isset recibe como parámetro la variable

a verificar, devolviendo un valor TRUE si la variable está definida, de lo contrario devuelve FALSE.

Ejemplo:

$Precio = 27.54;

if (isset($Precio)) echo("La variable está definida");

else echo("La variable no está definida"); En este caso se imprimirá la leyenda: La variable está definida. También se puede utilizar la función isset con objetos, como por ejemplo, para saber si se ha pulsado un botón o no.

Ejemplo: Ingresar dos valores en un formulario, y mostrar todos los números comprendidos.

<Html> <Title> Numeros.php </Title>

<Body> <?PHP if (isset($_REQUEST[boton]))

{ $a=$_REQUEST[a];

$b=$_REQUEST[b]; echo "Números comprendidos entre $a y $b"; echo "<Hr>";

for ($i=$a+1; $i<$b; $i++) {

echo ("$i - "); } }

else {

?> <FORM ACTION="Numeros.php" METHOD="POST"> <H2>

Ingrese el intervalo para los números pares <Hr>

Valor 1: &nbsp<INPUT TYPE="TEXT" NAME="a" SIZE="10"> <Br> Valor 2: &nbsp<INPUT TYPE="TEXT" NAME="b" SIZE="10">

<Br><Br> <INPUT TYPE="SUBMIT" NAME="boton" VALUE="Ingresar Datos">

<?PHP

Page 61: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 61

}

?> </Body>

</Html>

Comentario:

En primera instancia, mediante la función isset, se evalúa si el botón está definido con algún valor, es decir, si se ha pulsado. Para la primera vez que se ejecute la página, la condición if (isset($_REQUEST[boton])) será falsa (FALSE), por lo tanto se ejecutará el formulario. Una vez ingresado los valores y presionado el botón, la página se llama a si misma, pero ahora la condición: if (isset($_REQUEST[boton])) será verdadera (TRUE). El resto del programa simplemente ejecuta lo requerido en el enunciado.

Una función consta de un nombre y argumentos, llamados comúnmente parámetros.

Formato:

function Nombre_Funcion (parametro1, parametro2, ... parámetro n)

{ Instrucciones; <return valor> }

Los parámetros son opcionales, ya sea que una función acepte o no valores, lo mismo que la instrucción return, dependiendo de que la función retorne algún valor o no.

Ejemplo: Realizar una función que acepte dos números y devuelva el producto de ambos. Cargar los dos valores a través de un formulario.

<Html> <TITLE> Producto.php </TITLE> <Body>

<?PHP function Producto($a, $b)

{ $p = $a * $b; return $p;

}

// Programa principal

if ( $_REQUEST['Boton'] != "" ) { $V1 = $_REQUEST['Valor1'];

$V2 = $_REQUEST['Valor2']; echo ("<H3>");

Page 62: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 62

echo (" El producto de $V1 y $V2 es: " . Producto($V1, $V2));

} else

{ ?> <FORM ACTION="Producto.php" METHOD="POST">

<H2> Ingrese Primer valor :

<Input Type="Text" Name="Valor1" Size="5"> <Br> Ingrese Segundo valor:

<Input Type="Text" Name="Valor2" Size="5"> <Br><Br>

<Input Type="Submit" Name="Boton" Value="Ingresar Datos"> </Form> <?PHP

} ?>

</Body> </Html>

Ejemplo: Realizar una función que permita determinar si un número pasado como parámetro, es par o impar.

<Html> <TITLE> Par.php </TITLE> <Body>

<?PHP function Par($n)

{ if ($n % 2 == 0) return true;

else return false;

}

// Programa principal

if ( $_REQUEST['Boton'] != "" ) { $V = $_REQUEST['Valor'];

echo ("<H2>"); echo (" El valor $V es: ");

if (Par($V)) echo ("Par"); else

echo ("Impar"); }

Page 63: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 63

else

{ ?>

<FORM ACTION="Par.php" METHOD="POST"> <H3> Ingrese un valor :

<Input Type="Text" Name="Valor" Size="5"> <Br><Br>

<Input Type="Submit" Name="Boton" Value="Ingresar Dato"> </Form> <?PHP

} ?>

</Body> </Html>

Comentario:

Se observa que en este caso, que la función devuelve un tipo Boolean, es decir true o false,

según corresponda. En el programa principal, la función es llamada directamente dentro de la estructura if. Observar además, que no hace falta colocar == true, ya que lo toma por defecto.

Ejemplo: Desarrollar una función que acepte una cadena de caracteres y la convierta en mayúscula.

<Html>

<TITLE> Mayuscula.php </TITLE> <Body>

<?PHP function Mayuscula( &$cadena ) {

$cadena = strtoupper($cadena); }

// Programa principal

if ( $_REQUEST['Boton'] != "" ) {

$N = $_REQUEST['Nombre']; Mayuscula($N);

echo ("<H2>"); echo ("El nombre en mayuscula es es: " . $N); }

else {

?>

<FORM ACTION="Mayuscula.php" METHOD="POST"> <H2>

Ingrese Apellido y Nombre : <Input Type="Text" Name="Nombre" Size="40">

<Br><Br>

Page 64: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 64

<Input Type="Submit" Name="Boton" Value="Ingresar Dato">

</Form> <?PHP

} ?> </Body>

</Html> Ejemplo: Realizar una función que acepte el lado de un cuadrado y calcule su perímetro y su superficie (No imprimir dentro de la función). <Html> <TITLE> Cuadrado.php </TITLE> <Body>

<?PHP function Calcular( $Lado, &$Perimetro, &$Superficie )

{ $Perimetro = $Lado * 4; $Superficie = $Lado * $Lado;

} // Programa principal

if ( $_REQUEST['Boton'] != "" ) { $P=0; $S=0;

$L = $_REQUEST['Lado']; Calcular($L, $P, $S);

echo ("El valor del perímetro es: $P"); echo ("<Br>"); echo ("El valor de la superficie es: $S");

} else

{ ?> <FORM ACTION="Cuadrado.php" METHOD="POST">

<H2> Ingrese El valor del Lado de un Cuadrado :

<Input Type="Text" Name="Lado" Size="5"> <Br><Br> <Input Type="Submit" Name="Boton" Value="Ingresar Dato">

</Form> <?PHP

} ?>

</Body>

</Html>

Page 65: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 65

Comentario:

En este caso, cuando se llama a la función Calcular, se lo realiza utilizando la variable $L

como parámetro valor, ya que no cambia su valor, y las variables $P y $S se las especifica como parámetro por referencia , esto se consigue anteponiendo el símbolo & a las variables Perimetro y Superficie, porque es necesario que cambien sus valores de acuerdo con el cálculo requerido.

Se reitera que: PHP individualiza a una variable que es por referencia cuando contiene el símbolo &(ampersand) delante de la variable.

Page 66: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 66

UNIDAD III: PROGRAMACION PHP

FUNCIONES PHP y MYSQL

Las principales son:

mysql_connect()

Esta función conecta a la base de datos con la cual vamos a

trabajar.

Sintaxis: mysql_connect(base_de_datos, usuario, Password)

mysql_select_db ()

Esta función selecciona la base de datos con la cual vamos a

trabajar.

Sintaxis:

mysql_select_db(base_de_datos, identificador_de_la_conexion)

mysql_query()

Esta función ejecuta una consulta a la base de datos a la que nos

hayamos conectado y que hayamos seleccionado previamente.

Sintaxis:

mysql_query(sentencia sql, identificador_de_la_conexion)

mysql_num_rows()

Esta función toma el número de resultados obtenidos de alguna consulta (query) que hayamos realizado previamente.

Sintaxis:

mysql_num_rows(identificador_de_query)

mysql_fetch_array()

Esta función lista los resultados obtenidos en una query.

Page 67: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 67

Sintaxis(listando resultados):

While($a=mysql_fetch_array(identificador_de_query) )

{

echo “$a[identificador_del_campo_a_listar]<br>”

}

ACLARACIÓN: De esta manera aparecería listado uno sobre otro

resultado. Ej: Campo1

Campo2

Campo3

mysql_create_db ()

Esta función crea una base de datos en el servidor.

Sintaxis: mysql_create_db(nombre_base_de_datos,

identificador_de_la_conexion)

mysql_drop_db()

Esta función elimina una base de datos del servidor.

Sintaxis:

mysql_drop_db(nombre_base_a_borrar, identificador_de_la_conexion)

mysql_close ()

Esta función desconecta a la base de datos con la cual hemos

trabajado.

Sintaxis:

mysql_close(identificador_de_la_conexion)

Page 68: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 68

SESIONES EN PHP

Es un método para hacer que variables estén disponibles en múltiples páginas sin tener que

pasarlas como parámetro. A diferencia de las cookies (son pequeños archivos de texto que nuestra página almacenaría en el disco duro de los usuarios visitantes, y que podríamos recuperar el valor que contengan cuando vuelvan a visitar esa página ), las variables de sesión se almacenan en el servidor y tienen un tiempo limitado de existencia.

Para identificar al usuario que generó las variables de sesión, el servidor genera una clave única que es enviada al navegador y almacenada en una cookie. Luego, cada vez que el

navegador solicita otra página al mismo sitio, envía esta cookie (clave única) con la cual el servidor identifica de qué navegador proviene la petición y puede rescatar de un archivo de

texto las variables de sesión que se han creado. Cuando han pasado 20 minutos sin peticiones por parte de un cliente (navegador) las variables de sesión son eliminadas automáticamente (se puede configurar el entorno de PHP para variar este tiempo).

Haremos un problema muy sencillo, cargaremos en un formulario el nombre de usuario y clave de un cliente, en la segunda página crearemos dos variables de sesión y en una tercera página

recuperaremos los valores almacenados en las variables de sesión. La primera página es un formulario HTML puro:

<html>

<head>

<title>Problema</title>

</head>

<body>

<form action="pagina2.php" method="post">

Ingrese nombre de usuario:

<input type="text" name="campousuario"><br>

Ingrese clave:

<input type="password" name="campoclave"><br>

<input type="submit" value="confirmar">

</form>

</body>

</html>

Lo que podemos recalcar es que, cuando en un cuadro de texto queremos ingresar una clave y

no queremos que aparezcan los caracteres tipeados en pantalla, debemos utilizar el control de tipo password:

<input type="password" name="campoclave">

La segunda página es donde creamos e inicializamos las dos variables de sesión:

<?php

session_start();

$_SESSION['usuario']=$_REQUEST['campousuario'];

$_SESSION['clave']=$_REQUEST['campoclave'];

?>

<html>

<head>

<title>Problema</title>

</head>

<body>

Se almacenaron dos variables de sesión.<br><br>

<a href="pagina3.php">Ir a la tercer página donde se recuperarán

las variables de sesión</a>

</body>

</html>

Page 69: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 69

Cuando creamos o accedemos al contenido de variables de sesión debemos llamar a la función session_start() antes de cualquier salida de marcas HTML. Para almacenar los valores en las variables de sesión lo hacemos:

$_SESSION['usuario']=$_REQUEST['campousuario'];

$_SESSION['clave']=$_REQUEST['campoclave'];

Es decir, tenemos el vector asociativo $_SESSION que almacena las

variables de sesión.

Por último, esta página tiene un hipervínculo a la tercera página.

La última página de este ejemplo tiene por objetivo acceder a las variables de sesión:

<?php

session_start();

?>

<html>

<head>

<title>Problema</title>

</head>

<body>

<?php

echo "Nombre de usuario recuperado de la variable de

sesión:".$_SESSION['usuario'];

echo "<br><br>";

echo "La clave recuperada de la variable de

sesión:".$_SESSION['clave'];

?>

</body>

</html>

De nuevo vemos que la primera línea de esta página es la llamada a la función session_start()

que, entre otras cosas, rescata de un archivo de texto las variables de sesión creadas para ese usuario (recordemos que desde el navegador todas las veces retorna una cookie con la clave

que generó PHP la primera vez que llamamos a una página del sitio).

Para mostrar las variables de sesión, las accedemos por medio del vector asociativo $_SESSION:

echo "Nombre de usuario recuperado de la variable de

sesión:".$_SESSION['usuario'];

echo "<br><br>";

echo "La clave recuperada de la variable de

sesión:".$_SESSION['clave'];

Tengamos en cuenta que en cualquier otra página del sitio tenemos acceso a las variables de sesión sólo con llamar inicialmente a la función session_start().

Page 70: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 70

PROCEDIMIENTOS ALMACENADOS EN PHP

Los procedimientos almacenados son un conjunto precompilado de instrucciones Transact-SQL (*) almacenadas bajo un solo nombre y procesadas como una unidad. Los procedimientos

almacenados pueden recibir parámetros, en base a los cuales realizar distintas acciones, y devolver datos de varias formas distintas (principalmente como parámetros de salida y como

conjuntos de resultados o Recordsets).

Estructura de los procedimientos almacenados:

DELIMITER $$

CREATE DEFINER=`root`@`localhost` PROCEDURE

`Nombre_del_procedimiento`(IN Variable VARCHAR(10))

BEGIN

END

DELIMITER $$ La Sentencia DELIMITER se utiliza en los Procedimientos Almacenados para remplazar el (;)

por un carácter que en este caso es ($$), para que de esta manera el procedimiento pueda ser escrito usando los punto y comas sin que se ejecute mientras se escribe; después de

escrito el procedimiento se escribe nuevamente la sentencia DELIMITER; para asignar al punto y coma su función habitual.

CREATE DEFINER=`root`@`localhost` PROCEDURE `Nombre_del_procedimiento`()

La Sentencia CREATE PROCEDURE se utiliza para crear el procedimiento almacenado.

DEFINER=`root`@`localhost` nos indica a que usuario y en lugar crear el procedimiento, y al final el nombre del procedimiento almacenado.

(IN Variable VARCHAR (10))

En esta parte del código se indican los parámetros, IN indica que es un parámetro de entrada, OUT indica que es un parámetro de salida, INOUT indica que es un parámetro de entrada y

salida, Después se indica el nombre del parámetro, el tipo de dato y la longitud. BEGIN & END

Entre el BEGIN y el END es donde van todas las sentencias SQL del procedimiento.

Los Procedimientos Almacenados (SP) son usados para consolidar y centralizar lógica que

originalmente se implementaba en las aplicaciones.

Eso quiere decir, que en vez de tener una "clase", con una lista interminable de funciones que hacen esto:

static function String getConsultaUsuario(String usuarioid) {

return "SELECT * FROM user WHERE userid = '" + usuarioid +"'";

}

Usted debería de tener una serie SP en su gestor de bases de datos, implementado como

un API "consolidado y centralizado" (en la base de datos). Lo mismo sucede con muchas

consultas SQL "grandes", o secuenciales: no podemos dejarlas regadas en el código,

necesitamos moverlas a un solo lugar.

Page 71: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 71

EJEMPLO:

Para la creación de los códigos siguientes asumiremos tener:

Una base de datos llamada "wpdemo" que posee una tabla llamada "wp_posts" con al

menos dos campos: `post_excerpt`y `post_type`.

Esta es en realidad una base de datos típica de WordPress1

CREACIÓN DEL STORED PROCEDURE DE PRUEBA:

DROP PROCEDURE `miPrimerProcedimientoAlmacenado` //

CREATE

DEFINER=`root`@`localhost`

PROCEDURE `miPrimerProcedimientoAlmacenado`(tipoPost varchar(20))

BEGIN Set names utf8;

SELECT * FROM `wp_posts`

WHERE trim2(`post_excerpt`) != "" AND `post_type` = tipoPost;

END //

Llegado a este punto y si todo está ok, deberemos tener en la base de datos una "Rutina" o

procedimiento almacenado llamado miPrimerProcedimientoAlmacenado que

podremos verificar haciendo clic en el enlace "+Rutinas" en la parte inferior de explorador de las tablas en phpMyAdmin.

El procedimiento que hemos creado espera recibir un parámetro que internamente hemos llamado "tipoPost" que modificará las condiciones de la consulta que traerá los datos.

LLAMANDO AL PROCEDIMIENTO ALMACENADO EN PHPMYADMIN

Para probar / ejecutar el procedimiento almacenado desde la pestaña de Consultas de

phpMyAdmin usamos la siguiente consulta:

CALL miPrimerProcedimientoAlmacenado('post');

NOTA: Presta atención en la forma en que se pasan los parámetros al SP, usando comillas simples y paréntesis para encerrar los valores pasados.

Como verás, el resultado es un grupo de registros que cumplen con las condiciones definidas por el parámetro pasado al procedimiento y desde luego la consulta misma de la que consta

el SP.

LLAMANDO AL PROCEDIMIENTO ALMACENADO DESDE PHP

Para llamar o ejecutar el procedimiento almacenado desde php debemos realizar los pasos de conexión normales para acceder a mysql y las demás instrucciones siguientes:

$sql="call miPrimerProcedimientoAlmacenado('post');"; $res=@mysql_query($sql, $cnx) or die('Error en el query:

'.mysql_errno($cnx).' - '.mysql_error($cnx));

1 WordPress es una poderosa plataforma de publicación personal, y viene con una gran cantidad de características incorporadas,

diseñadas para hacer tan fácil, placentera y atractiva como sea posible la experiencia de publicar en Internet 2

TRIM devuelve la cadena sin los espacios en blanco que pudiera contener al principio ni al final: SELECT TRIM(' Hola ')

Page 72: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 72

PROGRAMACIÓN ORIENTADA A OBJETOS EN PHP

Implementaremos una clase llamada Persona que tendrá como atributo (variable) su nombre y dos métodos (funciones), uno de dichos métodos inicializará el atributo nombre y el siguiente

método mostrará en la página el contenido del mismo.

pagina1.php

<html>

<head>

<title>Pruebas</title>

</head>

<body>

<?php

class Persona {

private $nombre;

public function inicializar($nom)

{

$this->nombre=$nom;

}

public function imprimir()

{

echo $this->nombre;

echo '<br>';

}

}

$per1=new Persona();

$per1->inicializar('Juan');

$per1->imprimir();

$per2=new Persona();

$per2->inicializar('Ana');

$per2->imprimir();

?>

</body>

</html>

Analizando el ejercicio anterior

La sintaxis básica para declarar una clase es:

class [Nombre de la Clase] {

[atributos]

[métodos]

}

Siempre conviene buscar un nombre de clase lo más próximo a lo que representa. La palabra clave para declarar la clase es class, seguidamente el nombre de la clase y luego encerramos

entre llaves de apertura y cerrado todos sus atributos(variable) y métodos(funciones).

Nuestra clase Persona queda definida entonces:

Page 73: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 73

class Persona {

private $nombre;

public function inicializar($nom)

{

$this->nombre=$nom;

}

public function imprimir()

{

echo $this->nombre;

echo '<br>';

}

}

Los atributos normalmente son privados (private), ya veremos que esto significa que no podemos acceder al mismo desde fuera de la clase. Luego para definir los métodos se utiliza la misma sintaxis que las funciones del lenguaje PHP.

Decíamos que una clase es un molde que nos permite definir objetos. Ahora veamos cual es la

sintaxis para la definición de objetos de la clase Persona:

$per1=new Persona();

$per1->inicializar('Juan');

$per1->imprimir();

Definimos un objeto llamado $per1 y lo creamos asignándole lo que devuelve el operador

new. Siempre que queremos crear un objeto de una clase utilizamos la sintaxis new [Nombre de la Clase].

Luego para llamar a los métodos debemos anteceder el nombre del objeto el operador -> y

por último el nombre del método. Para poder llamar al método, éste debe ser definido público (con la palabra clave public). En el caso que tenga parámetros se los enviamos:

$per1->inicializar('Juan');

También podemos ver que podemos definir tantos objetos de la clase Persona como sean

necesarios para nuestro algoritmo:

$per2=new Persona();

$per2->inicializar('Ana');

$per2->imprimir();

Esto nos da una idea que si en una página WEB tenemos 2 menúes, seguramente definiremos una clase Menu y luego crearemos dos objetos de dicha clase.

Esto es una de las ventajas fundamentales de la Programación Orientada a Objetos (POO), es

decir reutilización de código (gracias a que está encapsulada en clases) es muy sencilla.

Lo último a tener en cuenta en cuanto a la sintaxis de este primer problema es que cuando accedemos a los atributos dentro de los métodos debemos utilizar los operadores $this -> (this

y ->):

public function inicializar($nom)

{

$this->nombre=$nom;

}

El atributo $nombre solo puede ser accedido por los métodos de la clase Persona.

Page 74: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 74

TIPOS DE ACCESO EN PHP

¿Qué es eso de público, privado y protegido?

Público (public): Se puede acceder desde fuera de la clase.

Privado (private): Sólo se puede acceder desde dentro de la clase.

Protegido (protected): Se puede accede desde dentro de la clase y desde clases

herederas.

¿Qué significa $this? $this es la variable que hace referencia a la instancia actual del

objeto. En todos los lenguajes con orientación a objetos existe una variable, que hace referencia al objeto con el que se está trabajando

MANEJADORES DE CONTENIDO (CMS: Content Management System)

Page 75: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 75

¿Qué es un CMS (Content Management System)?.

Es un software de gestión de contenidos que permite la publicación y administración de

contenidos a través de un panel de control, utilizado comúnmente para la creación de

webs dinámicas, por ejemplo blogs y tiendas online (comercio electrónico). Los CMS de

código abierto más conocidos son: WordPress, Drupal, Joomla, Movable Type,

Prestashop, Magento, Zencart, Concrete5.

El uso de CMS de código abierto o la creación de una web a medida depende de las

necesidades de cada uno. Las ventajas más interesantes del uso de CMS de código

abierto son las siguientes:

1. Rápida instalación: con los conocimientos justos se instala y configura en tu

servidor.

2. Simplicidad: suelen tener una interfaz amigable para la gestión de los contenidos.

3. Personalización intuitiva: existe un gran número de plugins y themes (gratuitos y

de pago) que se instalan en sencillos pasos.

4. Precio económico: puesto que no hay que empezar de cero, el coste es bastante

inferior a una web a medida.

5. Respaldo por parte de su comunidad de usuarios : los CMS más conocidos

disponen de una gran comunidad de usuarios.

Pero también tiene algunos inconvenientes que se deben conocer:

6. Menor seguridad: en un sistema de código abierto existen comunidades que se

dedican a encontrar vulnerabilidades en el mismo.

7. Menor velocidad: al ser plataformas genéricas, las consultas a la base de datos

son altas, por tanto cuanto mayor información haya almacenada más lento será el

sistema.

Page 76: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 76

A CONTINUACIÓN ALGUNOS TIPS PARA EL EXÁMEN:

o EL EXÁMEN CONSTA DE 6 PREGUNTAS: LAS DOS PRIMERAS SON DE TEORÍA (4

PUNTOS), son preguntas para marcar la alternativa correcta o indicar VERDADERO / FALSO. Revisar: con qué función se crea, inicia o destruye una sesión, cuándo un atributo o método es privado, público o protegido, uso del arreglo asociativo global $_SESSION, cómo crear una variable de sesión, cuál es la instrucción para llamar a un procedimiento almacenado, cómo llamar a los métodos o campos STATIC de una clase, etc.

o EN OTRA PREGUNTA SE LES PRESENTARÁ UN CÓDIGO EN PHP (puede ser la

declaración de una sola clase o puede involucrar una relación de herencia entre dos clases) EN EL CUAL TIENEN QUE IDENTIFICAR CUÁL ES EL ERROR, Y CUÁL

DEBERÍA SER LA SOLUCIÓN, para resolver esta pregunta deben conocer correctamente los tipos de acceso tanto a campos como a métodos: privado,

público o protegido; comprender que la mejor manera de acceder a un campo privado de un objeto es mediante métodos públicos del tipo SET y GET.

o TRES PREGUNTAS SON PARA ESCRIBIR CÓDIGO EN PHP (DEL SCRIPT PRINCIPAL main.php y DE LAS CLASES NECESARIAS para la solución).

EJERCICIOS TIPO, PARA EL EXÁMEN

FINAL (Se les recomienda practicarlos por ser muy

similares a los del examen final)

Page 77: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 77

EJERCICIO 01: El siguiente código en PHP corresponde a la implementación de una relación de herencia entre dos clases: Coche y Deportivo.

<?php

class Coche { private $velocidad = 0; function setVelocidad($velocidad) { $this->velocidad = (int) $velocidad; } }

Class Deportivo extends Coche{ function aumentarVelocidad() {

$this->velocidad = $this->velocidad * 2; } } $deportivo = new Deportivo(); $deportivo->setVelocidad(100); $deportivo->aumentarVelocidad();

?>

Se pide:

o Identificar los errores y explicar el porqué de los mismos.

o Proponer la solución correcta

Page 78: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 78

EJERCICIO 02: Implementar un programa en PHP de nombre IUMatematica.php que hace uso de

la clase Matematica.php, esta clase tiene métodos estáticos para las cuatro operaciones básicas (suma, resta, multiplicación, división), gráficamente la relación entre ambos archivos sería:

Luego de ingresar dos operandos, elegir un operador y pulsar en el botón “Procesar” se muestra el

resultado en una tabla (al final de la interfaz anterior) como lo muestra la siguiente figura:

IUMatematica.php Matematica.php

IUMatematica.php

Tener en cuenta:

La página IUMatematica.php emplea un formulario recursivo por lo tanto se deberá usar correctamente la función

isset().

Se pide la implementación tanto de la página IUMatematica.php como de la

clase Matematica

Page 79: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 79

EJERCICIO 03.- Este ejercicio implica trabajar con 3 páginas y aplicar el concepto de

SESIONES en PHP:

En la pagina1.html, cargaremos en un formulario el nombre de usuario y clave de un

cliente

En la pagina2.php creamos e inicializamos dos variables de sesión.

En la pagina3.php recuperaremos los valores almacenados en las variables de sesión.

La pagina1.html es un formulario HTML puro:

<html>

<head>

<title>Problema</title>

</head>

<body>

<form action="pagina2.php" method="post">

Ingrese nombre de usuario:

<input type="text" name="campousuario"><br>

Ingrese clave:

<input type="password" name="campoclave"><br>

<input type="submit" value="confirmar">

</form>

</body>

</html>

El gráfico siguiente muestra la secuencia en que se deben ejecutar las páginas. Se pide

implementar pagina2.php y pagina3.php de tal manera que el resultado de cada página sea:

Pagina1.html Pagina2.php

Pagina3.php

Page 80: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 80

EJERCICIO 04: Usando clases en PHP resolver una ecuación de segundo grado:

Se pide implementar la clase Ecuacion y Math (en archivos independientes del mismo nombre

de la clase). La clase ecuación depende de la clase Math porque necesita de los métodos estáticos pow y sqrt para realizar el cálculo de las raíces de la ecuación.

Gráficamente la relación de dependencia entre estos archivos es como sigue:

Tener en cuenta que el método resolver realiza el cálculo de las dos raíces de la ecuación de segundo grado y las devuelve en un arreglo, dentro de éste método se debe invocar a los métodos de la clase Math. La implementación del programa principal es como sigue: main.php <?php require_once 'Ecuacion.php'; $ecua = new Ecuacion(1,-4,3); $raiz = $ecua->resolver(); echo("A : ".$ecua->getA()."<br>"); echo("B : ".$ecua->getB()."<br>"); echo("C : ".$ecua->getC()."<br>"); echo("Raiz 1: {$raiz[0]}<br>"); echo("Raiz 2: {$raiz[1]}<br>"); ?>

Programa: main.php

Page 81: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 81

EJERCICIO 05.- Partiendo de la siguiente figura y tomando como base el código de la

clase Artículo:

Articulo.php

<?php class Articulo { private $code = 0; private $name = null; private $price = 0.0; function __construct($code, $name, $price) { $this->code = $code; $this->name = $name; $this->price = $price; } … } ?> Se pide:

a. Implementar en PHP la clase Paquete, si se sabe que un objeto de esta clase contiene

una lista de objetos de la clase Articulo.

b. Para ilustrar el uso de la clase Paquete, elabore un programa main.php en el cual usted deberá:

Crear como mínimo 03 objetos de la clase artículo (inicialíce los atributos de caja objeto con los valores que usted desee)

Añadir los artículos creados dentro de un objeto de la clase Paquete

Mostrar el code, name y price de cada artículo que se encuentra dentro del objeto paquete usando la estructura de control foreach.

Programa: main.php

Articulo.php Paquete.php

Page 82: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 82

EJERCICIO 06.- Partiendo de la siguiente figura y tomando como base el código la clase

padre CalculadoraBase:

Se pide:

c. Implementar en PHP la clase hija Calculadora1, si se sabe que tiene dos métodos

públicos factorial y esPrimo.

d. Para ilustrar el uso de la clase Calculadora1, elabore un programa main.php en el cual

usted deberá:

Crear 01 objeto de la clase Calculadora1.

Declarar dos variables n1=5 y n2=11 e invocar con estos valores a los métodos suma

y resta del objeto creado (en el paso anterior).

Invocar a los métodos factorial(n1) y esPrimo(n2) del objeto de la clase Calculadora1.

Mostrar los resultados de las llamadas a estos métodos.

<?php class CalculadoraBase { public function suma( $n1, $n2 ) { $rpta = $n1 + $n2; return $rpta; } public function resta( $n1, $n2 ) { $rpta = $n1 - $n2; return $rpta; } } ?>

Programa: main.php

Calculadora1.php

CalculadoraBase.php CalculadoraBase.php

Page 83: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 83

EJERCICIO 07. Usando clases en PHP implementar una página de nombre menu.php que al cargarse en un navegador, muestre una lista de hipervínculos en forma horizontal (básicamente un menú de opciones) como lo indica la siguiente figura:

Se pide completar el siguiente código:

Menu.php

<html> <head>

<title>Pruebas</title> </head>

<body>

<?php

class Menu { private $enlaces=array();

private $titulos=array(); public function cargarOpcion($en,$tit)

{ $this->enlaces[]=$en;

$this->titulos[]=$tit; }

public function mostrar() {

for($f=0;$f<count($this->enlaces);$f++) { echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>';

echo "-"; }

} }

$menu1=new Menu();

$menu1->cargarOpcion('http://www.google.com','Google'); $menu1->cargarOpcion('http://www.yahoo.com','Yhahoo');

$menu1->cargarOpcion('http://www.msn.com','MSN'); $menu1->mostrar();

?> </body>

</html>

Tener en cuenta que:

Lo primero que se debe hacer es cargar una lista de direcciones web y los títulos de los enlaces. Es decir será necesario definir dos vectores paralelos que almacenen las direcciones y los títulos respectivamente.

Luego utilizar una estructura repetitiva para visualizar la combinación de enlaces y títulos (hipervínculos) en un menú.

Page 84: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 84

SOLUCIÓN - EJERCICIO 02:

Matemática.php

<?php class Matematica {

public static function sumar( $num1, $num2) { $rpta = $num1 + $num2;

return $rpta; }

public static function restar( $num1, $num2) { $rpta = $num1 - $num2; return $rpta;

} public static function multiplicar( $num1, $num2) {

$rpta = $num1 * $num2; return $rpta; }

public static function dividir( $num1, $num2) { $rpta = $num1 / $num2;

return $rpta; } }

?>

IUMatematica.php (implementación parcial)

La implementación al 100% de esta clase está en el directorio: EJERCICIO 02 (colgado en el campus –

dentro de la carpeta “EXAMEN_FINAL”)

<?php

require_once '../model/Matematica.php'; $resultado = FALSE; if( isset( $_REQUEST["procesar"] ) ) {

$num1 = $_REQUEST["num1"]; $num2 = $_REQUEST["num2"]; $ope = $_REQUEST["oper"];

En caso que $ope sea +: invocar al método sumar En caso que $ope sea -: invocar al método restar En caso que $ope sea *: invocar al método multiplicar

En caso que $ope sea /: invocar al método dividir $resultado = TRUE; } ?>

<html> Crear la interfaz gráfica (formulario recursivo) If (resultado)

Crear la tabla que muestra el resultado

</html>

Page 85: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 85

SOLUCIÓN - EJERCICIO 03:

pagina2.php

<?php session_start(); $_SESSION['usuario']=$_REQUEST['campousuario'];

$_SESSION['clave']=$_REQUEST['campoclave']; ?>

<html> <head> <title>Problema</title>

</head> <body> Se almacenaron 2 variables de sesión.<br><br>

<a href="pagina3.php">Ir a página3.php para mostrarlas</a> </body> </html>

Pagina3.php <?php

session_start(); ?>

<html> <head> <title>Problema</title>

</head> <body> <?php

$u=$_SESSION['usuario']; $c=$_SESSION['clave']; echo "Nombre de usuario recuperado de la variable de sesión:".$u;

echo "<br><br>"; echo "La clave recuperada de la variable de sesión:".$c; ?>

</body> </html>

Page 86: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 86

SOLUCIÓN - EJERCICIO 04:

Math.php <?php

class Math { public static function pow( $base, $exp ) {

$rpta = pow($base, $exp); return $rpta; }

public static function sqrt( $num ) { $rpta = sqrt( $num );

return $rpta; }

} ?>

Ecuacion.php <?php

require_once 'Math.php';

class Ecuacion { private $a;

private $b; private $c;

function __construct($a = 0, $b = 0, $c = 0) { $this->a = $a; $this->b = $b;

$this->c = $c; }

public function getA() { return $this->a; }

public function setA($a) { $this->a = $a;

} public function getB() {

return $this->b; }

public function setB($b) { $this->b = $b; }

public function getC() { return $this->c;

} public function setC($c) {

$this->c = $c; } …. Continúa en la siguiente página……

Page 87: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 87

public function resolver( ) { $disc = Math::pow($this->getB(), 2) - 4 * $this->getA() * $this->getC();

$temp = Math::sqrt($disc); $raiz[] = (-$this->getB() + $temp) / ( 2 * $this->getA() ); $raiz[] = (-$this->getB() - $temp) / ( 2 * $this->getA() );

return $raiz; }

} ?>

Main.php <?php

require_once 'Ecuacion.php'; $ecua = new Ecuacion(1,-4,3);

$raiz = $ecua->resolver(); echo("A : ".$ecua->getA()."<br>");

echo("B : ".$ecua->getB()."<br>"); echo("C : ".$ecua->getC()."<br>"); echo("Raiz 1: {$raiz[0]}<br>");

echo("Raiz 2: {$raiz[1]}<br>"); ?>

SOLUCIÓN - EJERCICIO 05

Articulo.php <?php

class Articulo{

private $code = 0; private $name = null; private $price = 0.0;

function __construct($code, $name, $price) { $this->code = $code;

$this->name = $name; $this->price = $price; }

public function getCode() { return $this->code;

} public function setCode($code) {

$this->code = $code; }

public function getName() { return $this->name; }

public function setName($name) { $this->name = $name;

} …. Continúa en la siguiente página……

Page 88: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 88

public function getPrice() { return $this->price;

} public function setPrice($price) {

$this->price = $price; }

} ?>

Paquete.php <?php

require_once 'Articulo.php'; class Paquete {

private $list = null;

function __construct() { $this->list = array(); }

public function add( Articulo $article){ $this->list[] = $article;

} public function getList(){

return $this->list; }

} ?>

main.php

<?php

require_once 'Paquete.php';

$paquete1 = new Paquete(); $paquete1->add(new Articulo(10,"Impresora",150.00));

$paquete1->add(new Articulo(20,"Monitor",320.00)); $paquete1->add(new Articulo(30,"Teclado",25.00));

foreach ( $paquete1->getList() as $obj ) { echo("{$obj->getCode()} {$obj->getName()} {$obj->getPrice()}<br>"); }

?>

Page 89: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 89

EJERCICIO 06 - SOLUCIÓN

CalculadoraBase.php

<?php

class CalculadoraBase {

public function suma( $n1, $n2 ) { $rpta = $n1 + $n2; return $rpta;

} public function resta( $n1, $n2 ) {

$rpta = $n1 - $n2; return $rpta; }

} ?>

Calculadora1.php

<?php

require_once 'CalculadoraBase.php';

class Calculadora1 extends CalculadoraBase { public function factorial( $n ) {

$f = 1; while( $n > 1 ) { $f *= $n--;

} return $f; }

public function esPrimo( $n ) { $primo = TRUE;

$k = 1; while( ++$k < $n ) { if( $n % $k == 0 ) {

$primo = FALSE; break; }

} return $primo; }

} ?>

Page 90: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 90

main.php

<?php

require_once 'Calculadora1.php'; // Datos

$n1 = 5; $n2 = 11;

// Proceso $obj = new Calculadora1(); $suma = $obj->suma($n1, $n2);

$fact = $obj->factorial($n1); $primo = $obj->esPrimo($n2);

// Reporte echo("$n1 + $n2 = $suma<br>"); echo("Factorial de $n1 es $fact<br>");

echo("$n2 es primo: " . ($primo?"Si":"No")); ?>

EJERCICIO 07 - SOLUCIÓN

Menu.php

<html>

<head>

<title>Pruebas</title>

</head>

<body>

<?php

class Menu {

private $enlaces=array();

private $titulos=array();

public function cargarOpcion($en,$tit)

{

$this->enlaces[]=$en;

$this->titulos[]=$tit;

}

public function mostrar()

{

for($f=0;$f<count($this->enlaces);$f++)

{

echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>';

echo "-";

}

}

}

$menu1=new Menu();

$menu1->cargarOpcion('http://www.google.com','Google');

$menu1->cargarOpcion('http://www.yahoo.com','Yhahoo');

$menu1->cargarOpcion('http://www.msn.com','MSN');

$menu1->mostrar();

?>

</body>

</html>

Page 91: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 91

Analicemos ahora la solución al ejercicio 07, como podemos ver normalmente los atributos

de la clase se definen inmediatamente después que declaramos la clase:

class Menu {

private $enlaces=array();

private $titulos=array();

Si queremos podemos hacer un comentario indicando el objetivo de cada atributo.

Luego tenemos el primer método que añade a los vectores los datos que llegan como parámetro:

public function cargarOpcion ($en,$tit)

{

$this->enlaces[]=$en;

$this->titulos[]=$tit;

}

Conviene darle distinto nombre a los parámetros y los atributos (por lo menos inicialmente para no confundirlos).

Utilizamos la característica de PHP que un vector puede ir creciendo solo con asignarle el

nuevo valor. El dato después de esta asignación $this->enlaces[ ]=$en; se almacena al final del vector.

Este método será llamado tantas veces como opciones tenga el menú.

El siguiente método tiene por objetivo mostrar el menú propiamente dicho:

public function mostrar()

{

for($f=0;$f<count($this->enlaces);$f++)

{

echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>';

echo "-";

}

}

Disponemos un for y hacemos que se repita tantas veces como elementos tenga el vector $enlaces (es lo mismo preguntar a uno u otro cuantos elementos tienen ya que siempre tendrán la misma cantidad). Para obtener la cantidad de elementos del vector utilizamos la

función count.

Dentro del for imprimimos en la página el hipervínculo:

echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>';

Hay que acostumbrarse que cuando accedemos a los atributos de la clase se le antecede el operador $this-> y seguidamente el nombre del atributo propiamente dicho. Si no hacemos esto estaremos creando una variable local y el algoritmo fallará.

Por último para hacer uso de esta clase Menu debemos crear un objeto de dicha clase (lo que en programación estructurada es definir una variable):

$menu1=new Menu();

$menu1->cargarOpcion('http://www.google.com','Google');

$menu1->cargarOpcion('http://www.yahoo.com','Yhahoo');

$menu1->cargarOpcion('http://www.msn.com','MSN');

$menu1->mostrar();

Page 92: PHP POO Nivel Avanzado 2

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 92

Creamos un objeto mediante el operador new y seguido del nombre de la clase. Luego

llamamos al método cargarOpcion tantas veces como opciones necesitemos para nuestro menú (recordar que SOLO podemos llamar a los métodos de la clase si definimos un objeto de la misma)

Finalmente llamamos al método mostrar que imprime en la página nuestro menú.

ADICIONALMENTE SE PROPORCIONA UN DIRECTORIO DE CASOS PRÁCTICOS (ESTUDIADOS EN

CLASE DURANTE LA TERCERA UNIDAD y no formarán parte del examen final)

IMPLEMENTADOS EN PHP, SOLAMENTE DEBEN DE GRABARLO EN EL DIRECTORIO RAÍZ DE SU

SERVIDOR WEB:

EJERCICIO DEL COLEGIO LOS GENIOS

EJERCICIO SOBRE SESIONES EN PHP

SIMULANDO UN CARRITO DE COMPRAS

ETC.

CON RESPECTO AL EXAMEN FINAL

Los 07 ejercicios resueltos en esta tercera parte de la separata

serán muy similares a los del próximo examen

final, se recomienda analizar detalladamente y comprender la

solución de cada uno de ellos.

o LAS 02 PREGUNTAS DE TEORÍA (ver: tips para el

examen – pág 76) sumarán 4 PUNTOS

o LAS PREGUNTAS DE CODIFICACIÓN 16 PUNTOS

TODO LO QUE VENDRÁ EN EL EXAMEN FINAL ESTÁ

COMPRENDIDO EN LA TERCERA UNIDA DE ESTA SEPARATA,

ESPECÍFICAMENTE LOS EJERCICIOS TIPO PARA EL EXAMEN

ESTÁN COMPRENDIDOS ENTRE LAS PÁG. 76 - 92 (todos estos

ejercicios han sido parte de las guías de laboratorio resueltas en

la unidad III).