-
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/
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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/
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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/
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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.
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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-
-
FIUBA 2005 Programación WEBMaría Feldgen y Osvaldo Clúa
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