Apunte y Ejercicios

Programación WEB
Curso 2005 - 2 C
Introducción HTML y PHP
Prof.. María Feldgen
Ing. Osvaldo Clúa
FIUBA
Contenido
Introducción.........................................................................................................................................2
Historia de HTML..........................................................................................................................2
HTML..................................................................................................................................................3
Formato...........................................................................................................................................4
Comentarios....................................................................................................................................5
Imágenes.........................................................................................................................................5
Tablas..............................................................................................................................................5
Ejercicios:.......................................................................................................................................7
Introducción a JavaScript....................................................................................................................8
Client-Side Scripting......................................................................................................................8
Ejercicios:.......................................................................................................................................9
PHP......................................................................................................................................................9
Introducción....................................................................................................................................9
Variables........................................................................................................................................10
Arreglos (array) y Objetos............................................................................................................10
Instrucciones del lenguaje: ...........................................................................................................11
Funciones......................................................................................................................................13
Ejercicios......................................................................................................................................13
Formularios........................................................................................................................................14
Elementos de diálogo....................................................................................................................14
Ejercicios......................................................................................................................................16
Forms en PHP...............................................................................................................................16
Forms en JavaScript..........................................................................................................................18
JavaScript en las páginas HTML..................................................................................................18
Variables, funciones y eventos.....................................................................................................19
PHPLib y Templates..........................................................................................................................21
Esquema de uso............................................................................................................................22
Ejemplo detallado.........................................................................................................................22
Ejercicio de Comprensión.............................................................................................................24
Campos Repetitivos......................................................................................................................25
Ejercicio de Comprensión (2).......................................................................................................27
Ejercicios......................................................................................................................................28
-1-
FIUBA 2005
Programación WEB
Marí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-
FIUBA 2005
Programación WEB
Marí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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
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-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
Formato
<TAG atributo1=”valor1”
atributo2=”valor2”>CONTENIDO</TAG>
Los tags son case-insensitive.
Como ejemplo, veamos un documento o página HTML sencilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<HTML lang="es">
<head>
<title>Primer HTML</title>
</head>
<body bgcolor="white">
<font color=”blue”><i>Hola Mundo!<br />Este es un
ejemplo.</i></font>
</body>
</HTML>
•
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 <HTML> 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 </HTML> 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 <HEAD>, 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 <TITLE> se colocará el título de la página, que se cerrará
mediante </TITLE>.
•
El tag <body> 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 WEB
María Feldgen y Osvaldo Clúa
Comentarios
En HTML los comentarios se deberán encerrar entre “<!--“ y “-->”.
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.
<META http-equiv=”Content-Type” content=”text/HTML;
charset=EUC-JP” />
Imágenes
Para utilizar imágenes en nuestras páginas usamos el tag <IMG> 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).
<IMG src=”imágenes/foto1.jpg” width=”20” height=”30”
align=”center” />
Tablas
Las tablas se usan para ordenar y alinear el texto en filas y columnas.
Los tags que definen una tabla son:
<TABLE>: comienza una tabla y termina con </TABLE>.
1. Algunos de los atributos del tag de comienzo son:
-5-
FIUBA 2005
Programación WEB
Marí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. <THEAD>: comienza las líneas que son los títulos de las columnas, si tiene y
termina con </THEAD> . 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. <TR> y termina con </TR>: 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. <TH> y termina con </TH>: define el titulo de una columna tiene los
mismos atributos que <TD>
3. <TBODY> y termina con </TBODY>: indica la información que contienen
la tabla. Este tag contiene los siguientes tags:
a. <TR> y termina con </TR> ver 2. a)
b. <TD> y termina con </TD>: 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. <TABLE border=”1” cellpadding=”5” cellspacing=”0”
width=”100%” summary=”Calificaciones de los alumnos
para el primer parcial”>
2. <thead>
3. <tr>
4. <th colspan=”2”>PRIMER PARCIAL – NOTAS</th>
5. </tr>
6. <tr>
-6-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
7. <th width=”60%”><b>Nombre</b></th>
8. <th width=”40%”><b>Nota</b></th>
9. </tr>
10. </thead>
11. <tbody>
12. <tr>
13. <td>Juan Pérez</td>
14. <td>5</td>
15. </tr>
16. <tr>
17. <td>Julieta Díaz</td>
18. <td>4</td>
19. </tr>
20. </tbody>
21.</table>
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 BODY
4. 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
<P..> <HR> <BR>
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 WEB
Marí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 JAVASCRIPT
CLIENT-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-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
archivo y en las páginas HTML que las usan se agrega:
<SCRIPT
SRC=”URL_del_archivo_javascrip” />
LANGUAGE=”JavaScript”
Por ejemplo:
<SCRIPT LANGUAGE=”JavaScript” SRC=”funciones.js” />
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.
PHP
INTRODUCCIÓ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 phpcli 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) <? y el código escrito en PHP, terminando con ?> se usa en general cuando hay
poco procesamiento y es muy usada.
-9-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
2) <?php y el código escrito en PHP y terminando con ?> es mas claro que el
código es php.
3) <script languaje="php"> y el código escrito en PHP terminando con </script>,
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:
<% código %>, 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
2
3
4
5
<?php
$mivariable = 1;
$var = 'mivariable';
echo $$var,"\n";
?>
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 WEB
Marí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. <?php
2. $matriz = array("listauno" => 1, "2" => array(3 =>
1, 4 => “b”));
3. echo $matriz[listauno]."\n";
4. echo $matriz [2][3]." \n";
5. ?>
El programa anterior puede ejecutarse usando la línea de comandos.
Un ejemplo de uso de objetos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
class gato{
var $Nombre;
function gato($s){
$this->Nombre=$s;
}
function maulla(){
return "miau";
}
}
$f1=new gato("Garfield");
echo "El nombre del gato es ", $f1->Nombre," \n";
echo $f1->Nombre, " maullando: ",$f1->maulla(),"\n";
?>
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 WEB
María Feldgen y Osvaldo Clúa
Formato tipo "C"
if (expresión_lógica) {
instrucciones
}
elseif {
instrucciones }
else {
instrucciones };
Formato PHP
if (expresión_lógica) :
instrucciones
elseif :
instrucciones
else
instrucciones
endif;
 switch
Formato tipo "C"
switch (expresión) {
case expresión:
instrucciones
break;
case ...
default:
instrucciones
};
 while
Formato tipo "C"
while (expresión_lógica) {
instrucciones
};
Formato PHP
switch (expresión):
case expresión:
instrucciones
break;
case ...
default:
instrucciones
endswitch;
Formato PHP
while (expresión_lógica) :
instrucciones
endwhile;
 do/while
Formato único
do {
instrucciones
}while (expresión_lógica);
 for
Formato tipo "C"
for (expr_comienzo;
condición;
expresión_iteración) {
instrucciones
};
➢
Formato PHP
for (expr_comienzo;
condición;
expresión_iteración) :
instruccion
es
endfor;
foreach
Formato único
-12-
FIUBA 2005
Programación WEB
Marí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
2
3
4
5
6
<?
$menu = array("pasta", "bife", "ensalada",
"pescado", "papas fritas");
foreach ($menu as $item) {
print "$item \n";
}
?>
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 WEB
María Feldgen y Osvaldo Clúa
Formularios
Se 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 <form> para su apertura y </form> para
el cierre. Algunos de los atributos mas frecuentemente usados del tag <form> 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 <input>, <select> o <textarea>.
6. <INPUT>: 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 ser
i. Text: textbox común
ii. Password: para ingresar un password, muestra “****”
cuando se escribe en este campo)
iii. Radio: botones de opción
iv. Checkbox: botones de verificación o chequeo
v. 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 WEB
Marí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 defecto
x. 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. <SELECT> ... </SELECT>: selección de una o varias opciones,
llamadas comboboxes o listboxes. Algunos de sus atributos son:
a. NAME
b. 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 <OPTION> y
</OPTION>, 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:
<SELECT name=”pais” size=”1”>
<option value=”AR”>Argentina</option>
<option value=”UR”>Uruguay</option>
</SELECT>
8. <TEXTAREA>...</TEXTAREA>: se usa para ingresar textos largos.
Algunos de sus atributos son
a. NAME
b. ROWS: cantidad de filas que serán visibles.
c. COLS: cantidad de columnas visibles.
-15-
FIUBA 2005
Programación WEB
Marí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:
Figura 1: Form para Entrada de Datos
-16-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
En el ejemplo anterior se atiende al form desde un programa php como el
siguiente:
1. <?php
2. echo "Se llamo a ".$_SERVER["REQUEST_URI"].
3.
" con ".$_SERVER["REQUEST_METHOD"]."<br>\n";
4. echo "El path del script es
".$_SERVER["PATH_TRANSLATED"],"<br>\n";
5. foreach ($_REQUEST as $k => $val){
6.
echo '$_REQUEST['.$k.']=>'.$val."<br>\n";
7. }
8. phpinfo(32); // 32 -> predefined variables
9. ?>
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.
Figura 2: Salida del form
-17-
FIUBA 2005
Programación WEB
Marí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 JavaScript
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.
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-
FIUBA 2005
Programación WEB
Marí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:
<SCRIPT LANGUAGE=”JavaScript”>
… código JavaScript …
</SCRIPT>
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:
<SCRIPT LANGUAGE=”JavaScript” SRC=”URL_del_archivo_javascrip” />
Por ejemplo:
<SCRIPT LANGUAGE=”JavaScript” SRC=”funciones.js” />
•
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.
<form action = "http://www.xx.yy/orden.cgi name = pizzaform
onsubmit ="return confirmaOrden(pizzaform)
method = POST>
Regular <input type = radio name=p_size value=reg>
...
</form>
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.
2.
3.
4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<HTML>
-19-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
5.
6.
7.
8.
<HEAD>
<TITLE>Pizza CyberMuzzarella</TITLE>
<META name="GENERATOR" content="Quanta Plus">
<META http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
9.
<SCRIPT type="text/javascript" language="JavaScript1.3">
10.function emptyField(textObj)
11.{
12.
if (textObj.value.length == 0) return true;
13.
for(var i = 0; i<textObj.value.length; i++) {
14.
ch = textObj.value.charAt(i);
15.
if (ch != ' ' && ch != '\t') return false;
16.
}
17. return true;
18.}
19.function confirmaOrden(formObj)
20.{
21.
if (emptyField(formObj.cliente) ) {
22.
alert("Ud. se olvidó de ingresar su nombre");
23.
return false;
24.
}
25.
// verificaciones similares para los otros campos
26. return true;
27.}
28.</SCRIPT>
29. </HEAD>
30. <BODY>
31.
<H1>
32.
Formulario para Ordenar una Pizza
33.
</H1>
34.
<BR>
35.
<FORM name="pizzaform" onsubmit="return
confirmaOrden(pizzaform)"
action="http://localhost/~micho/pr_form.php" method="POST"
enctype="application/x-www-form-urlencoded">
36.
Tamaño de la pizza
37.
<BR>
38.
Super<INPUT type = radio name=p_size value=sup>
Grande<INPUT type = radio name=p_size value=gde> Mediana<INPUT
type = radio name=p_size value=med> ...
39.
<BR>
40.
Su nombre<INPUT type=text size=20 name=cliente>
41.
<BR>
42.
<INPUT type=submit value="Orden de compra">
43.
</FORM>
44.
<BR>
45.
Muchas gracias
46. </BODY>
47.</HTML>
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 WEB
Marí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:
<TAG ATRIBUTOX=”VALORX” …. ONEVENTO=”código javascript” />
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ágina
4. Presenta el resto de los datos (use campos ocultos para pasar la
información de una a otra página).
PHPLib y Templates
El 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-
FIUBA 2005
Programación WEB
Marí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
Figura 3: Form de entrada de datos
-22-
FIUBA 2005
Programación WEB
Marí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.
Figura 4: Template con las variables
Un programa php reemplaza las variables luego de algún procesamiento
cosmético:
1. <?php
2. include("template.inc");
3. $t = new Template(".", "keep");
4. $t->set_file('page', " ");
5. $nom=htmlentities($_REQUEST["Nombre"]);
6. $t->set_var("T_Nombre",$nom);
7. $sec=htmlentities($_REQUEST["Secreto"]);
8. $t->set_var("T_Secreto",$sec);
9. $t->set_var("T_Golosinas",$_REQUEST["Golosinas"]);
10.$comida="ninguna de las opciones".
11.$Pastas=$_REQUEST["Pastas"];
12.$Carnes=$_REQUEST["Carnes"];
-23-
FIUBA 2005
Programación WEB
Marí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 prtemplate-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 WEB
María Feldgen y Osvaldo Clúa
Figura 5: Salida del php+template
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 Programming
Jason Gilmore|A Programmer's Introduction To PHP 4.0
Y se desea que cada libro aparezca en la página en una tabla
El template se ve como en la Figura 6.
-25-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
Figura 6: Template de tabla de libros
Pero en el html el código de la tabla está rodeado por dos “comentarios” o
bloque BEGIN .. END
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2. <HTML>
3.
4. <HEAD>
5.
<TITLE>Libros de la Colección</TITLE>
6.
<META name="GENERATOR" content="Quanta Plus">
7.
<META name="AUTHOR" content="Clua-Feldgen">
8.
<META http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
9. </HEAD>
10.<BODY bgcolor="#c6ffcc" text="#8b0000">
11.<H1 align="center"><STRONG><H1>
12.Libros Disponibles
13.</H1></STRONG></DIV>
14.<TABLE width="80%" border="2" align="center"
bgcolor="#d0d0d0">
15. <THEAD>
16.
<TR>
17.
<TH>Autor</TH>
18.
<TH>Título</TH>
19.
</TR>
20. </THEAD>
21. <TBODY>
22.
<TR>
23.<!-- BEGIN LINEA -->
24.
<TR>
25.
<TD align="left" valign="middle">{Autor}</TD>
-26-
FIUBA 2005
Programación WEB
María Feldgen y Osvaldo Clúa
26.
<TD align="left"
valign="middle">{Titulo}</TD>
27.
</TR>
28.<!-- END LINEA -->
29.
<TD></TD>
30.
<TD></TD>
31.
</TR>
32. </TBODY>
33.</TABLE>
34.
35.
36.</BODY>
37.</HTML>
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. <?php
2. include("template.inc");
3. $t = new Template(".", "keep");
4. $t->set_file('page', "Libros.ihtml");
5. $arch=fopen("Libros.txt","r");
6. $lee=fgets($arch);
7. // set_block (Template,Bloque,Nombre)
8. $t->set_block('page','LINEA','lin');
9. while (!feof($arch)){
10.
$li=explode("|",$lee);
11.
$t->set_var("Autor",$li[0]);
12.
$t->set_var("Titulo",$li[1]);
13.
// parse (Nombre,Bloque,Append)
14.
$t->parse('lin','LINEA',true);
15.
$lee=fgets($arch);
16.}
17.$t->pparse('out','page');
18.?>
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 WEB
Marí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 WEB
Marí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-