material adicional autor-francisco aragon

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

0

Material adicional MÓDULO 4 ASP.NET

Práctica

Creación de sitio web ASP con sistema de login y contenidos soloaccesibles para usuarios registrados.

CONFIGURACIÓN DEL SITIO ASP .net

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

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

Eliminamos el documento Default.aspx con botón derecho ratón ->eliminar ya queno lo necesitamos. El archivo web.config que se crea por defecto también loeliminamos.


1

Creamos una carpeta en la raíz del sitio llamada Miembros(ejemplo), estacarpeta contendrá los documentos web solo accesibles por usuarios registradosque 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 barrade herramientas a Sitio Web->Configuración de ASP.NETTambién podemos acceder a las opciones de configuración desde el iconosiguiente.

Al acceder a la configuración se nos abre en el navegador la herramienta deAdministración de sitios web.


2

Lo primero que hacemos es comprobar que la conexión SQL funcionacorrectamente.Para ello apretamos en la pestaña

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

Seguidamente en Prueba

Comprobamos que sale el siguiente mensaje y apretamos en aceptar.


3

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 funcionesUna vez habilitado pulsar en Crear o administrar funciones.


4

Creamos una nueva función a la que llamamos por ejemplo Miembros ypulsamos en Agregar.

Una vez agregada pulsamos atrás.

En el apartado de funciones nos aparecerá unafunción en funciones existentes.

Ahora procedemos a crear una regla de acceso paraesa función.Para ello pulsamos en Crear reglas de acceso.

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

Elegimos Usuarios Anónimos y elegimos Denegar. Para que no puedanacceder a los contenidos de esa carpeta si no están registrados y si no haniniciado sesión.Pulsamos en aceptar.


5

Con esto podríamos crear usuarios en el apartadousuarios pero la idea es que los mismos visitantes sepuedan registrar y añadir a la base de datos deusuarios.

Hecho esto podemos cerrar la ventana del navegador.

En visual Studio al pulsar en el iconoactualizar podremos comprobar como senos han creado automáticamente unabase de datos y unos archivos web.configque contienen la configuración del sitioASP.

CREACIÓN PÁGINA MAESTRA

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


6

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ñopara esa página maestra. Para ello en el explorador en el directorio de nuestrositio añadimos una carpeta con las imágenes.

Seguidamente en Visual Studio en el explorador de soluciones pulsando enactualizar, nos aparecerá la carpeta de imágenes que hayamos añadido.


7

Lo siguiente será añadir al código de la página maestra la estructura de tablashtml del diseño y el código javascript en el caso de tener alguna acción ya searollovers etc. , en el archivo comprimido en zip de esta práctica que estapara descargar en la plataforma tenéis tanto las carpetas con las imágenescomo 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 lavuestra, acordaros de poned la carpeta de imágenes en sus respectivosdirectorios 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 elintento 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 semirarán como hacerlos con Fireworks en el módulo 6.

Una vez que ya tengamos el códigointroducido comprobamos en vista diseñocomo el contenedorContentPlaceHolder1 esta fuera de laestructura de celdas de la cabecera.

Aunque las imágenes aparezcandescaudradas no os preocupeis , solo seven asi en la vista diseño.


8

PÁGINA INDICE

Creamos una página llamada index.aspx asociada a la página m aestra antescreada.Para ello en la raíz del sitio con el botón derecho del ratón elegimos agregarnuevo elemento.Elegimos web forms y pulsamos la casilla seleccionar la página principal paraasociarla 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


9

Guardamos y comprobamos en el navegador como queda index.aspxLos enlaces a las otras páginas del sitio web es preferible ponerlo al fi nal cuandoya 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 quetambién esté asociado a la pagina maestra.A partir de ahora todos los documentos que se vayan añadiendo se asociarán aesa 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 ASPllamado CreateUserWizard


10

Este control se puede arrastrar desde el cuadro de herramientas a nuestrodocumento, 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 pulsamossobre 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 deregistro completado para editarlas .


11

Pulsando en Personalizar CreateUserStep convertimos toda la zona del controlen editable.

Al convertirla en editable el código fuente para este control ASP también semodificará y se convertirá en una serie de tablas con etiquetas de formulario htmltodo 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 sinmuchas modificaciones.

Para volver al modo normal pulsamos enrestablecer.

Para poner el control ASP encima de una imagen tan solo en la celda donde locoloquemos ponemos como fondo la imagen y ya ajustamos, en el código delarchivo 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ónderecho del ratón en la celda(antes elimináis la imagen que había) y elegísESTILO, os aparecerá un cuadro donde podréis configurar el estilo de la celda.


12

En ese cuadro de opciones podéis configurar cualquier aspecto del estilo de es acelda (es como un asistente css).

En el apartado Fondo se puede establecer una imagen de fondo y el tipo derepetición si la celda se agranda.

No entraremos en este aspecto de crear estilo con esta herramienta, solo citarlopara que lo tengáis en cuenta de que existe.

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

El control ASP CreateUserWizard aunque ya es totalmente funcional falta indicarque función le queremos asignar a un usuario cuando se registre. En este casoasignarle la función Miembros que ya habíamos creado con anterioridad.

Para ello:

Seleccionamos el control CreateUserWizard y en la ventana propiedadesseleccionamos el icono eventos.


13

En el evento CreatedUser hacemos dobleclic y se nos abrirá la página de código deservidor. reg.aspx.vb

Partial Class regInherits System.Web.UI.Page

Protected Sub CreateUserWizard1_CreatedUser(ByVal sender As Object,ByVal e As System.EventArgs) Handles CreateUserWizard1.CreatedUser

End SubEnd Class

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

Roles.AddUserToRole(ctrlName.UserName, “roleName”)En ctrlName le indicamos el nombre del controlador, en este casoCreateUserWizard1

En roleName le indicamos el nombre de la funci ón que queremos asociar a esecontrol, en este caso Miembros.


14

Por tanto nos quedaría de la siguiente manera.

Partial Class regInherits 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 SubEnd Class

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

Lo siguiente será configurar el control para que después de realizar un registro deusuario se nos redireccione a una página de nuestro sitio web.

Para ello con el control CreateUserWizard1 seleccionado y en la ventanapropiedades seleccionamos el icono propiedades.

En ContinueDestinationPageUrl leasignamos una página de destinodespués del registro, por ejemplo lapágina índice index.aspx.

Otra de las propiedades que es importantepero que por defecto están activadas esLoginCreatedUser, al estar en True indicaque el usuario registrado pasa al estado desesión iniciada y por lo tanto no tiene quehacer login.


15

En el apartado de usuarios del panel seguridad deadministración del sitio podremos ver los usuariosregistrados.

La contraseña a indicar para registrarse debe ser como mínimo de 7 caracteresalfanuméricos de los cuales alguno debe ser un signo de sistema tipo admiracióno 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 nuestronombre y contraseña de usuario regi strado para iniciar sesión.

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


16


Como nos podemos fijar en este documento aparece otro control ASP nuevo.LOGINEste control lo podemos arrastrar a nuestro documento, al arrastrarlo ya seañ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 contenedorContent1 y seguidamente arrastramos el control ASP en el lugar dondequeremos que se sitúe en ese diseño.


17

Lo siguiente será configurar el control para que después de realizar un inicio desesió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 propiedadesseleccionamos el icono propiedades.

En DestinationPageUrl le asignamosuna página de destino después de iniciarsesión, por ejemplo la página índiceindex.aspx.

PÁGINA DE RESTAURACIÓN DE CONTRASEÑA

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

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


18


Como nos podemos fijar en este documento aparece otro control ASP nuevo.PasswordRecoveryEste control lo podemos arrastrar a nuestro documento, al arrastrarlo ya seañ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 nombrede usuario introducido y si aparece formula la pregunta de seguridad que conanterioridad se especificó en el registro y si es correcta se envía a la dirección decorreo del usuario una nueva contraseña.


19

Para configurar en servidor de correo SMTP tenemos primero que especificarleque cuenta de correo utilizará para mandar esa contraseña nueva a quien lasolicite, para ello

En el panel de propiedades del contro l ASP

Indicamos en MailDefinition->FROM lacuenta de correo.

Seguidamente en el panel de herramientas de administración del sitio ASP, en lapestañ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ónmediante el servidor de correo electrónico, ponerse en contacto con eladministrador de red.

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


20

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


21

Ahora si abrimos el archivo web.config de nuestro sitio

Podemos observar como figuran los datos del servidor de correo SMTP desde elcual 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 paraque un usuario pueda cambiar una contraseña poruna nueva siempre que ya tenga iniciada la sesióncomo usuario, por eso esta pagina debe estar dentrodel directorio Miembros(solo accesible por usuarioslogueados)

Creamos una nueva pagina (web form) aspx dentrodel directorio Miembros llamada changepass.aspxque también esté asociado a la pág ina maestra.


22


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


23

Hay que tener en cuenta que si se esta usando elmismo diseño de imágenes para el contenedorContent1 para este nuevo documento, se debe haceruna copia de la carpeta img(imágenes) dentro deldirectorio Miembros para que las rutas a esasimágenes sigan siendo correctas y se puedan cargaren los documentos que contenga el área restringidaMiembros.

Lo siguiente será configurar el control para que después de cambiar lacontraseña de usuario se nos redireccione a una página de nuestro sitio web.

Para ello con el control ChangePassword1 seleccionado y en la ventanapropiedades seleccionamos el icono pro piedades.

En ContinueDestinationPageUrl leasignamos una página de destinodespués de iniciar sesión, porejemplo la página índice../index.aspx

Ponemos ../ para subir de nivel yaque la actual pagina se encuentradentro del directorio Miembros.


24

Para configurar nuestro sitio para que admita contraseñas de menor grado deseguridad (por ejemplo de menos caracteres y que no sea necesario introducirningú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.SqlMembershipProvider"connectionStringName="LocalSqlServer"minRequiredPasswordLength="5"minRequiredNonalphanumericCharacters ="0"passwordStrengthRegularExpression =""/>

</providers> </membership>

Con minRequiredPasswordLength="5" indicamos el tamaño mínimo de caracteresrequerido para el password.

Con minRequiredNonalphanumericCharacters ="0" indicamos el número decaracteres no alfanuméricos (signos especiales) requeridos para el passwo rd. Eneste caso ninguno.

Con passwordStrengthRegularExpression ="" indicamos si tiene que apareceralguna expresion regular(conjunto de caracteres o signo especial) como porejemplo un @ para indicar que para un email es obligatorio que aparezca, eneste caso no indicamos nada.


25

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 nuestrositio web.Las paginas de índice, obtener cuenta, restaurar contraseña, iniciar sesión ycambio de contraseña ya los hemos creado, ahora faltaría crear las páginasrestantes.

-Página miembrosA esta página solo podrán acceder los usuarios registrados que hayan iniciadosesión.

Por esta razón crearemos un nuevo documento dentro del directorio Miembrosllamado 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 seproceda a explicarlo el proceso de para los temas importantes a tener en cuenta.


26

Lo siguiente que haremosserá crear dentro de estedocumento un enlace a lapágina de cambio decontraseña, para que losusuarios que hayaniniciado sesión puedancambiarla.

Para ello, en vista dediseño eliminamos laimagen de esa celda paraponer esa misma imagende fondo de la celda y asípoder escribir un texto deenlace a otra página.


27

Seguidamente pulsando conel botón derecho del Mousesobre el área en blancoelegimos Estilo.

En el cuadro de estilo en lasopciones de Fondoindicamos la ruta de laimagen de fondo.

Le indicamos que no se disponga en mosaico la imagen de fondo ya que solo seva a introducir un enlace que no agrandará la celda

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


28

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 dehipervínculo.


29

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


30

Ahora para cambiar el color del enlace, elegimos el enlace y pulsamos enpropiedades sobre style

En fuente indicamos el color del enlace y listo.

-Página catálogoA esta página podrán acceder todos los visitantes ya sean registrados que hayaniniciado 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 llamadocatalogo.aspx y lo asociamos a la página maestra.

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


31

Este documento llevará simplemente el diseño correspondiente en el Content1asociado a la página maestra.

-Página situaciónA esta página podrán acceder todos los visitantes ya sean registrados que hayaniniciado 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 llamadosituacion.aspx y lo asociamos a la página maestra.

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


32

Este documento llevará simplemente el diseño correspondiente en el Content1asociado a la página maestra.


33

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 elicono 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áginarestorepasss.aspx

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


34

Si tenemos alguna imagen que su finalidad sea un enlace a una cuenta de correopara enviar un email la seleccionamos.

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.


35

Ya tenemos las páginas de contenidos de nuestro sitio web, ahora no s quedaríaen la página maestra indicar los enlaces a esas páginas e indicar al usuariomediante un control ASP si ya ha iniciado sesión .

Pero antes un detalle a tener en cuenta.

Cuando un usuario ha iniciado sesión ydecide navegar por las páginas que norequieren de inicio de sesión el enlace abuscar esas páginas se hace desdedentro de la carpeta o directorioMiembros por lo que si decidimos ir aindex.aspx tomará esta direcciónMiembros/index.aspx, al no estar estapágina también dentro de miembros nosdará un error indicando que no la haencontrado.

Por ello procederemos a hacer una copiade esas páginas dentro del directorioMiembros. La página maestra no lacopiamos.

Podemos hacer una copia desde elexplorador de Windows y después enactualizando nos saldrán en elprograma copiadas.

Una vez copiadas en el programa hay que cambiar la rutas hacia la paginamaestra de la paginas copiadas para ello en la vista de código cambiamosLo 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" %>

CambiamosMasterPageFile="MasterPage.master"

PorMasterPageFile="../MasterPage.master"

<%@ Page Language="VB" MasterPageFile="../MasterPage.master"AutoEventWireup="false" CodeFile="miembros.aspx.vb"Inherits="Miembros_miembros" title="www.GlobalMetal.com" %>

www.GlobalMetal.com

www.GlobalMetal.com


36

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

Por eso esta páginas login.aspx, reg.aspx y restore.aspx que están dentro deMiembros se les puede quitar los controles ASP y en su lugar poner alguna frasetipo “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 laslí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 letiene que redireccionar a la pagina login.aspx del interior del directorio Miembrosy no a la página login.aspx de la raíz del sitio, lo mismo hay que hacer cuando unusuario complete el registro.

Para ello en la páginalogin.aspx de la raízseleccionamos el control ASPcorrespondiente y enpropiedades->DestinationPageUrlcambiamos login.aspx porMiembros/index.aspx


37

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

En ContinueDestinationPageUrl cambiamos login.aspx porMiembros/index.aspx

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

Abrimos la página maestra y en vista diseño ponemos enlaces en las imágenessiguientes de la misma forma que hemos visto anteriormente.

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


38

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 amiembros.aspx el sitio no interpretará la ruta comoMiembros/Miembros/miembros.aspxSino comoMiembros/miembros.aspx

Para la imagen catálogo ponemos un hipervínculo catalogo.aspxPara la imagen situación ponemos un hipervínculo situacion.aspx

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

-LoginStatus


39

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

En el panel de propiedades podemos especificarel texto para cada estado.

También podemos indicar otros aspectos desdepropiedades para este control.

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

-LoginName

Este control ASP es también muy sencillo, su funcionamiento consiste en nomostrar nada si no se ha iniciado sesión y si se ha iniciado muestra el nombre deusuario.


40

-LoginView

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

Si pulsamos sobre el triangulo del control podemoselegir entre los estados para insertar en cada unode ellos o una imagen o un texto o cualquierelemento 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 cadaestado.

Para añadir la imagen de sustitución lo más directo es hacerlo a través de la vistade código.

Primeramente nos aparecerá el control ASP de esta manera.

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

</asp:LoginView>


41

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 decódigo de un rollover.

<AnonymousTemplate><a href="#" onmouseout="MM_swapImgRestore()"

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


Las imágenes de sustitución se pueden hacer con Dreamweaver u otro softwarey después se copia la línea de código, hay que tener en cuenta que el rolloverhecho en dreamweaver utilice las mismas imágenes con el mismo nombre y rutaque se vayan a utilizar en el sitio web ASP para que se puedan cargar y sea máscó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 enla etiqueta body del código de la página maestra el nombre de las imágenes desustitució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 laetiqueta 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>


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 respectivoparámetro en la función de la etiqueta body)


42

En el archivo adjunto de la práctica aparecen tantos parámetros como rollovershay 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','img/index2_r7_c8.jpg','img/index2_r8_c8.jpg','img/index2_r9_ c8.jpg','img/index2_r11_c3.jpg')">

Ahora lo que queda es ponerle un hipervínculo al rollover para que nosredireccione 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 lapá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éntenemos la opción de indicarle la ruta Miembros/login.aspx , las dos opcionesfuncionarían perfectamente.

Siguiendo en la vista diseño seleccionamos el estado LoggedInTemplate , esteestado estará vacío, sin contenido.Arrastramos un control LoginStatus dentro del control LoginView en estadoLoggedInTemplate


43

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 estamanera.

<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 controlno permite esta posibilidad.

El control LoginStatus brindará la posibilidad de cerrar la sesi ón a los usuariosdotando a la imagen con un enlace para ese fin .

Al pulsar sobre se nos volverá redireccionar a la página login.aspxpara darnos la opción de volver a iniciar sesión.


44

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

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ónde correo del centro y recordad que tenéis la practica completa con todos losarchivos para descargar en la plataforma.

material adicional autor-francisco aragon

Documents