Guion Laboratorio ASP.net

22

description

guía de asp.net

Transcript of Guion Laboratorio ASP.net

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    1/22

    ASP.NET 2.0: La diferencia es Obvia Laboratorio Desarrollo rpido de una miniaplicacin empresarial

    Objetivo del Laboratorio

    ASP.NET 2.0 cuenta entre sus caractersticas clases, controles y herramientas que nos ayudan a desarrollar una aplicacin con el uso de menos recursos y en tiempos mucho ms cortos. El objetivo de este laboratorio es mostrar algunas de estas caractersticas y cmo explotarlas para mejorar la productividad en el desarrollo de aplicaciones Web.

    Uno de los puntos a demostrar es la facilidad de creacin de aplicaciones Web sin escribir cdigo.

    Adems mostraremos las nuevas tcnicas de diseo de aplicaciones y el uso de nuevos controles en esta versin para acelerar el desarrollo de aplicaciones Web.

    Funcionamiento de la Aplicacin

    La aplicacin final presentar una miniaplicacin empresarial que cuente con restriccin de acceso, contemplando control en autenticacin y autorizacin. Esta aplicacin permitir su ampliacin conservando el mismo aspecto en todas sus pginas y una fcil navegacin que no requiera un trabajo adicional para el desarrollador. Adems la aplicacin presentar formularios de mantenimiento y consulta rpidos de desarrollar.

    Trabajo por realizar Para implementar la miniaplicacin empresarial expuesta anteriormente seguiremos 7 pasos base:

    1. Creacin de una aplicacin Web 2. Creacin de Pginas maestras para la definicin del esquema general de la

    aplicacin 3. Crear las pginas para consulta y mantenimiento de datos 4. Implementar navegacin para la aplicacin Web 5. Implementar acceso a datos 6. Implementar un Tema para obtener la misma apariencia en toda la

    aplicacin Web 7. Implementar seguridad para controlar el acceso a la aplicacin y la

    autorizacin sobre las pginas

    Guin de desarrollo

    Tarea 1. Crear la aplicacin Web en el sistema de archivos

    En el men File/Archivo, seleccione la Opcin New/Nuevo y haga clic en Web Site/Sitio Web. Bajo Visual Studio Installed templates/ Plantillas Instaladas Seleccione ASP.NET Web Site/Sitio Web ASP.NET.

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    2/22

    En el cuadro de Location/Ubicacin escoja FileSystem/Sistema de Archivos e ingrese el nombre de la carpeta que contendr las pginas, en este caso ASP2LadiferenciaEsObvia

    Para el lenguaje escoja C#.

    Una vez creado el sitio Web deberemos eliminar la pgina que se crea por defecto Default.aspx para esto seleccionamos el archivo en Explorador de Soluciones y mediante el botn secundario del ratn desplegamos el men contextual en donde elegiremos la opcin Delete/Borrar. En el cuadro que nos pide confirmacin para la accin realizada Aceptaremos el borrado permanente del archivo.

    Tarea 2. Crear un MasterPage para definir el esquema general de las pginas de la aplicacin

    En el men Web Site/Sitio Web elegimos Add New Item /Agregar nuevo tem. De la lista expuesta sealaremos Master Page y lo nombremos principal.master

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    3/22

    Principal.master ser la pgina plantilla para el desarrollo de todo el sitio Web. El esquema que escogeremos tendr una cabecera, un panel lateral izquierdo y el cuerpo de nuestra pgina.

    Para poder lograr este objetivo agregaremos una tabla para ordenar los elementos dentro del Master Page.

    En la vista de diseo de principal.master encontraremos el control ContentPlaceHolder1 que ser el encargado de combinar las futuras pginas que usen este Master page con sta.

    Desde el Men Layout seleccionamos la opcin Insert Table/Insertar Tabla, utilizaremos una plantilla/Template del tipo Header and side/Cabecera y lado.

    ASP.NET Master Pages le permiten crear una pgina plantilla la cual se puede utilizar en pginas seleccionadas o en todo el sitio para simplificar en gran medida la tarea de crear un consistente aspecto para el sitio.

    [::] ASP.NET Master Pages

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    4/22

    Una vez insertada la tabla deberemos arrastrar el control ContentPlaceHolder1 dentro de la celda inferior derecha

    Ahora agregaremos en la primera celda de la Tabla una imagen que servir de encabezado de todas las pginas de la aplicacin Web.

    Para esto agregaremos una imagen preparada para el Laboratorio dentro de una nueva carpeta del men. Primero dentro del proyecto ASP2LadiferenciaEsObvia crearemos una carpeta y la nombraremos Images, a continuacin agregaremos dentro la carpeta recientemente creada el archivo logo.jpg (desde la carpeta de recursos del laboratorio) utilizando la opcin Add Existing item/Agregar tem existente.

    Dentro del diseo de la pgina principal.master, en la celda superior de la tabla agregaremos un control Image. Editamos la propiedad ImageUrl y seleccionados de la carpeta Images el archivo logo.jpg.

    Define una regin para el contenido en una ASP.NET Master Page

    [::] ContentPlaceHolder

    El Control de servidor Image le habilita a mostrar imgenes en formularios Web y administrar las imgenes en cdigo de servidor.

    [::] Image

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    5/22

    Esta accin ocasiona que el logo de la Empresa se presente en la parte superior de la pgina.

    Para mejorar la apariencia de la pgina ajustaremos la primera celda al alto de la imagen.

    Tarea 3. Crear las pginas para consulta y mantenimiento de datos

    Esta tarea tiene como objetivo separar las pginas de consulta y mantenimiento de datos dentro de diferentes directorios, por lo que dentro de esta tarea realizaremos dos actividades:

    1. Crear carpetas para dividir la funcionalidad de la aplicacin 2. Crear las pginas en donde trabajaremos con los datos

    Para lograr lo especificado anteriormente, dentro del proyecto ASP2LadiferenciaEsObvia crearemos dos directorios llamados: Consulta y Mantenimiento.

    Ahora la estructura de nuestra aplicacin consta de 4 carpetas y un master page.

    Dentro del directorio Consulta mediante la opcin Add new Item/Agregar nuevo tem crearemos un nuevo web form con el nombre de paises.aspx, para crearlo debemos asegurarnos que la opcin select master page/seleccionar master page esta habilitada.

    Una vez que aceptemos la creacin de paises.aspx debemos seleccionar el master page que servir de plantilla para esta pgina.

    Usted puede mantener los archivos de su sitio Web en cualquier estructura que sea conveniente para su aplicacin, al estilo del filesystem.

    [::] Carpeta/Folder

    Usted usa ASP.NET Web Pages como la interface programable de usuario para su aplicacin Web. Una pgina ASP.NET Web Form presenta informacin al usuario en cualquier browser o dispositivo cliente e implementa lgica de la apliacin al lado del servidor.

    [::] Web Form Pages

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    6/22

    Para este sitio elegiremos principal.master creada en la seccin anterior de este laboratorio.

    En la vista de diseo de paises.aspx que es una pgina de contenido encontraremos ya la estructura creada en el master page, es decir el logo empresarial en la parte superior de la pgina.

    Para probar nuestra aplicacin hasta el momento agregaremos un control Label en donde estableceremos la propiedad Text en Pgina de Consulta de pases.

    Para ejecutar la aplicacin podemos puldar la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin. Aceptamos

    los mensajes de modificacin o creacin de archivos y el resultado ser la pgina con el logo empresarial y el mensaje.

    Para poder ejecutar esta aplicacin el entorno de desarrollo ASP.NET levanto el servicio del servidor Web para desarrollo. Este servidor Web crea un servicio virtual en un puerto diferente al puerto 80 para poder ejecutar el sitio Web, la direccin o url de la pgina ser http://localhost:####/ASPLadiferenciaEsObvia/Consultas/paises.aspx, en donde

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    7/22

    #### es el nmero de puerto utilizado para iniciar el servicio. Podemos ver toda la informacin desde su icono ubicado en la parte derecha de la barra de inicio.

    Utilizaremos los mismos pasos para crear la pgina de mantenimiento de datos paises.aspx dentro de la carpeta Mantenimiento.

    Con esto la estructura de nuestra aplicacin hasta el momento es la siguiente:

    Tarea 4. Implementar navegacin para la aplicacin Web.

    Para que los usuarios de nuestra aplicacin Web tengan facilidades en recorrer la aplicacin implementaremos la navegacin en tres pasos:

    1. Crearemos una pgina de bienvenida para la aplicacin 2. Crearemos un mapa del sitio que servir para la navegacin 3. Cada pgina de la aplicacin contendr la especificacin de la ruta

    que se ha seguido para llegar hasta ella.

    Para crear la pgina de bienvenida seguiremos los mismos pasos empleados en la seccin anterior de este laboratorio y crearemos la pgina Default.aspx en la raz del proyecto ASP2LadiferenciaEsObvia.

    En la etiqueta estableceremos la propiedad Text a Bienvenidos a Integra tecnologas y probaremos que la aplicacin funcione.

    Para realizar el segundo paso, debemos agregar un nuevo elemento al proyecto, en este caso debemos hacer uso de Site Map.

    Para probar o correr una aplicacin Web usted necesita un Web Server. El Web Server de produccin de Microsoft es IIS el cual adems incluye FTP y SMTP.

    [::] ASP.NET Development Server

    Usted puede utilizar las caractersticas de Navegacin de sitio de ASP.NET para proveer una forma consistente para navegar por su sitio. Mientras su sitio crezca ms y vaya moviendo las pginas en su sitio se convertir cada vez ms difcil en mantener todos los enlaces entre ellas. Esta caracterstica nos permite guardar los enlaces en un repositorio central y mostrarlos automticamente a travs de controles asociados.

    [::] ASP.NET Site Navegation

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    8/22

    El archivo que crea tiene como nombre Web.sitemap, el cual conservaremos. Este archivo es un documento XML que forma la estructura jerrquica de una aplicacin Web a base de anidar elementos. Estos elementos son los que tienen como propiedades principales el url destino, el titulo que aparecer en los enlaces y la descripcin del destino que aparecer como Tip al seleccionar los enlaces.

    Para crear la estructura de la aplicacin Web debemos tomar en cuenta que como punto de partida se encuentra la pgina Default.aspx, teniendo dos carpetas principales: Consultas y Administracin. Dentro de estas carpetas se encuentran la consulta y mantenimiento de pases respectivamente.

    La estructura propuesta ser representada en el archivo Web.sitemap de la siguiente manera:

    Inicio Consultas Consulta de Pases Administracin Mantenimiento de Pases

    Utilizando el elemento , el archivo Web.sitemap quedara as:

    Acrnimo del ingls eXtensible Markup Language (lenguaje de marcado extensible). Un lenguaje de marcas que puede usarse para almacenar datos en un formato estructurado, basado en texto y definido por el usuario.

    [::] XML

    Usted puede agregar un elemento SiteMapNode para cada pgina o carpeta dentro de su sitio Web. Anidando estos elementos se crea la estructura jerrquica del sitio.

    [::] SiteMapNode element

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    9/22

    Para utilizar el mapa del sitio lo enlazaremos a un control TreeView en el Master page. Para cumplir este punto emplearemos el panel lateral de la pgina plantilla que corresponde a la primera celda de la segunda fila.

    En la vista de diseo del Master page principal.master arrastraremos desde el Toolbox Navigation el Control TreeView a la celda libre.

    Para que el control insertado represente el mapa del sitio debemos atar el contenido de ste al archivo Web.sitemap. Para ello utilizaremos el smart tag del control; con el control seleccionado vamos a presionar el botn que se presenta en la esquina superior derecha con el icono de flecha.

    Esta accin provocar que se presente un men de donde elegiremos las propiedades a configurar. Lo primero que debemos configurar es la fuente de datos, por lo que del cuadro de lista desde Choose Data Source/Elegir Fuente de Datos elegiremos New Data Source/Nueva Fuente de datos.

    Un Asistente de configuracin se presentar en donde elegiremos como fuente de datos el icono siteMap, esto produce que el TreeView se relacione directamente con el archivo Web.sitemap.

    El ID del control de Fuente de Datos ser nombrado mdsSitio y aceptaremos la creacin del mismo.

    En caso de que el control con su nuevo contenido no se ajuste a la celda realizaremos el cambio de tamao respectivo para que mejore la apariencia del sitio.

    Control que muestra datos jerrquicos, tales como una tabla de contenidos, en una estructura de rbol.

    [::] TreeView

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    10/22

    Adicionalmente, utilizando el smart tag elegiremos la opcin Show Lines/Mostrar Lneas para darle un aspecto de men.

    Basta con agregar el control que har las veces de men en el Master Page principal.master para que todas las pginas que lo utilizan adquieran esta apariencia.

    En este momento probaremos el funcionamiento de la aplicacin, para ejecutarla podemos pulsar la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    El browser aparecer y podremos navegar por la aplicacin comprobando que las tres pginas creadas mantendrn la misma apariencia y funcionalidad creada hasta ahora.

    Para guiar al usuario como se ha llegado a cada pgina procederemos a agregar un control SiteMapPath desde el ToolBox de Navegacin. Este control lo agregaremos justo bajo el logo empresarial dentro del Master Page principal.master para que muestre la ruta hasta la pgina.

    En este momento probaremos el funcionamiento de la aplicacin, para ejecutarla podemos pulsar la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    La aplicacin mostrar en todas las pginas la ruta para llegar a ellas y como regresar.

    Muestra un conjunto de enlaces de texto o imgenes que permiten al usuario navegar fcilmente por la aplicacin o sitio, mientras toma una pequea porcin de espacio en la pgina.

    [::] SiteMapPath

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    11/22

    Tarea 5. Implementar acceso a datos.

    Dentro de esta tarea realizaremos un acceso de solo lectura para la seccin de consultas y un acceso de escritura para la seccin de Administracin.

    Primero trabajaremos sobre la pgina paises.aspx dentro de la carpeta Consulta.

    Desde el Toolbox Data arrastraremos un control GridView dentro del control Content1. El Control deber ser acomodado para que se presente bajo la etiqueta que presenta el texto Pgina de consulta de pases.

    Para que esta grilla presente los datos de pases desde la base de datos tenemos que enlazarlos a travs de una Fuente de datos. Utilizando el smart tag del control GridView elegiremos una nueva Fuente de datos.

    En el asistente seleccionaremos Database/Base de Datos como el origen de datos y nombraremos al control Data Source que se crear como sdsPaises.

    Muestra los valores de una fuente de datos en una tabla donde cada columna representa un campo y cada fila representa un registro. El GridView te permite seleccionar, ordenar y editar tems.

    [::] GridView

    Es la representacin de un control ligado a una base de datos SQL Server.

    [::] SqlDataSource

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    12/22

    En el siguiente paso el asistente nos pedir los parmetros para la conexin a la Base de Datos.

    Para crear la conexin debemos seleccionar la opcin New Connection / Nueva Conexin , se presentar el panel de configuracin en donde utilizaremos como servidor el servidor local de la mquina de desarrollo, par ello en el nombre del servidor especificaremos un punto ..

    Usaremos la autenticacin de SQL Server, con el usuario creado para el laboratorio: userSQL con contrasea userSQL2005 y como base de datos a la que nos conectaremos elegiremos Pachacamac (Esta base de datos fue preparada dentro del curso de desarrollo de aplicaciones Web de la Universidad .Net).

    El asistente ahora preguntar si se guarda la cadena de conexin en el archivo de configuracin?. A lo que debemos aceptar pues luego solo seleccionaremos la cadena de conexin ya guardada en este archivo y no realizaremos toda esta configuracin nuevamente.

    A continuacin elegiremos los datos, para ello elegiremos la opcin de traer los datos seleccionando una tabla de la base de datos.

    Del cuadro de seleccin buscaremos y escogeremos la tabla Pases. En la seccin columnas seleccionaremos el campo asterisco *, con lo que definiremos que traiga todas las columnas de la tabla.

    En la parte inferior del asistente aparecer la sentencia SQL con la que se van a traer los datos, en este caso select * from [Paises].

    La cadena de conexin define los elementos necesarios para abrir una conexin a la base de datos. Estos elementos pueden ser Nombre del Servidor, Base de datos, usuario y contrasea.

    [::] Connection String

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    13/22

    En el siguiente paso del asistente probaremos que se pueda ejecutar la consulta y finalizaremos el asistente.

    Desde el men presentado por el smart tag seleccionamos las opciones Enable Paging/Habilitar Paginacin y Enable Sorting/habilitar Ordenamiento

    En este momento probaremos el funcionamiento de la aplicacin, para ejecutarla podemos pulsar la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    El segundo punto de esta tarea es crear el mantenimiento de pases en la pgina paises.aspx de la carpeta Mantenimiento.

    En la vista de diseo vamos a arrastrar desde el ToolBox Data un GridView que lo ubicaremos bajo el control Label que contiene el texto Pgina de mantenimiento de Pases.

    Elegiremos el origen de datos desde una Base de datos, especificando el nombre del control como sdsPaises.

    En el siguiente paso del asistente elegiremos la cadena de conexin guardada anteriormente en el laboratorio, con lo que nos ahorraremos la configuracin de la

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    14/22

    conexin

    En el siguiente paso elegimos todas las columnas de la tabla Paises para que se pueda listar. Para habilitar la opcin de mantenimiento de datos debemos trabajar con las opciones avanzadas.

    Al lado derecho del asistente presionamos el botn Advanced/Avanzado

    En la ventana que aparece seleccionamos la opcin Generate INSERT, UPDATE, and DELETE statements/Generar sentencias INSERT, UPDATE y DELETE.

    Con ello, automticamente en el control SqlDataSource se crearn los comandos necesarios para realizar las operaciones de alteracin de datos.

    Para que se hagan visibles los comandos para alterar datos desde el men del smart tag seleccionaremos adems de habilitar paginacin y habilitar ordenamiento las

    Los archivos de configuracin de las aplicaciones Web mantienen una seccin en donde almacenan las cadenas de conexin usadas en la aplicacin, ests son referenciadas por su nombre.

    [::] ConnectionStrings

    Para modificar datos en una Base de Datos debemos usar el lenguaje SQL de modificacin. Sentencias Insert para agregar datos, Update para modificar datos y Delete para borrar datos.

    [::] Sentencias de modificacin de datos

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    15/22

    opciones Enable Editing/Habilitar Edicin y Enable Deleting/Habilitar Borrado.

    Para probar la aplicacin la ejecutamos pulsando la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    Ahora la grilla donde se presentan los datos tienen una columna adicional con dos comandos Edit y Delete. Cuando seleccionamos Edit, la columna pasa a tener los comandos Update y Cancel.

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    16/22

    Con lo implementado hasta el momento no podemos realizar el ingreso de nuevos pases, para lo cual debemos agregar un nuevo control en la misma pgina desplazando al GridView.

    Desde el ToolBox Data agregaremos un Control DetailsView al que ataremos al mismo SqlDataSource creado anteriormente.

    Adems habilitaremos la posibilidad de Ingresar datos seleccionando la opcin Enable Inserting/Habilitar Insercin. Adems desde las propiedades del DetailsView configuraremos la propiedad DefaultMode a Insert.

    Con esto la pgina paises.aspx presentar las opciones de listar, ingresar, modificar y eliminar datos.

    Muestra los valores de un registro de una fuente de datos en una tabla, en donde cada fila representa un campo o registro.

    [::] DetailsView

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    17/22

    Para probar la aplicacin la ejecutamos pulsando la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    Ahora podemos realizar las acciones de mantenimiento y probar el correcto funcionamiento de lo desarrollado hasta el momento.

    Tarea 6. Implementar un tema para obtener la misma apariencia en toda la aplicacin Web.

    Para darle una apariencia comn a la aplicacin crearemos un tema que contenga las definiciones de cmo queremos que se vean los controles y elementos de pgina utilizados hasta ahora.

    Para crear un tema agregaremos una carpeta ASP.NET de tipo Theme/Tema a la que nombraremos Integra.

    Dentro de esta carpeta agregaremos los archivos preparados para este laboratorio integra.css, grilla.skin, menu.skin y details.skin, utilizando la opcin Add Existing Item/Agregar tem existente. Elegiremos con fuente de estos archivos la carpeta de recursos preparada para este laboratorio.

    Los archivos de extensin .skin proporcionan el estilo de los controles de servidor mientras que el archivo de extensin .css proporciona el estilo a los elementos de la pgina.

    Una prctica comn para la creacin de los archivos .skin es generar el estilo en una pgina de prueba mediante las propiedades de la grilla y luego copiar el cdigo generado al archivo .skin. Para este laboratorio los estilos de los controles de servidor fueron tomados de la plantilla Profesional de los formatos automticos.

    Para que este tema se aplique a la toda la aplicacin Web cambiaremos el archivo de configuracin de la aplicacin Web.Config.

    Dentro de la seccin agregaremos el elemento con la propiedad theme asignada a Integra, tema recientemente creado para nuestra aplicacin.

    Son una coleccin de propiedades que definen la apariencia de pginas y controles en el sitio Web. Un tema incluye archivos de piel, archivos de estilos y grficos. Aplicando un tema se puede dar una apariencia consistente.

    [::] ASP.NET Themes and Skins

    Contiene reglas de estilo que son aplicados a elementos en la pgina Web. Definen como se muestran los elementos y donde se posicionan en la pgina. Se utilizan en lugar de asignar atributos a cada elemento individualmente.

    [::] Cascading Style Sheets css

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    18/22

    Para probar la aplicacin la ejecutamos pulsando la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    Tarea 7. Implementar seguridad para controlar el acceso a la aplicacin y la autorizacin sobre las pginas.

    Para lograr esta tarea cumpliremos los siguientes pasos:

    1. Crear usuarios 2. Crear Perfiles 3. Crear reglas de acceso 4. Crear una pgina con controles de autenticacin 5. Crear una seccin para controlar y realizar el seguimiento del usuario

    autenticado

    Las tareas antes listadas las podemos realizar mediante la herramienta ASP.NET Configuration/Configuracin de ASP.NET.

    Esta herramienta nos permitir configurar la seguridad de la aplicacin sin realizar programacin.

    Usando las caractersticas del sistema de Configuracin de ASP.NET, usted puede configurar todas las aplicaciones en el servidor o una aplicacin especfica o pginas y subdirectorios. Se puede configurar modos de autenticacin, cach, opciones de compilador y mucho ms.

    [::] ASP.NET Configuration

    Especifica el elemento raz para la configuracin de ASP.NET y contiene elementos de configuracin para alterar el comportamiento de la aplicacin.

    [::] system.web

    Globalmente define propiedades a nivel de pgina, tales como directivas para pginas y controles en ellas.

    [::] pages

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    19/22

    Podemos acceder a esta herramienta desde el men Website/Sitio Web o desde el icono en la parte superior del Explorador de soluciones.

    Desde la vieta Security/Seguridad vamos a seleccionar el tipo de autenticacin. El tipo de autenticacin a elegir es From the Internet/desde el Internet debido a que los usuarios sern manejados por la aplicacin y no por Windows o un Directorio de Windows.

    A continuacin vamos a crear tres usuarios:

    Usuario: user1 Password: user12007. email: [email protected] Pregunta: Nombre Respuesta: user1

    Usuario: user2 Password: user22007. email: [email protected] Pregunta: Nombre Respuesta: user2

    Usuario: user3 Password: user32007. email: [email protected] Pregunta: Nombre Respuesta: user3

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    20/22

    Una vez creados los usuarios habilitaremos y crearemos roles de usuarios

    Los roles creados son: Administrador y Consulta. El primero tendr acceso al mantenimiento de datos y consultas, mientras que los usuarios que pertenezcan al segundo role solamente podrn acceder a las consultas.

    Para implementar estas restricciones vamos a administrar las reglas de acceso

    La carpeta Mantenimiento deber tener permiso restringido para usuarios no registrados y usuarios que no pertenezcan al role Administrador.

    Los permisos para los usuarios annimos deben ser denegados, as como para todos los usuarios, pero primero se debe permitir el acceso a los usuarios con role Administrador.

    A la Carpeta Consulta se debe establecer restricciones parecidas para lograr que sea accesible para usuarios con roles Administrador y Consulta

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    21/22

    Ahora asociaremos los usuarios creados a los roles existentes.

    Desde el enlace de Administracin de usuarios editaremos el rol de los usuarios a user1 al que asignaremos al rol Administrador y user2 al que asignaremos al role de Consulta.

    Cerramos la ventana de configuracin para terminar con esta actividad.

    Dentro del proyecto ASP2LadiferenciaEsObvia creamos una pgina para que los usuarios se autentifiquen. En la raz del proyecto agregamos un nuevo WebForm al que nombraremos login.aspx.

    En la vista de diseo de login.aspx agregaremos desde el Toolbox login el Control Login.

    Probamos la aplicacin ejecutndola mediante la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    Utilizaremos el usuario user2 con contrasea user2207. para acceder y probar la restriccin de acceso a la carpeta de mantenimiento. Para probar el acceso total nos autentificaremos con el usuario user1 con contrasea user12007.

    Si nos autentificamos con el usuario user3 con contrasea user32007. no podremos acceder a ninguno de los recursos de la aplicacin, pues este usuario no fue asociado con ningn role.

    A continuacin implementaremos una seccin para la autenticacin en donde presentaremos al usuario autenticado o el enlace para autenticarse.

    En el Master Page principal.master vamos a agregar un control LoginView en la celda en donde est ubicado el control TreeView.

    Para configurar el uso de este control usaremos el smart tag de este control con la opcin Views/Vistas.

    Para la Vista de usuario Annimo (AnonymousTemplate) vamos a pedir al usuario que se autentifique en el sitio, para esto arrastraremos un control Label dentro del control LoginView y estableceremos la propiedad Text al texto: Autentifquese por favor. Esto mostrar el texto cuando no exista un usuario autentificado.

    En la Vista para usuarios autentificados (LoggedInTemplate) vamos a mostrar el nombre del usuario autenticado, para ello arrastraremos el control LoginName

    Provee un elemento de interfase grfica para autenticarse en un sitio Web.

    [::] Login

  • Integra Tecnologas 2007 Todos los derechos reservados El uso y distribucin de este material es nicamente derecho y responsabilidad de Integra Tecnologas www.integra-ec.com [email protected] formacion.integra-ec.com (593)091476514

    Ing. Jorge Carrin Quezada Ingeniero de Sistemas Microsoft Speaker Desarrollador 4 estrellas Mentor asociado .NET y Coordinador Acadmico Para comentarios, aportes o sugerencias por favor dirigirse a [email protected]

    ASP.NET 2.0: La diferencia es obvia Laboratorio Desarrollo rpido de una mini-aplicacin empresarial Escrito y editado el 15 de Mayo de 2007 Publicado el 24 de Mayo de 2007

    22/22

    desde el Toolbox Login dentro del control LoginView. Esto mostrar el nombre del usuario que se haya autenticado en la aplicacin.

    Adems arrastraremos desde el Toolbox Login un control LoginStatus. Este automticamente mostrar un enlace para autenticarse cuando no exista un usuario autenticado o un enlace para salir de la aplicacin cuando exista un usuario autentificado.

    Para probar la aplicacin la ejecutamos pulsando la tecla F5 o desde el men Debug/Depurar elegimos Start Debbuging/Iniciar Depuracin.

    La aplicacin final cumple con nuestros objetivos planteados al inicio del laboratorio.

    Muestra la plantilla de contenido apropiada para un usuario, basado en el estado de autenticacin y role de membresa.

    [::] LoginView

    Muestra el valor de la propiedad System.Web.UI.Page.User.Identity.Name

    [::] LoginName

    Detecta el estado de la autenticacin del usuario y escribe el estado en un enlace para autenticarse o de autenticarse del sitio.

    [::] LoginStatus