I. OBJETIVOS II. INTRODUCCION TEORICA

Transcripción

1 CICLO 02/ 2013 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS Escuela de Computación GUIA DE LABORATORIO #12 Nombre de la Practica: Creación de Reportes e Introducción a ASP. Lugar de Ejecución: Centro de Computo Tiempo Estimado: 2 horas y 30 minutos Materia: Lenguaje de Programación I Que el estudiante sea capaz de: I. OBJETIVOS 1. Utilizar el control ReportViewer para crear reportes en Visual Basic Utilizar el reporteador CrystalReport y vincularlo a un formulario Windowsform. 3. Reconocer el entorno de herramientas y ventanas que forman el IDE de ASP.Net II. INTRODUCCION TEORICA El Diseñador de reportes de Visual Basic proporciona una interfaz fácil de usar para crear reportes sólidos que incluyen datos procedentes de varios tipos de orígenes de datos. En Visual Basic, los reportes se guardan como archivos de definición de informe del cliente (.rdlc). Estos archivos se basan en el mismo esquema que los archivos de definición de reporte (.rdl) publicados en los servidores de informes de SQL Server ReportingServices, pero se guardan y se procesan de manera distinta a los archivos.rdl. En tiempo de ejecución, los archivos.rdlc se procesan localmente, y los archivos.rdl se procesan remotamente. ReportViewer El control ReportViewer admite un modo de procesamiento local que le permite ejecutar archivos de definición de informe de cliente (.rdlc) utilizando la capacidad de procesamiento integrada del control. Los informes de cliente que se ejecutan en modo de procesamiento local se pueden crear fácilmente en el proyecto de aplicación. Mostrar el informe en un control ReportViewer en una aplicación 1. Abrir el proyecto de aplicación. 2. Seleccionar el formulario que contiene el control. 3. En el modo de diseño gráfico, agregar un control ReportViewer al formulario. El control ReportViewer se encuentra en la sección Datos del cuadro de herramientas. 4. Asignar un tamaño y posición al control en la página o el formulario. CrystalReport CrystalReports es una aplicación de inteligencia empresarial utilizada para diseñar y generar informes desde una amplia gama de fuentes de datos (bases de datos). 1

2 Varias aplicaciones, como Microsoft Visual Studio, incluyen una versión OEM de CrystalReports como una herramienta de propósito general del informes/reportes. CrystalReportses el escritor de informes estándar cuando Microsoft lo liberó con Visual Basic. Los usuarios al instalar CrystalReports en un equipo y utilizarlo para seleccionar filas y columnas específicas de una tabla de datos compatibles, pueden organizar los datos en el reporte en el formato que necesiten. Una vez que el diseño está completo, el reporte se puede guardar como un archivo con extensión rpt. Se puede acceder nuevamente al reporte reabriendo el mismo, y poder actualizar los datos. Si la fuente de base de datos se ha actualizado, el informe se refrescará reflejando estas actualizaciones. Qué es ASP.NET? ASP.NET es un modelo de desarrollo Web unificado que incluye los servicios necesarios para crear aplicaciones Web empresariales con el código mínimo. ASP.NET forma parte de.net Framework y al codificar las aplicaciones ASP.NET tiene acceso a las clases en.net Framework. El código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el CommonLanguageRuntime (CLR), entre ellos Microsoft Visual Basic y C#. Estos lenguajes permiten desarrollar aplicaciones ASP.NET que se benefician del CommonLanguageRuntime, seguridad de tipos, herencia, etc. ESTRUCTURA DE DIRECTORIOS ASP.NET En general, la estructura de directorios de ASP.NET puede ser determinada por las preferencias del desarrollador. A parte de unos pocos nombres de directorios reservados, el sitio puede expandirse a cualquier número de directorios. La estructura es típicamente reflejada directamente en las urls. App_Browsers Contiene archivos de definición específicos para navegadores. App_Code Es un directorio para códigos. El servidor ASP.NET automáticamente compilará los archivos (y subdirectorios) en esta carpeta en un ensamblado que es accesible desde cualquier página del sitio. App_Data Directorio por defecto para las base de datos, tales como archivos mdb de Microsoft Access y archivos mdf de Microsoft SQL Server. Este directorio es usualmente el único con permisos de escritura en la aplicación. App_LocalResources Contiene archivos de recursos localizados para páginas individuales del sitio. App_GlobalResources Contiene archivos resx con recursos localizados disponibles para cada página del sitio. Este es donde el desarrollador ASP.NET típicamente almacenara mensajes que serán usados en más de una página. App_Themes Usado para temas alternativos del sitio. App_WebReferences Usado para archivos de descubrimiento y archivos WSDL para referencias a servicios web para ser consumidos en el sitio. Bin Contiene código compilado (archivos.dll) para controles, componentes, y otro código que pueda ser referenciado por la aplicación. Cualquier clase representada por código en la carpeta Bin es automáticamente referenciada en la aplicación. 2

3 ENTORNO DE VISUAL WEB DEVELOPER 2010 EXPRESS El entorno es muy amigable y fácil de usar, cuento muchas opciones como personalizar los menus, conectarme a gestores de datos, facilidades para hacer depuraciones, poder manejar CSS o diseño, oportunidad de incorporar otros recursos y programas, por medio de la web. III. MATERIALES Y EQUIPO Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de Laboratorio 12 de LP1 1 2 PC con Microsoft Visual Studio 2010.NET instalado 1 3 SQL Server CrystalReport 1 5 Memoria USB 1 6 Computadora con acceso a Internet 1 3

4 IV. PROCEDIMIENTO Parte I. Uso del control ReportViewer Ejercicio 1.Creando el proyecto 1. Crear un proyecto en Visual Basic 2. En el cuadro Nombre, escriba Guia12_Reporte1 3. En el cuadro Ubicación, escriba el directorio en el que desea guardar el proyecto o haga clic en Examinar para navegar hasta la ubicación que desea. 4. Haga clic en Aceptar. 5. Se abre el Diseñador de Windows Forms y se muestra Form1 del proyecto creado. 6. Haga clic en el formulario, en la ventana Propiedades, realice los siguientes: Propiedad AutoSize Valor True Size 900,600 StarPosition Text CenterScreen FormBorderStyle Fixed3D MaximizeBox MinimizeBox Reporte de ventas False False Ejercicio 2. Definiendo el conjunto de datos y una tabla de datos 1. En el menú Proyecto (Project), seleccione Agregar nuevo elemento (Add New Item ) 2. En la ventana Agregar nuevo elemento (Add New Item), hacer clic en la opción Data 3. Hacer clic en DataSet. 4. El nombre (name) predeterminado del conjunto de datos es DataSet1.xsd. 4

5 2 5. Hacer clic en el botón Agregar (Add) 6. Esto agrega un nuevo archivo XSD al proyecto y abre el Diseñador de DataSet. 7. En el Cuadro de herramientas (Toolbox), en el Diseñador de DataSet, arrastre un control TableAdapter hasta la superficie de diseño. Área de diseño 8. Esto inicia el Asistente para la configuración de TableAdapter. 9. En la ventana Elegir la conexión de datos (ChooseYour Data Connection), haga clic en Nueva conexión (New Connection). 10. En la ventanaagregar conexión (AddConnection), En la opción Origen de datos (Data source), seleccione Microsoft SQL Server (SqlClient) 5

6 11. En el cuadro Nombre del servidor (Server name), especifique el servidor en el que se encuentra la base de datos AdventureWorks, escribir el nombre del servidor : localhost En la sección Conexión con el servidor (Log on to the server), seleccione la opción que proporciona acceso a los datos. La opción predeterminada es Usar autenticación de SQL Server (Use SQL Server Authentication) y digitar los siguientes datos: a. Nombre usuario (Username): sa b. Constraseña (Password): En la lista desplegable de la sección Conectarse a una Base de datos (Connect to database), seleccione o escriba el nombre de la base de datos (Select or enter a database name, haga clic en AdventureWorks. 13. Hacer clic en el botón Probar conexión (Test Connection) y si todo esta correcto se desplegara la siguiente ventana: 14. Hacer clic en Aceptar, y quedará la siguiente configuración: 6

7 15. Hacer clic en Siguiente (Next) 16. En el paso Grabar la cadena de conexión, hacer clic en Siguiente (Next) 17. En el paso Elija un tipo de comando (Choose a CommandType), seleccionar la opción: Usar instrucciones SQL (Use SQL statements) y hacer clic en Siguiente (Next). 18. En el paso Escriba una instrucción SQL (Enter a SQL Statement), escriba la siguiente consulta Transact- SQL para recuperar los datos de ventas de la base de datos AdventureWorks: SELECT PC.Name AS Categoria, PS.Name AS Subcategoria,DATEPART(yy, SOH.OrderDate)AS Año, SUM(DET.UnitPrice * DET.OrderQty) AS Venta FROM Production.ProductSubcategory AS PS INNER JOIN Sales.SalesOrderHeader AS SOH INNER JOIN Sales.SalesOrderDetail AS DET ON SOH.SalesOrderID = DET.SalesOrderID INNER JOIN Production.Product AS P ON DET.ProductID = P.ProductID ON PS.ProductSubcategoryID = P.ProductSubcategoryID INNER JOIN Production.ProductCategory AS PC ON PS.ProductCategoryID =PC.ProductCategoryID GROUP BY DATEPART(yy, SOH.OrderDate), PC.Name, PS.Name, PS.ProductSubcategoryID 19. Hacer clic en el botón Generador de consultas (QueryBuilder)verá la consulta que acaba de digitar, debemos validar la consulta para saber si esta correcta haciendo clic en el botón Ejecutar consulta (ExecuteQuery) 20. Obtendremos aproximadamente 91 filas, así como se muestra a continuación: Nota: si tiene algún problema revise la consulta o pregúntele a su instructor 7

8 21. Hacer clic en Aceptar (Ok) 22. En los siguientes dos pasos del asistente, haga clic en Siguiente (Next) 23. Y finalmente haga clic en el botón Finalizar (Finish), tomando en cuenta la siguiente configuración que realizo el asistente: 24. El Diseñador de Dataset mostrará la definición del DataTable1 con campos cuyos nombres provienen de las columnas y los alias de columna de la consulta (Categoria, Subcategoria, Año y Venta). Estos campos se utilizarán para enlazarlo con el informe. 25. Guardar el archivo DataSet1. Ejercicio 3. Agregando un nuevo archivo de definición de informe de cliente (.rdlc) utilizando el Asistente para informes. 1. En el menú Proyecto (Project), seleccionar la opción Agregarnuevo elemento (Add New Item...) 2. En el cuadro de diálogo Agregar nuevo elemento (Add New Item) en la opción Reporting seleccione el Asistente para informes (ReportWizard) 3. En la opción Nombre (Name), escriba Ventas.rdlc y, a continuación, hacer clic en Agregar (Add) 8

9 4. Se activa el Asistente de Reportes (ReportWizard) 5. En el paso Propiedades del conjunto de datos (DatasetProperties), en la lista desplegable Origen de datos (Data Source), seleccione el DataSet que creó en el ejercicio 2. 9

10 6. Aparece el DataTable1 7. Hacer clic en Siguiente (Next) 8. En el paso Organizar campos (Arrangefields), realice los siguientes pasos: a. Arrastrar el campo Categoria desde Campos disponibles (Availablefields)hasta el cuadro Grupos de filas (Rowsgroups) b. Arrastrar el campo Subcategoriadesde Campos disponibles (Availablefields) hasta el cuadro Grupos de filas (Rowsgroups), situado debajo de Categoria c. Arrastrar el campoaño desde Campos disponibles (Availablefields) hasta el cuadro Grupos de columnas (Columngroups) d. Arrastrar el campoventas desde Campos disponibles (Availablefields) hasta el cuadro Valores (Values), verificando que la función que posee este campo es SUM 10

11 9. Hacer clic en Siguiente (Next) 10. En el paso Elegir la plantilla (Choosethelayout), hacer clic en Siguiente (Next) 11. En el paso Elegir un estilo (Choosethestyle), seleccione el que mas le guste y hacer clic en Siguiente (Next) 12. Y finalmente hacer clic en Finalizar (Finish) De este modo, se crea el archivo.rdlc y, a continuación, se abre en el Diseñador de informes mostrándolo ahora en la superficie de diseño. Ejercicio 4. Agregando un título al informe Nota 1. Hacer clic en la Tabla en la superficie de diseño para que aparezcan los controladores de columna y filas encima y al lado de la tabla. Los controladores: a) son unos cuadros grises que aparecen encima y al lado de la Tabla. b) se utilizan para realizar diversas acciones en los grupos de columnas, en los grupos de filas y en la propia Tabla. Los controladores situados en la parte superior de la tabla son las de las columnas. Los controladores situados a lo largo del lateral de la tabla son las de las filas. El controlador situado en el lugar donde se encuentran los controladores de columna y fila es el controlador de tabla. 2. Hacer clic en el controlador de tabla para seleccionarla y que muestre la flecha en cruz. 11

12 3. Desplazarla tabla hacia abajo en la superficie de diseño arrastrando la flecha en cruz. 4. Hacer clic derecho sobre una área vacía y del menú contextual seleccionar la opción Agregar (Insert) y hacer clic en la opción: Cuadro de texto (Text Box) 5. Seleccionar el cuadro de texto y escribirel siguiente titulo Ventas de la compañía. Si fuera necesario, arrastre el borde del cuadro de texto para expandirlo. 6. Con el cuadro de texto seleccionado, en la ventanas propiedades realice los siguientes cambios: 7. Ajustar el tamaño del cuadro de texto y colocarlo al centro de su informe, parecido a como se ve en la siguiente imagen: 8. Guardar los cambios 12

13 Ejercicio 5. Agregando el control ReportViewer al formulario 1. En el Explorador de soluciones, hacer clic en Form1.vb. 2. En el menú Ver (View), hacer clic en la opción Diseñador (Designer) 3. En el Cuadro de herramientas (Toolbox), buscar la sección Informes (Reporting)y arrastrar el control ReportViewer hasta el formulario. 4. Hacer clic en la flecha de la esquina superior derecha 5. Hacer clic en la lista desplegable el informe: Guia12_reporte1.Ventas.rdlc 6. Y hacer clic en la opción: Acoplar en contenedor principal (Dock in ParentContainer) 7. Guardar los cambios 8. Generar y visualizar el informe 9. Al final observará la siguiente información: 13

14 Ejercicio 6. Aplicandoformato a un campo numérico 1. En el archivo Ventas.rdlc de la ventana del Diseñador de informes, haga clic derecho en la celda superior izquierda que contiene el valor [Sum(Ventas)] y, a continuación, haga clic en Propiedades de cuadro de texto (Text Box Properties ) 2. Seleccione la pestaña Número (Number). 3. En la lista Categoría (Castegory), seleccione Moneda (Currency) 14

15 4. Realice los siguientes cambios, así como se muestra a continuación: 5. Seguir los mismos pasos con todas las celdas que contengan el valor [Sum(Venta)]. 6. Ejecute la aplicación y vealos cambios que tiene el informe. Observe el cambio del formato de número: 7. Guardar los cambios. 15

16 Parte II. Creación de Reportes con CrystalReport Ejercicio 2. Creando el proyecto en Visual Basic Crear un nuevo proyecto llamado Guia12_reporte2 2. Hacer clic en el formulario y cambie el valor de la propiedad WindowState por Maximized Por defecto Visual Studio 2010 ejecuta el proyecto con.net Framework 4 ClientProfile, para este ejercicio se utilizará el.net Framework 4 ya que hará mas liviana la aplicación, para hacer este cambio realice los siguientes pasos: 3. Ir al menú Proyecto (Project) y hacer clic en las propiedades del proyecto (Guia12_reporte2 Properties ) Nota: Antes de hacer el siguiente paso es necesario que guarde su proyecto. 4. En la opción Compilar (Compile), hacer clic en el botón Opciones avanzadas (Advance Compile Option ) y realice la siguiente configuración: 5. Hacer clic en Aceptar (OK) 6. Se abrirá una ventana de advertencia y hacer clic en el botón Si para aceptar los cambios 7. Verificar en el cuadro de herramientas (Toolbox), el nuevo control agregado: 16

17 Ejercicio 2. Creando el conjunto de datos (Dataset) 1. Hacer clic en el menú Ver (View) y hacer clic en la opción Explorador de servidores (Server Explorer) 2. Hacer clic derecho en la opción Conexión de datos (Data Connections), seleccionar la opción Agregar conexión (AddConnection) 3. Y realizar la siguiente conexión: a. Data source: Microsoft Server (SqlCliente) b. Server name: localhost c. Log on to the server: Use Windows Autehentication d. Select o enter a database name: Northwind 4. Hacer clic en Probar Conexión (Test Connection) 5. Si todo esta correcto hacer clic en Aceptar (Ok) 6. Cuando se ha realizado la conexión se puede observar las tablas que contiene la base de datos Northwind 17

18 7. Agregar un nuevo elemento al proyecto y seleccione el conjunto de datos (Dataset) 8. Hacer clic en Agregar (Add) 9. Arrastrar las tablas Products y Categories, ya que estas serán la fuente de datos para el reporte. 18

19 10. Guardar los cambios Ejercicio 3. Creando el reporte con CrystalReport 1. Agregar un nuevo elemento al proyecto, desde el menú Proyecto (Project) y haciendo clic en Agregar un nuevo elemento (Add New Item) 2. Seleccionar la opción Reportes (Reporting) y hacer clic en CrystalReport, ponerle el nombre ProductosporCategoria, y hacer clic en Agregar (Add) 3. En la ventana que se activa seleccionar la opción: Usar asistente para informes y seleccionar el Estándar, hacer clic en Aceptar 19

20 4. Se abrirá el asistente para informes de CrystalReport 5. En el primer paso se selecciona el conjunto de datos, el cual debe ser el que se creo en el ejercicio 2 6. Hacer clic en Siguiente 7. Se observaran las relaciones entre las tablas 20

21 8. Hacer clic en Siguiente 9. En el siguiente paso se debe seleccionar los campos a mostrar en el informe se recomienda que no sean demasiados para no saturarlo, para el ejercicio se deben seleccionar los siguientes campos: 10. Hacer clic en siguiente. 11. En el siguiente paso se agruparan los campos por el nombre de la categoría 21

22 12. Hacer clic en siguiente. 13. En el siguiente paso se agregan las funciones que se desea implementar en el informe, en este paso solo hacer clic en Siguiente. 14. En el siguiente paso se ordena la información del informe, hacer clic en siguiente 15. En el siguiente paso se agrega un grafico al informe, seleccionar la opción Grafico de barras. 22

23 16. Hacer clic en Siguiente 17. Hacer clic en Siguiente nuevamente, ya que este paso es opcional y no se va utilizar en el ejercicio. 18. En este paso se selecciona un estilo para el informe, seleccionar el mejor que considere 19. Y finalmente hacer clic en Finalizar, y se observará el diseño del reporte: Ejercicio 4. Agregando el control CrystalReportViewer 1. Ir al diseño del formulario para agregar el control CrystalReportViewer 2. En el cuadro de herramientas (Toolbox), buscar el conjunto de controles, creación de informes y arrastre el control CrystalReportViewer al formulario, asi como se muestra en la siguiente figura: 23

24 3. Por el momento el reporte no se ha llenado con datos, ejecute la aplicación para que pueda observar su informe. Para llenar el reporte con los datos del Dataset realice los siguientes pasos: 4. En el código del formulario digitar el siguiente código: 5. Después de la instrucción End Sub, digitar el código del procedimientollenarreporte: 6. Guardar los cambios y ejecutar el proyecto, si le aparece el siguiente mensaje de error: 24

25 7. Hace clic en el botón Aceptar (OK) 8. Ahora es necesario configurar el archivo app.config, para que la ejecución sea exitosa, en el explorador del proyecto, buscar el archivo app.config hacer clic derecho y seleccionar la opción Open 9. Y realizar los siguientes cambios Agregar la siguientelínea: <startupuselegacyv2runtimeactivationpolicy="true"> <supportedruntimeversion="v4.0"> </supportedruntime> </startup> Y colocar en comentario la siguiente:  10. Al final el archivo app.config, quedara de la siguiente manera: 25

26 11. Guarde los cambios y ejecute la aplicación para ver los datos, al final tendrá las siguiente información: CREACION DE SITIOS WEB 1. Crear un nuevo proyecto. 2. En primer lugar crearemos el sitio web presionando click en la opción Nuevo sitio web 26

27 3. Posteriormente seleccionaremos la opción Sitio web vacío de ASP.NET, usamos esta opción para que nos proporcione un entorno limpio para poder crear los script de la manera que tengamos pensado, asegurándonos de usar VisualBasic. Dar clic en aceptar 4. Ahora ya podemos a empezar a crear script, para lo cual en el menú seleccionamos Archivo y posteriormente nuevo archivo, y nos mostrara la pantalla siguiente. Seleccionaremos 27

28 5. Seleccionaremos Web Forms, para crear formularios web, dar clic en aceptar 6. En la opción de visualización del script seleccionar la opción código. 7. En el espacio de edición digitar el siguiente código: 28

29 8. Agregar elemento css como referencia, dar clic derecho en el nombre del web site del explorador de soluciones y seleccionar agregar elemento existente 29

30 9. Agregar el archivo estilo.css, proporcionado. 10. Compilar la página web y nos mostrara lo siguiente. 11. En la parte de código, dar doble clic en el botón Enviar y digitar el siguiente código. 12. Crear un nuevo WebForm llamado Default2.aspx. Dando click derecho en el nombre de nuestro proyecto web y seleccionar agregar nuevo elemento. Luego seleccionar WebForm: 30

31 13. En la opción de visualización del script seleccionar diseño y agregar un Label de la barra de herramientas, en las herramientas propiedades cambiar el text por un mensaje de bienvenida. V. FUENTES DE CONSULTA en-windows-form/ 31