desarrollo de softwarevirtual.senati.edu.pe/curri/file_curri.php/curri/pdsd...v. acceso a datos con...

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

MANUAL DE APRENDIZAJE

CÓDIGO: 89001707

Profesional Técnico

LENGUAJE DE PROGRAMACIÓN IV

DESARROLLO DE SOFTWARE


ÍNDICE

TAREA N° CONTENIDO N° PÁG. I. CREACIÓN DE APLICACIÓN WEB. 6 1.1. Gestionar WEB forms. 6 1.2. Programar Script y Codebehind. 16 1.3. Manejar controles de validación. 20

II. DISEÑO DE UNA PÁGINA WEB. 31 2.1. Aplicar las hojas de estilo (CSS). 31 2.2. Manejo de temas y máscaras en ASP.NET 46 2.3. Elaborar Master Page. 54

III. CONTROLES DE SERVIDOR. 61 3.1. Introducción a los controles del servidor. 61 3.2. Insertar controles del servidor. 62 3.3. Agregando controles a una página WEB. 72

IV. ADMINISTRADOR DE ESTADOS EN ASP.NET 79 4.1. Administrar estados. 79 4.2. Escribir, leer y eliminar cookies, 81 4.3. Manejar estados de sesión. 85

V. ACCESO A DATOS CON ASP.NET 95 5.1. Conectar a una base de datos en ADO.NET 95 5.2. Usando controles enlazados a datos ASO.NET 110 5.3. Programar operaciones de consultas y actualización de datos. 127 5.4. Implementar de un carrito de compras. 139 5.5. Reportes en la aplicación WEB. 181

VI. SEGURIDAD DE UNA APLICACIÓN WEB. 185 6.1. Configurar tipos de autenticación en una aplicación WEB. 185 6.2. Roles y autorización en una aplicación WEB. 194 6.3. Usar los controles Login en una aplicación WEB. 196

VII TRABAJANDO CON ASP.NET Y AJAX. 200 7.1. Manejo de las extensiones de Ajax en una aplicación ASP.NET 200 7.2. Implementar los controles Ajax. 210

VIII. USO DE LINQ CON ASP.NET 229 8.1. Elaborar consultas con LINQ. 229 8.2. Uso de Linqdatasource para acceso y control de datos. 234

IX. PUBLICACIÓN DE UNA APLICACIÓN. 245 9.1. Gestionar el internet information service. 245 9.2. Administrar un servidor WEB. 247 9.3. Alojar y probar una aplicación WEB. 247

ESCUELA DE TECNOLOGÍAS DE INFORMACIÓN 5


I. CREACIÓN DE UNA APLICACIÓN WEB. OPERACIONES: - Gestión de WebForms. - Programación Script y CodeBehind. - Manejo de Controles de Validación.

EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software visual Studio 2012, Block de Notas. ORDEN DE EJECUCIÓN: - Reconocer la Estructura de las Páginas Web. - Reconocer el Funcionamiento de las Aplicaciones Web - Desarrollar Entornos de Trabajo para paginas ASP 1.1. GESTIONAR WEB FORMS. FUNDAMENTO TEÓRICO: Conceptos básicos de la aplicación Web: Es importante manejar los conceptos básicos para poder construir una aplicación web. A diferencia de otro tipo de aplicaciones como pueden ser las de escritorio, en que sus componentes se encuentran disponibles de forma local; pues para desarrollar una aplicación web es importante y muy necesario que los componentes se encuentren distribuidos en protocolos. Es por ello que es importante conocer los siguientes conceptos básicos: ¿Qué es HTTP y cómo funciona? Es un mecanismo de comunicación por el cual se pueden intercambiar información entre loa navegadores y los sitios web. HTTP (Hypertext Transfer Protocol – Protocolo de Transferencia de Hipertexto) inicialmente fue pensado para la transferencia de archivos (documentos de hipertexto), hoy en día es



más que eso, es una comunicación directa entre el sitio web y la interfaz del servidor. Los comandos básicos que se utilizan es GET y POST pero también existen otros de menor frecuencia como son HEAD y PUT. GET: se encarga de recuperar la información de la dirección URL (Uniform Resource Identifier – Identificador Uniforme de Recursos). HEAD: se encarga de recuperar la información del encabezado que nos trae la URL. POST: se encarga de realizar una petición al servidor, que podría tener algunos efectos. PUT: se encarga de enviar de enviar la información al servidor, pero básicamente hablamos de documentos y registros a diferencia del POST que maneja parámetros. Para ver el funcionamiento básico de ello se debe de realizar un pequeño ejemplo que será “Hola Senati”, con un código básico pero explicativo para el propósito buscado.

¿Qué es HTML? Es un lenguaje de Hypertext Markup Languaje – Lenguaje de Marcas de Hipertexto; es el lenguaje por defecto de toda página web, la cual podremos combinar con nuestro código ASP para resultados interactivos con el usuario. Un navegador competente y un lenguaje HTML bien estructurado son la base de la tecnología de desarrollo de interfaces del usuario. El HTML es analizado y comprendido por los navegadores para ser ejecutada posteriormente en las diferentes plataformas. Ejemplo de una estructura HTML:



Formularios HTML: HTML permite utilizar etiquetas de apertura como <form></form> para poder indicarle al navegador que una parte de este código va a utilizar etiquetas que representan controles con los que el usuario podrá interactuar. Estos datos serán enviados de vuelta al servidor para realizar una acción a este proceso se le denomina Postback. Ejemplo:



Gestión de Web Form: Antes de hablar de los Web Form (Formularios Web) hay que tener en cuenta que la programación web (ASP) maneja tres modelos importantes: Web Form, MVC y Web Pages; a continuación mostraremos un breve concepto de cada modelo. Web Form: Este modelo fue el primero en existir, nos brinda un gran nivel de abstracción, y trabaja con un modelo de programación conocido por los desarrolladores ya que trabaja con eventos y controles lo cual nos facilitaba los manejos de funciones y utilizar poco código para el objetivo. MVC: Apareció como alternativa al web form que brinda una manera de programación que está basada en la arquitectura MVC, Maneja preferentemente la integración con pruebas unitarias y separa la lógica de presentación, la lógica del negocio y la lógica de acceso a datos. Web Pages: Es el último de los modelos existentes de programación; este modelo es más amigable y más sencillo de aprender, y no requiere de mucho conocimiento de las herramientas de Web Form y MVC, pero no deja de manejar la programación básica ASP.



ASP trabaja de manera directa con el Framework.NET, trabajando principalmente con Web Form como su principal herramienta. Prácticamente introduce las tecnologías de desarrollo web ASP, PHP o JSP; destacando así la separación de código del Servidor y del Markup HTML. La estructura normal de una página constituida por Web Form está basada en un fichero .aspx en el cual se va a definir la estructura HTML y se ingresaran los controles de servidor de la página (de los cuales hablaremos en los siguientes capítulos del manual). Así mismo encontrara el fichero de la codificación llamado Code Behind el cual guarda la estructura en .aspx.cs o aspx.vd el cual dependerá del lenguaje de programación que utilicemos. Finalmente estos ficheros se compilaran para dar como resultado el HTML que se ejecutara del lado del servidor. Normalmente estos ficheros unidos se manejan mediante un fichero .aspx conteniendo este el nombre de la página web, las herencias (inherits) y el código fuente (codeBehind). En la siguiente imagen se observara cómo se estructura el código HTML y ASP dentro de Visual Studio (C#).



Web Forms

Código HTML

Ventana de Explorador de Soluciones (Proyecto)



En el Explorador de Soluciones se podrá encontrar opciones básicas que se pueden manejar para el proyecto web ASP. Puede observar los diferentes niveles que existen y la codificación a utilizar dentro de la aplicación: fichero .aspx.cs:

Página de Código

Fichero de Diseño



Ejemplo de Código ASP en una Página

Observe directamente con el siguiente ejemplo: Añadir un Label (Etiqueta) el cual lleva por defecto el ID “Label1” para poner el texto del primer proyecto, con el cual se autogenerara el código necesario para que funcione en el localhost; a este Label se le modificara la Propiedad Text y se le pondrá “Bienvenidos a Mi Proyecto Web de Senati .ASP”

Podrá identificar que el codigo se va actualizando conforme se va agregando elementos en la página. Este vendria a ser el codigo .aspx directamente:



En este fichero code behind se inserta el código del servidor asi como los manejadores de los eventos y los controles de la página, en este ejemplo el Label1 muestra un texto sencillo para visualizarse en la capa Logica del negocio o acceso a datos, Se insertaran mas objetos en la página y se programara desde el WebForm .aspx.cs de la siguiente manera: (Insertar dos Label’s mas y un botón de comando).

Programar desde el WebForm.aspx.cs:



Seleccionar el navegador con el cual se quiere mostrar el ejemplo de la web (solo es referencial).

El resultado seria el siguiente a la hora de la ejecución:

Con el manejo de los Frameworks .Net se introdujo el concepto de trabajo en Clases parciales lo que ah permitido implementar clases de .NET en los ficheros ASP. Es por ello que hoy se maneja de manera distinta el Código Behind desarrollado por el programador y el código autogenerado automaticamente. Con esto es mas sencillo manejar el código Behind ya que



este se simplifica y no se encontraran los códigos generados por visual studio dentro de el, es asi que visual genera su propio fichero para la clase parcial: Observar el ejemplo dentro del fichero “PrimerProyectoWEb.aspx.designer.cs”

Se debe tener en cuenta que el trabajo en WebForm es muy versatil ya que trabaja con entornos de desarrollo practicos, sencillos e inherentes a todos los navegadores web (o a la gran mayoria de ellos). Los problemas que este presentaba con anterioridad hoy en dia se han solucionado claramente, trabajando ahora con herramientas muy importantes, como son: • Web Forms URL Routing: Nos permitira crear URLs dinamicas y

optimizadas para su facil ubicación y trabajo en los motores de busqueda. • HTML basico: Utiliza código html estandar, lo cual facilita su compatibilidad

con lenguajes como JavaScript y hojas de estilo CSS • View State Selectivo: Esto nos permite habilitar o deshabilitar su

visualización y estados de manera mas sencilla que en anteriores versiones. 1.2. PROGRAMAR SCRIPT Y CODEBEHIND. El Code Behind tambien conocido como Código detrás del modelo, permite organizar los diferentes eventos que tenemos en nuestra aplicación pero de forma separada, ya que todo lo referente al diseño y la interfas del usuario se podrán manejar en el fichero .aspx y el control de los eventos se manejaran en otro fichero separado .cs (c Sharp) .vb (Visual Basic) y .js (Java Script) donde se incluiran todas la funciones y las referencias del proyecto; a esto ultimo se le conoce como el Code Behind.



Diferentes modelos de Código: Visual Studio soporta basicamente dos modelos para poder codificar las paginas web, independiente del lenguaje de programación que se utilise (C# Sharp o Visual Basic), y estos son los siguientes: Inline Code: Este modelo de programación permite utilizar codigo y etiquetas html que se almacenaran en un unico archivo .aspx. Este codigo se encerrara en uno o mas bloques <Script>. Se pueden utilizar los Debug y utilizar IntelliSense, entre otros. Se trabajara basicamente en WebSite. Code Behind: Este modelo separa cada pagina en .aspx (contiene las etiquetas html y los controles ASP.Net), .aspx.cs(vb) (contiene el codigo fuente de la pagina web), .aspx.designer.cs(vb) (contiene todo el codigo generado automaticamente). Tambien separa la interfaz del usuario. Modelo de Eventos ASP: Esto permite añadir los controles a un web form y poder decidir a qué eventos se van a responder. Cada uno de los eventos se van a gestionar en un Método, el código quedara claro y ordenado, este tipo de programación era inherente de los lenguajes de programación de escritorio. Cuando una página se va a ejecutar por primera vez, ASP crea objetos que son necesarios y ejecuta el código de inicio, luego se renderiza el HTML y se envía al cliente. En este momento los objetos de la página se liberan de la memoria del servidor para su ejecución.

Cuando se ejecuta el postBack, por ejemplo cuando se cliquea un botón del formulario, una página según su función se puede enviar todos los datos del formulario, en dicho momento el ASP captura la información y crea de nuevo los objetos para su uso, se comprueba la operación que se realizó (postBack) y se lanza los eventos apropiados (aquí se realiza una operación de parte del servidor, por ejemplo actualizar una base de datos o ingreso de nuevos registros), se mostrara posteriormente la nueva información generada.



La página una vez renderizada se devuelve al cliente, si ocurriera otro postBack (otra acción) pues empezaría nuevamente el proceso. Para el ejemplo, realizar el ejercicio: Aplicación “WebApplication3” en el cual se tiene un WebForm1, pues se ha ingresado una tabla de 3 x 3 la cual dará el margen superior, derecho, inferior e izquierdo. Nota: No se debe olvidar que se debe de insertar todo en la etiqueta DIV - Menú Tabla. - Insertar Tabla.

Tabla en Div.

Ventana de Estructura de Tabla.



- Insertar una tabla en la celda del medio de 4 x 2 (4 filas por 2 columnas) en

la cual se deberá ubicar los objetos del ejemplo:

- Insertar 4 Label y 4 Texbox, finalmente insertar dos botones de

comando - Cambiar las propiedades Text de los objetos Label y Button1 y Button2.

- El resultado final quedara de esta manera, de manera sencilla, solo dar un

vistazo al fichero designer.css

Resultado



Vista del Código vb

Ventana del Explorador de Soluciones.

1.3. MANEJAR CONTROLES DE VALIDACIÓN. Interpretación de Controles como Etiquetas: Para poder desarrollar una interfaz de usuario web solo se tiene que enviar las etiquetas adecuadas al navegador. Son elementos ocultos que realizan la validación de las entradas de datos contra algún patrón. Validación por el lado del Cliente: Permite avisar al usuario antes de enviar los datos al servidor, pues eso permitirá ahorrar recursos, lo que da como resultado que sea más rápido. Se tiene que desarrollar el código del cliente sea



en C# Sharp o en Visual Basic, los controles de validación de ASP se genera automáticamente, se entiende que esta validación es opcional y activada por defecto. Validación por el lado del Servidor: La validación en este lado se realiza por razones de seguridad, aunque se haya realizado la validación por el lado del cliente.

Controles HTML: Los primeros controles ASP son los controles HTML, estos se encuentran definidos en el espacio de nombres System.Web.UI.HtmlControlsy provienen de la clase base HtmlControl. El Servidor no tiene acceso a los elementos HTML de una página web ASP.Net, por lo cual se entiende que estos elementos son tratados como código de formato que se pasa al explorador. Ejemplo:

<Input name=”Text1” style=”width: 284px” type=”Text”/> En el caso de agregar un atributo id y el atributo runat=”server”, ASP.Net reconocerá los elementos como controles de la página y se pueden programar mediante código basado en el servidor; por ejemplo el siguiente código HTML crea un objeto HtmlInputText llamado Text1:

<Input id=”Text1” style=”width: 284px” type=”text” runat=”server”/> Esto convertido a código de clases como propiedades seria:

Dim S As String = Text1.Value.ToString() Tabla de Controles HTML y Etiquetas HTML a los que corresponden:

Entorno de Desarrollo

Código Nativo (Código máquina)

Código Fuente C#, VB, Oros

Compilador

Compilador

Ejecutar Código Intermedio

(IL)

CLR



Control Etiqueta

HtmlAnchor <a>

HtmlButton <button>

HtmlSelect <select>

HtmlTextArea <textarea>

HtmlInputButton <input type=”button”>

HtmlInputCheckBox <input type=”check”>

HtmlInputRadioButton <input type=”radio”>

HtmlInputText <input type=”text”> y <input type=”password”>

HtmlInputHidden <input type=”hidden”>

HtmlInputImage <input type=”image”>

HtmlInputFile <input type=”file”>

HtmlForm <form>

HtmlImage <img>

HtmlTable <table>

HtmlTableRow <tr>

HtmlTableCell <td>

HtmlGenericControl <span>, <div>

Controles y ViewState: El ViewState es un método que utiliza el marco de la página generada en ASP.Net para poder guardar y conservar los valores de la página mientras se está en ida y vuelta por la ejecución; es decir, cuando se carga la página nos muestra una información base, al dar clic en un botón que realice alguna acción, pues esta se llevara a cabo y la pagina volverá amostrarse como al inicio. Para este fin se desarrollara un ejercicio. Seleccionar Archivo, Nuevo Sitio Web, Seleccionar Plantillas – Visual Basic, Sitio Web Vacío de ASP.NET



Agregar un nuevo elemento:

Seleccionar Formularios Web Forms.



Insertar los siguientes controles:

Objeto Propiedad

Label 1 Text Código

Label 2 Text Nombre

Label 3 Text Apellido Paterno

Label 4 Text Apellido Materno

Label 5 Text Edad

TextBox 1 (Id) Txtcodigo

TextBox 2 (Id) Txtnombre

TextBox 3 (Id) Txtapepat

TextBox 4 (id) Txtapemat

TextBox 5 (Id) Txtedad

Button 1 Text Registrar

Button 2 Text Limpiar



Realizar la programación, así mismo crear un array para poder ver cómo actúa el control ViewState Ingresar el siguiente código:

Este código permite ingresar los datos del participante y al dar clic en el botón “Registrar”, Esto mostrara el resultado de la concatenación de los cuadros de texto, con el detalle que en el campo código se podrá visualizar “Ingrese Código”, ya que el ViewState está trabajando y muestra la página como fue al inicio de cargar; si se enviara la información a una tabla o base de datos, se enviaría el código ingresado y luego volvería de manera automática a mostrar “Ingrese Código”.

Resultado

Se podriá decir que el ViewState es un mecanismo que da ASP.Net para poder mantener el estado de controles entre distintas llamadas al servidor. Antes de que la página se renderize a HTML y mostrada al cliente, ASP.Net lo que hace



es examinar todas las propiedades de todos los controles insertados en la página, si alguno hubiera cambiado su estado inicial, pues esta se anota en una colección nombre/valor, para luego codificarla e insertarla en la sección <form> como un campo oculto. Cuando se realiza el PostBack, ASP.Net carga la página en base a sus valores iniciales, es decir el ViewState devuelve la página al estado en el que estaba cuando se envió desde el servidor, se actualiza la página de acuerdo a los datos enviados desde el cliente, para gestionar los eventos. Muchas veces es necesario comprobar que los usuarios ingresen bien la información (escribir), con un formato correcto o no dejar espacios vacíos. Utilizando los controles de validación se puede realizar del lado del cliente o en el lado del servidor. Pero es importante muchas veces hacer esta validación del lado del cliente, por ejemplo al momento que el usuario no ingreso una información o dejo un cuadro de texto vacío. Estos controles de validación se pueden utilizar con cualquier control que se procese en un fichero de clase Ingrese los siguientes controles:

Objeto Propiedad

Label 1 Text DNI:

TextBox 1 (Id) Txtdni

DropDownList (Id) DdlAsignatura

Button 1 (Id) BtnConsultarNota

Text Consultar Nota

Label 2 (Id) LblNombre

Text Nombre:

Label 3 (Id) LblNota

Text Nota:

Label 4 (Id) LblError

Text Error:

Finalmente cambiar la propiedad Title del Formulario por “Formulario Web de Notas”



• Ingresar los datos al DropDownList (DdlAsignatura) editando sus elementos.

Edición de Elementos del Control DropDownList.

• Quedará de la siguiente manera:



• Insertar un control RequiredFieldValidator para poder comprobar que el

usuario no deje vacía la caja de texto TxtDni, un control RangeValidator para comprobar que el DNI escrito esta entre 999999 y 99999999 y finalmente un control ValidationSummary para mostrar los mensajes de error enviados por los controles de validación.

Objeto Propiedad

RequiredFieldValidator

(Id) cvDni

ControlToValidate TxtDni

ErrorMessage DNI Requerido

Text *

RangeValidator

(Id) cvDniRango

ControlToValidate TxtDni

ErrorMessage Valor Fuera de Rango

Maximum Value 99999999

Minimum Value 999999

Text *

Type Integer

ValidationSummary (Id) cvMensajes

• Ejecutar la aplicación.

Si aparece este error “UnobtrusiveValidationMode de WebForms requiere un ScripResourceMapping para jquery”; pues este error es normal por el hecho que ASP.Net de Visual Studio 2012 modifico el proceso de validación de controles en el lado del cliente, para dar solución a este error se tendrá que hacer lo siguiente:

- Deshabilitar el modo de validación discreto a nivel de página. - Deshabilitar el modo de validación discreto para toda la aplicación. - Utilizar el modo de validación discreto.



Deshabilitar el Modo de Validación Discreto: Se debe de añadir la línea siguiente en el controlador del evento Load de la página para habilitar la validación tradicional de las versiones anteriores: Page.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.None; Para deshabilitar el modo de validación discreto para toda la aplicación, se debe de agregar el siguiente código en la sección: <appSetting> de Web.Config: <appSettings> <add key = “ValidationSettings: UnobtrusiveValidationMode” value = “None”/> </appSettings>



• Ejecutar y colocar en el cuadro de texto un numero de 3 cifras y presione el

botón “Consultar Nota”, observe que muestra un mensaje de Validación indicando que se encuentra fuera del rango; si no pone nada en el cuadro de texto de DNI, mostrara el mensaje de Error indicando que se debe de ingresar el DNI.



II. DISEÑO DE UNA PÁGINA WEB OPERACIONES: - Hojas de Estilos. - Manejo de Temas y Mascaras en ASP.Net - Master Page. EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas. ORDEN DE EJECUCIÓN: - Reconocer la Estructura de las Hojas de Estilo. - Reconocer el Funcionamiento de los Temas y Máscaras. - Desarrollar Entornos de Master Page. 2.1. APLICAR LAS HOJAS DE ESTILO (CSS). ¿Qué es CSS? Como es de conocimiento el lenguaje HTML se encarga básicamente de concentrarse en el contenido, de las etiquetas, de las operaciones programáticas; es por ello que apareció este lenguaje completamente dedicado a darle un buen aspecto a las páginas Web, manejando así la parte visual, a este lenguaje se le llama CSS (Cascading Style Sheets – Hojas de Estilo en Cascadas). El funcionamiento de la Hoja de Estilo o CSS consiste en definir básicamente la apariencia de nuestras páginas en diferentes niveles:



• A Nivel Local: Es una etiqueta en concreto, permitiéndonos definir varios

estilos deferentes en una solo etiqueta, esto nos brinda una potencia importante en nuestra programación, aquí podemos definir varios tipos de párrafos que pueden tener color rojo o azul, puede mostrar márgenes o no, etc.

• A Nivel de Páginas y Cabeceras: En una página HTML se pueden definir en la cabecera su estructura visual.

• A Nivel de Archivos Externos: Los Estilos se pueden

manejar desde archivos para luego ser referenciados desde cualquier lugar de la página web, permitiéndonos así mayor flexibilidad a la hora de definir los parámetros visuales de los proyectos. Estos archivos llevan la extensión .css.

Para el objetivo de este manual se utilizará el Nivel de Archivos Externos ya que no se requiere utilizar demasiado código en las páginas ya que se utilizará más para la programación ASP.Net.

Realizar diferentes ejemplos de CSS para diferentes modelos de páginas que podrían utilizar, así mismo comprenderá los comandos a utilizar de manera sencilla y práctica. Primera Aplicación con CSS: Ejercicio: Desarrollar una página web desde Visual Studio utilizando VB, en la cual se insertará un archivo .css: - Crear el proyecto Web Vacío, agregar un WebForm, ubicar un título y un

párrafo.

Muestra de Código y Resultado



- Agregar un archivo .css con el nombre “estilo.css” De clic derecho al

proyecto / Agregar / Hoja de Estilos.

Poner Nombre al Fichero de Estilo

Estructura del Fichero .css

- Ingresar el código css en el Fichero:

Código css



- Y en la página web ingresar el siguiente código:

Llamada de un css en una Página Web

Llamar al archivo “estilo.css” generado y ya incluido directamente al proyecto. El resultado sería el siguiente:

Segunda Aplicación CSS:

Ejercicio: Desarrollar una página web desde Visual Studio utilizando VB, en la cual se insertara un archivo .css: • Desarrollar el proyecto Web Vacío, agregar un WebForm, y utilizar el

siguiente código:



• Agregar la hoja de Estilo “estilo2.css”

Nombre del Archivo css

• Ingresar el código para los estilos:



• Ejecutar la aplicación y se observará cómo ha quedado:

Tercera Aplicación CSS:

Ejercicio: Desarrollar una página web desde Visual Studio utilizando VB, en la cual se insertara un archivo .css: • Crear un proyecto Web Vacío, agregar un WebForm, en el cual se utilizara el

siguiente código: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Estilos de Texto - Manual de Leng. de Programación IV - ASP.Net</title> <link rel="stylesheet" type="text/css" href="estilo3.css" /> </head> <body> <p class="color"> Este párrafo utiliza la propiedad color:red; de CSS </p> <p class="letter_spacing"> Este párrafo utiliza la propiedad letter_spacing: 5px; de CSS </p> <p class="text-_lign"> Este párrafo utiliza la propiedad text-align: Center CSS </p> <p class="underline"> Este párrafo utiliza la propiedad text-decoration: underline de CSS </p> <p class="overline"> Este párrafo utiliza la propiedad text-decoration: overline de CSS </p> <p class="through">



Este párrafo utiliza la propiedad text-decoration: line-through de CSS </p> <p class="vertical_align"> Este párrafo utiliza la propiedad vertical-align: top de CSS </p> <p class="font_family"> Este párrafo utiliza la propiedad font-family: arial CSS </p> <p class="font_size"> Este párrafo utiliza la propiedad font-size: line-througgh de CSS </p> <p class="font_style"> Este párrafo utiliza la propiedad font-style: italic de CSS </p> <p class="font_weight"> Este párrafo utiliza la propiedad font-weight: bolder de CSS </p> <form id="form1" runat="server"> <div> </div> </form> </body> </html>

• Crear el archivo de Estilo: “estilo3”



• Ejecutar la aplicación y observar el resultado:

Propiedades utilizadas en CSS: Propiedad Tipo Función

color Texto Especifica el color del Texto

Letter-spacing Incrementa o decrementa la distancia entre los caracteres

Text-align Especifica la alineación horizontal de un texto

Text-decoration Indica la decoración de un texto. Los valores más utilizados son: none, underline, overline y line-through

Vertical-align Especifica la alineación vertical de un texto color Color Especifica el color de una página o un



párrafo

Background-color Especifica el color de un objeto

Border-color Bordes Especifica el color de un borde por sus cuatro lados

Border-style Especifica el estilo de un borde por sus cuatro lados

Border-width Especifica el grueso del borde por sus cuatro lados

Agrupación de Elementos (Span y Div): Las etiquetas Span y Div se utilizan básicamente para poder agrupar otros elementos y así ayudar a estructurar el documento. Estos son elementos HTML y no CSS, pero también se utilizan en ambos aspectos. Span: Este elemento es lo que se denomina un elemento neutro que no hará ningún cambio visual, pero con CSS actúa como un gancho hacia cierto texto o parte del documento. Ejemplo: <blockquote Cite=”http://www.senati.edu.pe> <span>Todos</span> los alumnos <span>deberán de estudiar</span>. Lo que debemos entender es que todos se deben de preparar <span>de la mejor manera</span>. </blockquote> Nota: <span> Se utiliza para resaltar el texto de nuestra página, solo faltaría ingresar: Span { Color:red; } DIV: Este elemento se utiliza para agrupar uno o más elementos, siendo el mismo <div> el que contiene a estos; esta agrupación funciona de forma similar. Ejemplo: <div id=”letraA”> <ul> <li>Armando</li> <li>Angél</li> </ul> </div> <div id =”letraB”> <ul> <li>Brandon</li> <li>Brenda</li> <div id=”letraC”> <ul> <li>Carlos</li> <li>Carla</li>



<li>Carmen</li> <li>Christian</li> </ul> </div>

Crear el fichero hoja de estilos: “estilos4.css”

Hoja de Estilos “estilos4.css”

Código CSS del Fichero “estilos4.css”

Finalmente quedará de la siguiente manera:



Elementos Flotantes (Float y Clear): Se puede hacer flotar cualquier elemento a la derecha o a la izquierda utilizando la propiedad Float; por ejemplo si quisiera un texto con ajuste de línea alrededor de una imagen, podríamos utilizar este código: • A un proyecto Web Vacío, insertar un WebForm • Dar clic derecho al proyecto y “Abrir Carpeta en el Explorador de Archivos”.

• Crear una carpeta Imágenes donde se guardarán las imágenes y elementos gráficos que se utilizarán en la web ASP.Net



• Actualizar el proyecto y podrá visualizar la carpeta Imágenes en el

Explorador de Soluciones.

• Ingresar el siguiente código HTML en la página: <div id=”imagen”> <img src=”imagenes/logo01.jpg” alt=”Senati”> </div> <p>Lenguaje de Programación IV</p>

• Para poder hacer que la imagen flote a la izquierda y el texto se ajuste a su alrededor, solo se deberá de incorporar la propiedad “Float” con el valor “left” y se define con la caja <div>, Genera el fichero “estilo5.css” e incluir el siguiente código:



#imagen { Float: left; Width: 200px; }

Hoja de Estilos “estilos4.css”

Resultado en el Navegador

La propiedad Clear, se utiliza para poder controlar el comportamiento de los elementos que siguen a los elementos flotantes del documento. La propiedad Clear puede tomar valores left, right, both o none, en el siguiente ejemplo podrá observar su uso:

• Actualizar el archivo de Estilo “estilo5.css”



• Finalmente quedará de esta manera:

Nuevas Notaciones en CSS 3: • Prefijo WebKit: Indica que es una versión de prueba para las propiedades

CSS, optimizada para nuevos navegadores como son Google Chrome y Safari (incluyendo versiones para móviles Iphone y Ipod).

• Prefijo O: Indica que es una versión de prueba optimizada para navegadores Opera.

• Prefijo Moz: Indica que es una versión de prueba optimizada para navegadores Firefox Mozilla.

• Prefijo Ms: Indica que es una versión de prueba optimizada para navegadores Microsoft (Internet Explorer y Microsoft Edge)

Notaciones para Color: • Notación RGBA: Define un color RGBA, que se deben especificar con

cuatro valores R(rojo), G(verde), B(Azul) y la novedad de esta notación A(Alfa) que es el nivel de transparencia. Ejemplo: Background: rgba(255, 125, 0, 0.5);

• Notación HSL y HSLA: HSL, Hue (tono), Saturation (saturación) y Lightness (brillo), utilizado más por los diseñadores ya que tenemos más opciones para determinar los colores y sus aspectos. El HSLA viene a ser lo mismo pero incluye el Alfa. Ejemplo: Background: hsla(120, 65%, 75%, 0.3);



• Bordes: CSS3 mejora el manejo de bordes ya que permite brindar

características; entre ellas tenemos: o Bordes Redondeados:

#rounded { Border: 2px solid; Border-radius: 10px; Padding: 5px; }

o Bordes Sombreados: #shadow { Background-color: orange; Box-shadow: 10px 10px 5px #888888; -webkit-box-shadow: 10px 10px 5px #888888; /*safari y Chrome La sintaxis: box-shadow: sombra-h sombra-v difuminado tamaño color comportamiento;

o Sombra-h: Posición Horizontal de la Sombra. o Sombra-v: Posición Vertical de la sombra. o Difuminado: Distancia del efecto difuminado. o Tamaño: Tamaño de la sombra. o Color: Color de la sombra. o Comportamiento: Indica si la imagen se proyectara desde el elemento

hacia afuera con el valor outset o del elemento hacia adentro con el valor inset. - Bordes con Imagen: Permite utilizar una imagen como borde.

Ejemplo: #image_round { Border-width: 10px; -moz-border-image: url(imagen_borde.png) 30 repeat; /* Firefox */ -webkit-border-image: url(imagen_borde.png) 30 repeat; /* Safari y Chrome */ -o-border-image: url(imagen_borde.png) 30 repeat; /* Opera */ Border-image: url(imagen_borde.png) 30 repeat; } La sintaxis: border-image: imagen arriba derecha abajo izquierda comportamiento1 comportamiento2;

o Imagen: Ruta de la imagen. o Arriba, Derecha, Abajo, Izquierda: Indica donde se harán los cortes de

la imagen base, desde sus filos superior, derecho, inferior e izquierdo externos hasta el centro de la misma.



o Comportamiento1, Comportamiento2: La imagen base original y los

cortes resultantes de la misma, permiten estirar la imagen hasta rellenar el largo y alto del borde.

• Gradientes: Un gradiente consiste en una secuencia de dos o más colores (un degradado). Sintaxis: Chrome - Safari Background: -webkit-linear-gradient (orientación, color-ini stop-ini, color-N stop-N) Firefox Background: -moz-linear-gradient (orientación, color-ini stop-ini, color-N stop-N) Opera Background: -o-linear-gradient (orientación, color-ini stop-ini, color-N stop-N)

• Transformaciones: Este efecto consiste en aplicar un cambio de apariencia geométrica a cualquier elemento. Atributos: o Rotate: permite girar un elemento. o Scale: Cambia el tamaño de un elemento. o Skew: Permite sesgar un elemento. o Translate: Permite mover un elemento.

• Transiciones: Es el cambio de un elemento a otro.

2.2. MANEJO DE TEMAS Y MASCARAS EN ASP.NET Temas: Las páginas maestras permiten controlar el diseño general de un grupo de páginas; pero si lo que queremos es que otros elementos sean constantes. Los temas proporcionan una forma de aplicar estilos comunes a los elementos de las páginas de un sitio. Si se está familiarizado con las hojas de estilo (css) entonces se les hará muy sencillo trabajar con temas ya que manejan un lenguaje similar.



Se puede utilizar temas para definir estilos, gráficos e incluso ficheros css que se encuentran en cada página. Se puede definir los temas para la aplicación ASP.Net, la página o para el control del servidor. ASP.Net ya trae consigo varios temas que podemos utilizar que los podemos encontrar por defecto en “c:\Windows\microsoft.net\framework\(versión de .net)\asp.netclientfiles\themes”, además de ellos podemos utilizar nuestros propios temas. Realizar el siguiente ejemplo: 1. Crear un proyecto (C# Sharp), un nuevo sitio web vacío.

2. Agregar un Formulario Web.

3. Agregar una carpeta de temas, para ello le damos clic derecho a nuestro

proyecto, seleccione Agregar, Agregar Carpeta ASP.Net, Tema; con esto creara una carpeta App_Themes de manera automática.



4. Agregar una carpeta tema dentro de App_Themes.

5. Ingresar el nombre Default a la carpeta agregada.



6. Agregar una hoja de estilo a la carpeta de tema “Default” (lo realizara como

aprendió en la operación hoja de estilos) y el nombre del nuevo fichero de estilos será “Default.css”

7. Se construirá la hoja de estilos, ya se sabe que predeterminadamente solo

viene la estructura del body. Una vez abierta la hoja de estilos, Seleccionar Estilo/Agregar regla de estilo. Clic derecho en la carpeta Elementos para modificar el estilo del nodo.



8. Para modificar un estilo, dar clic al nodo y luego ingresar a las propiedades del estilo.

9. Se podrán observar que se puede cambiar todos los estilos y generar el

diseño que se estime conveniente. Cambiar un estilo H1 con fuente de la siguiente manera:



10. Ingresar otra carpeta de tema y le póngale de nombre “Fondo”, luego

aplicar el fondo de la página en una hoja de estilo nueva (Fondo.css) y dar una estructura de fondo ámbar, finalmente pondrá el siguiente código en la página para ejecutar y llamar a los temas.

11. Finalmente se podrá utilizar un tema distinto por cada página web creada

en el proyecto. El ejemplo quedaría de la siguiente manera:

Mascaras: La mascaras son complementos a las paginas maestras que veremos en el siguiente acápite del manual, Utilizar mascaras es como combinar controles basados en WebControl con CSS.



Vendría a ser una forma de configurar algunas propiedades de un control o

grupo. Por ejemplo, puede definir un formato de color a un control que podría ser un TextBox o un control Button, a los cuales se les personalizaría de tal manera que podríamos utilizar estas mascaras para estos tipos de controles y cambiarlos sin entrar en detalles. Los archivos de mascara se mantienen en los controles como .skin, que es el que

contiene las declaraciones del control del servidor. Ejemplo: 1. Utilizar el ejemplo anterior de Temas. En la carpeta Fondos que se

encuentra en App_Theme, de clic derecho/nuevo elemento/Archivo de Mascara como plantilla. poner de nombre: “mascara1”

Nombre del Fichero de Mascara

2. Se generará el archivo “mascara1.skin”, en el cual se podrá trabajar; así

mismo se muestra en el Explorador de soluciones el archivo de la máscara.



3. Ingresar el siguiente código para generar las máscaras para los siguientes

controles. Luego insertar los controles que se han declarado en la página

4. Se Puede llamar a esta mascara utilizando la llamada de los temas, como en

el ejercicio anterior, ya que se ha generado la máscara dentro del tema Fondo.



2.3. ELABORAR MASTER PAGE.

Páginas Maestras: Representan un tipo de metapágina. En su estructura es una página normal, sin embargo se encuentran en archivos de extensión .master. Esta página funciona como una plantilla que tendrá una apariencia común entre todas las páginas de nuestro proyecto. Este tipo de página utiliza etiquetas de tipo XHTML que solo se aplican a la página maestra. Se maneja la siguiente estructura de trabajo:

Ya que las páginas maestras manejan la misma estructura que las páginas convencionales, podemos trabajar todo tipo de control y d contenidos como lo haríamos en una página normal. Además de marcas y controles una página maestra puede contener instancias del control System.Web.UI.WebControls.ContentPlaceHolder; como nos lo indica su nombre, el marcador de posición de contenidos va a sustituir al contenido real que aparecerá al final en las páginas que se basan en la página maestra. La función principal de una página maestra es la de sintetizar el manejador final de la página, por lo que trabaja de manera un poco diferente a la técnica de herencia. Cuando se ejecuta la página, la página maestra actúa e implementa su propio contenido en la página .aspx; es decir el contenido maestro termina siendo representado por un control que se añade a la colección Controls de la página .aspx. Las páginas maestras pueden trabajar con los siguientes atributos:

Página 3

System.Web.UI.Page

Página Primaria

Página 1 Página 2



• AutoEventWireup • ClassName • CompilerOptions • Debug Description • EnableViewState Explicit • Inherits • Language • Scrict • Src • WarningLevel • Master

Ejercicio: 1. Crear un nuevo sitio web vacío y poner de nombre “MasterPageSite”

2. Agregar un elemento nuevo. Seleccionar la plantilla Página Maestra y

llamarla “MasterPage.master”. Visual Studio va a generar el código; se puede observar los controles ContenPlaceholder.



3. Editar la etiqueta <body> en el archivo MasterPage.master y cambiar el color

de fondo.

4. Agregar una página dando clic derecho al proyecto / Agregar / Nuevo Elemento; luego seleccionar “Formulario Web Forms que usa una página maestra” y llamarlo “UseMasterPage.aspx”



5. Seleccionar la página maestra que muestra el cuadro de dialogo que

aparece, en este caso seleccionar la página maestra que se creó “MasterPageSite” – “MasterPage.Master”

6. Observar el cambio que tiene ahora la página .aspx ya que asumirá el color

gris claro que se ha asignado a la página maestra.



7. Observar el código que se ha generado y puede entender que está jalando

la estructura de la página maestra.

8. Agregar algunos controles y algo de texto a la página, luego insertar un par

de páginas más.



9. En las nuevas páginas ingresar diferentes objetos para poder ver que se

sigue utilizando la página maestra pero con objetos y presentaciones distintas.

10. En la Pagina insertada se ingresará un menú de navegación:

11. Configurar el Menú de Navegación para desplazarse entre las páginas del proyecto, Configurar los elementos del Menú:



12. Quedará de la siguiente manera, ya luego al ejecutar se podrá navegar

entre las páginas del proyecto, así se hará y agregarán elementos por la cantidad de páginas que se tengan.

13. Todo lo que haga en la página maestra se repetirá en las demás páginas

creadas, esto permitirá ahorrar tiempo en el diseño y la apariencia del proyecto.



III. CONTROLES DE SERVIDOR. OPERACIONES: - Introducción a los Controles del Servidor Web. - Controles del Servidor Web. - Agregando Controles a una Página Web. EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas.

ORDEN DE EJECUCIÓN: - Reconocer los Controles del Servidor. - Reconocer el Funcionamiento de las Aplicaciones Web con los Controles. - Desarrollar Aplicaciones para la Web ASP. 3.1. INTRODUCCIÓN A LOS CONTROLES DEL SERVIDOR. A estos controles se les conoce como Controles de Servidor Web. Estos controles se encuentran definidos en el espacio de nombres System.Web.UI.WebControls que provienen de la clase WebControl.

Entre estos controles se tienen algunos de formato tradicional como son: TextBox y Button, así como también controles de abstracción como Calendar, GridView, ListView o EntityDataSource; estos controles simplificaran los procesos de desarrollo. Se debe de tener en cuenta algunos detalles importantes que nos ayudaran con estos controles:

• La Clase Base WebControl implementa las propiedades comunes a todos

los controles, es por ello que ayuda a reducir los errores de programación.



• Permite detectar automáticamente las funciones del cliente web (Internet

Explorer y Microsoft Edge), es así que el usuario puede aprovechar al máximo estas funciones.

• En ASP.Net cualquier control se puede enlazar a datos, además nos brindan más controles que podemos utilizar para procesar el contenido de un origen de datos.

• Estos controles manejan etiquetas en formato HTML, los prefijos a utilizar dependerá de la clase del objeto. Al igual que todo control HTML, estas etiquetas deben de contener un atributo runat=”server”. Ejemplo de declaración:

<asp:TextBox id=”CajaTexto1” runat=”Server” Text=”Ejemplo”></asp:TextBox>

Asp vendría a ser el prefijo de la etiqueta y hace referencia al espacio de nombres System.Web.U 3.2. INSERTAR CONTROLES DEL SERVIDOR.

Controles de Presentación de Texto: • Label: Permite mostrar texto dentro de una página web ASP.Net, pero se

trabaja mediante programación



Ejemplo: <asp:Label ID=”Etiqueta1” runat=”Server” Text=”Etiqueta”></asp:Label>

Controles de Entrada: • TextBox: Permite ingresar datos (Escribir texto, números, fechas, etc.). Este

tipo de control permite ingresar una línea de texto, múltiples líneas de texto y contraseñas.

Ejemplo: <asp:TextBox ID=”CajaTexto1” runat=”server”>Caja de Texto</asp:TextBox> Las propiedades van a depender de las acciones que se quieren que realice este control, una de las más utilizadas seria TextMode que por omisión es SingleLine (una sola línea), pero también puede contener MultiLine (varias líneas) y Password (Muestra el texto en Asteriscos *).

• CheckBox: Este control permite mostrar varias opciones en las cuales se puede seleccionar más de una.

Ejemplo: <asp:CheckBox ID=”CasillaVerificacion1”



runat=”server” Text=”Opción 1” Checked=”True” /> La propiedad Checked y CheckBox vale False por omisión.

• CheckBoxList: Este control permite ingresar un grupo de lista, pudiendo

conectarlos a datos o ingresando elementos Ejemplo: <asp:CheckBoxList ID=”CheckBoxList1”

runat=”server” > <asp:ListItem Selected=”True” Value=”1” >Opción 1

</asp:ListItem> <asp:ListItem Value=”2” >Opción 2 </asp:ListItem> </asp:CheckBoxList><br />

• RadioButton: Este control permite ingresar un botón de opciones pero con

la posibilidad de escoger solo uno. Ejemplo: <asp:RadioButton ID=”BotonOpcion1” runat =”server” Text=”opción 1”



Checked=”True” GroupName=”Grupo 1” /> <br /> <asp:RadioButton ID=”RadioButton2” runat=”server” Text=”opción 2” GroupName=”Grupo1” /> La propiedad GroupName de los RadioButton tiene el mismo valor Grupo1, de esta manera se indica que ambos controles pertenecen al mismo grupo, es así que cuando se seleccione una opción, se deselecciona el otro. La propiedad Checked de un RadioButton por defecto estará en False.

• RadioButtonList: Este control nos muestra varias opciones de RedioButton,

pudiendo conectarlo con un origen de datos o ingresando elementos Ejemplo: <asp:RadioButtonList ID=”RadioButtonList1” runat=”server”> <asp:ListItem Selected=”True” Value=”1”>Opción 1 </asp:ListItem> <asp:ListItem Value=”2”>Opción 2 </asp:ListItem> </asp:RadioButtonList>



• ListBox: Permite seleccionar uno o más elementos de un cuadro de lista. Ejemplo: <asp:ListBox ID=”ListaFija1” runat=”server” > <asp:ListItem Selected=”true” Value=”1” >Elemento 1 </asp:ListItem> <asp:ListItem Value=”2” >Elemento 2 >/asp:ListItem> </asp:ListBox><br />

• DropDownList: Este control es similar al ListBox, la diferencia consiste en

que la lista de elementos esta oculta hasta que el usuario da clic en el botón desplegable; este control no permite la selección múltiple.

Ejemplo: <asp:DropDownList ID=”ListaDesp1” runat=”server” > <asp:ListItem Value=”1” >Elemento 1 </asp:ListItem> <asp:ListItem Value=”2” >Elemento 2 </asp:ListItem> </asp:DropDownList>



Controles de Envió y Devolución: Estos controles se utilizan para devolver la página al servidor con datos introducidos por el usuario para que sean procesados y luego generen una respuesta. Entre estos controles tenemos los siguientes: • Button: Este control Botón permite Enviar o generar Ordenes. Ejemplo: <asp:Button ID=”boton1” runat=”server” Text=”Botón” width=”104px” />

• LinkButton: Este control es un botón de Envió, básicamente se utiliza para

generar hipervínculos, aunque también se le puede convertir en un botón de órdenes, utilizando su propiedad CommanName y CommandArgument.

Ejemplo: (Enviar) <asp:LinkButton ID=”Enviar”

runat=”server” >Enviar</asp:LinkButton>

• ImageButton: Este control permite manejar imágenes en botones; también

puede ser empleado para enviar páginas. Se procesa como una imagen y



trabaja con coordenadas (x, y). No es lo mismo que un control Image que solo muestra una imagen simple.

Ejemplo: <asp:ImageButton ID=”btImagen1” runat=”server” ImageUrl=”logosenati.png” Height=”48px” width=”88px” />

Controles de Exploración: • HyperLink: Este control permite crear vínculos entre páginas web para que

los usuarios puedan desplazarse dentro de una aplicación e incluso para páginas externas al proyecto. La ventaja de este control es que permite establecer las propiedades de los vínculos del servidor.

Ejemplo: <asp:HyperLink ID=”Enlace1” runat=”server” NavigateUrl=”mipagina.aspx”>Enlace </asp:HyperLink>

Controles de Diseño: • Panel: Este control no tiene apariencia visual, pero permite utilizarlo como

contenedor de otros controles dentro de la página web.



• Table: Este control permite ingresar y estructurar un objeto tabla. Está

asociado con los controles TableRow y TableCell; también permite crear diseños tabulares.

Ejemplo: <asp:Table ID=”Tabla1” runat=”server” GridLines=”Both” > <asp:TableRow runat=”server” > <asp:TableCell runatl=”server”>[0,0]</asp:TableCell> <asp:TableCell runatl=”server”>[0,1]</asp:TableCell> </asp:TableRow> <asp:TableRow runat=”server”> <asp:TableCell runatl=”server”>[1,0]</asp:TableCell> <asp:TableCell runatl=”server”>[1,1]</asp:TableCell> </asp:TableRow> </asp:Table>

Controles de Fecha: • Calendar: Este control permite explorar fechas y poder hacer selecciones de

fechas e incluso podríamos manejar rangos entre ellas. Ejemplo: <asp:Calendar ID=”Calendar1” runat=”server” … </asp:Calendar>



Controles para Enlaces de Datos: • GridView: Este control permite visualizar mediante una grilla el contenido de

una tabla de una base de datos o de un origen de datos estructurado. Cada columna del mismo representa un campo de una tabla.

• DetailsView: Este control permite visualizar, actualizar, modificar, agregar y

eliminar un solo registro de un origen de datos de tipo tabla.



• FormView: Este control permite mostrar un registro de un origen de datos,

trabaja normalmente enlazado con un GridView.

• ListView: Este control permite mostrar datos de un origen de datos de tipo

tabla en un listado para luego poder seleccionarlos.

• DataList: Este control permitirá mostrar información de un origen de datos

mediante plantillas.

• Repeater: Este control trabaja de similar manera que el control DataList, la

particularidad del Repeater es que la plantilla trabajada para mostrar la información, se puede repetir dependiendo de la necesidad en las demás páginas de nuestro proyecto.



Estos controles se verán con más detenimiento en el Capítulo 5 “Acceso a Datos”. 3.3. AGREGANDO CONTROLES A UNA PAGINA WEB. Utilizando todo lo aprendido hasta ahora; diseñar una página web .aspx utilizando los controles de tal manera que la aplicación permita que el alumno pueda concertar una cita con el Tutor de Senati. Se desarrollara también el código HTML y observe el código extendido XHTML. Ejercicio: Aplicación paso a paso: 1. Verifique que esté instalado el servidor de Aplicaciones Internet

Information Server (IIS) y luego el entorno de desarrollo integrado (EDI) Visual Studio, también se puede, si fuera el caso, descargar la versión gratuita de Microsoft Visual Studio Express para Web. Deberá tener en cuenta que si se quiere ver las pruebas de cómo va quedando el proyecto, se tendrá que tener instalado el IIS en el ordenador máquina.

2. Realizar los siguientes pasos: Archivo – Nuevo Sitio Web – Plantillas – Visual Basic – Sitio Web Vacío de ASP.NET



Para el ejemplo se seleccionó un sitio web vacío, pero también se podría utilizar los diferentes formatos que ofrece visual studio para trabajar, eso dependerá de que es lo que se requiera realizar y de qué manera se desea hacer.

3. Seleccione en Ubicación Web: Sistema de Archivos, asignando ello se

indica que se trabajara de manera local en el equipo, si se escoge HTTP, tendríamos que asignar la dirección web en la cual se trabajara y si se selecciona FTP se estaría indicando que se trabajara con un servicio de protocolo de transferencia de archivos, al cual se tendría que asignar un dominio y contraseña.

4. Ya teniendo el proyecto vacío sin páginas web, lo que se deberá realizar

ahora es insertar páginas al proyecto para poder diagramarlas a su gusto. Insertar un nuevo elemento realizando los siguientes pasos: Clic Derecho al proyecto – Agregar – Agregar Nuevo Elemento – Formularios Web Forms



Podría cambiar el nombre del elemento, pero se dejara con su nombre “Default.aspx”, no se debe olvidar que todo dominio permite como nombre principal de la página web los nombres “Index” o “Default”.

5. Modificar el código HTML de la siguiente manera: (no se olvide que si una

página web tiene las Etiquetas <% y %> quiere decir que es un formato .ASPX)



Código HTML completo: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Solicitar una Tutoría</title> </head> <body style="text-align:center"> <form id="formTutoria" runat="server"> <strong><span style="font-family:Arial;font-size:24pt">SOLICITAR UNA TUTORÍA</span></strong><br /> <br /> <div style="text-align:left;font-family:Arial"> Alumno:<br /> <asp:TextBox ID="ctAlumno" runat="server" Width="505px"> </asp:TextBox><br /> <br /> Seleccione El Pofesor:<br /> <asp:DropDownList ID="lsProfesor" runat="server" Width="296px" Font-Size="Medium"> <asp:ListItem Value="1"> Luis Eduardo Ramirez</asp:ListItem> <asp:ListItem Value="2"> Helvert Navarro</asp:ListItem> <asp:ListItem Value="3"> Omar Espinoza</asp:ListItem> <asp:ListItem Value="4"> Hugo Mamanchura</asp:ListItem> <asp:ListItem Value="5">



Eduardo Reyes</asp:ListItem> </asp:DropDownList><br /> <br /> Dia:<br /> <asp:Calendar ID="clDia" runat="server" Font-Size="Medium"> </asp:Calendar><br /> <br /> Hora: &nbsp: <asp:RadioButtonList ID="btopHora" runat="server" TextAlign="Left" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Selected="True">10</asp:ListItem> <asp:ListItem>&nbsp:&nbsp:&nbsp:12</asp:ListItem> <asp:ListItem>&nbsp:&nbsp:&nbsp:16</asp:ListItem> <asp:ListItem>&nbsp:&nbsp:&nbsp:18</asp:ListItem> </asp:RadioButtonList><br /> <br /> Asunto:<br /> <asp:TextBox ID="ctAsunto" runat="server" Height="64px" textmode="MultiLine" Width="440px"></asp:TextBox><br /> <br /> <asp:Button ID="btEnviar" runat="server" text="Enviar Datos" Width="112px" /> <asp:Button ID="btRestablecer" runat="server" text="Restablecer" Width="112px" /> </div> </form> </body> </html> 6. El resultado hasta este momento vendría a ser el siguiente:



7. Agregar un nuevo Formulario Web Forms “Default2.aspx” e ingresar el

siguiente Diseño:

8. Regresar a la página “Default.aspx” y seleccionar el Botón “btEnviar” y en su

propiedad PostBackUrl, seleccionar “Default2.aspx”, con esto se indicara que conecte o llame a la página seleccionada para mostrarla.

9. En la página “Default2.aspx” ingresar el código Html e ingresar la siguiente

línea de código: <%@ PreviousPageType VirtualPath="~/Default.aspx" %>

Con esto se le indica que se trabajara con referencia a la página Default.aspx para poder utilizar sus controles y objetos.

10. En el código ASP de la página “Default2.aspx” se ingresara lo siguiente en

el evento Load:



11. Ejecutar la página “Default.aspx” e ingresar datos al formulario y darle clic al botón Enviar Datos para que muestre la página “Default2.aspx” mostrando el comprobante con los datos para imprimir. Ya se podrá agregar imágenes como el logo del instituto o de la empresa, ya sería cuestión del diseño a emplear.

Resultado Final:



IV. ADMINISTRADOR DE ESTADOS EN ASP.NET. OPERACIONES: - Administración de Estados. - Escribir, Leer y Eliminar Cookie. - Manejo de Estados de Sesión. Aplicación. EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas. ORDEN DE EJECUCIÓN: - Reconocer la y Ejecutar la Administración de Estados. - Ejecutar el Mantenimiento de Cookies. - Desarrollar Aplicaciones para el Manejo de Sesiones. 4.1. ADMINISTRAR ESTADOS: HTTP es básicamente un protocolo sin estado; esto quiere decir que, cada petición es tratada de forma independiente por el servidor. Esto sucede ya que las páginas web se vuelven a autogenerar cada vez que se envía al servidor, lo que nos da a entender que la información y los controles de la misma se pierden en cada ida y vuelta. Esto puede ocasionar varios problemas; por ejemplo si estamos realizando un “Carrito de Compra” y seleccionamos un artículo y enviamos la petición, pero volvemos a seleccionar otro artículo, ¿Cómo podríamos hacer para que la información del primer artículo seleccionado no se pierda?, así mismo, ¿Cómo identificará mi compra de la de otro cliente?, por otra parte si realizamos una compra, ¿Cómo haremos para que el servidor recuerde nuestra tarjeta de crédito y los datos de envió a la hora de procesar la operación?



Para poder manejar todos estos inconvenientes de la programación web, ASP.Net nos permite utilizar diversas opciones para administrar el estado de la página. Una de estas posibilidades es el Servicio “Estado de Vista” que nos permite conservar automáticamente los valores de las propiedades de la página y de todos los controles utilizados entre ida y vuelta al servidor. Otra opción importante es el trabajo en “Cookies” o “Un Campo Oculto” en una página web, que nos permite guardar valores específicos de la aplicación. Algunas de estas opciones mantienen la información en el Cliente y otras mantienen la información en el Servidor. ADMINISTRACIÓN DE ESTADO DEL CLIENTE. De las principales tenemos: Cookies, Cadenas de Consulta, Campos de Formularios ocultos y estado de la vista; que almacenaran la información del estado en la página o en el equipo Cliente; esto nos indica que esta información no se conservara en el servidor entre acciones de ida y vuelta.



4.2. ESCRIBIR, LEER Y ELIMINAR COOKIES. • Cookies: Una Cookie es una pequeña cantidad de información, para

precisar un capacidad no es mayor de 4KB, que una aplicación web puede crear y guardarla en la máquina del usuario que está viendo la página web (Cliente) para que posteriormente pueda ejecutarla o llamarla a través de una API de cookies de ASP.Net.

Esta herramienta es de la más utilizada para poder realizar el seguimiento de una sesión, ya que el servidor web envía una cookie a la máquina del cliente, y será modificada cada vez que el cliente realice una nueva petición o sesión. Si ponemos de ejemplo un Carro de Compras, podríamos utilizar las cookies para almacenar la información del Cliente como sería su código, para poder identificar los artículos adquiridos por el usuario, de esta manera, cada solicitud que se realice podrá obtener información de la anterior.

Una de las clases para este fin es HttpCookie correspondiente a System.Web, pero debemos de tener en cuenta algunos aspectos para controlarlos:

- Extraer la Cookie que guardara la información de la sesión, teniendo

cuidado de no tomar la cookie equivocada ya que pueden existir varias. - Determinar el tiempo de Expiración de la Cookie. - Manejar la Asociación entre la información del servidor con el identificador

de sesión (en la práctica veríamos que hay información que es potencialmente peligrosa mantenerla en cookies como puede ser la información de una tarjeta de crédito o de alguna información delicada, por la cual no podría almacenarse).



Las Cookies se definen básicamente por dos partes: su nombre y su valor El Nombre identificara a esta cookie de las demás; y el Valor vienen hacer un dato asociado con la misma. 1. Para crear una cookie simplemente se tiene que llamar a la clase

HttCookie ingresando los argumentos de nombre y el valor asociado. Dim miCookie As HttpCookie = New HttpCookie(“nombre”,”valor”)

2. Cuando se termina de crear la Cookie en el servidor, se deberá de añadir

las cabeceras de la respuesta HTTP para que sea enviada al cliente. Utilizaremos ADD de la Colección Cookies de HttpResponse agregando los argumentos: Response.Cookies.Add(miCookie)

El Método Add de Cookies no afectara a las demás cookies que puedan estar almacenadas en el cliente, además debemos de tener en cuenta que el tamaño de la cookie tiene como máximo 4kb y la gran mayoría de navegadores limitan el espacio a 2mb por lo que este método puede hacer que se eliminen otras cookies. La fecha de expiración de una Cookie es opcional, ya que el que determina la eliminación de los cookies son los navegadores.

3. La colección Cookies de HttpRequest contiene las cookies transmitidas

por el cliente al servidor en el encabezado HTTP, se podría decir que para leer a una cookie hay que acceder a esa colección y localizarla. Veremos un ejemplo de donde se recorrerá la colección de cookies enviadas por el cliente, se enviara el Nombre, el Valor, la Fecha de Caducidad y el Parámetro de Seguridad:

Cuando el cliente realiza un pedido al servidor, se envían los cookies de ese servidor, las cookies que el cliente almacena de un servidor determinado solo pueden ser devueltas al mismo servidor. Crearemos una Cookie que almacenará el número de veces que se accedió a la página:



• Crear un proyecto Web – Archivo – Nuevo Sitio Web – Sitio Web Vacío de

ASP.Net • Agregar un nuevo elemento – Formulario Web Forms. • Ingresar el siguiente código en la página “Default.aspx” (código ASP).

• Ingresar un botón(button) en la página y poner de nombre btEnviar, también ingresar una etiqueta (Label) y poner el nombre etVisitas en donde se mostrara el resultado, finalmente ingresar un Cuadro de texto (TextBox) al cual se le pondrá de nombre ctNombre; luego ingresar el siguiente código:

El resultado final será:



Datos Importantes: Las cookies en las aplicaciones Web, son un medio de almacenamiento específica del usuario. Una cookie es un fichero de texto que tiene lugar entre el servidor Web y el cliente. La cookie contiene información que la aplicación Web puede leer cada vez que el usuario visita el sitio. Las cookies se envían al cliente utilizando HttpResponse. Las cookies deben crearse antes de que la página ASP.NET se presente al cliente. Por ejemplo, puede escribir una cookie en un controlador de eventos Page_Load, pero no en un controlador de eventos Page_Unload. Vea el siguiente ejemplo de creación de Cookies para Vb y C#. Leer una Cookie VB

C#

Crear una Cookie: Se deberá de crear un objeto del tipo HttpCookie, ahora le asignaremos un nombre. VB

C#

Eliminar una Cookie:



Una cookie no se puede eliminar directamente desde una aplicación pero si podemos hacer que el navegador mismo la elimine dándole una fecha de caducidad. Cuando se ejecute esta acción, y el usuario intente acceder al cookie el navegador le informara que dicha cookie ya caduco y fue eliminada. VB

C#

4.3. MANEJAR DE ESTADOS DE SESIÓN. Existen diferentes estados dentro de ASP.Net y en este capítulo veremos algunos de los principales estados que existen. • Estado de Vista: A este estado se le conoce como el Método que utiliza una

página web ASP.Net para conservar los valores de sus propiedades y de las propiedades de los controles, esto durante el proceso de ida y vuelta entre el cliente y el servidor. Se pueden almacenar en grupos de Atributo y Valor; para almacenar este estado se utiliza la propiedad ViewState que heredan los controles de la Clase Control System.Web.UI. Este estado de vista se define mediante un campo oculto que estará incluido en el formulario Html, a este campo se le denomina _viewstate



Ingrese el siguiente código: <input type="hidden" name="_viewstate" id="_viewstate" value="/w" /> Ejercicio: Realice lo siguiente: Para el ejercicio, realizar un proyecto de sitio web vacío asp. Luego insertar un Formulario Web Forms, y agregar los siguientes objetos: • Label = etNombre • TextBox = ctNombre • Button = btEnviar • Label =etMensaje • Label =etVisitas Colocar un título para el Ejercicio:

Ingresar el código:



Finalmente ingresar un nombre en el campo de texto y darle clic al botón “Enviar”, esto dará como resultado la Bienvenida y el Numero de Visita de dicho Usuario, Vuelva a ejecutar cuantas veces se requiera y se observara cómo cambiara el Número de Visitas.

ADMINISTRACIÓN DE ESTADO EN EL SERVIDOR: Con ASP.Net se puede conservar la información del servidor de muchas maneras, entre estas se tienen: Estado de Aplicación, Estado de Sesión y Bases de Datos. Estado de Aplicación: El estado de aplicación permite almacenar de manera general y accesible desde todas las páginas de nuestro proyecto, por lo que es sumamente práctico para guardar información entre ida y vuelta del servidor y entre páginas. Este estado se define con un objeto Application de la clase HttpApplicationState. Realice el siguiente ejercicio para su mejor entendimiento. Se utilizara un formato similar al del ejemplo anterior:



• Label = etNombre • TextBox = ctNombre • Button = btEnviar • Label =etMensaje • Label =etVisitas Ingrese el siguiente código:

El resultado será similar al anterior:



Vuelva a ejecutar la página, el contador seguirá funcionando:

Estado de Sesión: Este estado es muy parecido al Estado de aplicación, con la única diferencia de que el lugar de trabajo es la actual sesión del navegador. Si hay varios usuarios utilizando nuestro proyecto al mismo tiempo, cada usuario tendrá un estado de sesión distinto. De igual manera que si un usuario deja de trabajar con nuestro proyecto y regresa para hacerlo más tarde pues se generara otro estado de sesión. Este estado se define por un objeto Session de la clase HttpSessionState, igual que en el anterior estado, se le puede agregar información específica de la aplicación en su estructura para almacenarla. Desarrollaremos un ejemplo similar al anterior:

• Label = etNombre • TextBox = ctNombre • Button = btEnviar • Label =etMensaje • Label =etVisitas Ingrese el siguiente código:



El resultado será el siguiente:

Base de Datos: Este modelo de estado es muy útil para poder almacenar gran cantidad de información específica del usuario y conservar para utilizarla en cuanto sea necesario. Este estado se puede utilizar de la mano con los cookies; es decir si un usuario utiliza nuestra aplicación y esta se almacena en una cookie, cuando este mismo usuario vuelva a acceder a la página se podría utilizar el identificador del usuario desde la cookie y buscar la información en una base de datos. Mejoramiento del rendimiento en el Servidor: Normalmente un problema recurrente en las aplicaciones ASP.Net es que cuando el número de peticiones es alto, el rendimiento del servidor puede fallar. Entre algunas de las posibles soluciones que podemos aplicar para mejorar el rendimiento de nuestro servidor es “Hacer uso de la Cache del Servidor” y “Reducir la información de ida y vuelta entre el Servidor y el Cliente”. También podríamos poner el valor False al atributo Debug del elemento Compilation en nuestro archivo “Web.config”.



Cambiarlo por: <compilation debug="false" strict="false" explicit="true" targetFramework="4.5"/> Almacenamiento en la Caché de Resultados: Una aplicación web se hace más práctica y funcional por el número de atenciones que puede realizar al mismo tiempo, una forma de hacerlo sin perder su performance es trabajar con la cache del Servidor. Esta operación consiste en almacenar los resultados en la cache del servidor, lo cual permitirá reducir el tiempo de respuesta del mismo. Los procesos para ejecutar una página web normalmente son: crear un ejemplar de la página, ejecutar su código interno, ejecutar las consultas a la base de datos, si es que existieran, finalmente arma la página dinámica y se muestra en el navegador. La ventaja de trabajar en Cache es que esta memoria guarda una copia de la página para poder obviar los procesos antes mencionados y la ejecución de la página sea mucho más rápida. Ejercicio: Generar la siguiente aplicación: Archivo - Nuevo Sitio Web – Sitio Web Vacío de ASP.Net Agregar un nuevo elemento “Formulario Web Forms” Modificar el código HTML de la página “Default.aspx”



Realizar el diseño e ingresar un control ADO.Net Entity Framework (se desarrollará más este control en el próximo capítulo del manual) a partir de una BD que se desarrollará, esta BD contendrá una tabla llamada Teléfono, con los siguientes campos.

Desarrollar una estructura de datos con el objeto ADO.Net agregando un diagrama y un modelo de datos. Realizar una conexión a datos utilizando lo aprendido en conexión de datos de Visual Basic .Net



Tener en cuenta que esta parte de estructura de datos es similar al trabajo en Visual Basic y C# para Escritorio. Realizar el siguiente diseño en la página web:

Ingresar el código en el evento Load de la página Default.aspx



Al ejecutar la aplicación se genera el servidor Host local del ordenador.

Al ejecutarse la página se guardara en Caché y se conectara con la conexión a datos. El ejemplo práctico se verá dentro del cd de apoyo en el capítulo 4 – Almacenamiento en Caché – WebSiteCache.



V. ACCESO A DATOS CON ASP.NET OPERACIONES:

- Conexión a una Base de Datos en ADO.Net. - Usando Controles Enlazados a Datos ASP.Net - Programar Operaciones de Consultas y Actualización de Datos. - Implementación de un Carrito de Compras. - Reportes en la Aplicación Web. EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas. ORDEN DE EJECUCIÓN: - Reconocer y Manipular Bases de datos desde aplicaciones ASP. - Reconocer los Controles de Enlazamiento a Datos. - Desarrollar Aplicaciones prácticas de ejecución de Datos. 5.1. CONECTAR A UNA BASE DE DATOS EN ADO.NET. Versión Visual Basic .Net El acceso a datos almacenados en una base de datos se basa en unos principios básicos que mencionaremos a continuación: • Modelo Desconectado: Los formularios web están desconectados por lo

general, pero cuando se basa en la conexión de datos, esta se encuentra en el servidor a la espera de ser solicitadas por el cliente; los datos se leen o actualizan mientras la página se procesa en el servidor. Cuando termina esta petición al servidor, esta información es enviada al navegador. No es práctico mantener abiertas las conexiones a las bases de datos, ya que si lo dejamos abierta dejaríamos sin opción a otro cliente de poder acceder a él. Por eso es recomendable durante el proceso de requerimiento abrir la conexión y luego de trabajar en ella debería cerrarse.



• Mayor frecuencia de lectura de los datos que de su actualización: Esto

quiere decir que es más sencillo y practico visualizar la información, acceder a ella de manera de lectura, ya que actualizar o escribir en esta información será un trabajo aún más complejo y solo se realizara dependiendo de la necesidad de nuestro proyecto.

• Reducir los requisitos de recursos del servidor: Esto quiere decir que

cuando una página con acceso a datos se ejecuta, las acciones se realiza del lado del servidor por lo que origina la utilización de recursos del mismo, por lo que si muchos usuarios acceden al mismo tiempo a nuestra aplicación esta presentaría problemas, es por ello que debemos de tener en cuenta el cuidado en el diseño para minimizar estos efectos, obteniendo solo los datos que se precisan en ese instante.

• El proceso de poder acceder a los datos mediante accesos remotos:

Conocido también como acceso a datos distribuido. Para ello es importante separar los componentes, uno para la interfaz y otro para el acceso a datos propiamente dicho.

SQL Y DESARROLLO WEB: Se realizará una aplicación en la cual se va a utilizar un Formulario Web para poder acceder a una base de datos SQL Server utilizando como origen de datos el control SqlDataSource. Para dicho fin se utilizará el Programa SQL Server 2008 para crear la base de datos. Crear Base de Datos: Clic en Crear Nuevo Query e ingresar el siguiente código: • Crear la Base de Datos. • Abrir la Base de Datos. • Crear nuestras Tablas. • Ingresar Registros. • Crear Diagrama.



/* Crear la Base de Datos */ Create Database Senati /* Abrir la Base de Datos */ use Senati /* Crear la Tabla Alumnos */ create table Alumnos ( id_alumno char(8) primary key not null, nombre_alumno varchar (50) ) /* Crear la Tabla Cursos */ create table Cursos ( id_curso integer primary key not null, nombre_curso varchar (50) ) /* Crear la Tabla Alumno_Curso */ create table Alumno_Curso ( id_alumno char (8), id_curso integer, nota integer )

Nota: No olvidarse de Seleccionar los comandos y Ejecutarlos con la tecla F5, dentro del programa SQL Server.

Agregar algunos registros a las tablas: /* Agregue Registros a la Tabla Alumnos */ Insert Into Alumnos values ('40218567','José Gonzales') Insert Into Alumnos values ('62534715','Manuel Huaman') Insert Into Alumnos values ('54127841','Rosa Corrales') Insert Into Alumnos values ('59847512','Sofia Guerra')



/* Revisaremos lo Ingresado */ Select * From Alumnos

/* Agregue Registros a la Tabla Cursos */ Insert Into Cursos Values (1,'Fundamentos de Programación IV') Insert Into Cursos Values (2,'Desarrollo de Software') Insert Into Cursos Values (3,'Tecnologías Web') Insert Into Cursos Values (4,'Base de Datos') Insert Into Cursos Values (5,'Calidad de Software') /* Revisaremos lo Ingresado */ Select * From Cursos

/* Agregue Registros a la Tabla Alumno_Curso */ Insert Into Alumno_Curso values('40218567',1,13) Insert Into Alumno_Curso values('40218567',2,14) Insert Into Alumno_Curso values('40218567',3,12) Insert Into Alumno_Curso values('40218567',4,16)



Insert Into Alumno_Curso values('62534715',1,18) Insert Into Alumno_Curso values('62534715',3,16) Insert Into Alumno_Curso values('62534715',5,17) Insert Into Alumno_Curso values('54127841',2,13) Insert Into Alumno_Curso values('54127841',4,12) Insert Into Alumno_Curso values('54127841',5,12) Insert Into Alumno_Curso values('59847512',1,15) Insert Into Alumno_Curso values('59847512',2,15) Insert Into Alumno_Curso values('59847512',3,14) /* Con esto sera Suficiente */ /* Revisaremos lo Ingresado */ Select * From Alumno_Curso

Crear el Diagrama:



Crear la aplicación: • Crear un nuevo sitio web: Archivo – Nuevo Sitio Web – Sitio Web Vacío de

ASP.Net • Agregar un Formulario Web Forms (Clic derecho al proyecto – Agregar –

Agregar nuevo Elemento – Formulario Web Forms (Default.aspx) • Crear el siguiente diseño:

Objeto Propiedad Valor

Etiqueta (Label) Text DNI:

Caja de Texto (TextBox) (ID) ctDni

Lista Desplegable (DropDownList) (ID) lsdCurso

Botón de Pulsación (Button) (ID)

Text

btConsultarNota

Consultar Nota

Etiqueta (Label) (ID)

Text

etNombre

Nombre:


Text

etNota

Nota:


Text

etError

Error:

• Abrir el Explorador de Servidores: Menú Ver – Explorador de Servidores.



• Se deberá agregar una nueva conexión para la base de datos Alumnos. Aquí podrá seleccionar agregar una conexión a base de datos o crear nueva base de datos de SQL Server: Clic derecho a Conexiones de Datos – Agregar Conexión. Luego aparecerá la venta de “Elegir Origen de Datos”; seleccionar “Microsoft SQL Server” – Continuar.

• Ingresar o seleccionar el Servidor, luego ingresar los datos de Autenticación

sea de Windows o de SQL (para el ejemplo se ingresara la autenticación de SQL Server, Usuario: sa, password: root), seleccione la Base de datos: “Senati”, finalmente se Probara la Conexión.



• Después de probar la conexión, se observará que en el explorador de Conexión de Datos, se muestra la información de la base de datos y su estructura.

• Ingresar los controles de Validación necesarios para el DNI (si lo considera necesario).

• Utilizar el control SqlDataSource que encapsula la

funcionalidad ADO.NET que se requiere para conectar con bases de datos. Con este control se podrá manipular datos sin utilizar las clases ADO.NET. Sola basta con que se proporcione la cadena de conexión y las sentencias SQL (Select, Insert, Update y Delete). Este control permitirá abrir y Cerrar la conexión a la base de datos automáticamente, y en el momento que se requiera ejecutara las sentencias SQL.



• Este control SqlDataSource se puede configurar para que trabaje como un

DataReader o un DataSet que se maneja mediante la propiedad DataSourceMode.

• Añadir un objeto SqlDataSource a la página. Seleccionar el objeto y

arrástrelo a la página, se le pondrá el nombre FuenteDatosSql.

• Configurar el origen de datos del control. Darle clic en “Configurar Origen de

Datos”, seguir el asistente paso a paso.

• En la ventana que aparece, se le dará clic al botón “Nueva Conexión” y seleccionar el servidor y la base de datos como se ha realizado anteriormente



• Observar que se muestra la cadena de conexión, se puede copiar y guardar

para cuando se necesite. “DataSource=DESKTOP-FRUVH1J\SQLEXPRESS;Initial Catalog=Senati;User ID=sa;Password=root” Darle clic a “Siguiente” • En la siguiente ventana, el asistente pregunta si se desea dar un nombre a

esta conexión, pero se dejara con el nombre por defecto que se muestra. Darle clic a “Siguiente”.

• Seleccionar la tabla “Cursos” y seleccionar todos los campos. Este vendría a ser la sentencia Select para visualizar los datos. Darle clic a “Siguiente”.



• En la siguiente ventana que aparece, darle clic a “Consulta de Prueba” y

podrá visualizar la información requerida. Darle clic a “Finalizar”.

• Seleccionar el control lsdCurso y vincúlelo al origen de datos

FuenteDatosSql, para que nos muestre los nombres de los cursos y almacenar el Código (id_curso).



• En la ventana que aparecerá seleccionar el origen de datos, luego

seleccionar el campo para mostrar en el DropDownList y seleccionar el campo de datos para el valor de DropDownList. Finalmente darle clic al botón “Aceptar”.

• Observar el código HTML que se generó para el objeto DropDownList (lsdCurso)

<asp:DropDownList ID="lsdCurso" runat="server" DataSourceID="FuenteDatosSql" DataTextField="nombre_curso" DataValueField="id_curso" Height="32px" Width="314px"> </asp:DropDownList>


• Observar también que en el archivo Web.config se muestra la cadena de

conexión a datos.

<?xml version="1.0"?>  <configuration> <connectionStrings> <add name="SenatiConnectionString" connectionString="Data Source=DESKTOP-FRUVH1J\SQLEXPRESS;Initial Catalog=Senati;User ID=sa;Password=root" providerName="System.Data.SqlClient" /> </connectionStrings> <system.web> <compilation debug="true" strict="false" explicit="true" targetFramework="4.5"/> <httpRuntime targetFramework="4.5"/> </system.web> </configuration • Si se ejecuta en este momento la aplicación, se verá en el cuadro de lista los

cursos que ingreso en la tabla cursos en SQL Server.

• Desarrolle la aplicación para que el alumno ingrese su DNI, seleccionar el

Curso a Consultar, para que le muestre la Nota correspondiente. • Utilizar el botón btConsultarNota y los parámetros serán el cuadro de texto

ctDni y el DropDownList lsdCurso (pero se utilizara el dato id_curso obtenido de la propiedad SelectedItem.Value)

• Ingresar el siguiente código a la programación de la página “Default.aspx”

Imports System.Data.SqlClient Imports System.Configuration


Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load etError.Text = "" End Sub Protected Sub btConsultarNota_Click(sender As Object, e As EventArgs) & _ Handles btConsultarNota.Click 'Objeto conexión con la base de datos Dim conexion As New SqlConnection() 'cadena de conexión - web.config conexion.ConnectionString =ConfigurationManager.ConnectionStrings & _ ("SenatiConnectionString").ConnectionString 'Objeto de Sentencia SQL Dim cmd As SqlCommand = Nothing 'Objeto para leer los datos Dim dr As SqlDataReader = Nothing 'Trabajamos con el Error Try 'Consulta para buscar el el nombre y la nota del alumno "ctDni" Dim sql As String = "Select Alumnos.nombre_alumno, Alumno_curso.nota " & _ "From Alumnos, Cursos, Alumno_curso " & _ "Where Alumnos.id_alumno=" & Convert.ToInt32(ctDni.Text) & _ " And Cursos.id_curso=" & lsdCurso.SelectedItem.Value & _ " And Alumnos.id_alumno=Alumno_curso.id_alumno" & _ " And Cursos.id_curso=Alumno_curso.id_curso" cmd = New SqlCommand(sql, conexion) conexion.Open() 'Abrir la conexión con la Base de Datos y Obtener los Datos dr = cmd.ExecuteReader() If dr.Read Then 'Mostrar El nombre y la nota etNombre.Text = "Nombre: " & dr("nombre_alumno") etNota.Text = "Nota: " & dr("nota") etError.Text = "" Else 'El Alumno buscado no es encontrado etNombre.Text = "" etNota.Text = "" etError.Text = "Error: No se Encuentra la Nota" End If 'Cerrar Siempre la Conexión dr.Close() dr = Nothing Catch exc As System.IO.IOException



etError.Text = "Error: " & exc.Message Finally 'En cualquier caso Cerrar la Conexión If dr IsNot Nothing Then dr.Close() End If If conexion IsNot Nothing Then conexion.Close() End If End Try End Sub End Class • Simplemente queda ejecutar la aplicación. Ingresar el DNI de una Alumno

que se encuentre en la Base de Datos y seleccionar el Curso, finalmente de clic al botón “Consultar Nota”, el Resultado será el siguiente:

• Si se Ingresa un Alumno y se selecciona un Curso donde no fue registrada

su nota en la Base de Datos, daría el siguiente resultado:

Nota: El archivo de Ejemplo se encuentra en la carpeta Capitulo 5 – Acceso a Datos (Incluye el Archivo del Query de SQL Server)



5.2. USANDO CONTROLES ENLAZADOS A DATOS ASP.NET El enlace a datos es una característica muy importante dentro de la programación en ASP.Net, ya que nos permite asociar un origen de datos con un control determinado, para que de esta manera nos muestre o nos permita interactuar con la información. Los Controles principales para conexión de Datos son los siguientes: 1. DropDownList: Este control es una lista desplegable que nos permite

trabajar con orígenes de datos. Este control se enlaza a través de la propiedad DataSource o DataSourceID.

2. CheckBoxList: Este Control permite seleccionar más de una opción que se

encuentra enlazada a una tabla de nuestra base de datos.

3. BulletedList: Este control permite crear una lista de formatos con viñetas.



4. ListBox: Este control permite crear una Lista de Elementos visibles para

poder seleccionar solo uno.

5. RadioButtonList: Es un control que también permite visualizar las opciones

a seleccionar y marcar solo una.

6. GridView: Este control permite mostrar el contenido de una tabla de nuestra

base de datos y visualizarla de manera de Grilla para seleccionar, Modificar, Insertar o Eliminar cualquier registro.

7. ListView: Este control permitirá visualizar el contenido de un campo de una

tabla de la base de datos y poder seleccionar alguna opción.



Se utilizarán básicamente las siguientes propiedades: 1. DataMember: Esta propiedad determina el nombre de la lista de datos a la

que se enlazará el control determinado.

2. DataSource: Esta propiedad determina el objeto al cual esta enlazado el control.

3. DataSourceID: Esta propiedad hace referencia al identificador del control

del cual un control adquiere la lista de datos.

4. DataSourceObject: Esta propiedad permite obtener un objeto que genera la interfaz IDataSource que nos da el acceso al contenido de datos del objeto.

5. DataTextField: Esta propiedad permite indicar el campo de una tabla de la

base de datos que se mostrará en nuestro control.

6. DataTextFormatString: Esta propiedad hace referencia a la cadena de formato que nos indica cómo se mostrarían los datos en el control.

7. DataValueField: Esta propiedad permite referenciar al campo del origen de

datos y que nos da el valor de cada elemento de la lista.

8. DataBind(): Esta propiedad enlaza el origen de datos de un control de servidor para ser utilizado por los controles secundarios.

9. SelectedIndex: Esta propiedad determina el Índice de un elemento

seleccionado.

10. SelectedItem: Esta propiedad determina el elemento seleccionado.

11. SelectedValue: Esta propiedad determina el valor del elemento seleccionado (el dato que se guardó en el DataValueField), realiza lo mismo que la propiedad SelectedItem.

Ejercicio: Desarrollar la siguiente aplicación con Conexión a Datos: VB 1. Crear una aplicación para Inicio de Sesión con Datos guardados en una

Base de Datos que contendrá la tabla Usuarios:



• Crear la Base de Datos “Senati3”, la Tabla “Usuarios”, Insertar los

Registros y Visualizarlos /* Crearemos la Base de Datos */ create database senati3 /* Abrimos la Base de Datos */ use senati3 /* Creamos la tabla Usuarios */ create table Usuarios ( usu_codigo integer primary key not null, usu_username varchar(20), usu_password varchar(20) ) /* Insertamos los siguientes Registros a la Tabla Usuarios */ insert into Usuarios values(1,'eramirez','1234') insert into Usuarios values(2,'oespinoza','5678') insert into Usuarios values(3,'hnavarro','9123') insert into Usuarios values(4,'hmamanchura','4567') /* Visualizamos la Información Insertada */ Select * from Usuarios

2. Desarrollar la aplicación en ASP.Net

Menú Archivo – Nuevo Sitio Web – Sitio Web Vacío de ASP.Net

3. Insertar un Formulario Web Forms “Default.aspx” Agregar – Nuevo Elemento – Formulario Web Forms

4. Desarrollar el siguiente diseño.



5. En los objetos indicar los siguientes parámetros:


Etiqueta – Label1 Text ACCESO AL SISTEMA

Etiqueta – Label2 Text Usuario

Etiqueta – Label3 Text Password

Imagen – Image1 ImageUrl ~/imagenes/logo01.jpg

Cuadro de Texto – TextBox1 (ID) ctUsuario

Cuadro de Texto – TextBox2 (ID)

TextMode

ctPassword

Password

Botón – Button1 (ID)

Text

btIngresar

Ingresar al Sistema


Text

btLimpiar

Limpiar Cuadros

6. Ingresar el siguiente código para los objetos:

Imports System.Data.SqlClient Partial Class _Default Inherits System.Web.UI.Page Dim conexion As New SqlConnection("Server=DESKTOP-FRUVH1J\SQLEXPRESS;Database=Senati3;uid=sa;password=root") Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load End Sub Protected Sub btIngresar_Click(sender As Object, e As EventArgs) Handles btIngresar.Click conexion.Open() Dim cmd As New SqlCommand("Select usu_password from Usuarios where usu_username='" + ctUsuario.Text + "'", conexion) Dim dr As SqlDataReader



dr = cmd.ExecuteReader If (dr.Read) Then If (dr(0).ToString = ctPassword.Text) Then Response.Write("Bienvenido al Sistema") Else Response.Write("Password Incorrecto") End If Else Response.Write("Usuario no Existe") End If conexion.Close() End Sub Protected Sub btLimpiar_Click(sender As Object, e As EventArgs) Handles btLimpiar.Click ctUsuario.Text = "" ctPassword.Text = "" End Sub End Class

7. Al ejecutarlo, ingresar el usuario y el password, por ejemplo Usuario:

“eramirez” y password:”1234”, y presionar el botón “Ingresar al Sistema”, Se verá que aparece el mensaje de “Bienvenido al Sistema” asignada en el código por el método Response.Write(“Bienvenido al Sistema”), si lo que se desea es que lo traslade a otra página utilice lo siguiente: Reponse.Redirect (“Default2.aspx”)



Desarrollar la siguiente aplicación para Visualizar y Guardar Registros en una Tabla: 1. Crear la Base de Datos con la Siguiente estructura.

2. /* Crearemos la Base de Datos */ create database senati4 /* Abrimos la Base de Datos */ use senati4 /* Creamos la tabla Usuarios */ create table Usuarios ( usu_id integer identity primary key not null, usu_usuario varchar(20), usu_clave varchar(6), personal_id integer ) /* Creamos la tabla Personal */ create table Personal ( personal_id integer primary key not null, personal_nombre varchar(50), personal_apepaterno varchar(50), personal_apematerno varchar(50), personal_dni varchar(8), personal_sexo varchar(20) ) /* Insertamos los siguientes Registros a la Tabla Usuarios */ insert into Usuarios values('eramirez','1234',1) insert into Usuarios values('oespinoza','5678',2) insert into Usuarios values('hnavarro','9123',3) insert into Usuarios values('hmamanchura','4567',4) /* Visualizamos la Información Insertada */ Select * from Usuarios /* Insertamos los siguientes Registros a la Tabla Personal */ insert into Personal values(1,'Eduardo','Ramirez','Corrales','40219876','Masculino') insert into Personal values(2,'Omar','Espinoza','Prueba','98652314','Masculino')



insert into Personal values(3,'Hervert','Navarro','Prueba','44215578','Masculino') insert into Personal values(4,'Hugo','Mamanchura','Prueba','45148593','Masculino') Select * From Personal

3. Desarrollar la aplicación en ASP.Net

Menú Archivo – Nuevo Sitio Web – Sitio Web Vacío de ASP.Net

4. Insertar un Formulario Web Forms “Default.aspx” Agregar – Nuevo Elemento – Formulario Web Forms

5. Desarrollar el siguiente diseño: Buscamos en nuestra Barra de Herramientas – Datos • Seleccionar SqlDataSource (Arrastrarlo a la Página Web)

Se le pondrá en ID = dsUsuarios.



6. Configurar el origen de datos del objeto.

Realizar los pasos aprendidos anteriormente:

7. Seleccionar su Servidor; utilizar la Autenticidad de SQL Server y seleccionar

la Base de Datos “Senati4”.

8. Dar clic en “Siguiente” y poner de nombre a la

conexión=”ConexionDemostracion”



9. Darle clic a siguiente; y en la ventana seleccione la Tabla: Usuarios, pero

solo se marcara los campos: usu_id, usu_usuario y usu_clave. Observar la sentencia Select que se ha creado:

10. Darle clic a Siguiente y luego presionar el botón de “Consulta de Prueba,

solo que dar clic al botón “Finalizar”.



11. Ingresar los siguientes controles:

12. En los objetos indicar los siguientes parámetros:


Etiqueta – Label1 Text REGISTRO DE USUARIOS

Imagen – Image1 ImageUrl ~/imagenes/logo01.jpg

GridView (ID) gvUsuarios

13. Al objeto GridView, se deberá configurar su origen de datos, seleccionar el

“dsUsuarios” y en el Formato Automático se le dará el tipo “Pizarra”.



14. Deberá de quedar hasta este momento de la siguiente manera.

15. Ejecutar el proyecto en el navegador, este será el resultado:

16. Insertar una tabla de 5x2 con un tamaño de 400px.



17. Realizar el siguiente diseño, agregando los controles y sus propiedades:


Etiqueta – Label1 Text Personal :

Etiqueta – Label2 Text Usuario :

Etiqueta – Label3 Text Password :

DropDownList (ID) dlPersonal

Cuadro de Texto – TextBox1 (ID) ctUsuario

Cuadro de Texto – TextBox2 (ID) ctPassword


Text

btGuardar

Guardar


Text

btLimpiar

Limpiar



18. Insertar otro SqlDataSource al cual le pondremos como ID: dsPersonal.

19. Realizar la conexión al origen de datos para el control dsPersonal.

20. Utilizar la misma cadena de conexión “ConexionDemostracion”, luego

“Siguiente”.

21. Seleccionar la primera opción “Especificar una Instrucción SQL o un

Procedimiento Personalizado”, luego “Siguiente”.

22. Seleccionar “Generador de Consultas”.



23. Agregar la Tabla Personal, Luego seleccione solo los campos_

Personal_id, Personal_nombre, Personal_apepaterno, Personal_apematerno.

24. Modificar la consulta SQL Select, de la siguiente manera:

Select Personal_id, Peronal_nombre + ‘ ‘ + Personal_apepaterno + ‘ ‘ + ‘ ‘ + Personal_apematerno As Nombres From Personal

25. Darle Aceptar – Siguiente. Seleccionar “Consulta de Prueba” para verificar como queda la consulta. Luego “Finalizar”.



26. Enlazar el DropDownList (dlPersonal) con el origen de datos dsPersonal.

27. Probar la aplicación y debe de quedar de la siguiente manera:



28. Ingresar el siguiente código para el botón btGuardar.

Imports System.Data.SqlClient Imports System.Data Partial Class _Default Inherits System.Web.UI.Page Protected Sub btGuardar_Click(sender As Object, e As EventArgs) Handles btGuardar.Click Dim cn As New SqlConnection cn.ConnectionString = dsPersonal.ConnectionString Dim cmd As New SqlCommand("Insert Into Usuarios (usu_usuario,usu_clave,personal_id) values (@usu,@cla,@perid)", cn) cmd.Parameters.AddWithValue("@usu", SqlDbType.VarChar).Value = Me.ctUsuario.Text cmd.Parameters.AddWithValue("@cla", SqlDbType.VarChar).Value = Me.ctPassword.Text cmd.Parameters.AddWithValue("@perid", SqlDbType.Int).Value = Me.dlPersonal.SelectedValue Dim cant As Integer Using cn cn.Open() cant = cmd.ExecuteNonQuery End Using gvUsuarios.DataBind() End Sub End Class

29. Ejecutar la aplicación e ingresar un nuevo usuario para acceso al sistema,

seleccionando a un personal, Ingresando el Usuario o Login de Acceso que tendrá y una Clave de máximo 6 caracteres, Finalmente darle clic en el Botón Guardar y observar con detenimiento el resultado.



5.3. PROGRAMAR OPERACIONES DE CONSULTAS Y

ACTUALIZACIÓN DE DATOS: Se debe de manejar con cuidado el manejo de datos dentro de una página ASP.Net, ya que como le hemos mencionado anteriormente, debemos de abrir y cerrar la conexión a datos según se requiera. Ahora se manejara con una capa de trabajo (Una Clase) que permitirá con menor cantidad de código, realizar las acciones en la página .aspx. Para ello deberá hacer lo siguiente: 1. Crear la base de datos “Senati5” con la siguiente estructura: /* Crear Base de Datos */ create database Senati5 /* Abrir la Base de Datos */ use Senati5 /* Crear tabla Alumnos*/ Create table Alumnos ( alu_codigo integer primary key not null, alu_nombre varchar (50), alu_apellidopat varchar (50), alu_apellidomat varchar(50), alu_dni varchar(8) ) /* Crear la Tabla Profesor */ create table Profesor ( pro_codigo integer primary key not null, pro_nombre varchar(50), pro_apellidopat varchar (50), pro_apellidomat varchar(50), pro_dni varchar(8) ) /* Crear la tabla Cursos */



create table Cursos ( cur_codigo integer primary key not null, cur_nombre varchar (50) ) /* Insertar Datos a la Tabla Alumnos */ Insert Into Alumnos Values(1,'David','Cubas','Rivas','41528695') Insert Into Alumnos Values(2,'Sara','Gonzales','Robles','74251486') Insert Into Alumnos Values (3,'Raúl','Rodriguez','Ortiz','75413021') /* Insertar Datos a la Tabla Profesor */ Insert Into Profesor Values (1,'Luciana','Ramirez','Garcia','40219876') Insert Into Profesor Values (2,'Joaquin','Arce','Corrales','41547842') Insert Into Profesor Values (3,'Nidia','Garcia','Cabrejos','40985136') /* Insertar Datos a la Tabla Cursos */ Insert Into Cursos Values (1,'Lenguaje de Programación') Insert Into Cursos Values (2,'Desarrollo de Software') Insert Into Cursos Values (3,'Base de Datos')

/* Visualizar los Registros de las Tablas para verificar */ Select * From Alumnos Select * From Profesor Select * From Cursos

2. Crear un nuevo Proyecto de Web. Menú Archivo – Nuevo Sitio Web – Sitio Web Vacío de ASP.Net. Añada un Formulario Web Forms “Default.aspx”.

3. Generar un archivo de Clase en el cual se trabajara el código. Clic derecho al proyecto – Agregar – Agregar Nuevo Elemento. En la ventana que aparece seleccionar “Clase” y se le pondrá de nombre “Conexión.vb”



4. Aparecerá un cuadro de mensaje indicando que el proyecto no tiene la

carpeta de código y si es que se desea que se cree automáticamente, Indique que “Si”.

5. Observar que se creó la carpeta de Código en la cual se encuentra el

archivo de Clase “Conexión.vb”, al cual se le dará clic para empezar a programarlo.

6. Realizar el siguiente código para crear las Funciones necesarias para la

página asp.



7. Dentro de la Clase “Conexión.vb” se creará la Función Conectar. 'Función Conectar Public Function Conectar() As SqlConnection Dim cadena As String

cadena = ConfigurationManager.ConnectionStrings("Sistema").ConnectionString Dim cn As New SqlConnection(cadena) Try cn.Open() MsgBox("Conexión Abierta") Return cn Catch ex As Exception MsgBox(ex.Message) Return cn End Try End Function 8. Dentro de la Clase “Conexión.vb” crear la Función Desconectar. 'Función Desconectar Public Function Desconectar() As Boolean Try Dim cadena As String cadena = ConfigurationManager.ConnectionStrings("Sistema").ConnectionString Dim cn As New SqlConnection(cadena) cn.Close() MsgBox("Conexión Cerrada") Return True Catch ex As Exception MsgBox(ex.Message) Return False End Try End Function 9. Dentro de la Clase “Conexión.vb” crear la Función Mostrar.



'Función Mostrar Public Function Mostrar(ByVal tabla As String) As DataTable Dim sql As String = "Select * From " & tabla Dim conn As New SqlConnection conn = Conectar() Dim cmd As New SqlCommand(sql, conn) Dim adp As New SqlDataAdapter(cmd) Dim t As New DataTable Try adp.Fill(t) Return t Catch ex As Exception MsgBox(ex.Message) Return t Finally conn.Close() End Try End Function 10. Dentro de la Clase “Conexión.vb” crear la Función Insertar. 'Función Insertar Public Function Insertar(ByVal datos() As String, ByVal tabla As String) As Boolean Dim sql As String = "" Dim conn As New SqlConnection conn = Conectar() Select Case tabla Case "Alumnos" sql = "Insert Into Alumnos values (" & datos(0) & ",'" & datos(1) & "','" & datos(2) & "','" & datos(3) & "','" & datos(4) & "')" Case "Profesor" sql = "Insert Into Profesor values (" & datos(0) & ",'" & datos(1) & "','" & datos(2) & "','" & datos(3) & "','" & datos(4) & "')" Case "Cursos" sql = "Insert Into Cursos values (" & datos(0) & ",'" & datos(1) & "')" End Select Dim cmd As New SqlCommand(sql, conn) Try cmd.ExecuteNonQuery() Return True Catch ex As Exception MsgBox(ex.Message) Return False Finally conn.Close() End Try End Function



11. Dentro de la Clase “Conexión.vb” crear la Función Eliminar.

'Función Eliminar Public Function Eliminar(ByVal valor_id As String, ByVal tabla As String) As Boolean Dim sql As String = "" Dim conn As New SqlConnection conn = Conectar() Select Case tabla Case "Alumnos" sql = "Delete from Alumnos where alu_codigo='" & valor_id & "';" Case "Profesor" sql = "Delete from Profesor where pro_codigo='" & valor_id & "';" Case "Cursos" sql = "Delete from Cursos where cur_codigo='" & valor_id & "';" End Select Dim cmd As New SqlCommand(sql, conn) Try cmd.ExecuteNonQuery() Return True Catch ex As Exception MsgBox(ex.Message) Return False Finally conn.Close() End Try End Function 12. Dentro de la Clase “Conexión.vb” crear la Función Modificar.

'Función Modificar Public Function Modificar(ByVal datos() As String, ByVal tabla As String) As Boolean Dim sql As String = "" Dim conn As New SqlConnection conn = Conectar() Select Case tabla Case "Alumnos" sql = "Update Alumnos set alu_nombre='" & datos(1) & "',alu_apellidopat='" & datos(2) & "',alu_apellidomat='" & datos(3) & "',alu_dni='" & datos(4) & "' where alu_codigo=" & datos(0) & ";" Case "Profesor" sql = "Update Profesor set pro_nombre='" & datos(1) & "',pro_apellidopat='" & datos(2) & "',pro_apellidomat='" & datos(3) & "',pro_dni='" & datos(4) & "' where pro_codigo=" & datos(0) & ";" Case "Cursos" sql = "Update Cursos set cur_nombre='" & datos(1) & "' where alu_codigo=" & datos(0) & ";"



End Select Dim cmd As New SqlCommand(sql, conn) Try cmd.ExecuteNonQuery() Return True Catch ex As Exception MsgBox(ex.Message) Return False Finally conn.Close() End Try End Function 13. El archivo de clase quedaría completo, ahora solo quedaría crear la

aplicación visual en la página web.

14. Modificar el archivo Web.Config e incluir el siguiente código:

<connectionStrings> <add name="Sistema" connectionString="Server=DESKTOP-FRUVH1J\SQLEXPRESS;database=senati5;uid=sa;password=root"/>

</connectionStrings>

15. Programar la página “Default.aspx”. En esta primera página se ubicaran dos botones que le permitirán conectarse y desconectarse de la base de datos y un Label para que muestre el resultado de la acción:

16. Ingresar el código para “General” de la página “Default.aspx”

Partial Class _Default



Inherits System.Web.UI.Page Dim con As New Conexión 17. Ingresar el código para el botón btConectar. Protected Sub btConectar_Click(sender As Object, e As EventArgs) Handles btConectar.Click Try con.Conectar() Label1.Text = "Conectado" 'Response.Redirect("Default2.aspx") Catch ex As Exception Label1.Text = "No se Pudo Conectar" End Try End Sub Poner el código de Response en comentario ya que aún no se ha creado la página Default2.aspx, se activará cuando esté terminado el proyecto. 18. Ingresar el código para el botón btDesconectar. Protected Sub btDesconectar_Click(sender As Object, e As EventArgs) Handles btDesconectar.Click If (con.Desconectar().ToString) Then Label1.Text = "Desconectado" Else Label1.Text = "No se Pudo Desconectar" End If End Sub 19. Desactivar en el archivo de clase el mensaje de Conexión Abierta y

Cerrada que se encuentra en la Función Conectar y la Función Desconectar, ponerlo como comentario, para que no esté apareciendo a cada rato.

MsgBox("Conexión Abierta") MsgBox("Conexión Cerrada") 20. El resultado sería el siguiente:



21. Ingresar una página web ASP.Net “Default2”, donde se ingresara 1 Label, 3

LinkButton, 1 GridView y 3 Botones de Comando.


Etiqueta – Label1 Text VISTA DE REGISTROS LinkButton1 Text Alumnos LinkButton1 Text Profesor: LinkButton1 Text Cursos GridView (ID) gvRegistros

Botón – Button1 (ID) Text

btAlumnos Alumnos


btProfesor Profesor


btCursos Cursos

22. Ingresar el código para cada LinkButton y la página.

Partial Class Default2 Inherits System.Web.UI.Page Dim con As New Conexión LinkButton1 Protected Sub LinkButton1_Click(sender As Object, e As EventArgs) Handles LinkButton1.Click Me.gvRegistros.DataSource = con.Mostrar("Alumnos") Me.gvRegistros.DataBind() End Sub LinkButton2 Protected Sub LinkButton2_Click(sender As Object, e As EventArgs) Handles LinkButton2.Click Me.gvRegistros.DataSource = con.Mostrar("Profesor") Me.gvRegistros.DataBind() End Sub



LinkButton3 Protected Sub LinkButton3_Click(sender As Object, e As EventArgs) Handles LinkButton3.Click Me.gvRegistros.DataSource = con.Mostrar("Cursos") Me.gvRegistros.DataBind() End Sub

23. Ejecutar la aplicación y darle clic a cada LinkButton para que muestre cada Tabla.

24. Agregar 3 páginas más “Default3.aspx” (Alumnos), “Default4.aspx”

(Profesor) y “Default5.aspx” (Cursos) e ingresar el código para los Button:

Protected Sub btAlumnos_Click(sender As Object, e As EventArgs) Handles btAlumnos.Click Response.Redirect("Default3.aspx") End Sub Protected Sub btProfesor_Click(sender As Object, e As EventArgs) Handles btProfesor.Click Response.Redirect("Default4.aspx") End Sub Protected Sub btCursos_Click(sender As Object, e As EventArgs) Handles btCursos.Click Response.Redirect("Default5.aspx") End Sub

25. Diseñar la página “Default3.aspx” y repetir el mismo diseño por cada

página que llamará los botones.


Etiqueta – Label1 Text ALUMNOS Etiqueta – Label2 Text Código : Etiqueta – Label3 Text Nombre :



Etiqueta – Label4 Text Apellido Paterno : Etiqueta – Label5 Text Apellido Materno : Etiqueta – Label6 Text DNI : Cuadro de Texto - TextBox (ID) ctCodigo Cuadro de Texto - TextBox (ID) ctNombre Cuadro de Texto - TextBox (ID) ctApaterno Cuadro de Texto - TextBox (ID) ctAmaterno Cuadro de Texto - TextBox (ID) ctDni Button1 (ID)

Text btAgregar Agregar

Button2 (ID) Text

btLimpiar Limpiar

26. Ingresar el siguiente código para la página y los botones: Partial Class Default3 Inherits System.Web.UI.Page Dim con As New Conexion

Botón Agregar: Protected Sub btAgregar_Click(sender As Object, e As EventArgs) Handles btAgregar.Click Dim datos() As String = {Me.ctCodigo.Text, Me.ctNombre.Text, Me.ctApaterno.Text, Me.ctAmaterno.Text, Me.ctDni.Text} 'crear vector con los datos Try con.Insertar(datos, "Alumnos") Response.Write("Datos Ingresados") Catch ex As Exception Response.Write("No se pudo Ingresar los Datos") End Try End Sub

Botón Limpiar: Protected Sub btLimpiar_Click(sender As Object, e As EventArgs) Handles btLimpiar.Click



ctCodigo.Text = "" ctNombre.Text = "" ctApaterno.Text = "" ctAmaterno.Text = "" ctDni.Text = "" End Sub

27. Ejecutar la aplicación e ingresar un nuevo Alumno:

28. Verificar en su base de datos SQL, en la tabla Alumnos si se ingresó el

Nuevo Registro:

29. Desarrollar Finalmente el Botón Eliminar y Modificar, así mismo las páginas

para el mantenimiento de Profesores y Cursos, a manera de ejercicio.



5.4. IMPLEMENTAR DE UN CARRITO DE COMPRAS. Para el Desarrollo de un Carrito de Compras se debe de considerar varios aspectos, desde la creación de la base de datos, la relación que tendrán las tablas entre sí, los módulos, las clases, las paginas aspx y el diseño que se empleará. Se realizará pasa a paso: 1. Creación de la Base de Datos (SQL) y sus tablas.

/* Creación de la Base de Datos para nuestro Carrito de Compra */ create database carritocomprasenati use carritocomprasenati /* Crear la tabla Usuarios */ create table usuarios ( Usu_codigo Char (10) primary key not null, Usu_password Char (6), Usu_foto Varchar (50) ) /* Crear la tabla Clientes */ create table Clientes ( Cli_codigo Char (10) primary key not null, Cli_dni Char (8), Cli_nombresapellidos Varchar (50), Cli_email Varchar (50) ) /* Crear la tabla Productos */ Create table Productos ( Pro_codigo Char (10) primary key not null, Pro_descripcion Varchar (100), Pro_precio Decimal (12,2), Pro_stock Int, Pro_foto Varchar (50) ) /* Crear la tabla Ventas */ Create table Ventas ( Ven_codigo Char (10) primary key not null, Ven_fecha Date, Cli_codigo Char (10), Ven_igv Float, Ven_subtotal Float, Ven_totalventa Float, Ven_estado Varchar (50) ) /* Crear la tabla Detalle_Ventas */



Create table Detalle_Venta ( Ven_codigo Char (10) not null, Pro_codigo Char (10), Dven_cantidad Float, Dven_precio Float, Dven_subtotal Float )

2. Crear el Diagrama y la Relación entre tablas. Diagrama de Base de Datos (En el mensaje que aparece dígale que sí) – Nuevo Diagrama de Base de Datos. Se procederá a agregar las tablas y crear la relación entre ellas.

3. Crear los Procedimientos Almacenados para las operaciones que se

realizarán: - PA_BuscarClientePorDni

/* Procedmiento Almacendao PA_BuscarClientePorDni */ Create Procedure PA_BuscarClientePorDni ( @Cli_dni char (8) ) As Begin Select * From Clientes Where Cli_dni=@cli_dni End

- PA_Cliente (Insertar Nuevo Cliente). /* Procedmiento Almacendao PA_Cliente (Insertar Nuevo Cliente) */

Create Procedure PA_Cliente ( @Cli_codigo Char (10), @Cli_dni Char (8),



@Cli_nombresapellidos Varchar (50), @Cli_email Varchar (50) ) As Begin

Insert Into Clientes (Cli_codigo, Cli_dni, Cli_nombresapellidos, Cli_email) Values (@Cli_codigo, @Cli_dni, @Cli_nombresapellidos, @Cli_email)

End

- PA_Ventas (Insertar Nueva Venta). /* Procedmiento Almacendao PA_Ventas (Insertar Nueva Venta) */ Create Procedure PA_Ventas ( @Ven_codigo Char (10), @Ven_fecha Date, @Cli_codigo Char (10), @Ven_igv Float, @Ven_subtotal Float, @Ven_totalventa Float, @Ven_estado Varchar (50) ) As Begin

Insert Into Ventas (Ven_codigo, Ven_fecha, Cli_codigo, Ven_igv, Ven_subtotal, Ven_totalventa, Ven_estado) Values (@Ven_codigo, @Ven_fecha, @Cli_codigo, @Ven_igv, @Ven_subtotal, @Ven_totalventa, @Ven_estado)

End

- PA_DetalleVenta (Insertar Nuevo Detalle de Venta). /* Procedmiento Almacendao PA_DetalleVenta (Insertar Nuevo Detalle de Venta) */ Create Procedure PA_DetalleVenta ( @Ven_codigo Char (10), @Pro_codigo Char (10), @Dven_cantidad Float, @Dven_precio Float, @Dven_subtotal Float ) As Begin Insert Into Detalle_Venta (Ven_codigo, Pro_codigo, Dven_cantidad, Dven_precio, Dven_subtotal) Values (@Ven_codigo, @Pro_codigo, @Dven_cantidad, @Dven_precio, @Dven_subtotal) End

- PA_Producto (Insertar Nuevo Producto).



/* Procedmiento Almacendao PA_Producto (Insertar Nuevo Producto) */ Create Procedure PA_Producto ( @Pro_codigo Char (10), @Pro_descripcion Varchar (100), @Pro_precio Decimal (12,2), @Pro_stock Int, @Pro_foto Varchar (50) ) As Begin Insert Into Productos (Pro_codigo, Pro_descripcion, Pro_precio, Pro_stock, Pro_foto) Values (@Pro_codigo, @Pro_descripcion, @Pro_precio, @Pro_stock, @Pro_foto) End

- PA_Usuario (Insertar Nuevo Usuario). /* Procedmiento Almacendao PA_Usuario (Insertar Nuevo Usuario) */ Create Procedure PA_Usuario ( @Usu_codigo Char (10), @Usu_password Char (6), @Usu_foto Varchar (50) ) As Begin Insert Into Usuarios (Usu_codigo, Usu_password, Usu_foto) Values (@Usu_codigo, @Usu_password, @Usu_foto) End

- PA_Productos_BuscarCodigo (Buscar Producto por Código). /* Procedmiento Almacendao PA_Productos_BuscarCodigo (Buscar Producto por Código ) */ Create Procedure PA_Productos_BuscarCodigo ( @Pro_codigo Char (10) ) As Select * From Productos Where Pro_codigo=@Pro_codigo

- PA_Productos_Listar (Listar la Tabla Productos). /* Procedmiento Almacendao PA_Productos_Listar (Listar la Tabla Productos) */ Create Procedure PA_Productos_Listar As Select * From Productos

Insertar algunos registros a las tablas. Ver el Query completo en la Carpeta Capitulo 5 – Carrito de Compras.



4. Para crear una nueva aplicación web, se deberá de hacer lo siguiente:

Seleccionar Menú Archivo – Nuevo Proyecto. Luego Indicar qué tipo de proyecto se creará, Plantillas – Visual Basic – Web: Aplicación web Vacía de ASP.Net

5. Agregar un proyecto nuevo al proyecto, realizando los siguientes pasos: Menú Archivo – Agregar – Nuevo Proyecto.

6. En la ventana que aparecerá, seleccionar: Visual Basic – Windows –

Biblioteca de Clases. Ponerle de nombre ComponenteDatos



7. Ahora darle clic derecho al nuevo proyecto credo de Windows, para poder

agregar los demás componentes al proyecto, para ello de clic derecho al proyecto Windows – Agregar – Nuevo Proyecto. Realizar los mismos pasos para agregar otro componente y se le dará el nombre de “ComponenteEntidad”.

8. Realizar los mismos pasos para agregar el componente “ComponenteNegocio”.



9. Empezar con el ComponenteEntidad, la cual está compuesta por cuatro

capas: Cliente.vb, DetalleVenta.vb, Productos.vb y Venta.vb.

10. En la clase Cliente.vb, tenemos los 4 parámetros código, DNI, Nombre y Email a los cuales será el siguiente código: Public Class Cliente Private _Codigo As String Private _Dni As String Private _Nombres As String Private _Email As String Public Property Codigo() As String Get Return _Codigo End Get Set(ByVal value As String) _Codigo = value End Set End Property Public Property Dni() As String Get Return _Dni End Get Set(ByVal value As String) _Dni = value End Set End Property Public Property Nombres() As String Get Return _Nombres



End Get Set(ByVal value As String)

_Nombres = value End Set End Property Public Property Email() As String Get Return _Email End Get Set(ByVal value As String) _Email = value End Set End Property Public Sub New() End Sub Public Sub New(ByVal aCodigo As String) _Codigo = aCodigo End Sub Public Sub New(ByVal aCodigo As String, ByVal aDni As String, ByVal aNombres As String, ByVal aEmail As String) _Codigo = aCodigo _Dni = aDni _Nombres = aNombres _Email = aEmail End Sub End Class 11. Lo mismo se deberá hacer para Producto.vb Public Class Productos Private _codproducto As String Private _descripcion As String Private _precio As Double Private _cantidad As Integer Private _foto As String Public Property codproducto() As String Get Return _codproducto End Get Set(ByVal value As String) _codproducto = value End Set End Property Public Property descripcion() As String Get



Return _descripcion End Get Set(ByVal value As String) _descripcion = value End Set End Property Public Property precio() As Double Get Return _precio End Get Set(ByVal value As Double) _precio = value End Set End Property Public Property cantidad() As Integer Get Return _cantidad End Get Set(ByVal value As Integer) _cantidad = value End Set End Property Public Property foto() As String Get Return _foto End Get Set(ByVal value As String) _foto = value End Set End Property Public Sub New(ByVal ccodproducto As String, ByVal cdesproducto As String, ByVal cprecio As Double, ByVal ccantidad As Integer, ByVal cfoto As String) _codproducto = ccodproducto _descripcion = cdesproducto _precio = cprecio _cantidad = ccantidad _foto = cfoto End Sub End Class

12. Lo mismo se deberá de hacer para Venta. Public Class Venta 'VEN_Codigo, VEN_Fecha, CLIE_Codigo, VEN_IGV, VEN_SubTotal, VEN_TotalVenta, VEN_Estado Private _Codigo As String Private _Fecha As String



Private _CodigoClie As String Private _IGV As Double Private _SubTotal As Double Private _TotalVenta As Double Private _Estado As String Public Property Codigo() As String Get Return _Codigo End Get Set(ByVal value As String) _Codigo = value End Set End Property Public Property Fecha() As String Get Return _Fecha End Get Set(ByVal value As String) _Fecha = value End Set End Property Public Property CodigoClie() As String Get Return _CodigoClie End Get Set(ByVal value As String) _CodigoClie = value End Set End Property Public Property TotalVenta() As Double Get Return _TotalVenta End Get Set(ByVal value As Double) _TotalVenta = value End Set End Property Public Property SubTotal() As Double Get Return _SubTotal End Get Set(ByVal value As Double) _SubTotal = value End Set End Property Public Property IGV() As Double



Get Return _IGV End Get Set(ByVal value As Double) _IGV = value End Set End Property Public Property Estado() As String Get Return _Estado End Get Set(ByVal value As String) _Estado = value End Set End Property Public Sub New() End Sub Public Sub New(ByVal aCodigo As String) _Codigo = aCodigo End Sub Public Sub New(ByVal aCodigo As String, ByVal aFecha As String, ByVal aCodigoClie As String, ByVal aTotalVenta As Double, ByVal aSubTotal As Double, ByVal aIgv As Double, ByVal aEstado As String) _Codigo = aCodigo _CodigoClie = aCodigoClie _Estado = aEstado _Fecha = aFecha _IGV = aIgv _SubTotal = aSubTotal _TotalVenta = aTotalVenta End Sub Dim detalle As List(Of DetalleVenta) = New List(Of DetalleVenta) Public Property DetalleVenta() As List(Of DetalleVenta) Get Return detalle End Get Set(value As List(Of DetalleVenta)) detalle = value End Set



End Property End Class 13. Lo mismo se deberá hacer para DetalleVenta.vb Public Class DetalleVenta 'VEN_Codigo, PRO_Codigo, DV_Cantidad, DV_Precio, DV_SubTotal Private _Codigo As String Private _CodigoPro As String Private _Cantidad As Double Private _Precio As Double Private _SubTotal As Double Public Property Codigo() As String Get Return _Codigo End Get Set(ByVal value As String) _Codigo = value End Set End Property Public Property CodigoPro() As String Get Return _CodigoPro End Get Set(ByVal value As String) _CodigoPro = value End Set End Property Public Property Cantidad() As Double Get Return _Cantidad End Get Set(ByVal value As Double) _Cantidad = value End Set End Property Public Property Precio() As Double Get Return _Precio End Get Set(ByVal value As Double) _Precio = value End Set End Property Public Property SubTotal() As Double Get Return _SubTotal



End Get Set(ByVal value As Double) _SubTotal = value End Set End Property Public Sub DetalleVenta() End Sub End Class 14. Ahora siga con el ComponenteDatos, la cual está compuesta por cinco

capas: ClienteCD.vb, Conexion.vb, Database.vb, ProductoDA.vb. y VentasCD.vb. A este ComponenteDatos vamos a importar la biblioteca de clases del componenteEntidad, para ello se le dará clic derecho al ComponenteDatos – Agregar Referencia.

Seleccionar ComponenteEntidad y aceptamos.



15. Crear la Clase Conexión.vb dentro de la entidad. Public Class Conexion Private Shared ReadOnly _instancia As Conexion = New Conexion Private Sub New() End Sub Public Shared ReadOnly Property Instancia() As Conexion Get Return _instancia End Get End Property Public Function cadenaconexion() As String Return "Server=DESKTOP-FRUVH1J\SQLEXPRESS;database=BDCANASTA;uid=sa;password=root" 'Return "Data Source=.;Initial Catalog=BDCANASTA;Integrated Security=True" End Function End Class

16. Crear la Clase Cliente, en la cual tendrá la Función InsertarCliente (para agregar clientes a nuestra tabla), UltimoCod (para que busque el ultimo código de cliente de la tabla y se genere el código siguiente) y la Función BuscarPorDni (para buscar al cliente de la tabla por el campo DNI) ya trabajando con los procedimientos almacenados.

Imports System.Data Imports System.Data.SqlClient Imports ComponenteEntidad Public Class ClienteCD Private Shared ReadOnly _instancia As New ClienteCD Public Shared ReadOnly Property Instancia() As ClienteCD Get Return _instancia End Get End Property



Public Function InsertarCliente(ByVal clie As Cliente) As Boolean Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() '@Codigo, @Dni,@nombres, @email Dim Sqlcmd As New SqlCommand("PA_Cliente", cnn) Sqlcmd.CommandType = CommandType.StoredProcedure Sqlcmd.Parameters.Add("@Codigo", SqlDbType.Char, 10).Value = clie.Codigo Sqlcmd.Parameters.Add("@Dni", SqlDbType.Char, 10).Value = clie.Dni Sqlcmd.Parameters.Add("@nombres", SqlDbType.VarChar, 50).Value = clie.Nombres Sqlcmd.Parameters.Add("@email", SqlDbType.VarChar, 50).Value = clie.Email Sqlcmd.ExecuteNonQuery() cnn.Close() cnn.Dispose() Return True End Function Public contador As String Public Function UltimoCod() As List(Of Cliente) Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim sqlcmd As New SqlCommand("select count(CLI_Codigo),max (CLI_Codigo) from CLIENTES", cnn) sqlcmd.CommandType = CommandType.Text Dim PaTable As SqlDataReader = sqlcmd.ExecuteReader Dim Coleccion As New List(Of Cliente) While PaTable.Read Me.contador = Convert.ToString(PaTable.GetInt32(0)) If contador = "0" Then Coleccion.Add(New Cliente(PaTable.GetInt32(0).ToString())) Else Coleccion.Add(New Cliente(PaTable.GetString(1))) End If End While cnn.Close() cnn.Dispose() Return Coleccion End Function Public Function BuscarPorDni(ByVal dni As String) As List(Of Cliente) Dim dsDatos As New DataSet Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim sqlcmd As New SqlCommand("[PA_BuscarClientePorDni]", cnn) sqlcmd.CommandType = CommandType.StoredProcedure sqlcmd.Parameters.Add("@Dni", SqlDbType.Char, 10).Value = dni Dim PaTable As SqlDataReader = sqlcmd.ExecuteReader Dim Coleccion As New List(Of Cliente)



While PaTable.Read Coleccion.Add(New Cliente(PaTable.Item(0), PaTable.Item(1), PaTable.Item(2), PaTable.Item(3))) End While cnn.Close() cnn.Dispose() Return Coleccion End Function End Class 17. Agregar la clase ProductoDA.vb, que contendrá las funciones: ListarTodos

(para visualizar todos los productos de la tabla), ListarporCodigo (para mostrar los productos correspondientes a un código determinado), Insertar (para agregar nuevos productos a la tabla), Editar (para modificar algún producto que se encuentre en la tabla) y Eliminar (para eliminar algún producto seleccionado de la tabla).

Imports System.Data Imports System.Data.SqlClient Imports ComponenteEntidad Public Class ProductosDA Private Shared ReadOnly _instancia As New ProductosDA Public Shared ReadOnly Property Instancia() As ProductosDA Get Return _instancia End Get End Property Public Function ListarTodos() As List(Of Productos) Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim sqlcmd As New SqlCommand("pa_productos_Listar", cnn) sqlcmd.CommandType = CommandType.StoredProcedure Dim PaTable As SqlDataReader = sqlcmd.ExecuteReader Dim Coleccion As New List(Of Productos) While PaTable.Read Coleccion.Add(New Productos(PaTable.Item(0), PaTable.Item(1), PaTable.Item(2), PaTable.Item(3), PaTable.Item(4))) End While cnn.Close() cnn.Dispose() Return Coleccion End Function Public Function ListarporCodigo(ByVal cod As String) As List(Of Productos) Dim dsDatos As New DataSet



Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim sqlcmd As New SqlCommand("pa_productos_buscarcodigo", cnn) sqlcmd.CommandType = CommandType.StoredProcedure sqlcmd.Parameters.Add("@codproducto", SqlDbType.Char, 4).Value = cod Dim PaTable As SqlDataReader = sqlcmd.ExecuteReader Dim Coleccion As New List(Of Productos) While PaTable.Read Coleccion.Add(New Productos(PaTable.Item(0), PaTable.Item(1), PaTable.Item(2), PaTable.Item(3), PaTable.Item(4))) End While cnn.Close() cnn.Dispose() Return Coleccion End Function Public Function Insertar(ByVal Productos As Productos) As Boolean Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim Sqlcmd As New SqlCommand("pa_productos_insertar", cnn) Sqlcmd.CommandType = CommandType.StoredProcedure Sqlcmd.Parameters.Add("@codproducto", SqlDbType.Char, 4).Value = Productos.codproducto Sqlcmd.Parameters.Add("@desproducto", SqlDbType.VarChar, 100).Value = Productos.descripcion Sqlcmd.Parameters.Add("@preproducto", SqlDbType.Decimal).Value = Productos.precio Sqlcmd.Parameters.Add("@canproducto", SqlDbType.Int).Value = Productos.cantidad Sqlcmd.Parameters.Add("@foto", SqlDbType.VarChar, 20).Value = Productos.foto Sqlcmd.ExecuteNonQuery() cnn.Close() cnn.Dispose() Return True End Function Public Function Editar(ByVal Productos As Productos) As Boolean Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim Sqlcmd As New SqlCommand("pa_productos_modificar", cnn) Sqlcmd.CommandType = CommandType.StoredProcedure Sqlcmd.Parameters.Add("@codproducto", SqlDbType.Char, 4).Value = Productos.codproducto Sqlcmd.Parameters.Add("@desproducto", SqlDbType.VarChar, 100).Value = Productos.descripcion Sqlcmd.Parameters.Add("@preproducto", SqlDbType.Decimal).Value = Productos.precio



Sqlcmd.Parameters.Add("@canproducto", SqlDbType.Int).Value = Productos.cantidad Sqlcmd.Parameters.Add("@foto", SqlDbType.VarChar, 20).Value = Productos.foto Sqlcmd.ExecuteNonQuery() cnn.Close() cnn.Dispose() Return True End Function Public Function Eliminar(ByVal codproducto As String) As Boolean Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim Sqlcmd As New SqlCommand("pa_productos_eliminar", cnn) Sqlcmd.CommandType = CommandType.StoredProcedure Sqlcmd.Parameters.Add("@codproducto", SqlDbType.Char, 4).Value = codproducto Sqlcmd.ExecuteNonQuery() cnn.Close() cnn.Dispose() Return True End Function End Class 18. Agregar la clase VentasCD.vb la cual contendrá las funciones:

InsertarVenta (para agregar una nueva cabecera de venta al sistema), InsertarDetalle (para insertar los productos de la venta y las cantidades) y UltimoCod (para que ubique la última venta y genere un nuevo código a partir de este), la parte que esta como comentario es para visualizar algunas ventas mediante algunos parámetros, podría utilizarlo en cualquier momento si el sistema así lo requiere.

Imports System.Data Imports System.Data.SqlClient Imports ComponenteEntidad Imports System.Data.Common Imports Microsoft.Practices.EnterpriseLibrary.Data Imports Microsoft.Practices.EnterpriseLibrary.Common Public Class VentasCD 'Private db As Database = DataMyBaseFactory.CreateDataMyBase() 'Private Const nombreprocedimiento1 As String = "PA_Ventas" 'Private Const nombreprocedimiento2 As String = "PA_DetalleVentas" 'Private Const nombreTabla As String = "VENTA" Private Shared ReadOnly _instancia As New VentasCD Public Shared ReadOnly Property Instancia() As VentasCD



Get Return _instancia End Get End Property Public Function InsertarVenta(ByVal ven As Venta) As Boolean Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim Sqlcmd As New SqlCommand("PA_Ventas", cnn) Sqlcmd.CommandType = CommandType.StoredProcedure Sqlcmd.Parameters.Add("@VEN_Codigo", SqlDbType.Char, 10).Value = ven.Codigo Sqlcmd.Parameters.Add("@VEN_Fecha", SqlDbType.Date).Value = ven.Fecha Sqlcmd.Parameters.Add("@CLI_Codigo", SqlDbType.Char, 10).Value = ven.CodigoClie Sqlcmd.Parameters.Add("@VEN_IGV", SqlDbType.Float).Value = ven.IGV Sqlcmd.Parameters.Add("@VEN_SubTotal", SqlDbType.Float).Value = ven.SubTotal Sqlcmd.Parameters.Add("@VEN_Total", SqlDbType.Float).Value = ven.TotalVenta Sqlcmd.Parameters.Add("@VEN_Estado", SqlDbType.VarChar, 20).Value = ven.Estado Sqlcmd.ExecuteNonQuery() cnn.Close() cnn.Dispose() Return True End Function Public Function InsertarDetalle(ByVal dv As DetalleVenta) As Boolean Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim Sqlcmd1 As New SqlCommand("PA_DetalleVentas", cnn) Sqlcmd1.CommandType = CommandType.StoredProcedure Sqlcmd1.CommandType = CommandType.StoredProcedure Sqlcmd1.Parameters.Add("@VEN_Codigo", SqlDbType.Char, 10).Value = dv.Codigo Sqlcmd1.Parameters.Add("@IDProducto", SqlDbType.Char, 10).Value = dv.CodigoPro Sqlcmd1.Parameters.Add("@DV_Cantidad", SqlDbType.Float).Value = dv.Cantidad Sqlcmd1.Parameters.Add("@DV_Precio", SqlDbType.Float).Value = dv.Precio Sqlcmd1.Parameters.Add("@DV_SubTotal", SqlDbType.Float, 20).Value = dv.SubTotal Sqlcmd1.ExecuteNonQuery() cnn.Close() cnn.Dispose() Return True End Function 'Public Overridable Function crear(ven As Venta) As Boolean



' Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) ' cnn.Open() ' Dim T As DbTransaction = cnn.BeginTransaction() ' T.Commit() ' Try ' 'VEN_Codigo, VEN_Fecha, CLIE_Codigo, VEN_IGV, VEN_SubTotal, VEN_TotalVenta, VEN_Estado ' Dim Sqlcmd As New SqlCommand("PA_Ventas", cnn) ' Sqlcmd.CommandType = CommandType.StoredProcedure ' Sqlcmd.Parameters.Add("@VEN_Codigo", SqlDbType.Char, 10).Value = ven.Codigo ' Sqlcmd.Parameters.Add("@VEN_Fecha", SqlDbType.VarChar, 50).Value = ven.Fecha ' Sqlcmd.Parameters.Add("@CLI_Codigo", SqlDbType.Char, 10).Value = ven.CodigoClie ' Sqlcmd.Parameters.Add("@VEN_IGV", SqlDbType.Float).Value = ven.IGV ' Sqlcmd.Parameters.Add("@VEN_SubTotal", SqlDbType.Float).Value = ven.SubTotal ' Sqlcmd.Parameters.Add("@VEN_Total", SqlDbType.Float).Value = ven.TotalVenta ' Sqlcmd.Parameters.Add("@VEN_Estado", SqlDbType.VarChar, 20).Value = ven.Estado ' 'Sqlcmd.ExecuteNonQuery() ' Dim huboexito As Integer = Sqlcmd.ExecuteNonQuery() ' If huboexito = 0 Then ' Throw New Exception("Error") ' End If ' Dim codventa As String = ven.Codigo ' For Each itemx As DetalleVenta In ven.DetalleVenta ' 'VEN_Codigo, PRO_Codigo, DV_Cantidad, DV_Precio, DV_SubTotal ' Dim Sqlcmd1 As New SqlCommand("PA_DetalleVentas", cnn) ' Sqlcmd1.CommandType = CommandType.StoredProcedure ' Sqlcmd1.CommandType = CommandType.StoredProcedure ' Sqlcmd1.Parameters.Add("@VEN_Codigo", SqlDbType.Char, 10).Value = codventa ' Sqlcmd1.Parameters.Add("@IDProducto", SqlDbType.Char, 10).Value = itemx.CodigoPro ' Sqlcmd1.Parameters.Add("@DV_Cantidad", SqlDbType.Float).Value = itemx.Cantidad ' Sqlcmd1.Parameters.Add("@DV_Precio", SqlDbType.Float).Value = itemx.Precio ' Sqlcmd1.Parameters.Add("@DV_SubTotal", SqlDbType.Float, 20).Value = itemx.SubTotal



' 'Sqlcmd1.ExecuteNonQuery() ' huboexito = Sqlcmd.ExecuteNonQuery() ' If huboexito = 0 Then ' Throw New Exception("Error") ' End If ' Next ' T.Commit() ' cnn.Close() ' cnn.Dispose() ' Return True ' Catch ex As Exception ' Throw New Exception(ex.Message) ' T.Rollback() ' End Try 'End Function Public contador As String Public Function UltimoCod() As List(Of Venta) Dim cnn As New SqlConnection(Conexion.Instancia.cadenaconexion) cnn.Open() Dim sqlcmd As New SqlCommand("select count(VEN_Codigo),max (VEN_Codigo) from VENTA", cnn) sqlcmd.CommandType = CommandType.Text Dim PaTable As SqlDataReader = sqlcmd.ExecuteReader Dim Coleccion As New List(Of Venta) While PaTable.Read Me.contador = Convert.ToString(PaTable.GetInt32(0)) If contador = "0" Then Coleccion.Add(New Venta(PaTable.GetInt32(0).ToString())) Else Coleccion.Add(New Venta(PaTable.GetString(1))) End If End While cnn.Close() cnn.Dispose() Return Coleccion End Function End Class



19. Crear la Clase DataBase.vb pero por ahora déjelo vacía.

20. Ahora se continuara con el ComponenteNegocio el cual está compuesto

por tres clases: Clase ClienteCN.vb, ProductosCN.vb y VentaCN.vb

21. Desarrollar la clase ClienteCN.vb, la cual está compuesta por la función insertarCliente (para agregar un nuevo cliente), UltimoCod (para que genere un nuevo código a partir del último de la tabla) y la Función BuscarPorDni (para filtrar a los cliente por el campo DNI)

Imports ComponenteDatos Imports ComponenteEntidad Public Class ClienteCN Public Function insertarCliente(ByVal ven As Cliente) As Boolean Try Dim vcn As New ClienteCD Return vcn.InsertarCliente(ven) Catch ex As Exception Throw New Exception(ex.Message) End Try End Function Public Function UltimoCod() As List(Of Cliente) Dim cd As New ClienteCD() Return cd.UltimoCod() End Function Public Function BuscarPorDni(ByVal dni As String) As List(Of Cliente) Return ClienteCD.Instancia.BuscarPorDni(dni) End Function End Class 22. Desarrollar la clase ProductosCN.vb, la cual está compuesta por las

funciones: ListarTodos (para visualizar todos los productos), ListarPorCodigo (para filtrar los productos por su código), Insertar (para agregar nuevos productos), Editar (para modificar los productos) y Eliminar (para eliminar un producto determinado de la tabla productos)

Imports ComponenteDatos Imports ComponenteEntidad Public Class ProductosCN Public Sub New() End Sub Private Shared ReadOnly _instancia As New ProductosCN Public Shared ReadOnly Property Instancia() As ProductosCN



Get Return _instancia End Get End Property Public Function ListarTodos() As List(Of Productos) Return ProductosDA.Instancia.ListarTodos End Function Public Function ListarporCodigo(ByVal cod As String) As List(Of Productos) Return ProductosDA.Instancia.ListarporCodigo(cod) End Function Public Function Insertar(ByVal Productos As Productos) As Boolean Return ProductosDA.Instancia.Insertar(Productos) End Function Public Function Editar(ByVal Productos As Productos) As Boolean Return ProductosDA.Instancia.Editar(Productos) End Function Public Function Eliminar(ByVal codproducto As String) As Boolean Return ProductosDA.Instancia.Eliminar(codproducto) End Function End Class 23. Crear un DataSet de la siguiente manera:

• Clic Derecho al proyecto – Agregar – Nuevo Elemento. • Seleccionar Datos – Conjunto de Datos – Al cual se le llamara

CANASTA.DS

24. Agregar una tabla de la siguiente manera: Aparecerá un cuadro vacío,

ubicarse en el cuadro de herramientas y arrastrar un TablaAdapter. Realizar una nueva conexión, y seleccionar la tabla productos de nuestra base.



Manipular la tabla y cambiar algunos campos. Cambiar el nombre a la tabla producto y poner “canasta”.

25. Crear la página maestra que servirá de plantilla para las demás páginas:

Principal.Master

• Ingresar un texto, como Titulo de la Página: “MI CARRITO DE COMPRAS DESARROLLADO PARA SENATI“.

• Insertar un “Menú de Navegación” e ingrese los Items: INICIO, CATÁLOGO DE PRODUCTOS, DETALLE DE COMPRA, ACERCA DE Y CERRAR SESIÓN.

• Verificar el código Html de la página maestra:



<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Principal.master.vb" Inherits="Carrito.Principal" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Carrito de Compra Senati</title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <form runat="server"> <div class="page"> <div class="header"> <div class="title"> <h1> MI CARRITO DE COMPRAS DESARROLLADO PARA SENATI </h1> </div> <div class="clear hideSkiplink"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="~/Catalogo.aspx" Text="INICIO"/> <asp:MenuItem NavigateUrl="~/Catalogo.aspx" Text="CATALOGO DE PRODUCTOS"/> <asp:MenuItem NavigateUrl="~/listacomprados.aspx" Text="DETALLE DE COMPRA"/> <asp:MenuItem NavigateUrl="#" Text="ACERCA DE"/> <asp:MenuItem NavigateUrl="~/inicio.aspx" Text="CERRAR SESION"/> </Items> </asp:Menu> </div> </div> <div style="width: 85%; height: 100%; "> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div class="clear"> </div> </div> <div class="footer"> </div>



</form> </body> </html>

Observar que cada opción del menú está conectado por un archivo url a cada página del proyecto, el participante podrá modificar a su gusto.

26. Crear la primera página Catalogo.aspx: Insertar un DataList donde estarán incluidos los artículos a ofrecer. Para ello en el cuadro de herramientas – Datos - arrastrar un DataList a la página. Nuevo origen de datos – Objeto – Seleccionamos CanastaDS.

Seleccionar el objeto de conexión CanastaDS.

Quedará de la siguiente manera, ahora vaya al generador de propiedades y cambiar a tres columnas.



Se debe darle el formato que se requiera como acabado.

Se debe editar la plantilla para modificarlo.

Eliminar las etiquetas, ubique un ImagenButton y conéctelos a imagenURL para enlazarlos a cada imagen.



Así se deberá de editar, producto por producto. Arrastrar un botón en la parte final por producto, ya lo puede modificar y cambiarle el text junto con la imagen. Terminar la Edición y quedara de la siguiente manera:

27. No olvidarse que esta página está relacionada con la Página Maestra. Se

verá este y otros puntos importantes en el código HTML de la página catalogo.aspx

<%@ Page Title="Catálogo" Language="vb" AutoEventWireup="false" MasterPageFile="~/Principal.Master" CodeBehind="Catalogo.aspx.vb" Inherits="Carrito.Catalogo" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <table style="width: 100%"> <tr> <td style="height: 30px; width: 230px; text-align: justify;"> <asp:Label ID="Label1" runat="server" Text="Bienvenido"></asp:Label>



<asp:Label ID="lblsesion" runat="server" Text="Label" style="text-align: justify"></asp:Label> <asp:Image ID="imguser" runat="server" Height="50px" Width="50px" ImageAlign="AbsMiddle" /> </td> <td style="height: 30px; text-align: justify;"> <asp:Button ID="btncerrar" runat="server" Height="28px" Text="Cerrar sesión" /> </td> </tr> </table> <br /> <br /> <div style="margin-left: 10%"> <asp:DataList ID="DataList1" runat="server" DataSourceID="ObjectDataSource1" RepeatColumns="3" Width="100%"> <ItemTemplate> <table style="width: 100%; " frame="border"> <tr> <td style="height: 20px; text-align: center"> <asp:ImageButton ID="ImageButton1" runat="server" Height="80px" ImageUrl='<%# Eval("foto") %>' Width="130px" OnClick="ImageButton1_Click" /> </td> </tr> <tr> <td style="text-align: center"> <asp:Label ID="codproductoLabel" runat="server" Text='<%# Eval("codproducto", "{0}") %>' Visible="False" /> <br /> <asp:Label ID="desproductoLabel" runat="server" Text='<%# Eval("descripcion", "{0}") %>' /> <br /> <asp:Label ID="Label2" runat="server" ForeColor="Red" Text="S/. "></asp:Label> <asp:Label ID="preproductoLabel" runat="server" ForeColor="Red" Text='<%# Eval("precio", "{0:N}") %>' /> <br /> <asp:Label ID="canproductoLabel" runat="server" Text='<%# Eval("cantidad", "{0:N}") %>' Visible="False" /> </td> </tr> <tr> <td style="text-align: center; height: 73px;"> <asp:Button ID="btnañadir" runat="server" CommandName="seleccionar" Text="Añadir al carrito" OnClick="btnañadir_Click" style="height: 26px" /> <asp:Image ID="Image1" runat="server" Height="26px" ImageAlign="Top" ImageUrl="~/images/Shop-Basket.png" Width="26px" /> <br /> <br />



</td> </tr> </table> </ItemTemplate> </asp:DataList> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="ListarTodos" TypeName="ComponenteNegocio.ProductosCN"> </asp:ObjectDataSource> <asp:ObjectDataSource ID="ObjectDataSource2" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="Carrito.CANASTADSTableAdapters.CANASTATableAdapter" UpdateMethod="Update"> <DeleteParameters> <asp:Parameter Name="Original_codproducto" Type="String" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="codproducto" Type="String" /> <asp:Parameter Name="desproducto" Type="String" /> <asp:Parameter Name="preproducto" Type="Decimal" /> <asp:Parameter Name="canproducto" Type="Int32" /> <asp:Parameter Name="foto" Type="String" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="desproducto" Type="String" /> <asp:Parameter Name="preproducto" Type="Decimal" /> <asp:Parameter Name="canproducto" Type="Int32" /> <asp:Parameter Name="foto" Type="String" /> <asp:Parameter Name="Original_codproducto" Type="String" /> </UpdateParameters> </asp:ObjectDataSource> <br /> <br /> </div> </asp:Content> 28. Seleccionar el DataList y vaya a la ventana de propiedades, ubíquese en la

opción Eventos y seleccionar ItemCommand (Doble Clic):



Ingresar el siguiente código: Private Sub DataList1_ItemCommand(source As Object, e As DataListCommandEventArgs) Handles DataList1.ItemCommand Dim cod, des As String Dim can As Integer Dim pre As Double If e.CommandName = "seleccionar" Then DataList1.SelectedIndex = e.Item.ItemIndex cod = CType(DataList1.SelectedItem.FindControl("codproductoLabel"), Label).Text des = CType(DataList1.SelectedItem.FindControl("desproductoLabel"), Label).Text pre = CType(DataList1.SelectedItem.FindControl("preproductoLabel"), Label).Text can = CType(DataList1.SelectedItem.FindControl("canproductoLabel"), Label).Text AgregarIdprod(cod, des, pre, can) End If End Sub

Observar que se ha declarado unas variables para poder trabajar con ellas con los ítems del Menú, el commandName “Seleccionar” se declara en el código HTML en el botón Añadir. Esto marcara a cada producto de la lista; finalmente llamara a la función AgregarIdprod.

29. El resto de código para la página Catalogo.aspx.vb será el siguiente:

Imports ComponenteEntidad Imports ComponenteDatos Imports ComponenteNegocio



Imports System.Data.SqlClient Public Class Catalogo Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 'If Session("usuario") = "" Then ' Response.Redirect("~/inicio.aspx") 'End If 'lblsesion.Text = Session("usuario") 'imguser.ImageUrl = "usuarios/" + Session("usuario") + ".png" End Sub Protected Sub btncerrar_Click(sender As Object, e As EventArgs) Handles btncerrar.Click Session.Remove("usuario") Session.Remove("Canasta") Response.Redirect("~/inicio.aspx") End Sub Protected Sub Button1_Click(sender As Object, e As EventArgs) End Sub Public Function Producto() As CANASTADS Dim obj As CANASTADS = CType(Session("Canasta"), CANASTADS) If obj Is Nothing Then obj = New CANASTADS() Session("Canasta") = obj End If Return obj End Function Public Sub AgregarIdprod(ByVal cod As String, ByVal des As String, ByVal pre As Double, ByVal can As Integer) Try Dim obj As CANASTADS = Me.Producto Dim fila As CANASTADS.CANASTARow = obj.CANASTA.NewCANASTARow() fila.codproducto = cod fila.desproducto = des fila.preproducto = pre fila.canproducto = 1 fila.subtotal = pre * 1 fila.stock = can obj.CANASTA.Rows.Add(fila) Catch ex As Exception



MsgBox(Title:="AVISO", Prompt:="Usted ya agrego éste producto al carrito") ' 'Response.Write("<script language='JavaScript'>alert('Usted ya agrego éste producto al carrito');</script>") End Try End Sub Protected Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs) Response.Redirect("~/listacomprados.aspx") End Sub Protected Sub btnañadir_Click(sender As Object, e As EventArgs) End Sub End Class Se declararán las funciones Producto y AgregarIdprod y las declaraciones para el btnCerrar e ImageButton. AgregarIdorod, agregara un nuevo código de producto a la canasta pero verificando que no exista una producto agregado con el mismo código. La página quedara de la siguiente manera:

30. Agregar una Clase, a la cual se le pondrá de nombre ClaseAyuda.vb. En la

cual le colocara la misma cadena de conexión y agregue la función BuscarClientePorDni que permitirá buscar a los clientes de la base de datos por el campo DNI llamando al procedimiento almacenado creado en SQL Server PA_BuscarClientePorDni e ingrese el parámetro para la búsqueda “@Dni”



Imports System Imports System.Collections.Generic Imports System.Linq Imports System.Text Imports System.Data.SqlClient Imports System.Data Public Class ClaseAyuda Public da As SqlDataAdapter Dim cad As String = "Data Source=.;Initial Catalog=BDCANASTA;Integrated Security=True" Public Function BuscarClientePorDni(dni As String) As DataSet Dim ds As New DataSet() Dim con As New SqlConnection() con.ConnectionString = cad con.Open() da = New SqlDataAdapter("PA_BuscarClientePorDni", con) da.SelectCommand.CommandType = CommandType.StoredProcedure da.SelectCommand.Parameters.Add("@Dni", SqlDbType.Char, 10).Value = dni Try da.Fill(ds) Catch ex As Exception Throw ex End Try Return ds End Function End Class

31. Agregar la página Web Forms “listaComprados.aspx” Aquí se mostraran los datos del Cliente; a estos clientes los buscaremos creando un método BuscarPorDni, el cual buscara por dicho campo y mostrará todos los datos en los cuadros de texto. Si no existiera el cliente, autogenerará uno nuevo, con el código necesario. Buscamos a la Función BuscarClientePorDni de nuestra ClaseAyuda.vb De la misma manera generará el código para una nueva venta. Programe el botón comprar. A continuación el código: Imports ComponenteEntidad Imports ComponenteDatos Imports ComponenteNegocio Imports System.Data.SqlClient Imports System.Web.Mail



Imports System.Net.Mail Imports System.Net Public Class listacomprados Inherits System.Web.UI.Page Dim IDVenta As String Sub autogenerarcodigoPer() Dim cnper As New VentaCN() Dim per As List(Of Venta) = cnper.UltimoCod() For Each ma As Venta In per Dim codigo As Integer codigo = Convert.ToInt32(ma.Codigo) codigo = codigo + 1 If codigo < 10 Then ma.Codigo = "000" & codigo.ToString() End If If codigo < 100 AndAlso codigo > 9 Then ma.Codigo = "00" & codigo.ToString() End If If codigo < 1000 AndAlso codigo > 99 Then ma.Codigo = "0" & codigo.ToString() End If IDVenta = ma.Codigo Next End Sub Sub autogenerarcodigoClie() Dim cnper As New ClienteCN() Dim per As List(Of Cliente) = cnper.UltimoCod() For Each ma As Cliente In per Dim codigo As Integer codigo = Convert.ToInt32(ma.Codigo) codigo = codigo + 1 If codigo < 10 Then ma.Codigo = "000" & codigo.ToString() End If If codigo < 100 AndAlso codigo > 9 Then ma.Codigo = "00" & codigo.ToString() End If If codigo < 1000 AndAlso codigo > 99 Then ma.Codigo = "0" & codigo.ToString() End If txtCodigo.Text = ma.Codigo Next End Sub Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load TextBox3.Focus() 'If Session("usuario") = "" Then ' Response.Redirect("~/inicio.aspx") 'End If



'lblsesion.Text = Session("usuario") 'imguser.ImageUrl = "usuarios/" + Session("usuario") + ".png" If Page.IsPostBack = False Then cargarcarrito() End If End Sub Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click Response.Redirect("Catalogo.aspx") End Sub Sub cargarcarrito() Dim GV As New GridView GvwCarrito.DataSource = Session("Canasta") GvwCarrito.DataBind() Call Button1_Click(Button1, Nothing) End Sub Private Sub GvwCarrito_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles GvwCarrito.RowCommand Dim DS As New DataSet DS = CType(Session("Canasta"), DataSet) Dim DT As New DataTable DT = DS.Tables("Canasta") Dim i As Integer Dim cod, codb As String If e.CommandName = "Borrar" Then cod = e.CommandArgument.ToString For i = 0 To DT.Rows.Count - 1 codb = DT.Rows(i).Item(0).ToString If codb = cod Then DT.Rows(i).Delete() DT.AcceptChanges() Exit For End If Next End If cargarcarrito() End Sub Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click Dim i As Integer Dim total, prec, subtotal, igv, TotalPagar As Double Dim cod, des As String Dim cant, stock As Integer Dim obj As CANASTADS = CType(Session("Canasta"), CANASTADS) For i = 0 To GvwCarrito.Rows.Count - 1 cod = (GvwCarrito.Rows(i).Cells(1).Text)



des = (GvwCarrito.Rows(i).Cells(2).Text) prec = Double.Parse(GvwCarrito.Rows(i).Cells(3).Text) cant = CType(GvwCarrito.Rows(i).Cells(0).FindControl("TextBox1"), TextBox).Text stock = (GvwCarrito.Rows(i).Cells(6).Text) subtotal = cant * prec stock = stock - cant 'Actualiza la canasta GvwCarrito.Rows(i).Cells(5).Text = subtotal GvwCarrito.Rows(i).Cells(7).Text = stock If stock.ToString() = 0 Then MsgBox(Title:="AVISO", Prompt:="Producto agotado") End If For Each objDR In obj.CANASTA.Rows If objDR("codproducto") = cod Then objDR("canproducto") = cant objDR("subtotal") = subtotal objDR("stock1") = stock Exit For End If Next total = total + subtotal igv = (total * 1.19) - total TotalPagar = total + igv Next Lblsubtotal.Text = total.ToString("0.00") LblIgv.Text = igv.ToString("0.00") LblTotal.Text = TotalPagar.ToString("0.00") End Sub Protected Sub btncerrar_Click(sender As Object, e As EventArgs) Handles btncerrar.Click Session.Remove("usuario") Session.Remove("Canasta") Response.Redirect("~/inicio.aspx") End Sub Protected Sub btncomprar_Click(sender As Object, e As EventArgs) Handles btncomprar.Click autogenerarcodigoPer() If CheckBox1.Checked = False Then Dim clie As New Cliente() Dim ccn As New ClienteCN() clie.Codigo = txtCodigo.Text clie.Nombres = TextBox2.Text clie.Dni = TextBox3.Text clie.Email = TextBox4.Text ccn.insertarCliente(clie) End If Dim ven As New Venta() Dim venCN As New VentaCN()



ven.Codigo = IDVenta ven.CodigoClie = txtCodigo.Text ven.Estado = "Aceptada" ven.Fecha = Date.Now.ToShortDateString() ven.IGV = Convert.ToDouble(LblIgv.Text) ven.SubTotal = Convert.ToDouble(Lblsubtotal.Text) ven.TotalVenta = Convert.ToDouble(LblTotal.Text) venCN.insertarVenta(ven) For Each row As GridViewRow In GvwCarrito.Rows Dim detalle As New DetalleVenta() detalle.Codigo = IDVenta detalle.CodigoPro = CStr(row.Cells(1).Text) detalle.Precio = Convert.ToDouble(CStr(row.Cells(3).Text)) detalle.SubTotal = Convert.ToDouble(CStr(row.Cells(5).Text)) detalle.Cantidad = Convert.ToDouble(CType(row.Cells(4).FindControl("TextBox1"), TextBox).Text) venCN.insertarDetalle(detalle) 'MsgBox(Convert.ToDouble(CType(row.Cells(4).FindControl("TextBox1"), TextBox).Text)) Next 'ESTA PARTE DEL CODIGO ES PARA ENVIAR UN CORREO ELECTRONICO Dim correo As New System.Net.Mail.MailMessage Dim smtp As New System.Net.Mail.SmtpClient Try correo.To.Clear() correo.Body = "" correo.Subject = "" correo.Body = "Numero de Compra: " + IDVenta + " DNI: " + TextBox3.Text + " Señor: " + TextBox2.Text + " Usted realizo una compra de varios productos por un monto de: " + "S/." + LblTotal.Text correo.Subject = "Verificacion de Compra en CARRITO DE 'COMPRAS PLEKLE'" correo.IsBodyHtml = True correo.To.Add(Trim(TextBox4.Text)) 'ojo el correo que va abajito tiene q ser de gmail pero este manda a cualkier dominio OK correo.From = New MailAddress("[email protected]") smtp.Credentials = New NetworkCredential("[email protected]", "luis_edu33") 'Datos importantes no modificables para tener acceso a las cuentas smtp.Host = "smtp.hotmail.com" smtp.Port = 587 smtp.EnableSsl = True smtp.Send(correo)



MsgBox("El mensaje fue enviado correctamente. ", MsgBoxStyle.Information, "Mensaje") Catch ex As Exception MsgBox(ex.Message, "Mensajeria 1.0 vb.net ®" & ex.Message) End Try End Sub Protected Sub GvwCarrito_SelectedIndexChanged(sender As Object, e As EventArgs) Handles GvwCarrito.SelectedIndexChanged End Sub Sub BuscarPorDni() Dim ds As DataSet Dim dt As DataTable Dim dr As DataRow Dim ca As New ClaseAyuda() ds = ca.BuscarClientePorDni(TextBox3.Text) dt = ds.Tables(0) For i As Integer = 0 To dt.Rows.Count - 1 dr = dt.Rows(i) TextBox2.Text = ((Convert.ToString(dr("CLIE_NombresyAp")))) TextBox4.Text = ((Convert.ToString(dr("CLIE_Email")))) txtCodigo.Text = ((Convert.ToString(dr("CLIE_Codigo")))) TextBox2.Enabled = False TextBox4.Enabled = False TextBox3.Enabled = True TextBox2.Focus() CheckBox1.Checked = True Next If dt.Rows.Count = 0 Then Response.Write("<script type='text/javascript'>alert('EL Cliente no Existe');</script>") 'MsgBox("El CLiente no existe") autogenerarcodigoClie() txtCodigo.Enabled = False TextBox2.Enabled = True TextBox4.Enabled = True CheckBox1.Checked = False TextBox2.Focus() Return End If End Sub Protected Sub btnVerifica_Click(sender As Object, e As EventArgs) Handles btnVerifica.Click BuscarPorDni() End Sub Protected Sub btnNuevo_Click(sender As Object, e As EventArgs) Handles btnNuevo.Click GvwCarrito.DataSource = Nothing GvwCarrito.DataBind() Session.Remove("Canasta")



Response.Redirect("Catalogo.aspx") End Sub 32. Ingresar la página Contacto.aspx que servirá para mostrar la información

de la página, aquí usted puede ingresar lo que estime conveniente, y modificarlo a su gusto.

33. Ingresar la página inicio.aspx que tendrá la siguiente estructura:

34. En esta página incluiremos en su programación la ruta a nuestra base de

datos y el servidor, con las características de autenticación que necesitamos:

Imports System.Data.SqlClient


Public Class inicio Inherits System.Web.UI.Page Dim cn As New SqlConnection("Server=DESKTOP-FRUVH1J\SQLEXPRESS;database=BDCANASTA;uid=sa;password=root") Dim ds As New DataSet Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Sub Protected Sub btnIngresar_Click(sender As Object, e As EventArgs) Handles btnIngresar.Click cn.Open() Dim consulta As New SqlDataAdapter("select Usuario from USUARIOS where Usuario='" + txtuser.Text + "' and Contraseña='" + txtpass.Text + "'", cn) consulta.Fill(ds, "USUARIOS") If ds.Tables("USUARIOS").Rows.Count > 0 Then Session("usuario") = (ds.Tables("USUARIOS").Rows(0)(0)).ToString.Trim If (txtuser.Text <> Session("usuario")) Then Response.Redirect("~/inicio.aspx") Else Response.Redirect("~/Catalogo.aspx") End If End If End Sub End Class 35. Modificar el fichero Web.Config con el siguiente código: El proyecto quedará de la siguiente forma: <?xml version="1.0" encoding="utf-8"?>  <configuration> <connectionStrings> <add name="BDCANASTAConnectionString" connectionString="Server=DESKTOP-FRUVH1J\SQLEXPRESS;database=BDCANASTA;uid=sa;password=root" providerName="System.Data.SqlClient" />


</connectionStrings> <system.web> <compilation debug="true" strict="false" explicit="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> </configuration> 36. Manera: Ejecutar el proyecto asignando como página principal “Inicio.aspx”.

Ingresar un usuario: Eduardo, Contraseña: 1234 (verificar más usuarios en la base de datos anexa en el cd en el capítulo 5 - carrito de compras). Al ingresar mostrara la página “Catalogo.aspx” donde seleccionara los productos a comprar, se puede agregar más productos a la tabla productos de la base de datos.



Seleccionar algunos productos a la compra y luego diríjase al menú “Detalle de Compra” y realizar la compra.

Se puede revisar el proyecto completo y hacer los cambios necesarios para personalizarlo a su gusto. (Capitulo 5 – Carrito de Compras). 5.5. REPORTES EN LA APLICACIÓN WEB.

Los Reportes dentro de una aplicación Web pueden ser muy importantes, dependiendo de lo crítica de la información que se maneje. Para generar Reportes dentro de ASP.Net se deben de considerar cuatro elementos importantes: 1. Aplicación Web. 2. Control ReportViewer. 3. Documento de Impresión. 4. Control ObjectDataSource Ejercicio para la Creación de un Reporte: Se utilizará la Base de Datos Senati (tabla Alumnos): • Crear una aplicación Web nueva que este vacía. • Insertar un Formulario Web Forms “Default.aspx”. • Insertar un control ReportViewer dentro de la página Default.aspx.



• Agregar un Documento de Impresión. Clic derecho a la Aplicación, Agregar,

Nuevo elemento, Seleccionar Reporting, Informe. El nombre será ReporteAlumnos.

• Generar el ObjectDataSource, en Orígenes de Datos (DataSet).

• Generar una nueva conexión, al igual como en la conexión de Datos.



• Seleccionar la Tabla Alumnos, se podría seleccionar cualquier tabla o

Vista, dependiendo del requerimiento de los reportes. Finalizar

• Quedará de la siguiente manera, indicando la tabla seleccionada.

• Insertar un objeto List y luego Arrastrar los campos de la tabla sobre el

Documento de impresión.



• Realizar el diseño que se requiera. • Conectar el control ReportViewer al documento de Impresión.

• Ejecutar la Aplicación, si al ejecutar aparece un mensaje de error en el navegador. Se deberá de colocar el siguiente código en el código de la página:

Imports System.Web.UI.ScriptManager



VI. SEGURIDAD DE UNA APLICACIÓN WEB. OPERACIONES: - Configuración y Tipos de Autenticación en una Aplicación Web. - Roles y Autorización en una Aplicación Web. - Uso de Controles Login en una Aplicación Web. EQUIPOS Y MATERIALES:

- Computadora con microprocesadores Core 2 Duo o de mayor capacidad.

- Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas.

ORDEN DE EJECUCIÓN:

- Reconocer los Diferentes Tipos de Autenticación. - Reconocer los Diferentes Tipos de Autorización. - Manejo de Controles Login en aplicaciones ASP.Net

6.1. CONFIGURAR TIPOS DE AUTENTICACIÓN EN UNA APLICACIÓN

WEB. La autenticación es básicamente el proceso de identificar y comprobar la identidad del usuario, mediante un test de credenciales y la validación de la misma. La autorización viene a ser el proceso de determinar si se permite el ingreso o no a un recurso especifico. La autorización ocurre después de la autenticación y utiliza la información sobre privilegios y permisos que puede contener un usuario para manipular la información. La seguridad está basada en funciones .Net Framework y esta se compone en tres: • Windows: representa a los usuarios del sistema operativos, incluyendo sus

permisos y privilegios como usuario.

• Genéricos: representa a usuarios y funciones independientes de los usuarios de Windows.

• Personalizados: Estos pueden ser definidos por una aplicación diferente ASP

puede trabajar de la mano IIS (Internet Information Services), para realizar la



autenticación de los usuarios. También se puede configurar para usuarios que no necesiten una validación como usuarios invitados. En este capítulo vera los diferentes métodos de autenticación a nuestro proyecto web. Se debe de tener en cuenta cual es la arquitectura de ASP.Net con respecto a la seguridad, Nos daremos cuenta que normalmente todos los clientes web se comunican con las aplicaciones ASP.Net a través de un servidor IIS. Si una autenticación anónima estuviera establecida en True, no se ejecutara ninguna autenticación en el servidor. Si no fuera así, entonces IIS busca lo solicitado y se autoriza al cliente para su ingreso y/o manipulación de la información IIS proporciona diferentes clases de autenticación, como son: • Anónima. • Básica. • Texto Implícito. • Autenticación de Windows. • Autenticación mediante formularios. • Suplantación de ASP.Net • Autenticación basada en certificados de clientes. • ASP maneja el proceso de autenticación a través de los proveedores de

Windows y formularios (WindowsAuthenticationModule o FormsAuthenticationModule)

El mecanismo de autenticación en ASP por defecto es la Autenticación de Windows, por lo cual se le deja al sistema operativo esta tarea. Las dos opciones de autenticación más comunes son la de Windows y la de formularios; para ello debemos de tener en cuenta el ciclo de vida de una aplicación ASP.Net, y observe en qué momento se ejecuta o se requiere la seguridad.



Ciclo de Vida de una Aplicación ASP. El ciclo de vida lo veremos mediante el siguiente diagrama para que se entienda de una mejor manera. Ahora veremos cómo funcionaría el proceso cuando crea e inicia un objeto HttpContext que contiene los objetos HttRequest y HttpResponse. HttpRequest va a contener la información de la solicitud actual y el objeto HttpResponse contendrá la respuesta que recibirá el cliente. Finalmente se asigna un objeto HttpApplication a la solicitud la cual procesara la solicitud. Los procesos de autenticación y autorización se implementan mediante módulos. (WindowsAuthenticationModule y FileAuthorizationModule) que se llamarán mediante HttpRuntime y HttpApplication.

Usuario

Internet

IIS (Cualquier Servidor Web)

Aplicación Manejadora (manager)

Dominio de la aplicación

Hosting Environment



Autenticación de Windows:

Lo primero que se debe de hacer en una aplicación Web es identificar al usuario; normalmente esta acción se realiza solicitando su nombre o UsserName y su Clave o password. Por defecto ASP.Net tiene configurado el acceso anónimo, por lo cual el usuario no se registra, pero esto se da cuando no tenemos información delicada y confidencial en nuestra página. Desarrollar el siguiente ejemplo que nos solicita una autenticación de Windows para acceder a la información de la página: Menú Archivo – Nuevo Sitio Web – Sitio Web Vacío de ASP.Net Se cambiará la ubicación y ponemos HTTP. Añadir un Formulario Web Forms. Insertar dos controles Label y cambie su propiedad ID por etUsuarioAut y etUsuarioASP.

Dominio de la Aplicación

Usuario Usuario Usuario

Internet

IIS

ASP.Net

HttpRuntime

HttpContext HttpRequest HttpResponse HttpAplication





A continuación, ingresar el siguiente código: Imports System.Security.Principal Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load Dim usuarioAutenticado As String Dim usuarioASP As String 'Usuario que realiza la solicitud de la página usuarioAutenticado = Page.User.Identity.Name usuarioASP = WindowsIdentity.GetCurrent.Name etUsuarioAut.Text = "Usted es el Usuario: " & usuarioAutenticado 'Contexto de seguridad bajo el que se ejecuta la página etUsuarioASP.Text = "La Página se Ejecuta bajo el Contexto de Seguridad: " & usuarioASP End Sub End Class El resultado del código seria el siguiente (todo depende del modo en que se autentico en el ordenador):

Hay que tener en cuenta la comparación entre objetos de identidad y principales como las cuentas de grupos y de usuario; por ejemplo en redes una cuenta de usuario normalmente representa a una persona y la cuenta de grupo representa a una categoría y derechos de algunos tipos de usuarios. En ASP los objetos de Framework representan a los usuarios mientras que las funciones representan pertenencia y contextos de seguridad. Por ejemplo, en un sistema de compras en el cual un trabajador puede generar una solicitud de compra, pero solo un administrador puede convertir esta solicitud en la orden de compra final, se entiende que el trabajador no posee privilegios y permisos para ciertas acciones. El objeto WindowsIdentity perteneciente a System.Security.Principal representa al usuario de Windows. Es así que las características del usuario de Windows las asume ASP.Net para su autenticación. Para acceder a las credenciales de


esta identidad hay que llamar al método GetCurrent y WindowsIdentity (método Shared). La autenticación de Windows es el mecanismo de autenticación predeterminado para las aplicaciones ASP.Net y se identifica en el fichero de configuración Web.Config mediante el elemento de configuración authentication: <authentication mode="windows"> Lo anterior indica que si una página ASP.Net tiene que acceder a un recurso, hay que darle al usuario de Servicio de Red los permisos necesarios. Si una aplicación web tiene que escribir datos en una base, el usuario Servicio de Red ha de tener los permisos que se lo permitan. Este modelo de seguridad es sencillo y simplifica bastante el trabajo del administrador del sistema, ya que solo tiene que incluir al usuario Servicio de Red en las listas de control de acceso a los recursos a los que las aplicaciones web deberán de tener acceso; muy aparte de los usuarios que luego accedan a esas aplicaciones. Por ejemplo, si una aplicación web tiene que interactuar con una base de datos, todas las conexiones serán realizadas por el mismo usuario, lo que permite emplear un servicio de conexiones. ASP.Net utilizara también la autenticación de Windows de tal manera que el usuario podrá logearse con su Id de Windows y contraseña para acceder al ordenador, pero esto requiere deshabilitar el acceso anónimo para el sitio web, además de especificar Windows como modo de autenticación en el fichero Web.config. En la misma aplicación modifique el archivo Web.config de la siguiente manera: <?xml version="1.0"?>  <configuration> <system.web> <authentication mode="Windows|Forms|Passport|None"> <forms name="name" loginUrl="url" Protection="All|None|Encryption|Validation" timeout="30" path="/"


requireSSL="true|false" slidingExpiration="true|false" <credentials passwordformat="Clear|SHA1|MD5"> <user name="username" password="password"/> </credentials> </forms> <passport redirectUrl="internal"/> </authentication> <authorization> </authorization> <compilation debug="true" strict="false" explicit="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5"/> </system.web> </configuration> • Windows: Este modo con cualquier forma de autenticación ISS, con esta

opción le indicamos que la autenticación se realizara con los parámetros del sistema operativo.

• Forms: Este modo empleara un formulario pidiendo un Ussername y un password para poder acceder a nuestra aplicación web, esta decisión corre por nosotros.

• Passport: Este modo utiliza el sistema de autenticación Passport de

Microsoft (Pasaporte de Microsoft).

• None: En este método no se especifica ninguna autenticación.

Nota: El modo de autenticación de Windows solo es válida en un intranet ya que para una aplicación de internet es necesario una autenticación básica. • Autenticación mediante formularios: Este modo de autenticación se

realiza por medio de formularios construidos por el diseñador de la Web, su proceso se visualiza en el siguiente diagrama:

Diagrama. Estos formularios se encargarán de recibir las credenciales, como son el nombre y las contraseñas, de esta manera se determinan la autenticidad del usuario. La autenticación de IIS no se utiliza en la aplicación, pero las configuraciones de autenticación IIS son importantes para el proceso de autenticación mediante formularios ASP.Net. Por ejemplo, si no se habilita la


configuración Autenticación Anónima de IIS, las solicitudes que no cumplan los criterios serán rechazadas y no tendrán acceso a la aplicación. 1. IIS recibe la solicitud y si autentica al cliente, o si estuviera activada la

autenticación anónima de IIS, la solicitud se pasa a la aplicación ASP.Net

2. Vera el siguiente caso que en ASP.Net se implementa el modo de autenticación mediante formularios, no se utilizara la autenticación de Windows predeterminada.

3. Si no existe una cookie asociada a la solicitud, ASP.Net redirige la solicitud a la página de inicio de sesión, cuya ruta se encuentra en el archivo Web.config:

<?xml version="1.0" encoding="utf-8"?>  <configuration> <system.web> <authentication mode="Forms"> <forms name=".ASPXFORMSAUTH" loginUrl="login.aspx"> </forms> </authentication> <authorization> <deny users="?"/> </authorization> <compilation debug="false" strict="false" explicit="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> </configuration> 4. Como se podrá observar el atributo Name, especifica el nombre del cookie

HTTP que se utiliza para la autenticación. El atributo LoginUrl, especifica la dirección URL a la que se debe de dirigir la solicitud de inicio de sesión. El valor predeterminado es Login.aspx

5. Si fuera necesario configurar dentro de <forms> un almacén de credenciales,

podría hacerse a través de la etiqueta <credenciales>, por ejemplo:


<forms name=".ASPXFORMSAUTH" loginUrl="login.aspx"> <credentials passwordFormat="Clear"> <user name="usuario1" password="contraseña1"/> <user name="usuario2" password="contraseña2"/> </credentials> </forms> 6. En este caso las credenciales proporcionadas se validaran, comparándolas

con las contenidas en el almacén de credenciales configurado de la siguiente manera:

Insertar los siguientes objetos a la página login.aspx


Etiqueta – Label1 Text Usuario :

Etiqueta – Label2 Text Contraseña :

Etiqueta – Label3 (ID)

Text

etError

Error :

Cuadro de Texto - TextBox (ID) ctUsuario

Cuadro de Texto - TextBox (ID) ctContrasena

CheckBox (ID) cvRecordarContrasena

Button 1 (ID)

Text

btEnviar

Enviar

If (FormsAuthentication.Authenticate(ctUsuario.Text, ctContrasena.Text)) Then 'Retornar petición URL FormsAuthentication.RedirectFromLoginPage(ctUsuario.Text, cvRecordarContrasena.Checked) Else etError.Text = "Error: Las Credenciales no son Validas, Intentelo de Nuevo" End If 7. Una vez concluido el diseño, se ingresara el siguiente código en el evento

load de la página login.aspx:

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load



etError.Text = "" End Sub

8. Ingresar el código para el botón enviar:

Protected Sub btEnviar_Click(sender As Object, e As EventArgs) _ Handles btEnviar.Click 'Obtener las credenciales Dim usuario As String = "usuario1" Dim password As String = "password1" If (Page.IsValid) Then If (ctUsuario.Text.Equals(usuario) And _ ctContrasena.Text.Equals(password)) Then 'Retornar la Petición FormsAuthentication.RedirectFromLoginPage( _ ctUsuario.Text, cvRecordarContrasena.Checked) Else etError.Text = "Acceso Denegado" End If End If End Sub 9. Ingresar un nuevo formulario web (Default.aspx) y ejecutar su aplicación,

utilizar los datos para verificar el login, y presionar el botón Enviar, podrá ver que llama a la página Default.aspx, además si presiona la opción “Recordar Contraseña” esta será recordada para futuras sesiones.

Volverlo a ejecutar para verificar lo realizado. 6.2. ROLES Y AUTORIZACIÓN EN UNA APLICACIÓN WEB: La autorización controla el acceso del cliente a los recursos de direcciones URL, para ello deberá de editar el archivo web.config y modifique el elemento <authorization>: <?xml version="1.0" encoding="utf-8"?>


<configuration> <system.web> <authentication mode="Windows"/> <authorization> <allow users="Lista de Usuarios separados por comas" roles="lista de funciones separadas por comas" verbs="lista de verbos separados por comas" /> <deny users="lista de usuarios separados por comas" roles="lista de funciones separadas por comas" verbs="lista de verbos separados por comas" /> </authorization> <compilation debug="false" strict="false" explicit="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> </configuration> La etiqueta <allow> permite el acceso al recurso, la etiqueta <deny> lo deniega. Si lo que se desea es que cualquier usuario pueda acceder a una parte de nuestra aplicación, sin ni siquiera identificarse; deberá de realizar el siguiente código:

<authorization> <allow users="*"/> </authorization> Si lo que se desea es restringir el acceso a un grupo de usuarios particulares, ingrese el siguiente código:

<authorization> <allow users="dominio\Administradores"/> <deny users="*"/> </authorization> Si lo que se desea es restringir el acceso a algunos usuarios específicos, ingrese el siguiente código:

<authorization> <allow users="dominio\usuario1, dominio\usuario2"/> <deny users="*"/> </authorization>


Si lo que se desea es restringir el acceso a ciertos usuarios en función del método de transmisión, ingrese el siguiente código:

<authorization> <allow verbs="POST" users="Luis"/> <deny verbs="POST" users="*"/> <allow verbs="GET" users="*"/> </authorization> Suplantación de identidad: Este método esta deshabilitado de manera predeterminada, cuando se utiliza este método, ASP asume la identidad de Windows (usuario Windows), de esta manera se evitan problemas de autenticación y autorización en el código de la aplicación. El siguiente diagrama representa el proceso de la verificación de la identidad. Diagrama. • IIS recibe la solicitud y autentica al cliente utilizando la autenticación a

ASP.Net • Si la autenticación tiene éxito, IIS pasara la solicitud autenticada a ASP.Net • Si la suplantación no está habilitada, la aplicación se ejecutara con la

identidad predeterminada; la cuenta seria Servicio de Red en Windows. • Si la suplantación está habilitada (Impersonate = “true”), la aplicación se

ejecutara con la identidad del usuario Windows autenticado. • Finalmente, si se concede el acceso, la aplicación ASP.Net devolverá la

página solicitada a través de IIS.

Para indicar la suplantación de identidad deberemos de configurar el archivo Web.config e ingrese el siguiente código:

<identity impersonate="true"/>

Ejecutar la aplicación y observar que la página se ejecuta bajo el contexto de seguridad del dominio del servidor, con su nombre de usuario. 6.3. USAR LOS CONTROLES LOGIN EN UNA APLICACIÓN WEB. ASP.Net nos brinda varios controles para poder implementar los inicios de sesión para nuestras aplicaciones web, sin necesidad de mucha programación. Estos controles principales son: Login, LoginView y LoginStatus, entre otros de menos utilización.



Como se realizó la aplicación anterior de igual manera se puede utilizar las opciones de autenticación pero se podría poner los controles de inicio de sesión. En este ejemplo será el control Login:

También se puede dar algunos formatos al objeto Login. Formato Automático.



Si lo que se requiere es visualizar diferentes contenidos para diferentes usuarios, lo podemos realizar con el control LoginView, el cual maneja las siguientes plantillas: - AnonymousTemplate: Esta plantilla será visualizada cuando el usuario no

está autenticado.

- LoggedInTemplate: Esta plantilla será visualizada cuando el usuario ya esté autenticado pero no pertenece a alguna de las funciones definidas.

- RoleGroups: Esta plantilla será visualizada cuando el usuario ya está autenticado y pertenece a alguna de las funciones definidas.

Como ejemplo crear un Sitio Web ubicado en HTTP que contendrá una página Default.aspx, se añadirá también una página login.aspx en una carpeta Acceso, el hecho de poner esta página en una carpeta es para restringir el acceso a las mismas. A esta carpeta Acceso se les pondrá el acceso a los usuarios anónimos y se denegara el acceso a los usuarios autenticados, para este fin se creara un archivo de configuración Web.config dentro de la carpeta Acceso, con el siguiente contenido: <?xml version="1.0" encoding="utf-8"?> <configuration> <system.web> <authorization> <allow users="?"/> <deny users="?"/> </authorization> </system.web> </configuration> Ingresar a la página un control Login al cual se le dará un Formato automático de tipo Profesional:



Ubicarse en la propiedad DestinationPageUrl y seleccionar la página Default.aspx. En la página Default.aspx insertar un control LoginView, abrir su menú de tareas y seleccionar la vista AnonymousTemplate y colocar el mensaje “No se encuentra autenticado”, esto se mostrara a cualquier visitante que no haya iniciado sesión y LoggedInTemplate ponga el mensaje “Usted ya está Autenticado” que se mostrara al usuario que inicia sesión.

Ingresar tambien a la página Default.aspx el control LoginStatus.

Seleccionar el control LoginView y mostrando su menú, seleccione “Administrar Sitio Web”. Configurar su sitio Web. Seleccionar Seguridad, en la cual determinara los usuarios, sus funciones y las reglas de acceso. Preferentemente utilizar el Asistente de configuración de seguridad para configurar la seguridad paso a paso. En Almacén de datos la aplicación estará configurada para utilizar configuración de proveedores avanzada, si lo desea puede cambiar la manera en que se almacenaran los datos de administración de sitios web. Para agregar nuevos usuarios se debe de escribir el nombre, la contraseña y la dirección de correo electrónico del usuario en esta página.



VII. TRABAJANDO CON ASP.NET Y AJAX OPERACIONES: - Manejo de las Extensiones de Ajax en una Aplicación ASP.Net - Implementación de Controles Ajax.

EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas. ORDEN DE EJECUCIÓN: - Reconocer la Estructura de AJAX en las Páginas Web ASP. - Desarrollar Entornos de Trabajo AJAX para paginas ASP 7.1. MANEJO DE LAS EXTENSIONES DE AJAX EN UNA APLICACIÓN

ASP.NET: Ajax es el acrónimo de Asynchronous JavaScrip And XML (JavaScript y XML asíncronos), se basa en una técnica de desarrollo para poder crear aplicaciones web dinámicas e interactivas. Estas aplicaciones se ejecutaran a nivel del usuario y tendrán comunicación asíncrona con el servidor, de esta manera podremos realizar cambios en una página sin necesidad de recargarla. Ajax no es una tecnología en sí, si no que engloba varias tecnologías que van a trabajar de manera conjunta. Estas tecnologías base vendrían a ser: • XML: Esta tecnología es estándar para los trabajos directos en envíos al

servidor, aunque cualquier formato puede funcionar incluyendo Html. • HTML: así mismo XHTML, como también la hoja de estilos CSS, no

olvidemos que XHTML es la versión XML de HTML, por lo que básicamente tienen las mismas funciones.

• JavaScript: Es un lenguaje Script es decir de secuencias y ordenes, que fue diseñado básicamente para agregar interactividad a las páginas Web; en la actualidad es soportado por casi todos los navegadores web. Nos permite



capturar eventos y validar datos de la misma, así como también cambiar el contenido de los elementos HTML de la página.

• La interfaz de programación de aplicaciones DOM (Document Object Model) es accedida con un lenguaje de secuencias de órdenes, como javascript para poder mostrar e interactuar dinámicamente con la información presentada.

• El objeto XMLHttpRequest nos permite intercambiar datos asincrónicamente con el servidor web.

Estas tecnologías se utilizan en herramientas como GoogleMaps, Outlook Web, etc. Mientras que el HTML intenta mostrarnos paginas dinámicas con sentencias creadas en HTML, Ajax nos permite realizarlo de manera de resolver acciones. Ajax nos permite crear aplicaciones más ligeras y con mucha mayor interactividad. Por ejemplo, mientras el servidor procesa una solicitud emitida por el usuario en un HTML, pues esto lleva un proceso de espera que no es para nada agradable, en ese instante interactúa Ajax, enviándole previamente peticiones al servidor en segundo plano y no esperar la acción explicita del usuario. Fundamentos de Ajax: Dos acciones principales en Ajax son Request y Response y estas se realizan mediante el proceso de PostBack, que es la acción del envió de información de un formulario web desde un navegador al servidor a través de un método POST de HTTP. XMLHttpRequest: Esta clase permite la transferencia de datos en formato XML entre el navegador y el servidor. Dicho objeto es accesible por medio de javascript, JScript, VBScript y otros lenguajes de secuencias de órdenes soportados por los navegadores. Los métodos y las propiedades básicas de esta clase son: Open (método, URL [, asíncrono [, nombreUsuario [, clave ]]] ) Método de apertura de la Conexión: El parámetro Método puede tomar los valores “GET”, “POST” o “PUT”; URL Especifica la página solicitada; Asíncrono especifica si la petición debería ser gestionada asíncronamente o no, el valor predeterminada es True e indica que el proceso Script continua después de método send, y false indica que el script se detiene hasta que se reciba la respuesta, tras lo cual se reanudara la ejecución.



Send (Contenido) Método para Enviar la Petición: Si la petición es POST se pueden incluir los datos a enviar en “Contenido”, en otro caso “Contenido” valdrá Null. Abort ( ) Método para Cancelar la Petición: Se utiliza para cancelar una petición en curso. Onreadystatechange Propiedad que almacena el nombre del método que será invocado automáticamente cuando, después de una llamada asíncrona, el proceso sobre la página solicitada haya terminado satisfactoriamente o no. readyState Propiedad que almacena el estado de la petición: 0 no iniciada, 1 cargando, 2 carga terminada pero sin procesar, 3 en curso y 4 completada. Status Propiedad que almacena el código HTTP resultado de la petición. Por ejemplo: 200 operación completada con éxito, 404 recurso no encontrado, etc. StatusText Propiedad que devuelve el estado (Status) como una cadena. ResponseXML Propiedad que devuelve en XML el documento DOM correspondiente a la respuesta. ResponseText Propiedad que devuelve la respuesta como una cadena de texto. Veremos un ejemplo sencillo de cómo se utiliza la clase XMLHttpRequest. Desarrollaremos 2 paginas: Inicio.html y obtenerdatos.aspx La página de Inicio.html contendrá una lista con dos opciones: Aptos y No Aptos, y una tabla dinámica que se construirá en función de la opción seleccionada. La página Inicio.html es una página con controles HTML, básicamente un formulario con un control Select con dos opciones y un control table inicialmente con una fila para el título. El código JavaScript se utilizara para resolver cualquier acción del usuario del lado del cliente que no requiera un viaje al servidor.



La página obtenerdatos.aspx incluirá la lógica del negocio en su fichero de código subyacente obtenerdatos.aspx.vb. Esta página cuando sea solicitada por la página inicio.html, devolverá un documento XML con los datos que actualizaran la tabla y que se encuentran en el servidor.

Puede observar en el código de la aplicación que AutoEventWireup es True y que el fichero .aspx no contiene código HTML para que no sea devuelto junto con el documento XML y de lugar en la respuesta a un documento XML mal formado que no se pueda recuperar. Existen por lo menos, dos implementaciones posibles: • Una basada en el modelo clásico de aplicaciones web (sin utilizar AJAX). • Y otra basada en AJAX. En una implementación básica (Sin AJAX): 1. El usuario solicita el listado de alumnos aptos, o bien no aptos. Esto produce

un evento que atiende el navegador. 2. Como respuesta a tal evento, el navegador genera una petición HTTP, que

viaja desde el cliente hacia el servidor. 3. El servidor recibe la petición y ejecuta la lógica necesaria para obtener los

datos de una fuente de datos. 4. El servidor genera la página HTML con los datos obtenidos y envía esta

nueva página al cliente (se envía toda la página). 5. El cliente recibe la nueva página HTML y la muestra al usuario.


En una implementación con AJAX: 1. El usuario solicita el listado de alumnos aptos, o bien no aptos. Esto produce

un evento que atiende el navegador.El código JavaScript que se encuentra en el cliente, procesa el evento y realiza la llamada al servidor (petición HTTP).

2. El servidor recibe la petición y ejecuta la lógica necesaria para obtener los datos de una fuente de datos.

3. El servidor genera un documento XML con el resultado (los datos obtenidos) y lo envía al cliente.

4. Un código JavaScript en el cliente recibe el documento XML, lo procesa y recarga únicamente la sección de la página web que corresponde al listado de los alumnos en la tabla.

En este ejemplo, se utiliza XML para la comunicación. Sin embrago, pueden emplearse otros formatos estándares, como JSON, mucha más fácil de utilizar, ya que no hay que recorrer la jerarquía XML con el DOM o ir buscando nodo a nodo en el contenido, porque se convierte en JavaScript puro y utilizable nada más llegar al servidor. Tiene un par de inconvenientes: que su uso con VB o con C# requiere un trabajo extra (para evitarlo existe una biblioteca http://jayrock.berlios.de que permite convertir objetos .Net a su representación JSON), y el otro, la seguridad, porque la utilización de la expresión Eval posibilita la inyección de código peligroso (para evitarlo tenemos un Script en http://www.json.org/json.js). Cuando el usuario solicita el listado de alumnos aptos o no aptos, se produce un evento OnChange que atiende el navegador. Agregaremos una carpeta App_data en la cual generaremos un archivo de texto “Respuesta.txt” en la cual asignaremos el listado de los Alumnos no Aptos. Código de la página Inicio.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Página sin título</title> <script language="javascript" type="text/javascript"> <!-- var PeticionHTTP; // objeto XMLHttpRequest var elementos; // elementos de la lista en XML


http://jayrock.berlios.de/

http://www.json.org/json.js


{ alert("No hay elementos para la lista de resultados: " + PeticionHTTP.statusText); } } } function CargarTabla() { TablaResultados = document.getElementById("TablaDeResultados"); if (TablaResultados != null) { // Fila de cabecera var cabecera = document.getElementById("ListaDeOpciones").value + " EN LAS PRÁCTICAS DE PROGRAMACIÓN VISUAL"; TablaResultados.rows[0].cells[0].innerHTML = cabecera; // Resto de filas if (TablaResultados.rows.length > 1) BorrarFilas(TablaResultados); // vaciar la tabla de resultados // Añadir los elementos obtenidos a la tabla de resultados for(var e = 0; e < elementos.length; e++) { AnyadirFila(TablaResultados); TablaResultados.rows[e+1].cells[1].innerHTML = elementos[e].childNodes[0].nodeValue; } } } function AnyadirFila(tabla) { var siguienteFila = tabla.rows.length; var row = tabla.insertRow(siguienteFila); // Celda 0 var celda0 = row.insertCell(0); var textoCelda = document.createTextNode(siguienteFila); celda0.appendChild(textoCelda); // Celda 1 var celda1 = row.insertCell(1); var elemento = document.createElement("input"); elemento.type = "text"; elemento.name = "txtRow" + siguienteFila; elemento.id = "txtRow" + siguienteFila; celda1.appendChild(elemento); } function BorrarFilas(tabla) {



// Borrar todas las filas menos la de cabecera for(var f = tabla.rows.length-1; f > 0; f--) { // alert(f); tabla.deleteRow(f); } } function hora() { var fh = new Date(); var h = fh.getHours(); var m = fh.getMinutes(); var s = fh.getSeconds(); var mt = "AM"; if (h > 12) { mt = "PM"; h = h - 12; } if (h == 0) hours = 12; if (m <= 9) m = "0" + m; if (s <= 9) s = "0" + s var htmlhora="<font size='5' face='Arial'><b><font size='1'>Hora actual:</font></br>"+h+":"+m+":"+s+" "+mt+"</b></font>" document.write(htmlhora); } // --> </script> </head> <body> <img src="logo01.jpg" width="120" /> <p><script>hora()</script></p> <p align="center"> Completar una lista dinámicamente con AJAX en función de la opción elegida.</p> <form name="form1"> <p align="center"> Elija una OPCIÓN: <select name="ListaDeOpciones" id="ListaDeOpciones" size="1" onchange="CargarElementosTabla(this.value)"> <option value=""></option> <option value="APTOS">APTOS</option> <option value="NO APTOS">NO APTOS</option> </select> </p> <table border="1" id="TablaDeResultados" width="100%">



<tr> <th colspan="3" >RESULTADOS</th> </tr> </table> </form> </body> </html> Código de la página obtenerdatos.aspx: Partial Public Class obtenerDatos Inherits System.Web.UI.Page Private elementos As String() Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load Dim op As String = Request.Params("opcion") Select Case op.ToLower() Case "aptos" elementos = New String() {"Eduardo Ramirez", "Luis Corrales", "Omar Espinoza", "Hervert Navarro", "Hugo Mamanchura", "Eduardo Reyes"} Case "no aptos" elementos = New String() {"Enrique Pérez", "Elena Gutiérrez", "Andrea Ramos", "Luis Sánchez", "Antonio Delgado"} End Select ' Se devuelve como XML Response.ContentType = "text/xml" ' Evitar que haya caché de este contenido Response.AppendHeader("cache-control", "no-cache") Response.Expires = -1 Response.Write(DevuelveXML(elementos)) ' Ojo: eliminar el HTML, el formulario, del fichero obtenerDatos.aspx ' porque si no Response lo añadirá al final del documento XML ' y dará lugar a un documento XML mal formado, lo que hará que la ' propiedad responseXML esté vacía. End Sub ' Función para crear el XML a devolver Private Function DevuelveXML(ByVal ElementosMatriz As String()) As String Dim NL As String = System.Environment.NewLine Dim respuestaXML As String = "<?xml version='1.0' encoding='utf-8'?>" & NL & "<elementos>" & NL If ElementosMatriz.Length <> 0 Then ' Recorrer la matriz para construir el XML; For Each elemento As String In ElementosMatriz respuestaXML &= "<elemento>" & elemento & "</elemento>"



Next elemento Else respuestaXML &= "<elemento>[Sin elementos]</elemento>" End If respuestaXML &= "</elementos>" '' Otra forma: 'Dim miSerializador As System.Xml.Serialization.XmlSerializer 'Dim miEscritorTexto As System.IO.TextWriter 'miSerializador = New System.Xml.Serialization.XmlSerializer(GetType(String())) 'miEscritorTexto = New System.IO.StreamWriter("C:\Inetpub\wwwroot\AJAX1\App_Data\respuesta.txt") 'miSerializador.Serialize(miEscritorTexto, ElementosMatriz) 'miEscritorTexto.Close() '' Ojo: intr0duce las etiquetas <string> </string>. Cambiar: getElementsByTagName("string") 'Dim respuestaXML As String = System.IO.File.ReadAllText("C:\Inetpub\wwwroot\AJAX1\App_Data\respuesta.txt") Return respuestaXML End Function End Class Código del archivo respuesta.txt: <?xml version="1.0" encoding="utf-8"?> <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <string>Enrique Pérez</string> <string>Elena Gutiérrez</string> <string>Andrea Ramos</string> <string>Luis Sánchez</string> <string>Antonio Delgado</string> </ArrayOfString> Ejecutar la aplicación y se observara que en la página Inicio.html se muestra el logo de Senati y la hora en que se está accediendo al sistema, así mismo se puede seleccionar a los alumnos aptos y no aptos y la tabla dinámica ira cambiando según la petición:



7.2. IMPLEMENTAR LOS CONTROLES AJAX: ASP.Net introduce una nueva técnica para implementar controles AJAX denominada Script Callbacks. El objetivo de este Script es poder generar peticiones asincrónicas desde el lado del cliente (navegador) al servidor cuando sea necesario refrescar parcialmente una página evitando así tener que cargar y generar toda la página. La técnica Script Callbacks persigue los mismos objetivos que AJAX, pero existe una diferencia fundamental, la cual es que el Script Callbacks nos permite abstraernos del manejo de la clase XMLHttpRequest, incluyendo el tratamiento de los errores, resultando u proceso más simplificado, ya que .Net se encarga prácticamente de todo de una manera transparente, esto se trata de una técnica para realizar Postbacks en segundo plano, utilizando el modelo de eventos de servidor .Net, para recargar la parte de la página que nos interese sin que el usuario aprecie las idas y venidas hacia y desde el servidor. En el siguiente ejemplo se utilizara Script Callbacks:

1. El usuario solicita el listado de Alumnos aptos, o no aptos, interactuando con la pagina Default.aspx, para ello, la pagina tiene que tener un elemento que genere un evento que este vinculado con la llamada Callbacks. Es esencial que el elemntono sea un botón de tipo “submit” (botón de envio de Formulario). Por esta razón no se puede utilizar un botón de la clase <asp:button> pero si se puede utilizar un botón HTML que se ejecute en el servidor, porque aunque el código del clientese ejecuta correctamente, después la pagina vuelve y cancela todos los cambios dinámicos realizados.

2. El código JavaScript que se encuentra en el cliente, procesa el evento y realiza la llamada al servidor (petición HTTP) mediante la función JavaScript WebForm_DoCallback aportada por ASP.Net.

3. El servidor recibe la petición y ejecuta la lógica necesaria para obtener los datos de una fuente de datos, mediante la función RaiseCallbackEvent aportada por la interfaz ICallbackEventHandler de ASP.Net.



4. El servicio genera el resultado (los datos obtenidos) y o envía al cliente por

medio de la función GetCallbackResult aportada por la interfaz ICallbackEventHandler de Asp.Net.

5. Una función JavaScript en el cliente (ClienteCallback: CargarTabla) recibe el

resultado, lo procesa y recarga únicamente la seccionde la pagina web que corresponde al listado de los alumnos: La Tabla.

6. Básicamente se considera la técnica de los Script Callback proporcionada

por ASP.Net como la versión simplificada de lo que hemos utilizado en el marco de AJAX, ya que en esta técnica se utiliza en el lado del cliente un controlador especial que se denomina WebResource.axd proporcionado por ASP.Net que encapsula la logicade las llamadas en segundo plano, mientras que AJAX utiliza un objeto XMLHttpRequest

Se vera el código siguiente de la aplicación, como se emplea esta técnica. Generar un sitio web donde se insertara la pagina “Default.aspx”.

Ingresar el siguiente Código: Public Class _Default Inherits System.Web.UI.Page Implements ICallbackEventHandler Private elementos As String() Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load If (Not IsCallback) Then ' Asignar la llamada en segundo plano al evento onchange de la lista



Me.ListaDeOpciones.Attributes("onchange") = JavaScriptCallback() End If End Sub Private Function JavaScriptCallback() As String ' Obtener el Id de la lista Dim IdLista As String = Me.ListaDeOpciones.ClientID ' Construir la sentencia javascript para obtener el elemento seleccionado en la lista Dim opcionLista As String = String.Format("document.getElementById('{0}').value", IdLista) ' Construir la llamada en segundo plano hacia el servidor Dim callback As String = Page.ClientScript.GetCallbackEventReference(Me, opcionLista, "CargarTabla", "null", "Error", True) ' Construir la llamada en segundo plano en javascript Return String.Format("javascript:{0}", callback) End Function Public Function GetCallbackResult() As String Implements ICallbackEventHandler.GetCallbackResult Return DevuelveXML(elementos) End Function Public Sub RaiseCallbackEvent(ByVal op As String) Implements ICallbackEventHandler.RaiseCallbackEvent Select Case op.ToLower() Case "aptos" elementos = New String() {"Eduardo Ramirez", "Luis Corrales", "Omar Espinoza", "Hervert Navarro", "Hugo Mamanchura", "Eduardo Reyes"} Case "no aptos" elementos = New String() {"Enrique Pérez", "Elena Gutiérrez", "Andrea Ramos", "Luis Sánchez", "Antonio Delgado"} End Select End Sub ' Función para crear el XML a devolver Private Function DevuelveXML(ByVal ElementosMatriz As String()) As String Dim miSerializador As System.Xml.Serialization.XmlSerializer Dim miEscritorTexto As System.IO.TextWriter miSerializador = New System.Xml.Serialization.XmlSerializer(GetType(String())) 'modifique la ruta escrita por la ruta donde ubique esta carpeta miEscritorTexto = New System.IO.StreamWriter("C:\Users\el_ed\OneDrive\Documentos\Visual Studio 2012\WebSites\AJAX2\App_Data\respuesta.txt") miSerializador.Serialize(miEscritorTexto, ElementosMatriz) miEscritorTexto.Close() ' Ojo: intr0duce las etiquetas <string> </string>. Cambiar: getElementsByTagName("string")



Dim respuestaXML As String = System.IO.File.ReadAllText("C:\Users\el_ed\OneDrive\Documentos\Visual Studio 2012\WebSites\AJAX2\App_Data\respuesta.txt") Return respuestaXML End Function End Class Este seria el Codigo HTML de la pagina “Default.aspx” <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Página sin título</title> <script language="javascript" src="funciones.js"></script> </head> <body> <img src="logo01.jpg" width="120" /> <p><script>hora()</script></p> <p align="center"> Completar una lista dinámicamente con AJAX en función de la opción elegida.</p> <form id="form1" runat="server"> <div> <p align="center"> Elija una OPCIÓN: <select name="ListaDeOpciones" id="ListaDeOpciones" runat="server"> <option value=""></option> <option value="APTOS">APTOS</option> <option value="NO APTOS">NO APTOS</option> </select> </p> <table border="1" id="TablaDeResultados" width="100%"> <tr> <th colspan="3"> RESULTADOS</th> </tr> </table> </div> </form> </body> </html>



Insertar una carpeta App_Data que contendrá un archivo de texto “respuesta.txt”, e ingresar lo siguiente: <?xml version="1.0" encoding="utf-8"?> <ArrayOfString xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <string>Enrique Pérez</string> <string>Elena Gutiérrez</string> <string>Andrea Ramos</string> <string>Luis Sánchez</string> <string>Antonio Delgado</string> </ArrayOfString> Agregar un fichero XML con el nombre “doc.xml”, en el cual se agregara el siguiente código de respuesta: <?xml version="1.0" encoding="utf-8"?> <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <string>Eduardo Ramirez</string> <string>Luis Corrales</string> <string>Omar Espinoza</string> <string>Hervert Navarro</string> <string>Hugo Mamanchura</string> <string>Eduardo Reyes</string> </ArrayOfString> Finalmente agregar el fichero de JavaScript al cual nombrara “Funciones.js” e ingresar las clases definidas por el usuario: // Archivo JScript Luis Ramirez function LoadXmlFromString(xmlString) { var dom = null; if (document.implementation && document.implementation.createDocument) { domParser = new DOMParser(); dom = domParser.parseFromString(xmlString, 'text/xml'); } else { dom = new ActiveXObject('Microsoft.XMLDOM'); dom.loadXML(xmlString); } return dom;



} function CargarTabla(resultado, contexto) { // debugger; var elementos = LoadXmlFromString(resultado).getElementsByTagName("string"); TablaResultados = document.getElementById("TablaDeResultados"); if (TablaResultados != null) { // Fila de cabecera var cabecera = document.getElementById("ListaDeOpciones").value + " EN LAS PRÁCTICAS DE PROGRAMACIÓN VISUAL"; TablaResultados.rows[0].cells[0].innerHTML = cabecera; // Resto de filas if (TablaResultados.rows.length > 1) BorrarFilas(TablaResultados); // vaciar la tabla de resultados // Añadir los elementos obtenidos a la tabla de resultados for(var e = 0; e < elementos.length; e++) { AnyadirFila(TablaResultados); TablaResultados.rows[e+1].cells[1].innerHTML = elementos[e].childNodes[0].nodeValue; } } } function AnyadirFila(tabla) { var siguienteFila = tabla.rows.length; var row = tabla.insertRow(siguienteFila); // Celda 0 var celda0 = row.insertCell(0); var textoCelda = document.createTextNode(siguienteFila); celda0.appendChild(textoCelda); // Celda 1 var celda1 = row.insertCell(1); var elemento = document.createElement("input"); elemento.type = "text"; elemento.name = "txtRow" + siguienteFila; elemento.id = "txtRow" + siguienteFila; celda1.appendChild(elemento); } function BorrarFilas(tabla) { // Borrar todas las filas menos la de cabecera for(var f = tabla.rows.length-1; f > 0; f--)



{ // alert(f); tabla.deleteRow(f); } } function Error(mensaje, contexto) { alert("Se ha producido un error"); } function hora() { var fh = new Date(); var h = fh.getHours(); var m = fh.getMinutes(); var s = fh.getSeconds(); var mt = "AM"; if (h > 12) { mt = "PM"; h = h - 12; } if (h == 0) hours = 12; if (m <= 9) m = "0" + m; if (s <= 9) s = "0" + s var htmlhora="<font size='5' face='Arial' ><b><font size='1'>Hora actual:</font></br>"+h+":"+m+":"+s+" "+mt+"</b></font>" document.write(htmlhora); } Ejecutar la aplicación web y observar el resultado similar a la anterior aplicación pero esta vez con controles AJAX:

ASP.Net AJAX: Para poder entender de una mejor manera como trabaja AJAX con ASP.Net, desarrollaremos otro ejemplo práctico, en la cual utilizaremos varias técnicas



que hemos aprendido a lo largo de este manual, como son las paginas maestras, la conexión a datos SQL Server y código de Java para interactuar con nuestra página. • Crea la Base de datos desde SQL Server. Tabla Alumnos /* Crear la Base de Datos */ create database InstitutoSenati /* Abrir la base de datos */ Use InstitutoSenati /* Creamos la Tabla Alumnos */ create table Alumnos ( id_alumno int primary key not null, nombre varchar (50), apto Bit ) /* Ingresar Registros */ Insert Into Alumnos values(2,'Manuel Huaman',1) Insert Into Alumnos values(2,'José Roman',0) Insert Into Alumnos values(3,'Rosa Arias',1) Insert Into Alumnos values(4,'David Cubas',1) Insert Into Alumnos values(5,'Maria Robles',0) Insert Into Alumnos values(6,'Renzo Melgarejo',1) Insert Into Alumnos values(7,'Enrrique Martinez',0) Insert Into Alumnos values(8,'Saul Poma',0) /* Visualizamos el contenido de la Tabla Alumnos*/ select * from Alumnos



Ahora en Visual se creara un nuevo proyecyo, en la cual lo primero que se determinara es una Página Maestra. Ingresar el Código de la página.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>ASP.NET AJAX</title> <link href="HojaDeEstilos.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="funciones.js"> </script> <style type="text/css"> .auto-style1 { font-size: xx-large; color: #0000FF; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; text-transform: uppercase; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <img src="imagenes/logo01.jpg" alt="logo Senati" style="height: 75px; width: 160px" /> <strong><span class="auto-style1">ETI - Senati</span></strong>


<p><script type="text/javascript">hora()</script></p> </div> <div class="cabecera"> <h1>Listado de alumnos aptos/no aptos</h1> </div> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html> Modificar el archivo Web.config para genearr la conexión con nuestra base de datos: <?xml version="1.0"?>  <configuration> <connectionStrings> <add name="bd_alumnosConnectionString" connectionString="server=DESKTOP-FRUVH1J\SQLEXPRESS;database=InstitutoSenati;uid=sa;password=root" providerName="System.Data.SqlClient"/> <add name="InstitutoSenatiConnectionString" connectionString="Data Source=DESKTOP-FRUVH1J\SQLEXPRESS;Initial Catalog=InstitutoSenati;User ID=sa;Password=root" providerName="System.Data.SqlClient"/> </connectionStrings> <system.web> <compilation debug="true" strict="false" explicit="true" targetFramework="4.5"/> <httpRuntime targetFramework="4.5"/> </system.web> </configuration> Ingresar el fichero de Estilos para darle las características a las páginas. HojaDeEstilos.css: * html .cabecera h2 { top: 35px; }


* html .cabeceraconstruir, * html .cabecerainsertar { height: 1%; } a, a:visited { text-decoration: none; } a:hover, input { color: #333333; } form { width: 375px; } body { background: #6B91C3; font: "Segoe UI" , Segoe, sans-serif; margin: 0; padding: 18px; background: url(imagenes/fondopagina.png) top left repeat-x; } em { background: #EEEEEE; font-style: normal; } li { background: url(imagenes/bullet_purple.gif) top left no-repeat; padding: 0 0 0 18px; } p { line-height: 18px; margin: 5px; } p, li, input { color: #333333; font: small "Segoe UI" , Segoe, sans-serif; padding: 0; } ul {



list-style: none; margin: 5px; padding: 0; } .contenido { float: left; margin: 5px 5px; text-align: left; } .vistadetalles .actions div { float: right; text-align: right; width: 95px; padding-right: 2px; } .vistadetalles td { background: #D7E6F4; color: #333333; font: small "Segoe UI" , Segoe, sans-serif; padding: 15px 10px 10px 10px; } .vistadetalles td a { color: #0066CC; font: bold small "Segoe UI" , Segoe, sans-serif; padding-right: 10px; } .vistadetalles td a:hover { font-weight: bold; color: #333; } .vistadetalles th { background: #4168BD; color: #FFFFFF; font: small "Segoe UI" , Segoe, sans-serif; letter-spacing: 0; padding: 3px 8px 5px; padding: 2px; text-align: left; } .vistadetalles tr.cabecera



{ background: #C5DBF7; padding: 3px 8px 5px; } .vistarejilla .actions div { float: right; padding-right: 2px; text-align: right; width: 95px; } .vistarejilla .edit td, .vistarejilla .create td { background: #DAFFCD; padding: 4px; border-bottom: solid 2px #FFFFFF; border-top: solid 2px #FFFFFF; } .vistarejilla td { background: #D7E6F4; border-bottom: solid 1px #C5DBF7; color: #333333; font: small "Segoe UI" , Segoe, sans-serif; padding: 5px 4px; } .vistarejilla td a { color: #0066CC; font: bold small "Segoe UI" ,Segoe,sans-serif; padding: 2px; text-decoration: none; } .vistarejilla td a:hover { color: #333333; font-weight: bold; } .vistarejilla th { background: #4168BD; color: #FFFFFF; font: small "Segoe UI" , Segoe, sans-serif; letter-spacing: 0; padding: 4px;



text-align: left; } .vistarejilla th a { color: #FFFFFF; font: bold small "Segoe UI" ,Segoe,sans-serif; } .vistarejilla th a:hover { color: #00FF00; } .vistarejilla tr.even td, .vistadetalles tr.even td { background: #FFFFFF; } .vistarejilla tr.cabecera { background: #C5DBF7; } .vistarejilla, .vistadetalles { width: 100%; } .cabecera { height: 50px; margin-left: 5px; } .cabecera h1 { color: #10377C; font: bold xx-large "Segoe UI" , Segoe, sans-serif; margin: 0px; white-space: nowrap; } .cabecera h2 { color: #666666; font: x-small "Segoe UI" , Segoe, sans-serif; position: absolute; top: 28px; } .cabecera h2 a { color: #6600CC; font-weight: normal; }



.cabecerainsertar { color: Silver; background: #10377C url(imagenes/add.gif) 6px 50% no-repeat; margin-top: 25px; padding-left: 25px; position: relative; } .cabecerainsertar a { color: #FFFFFF; font: bold medium "Segoe UI" , Segoe, sans-serif; margin-left: 20px; } .progreso { color: #FFFF99; float: right; font: bold medium "Segoe UI" , Segoe, sans-serif; margin-top: -19px; } .cabeceraconstruir { color: Silver; background: #10377C; position: relative; } .cabeceraconstruir h2 { background: url(imagenes/corner.gif) top right no-repeat; color: #FFFFFF; font: bold medium "Segoe UI" , Segoe, sans-serif; margin: 0; padding: 8px 5px 5px 5px; } .cabecerainsertar h2 { color: #FFFFFF; font: bold medium "Segoe UI" , Segoe, sans-serif; margin: 0; padding: 8px 5px 5px 5px; } Ingresar el fichero de los códigos Script para la aplicación. “Funciones.js”: // Archivo JScript Profesor Luis Ramirez



Ingresar un DetailsView el cual se conectara con el acceso a datos SqlDataSource.

Ingresar el código HTML de la pagina “Default.aspx” <%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"/> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString= "<%$ ConnectionStrings:InstitutoSenatiConnectionString %>" SelectCommand="SELECT * FROM [Alumnos]"> </asp:SqlDataSource> Opción: <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"> <asp:ListItem Selected="True" Value="true">APTOS</asp:ListItem>



<asp:ListItem Value="false">NO APTOS</asp:ListItem> </asp:DropDownList> <br /><br /> <div class="cabeceraconstruir"> Construir la lista: <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <div class="progreso"> <img src="imagenes/indicador.gif" /> Actualizando... <a href="" onclick="CancelarLlamadaAsincrona()">(suspender)</a> </div> </ProgressTemplate> </asp:UpdateProgress> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="id_alumno" AllowPaging="True" AllowSorting="True" CssClass="vistarejilla" GridLines="None" AutoGenerateColumns="False" > <Columns> <asp:BoundField DataField="id_alumno" HeaderText="id_alumno" SortExpression="id_alumno" ReadOnly="True" /> <asp:BoundField DataField="nombre" HeaderText="nombre" SortExpression="nombre" /> <asp:CheckBoxField DataField="apto" HeaderText="apto" SortExpression="apto" /> </Columns> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> <br /> <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:DetailsView ID="DetailsView1" runat="server" CssClass="vistadetalles" DataSourceID="SqlDataSource1" DataKeyNames="id_alumno" DefaultMode="Insert" AutoGenerateRows="False" GridLines="None" oniteminserted="DetailsView1_ItemInserted" > <Fields> <asp:BoundField DataField="id_alumno" HeaderText="id_alumno" ReadOnly="True" SortExpression="id_alumno" />



<asp:BoundField DataField="nombre" HeaderText="nombre" SortExpression="nombre" /> <asp:CheckBoxField DataField="apto" HeaderText="apto" SortExpression="apto" /> </Fields> </asp:DetailsView> </ContentTemplate> </asp:UpdatePanel> </asp:Content> Ejecutar la aplicación y observar que los datos se muestran en nuestro gridview y detailView.



VIII. USO DE LINQ CON ASP.NET OPERACIONES: En esta tarea trataremos las siguientes operaciones: - Elaborar Consultas con LINQ. - Uso de LinqDataSource para Acceso y Control de Datos.

EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas. ORDEN DE EJECUCIÓN: - Reconocer la Estructura LINQ en las Páginas Web. - Utilizar Herramientas de Desarrollo LINQ para Aplicaciones WEB ASP.Net 8.1. ELABORAR CONSULTAS CON LINQ. Como sabemos, LINQ es una combinación de extensiones al lenguaje y bibliotecas de código administrado que permite expresar de manera uniforme consultas sobre colecciones de datos de diversa procedencia utilizando recursos del propio lenguaje de programación. Los Controles de datos como GridView, ListView, DetailsView, DropDownList, DataList, Repeater, etc., pueden consumir datos devueltos por una consulta escrita en LINQ sobre un modelo de objetos generado por Entity Framework. Por Ejemplo: <asp:DropDownList ID="lsdCursos" runat="server" style="z-index:102; left:210px; position:absolute; top:104px" Width="300px" datasourceid="FuenteDatosLinq"



Datatextfield="nombre" DataValueField="id_curso"> </asp:DropDownList> Como ejemplo, se realizara una aplicación utilizando EntityDataSource: 1. Crear un nuevo sitio Web y luego añadir un formulario.

2. Diseñar la interfas grafica arrastrando los controles.

Objeto Propiedad Valor Etiqueta – Label1 Text DNI :

Etiqueta – Label2 (ID) Text

etNombre Nombre :


etNota Nota :


etError Error :

EntityDataSource (ID) FuenteDeDatosEDS Cuadro de Texto - TextBox (ID) ctDni DropDownList (ID) lsdAsignatura

RangeValidator

(ID) ErrorMessage ForeColor MaximumValue MinimumValue Text Type

cvDniRango Valor fuera de rango Red 99999999 999999 * Integer

ValidationSummary (ID) ForeColor

cvMensajes Red

Button 1 (ID) Text

btConsultarNota Consultar Nota

3. Implementar el modo de validación discreto necesario para los controles de validación según explicamos anteriormente.



4. Abrir el Explorador de Bases de Datos – Explorador de servidores y añadir

una conexión a la base de datos SENATI.

Conectarse a la base de datos Senati (EL Backup estará en la carpeta Bases de Datos del CD).

5. Conectar el control EntityDataSource a la Base de Datos.

Primero se generará este modelo de conexión:



6. Utilizar el editor de expresiones:

7. Realizar el siguiente código para la pagina Default.aspx

Partial Class _Default Inherits System.Web.UI.Page Protected Sub btConsultarNota_Click(sender As Object, e As EventArgs) Handles btConsultarNota.Click ' Obtener datos de los controles del formulario Dim idAlum As Integer = Convert.ToInt32(ctDni.Text) Dim idAsig As Integer = Convert.ToInt32(lsdAsignatura.SelectedItem.Value) ' Crear el contexto de datos Dim contextoDeDatos As New bd_notasAlumnosEntities() ' Consulta para obtener el nombre de idAlum y su nota en idAsig Dim consulta = From alum In contextoDeDatos.alumnos _ From al_as In alum.alums_asigs _ Where al_as.id_alumno = idAlum And _ al_as.id_asignatura = idAsig _ Select New With {alum.nombre, al_as.nota} Try ' Ejecutar la consulta y obtener los datos If consulta.Count() <> 0 Then For Each alum In consulta ' Mostrar en la página el nombre y la nota etNombre.Text = "Nombre: " & alum.nombre etNota.Text = "Nota: " & alum.nota etError.Text = "" Next Else ' El alumno buscado no se encontró etNombre.Text = "" etNota.Text = ""


etError.Text = "Error: no está en acta" End If Catch exc As Exception etError.Text = "Error: " & exc.Message End Try End Sub Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load End Sub End Class 8. Editar el fichero Web.config y estructurar el siguiente código:

<?xml version="1.0" encoding="utf-8"?>  <configuration> <configSections>  <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" /> </configSections> <system.web> <compilation debug="true" strict="false" explicit="true" targetFramework="4.5"> <assemblies> <add assembly="System.Security, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" /> <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" /> <add assembly="System.Data.Entity.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" /> </assemblies> <buildProviders> <add extension=".edmx" type="System.Data.Entity.Design.AspNet.EntityDesignerBuildProvider" /> </buildProviders> </compilation> <httpRuntime targetFramework="4.5" /> </system.web> <connectionStrings>


<add name="bd_notasAlumnosEntities" connectionString="metadata=res://*/App_Code.Model.csdl|res://*/App_Code.Model.ssdl|res://*/App_Code.Model.msl;provider=System.Data.SqlClient;provider connection string="data source=DESKTOP-FRUVH1J\SQLEXPRESS;initial catalog=Senati;user id=sa;password=root;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" /> </connectionStrings> <entityFramework> <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" /> </entityFramework> </configuration> 9. Ejecutar la aplicación y realizar las consultas de notas.

8.2. USO DE LINQDATASOURCE PARA ACCESO Y CONTROL DE DATOS.

Consulta Select: Para realizar una consulta select dentro de LINQ se puede utilizar las mismas técnicas que en SQL Server: Protected Sub FuentedeDatosLinq_selecting(sender As Object, e As LinqDataSourceSelectEventArgs) _ Handles FuenteDeDatoslinq.selecting Dim IdCurso As Integer = 5 'Contexto de Objetos Dim contextodeDatos As New modelodatosdatacontex() 'consulta Dim consulta = From cursos In contextodeDatos.cursos _ Where curs.id_curso = IdCurso Select cursos e.Result = consulta End Sub



Realizar un ejemplo para ver como se generan las consultas, las actualizaciones, eliminación e isercción de datos. 1. Se utilizará un ejemplo parecido al anterior pero se le agregara controles

HiperLink.

Objeto Propiedad Valor Etiqueta – Label1 Text DNI :


etNombre Nombre :


etNota Nota :


etError Error :

EntityDataSource (ID) FuenteDeDatosEDS Cuadro de Texto - TextBox (ID) ctDni DropDownList (ID) lsdAsignatura

RangeValidator

(ID) ErrorMessage ForeColor MaximumValue MinimumValue Text Type

cvDniRango Valor fuera de rango Red 99999999 999999 * Integer

ValidationSummary (ID) ForeColor

cvMensajes Red

Button 1 (ID) Text

btConsultarNota Consultar Nota

HiperLink NavigateURL Text

ActualizarEliminar.aspx Actualizar o eliminar


Insertar.aspx Matricular


AgregarAlumno.aspx Agregar alumno


AgregarAsignatura.aspx Agregar asignatura

2. Generar el siguiente diseño:



3. Ingresar las siguiente páginas en el proyecto:

4. Página ActualizarEliminar.aspx

5. Página AgregarAlumno:


6. Página AgregarAsignatura:

7. Página Insertar:

8. Modificar el archivo Web.config de la siguiente manera: <?xml version="1.0"?>  <configuration> <configSections>

<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false"/> </configSections> <system.web> <compilation debug="true" strict="false" explicit="true" targetFramework="4.5"> <assemblies> <add assembly="System.Security, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/> <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/> <add assembly="System.Data.Entity.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/> <add assembly="System.Web.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> </assemblies> <buildProviders> <add extension=".edmx" type="System.Data.Entity.Design.AspNet.EntityDesignerBuildProvider"/> </buildProviders> </compilation> <httpRuntime targetFramework="4.5"/> </system.web> <connectionStrings> <add name="bd_notasAlumnosEntities" connectionString="metadata=res://*/App_Code.Model.csdl|res://*/App_Code.Model.ssdl|res://*/App_Code.Model.msl;provider=System.Data.SqlClient;provider connection string="data source=.\sqlexpress;initial catalog=bd_notasAlumnos;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient"/> </connectionStrings> <entityFramework> <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework"/> </entityFramework> </configuration>

9. Verificar el código HTML de la pagina Default.aspx <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>


<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Formulario web notas</title> </head> <body> <form id="form1" runat="server"> <div> <asp:EntityDataSource ID="FuenteDeDatosEDS" runat="server" ConnectionString="name=bd_notasAlumnosEntities" DefaultContainerName="bd_notasAlumnosEntities" EnableFlattening="False" EntitySetName="asignaturas" Select="it.[id_asignatura], it.[nombre]"> </asp:EntityDataSource> <asp:Label ID="Label1" runat="server" Style="z-index: 100; left: 160px; position: absolute; top: 68px" Text="DNI:"></asp:Label> <asp:TextBox ID="ctDni" runat="server" Style="z-index: 101; left: 210px; position: absolute; top: 68px; width: 253px;"></asp:TextBox> <asp:DropDownList ID="lsdAsignatura" runat="server" Style="z-index: 102; left: 210px; position: absolute; top: 104px" Width="320px" DataSourceID="FuenteDeDatosEDS" DataTextField="nombre" DataValueField="id_asignatura"> </asp:DropDownList> <asp:Button ID="btConsultarNota" runat="server" Style="z-index: 103; left: 210px; position: absolute; top: 140px" Text="Consultar nota" Width="255px" /> <asp:Label ID="etNombre" runat="server" Style="z-index: 104; left: 160px; position: absolute; top: 186px" Text="Nombre:" Width="388px"></asp:Label> <asp:Label ID="etNota" runat="server" Style="z-index: 105; left: 160px; position: absolute; top: 222px" Text="Nota:" Width="388px"></asp:Label> <asp:Label ID="etError" runat="server" Style="z-index: 106; left: 160px; position: absolute; top: 258px" Text="Error:" Width="388px"></asp:Label> <asp:RequiredFieldValidator ID="cvDni" runat="server" ControlToValidate="ctDni" ErrorMessage="DNI requerido" Style="z-index: 107; left: 500px; position: absolute; top: 71px; " ForeColor="Red">*</asp:RequiredFieldValidator> <asp:RangeValidator ID="cvDniRango" runat="server" ControlToValidate="ctDni" ErrorMessage="Valor fuera de rango" MaximumValue="99999999" MinimumValue="999999" Style="z-index: 108; left: 505px; position: absolute; top: 71px" Type="Integer" ForeColor="Red">*</asp:RangeValidator>



<asp:ValidationSummary ID="cvMensajes" runat="server" Style="z-index: 109; left: 530px; position: absolute; top: 52px; width: 194px;" ForeColor="Red" /> <asp:HyperLink ID="HyperLink1" runat="server" style="z-index: 1; left: 160px; top: 295px; position: absolute" NavigateUrl="ActualizarEliminar.aspx">Actualizar o eliminar</asp:HyperLink> <asp:HyperLink ID="HyperLink2" runat="server" style="z-index: 1; left: 330px; top: 295px; position: absolute" NavigateUrl="Insertar.aspx">Matricular</asp:HyperLink> <asp:HyperLink ID="HyperLink3" runat="server" style="z-index: 1; left: 425px; top: 295px; position: absolute" NavigateUrl="AgregarAlumno.aspx">Agregar alumno</asp:HyperLink> <asp:HyperLink ID="HyperLink4" runat="server" style="z-index: 1; left: 555px; top: 295px; position: absolute; height: 18px;" NavigateUrl="AgregarAsignatura.aspx">Agregar asignatura</asp:HyperLink> </div> </form> </body> </html>

10. Ingresar el siguiente código en la Clase Default.aspx.vb Partial Class _Default Inherits System.Web.UI.Page Protected Sub btConsultarNota_Click(sender As Object, e As EventArgs) Handles btConsultarNota.Click ' Obtener datos de los controles del formulario Dim idAlum As Integer = Convert.ToInt32(ctDni.Text) Dim idAsig As Integer = Convert.ToInt32(lsdAsignatura.SelectedItem.Value) ' Crear el contexto de datos Dim contextoDeDatos As New bd_notasAlumnosEntities() ' Consulta para obtener el nombre de idAlum y su nota en idAsig Dim consulta = From alum In contextoDeDatos.alumnos _ From al_as In alum.alums_asigs _ Where al_as.id_alumno = idAlum And _ al_as.id_asignatura = idAsig _ Select New With {alum.nombre, al_as.nota} Try ' Ejecutar la consulta y obtener los datos If consulta.Count() <> 0 Then For Each alum In consulta ' Mostrar en la página el nombre y la nota etNombre.Text = "Nombre: " & alum.nombre etNota.Text = "Nota: " & alum.nota etError.Text = "" Next



Else ' El alumno buscado no se encontró etNombre.Text = "" etNota.Text = "" etError.Text = "Error: no está en acta" End If Catch exc As Exception etError.Text = "Error: " & exc.Message End Try End Sub Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load End Sub End Class

11. Ingresar el siguiente código para la clase ActualizarEliminar.aspx.vb Partial Class ActualizarEliminar Inherits System.Web.UI.Page Protected Sub Page_Error(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Error Dim objError As Exception = Server.GetLastError().GetBaseException() Dim mensajeError As String = "<h3>Error: </h3><hr><br>" & _ objError.Message.ToString() & _ "<br><br><a href='ActualizarEliminar.aspx'>Volver</a>" Response.Write(mensajeError.ToString()) Server.ClearError() End Sub End Class

12. Ingresar el siguiente código para la clase AgregarAlumno.aspx.vb Partial Class AgregarAlumno Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load etMsj.Text = "" End Sub Protected Sub btAgregarAl_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btAgregarAl.Click Try etMsj.Text = "" ' Colección columna-valor para el método Insert Dim nuevaFila As New ListDictionary() ' Valores de la fila



nuevaFila.Add("id_alumno", ctDni.Text) nuevaFila.Add("nombre", ctNombre.Text) ' Insertar la fila en alumnos EntityDataSource1.Insert(nuevaFila) etMsj.Text = "Operación realizada." Catch exc As Exception Dim msjError As String = "Los datos no son correctos " & _ "o el alumno ya existe (clave duplicada)" etMsj.Text = msjError End Try End Sub End Class

13. Ingresar el siguiente código para la clase AgregarAsignatura.aspx.vb Partial Class AgregarAsignatura Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load etMsj.Text = "" End Sub Protected Sub btAgregarAs_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btAgregarAs.Click Try etMsj.Text = "" ' Colección columna-valor para el método Insert Dim nuevaFila As New ListDictionary() ' Valores de la fila nuevaFila.Add("id_asignatura", ctIdAsig.Text) nuevaFila.Add("nombre", ctNombre.Text) ' Insertar la fila en asignaturas EntityDataSource1.Insert(nuevaFila) etMsj.Text = "Operación realizada." Catch exc As Exception Dim msjError As String = "Los datos no son correctos " & _ "o la asignatura ya existe (clave duplicada)" etMsj.Text = msjError End Try End Sub End Class

14. Ingresar el siguiente código para la clase Insertar.aspx.vb Partial Class Insertar



Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load etMsj.Text = "" End Sub Protected Sub btMatricular_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btMatricular.Click Try etMsj.Text = "" ' Colección columna-valor para el método Insert Dim nuevaFila As New ListDictionary() ' Valores de la fila nuevaFila.Add("id_alumno", DropDownList1.SelectedValue) nuevaFila.Add("id_asignatura", DropDownList2.SelectedValue) nuevaFila.Add("nota", 0.0F) ' Insertar la fila en alums_asigs EntityDataSource3.Insert(nuevaFila) etMsj.Text = "Matrícula realizada." Catch exc As Exception Dim msjError As String = "Ya está matriculado/a en esta asignatura " & _ "(clave duplicada)" etMsj.Text = msjError End Try 'Try ' etMsj.Text = "" ' ' Insertar la fila en alums_asigs ' EntityDataSource3.Insert() ' etMsj.Text = "Matrícula realizada." 'Catch exc As Exception ' Dim msjError As String = "Ya está matriculado/a en esta asignatura (clave duplicada)" ' etMsj.Text = msjError 'End Try End Sub Protected Sub EntityDataSource3_Inserting(ByVal sender As Object, ByVal e As EntityDataSourceChangingEventArgs) Handles EntityDataSource3.Inserting '' Nueva entidad alums_asigs 'Dim nuevo = TryCast(e.Entity, alum_asig) 'nuevo.id_alumno = Convert.ToInt32(DropDownList1.SelectedValue) 'nuevo.id_asignatura = Convert.ToInt32(DropDownList2.SelectedValue) 'nuevo.nota = 0.0F '' Establecer las relaciones con idAlum e idAsig 'Dim idAlum As Integer = Convert.ToInt32(DropDownList1.SelectedValue) 'Dim idAsig As Integer = Convert.ToInt32(DropDownList2.SelectedValue) '' Establecer referencias 'Dim alum As Object



'e.Context.TryGetObjectByKey(New System.Data.EntityKey( ' "bd_notasAlumnosEntities.alumnos", "id_alumno", idAlum), alum) 'nuevo.alumno = DirectCast(alum, alumno) 'Dim asig As Object 'e.Context.TryGetObjectByKey(New System.Data.EntityKey( ' "bd_notasAlumnosEntities.asignaturas", "id_asignatura", idAsig), asig) 'nuevo.asignatura = DirectCast(asig, asignatura) End Sub End Class

15. Ejecutar la aplicación y navegar entre las páginas para poder ingresar nuevos alumnos, editarlos y eliminarlos.



IX. PUBLICACIÓN DE UNA APLICACIÓN. OPERACIONES: - Introducción al Internet Information Service. - Servidor Web. - Alojamiento y Prueba de Aplicaciones Web. EQUIPOS Y MATERIALES: - Computadora con microprocesadores Core 2 Duo o de mayor capacidad. - Sistema operativo Windows. - Acceso a internet. - Software Visual Studio 2012, Block de Notas. ORDEN DE EJECUCIÓN: - Conocer el Manejo y Entorno de IIS. - Reconocer el Funcionamiento de un Servidor Web. - Aprender a Publicar la Aplicación Web Desarrollada. 9.1. GESTIONAR EL INTERNET INFORMATION SERVICE. Todas las versiones del sistema operativo de Windows incluyen un servicio de Servidor a cargo del IIS (Internet Information Service). La ventaja de contar con este servicio es que permite navegar por las páginas creadas en ASP sin necesidad de la conexión a internet, con ello se podrá verificar el funcionamiento de la Aplicación desarrollada. IIS cuenta con las siguientes características: • Escalabilidad: Mejora los tiempos de respuesta de las paginas Web y sus

peticiones, esto origina un menor consumo de ancho de banda y el funcionamiento se hace continuo sin caer la información.

• Seguridad: Es conocido que hoy en dia los ataques a los servidores web son mas frecuentes, es por ello que IIS controla el acceso de manaera predeterminada, controlando básicamente el acceso de páginas dinámicas, solo aceptando estas cuando el navegador asi lo indica. Las funciones de la



seguridad son: Reducir la posibilidad de ataque al servidor, permite configurar cuentas de usuarios y grupos para el acceso, protege los archivos y directorios de la aplicación, proteger los sitios web y los directorios virtuales, además de configurar la capa de sockets de seguros.

• Fiabilidad: El IIS ah sido sujeto de revisión extensa, para verificar el buen funcionaminto para poder reforzar la seguridad en todas las fases del ciclo de vida del producto, asegurando asi las aplicaciones web y sus contenidos.

• Administración: Este servicio posee un panel administrativo, el cual hara sencillo su manejo y la definición de parámetros para su buen funcionamiento. Se puede ingresar a este panel utilizando la herramienta Ejecutar de Windows e ingresando el comando “Inetmgr”.

Ventajas del IIS: • Permite acceder a páginas web guardadas automáticamente en el IIS sin

necesidada de estar conectadas a internet • Permite gestionar páginas de la aplicación antes de subirlas al servidor de

internet. • Es de fácil instalación y configuración de uso. • Permite trabajar con Servidores Apache.

Acceder al IIS: • Una ves instalado el IIS ya se puede acceder de manera local al IIS desde

el navegador



• Se utiliza para el acceso el “LocalHost” o puede utilizar el numero IP:

127.0.0.1 9.2. ADMINISTRAR UN SERVIDOR WEB. Un Servidor Web es una aplicación que alamacena páginas web mediante sitios, para poder acceder a ellas mediante un navegador web. Existen varias tecnologías para servidores web que van a permitir aumentar la potencia y manejo de ficheros de HTML, CSS, CGI y paginas activas de servidor, como pueden ser los contenidos .php y .asp. Un servidor web es una maquina u ordenador, donde se guardan los archivos y directorios de la aplicación web. Para que un Servidor Web funcione correctamente se utiliza un método de intercambio de información, entre el ordenador central y el ordenador local, esta acción se realiza mediante el protocolo HTTP (HyperText Trnasfer Protocol – Protocolo de Transferencias de Hipertexto). Ejemplo: www.senati.edu.pe Hosting: Es el Servicio de almacenamiento dedicado a guardar los datos de una página web. Viene a ser básicamente el alojamiento web. Se podría decir que es el que permite o da derecho a la página web de ser publicada y mostrarse en el internet. 9.3. ALOJAR Y PROBAR UNA APLICACIÓN WEB. Debemos seguir los siguientes pasos para poder Publicar la Aplicación Web: 1. Clic Derecho a la Aplicación Web. Seleccionar la Opción Publicar


http://www.senati.edu.pe/


2. Se muestra una ventana de opciones, donde nos solicita: “Seleccionar o

Importar un Perfil de Publicación”, Seleccionar <Nueva…>

3. Ingresar nombre para el Perfil: “Publicacion”.

4. En la siguiente ventana, seleccionar el Método de Publicación, “FTP”.



5. Ingresar los parámetros para la conexión del Servidor:

6. Ingresar el nombre del Servidor, Ruta del Sitio, Nombre de Usuario,

Contraseña y Dirección URL de destino: Se debe de tener en cuenta que esos datos los da el proveedor del Dominio y Hosting. Clic a Siguiente.



7. Dejar marcado la opción Eliminar todos los Archivos Existentes antes de

Publicar. Seleccionar Siguiente.

8. La ventana indica que la aplicación se Publicara, pero previamente se

compilará y así finalizará el sistema.



9. Si todo esta correcto, se compilará sin errores y creará todas las carpetas

necesarias y subirán los archivos al dominio. Finalmente la página se encuentra en el servidor y ya se puede visualizar desde el navegador.


desarrollo de softwarevirtual.senati.edu.pe/curri/file_curri.php/curri/pdsd...v. acceso a datos con...

Documents