|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - ASP - Cookies - 1 - 2 - 3 - 4 - 5 - 6
Cookies (VI)
por Luciano Moreno, Web Master de HTMLWeb
Ejemplo práctico
Como ejercicio práctico de este capítulo vamos a crear un sistema de personalización de interfaz de usuario, que permite al mismo elegir el color de fondo de las páginas, el tipo de fuente y el tamaño de la misma. El resultado final del sistema de personalización lo tenemos en esta ventana.
La base de este sistema va a ser una página ASP de configuración, que presenta al usuario tres listas de selección para que elija los parámetros. Una vez elegidos, la página se recarga, los recoge y almacena en una cookie y configura el aspecto de la interfaz de acuerdo con ellos.
Como puede desear realizar varias pruebas hasta obtener una interfaz a su gusto, necesitamos mantener el estado de los combos en cada recarga de página, lo que conseguimos con la ayuda de unas variables que almacenan en cada momento la opción seleccionada en cada combo, volviendo a seleccionarla en cada recarga.
El código de esta página (resuelto_15.asp) es el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<%@ Language="VBScript"%>
<%
'Declaramos las variables
necesarias
Dim color, tipo, tamanio,
recogeColor, recogeTipo, recogeSize, guardaColor, guardaTipo,
guardaSize
'Recogemos los valores
almacenados en los campos ocultos del formulario
recogeColor = Request.Form("pasaColor")
recogeTipo = Request.Form("pasaTipo")
recogeSize =
Request.Form("pasaSize")
'Comprobamos si es la primera vez que se
accede a la página.
'Si lo es, inicializamos los valores a
0
'En caso de que se acceda a la página mediante el botón "Atrás",
cogemos los valores de la Cookie
'En caso de recarga de página mediante
botón de formulario, almacenamos los nuevos valores en la cookie
If recogeColor = "" And Request.Cookies("guardaColor") = ""
Then
recogeColor = 0
Elseif recogeColor = ""
And Request.Cookies("guardaColor") <> "" Then
recogeColor =
Request.Cookies("guardaColor")
Else
Response.Cookies("guardaColor") =
recogeColor
End If
If recogeTipo = "" And
Request.Cookies("guardaTipo") = "" Then
recogeTipo =
0
Elseif recogeTipo = "" And Request.Cookies("guardaTipo") <> ""
Then
recogeTipo= Request.Cookies("guardaTipo")
Else
Response.Cookies("guardaTipo") = recogeTipo
End If
If recogeSize = "" And Request.Cookies("guardaSize") = "" Then
recogeSize = 0
Elseif recogeSize = "" And
Request.Cookies("guardaSize") <> "" Then
recogeSize=
Request.Cookies("guardaSize")
Else
Response.Cookies("guardaSize") =
recogeSize
End If
'Recogemos los valores del los
select del formulario
color =
Request.Form("colorFondo")
If color = "" Then color =
Request.Cookies("colorFondo")
tipo =
Request.Form("tipoFuente")
If tipo = "" Then tipo =
Request.Cookies("tipoFuente")
tamanio =
Request.Form("sizeFuente")
If tamanio = "" Then tamanio =
Request.Cookies("sizeFuente")
'Los escribimos en la cookie
Response.Cookies("colorFondo") = color
Response.Cookies("tipoFuente")
= tipo
Response.Cookies("sizeFuente") = tamanio
color =
Request.Cookies("colorFondo")
tipo =
Request.Cookies("tipoFuente")
tamanio =
Request.Cookies("sizeFuente")
'Ahora, sólo queda rellenar
dinámicamente los estilos y los valores de los campos ocultos
'También ponemos
los combos en los valores seleccionados previamente por el usuario
%>
<html>
<head>
<title>Master
de Diseño Web. Módulo 5.15. Ejercicio resuelto 15 (I)</title>
<style type="text/css"><
BR> body{background-color:<%=color%>;font-size:<%=tamanio%>;font-family:<%=tipo%>;}
.menu,select{font-size:10px;font-family:Verdana;}
</style>
<script language="JavaScript"
type="text/javascript">
function
iniciaCombos()
{
document.forms[0].colorFondo[<%=recogeColor%>].selected=true;
document.forms[0].pasaColor.value=<%=recogeColor%>;
document.forms[0].tipoFuente[<%=recogeTipo%>].selected=true;
document.forms[0].pasaTipo.value=<%=recogeTipo%>;
document.forms[0].sizeFuente[<%=recogeSize%>].selected=true;
document.forms[0].recogeSize.value=<%=recogeSize%>;
}
</script>
</head>
<body
onload="iniciaCombos()">
<form name="preferencias"
action="resuelto_15.asp" method="post">
<table class="menu"
align="center">
<tr>
<td>Color de
fondo:</td>
<td>
<select name=
"colorFondo"onchange="document.forms[0].pasaColor.value=this.selectedIndex">
<option
value="#FFFFFF">blanco</option>
<option
value="#ffff99">amarillo</option>
<option
value="#ccff99">verde</option>
<option
value="#ffcc66">naranja</option>
</select>
</td>
<td>Tipo de fuente:</td>
<td>
<select name=
"tipoFuente"onchange="document.forms[0].pasaTipo.value=this.selectedIndex">
<option
value="Verdana">Verdana</option>
<option
value="Arial">Arial</option>
<option value="Times New Roman">Times New
Roman</option>
<option
value="Comic Sans MS">Comic Sans
MS</option>
</select>
</td>
<td>Tamaño de la fuente:</td>
<td>
<select name=
"sizeFuente"onchange="document.forms[0].pasaSize.value=this.selectedIndex">
<option
value="12px">12px</option>
<option
value="14px">14px</option>
<option
value="16px">16px</option>
<option value="18px">18px</option>
</select>
</td>
<td><input type="submit" value="actualizar"></td>
</tr>
</table>
<br><br><br><br><br>
<p
align="center"><b>En un lugar de La Mancha, de cuyo nombre no puedo
acordarme...</b></p>
<br><br><br><br><br><br>
<p
align="center"><a href="resuelto_15_2.asp">Seguir
navegando</a></p>
<input type="hidden" name="pasaColor"
value="0">
<input type="hidden" name="pasaTipo"
value="">
<input type="hidden" name="pasaSize"
value="">
</form>
</body>
</html>
Para comprobar el buen funcionamiento del sistema creamos una segunda página, que es una muestra del código a implementar en el resto de páginas del sitio. Al cargar, accede a las variables de configuración almacenadas en la cookie y presenta la interfaz de acuerdo con sus valores.
El código de esta página (resuelto_15_2.asp) es el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<%@ Language="VBScript"%>
<%
Dim
color, tipo, tamanio
color = Request.Cookies("colorFondo")
tipo = Request.Cookies("tipoFuente")
tamanio =
Request.Cookies("sizeFuente")
%>
<html>
<head>
<title>Master de Diseño Web. Módulo 5.15. Ejercicio resuelto 15
(II)</title>
<styletype="text/css"><BR> body{background-color:<%=color%>;font-size:<%=tamanio%>;font-family:<%=tipo%>;}
.menu,select{font-size:10px;font-family:Verdana;}
</style>
</head>
<body>
<br><br><br><br><br>
<p
align="center"><b>Supecalifargilísticoespialidoso</b></p>
<br><br><br><br><br><br>
<p
align="center"><a href="resuelto_15.asp">Configurar de nuevo la
interfaz</a></p>
</body>
</html>
 |