You are on page 1of 45

Forinsur S.L.

Centro de Formación | Manual de Usuario

Material adicional MÓDULO 4 ASP.NET

Práctica

Creación de sitio web ASP con sistema de login y contenidos solo


accesibles para usuarios registrados.

CONFIGURACIÓN DEL SITIO ASP .net

Para empezar crearemos un nuevo sitio web, en archivo ->nuevo sitio web, o
desde la pantalla de bienvenida.

Especificamos el tipo de sitio, el nombre del directorio del sitio web y su lenguaje
de servidor.

Eliminamos el documento Default.aspx con botón derecho ratón ->eliminar ya que


no lo necesitamos. El archivo web.config que se crea por defecto también lo
eliminamos.

0
Forinsur S.L. Centro de Formación | Manual de Usuario

Creamos una carpeta en la raíz del sitio llamada Miembros(ejemplo), esta


carpeta contendrá los documentos web solo accesibles por usuarios registrados
que hayan iniciado sesión.
Para crear carpeta botón derecho del ratón en la raíz del sitio y seleccionar -
>nueva carpeta.

Lo siguiente será configurar el sitio ASP.NET. Para ello nos dirigimos en la barra
de herramientas a Sitio Web->Configuración de ASP.NET
También podemos acceder a las opciones de configuración desde el icono
siguiente.

Al acceder a la configuración se nos abre en el navegador la herramienta de


Administración de sitios web.

1
Forinsur S.L. Centro de Formación | Manual de Usuario

Lo primero que hacemos es comprobar que la conexión SQL funciona


correctamente.
Para ello apretamos en la pestaña

Proveedor->
Seleccionar un solo proveedor para todos los datos de administración del
sitio

Seguidamente en Prueba

Comprobamos que sale el siguiente mensaje y apretamos en aceptar.

2
Forinsur S.L. Centro de Formación | Manual de Usuario

Nos dirigimos a la pestaña de seg uridad.

Seleccionamos Seleccionar tipo de autenticación

Seleccionamos el tipo de acceso desde Internet y apretamos en listo.

Seguidamente pulsamos en Habilitar funciones


Una vez habilitado pulsar en Crear o administrar funciones.

3
Forinsur S.L. Centro de Formación | Manual de Usuario

Creamos una nueva función a la que llamamos por ejemplo Miembros y


pulsamos en Agregar.

Una vez agregada pulsamos atrás.

En el apartado de funciones nos aparecerá una


función en funciones existentes.

Ahora procedemos a crear una regla de acceso para


esa función.
Para ello pulsamos en Crear reglas de acceso.

Elegimos la carpeta Miembros que es para la que queremos aplicarle esa regla
de acceso.

Elegimos Usuarios Anónimos y elegimos Denegar. Para que no puedan


acceder a los contenidos de esa carpeta si no están registrados y si no han
iniciado sesión.
Pulsamos en aceptar.

4
Forinsur S.L. Centro de Formación | Manual de Usuario

Con esto podríamos crear usuarios en el apartado


usuarios pero la idea es que los mismos visitantes se
puedan registrar y añadir a la base de datos de
usuarios.

Hecho esto podemos cerrar la ventana del navegador.

En visual Studio al pulsar en el icono


actualizar podremos comprobar como se
nos han creado automáticamente una
base de datos y unos archivos web.config
que contienen la configuración del sitio
ASP.

CREACIÓN PÁGINA MAESTRA

En la raíz del sitio con el botón derecho del ratón elegimos agregar nuevo
elemento.
Elegimos Página principal y pulsamos agregar.

5
Forinsur S.L. Centro de Formación | Manual de Usuario

Ahora procedemos a darle diseño a esa página principal.

Lo primero es añadir a la raíz de nuestro si tio la carpeta de imágenes del diseño


para esa página maestra. Para ello en el explorador en el directorio de nuestro
sitio añadimos una carpeta con las imágenes.

Seguidamente en Visual Studio en el explorador de soluciones pulsando en


actualizar, nos aparecerá la carpeta de imágenes que hayamos añadido.

6
Forinsur S.L. Centro de Formación | Manual de Usuario

Lo siguiente será añadir al código de la página maestra la estructura de tablas


html del diseño y el código javascript en el caso de tener alguna acción ya sea
rollovers etc. , en el archivo comprimido en zip de esta práctica que esta
para descargar en la plataforma tenéis tanto las carpetas con las imágenes
como los archivos con los códigos fuente de la página maestra y demás .
Solo tenéis que cortar y pegar el código fuente de la pagina maestra en la
vuestra, acordaros de poned la carpeta de imágenes en sus respectivos
directorios para que se puedan cargar en el navegador.
Para quien se pregunte como hacer un diseño con esa estr uctura y no morir en el
intento de aclararse con ese lío de tablas en h tml, que organizan las imágenes ,
que no se preocupe. Esos diseños y esas estructuras de tablas en html se
mirarán como hacerlos con Fireworks en el módulo 6.

Una vez que ya tengamos el código


introducido comprobamos en vista diseño
como el contenedor
ContentPlaceHolder1 esta fuera de la
estructura de celdas de la cabecera.

Aunque las imágenes aparezcan


descaudradas no os preocupeis , solo se
ven asi en la vista diseño.

7
Forinsur S.L. Centro de Formación | Manual de Usuario

PÁGINA INDICE

Creamos una página llamada index.aspx asociada a la página m aestra antes


creada.
Para ello en la raíz del sitio con el botón derecho del ratón elegimos agregar
nuevo elemento.
Elegimos web forms y pulsamos la casilla seleccionar la página principal para
asociarla a la página maestra.
Pulsamos en agregar y elegimos la pagina maestra MasterPage.master

Copiamos el código del archivo index.aspx de la practica del archivo.zip

8
Forinsur S.L. Centro de Formación | Manual de Usuario

Guardamos y comprobamos en el navegador como queda index.aspx


Los enlaces a las otras páginas del sitio web es preferible ponerlo al fi nal cuando
ya se tengan las demás páginas de contenidos realizados.

PÁGINA DE REGISTRO DE NUEVO USUARIO

Creamos un nuevo documento aspx en la raíz del sitio llamado reg.aspx que
también esté asociado a la pagina maestra.
A partir de ahora todos los docu mentos que se vayan añadiendo se asociarán a
esa página maestra.

Copiamos y pegamos el código fuente del archivo de la práctica en el nuestro.

Si nos fijamos tanto en el código como en la vista diseño aparece un control ASP
llamado CreateUserWizard

9
Forinsur S.L. Centro de Formación | Manual de Usuario

Este control se puede arrastrar desde el cuadro de herramientas a nuestro


documento, al arrastrarlo ya se añade el código de este control.

Para cambiar el aspecto de este control vamos a la vista diseño y pulsamos


sobre la flecha.
Nos aparecerá un menú en donde elegimos Formato automático
A continuación podremos cambiar el diseño por los determinados.

En la pestaña paso podemos elegir entre la vista de introducción de datos y la de


registro completado para editarlas .

10
Forinsur S.L. Centro de Formación | Manual de Usuario

Pulsando en Personalizar CreateUserStep convertimos toda la zona del control


en editable.

Al convertirla en editable el código fuente para este control ASP también se


modificará y se convertirá en una serie de tablas con etiquetas de formulario html
todo comprendido entre una etiqueta del control ASP.
Con la opción editar plantillas también podemos editar las secciones.

En esta práctica dejaremos el control ASP sin


muchas modificaciones.

Para volver al modo normal pulsamos en


restablecer.

Para poner el control ASP encima de una imagen tan solo en la celda donde lo
coloquemos ponemos como fondo la imagen y ya ajustamos, en el código del
archivo podéis mirar como esta la imagen de fondo.

Pero si lo que queréis es hacerlo de manera más visual, pulsá is con el botón
derecho del ratón en la celda(antes elimináis la imagen que había) y elegís
ESTILO, os aparecerá un cuadro donde podréis configurar el estilo de la celda.

11
Forinsur S.L. Centro de Formación | Manual de Usuario

En ese cuadro de opciones podéis configurar cualquier aspecto del estilo de es a


celda (es como un asistente css).

En el apartado Fondo se puede establecer una imagen de fondo y el tipo de


repetición si la celda se agranda.

No entraremos en este aspecto de crear estilo con esta herramienta, solo citarlo
para que lo tengáis en cue nta de que existe.

Después de este Kit-Kat seguimos con la tarea.

El control ASP CreateUserWizard aunque ya es totalmente funcional falta indicar


que función le queremos asignar a un usuario cuando se registre. En este caso
asignarle la función Miembros que ya habíamos creado con anterioridad.

Para ello:

Seleccionamos el control CreateUserWizard y en la ventana propiedades


seleccionamos el icono eventos.

12
Forinsur S.L. Centro de Formación | Manual de Usuario

En el evento CreatedUser hacemos doble


clic y se nos abrirá la página de código de
servidor. reg.aspx.vb

Partial Class reg


Inherits System.Web.UI.Page

Protected Sub CreateUserWizard1_CreatedUser( ByVal sender As Object,


ByVal e As System.EventArgs) Handles CreateUserWizard1.CreatedUser

End Sub
End Class

En la función del control ASP añadimos una línea de código para indicar a que
función hay que aplicar ese control.

Roles.AddUserToRole(ctrlName.UserName, “roleName”)

En ctrlName le indicamos el nombre del controlador, en este caso


CreateUserWizard1

En roleName le indicamos el nombre de la funci ón que queremos asociar a ese


control, en este caso Miembros.

13
Forinsur S.L. Centro de Formación | Manual de Usuario

Por tanto nos quedaría de la siguiente manera.

Partial Class reg


Inherits System.Web.UI.Page

Protected Sub CreateUserWizard1_CreatedUser (ByVal sender As Object,


ByVal e As System.EventArgs) Handles CreateUserWizard1.CreatedUser

Roles.AddUserToRole(CreateUserWizard1.UserName, "Miembros")

End Sub
End Class

Por tanto indicamos que todos los usuarios que se registren a través de l
controlador indicado pasarán a formar parte del grupo llamado Miembros.

Lo siguiente será configurar el control para que después de realizar un registro de


usuario se nos redireccione a una página de nuestro sitio web.

Para ello con el control CreateUserWizard1 seleccionado y en la ventana


propiedades seleccionamos el icono propiedades.

En ContinueDestinationPageUrl le
asignamos una página de destino
después del registro, por ejemplo la
página índice index.aspx.

Otra de las propiedades que es importante


pero que por defecto están activadas es
LoginCreatedUser, al estar en True indica
que el usuario registrado pasa al estado de
sesión iniciada y por lo tanto no tiene que
hacer login.

14
Forinsur S.L. Centro de Formación | Manual de Usuario

En el apartado de usuarios del panel seguridad de


administración del sitio podremos ver los usuarios
registrados.

La contraseña a indicar para registrarse debe ser como mínimo de 7 caracteres


alfanuméricos de los cuales alguno debe ser un signo de sistema tipo admiración
o interrogación por ejemplo password: 123456!
Esta premisa de seguridad en el nivel de las contraseñas se puede modificar,
más adelante lo veremos.

PÁGINA DE LOGIN

Esta página es donde se añadirá un control ASP para poder ingresar nuestro
nombre y contraseña de usuario regi strado para iniciar sesión.

Creamos una nueva pagina (web form) aspx en la raíz del sitio llamado
login.aspx que también esté asociado a la página maestra.

15
Forinsur S.L. Centro de Formación | Manual de Usuario

Copiamos y pegamos el código fuente del archivo de la práctica en el nuestro.

Como nos podemos fijar en este documento aparece otro control ASP nuevo.
LOGIN
Este control lo podemos arrastrar a nuestro documento, al arrastrarlo ya se
añade el código de este control.
Para cambiarle el aspecto se hace de la forma que ya hemos comentado antes.

Vista código

Vista diseño

Si tuviéramos nuestro propio diseño de tablas lo insertamos en el contenedor


Content1 y seguidamente arrastramos el control ASP en el lugar donde
queremos que se sitúe en ese diseño.

16
Forinsur S.L. Centro de Formación | Manual de Usuario

Lo siguiente será configurar el control para que después de realizar un inicio de


sesión de usuario se nos redireccione a una página de nuestro sitio web.

Para ello con el control Login1 seleccionado y en la ventana propiedades


seleccionamos el icono propiedades.

En DestinationPageUrl le asignamos
una página de destino después de iniciar
sesión, por ejemplo la página índice
index.aspx.

PÁGINA DE RESTAURACIÓN DE CONTRASEÑA

Esta página es donde se añadirá un control ASP para que un usuario pueda
obtener una contraseña nueva en el caso de olvidarla.

Creamos una nueva pagina (web form) aspx en la raíz del sitio llamado
restorepass.aspx que también esté asociado a la página maestra.

17
Forinsur S.L. Centro de Formación | Manual de Usuario

Copiamos y pegamos el código fuente del archivo de la práctica en el nuestro.

Como nos podemos fijar en este documento aparece otro control ASP nuevo.
PasswordRecovery
Este control lo podemos arrastrar a nuestro documento, al arrastrarlo ya se
añade el código de este control.
Para cambiarle el aspecto se hace de la forma que ya hemos comentado antes.

Su funcionamiento consiste en supervisar en la base de datos si existe el nombre


de usuario introducido y si aparece formula la pregunta de seguridad que con
anterioridad se especificó en el registro y si es correcta se envía a la dirección de
correo del usuario una nueva contraseña.
18
Forinsur S.L. Centro de Formación | Manual de Usuario

Para configurar en servidor de correo SMTP tenemos primero que especificarle


que cuenta de correo utilizará para mandar esa contraseña nueva a quien la
solicite, para ello

En el panel de propiedades del contro l ASP

Indicamos en MailDefinition ->FROM la


cuenta de correo.

Seguidamente en el panel de herramientas de administración del sitio ASP, en la


pestaña Aplicación pulsamos en donde indica la imagen.

Una vez dentro indicamos la informaci ón de ese servidor de correo.

Como dice la nota si necesitamos obtener información sobre la autenticación


mediante el servidor de correo electrónico, ponerse en contacto con el
administrador de red.

Si disponéis de una cuenta configurada Outlook solo te néis que utilizar sus datos.

19
Forinsur S.L. Centro de Formación | Manual de Usuario

Una vez rellenados los datos indicamos autenticación ninguna y guardamos.

20
Forinsur S.L. Centro de Formación | Manual de Usuario

Ahora si abrimos el archivo web.config de nuestro sitio

Podemos observar como figuran los datos del servidor de correo SMTP desde el
cual se enviarán las nuevas contraseñas que soliciten los usuarios.

PÁGINA DE CAMBIO DE CONTRASEÑA

Esta página es donde se añadirá un control ASP para


que un usuario pueda cambiar una contraseña por
una nueva siempre que ya tenga iniciada la sesión
como usuario, por eso esta pagina debe estar dentro
del directorio Miembros(solo accesible por usuarios
logueados)

Creamos una nueva pagina (web form) aspx dentro


del directorio Miembros llamada changepass.aspx
que también esté asociado a la pág ina maestra.

21
Forinsur S.L. Centro de Formación | Manual de Usuario

Copiamos y pegamos el código fuente del archivo de la práctica en el nuestro.

Como nos podemos fijar en este documento aparece otro control ASP nuevo.
ChangePassword
Este control lo podemos arrastrar a nuestro docume nto, al arrastrarlo ya se
añade el código de este control.
Para cambiarle el aspecto se hace de la forma que ya hemos comentado antes.

22
Forinsur S.L. Centro de Formación | Manual de Usuario

Hay que tener en cuenta que si se esta usando el


mismo diseño de imágenes para el contenedor
Content1 para este nuevo documento, se debe hacer
una copia de la carpeta img(imágenes) dentro del
directorio Miembros para que las rutas a esas
imágenes sigan siendo correctas y se puedan cargar
en los documentos que contenga el área restringida
Miembros.

Lo siguiente será configurar el control para que después de cambiar la


contraseña de usuario se nos redireccione a una página de nuestro sitio web.

Para ello con el control ChangePassword1 seleccionado y en la ventana


propiedades seleccionamos el icono pro piedades.

En ContinueDestinationPageUrl le
asignamos una página de destino
después de iniciar sesión, por
ejemplo la página índice
../index.aspx

Ponemos ../ para subir de nivel ya


que la actual pagina se encuentra
dentro del directorio Miembros.

23
Forinsur S.L. Centro de Formación | Manual de Usuario

Para configurar nuestro sitio para que admita contraseñas de menor grado de
seguridad (por ejemplo de menos caracteres y que no sea necesario introducir
ningún signo especial tipo de admiración o interrogación).

Abrimos el archivo web.config

El código necesario tiene que ir entre las etiquetas <system.web>

<membership>
<providers>
<remove name="AspNetSqlMembershipProvider "/>
<add name="AspNetSqlMembershipProvider "
type="System.Web.Security.SqlMemb ershipProvider"
connectionStringName ="LocalSqlServer"
minRequiredPasswordLength ="5"
minRequiredNonalphanumericCharacters ="0"
passwordStrengthRegularExpression =""/>
</providers>
</membership>

Con minRequiredPasswordLength ="5" indicamos el tamaño m ínimo de caracteres


requerido para el password.

Con minRequiredNonalphanumericCharacters ="0" indicamos el número de


caracteres no alfanuméricos (signos especiales) requeridos para el passwo rd. En
este caso ninguno.

Con passwordStrengthRegularExpression ="" indicamos si tiene que aparecer


alguna expresion regular(conjunto de caracteres o signo especial) como por
ejemplo un @ para indicar que para un email es obligatorio que aparezca, en
este caso no indicamos nada.

24
Forinsur S.L. Centro de Formación | Manual de Usuario

Código Completo
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<roleManager enabled="true" />
<authentication mode="Forms" />
<membership>
<providers>
<remove name="AspNetSqlMembershipProvider "/>
<add name="AspNetSqlMembershipProvider "
type="System.Web.Security.SqlMembershipProvider "
connectionStringName ="LocalSqlServer"
minRequiredPasswordLength ="5"
minRequiredNonalphanumericCharacters ="0"
passwordStrengthRegularExpression =""/>
</providers>
</membership>
</system.web>
<system.net>
<mailSettings>
<smtp from="localhost">
<network host="localhost" password="" userName="" />
</smtp>
</mailSettings>
</system.net>
</configuration>

PÁGINAS DE CONTENIDOS

En este paso crearemos las páginas de contenidos para complementar nuestro


sitio web.
Las paginas de índice, obtener cuenta, restaurar contraseña, iniciar sesión y
cambio de contraseña ya los hemos creado, ahora faltaría crear las páginas
restantes.

-Página miembros
A esta página solo podrán acceder los usuarios registrados que hayan iniciado
sesión.

Por esta razón crearemos un nuevo documento dentro del directorio Miembros
llamado miembros.aspx y lo asociamos a la página maestra.

Copiamos y pegamos el código fuente del archivo de la práctica aunque ahora se


proceda a explicarlo el proceso de para los temas importantes a tener en cuenta.

25
Forinsur S.L. Centro de Formación | Manual de Usuario

Lo siguiente que haremos


será crear dentro de este
documento un enlace a la
página de cambio de
contraseña, para que los
usuarios que hayan
iniciado sesión puedan
cambiarla.

Para ello, en vista de


diseño eliminamos la
imagen de esa celda para
poner esa misma imagen
de fondo de la celda y así
poder escribir un texto de
enlace a otra página.

26
Forinsur S.L. Centro de Formación | Manual de Usuario

Seguidamente pulsando con


el botón derecho del Mouse
sobre el área en blanco
elegimos Estilo.

En el cuadro de estilo en las


opciones de Fondo
indicamos la ruta de la
imagen de fondo.

Le indicamos que no se disponga en mosaico la imagen de fondo ya que solo se


va a introducir un enlace que no agrandará la celda

Le indicamos la imagen del directorio de imágenes que hay dentro de Miembros.

27
Forinsur S.L. Centro de Formación | Manual de Usuario

En Fuente podemos indicar la familia de la fuente, el color etc

En Texto indicamos una alineación horizontal del texto centrada

Ahora procedemos a crear el enlace

Escribimos el texto y le asignamos el e nlace subrayándolo y pulsando el icono de


hipervínculo.

28
Forinsur S.L. Centro de Formación | Manual de Usuario

Elegimos la página de enlace en este caso changepass.aspx

29
Forinsur S.L. Centro de Formación | Manual de Usuario

Ahora para cambiar el color del enlace, elegimos el enlace y pulsamos en


propiedades sobre style

En fuente indicamos el color del enlace y listo.

-Página catálogo
A esta página podrán acceder todos los visitantes ya sean registrados que hayan
iniciado sesión como no registrados o que no hayan iniciado sesión.

Por esta razón crearemos un nuevo documento dentro de la ra íz del sitio llamado
catalogo.aspx y lo asociamos a la página maestra.

Copiamos y pegamos el código fuente del archivo de la práctica .

30
Forinsur S.L. Centro de Formación | Manual de Usuario

Este documento llevará simplemente el diseño correspondiente en el Content1


asociado a la página maestra.

-Página situación
A esta página podrán acceder todos los visitantes ya sean registrados que hayan
iniciado sesión como no registrados o que no hayan iniciado sesión.

Por esta razón crearemos un nuevo documento dentro de la raíz del sitio llamado
situacion.aspx y lo asociamos a la página maestra.

Copiamos y pegamos el código fuente del archivo de la práctica.

31
Forinsur S.L. Centro de Formación | Manual de Usuario

Este documento llevará simplemente el diseño correspondiente en el Content1


asociado a la página maestra.

32
Forinsur S.L. Centro de Formación | Manual de Usuario

Lo siguiente será indicar los enlaces en la página de índice.

Abrimos index.aspx y en la vista de diseño seleccionamos cada imagen y con el


icono de hipervínculo le indicamos el enlace.

Para la imagen obtener cuenta se indica el enlace a la página reg.aspx

Para la imagen restaurar password se indica el enlace a la página


restorepasss.aspx

Para la imagen iniciar sesion se indica el enlace a la página login.aspx

33
Forinsur S.L. Centro de Formación | Manual de Usuario

Si tenemos alguna imagen que su finalidad sea un enlace a una cuenta de correo
para enviar un email la s eleccionamos.

En el icono de hipervínculo lo pulsamos e indicamos la dirección de correo.

Pueden asignarse hipervínculos también a rollovers de la misma manera.

34
Forinsur S.L. Centro de Formación | Manual de Usuario

Ya tenemos las páginas de contenidos de nuestro sitio web, ahora no s quedaría


en la página maestra indicar los enlaces a esas páginas e indicar al usuario
mediante un control ASP si ya ha iniciado sesión .

Pero antes un detalle a tener en cuenta.

Cuando un usuario ha iniciado sesión y


decide navegar por las páginas que no
requieren de inicio de sesión el enlace a
buscar esas páginas se hace desde
dentro de la carpeta o directorio
Miembros por lo que si decidimos ir a
index.aspx tomará esta dirección
Miembros/index.aspx , al no estar esta
página también dentro de miembros nos
dará un error indicando que no la ha
encontrado.

Por ello procederemos a hacer una copia


de esas páginas dentro del directorio
Miembros. La página maestra no la
copiamos.

Podemos hacer una copia desde el


explorador de Windows y después en
actualizando nos saldrán en el
programa copiadas.

Una vez copiadas en el programa hay que cambiar la rutas hacia la pagina
maestra de la paginas copiadas para ello en la vista de código cambiamos
Lo siguiente

En la primera línea
<%@ Page Language="VB" MasterPageFile="MasterPage.master"
AutoEventWireup="false" CodeFile="miembros.aspx.vb"
Inherits="Miembros_miembros" title="www.GlobalMetal.com" %>

Cambiamos
MasterPageFile="MasterPage.master"

Por
MasterPageFile="../MasterPage.master"

<%@ Page Language="VB" MasterPageFile="../MasterPage.master"


AutoEventWireup="false" CodeFile="miembros.aspx.vb"
Inherits="Miembros_miembros" title="www.GlobalMetal.com" %>

35
Forinsur S.L. Centro de Formación | Manual de Usuario

Se podría hacer que las páginas login.aspx, reg.aspx y restore.aspx que están
dentro del directorio Miemb ros no llevasen el control ASP correspondiente ya que
no tiene mucho sentido que un usuario que ya haya iniciado sesión tenga acceso
a hacer una cuenta de usuario , iniciar sesión otra vez o recuperar una
contraseña.

Por eso esta páginas login.aspx, reg.aspx y restore.aspx que están dentro de
Miembros se les puede quitar los controles ASP y en su lugar poner alguna frase
tipo “usted ya ha iniciado sesión, cierre sesión para registrarse con otra cuenta”
por ejemplo.

IMPORTANTE: si quitamos el control ASP d e reg.aspx también se debe quitar las


líneas de código del archivo reg.aspx.vb

Para que esto también haga efecto un usuario que vaya ha iniciar sesión se le
tiene que redireccionar a la pagina login.aspx del interior del directorio Miembros
y no a la página login.aspx de la raíz del sitio, lo mismo hay que hacer cuando un
usuario complete el registro.

Para ello en la página


login.aspx de la raíz
seleccionamos el control ASP
correspondiente y en
propiedades-
>DestinationPageUrl
cambiamos login.aspx por
Miembros/index.aspx

36
Forinsur S.L. Centro de Formación | Manual de Usuario

Hacemos lo mismo con reg.aspx de la raíz en las propiedades del control ASP
CreateUserWizard1

En ContinueDestinationPageUrl cambiamos login.aspx por


Miembros/index.aspx

Ahora falta la guinda del pastel que es ind icar en la página maestra los enlaces a
las páginas de contenidos e indicar al usuario mediante un control ASP si ya ha
iniciado sesión.

Abrimos la página maestra y en vista diseño ponemos enlaces en las imágenes


siguientes de la misma forma que hemos visto anteriormente.

Elegimos las páginas de la raíz del sitio menos en la imagen miembros que
elegimos la pagina miembros.aspx que está dentro del directorio Miembros.

37
Forinsur S.L. Centro de Formación | Manual de Usuario

En la vista de código de la página maestra añadimos en el e nlace

runat="server"

<a href="Miembros/miembros.aspx" runat="server"………

De esta manera no al estar con la sesión iniciada en index.aspx al volver a


miembros.aspx el sitio no interpretará la ruta como
Miembros/Miembros/miembros.aspx
Sino como
Miembros/miembros.aspx

Para la imagen catálogo ponemos un hipervínculo catalogo.aspx


Para la imagen situación ponemos un hipervínculo situacion.aspx

Para el tema de que los usuarios sepan en todo momento su estado (iniciado o
no sesión) podemos utilizar vario s controles ASP.

-LoginStatus

38
Forinsur S.L. Centro de Formación | Manual de Usuario

Este control nos indica mediante texto si hemos o no iniciado sesión. En el caso
que no hayamos iniciado sesión nos este mismo control sirve de enlace a la
página que haya sido nombrada como login.aspx (por defecto red irecciona a
esta) y si ya hubiésemos iniciado sesión nos aporta un enlace para finalizar
sesión.

En el panel de propiedades podemos especificar


el texto para cada estado.

También podemos indicar otros aspectos desde


propiedades para este control.

Es el más simple de los controles para indicar el


estado.

-LoginName

Este control ASP es también muy sencillo, su funcionamiento consiste en no


mostrar nada si no se ha iniciado sesión y si se ha iniciado muestra el nombre de
usuario.

39
Forinsur S.L. Centro de Formación | Manual de Usuario

-LoginView

Este es el control más completo ya que podemos usarlo para mostrar cualquier
elemento para cada uno de los estados.

Si pulsamos sobre el triangulo del control podemos


elegir entre los estados para insertar en cada uno
de ellos o una imagen o un texto o cualquier
elemento incluso otros controles ASP.

AnonymousTemplate: hace referencia al estado de sesi ón no iniciada.


LoggedInTemplate: hace referencia al estado de sesi ón iniciada.

En esta práctica se ha añadido una imagen de sustitución(rollover) para cada


estado.

Para añadir la imagen de sustituci ón lo más directo es hacerlo a trav és de la vista


de código.

Primeramente nos aparecerá el control ASP de esta manera.

<asp:LoginView ID="LoginView1" runat="server">

</asp:LoginView>

40
Forinsur S.L. Centro de Formación | Manual de Usuario

Entre las etiquetas del control ASP añadimos las etiquetas para cada estado

<asp:LoginView ID="LoginView1" runat="server">


<AnonymousTemplate>

</AnonymousTemplate>

<LoggedInTemplate>

</LoggedInTemplate>
</asp:LoginView>

Dentro de las etiquetas para el estado AnonymousTemplate añadimos la línea de


código de un rollover.

<AnonymousTemplate>
<a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image56','','img/index4_r2_c10.jpg',1)"> <img
src="img/index1_r2_c10.jpg" alt="INICIAR SESION" name="Image56"
width="125" height="34" border="0" id="Image56" /></a>
</AnonymousTemplate>

Las imágenes de sustitución se pueden hacer con Dreamweaver u otro software


y después se copia la línea de código, hay que tener en cuenta que el rollover
hecho en dreamweaver utilice las mismas imágenes con el mismo nombre y ruta
que se vayan a utilizar en el sitio web ASP para que se puedan cargar y sea más
cómodo pasar el código de un programa a otro.

Lo único que queda para que las imágenes de sustitución funcionen es copiar en
la etiqueta body del código de la página maestra el nombre de las imágenes de
sustitución para que el código javascript haga su funci ón.

Añadimos los siguientes parámetros separados por coma a la función de la


etiqueta body.

<AnonymousTemplate>
<a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image56','', 'img/index4_r2_c10.jpg' ,1)"><
img src="img/index1_r2_c10.jpg" alt="INICIAR SESION" name="Image56"
width="125" height="34" border="0" id="Image56" /></a>
</AnonymousTemplate>

En la etiqueta body tendría que añadirse así:

<body background="img/background.jpg"
onload="MM_preloadImages( 'img/index4_r2_c10.jpg' )">

En la etiqueta body pueden llegar a parecer más parámetros en la función

RECUERDA(para cada rollover de una p ágina hay que añadirle su respectivo


parámetro en la función de la etiqueta body)

41
Forinsur S.L. Centro de Formación | Manual de Usuario

En el archivo adjunto de la pr áctica aparecen tantos parámetros como rollovers


hay en la página maestra y demás.

<body background="img/background.jpg"
onload="MM_preloadImages('img/index2_r4_c5.jpg','img/index2_r4_c6.jpg','
img/index2_r4_c7.jpg','img/index2_r4_c9.jpg','img/index4_r2_c10.jpg','im
g/index2_r7_c8.jpg','img/index2_r8_c8.jpg','img/index2_r9_ c8.jpg','img/i
ndex2_r11_c3.jpg')">

Ahora lo que queda es ponerle un hipervínculo al rollover para que nos


redireccione a la página para iniciar sesión

Para ello ponemos la vista diseño , y en el estado AnonymousTemplate,


seleccionamos la imagen, pulsamos sobre el icono de hipervínculo y indicamos la
página a la que nos tiene que mandar para iniciar sesión.
En este caso le indicamos la página de login.aspx de la raíz del sitio. También
tenemos la opción de indicarle la ruta Miembros/login.aspx , las dos opciones
funcionarían perfectamente.

Siguiendo en la vista diseño seleccionamos el estado LoggedInTemplate , este


estado estará vacío, sin contenido.
Arrastramos un control LoginStatus dentro del control LoginView en estado
LoggedInTemplate

42
Forinsur S.L. Centro de Formación | Manual de Usuario

Seleccionamos el control ASP LoginStatus y en el panel


Propiedades->LogoutImageUrl indicamos una imagen

Esta imagen sólo se mostrará en el estado de sesión iniciada.

Dentro de las etiquetas para el estado LoggedInTemplate quedaría de esta


manera.

<LoggedInTemplate>
<asp:LoginStatus ID="LoginStatus1" runat="server"
LogoutImageUrl="img/index5_r2_c10.jpg" />
</LoggedInTemplate>

En el control LoginStatus no podremos introducir un rollover ya que este control


no permite esta posibilidad.

El control LoginStatus brindará la posibilidad de cerrar la sesi ón a los usuarios


dotando a la imagen con un enlace para ese fin .

Al pulsar sobre se nos volverá redireccionar a la página login.aspx


para darnos la opción de volver a iniciar sesi ón.

43
Forinsur S.L. Centro de Formación | Manual de Usuario

Y con esto ya tendríamos listo nuestro sitio web con controles ASP de registro de
usuarios.

Si quisiéramos eliminar algún usuario o crearlo desde el panel de Administración,


lo podemos hacer desde la pestaña Seguridad.

Y esto es todo para cualquier duda utilizad el foro de la plataforma o la dirección


de correo del centro y recordad que tenéis la practica completa con todos los
archivos para descargar en la plataforma.

44