MATERIAL ADICIONAL Autor-Francisco Aragon

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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
PasswordRecovery
Este control lo podemos arrastrar a nuestro documento, al arrastrarlo ya se
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
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
Una vez rellenados los datos indicamos autenticación ninguna y guardamos.
20
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
ChangePassword
Este control lo podemos arrastrar a nuestro docume nto, al arrastrarlo ya se
22
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
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
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
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
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
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
Elegimos la página de enlace en este caso changepass.aspx
29
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
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
Este documento llevará simplemente el diseño correspondiente en el Content1

asociado a la página maestra.
32
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
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
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
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
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
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
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
-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
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>
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>
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
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
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
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

MATERIAL ADICIONAL Autor-Francisco Aragon

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

MATERIAL ADICIONAL Autor-Francisco Aragon

Hochgeladen von

Copyright:

Verfügbare Formate

Forinsur S.L.

Centro de Formación | Manual de Usuario

Material adicional MÓDULO 4 ASP.NET

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

CONFIGURACIÓN DEL SITIO ASP .net

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

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

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

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

Comprobamos que sale el siguiente mensaje y apretamos en aceptar.

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

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

Una vez agregada pulsamos atrás.

En el apartado de funciones nos aparecerá una

Ahora procedemos a crear una regla de acceso para

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

Con esto podríamos crear usuarios en el apartado

Hecho esto podemos cerrar la ventana del navegador.

En visual Studio al pulsar en el icono

CREACIÓN PÁGINA MAESTRA

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

Seguidamente en Visual Studio en el explorador de soluciones pulsando en

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

Una vez que ya tengamos el código

Aunque las imágenes aparezcan

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

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

Guardamos y comprobamos en el navegador como queda index.aspx

PÁGINA DE REGISTRO DE NUEVO USUARIO

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

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

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

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

Pulsando en Personalizar CreateUserStep convertimos toda la zona del control

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

En esta práctica dejaremos el control ASP sin

Para volver al modo normal pulsamos en

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

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

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

El control ASP CreateUserWizard aunque ya es totalmente funcional falta indicar

Seleccionamos el control CreateUserWizard y en la ventana propiedades

En el evento CreatedUser hacemos doble

Partial Class reg

Protected Sub CreateUserWizard1_CreatedUser( ByVal sender As Object,

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

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

Por tanto nos quedaría de la siguiente manera.

Partial Class reg

Protected Sub CreateUserWizard1_CreatedUser (ByVal sender As Object,

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

Para ello con el control CreateUserWizard1 seleccionado y en la ventana

Otra de las propiedades que es importante

En el apartado de usuarios del panel seguridad de

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

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

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

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

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