programación web curso 2005 - 2 cmaterias.fi.uba.ar/sweb/2c-2005/html-php.pdffiuba 2005...

FIUBA

Programación WEBCurso 2005 - 2 C

Introducción HTML y PHP

Prof.. María FeldgenIng. Osvaldo Clúa

ContenidoIntroducción.........................................................................................................................................2

Historia de HTML..........................................................................................................................2HTML..................................................................................................................................................3

Formato...........................................................................................................................................4Comentarios....................................................................................................................................5Imágenes.........................................................................................................................................5Tablas..............................................................................................................................................5Ejercicios:.......................................................................................................................................7

Introducción a JavaScript....................................................................................................................8Client-Side Scripting......................................................................................................................8Ejercicios:.......................................................................................................................................9

PHP......................................................................................................................................................9Introducción....................................................................................................................................9Variables........................................................................................................................................10Arreglos (array) y Objetos............................................................................................................10Instrucciones del lenguaje: ...........................................................................................................11Funciones......................................................................................................................................13Ejercicios......................................................................................................................................13

Formularios........................................................................................................................................14Elementos de diálogo....................................................................................................................14Ejercicios......................................................................................................................................16Forms en PHP...............................................................................................................................16

Forms en JavaScript..........................................................................................................................18JavaScript en las páginas HTML..................................................................................................18Variables, funciones y eventos.....................................................................................................19

PHPLib y Templates..........................................................................................................................21Esquema de uso............................................................................................................................22Ejemplo detallado.........................................................................................................................22Ejercicio de Comprensión.............................................................................................................24Campos Repetitivos......................................................................................................................25Ejercicio de Comprensión (2).......................................................................................................27Ejercicios......................................................................................................................................28

-1-

FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa

INTRODUCCIÓN http://w3.org es el lugar indicado para obtener las especificaciones de HTML

y el siguiente material.Como editores se recomiendan:

• nvu para un editor WYSIWYG http://www.nvu.com/• Qantas plus como plataforma de desarrollo php (no se usa en esta guía) http://quanta.kdewebdev.org/

El corrector de HTML html-tidy (incorporado en estas herramientas).Esta práctica busca generalizarse con la construcción de páginas Web estáticas.

Presente sus resultados en forma de páginas Web.HTML es un lenguaje de Markup basado en el SGML (Standard Generalized

Markup Language), al cual se le agregaron vínculos de hipertexto. Cada browser presenta la página escrita en HTML de acuerdo a su estructura de Markup. La forma exacta de interpretación depende de cada browser, por ejemplo los browsers visuales tales como IE y NN presentan las páginas en pantalla, en cambio, los browsers para no videntes van a leer el contenido de acuerdo al Markup.

Una página escrita en HTML puede ser creado mediante cualquier editor de texto ya que se trata de un simple archivo de texto.

Historia de HTML• 1989: Tim Berners-Lee en el CERN (European Laboratory for Particle Physics)

define un versión muy simple de HTML basado en SGML (Standard Generalized Markup Language), como parte de un sistema basado en red para compartir documentos por medio de browsers de texto y que fuera simple de aprender y mostrar.

• 1992-3: un grupo del NCSA (National Center for Supercomputing Applications, USA) desarrolla el MOSAIC, un browser visual y gráfico, agregando al HTML soporte para imágenes, listas anidadas y formularios. Fue el inicio del WEB.

• 1994: Varias personas del grupo de MOSAIC ayudan a empezar a Netscape.

• 1994: Se forma el W3 Consortium (W3C) con sede en el MIT, como una organización con soporte industrial para la estandarización y desarrollo del Web.

• 1997: Se crea el primer estándar de HTML: HTML 3.2

• 1999: (Diciembre): HTML 4.01 es la recomendación del W3C, que empieza a separar claramente la estructura del documento de los aspectos de la presentación y que especifica claramente las relaciones entre HTML y los client-side scripts (JavaScripts).HTML 4 viene en 3 diferentes tipos: Strict, Transitional y Frameset. Los últimos dos permiten a los autores pasar del estándar estricto enfatizando la estructura sobre la presentación y usando elementos de presentación y atributos que están marcados como deprecated (cuyo uso se abandonará a corto plazo).

-2-

http://w3.org/http://quanta.kdewebdev.org/http://www.nvu.com/http://w3.org/


Se pueden especificar estilos de presentación para elementos individuales y agregar diferentes estilos de presentación para diferentes tipos de elementos con style sheets. HTML 4.01 no está basado en XML. Agregarle a HTML la sintaxis estricta del XML tiene las siguientes ventajas:

• los elementos de XHTML se pueden usar con otros elementos definidos por XML

• las páginas XHTML se pueden procesar fácilmente con herramientas de XML.

• 2000 (Enero): el W3C lanza XHTML 1.0 como una reformulación de HTML 4 .01 bajo la sintaxis estricta de XML. Para soportar los tres tipos de HTML 4, XHTML 1.0 provee tres DTD's (Document Type Definitions) y que indican el tipo en la declaración DOCTYPE:

En el primero no se aceptan elementos o atributos deprecated. Muchos browsers no respetan estas disposiciones y los presentan igual.

• 2001 (Abril): el W3C lanza la recomendación Modularization of XHTML agrupando elementos de XHTML relacionados en módulos definidos por XML DTD Fragments. Esta organización modular hace que XHTML sea más flexible y extensible.

• 2002 (Agosto): se lanza el XHTML 2.0 working draft que actualiza los módulos, elimina el soporte para elementos deprecated y arma una base para la evolución futura de XHTML.

HTML Una página Web contiene dos partes: etiquetas de identificación del Markup,

llamados tags y contenido. Los tags están enmarcados entre los símbolos < y > y pueden tener atributos o modificadores.

Como los tags pueden contener a su vez a otros tags (en forma de un árbol), deberá entonces existir un tag de inicio y otro de fin. La diferencia entre los mismos lo da la barra “/” antes del nombre, en el caso del tag de finalización. Si el tag no tiene contenido, entonces la barra estará antes del signo mayor.

-3-

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


FormatoCONTENIDOLos tags son case-insensitive.Como ejemplo, veamos un documento o página HTML sencilla:

Primer HTML

Hola Mundo!
Este es un ejemplo.

• La primera línea nos indica el tipo de documento un documento HTML y que su versión es la 4.01.

• En la segunda línea se abre el tag para indicar que comienza un documento HTML y es en el cual se puede agregar un atributo indicando que el idioma empleado es español y no inglés que el standard por defecto. El documento se cierra mediante el tag como última línea del documento que tomará en cuenta el browser. Entre estos dos tags se encontrarán todos los demás de la página.

• En la tercera línea aparece , debajo de este tag se ubicará la cabecera de la página y que contiene la información para los "spiders" y "scrawlers" la usen para armar los índices para los "searchers" (de los tags META y TITLE).

• Luego del tag se colocará el título de la página, que se cerrará mediante .

• El tag marca el comienzo del contenido de la página que mostrará el browser.

No todos los usuarios pueden apreciar las páginas web de la misma manera, esto se debe a varios motivos:

• Pequeñas diferencias entre los browsers.

• No todos los usuarios tienen instaladas las mismas fuentes.

• Diferentes resoluciones de pantalla.

• Tamaño de la ventana.

-4-


ComentariosEn HTML los comentarios se deberán encerrar entre “”.Información para los índices de los buscadores (tag META)Mediante este tag, podemos brindar información sobre características del documento, como por ejemplo:

1. AUTHOR: quien escribió el documento.2. KEYWORDS: los spiders y scrawlers obtienen de este tag las palabras clave

que identifican al documento para armar los índices que usarán los buscadores.3. HTTP-EQUIV: mediante este atributo, podemos modificar las cabeceras

HTTP que se envían al cliente. Por lo tanto, si el documento está escrito en japonés, el browser podrá interpretarlo correctamente.

ImágenesPara utilizar imágenes en nuestras páginas usamos el tag y algunos de sus atributos son.

1. ALIGN: la alineación de la imagen con respecto al texto. (LEFT, RIGHT, BOTTOM, TOP, MIDDLE, CENTER)

2. ALT: Ya que hay muchos browsers que no pueden mostrar imágenes, es importante poner la descripción de cuál es la imagen que viene aquí. También, pensar que la página puede ser accedida por no videntes, quienes usan un lector para navegarla, entonces es fundamental completar este campo.

3. WIDTH: ancho de la imagen (si no se especifica se toma el que viene con el archivo, y en ese caso el browser debe esperar a que se cargue todo el archivo que contiene la imagen).

4. HEIGHT: alto de la imagen (por default: lo mismo que para width)5. SRC: indica el path al archivo, puede ser relativo o una URL completa (esta

última opción solo se usa si el archivo está físicamente en otro servidor).

TablasLas tablas se usan para ordenar y alinear el texto en filas y columnas.Los tags que definen una tabla son:: comienza una tabla y termina con .

1. Algunos de los atributos del tag de comienzo son:

-5-


a. ALIGN: define la alineación.b. WIDTH: el ancho de la tabla, puede ser un porcentaje con lo cual,

ocupará una cantidad relativa a donde estará insertada la tabla.c. CELLSPACING, CELLPADDING: definen los márgenes entre

cada celda de la tabla.d. SUMMARY: cumple la misma función que el ALT.e. BORDER: define el tamaño del borde de la tabla.

La tabla contiene los siguientes tags:2. : comienza las líneas que son los títulos de las columnas, si tiene y

termina con . Muchas páginas tienen títulos pero se expresaron como líneas comunes, lo cual hace compleja su comprensión para una persona no vidente que usa un lector automático. Este tag contiene los siguientes tags:

a. y termina con : define una nueva fila. Algunos de sus atributos son:

i. BGCOLOR: define el color de fondo para esa fila.ii. VALIGN: especifica la alineación vertical de las columnas de

esa fila.b. y termina con : define el titulo de una columna tiene los

mismos atributos que 3. y termina con : indica la información que contienen

la tabla. Este tag contiene los siguientes tags:a. y termina con ver 2. a)b. y termina con : es la información de una celda de una

columna. Algunos de sus atributos son:i. COLSPAN: dice que este dato ocupará N columnas en vez de

1.ii. ROWSPAN: lo mismo que COLSPAN pero para filas.

iii. WIDTH, HEIGHT: tamaño de la celda (siempre se debe usar relativo en porcentaje).

1.

2. 3. 4. PRIMER PARCIAL – NOTAS5. 6.

-6-


7. Nombre8. Nota9. 10. 11. 12. 13. Juan Pérez14. 515. 16. 17. Julieta Díaz18. 419. 20. 21.

EJERCICIOS :1. Haga su propia página Web incluyendo:

a) Sus Datos Personales. b) Una Foto (tan característica como pueda). c) Una lista numerada de sus habilidades/hobbies. d) Una tabla con algunas de sus materias aprobadas, fecha de aprobación

y notas. e) La página deberá pasar la validación de html-tidy sin ningún warning

e incluir un pié de página indicando la fecha de modificación.2. Haga una página Web para su grupo que incluya una tabla o lista de nombres de integrantes con un link a la pagina de cada uno de ellos.3. Indique la sintaxis completa, para que sirve, como y donde se ve tanto en el Internet Explorer como en Firefox y en un Browser de texto y que pasa si se omiten los siguientes tags que definen una página:

DOCTYPE HTML TITLE HEAD BODY4. Repita el mismo ejercicio anterior para por lo menos 6 atributos de texto.5. Haga un ejemplo de como controlar la apariencia del texto usando

6. ¿Cómo controla las apariencias de las Listas?7. ¿Cómo controla la apariencia de las tablas?8. ¿Qué caracteres especiales puede ingresar usando los códigos &..?9. ¿Cuáles son los colores "seguros"?10. ¿Cómo se hace un link a un lugar dentro de una página?11. ¿Cómo se controla el texto para que “fluya” a la izquierda o a la derecha de las imágenes (sin usar tablas).

-7-


12. Haga un imagen con tres círculos y coloque el html de forma tal que un click en cada uno de ellos tenga un efecto distinto.13. ¿Que es una página estática, una página dinámica y una página activa?14. ¿Cómo logra que una página se recargue después de una cantidad de tiempo? (explique las tecnologías client-pull y server-push)

Introducción a JAVASCRIPTCLIENT-SIDE SCRIPTING.

Hay múltiples manuales con diferentes instrucciones de acuerdo al browser, como se explica a continuación. Se recomienda buscar un manual de JavaScript 1.5. El Quanta Plus contiene un manual de JavaScript.

Otra referencia: http://www.programmershelp.co.uk/docs/javascript/contents.html

que tiene un manual de referencia versión 1.5. Los browsers actuales corren sobre máquinas poderosas, por lo tanto, ellos

pueden hacer parte del trabajo, además de la presentación. Ejemplos: sitios WEB que tienen modelos en 3 dimensiones de proteínas, etc. y que permite ver la estructura rotando en 3 dimensiones bajo control del usuario, en una ventana del browser. Para ello se usa código que contiene controles tales como ActiveX y applets.

Las aplicaciones de e-commerce en general, no requieren de estos efectos, pero igual se puede hacer trabajo en el cliente, por ejemplo, el tratamiento de errores (para verificarlos antes de enviarlos al server) por medio de script-code, habitualmente.

El primero de estos, fue el LiveScript en 1995 (Netscape), luego fue renombrado como JavaScript.

ECMA (European Computer Manufacturers Association) en su especificación (standard) N° 262, describe un lenguaje ECMAScript como un "lenguaje de programación multiplataforma de propósitos generales". Este lenguaje fue desarrollado a partir de JavaScript 1.1, y hoy es el núcleo de los lenguajes llamados JavaScript y ECMAScript, o dicho de otra forma, es la única semejanza entre ambos.

El Internet Explorer no soporta directamente JavaScript, intenta interpretarlo a partir del lenguaje Jscript, que es la implementación de Microsoft de la recomendación ECMAScript.

JavaScript NO ES JAVA, está basado en objetos (propiedades, métodos, eventos) pero no está orientado a objetos (no tiene herencia, polimorfismo, etc.). Lo único que comparte con Java es la sintaxis y que usa objetos (salvo tipos de datos fundamentales como int o boolean). El uso de Objetos se verá junto con los forms.

Si hay funciones que se usan en varias páginas conviene agruparlas en un solo

-8-

http://www.programmershelp.co.uk/docs/javascript/netscape.html


archivo y en las páginas HTML que las usan se agrega:

Por ejemplo:

Al igual que PHP es un lenguaje con tipos débiles. El tipo de las variables se define según su contenido.

JavaScript tiene la facilidad de responder a eventos por medio de event handlers. Muchos elementos de HTML permiten asociar un evento a alguna acción, como por ejemplo, pasar el mouse sobre ellos (este evento se llama onMouseOver). HTML permite asociar un evento con una función escrita en JavaScript.

Sobre este tema se volverá al tratar forms.

EJERCICIOS : 1. Agregue rollover a su pagina de forma tal que:

a) Al pasar el cursos sobre ellos aparezca un texto de ayuda (tip). b) Al pasar sobre una imagen ésta cambie (por ejemplo una luz de apagada a encendida). En ambos casos se debe volver al estado original al abandonar el área.

PHPINTRODUCCIÓN

Toda la información de PHP (PHP Hypertext Preprocessor) puede obtenerse de http://www.php.net . La notación usada es la de PHP4.

PHP es un pre-procesador de HTML creado por Rasmus Lerdorf. En general se lo encuentra instalado junto con el Apache. También existe una versión de línea de comando (CLI, Command line interface) que se invoca como php en Linux y php-cli en Windows.

PHP Es un lenguaje cuyas instrucciones son semejante al "C", empotradas entre tags HTML, esto es, puede mezclarse con HTML y el server se encarga de pre-procesarlo y convertirlo en HTML. Hay varias formas de hacer esto y la que se usará depende de la configuración del Apache:

Cuando se invoca una página PHP desde un browser, el servidor WEB pasa el archivo correspondiente al módulo PHP. El preproceso de las instrucciones PHP genera la página que será presentada por el browser.

Para indicarle al preprocesador donde se encuentra el código PHP hay distintas formas de enmarcarlo:1) se usa en general cuando hay

poco procesamiento y es muy usada.

-9-

http://www.php.net/


2) es mas claro que el código es php.

3) y el código escrito en PHP terminando con , es el mas elegante y obligatorio en los editores de HTML que no reconocen a los dos anteriores como tags de PHP. Estos editores marcarán esa líneas como erróneas al validarlas. También se recomienda su uso cuando se combina con JavaScript u otros, para delimitar claramente las instrucciones de cada uno y así facilitar cambios futuros.

4) Para versiones anteriores a PHP 4 existía un forma compatible con ASP: , actualmente fuera de uso.

VARIABLES Por ser un lenguaje con tipado débil, las variables no deben ser declaradas, sino

que toman el tipo del valor cuando son asignadas. Para definirlas, se preceden con el símbolo “$” seguido del nombre de la

variable. El tipo de dato se establecerá según el contenido de la misma en el momento

de la asignación. Si se asigna un número entonces será un integer o double, si se le asigna una cadena de caracteres, será un string. Las variables se adaptan dinámicamente. Los tipos pueden ser:• Integers • Floating-point numbers • Strings • Arrays • Objects • Booleans

Los identificadores empiezan con $. Una variable puede tener el nombre de una variable como contenido y acceder al contenido de la primera, usando como prefijo $$.

Por ejemplo:1

Los enteros pueden ser decimales, octales ($a=023) o hexadecimales (0xcafe)

ARREGLOS (ARRAY) Y OBJETOS Los arreglos son mapas ordenados, en los cuales a cada elemento del arreglo le

corresponde una clave y un valor. Es decir, que se puede acceder al elemento por su orden en el arreglo o por su clave.

-10-


Como el arreglo es una variable, sus elementos pueden tener cualquier tipo de contenido. De esta forma se pueden generar árboles, listas, diccionarios, etc., porque no está preestablecido ni el tamaño ni el tipo de contenido de cada elemento.

Para asignar a una variable elementos que sean del tipo “array” :1.

El programa anterior puede ejecutarse usando la línea de comandos. Un ejemplo de uso de objetos:1

Nótese el uso de los $ y de las -> para referenciar las variables de instancia. $this es obligatorio en la declaración de la clase para referirse a una variable de instancia. Las funciones (o métodos) se explican mas adelante.

INSTRUCCIONES DEL LENGUAJE: Tienen dos formatos posibles:

1. similar al "C"2. propio de PHP, semejante a un pseudocódigo.

Todas las instrucciones terminan con ; (punto y coma).Las instrucciones son:

Asignación y operadores aritméticos, de strings, bitwise, boolean y de comparación: tienen la misma estructura que en el lenguaje "C", incluyendo las formas abreviadas.

if

-11-


Formato tipo "C" Formato PHPif (expresión_lógica) { instrucciones }elseif { instrucciones } else { instrucciones };

if (expresión_lógica) : instruccioneselseif : instrucciones else instruccionesendif;

switch

Formato tipo "C" Formato PHPswitch (expresión) { case expresión: instrucciones break; case ... default: instrucciones };

switch (expresión): case expresión: instrucciones break; case ... default: instrucciones endswitch;

while

Formato tipo "C" Formato PHPwhile (expresión_lógica) { instrucciones };

while (expresión_lógica) : instruccionesendwhile;

do/while

Formato único do { instrucciones }while (expresión_lógica); for

Formato tipo "C" Formato PHPfor (expr_comienzo; condición; expresión_iteración) { instrucciones };

for (expr_comienzo; condición; expresión_iteración) : instrucciones endfor;

➢ foreachFormato único

-12-


foreach (array_expression as $value) { statement}

foreach (array_expression as $key => $value) { statement}

Esta última estructura merece un ejemplo:1

FUNCIONES La funciones se declaran de una forma similar al PASCAL, su sintáxis es:

function nombre_de_la_funcion ($arg1, $arg2, $arg3, ..., $argn) { instrucciones de PHP; return $valor_de_retorno;}

Las funciones pueden devolver valores enteros simples y dobles, cadenas de caracteres, arreglos u objetos.

El pasaje de parámetros a los argumentos es por valor o por referencia, en este último caso se antepone el símbolo “&” al símbolo $ del nombre de la variable.

Una de las principales ventajas de PHP reside en la enorme cantidad de funciones pre-definidas para todo tipo de operaciones.

EJERCICIOS 1. Hacer una página Web que contenga un recuadro con la “Noticia del día”. Esta noticia debe leerse de un archivo.2. En el archivo de noticias se coloca una noticia por línea. Su programa deberá colocarlas en la página Web en forma de lista.3. Declare una clase para guardar los datos de un libro: Autor, título, precio y url . En un archivo se guardan estos datos de a uno por línea separados por “|”. Su programa deberá leer este archivo y crear una página con una sección (diseño suyo) por cada libro del archivo.

-13-


FormulariosSe usan los formularios para que el usuario pueda ingresar información que será

procesada en el servidor. El formulario es una sección del documento que contiene, además de tags de HTML, controles como textboxes, radio buttons, comboboxes, etc., que son distintos tipos de campos de ingreso de datos.

ELEMENTOS DE DIÁLOGO Para definir un formulario se usa el tag para su apertura y para

el cierre. Algunos de los atributos mas frecuentemente usados del tag son:1. NAME: se debe dar un nombre único para identificarlo. 2. ACTION: especifica la URL a la cual se enviarán los datos ingresados.3. METHOD: define el comando HTTP a través del cual serán enviados los datos. Las opciones son “GET” (se enviarán a través de la URL) o “POST” (se enviarán en la parte de datos del pedido HTTP).4. ENCTYPE: establece la forma en la cual se deberán codificar la información ingresada por el usuario, por ejemplo:

application/x-www-form-urlencoded: la forma tradicional en la cual, se enviarán los datos ingresados como: “NOMBRE_DEL_CAMPO=VALOR_INGRESADO” y separados por el signo “&”. Además, se codificarán los espacios con el signo “+” y los caracteres no alfanuméricos se codificarán como “%HH”, su código ASCII en hexadecimal. (CR LF = “%0D%0A”)

5. Los controles se definen con el tag , o .6. : se usa para que el usuario ingrese información de distintos tipos. No tiene tag de cierre. Algunos de sus atributos son:

a. TYPE: el tipo de control que podría seri. Text: textbox común

ii. Password: para ingresar un password, muestra “****” cuando se escribe en este campo)

iii. Radio: botones de opcióniv. Checkbox: botones de verificación o chequeov. File: para enviar un archivo, el browser muestra un texto seguido de un botón de Browse o Explorar, para que el usuario seleccione el archivo de entre los archivos que tiene en sus carpetas locales

vi. Hidden: el campo no se muestra al usuario, se usa como medio para pasar un parámetro o información de control de una página a la siguiente. La aplicación en el server recibe la información de este campo igual que los otros campos.

vii. Button: para ejecutar acciones a través de JavaScript

-14-


viii. Submit: botón especial para enviar los datos al server y a la aplicación especificada en la URL de ACTION

ix. Reset: restablece el formulario a sus valores por defectox. Image: cumple la misma función que Submit, pero se muestra una imagen en vez del botón. También envía los datos de las coordenadas relativas dentro del cuadro de la imagen en la cual el usuario hizo el "clic" con el Mouse

b. NAME: al igual que en el form, cada control debe tener un nombre único. Los radio buttons y checkboxes que pertenecen a un mismo grupo deben tener el mismo nombre.c. VALUE: el valor por defecto (en el caso del textbox) o el valor que será enviado al seleccionar ese radio button o checkbox. (NO SE PUEDE USAR PARA PASSWORD!)d. SIZE: define el tamaño del cuadro que dibuja en la página.e. MAXLENGTH: la cantidad máxima de caracteres permitidos para el ingreso.f. CHECKED: si el usuario no selecciona ninguna de las opciones, ésta es la opción por defecto.

7. ... : selección de una o varias opciones, llamadas comboboxes o listboxes. Algunos de sus atributos son:

a. NAMEb. SIZE: establece la cantidad de opciones visibles en un cuadro en la página. Si el tamaño es 1: se muestra un combobox, y si es mayor es un listbox.c. MULTIPLE: permite seleccionar más de una opción usando CTRL o SHIFT.d. Cada opción del select se especifica entre los tags y , que es la que se muestra en la página. Algunos de sus atributos son:

i. value: establece el valor seleccionado, ii. Selected: valor seleccionado por defecto, si no se selecciona ninguno expresamente.

e. Ejemplo:

ArgentinaUruguay

8. ...: se usa para ingresar textos largos. Algunos de sus atributos son

a. NAMEb. ROWS: cantidad de filas que serán visibles.c. COLS: cantidad de columnas visibles.

-15-


EJERCICIOS 1. En la página de donde bajó esta guía encontrará un form de prueba (comprimido para que no se ejecute en ese servidor). No funciona en forma inmediata al bajarlo. Inspecciónelo para familiarizarse con los campos de un Form. Cree un form con opciones similares.2. También encontrará un programa php (comprimido por la misma razón) que devuelve los datos de prueba que se le envíen. Bájelo, descomprímalo en su directorio ~/public_html, cambie los permisos agregándole el de ejecución (chmod +x) y modifique el Form cambiando su atributo action. El url será su host (p. ej localhost) y su nombre de usuario precedido por ~ y el nombre del archivo php (p. ej. http://localhost/~usuario/pr_form.php ) . Esta aplicación le servirá siempre que quiera saber que es lo que se está enviando desde un Form.

FORMS EN PHP Este es el form del ejemplo:

-16-

Figura 1: Form para Entrada de Datos

http://localhost/~usuario/pr_sub.phphttp://localhost/~usuario/pr_sub.php


En el ejemplo anterior se atiende al form desde un programa php como el siguiente:

1.

El documento así generado tiene muchos defectos, entre ellos el carecer de los encabezamientos necesarios. Sin embargo sirve para mostrar:

• El uso del hash $_SERVER que es creado por el Apache con el ambiente de ejecución.• El uso del hash $_REQUEST que tiene los valores enviados • El uso de la función phpinfo Pidiendo los valores de las variables.

El resultado se ve entonces en la figura 2.La tabla que aparece cortada es el resultado de phpinfo(32) que muestra las variables de ambiente. Obsérvese que se pierde el formateo de la poesía.

-17-

Figura 2: Salida del form


EJERCICIOS Usando el manual y el ejemplo indique:

1. ¿Cómo se usan los campos ocultos?2. ¿Donde se guarda el método especificado en action (GET o POST)?3. ¿Funciona este ejemplo con GET?4. ¿Qué valores se le puede pasar a phpinfo() y que significan?5. ¿Cómo cambia el funcionamiento del elemento del form SELECT si se especifica la opción MULTIPLE ?

Forms en JavaScriptHay múltiples manuales con diferentes instrucciones de acuerdo al browser,

como se explica a continuación. Se recomienda buscar un manual de JavaScript 1.5. El Quanta Plus contiene un manual de JavaScript.

Otra referencia: http://www.programmershelp.co.uk/docs/javascript/contents.html que tiene un manual de referencia versión 1.5.

Los browsers actuales corren sobre máquinas poderosas, por lo tanto, ellos pueden hacer parte del trabajo, además de la presentación. Ejemplos: sitios WEB que tienen modelos en 3 dimensiones de proteínas, etc. y que permite ver la estructura rotando en 3 dimensiones bajo control del usuario, en una ventana del browser. Para ello se usa código que contiene controles tales como ActiveX y applets.

Las aplicaciones de e-commerce en general, no requieren de estos efectos, pero igual se puede hacer trabajo en el cliente, por ejemplo, el tratamiento de errores (para verificarlos antes de enviarlos al server) por medio de script-code.

El primero de estos, fue el LiveScript en 1995 (Netscape), luego fue renombrado como JavaScript.

ECMA (European Computer Manufacturers Association) en su especificación (standard) N° 262, describe un lenguaje ECMAScript como un "lenguaje de programación multiplataforma de propósitos generales". Este lenguaje fue desarrollado a partir de JavaScript 1.1, y hoy es el núcleo de los lenguajes llamados JavaScript y ECMAScript, o dicho de otra forma, es la única semejanza entre ambos.

El Internet Explorer no soporta directamente JavaScript, intenta interpretarlo a partir del lenguaje Jscript, que es la implementación de Microsoft de la recomendación ECMAScript.

JavaScript NO ES JAVA, está basado en objetos (propiedades, métodos, eventos) pero no está orientado a objetos (no tiene herencia, polimorfismo, etc.). Lo único que comparte con Java es la sintaxis y que usa objetos (salvo tipos de datos fundamentales como int o boolean).

JAVASCRIPT EN LAS PÁGINAS HTML Los browsers manejan una representación interna de la página web a la que

llaman Document, a sus partes se las conoce como Objects. Para interoperabilidad, los nombres y las relaciones de estas partes están definidas en el Document Object

-18-

http://www.programmershelp.co.uk/docs/javascript/contents.html


Model o DOM. JavaScript tiene acceso estos objetos. A veces el editor de html los muestra en una ventana aparte.

Para incluir código JavaScript, utilizamos el tag especial:

… código JavaScript …

Si hay funciones que se usan en varias páginas conviene agruparlas en un solo archivo y en las páginas HTML que las usan se agrega: Por ejemplo:

El objeto raíz se llama “window”. Algunas de sus propiedades son

• “location” que es la URL• “document” que es el padre del documento HTML.• Cada elemento de la página inicia un nuevo nivel de nomenclatura. Los niveles se separan con un punto. Los distintos objetos se identifican por su atributo name.

VARIABLES, FUNCIONES Y EVENTOS Al igual que PHP es un lenguaje con tipos débiles. El tipo de las variables se

define según su contenido.Las funciones se declaran: function nombre_función (Arg1, Arg2, ..., Argn)Un tag del formulario puede contener el atributo onsubmit cuyo valor identifica

una función JavaScript que se debe correr. La función devuelve un valor boolean y el proceso de envío (Submit) solo se efectúa si el valor es true.

Regular ...

El código para una función JavaScript del tipo ConfirmaOrden se declara en el head de la página. A las funciones se les pueden pasar argumentos tales como forms. El código JavaScript puede acceder a los datos ingresados en los campos seleccionados de la estructura.

El siguiente fragmento ilustra parte del código de verificación:

1. 4.

-19-


5. 6. Pizza CyberMuzzarella7. 8. 9. 10.function emptyField(textObj)11.{12. if (textObj.value.length == 0) return true;13. for(var i = 0; i

36. Tamaño de la pizza37.
38. Super

Grande Mediana ...

39.
40. Su nombre41.
42. 43. 44.
45. Muchas gracias46. 47.

Cuando el usuario activa el botón Orden de compra, se produce el evento "Submit" para el formulario. El atributo onSubmit requiere que se ejecute la función ConfirmaOrden que recibe un argumento que es una referencia al formulario. La

-20-


función le pasa una referencia al campo cliente a la función auxiliar emptyField, que verifica que el string no esté vacío. Si está vacío, el browser muestra una alerta informando al usuario que faltan datos. Así también se podrían calcular precios, etc.

Notar el uso del DOM en formobj.cliente que al ser llamado se transforma en pizzaform.cliente. El objeto window se antepone por defecto, es por ello que alert es un método de window y actúa como un messagebox con un botón de ok.

Los handlers que manejen los eventos posibles de capturar para cada objeto, pueden definirse directamente dentro de los tags HTML de la siguiente forma:

Este código será ejecutado cuando ocurra el evento deseado. Los eventos pueden ser: onclick, onmouseover, onchange, onsubmit, etc., dependiendo del tipo de objeto (o tipo de tag) al cual se asocian.

EJERCICIOS 1. Haga una página Web que pida los datos a una persona, incluyendo un nombre de cuenta, una passwd y otros. Guarde los datos en un archivo.2. Haga una página que presente un SELECT con los nombres de todas las personas que entraron datos en la página anterior y pida su passwd. Si se identifica correctamente mostrar los datos, en caso contrario mostrar un error.3. Con JavaScript impida que la passwd y el nombre de la cuenta sean iguales en el ejercicio 1.4. Con JavaScript impida que olviden poner algún dato en el ejercicio 2.5. Ahora divida las páginas anteriores en tres:

1. Carga de datos.2. Presenta los nombres de cuenta y pide la passwd.3. Presenta algunos datos. Si el usuario lo quiere marca una opción y la próxima página4. Presenta el resto de los datos (use campos ocultos para pasar la información de una a otra página).

PHPLib y TemplatesEl proyecto PHPLib se encarga de crear un Framework (Conjunto de clas3es

cooperantes) para manejar sesiones en forma orientada a objetos. Un manual completo se puede encontrar en http://www.sanisoft.com/phplib/manual/ y el link para la biblioteca es http://phplib.sourceforge.net/ .

De esta extensa biblioteca usaremos únicamente los templates. Una copia del archivo que los implementa template.inc está disponible del lugar que obtuvo esta guía (posiblemente comprimido) junto con un ejemplo de uso de templates.

El objeto de esta técnica es el de separar el diseño de la salida del procesamiento de los datos.

-21-

http://phplib.sourceforge.net/http://www.sanisoft.com/phplib/manual/


ESQUEMA DE USO Para entender el uso de los templates supondremos un escenario como el

siguiente. Llamamos usuario a quien interactúa con el sistema a través del Browser. Llamamos server al programa php invocado. Conviene referirse al ejemplo que encontrará en el mismo lugar de la guía.1. El usuario rellena un form y hace submit. (Este paso es opcional.)2. El server recibe el control y lee las variables enviadas por el usuario ($_REQUEST(...)).3. El server lee un archivo template que tiene el html de la página a enviar, con lugares reservados para su reemplazo por variables (variables del tempalte escritas entre { }.). Este paso se hace con $t = new Template( ... );)4. El server genera las variables a reemplazar en el template y las reemplaza ($t->set_var(...) )5. Se envía al browser el template así generado. ($t->pparse(...))

EJEMPLO DETALLADO

-22-

Figura 3: Form de entrada de datos


A continuación se ve el ejemplo mas detallado. El formulario de entrada es el de la figura 1, donde hay suficiente variedad de elementos de diálogo para tener un panorama (en realidad es el mismo que se usó al introducir Forms).

Por otra parte, se prepara una página en respuesta a este form con variables que después van a ser reemplazadas. Estas variables se colocan entre llaves ({..}). Este template tiene la extensión ihtml pero eso no es obligatorio. Sin embargo, al usar esa extensión los browsers la reconocen y se la muestra interpretando el html como en la Figura 4.

Un programa php reemplaza las variables luego de algún procesamiento cosmético:

1.


13.$Pescados=$_REQUEST["Pescados"];14.$cant=0;15.if ($Pastas=="Si") {$cant++;}16.if ($Pescados=="Si") {$cant++;}17.if ($Carnes=="Si") {$cant++;}18.if ($Pastas=="Si") {19. $comida="las Pastas";20. $cant--;21. if ($cant==0){ $comida.=".";}22. if ($cant==1) {$comida.=" ,";}23. else {$comida.=" y ";}24.}25.if ($Pescados=="Si") {26. $comida="los Pescados";27. $cant--;28. if ($cant==0){ $comida.=".";}29. if ($cant==1) {$comida.=" y ";}30.}31.if ($Carnes=="Si") {32. $comida="las Carnes";33. $cant--;34. $comida.=".";35.}36.$t->set_var("T_Comidas",$comida);37.$t->set_var("T_Hobby",$_REQUEST["Hobbies"]);38.$poesia=htmlentities( $_REQUEST["Poesia"]);39.$t->set_var("T_Oculta",$_REQUEST["Oculto"]);40.$t->set_var("T_Poesia",$poesia);41.$t->pparse('out', 'page');

42.?>

EJERCICIO DE COMPRENSIÓN Encuentre las líneas en que se hace el siguiente procesamiento:

1. Se incluye el archivo de la clase template.2. Se prepara el template para su reemplazo. El template se llama pr-template-1.ihtml y se lo prepara en la variable page . Al objeto se accede por $t.3. Se pasa de la representación codificada internamente de acentos, eñes y demás a la definida por html.4. Se actualizan las variables del template.5. Se procesa la gramática para concordar género y número.6. Se emite el template modificado, guardado en la variable page a la Web.

La salida puede verse en la Figura 3.

-24-


CAMPOS REPETITIVOS Una última facilidad de los templates ayuda a procesar campos que deben

formatearse de la misma forma en una página; y que no se conoce a priori cuantos son.

Por ejemplo, supongamos que en una página se quieren poner los datos de algunos libros .Estos datos se encuentran en un archivo de texto como por ejemplo (archivo Libros.txt):

Tanenbaum, Andrew|Redes de Computadora 4ta ed. Gray, Neil|Web server ProgrammingJason Gilmore|A Programmer's Introduction To PHP 4.0

Y se desea que cada libro aparezca en la página en una tablaEl template se ve como en la Figura 6.

-25-

Figura 5: Salida del php+template


Pero en el html el código de la tabla está rodeado por dos “comentarios” o bloque BEGIN .. END1. 2. 3.4. 5. Libros de la Colección6. 7. 8. 9. 10.11.12.Libros Disponibles13.14.15. 16. 17. Autor18. Título19. 20. 21. 22. 23.24. 25. {Autor}

-26-

Figura 6: Template de tabla de libros


26. {Titulo}

27. 28.29. 30. 31. 32. 33.34.35.36.37.

Como se ve en la parte resaltada, hay definido un bloque cuyo nombre es linea.

EJERCICIO DE COMPRENSIÓN (2) A continuación se encuentra el programa php que procesa el archivo y el

template.1.

Eencuentre en el programa el template dónde:1. Se define un bloque de nombre lin que corresponde al bloque LINEA del html.2. Se procesa la línea del archivo para separar sus dos campos.3. Se acumulan los campos del bloque lin del template en page.4. ¿Cuáles son las instrucciones de procesamiento del archivo?.

-27-


EJERCICIOS 1. Una empresa envía un formulario de consulta de productos que pide los datos del cliente y permite elegir hasta 4 códigos de productos distintos. La empresa maneja mas de 4 productos y éstos se leen de un archivo, donde además figura una descripción corta, una larga, el stock, el precio unitario y las unidades. El cliente puede seleccionar hasta 4 productos viendo sus códigos y descripciones cortas en el formulario. Al enviar el formulario recibe como respuesta la descripción completa de cada producto seleccionado, su stock, su precio unitario y las unidades en que se adquiere este producto.}2. Hacer un formulario que le permita a la empresa mantener el archivo del ejercicio anterior, agregando productos o cambiando el stock disponible o el precio de alguno ya existente.3. Permita en el ejercicio anterior dar de baja algún producto.4. Siguiendo este modelo haga un ejemplo de facturación. Los ítems y sus descripciones están en un archivo. Se envía un primer form que pide el código del cliente y ofrece los distintos productos, permitiendo ingresar la cantidad de cada uno de ellos. Si el cliente aún no tiene código se le piden sus datos completos para la próxima compra. Luego se le muestra la factura con sus datos, los productos, su descripción y su precio unitario, el total por línea y el gran total. Si el cliente acepta se crea un archivo con los códigos, cantidades y un código de cliente. 5. Una tienda de ventas de mascotas presenta una primer página donde pregunta el tipo de mascota buscado (p. ejemplo, caninos,.felinos, conejos, pájaros, etc). Una vez elegida despliega un catálogo con los datos y las fotos de cada mascota disponible de ese tipo (diseñe un archivo con los datos, las fotos están en un subdirectorio /fotos)6. Diseñe una pantalla para mantener el archivo que Ud. diseñó en el ejercicio anterior.

-28-


7. (Require material adicional) ¿Cómo se hace una pantalla que acepte y cargue un archivo?8. (Require material adicional) ¿Cómo se mantienen los datos de usa sesión usando cookies ?

-29-

IntroducciónHistoria de HTML

HTMLFormatoComentariosImágenesTablasEjercicios:

Introducción a JavaScriptClient-Side Scripting.Ejercicios:

PHPIntroducciónVariablesArreglos (array) y ObjetosInstrucciones del lenguaje: FuncionesEjercicios

FormulariosElementos de diálogoEjerciciosForms en PHPEjercicios

Forms en JavaScriptJavaScript en las páginas HTMLVariables, funciones y eventosEjercicios

PHPLib y TemplatesEsquema de usoEjemplo detalladoEjercicio de ComprensiónCampos RepetitivosEjercicio de Comprensión (2)Ejercicios

programación web curso 2005 - 2 cmaterias.fi.uba.ar/sweb/2c-2005/html-php.pdffiuba 2005...

Documents