07 - Ejercicio Práctico Parte 1

NOTA: En la sección de MasterPage, se explica como hacer la Página maestra y definir sus estilos. Recomiendo hacer todo el manual desde cero, así podrán entender el comportamiento completo

CREAR PÁGINA DE INGRESO AL SISTEMA (LOGIN).

Existen dos formas para definir el ingreso de usuarios a una aplicación, estas formas son:

Utilizando el MenberShip que provee el administrador de configuración de asp.net.

Definiendo un formulario de entrada y configurando el web.config para que administre el inicio de sesión.

Crear inicio de sesión utilizando las herramientas de Configuración de asp.net

1. Seleccionar la opción Configuración de asp.net, que aparece en el explorador de soluciones o en desde el menú (Sitio Web > Configuración de asp.net). Con esto se abrirá el configurador de asp.net.

2. En el configurador de asp.net seleccionar la opción seguridad.

3. En la opción de usuarios, seleccionar la opción “Seleccionar tipo de autenticación”.

4. En la interfaz de tipo de autenticación, seleccionar “Desde Internet” y presionar el botón que tiene la etiqueta “Listo”.

5. Esto hará que se modifique el archivo web.config, cambiando el tipo de autenticación a forms, como se observa a continuación:

<authentication mode="Forms" />

6. En el administrador de asp.net, se observará que se han creado dos opciones adicionales:

Crear usuario

Administrar usuarios.

7. Ingresaremos a la opción crear usuario, que permitirá definir un nuevo usuario de inicio de sesión.

8. En la aplicación, agregaremos un formulario master que será una copia del formulario master que hemos creado con el menú, al cual nombraremos MasterPageII.master.

9. Dentro de la nueva masterpage que se ha creado retiraremos el menú.

10. Insertaremos el control LoginStatus y el control LoginName a la página master.

11. En las propiedades del control LoginStatus realizaremos los siguientes cambios:

LoginImageUrl = Entrada.jpg

LogoutImageUrl = Salir.jpg

12. Agregaremos un nuevo formulario al cual llamaremos frmInicio.aspx y definiremos este como formulario de entrada

13. En este formulario agregaremos un control label al cual llamaremos lblMensaje.

14. En el método que atiende el evento load del formulario agregaremos las siguientes líneas de código:

If User.Identity.IsAuthenticated Then

Me.lblMensaje.Text = "Ha ingresado a la aplicacion"

Me.lblMensaje.Visible = True

Else

Me.lblMensaje.Visible = False

End If

15. Crearemos un formulario con el nombre login.aspx, al cual agregaremos un control login, desde el cuadro de herramientas.

Ejecutaremos la aplicación y se desplegará la página de la siguiente forma:

1. Hacer clic sobre la imagen, la cual automáticamente redireccionará a la página de login, como se muestra en la siguiente figura:

1. Ingresaremos las credenciales definidas en el administrador de asp.net y presionaremos el botón inicio de sesión.

1. Como se puede observa, aparece el usuario que esta logeado y el mensaje que se ha definido en el label que se ha incluido en la página.

Si se hace un clic en la imagen salir, se volverá a la página inicial que se ha definido para esta sección.

Crear un formulario de entrada a la aplicación.

Este ejercicio está orientado a definir una página de ingreso a la aplicación, la cual permitirá validar a un usuario contra un registro en base de datos y si sus datos coinciden, dejarlo ingresar a la aplicación. Para ello se deben seguir los siguientes pasos:

1. Crearemos una nueva página maestra llamada MasterPageIII.master, la cual estará definida con el mismo formato que la página MasterPageII.master.

2. Quitaremos los controles LoginStatus y LoginName del formulario.

3. Agregar a la solución un formulario, escogiendo la plantilla MasterPageIII.master que hemos definido. Este formulario tendrá el nombre frmLogin.aspx, quedando de la siguiente forma:

1. En el formulario creado, agregaremos una tabla con 3 columnas y 5 filas, en la sección del Contet1, heredado desde la plantilla MasterPageIII.

2. En la tabla agregaremos los siguientes controles:

Text = Usuario:

Text = Clave:

Text = Ingreso al Sistema;

Button1 = Nombre = btnIngresar, Text = Ingresar

Textbox1, Name = txtUsuario.

TextBox2, Name = txtClave, TextMode = Password

Quedando la interfaz de la siguiente forma:

1. En el formulario agregaremos los controles de validación necesario para hacer funcionar la aplicación, estos controles serán:

RequiereFieldValidator1.

Nombre = rfvUsuario,

ControlToValidate = txtUsuario, Display = Dynamic,

Text = *, Error Message = “Ingresar Usuario”.

RequiereFieldValidator2.

Nombre = rfvClave,

ControlToValidate = txtClave, Display = Dynamic,

Text = *, Error Message = “Ingresar Clave”.

RegularExpresionValidator1.

Nombre = revClave,

ControlToValidate = txtClave, Display = Dynamic,

Text =*, ErrorMessage = “Debe tener un rango de 6 a 8 caracteres”

ValidationExpression = “.{6,8}”.

Para todos los controles de validación el Width = “”.

ValidationSumary1 – Nombre = vsmMensaje.

Quedando de la siguiente forma:

1. En el método que captura el evento clic del botón btnIngresar, agregar las siguientes líneas de código:

If Page.IsValid Then

Dim usuario As String = Me.txtUsuario.Text

Dim clave As String = Me.txtClave.Text

If usuario = "marovi" And clave = "marovi" Then

System.Web.Security.FormsAuthentication.RedirectFromLoginPage(usuario, False)

End If

End If

2. En el archivo web.config agregar las siguientes líneas de código:

<authentication mode="Forms">

<forms loginUrl="frmLogin.aspx" />

</authentication>

<authorization>

<deny users="?" />

<allow users="*" />

</authorization>

3. Ejecutar la aplicación, la cual se verá de la siguiente forma:

Si se observa, se han perdido los estilos de la página, esto es debido a que el usuario que ingresa no tiene los privilegios necesarios para obtener los estilos definidos desde el directorio en donde se encuentran, para utilizar los estilos nuevamente, tendremos que agregar las siguientes líneas de código en el archivo web.config, fuera de la directiva System.web.

</system.web>

<location path="app_themes">

<system.web>

<authorization>

<allow users="*"/>

authorization>

system.web>

</location>

</configuration>

Lo que se hace en estas líneas, es agregar los permisos a la carpeta app_themes, la cual maneja los estilos, para todos los usuarios que ingresan al sistema, devolviendo los estilos a la página, la cual se verá de la siguiente forma:

1. Dentro de la página MasterPage.master, agregaremos dos controles en la parte superior del formulario, estos serán:

LoginName

LoginStatus, LogoutPageUrl = frmLogin.aspx, LogoutText = Cerrar sesión.

Estos controles estarán contenidos dentro de una tabla que tendrá una fila y tres columnas, quedando de la siguiente forma al ejecutar la aplicación:

ADMINISTRACION DE COOKIES

La clase Cookie es utilizada por la aplicación cliente para recuperar información acerca de las cookies recibidas con respuestas HTTP.

Para crear una cookie seguiremos los siguientes pasos

1. Abrir la página Default.aspx que se ha creado con anterioridad.

2. En el método que atiende el evento load del formulario, agregar las siguientes líneas de código, que permitirán crear una cookie

Dim cookie As HttpCookie = New HttpCookie("MyCookie")

3. Definir los valores que se guardarán dentro de la cookie.

cookie("Email") = "marovi@tutopia.com"

cookie("Nombre") = "Mario Antonio"

cookie("Apellidos") = "Roa Vidal"

4. Escribir la cookie.

Response.Cookies.Add(cookie)

5. Para leer la cookie primero crearemos la variable de lectura.

Dim cookieLectura As HttpCookie

6. Capturamos la cookie en la variable

cookieLectura = Request.Cookies("MyCookie")

7. Agregar un label a la solución y cargar los valores que se rescatan desde la cookie.

Me.Label1.Text = cookieLectura("Email") + " " + cookieLectura("Nombre") + " + cookieLectura("Apellidos")

Las líneas de código que se utilizarán para demostrar este ejercicio, son las siguientes:

If Not Page.IsPostBack Then

Dim cookie As HttpCookie = New HttpCookie("MyCookie")

cookie("Email") = "marovi@tutopia.com"

cookie("Nombre") = "Mario Antonio"

cookie("Apellidos") = "Roa Vidal"

Response.Cookies.Add(cookie)

Dim cookieLectura As HttpCookie

cookieLectura = Request.Cookies("MyCookie")

Me.Label1.Text = cookieLectura("Email") + " " + cookieLectura("Nombre") + " " + cookieLectura("Apellidos")

End If

Antes de crear una Cookie, siempre es importante verificar si el explorador puede soportar la creación de las mismas, para ello se debe realizar la siguiente pregunta antes de realizar cualquier acción de creación o lectura de cookies.

If Request.Browser.Cookies Then

End If

También podemos definir el tiempo de vida que tendrá una cookie, para ello se debe definir la siguiente propiedad de la misma:

cookie.Expires = DateTime.Now.AddMinutes(1)

ADMINISTRACIÓN DE VARIABLES DE SESIÓN Y DE APLICACIÓN

Es posible trabajar con variables de sesión y variables de aplicación dentro de una aplicación web.

Para administrar las variables se estos tipos realizaremos la siguiente operación.

1. Agregaremos un nuevo elemento a la aplicación del tipo de plantilla de “Clase de aplicación global”, el cual se definirá por defecto como global.asax.

2. En el método Application_Start que atiende el evento de inicio de la aplicación definiremos la siguiente variable:

Application("UsuariosOnline") = 0

3. En el método Session_Start que atiende el evento de inicio de sesión, definir la siguiente variable:

Session("NombreUsuario") = ""

4. También en esta sección incrementaremos el valor de la variable de aplicación que controla el nº de usuarios online.

Application("UsuariosOnline") = Integer.Parse(Application("UsuariosOnline").ToString()) + 1

5. En el método Session_End, que captura el evento de cierre de sesión agregaremos el decrecimiento de la variable de aplicación definida.

Application("UsuariosOnline") = Integer.Parse(Application("UsuariosOnline").ToString()) - 1

6. En el formulario frmLogin agregaremos las siguientes líneas de código, que permitirán cargar los valores en las variables de sesión definidas, para ello realizaremos la siguiente definición:

If usuario = "123456" And clave = "123456" Then

Session("NombreUsuario") = usuario

System.Web.Security.FormsAuthentication.RedirectFromLoginPage(usuario, False)

End If

7. En el formulario de Default.aspx definido, agregaremos 2 Label, los cuales tomarán las siguientes definiciones:

Me.Label1.Text = Session("NombreUsuario").ToString()

Me.Label2.Text = Application("UsuariosOnline").ToString()

8. Esto desplegará la información de las variables de aplicación y sesión respectivamente.

Ejecutaremos la aplicación e ingresaremos a este, la cual nos mostrará la siguiente información:

PAGINA CACHEADA

Dentro de una aplicación web es posible identificar páginas que en su mayoría, no requieren un mayor cambio, estas páginas pueden ser cachadas, permitiendo que la carga de las mismas sea mas rápido, ya que no se van a estar ejecutando en el servidor cada vez que se llaman sino que se ejecutarán solamente cuando exista una llamada a ellas y su tiempo de duración en cache se encuentre en estado expirado.

Para poder cachear una página, lo que se debe hacer es lo siguiente:

1. Entrar al código html utilizando el editor de código.

2. Posicionarse en las directivas de página de la página, que generalmente aparece con el siguiente formato y que se encuentran en la cabecera de la página.

<%@ Page Language="C#" MasterPageFile="~/MasterPageIII.master" AutoEventWireup="true" CodeFile="frmLogin.aspx.cs" Inherits="frmLogin" Title="Untitled Page" %>

3. Sobre estas líneas de directivas, agregar la siguiente directivas de código:

<%@ OutputCache VaryByParam=none Duration=5 %>

Esto permitirá dejar la página cachada durante el tiempo definido.

La segunda parte del ejemplo esta muy bien ya que se explica como crear y administrar una Base de Datos desde DotNet