UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · Una Base de Datos es un fichero ... el acceso a...

Lenguaje de Programación II 1 / 20

UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLÓGICOS

ESCUELA DE COMPUTACIÓN

CICLO: 01/2015

GGUUIIAA DDEE LLAABBOORRAATTOORRIIOO ##22

Nombre de la Práctica: Conectando a Fuentes de Datos – Parte I

Lugar de Ejecución: Centro de cómputo

Tiempo Estimado: 2 horas con 30 minutos

MATERIA: Lenguaje de Programación II

DOCENTES: Karens Medrano / Hugo Dimas

I. OBJETIVOS

En esta guía de práctica se pretende:

1. Que los estudiantes tengan su primer acercamiento a las aplicaciones que consumen datos desde SQL Server.

2. Configure controles comunes asociados a datos siguiendo asistentes de configuración de orígenes de datos.

3. Cree, modifique y combine controles de servidor para desarrollar aplicaciones funcionales con pocas líneas de código.

II. INTRODUCCIÓN TEÓRICA

Terminología de Bases de Datos:

Una Base de Datos es un fichero electrónico (o conjunto de ficheros) que permite almacenar información de manera estructurada.

Una Base de Datos Relacional es un modelo de base de datos que almacena la información en Tablas. Cada Tabla, almacena un conjunto específico de datos estructurados. Una tabla contiene una colección

de filas (tuplas o registros) y columnas (campos o atributos). Cada Columna de la tabla posee un nombre, y un Tipo de Dato, que define la información que podrá

almacenar. Por ejemplo: fechas, nombres, importes en moneda o números. Las Tablas poseen además, restricciones como ser la “Clave Primaria”, que asegura la unicidad de los

datos en la tabla; además de relaciones o claves foráneas con otras tablas, implementando integridad referencial.

ADO.NET

ADO.NET es un conjunto de componentes del software que pueden ser usados por los programadores para acceder a datos y a servicios de datos. Es una parte de la biblioteca de clases base que están incluidas en el Microsoft .NETFramework. Es comúnmente usado por los programadores para acceder y para modificar los datos almacenados en unSistema Gestor de Bases de Datos Relacionales, aunque también puede ser usado para acceder a datos en fuentes no relacionales. ADO.NET es a veces considerado como una evolución de la tecnología ActiveX Data Objects (ADO), pero fue cambiado tan extensivamente que puede ser concebido como un producto enteramente nuevo. ADO.NET consiste en dos partes primarias: Data provider: estas clases proporcionan el acceso a una fuente de datos, como Microsoft SQL Server y Oracle. Cada fuente de datos tiene su propio conjunto de objetos del proveedor, pero cada uno tienen un conjunto común de clases de utilidad:

Connection: Proporciona una conexión usada para comunicarse con la fuente de datos. También actúa como Abstract Factory para los objetos command.

http://es.wikipedia.org/wiki/Componente_de_software

http://es.wikipedia.org/wiki/.NET

http://es.wikipedia.org/wiki/Sistema_Gestor_de_Bases_de_Datos

http://es.wikipedia.org/wiki/ActiveX_Data_Objects

Guía #4: Conectando a Fuentes de Datos – Parte I

Lenguaje de Programación II 2

Command: Usado para realizar alguna acción en la fuente de datos, como lectura, actualización, o borrado de datos relacionales.

Parameter: Describe un simple parámetro para un command. Un ejemplo común es un parámetro para ser usado en un procedimiento almacenado.

DataAdapter: "Puente" utilizado para transferir data entre una fuente de datos y un objeto DataSet (ver abajo).

DataReader: Es una clase usada para procesar eficientemente una lista grande de resultados, un registro a la vez.

DataSets: los objetos DataSets, son un grupo de clases que describen una simple base de datos relacional en memoria, fueron la estrella del show en el lanzamiento inicial (1.0) del Microsoft .NET Framework. Las clases forman una jerarquía de contención:

Un objeto DataSet representa un esquema (o una base de datos entera o un subconjunto de una). Puede contener las tablas y las relaciones entre esas tablas.

o Un objeto DataTable representa una sola tabla en la base de datos. Tiene un nombre, filas, y columnas.

Un objeto DataView "se sienta sobre" un DataTable y ordena los datos (como una cláusula "order by" de SQL) y, si se activa un filtro, filtra los registros (como una cláusula "where" del SQL). Para facilitar estas operaciones se usa un índice en memoria. Todas las DataTables tienen un filtro por defecto, mientras que pueden ser definidos cualquier número de DataViews adicionales, reduciendo la interacción con la base de datos subyacente y mejorando así el desempeño.

Un DataColumn representa una columna de la tabla, incluyendo su nombre y tipo.

Un objeto DataRow representa una sola fila en la tabla, y permite leer y actualizar los valores en esa fila, así como la recuperación de cualquier fila que esté relacionada con ella a través de una relación de clave primaria - clave extranjera.

Un DataRowView representa una sola fila de un DataView, la diferencia entre un DataRow y el DataRowView es importante cuando se está interactuando sobre un resultset.

Un DataRelation es una relación entre las tablas, tales como una relación de clave primaria - clave ajena. Esto es útil para permitir la funcionalidad del DataRow de recuperar filas relacionadas.

Un Constraint describe una propiedad de la base de datos que se debe cumplir, como que los valores en una columna de clave primaria deben ser únicos. A medida que los datos son modificados cualquier violación que se presente causará excepciones.

Un DataSet es llenado desde una base de datos por un DataAdapter cuyas propiedades Connection y Command que han sido iniciados. Sin embargo, un DataSet puede guardar su contenido a XML (opcionalmente con un esquema XSD), o llenarse a sí mismo desde un XML, haciendo esto excepcionalmente útil para los servicios web, computación distribuida, y aplicaciones ocasionalmente conectadas desconectados. Acceso a Bases de Datos Relaciónales Escenario Conectado Un entorno conectado es uno en el cual los usuarios están constantemente conectados a la fuente de datos

Ventajas: Mayor seguridad Mejor control de concurrencia Los datos se mantienen actualizados

Desventajas:



Se requiere una conexión constante (consume recursos del servidor) Escalabilidad

Acceso a Bases de Datos Relacionales Escenario Desconectado En un entorno desconectado, una parte de los datos del repositorio central se copia y modifica en forma local, para luego sincronizarse con éste.

Ventajas Se puede trabajar en forma independiente Mayor escalabilidad y performance

Desventajas Los datos no están sincronizados Resolución manual de conflictos

System.Data

Es el espacio de nombres de ADO .NET. Tareas habituales en la programación de aplicaciones que gestionan bases de datos:

o Establecer una conexión con la Base de Datos. o Solicitar al Servidor datos específicos. o El Servidor retorna los datos solicitados. o El Usuario modifica los datos, y envía las actualizaciones al Servidor. o Se cierra la conexión.

La gestión de datos se puede realizar en línea, o en un proceso desconectado. ADO .NET ofrece un modelo unificado de desarrollo a lo largo de la Plataforma .NET, independiente al lenguaje de Programación (Visual Basic .NET, C#, etc.) e independiente a la arquitectura de la aplicación a desarrollar (aplicación de escritorio, aplicación web, aplicación de consola, etc.).

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 práctica #4: Conectando a Fuentes de Datos – Parte I 1

2 Computadora con Visual Studio 2012 instalado 1

3 Memoria USB o disco flexible 1

IV. PROCEDIMIENTO Ejercicio #1 – Creación de base de datos usando SQL Server 2012 para que funcione como fuente de datos.

1. Proceda a iniciar la herramienta de Microsoft SQL Server Management Studio instalada en su computadora, una vez cargada, proceda a crear una nueva base de datos llamada “Bolsa_Trabajo”. En esta base de datos crearemos las tablas necesarias que se utilizaran como fuentes de datos para nuestra aplicación en ASP.NET. El modelo relacional a crear se presenta a continuación:



El detalle del diseño de las tablas se muestra en las imágenes siguientes. Si tiene problemas en la creación de las llaves primarias o foráneas, consulte a su docente. Además tome en cuenta que TODAS las llaves primarias de las tablas poseen el atributo de identidad el cual es utilizado para generar el valor de forma auto numérico. Para ello, estando en la vista de diseño, seleccione la columna de la llave primaria de cada tabla y en el cuadro de “Propiedades de columna” proceda a establecer la propiedad “Especificación de identidad” en “Si” y configúrelo como se muestra en la última figura.



2. Una vez creada la estructura de la base de datos, procederemos a digitar algunos registros que nos servirán para mostrar datos desde la aplicación web en ASP.NET. Para ello proceda a digitar los siguientes registros.

3. Finalmente, realice los SELECT necesarios para visualizar si la información ha sido ingresada de forma correcta. Realizado esto, estamos listos a proceder a desarrollar nuestra aplicación.

Ejercicio #2 – Creación de conexión desde Visual Studio con el origen de datos a través del asistente.

1. Proceda a iniciar Microsoft Visual Studio desde su computadora. Una vez cargado el IDE en pantalla procederemos a crear la conexión de tal manera que esta se encuentre activa desde nuestra ventana. De esta manera se podrá administrar los objetos de bases de datos desde el IDE. Para ello, proceda a iniciar el explorar de servidores, desde el menú “Ver”, “Explorador de Servidores”. Podrá observar que se carga una nueva ventana listando los diferentes servidores asociados a la aplicación. El que nos interesa por el momento es el que indica “Conexiones de datos”. Desde este punto procederemos a agregar una nueva conexión, para ello proceda a dar clic derecho sobre el icono asociado a servidores de base datos, automáticamente verá un menú emergente del cual deberá seleccionar la opción de “Agregar conexión”.

2. Se nos mostrará una ventana donde se nos solicita especificar los parámetros de conexión a nuestro servidor. Estos parámetros son los que se explican en la introducción teórica de esta guía de laboratorio. Procederemos a llenar el formulario presentado de la siguiente forma: del campo de servidor, seleccione el servidor asociado a su instancia de SQL Server instalada en su computadora. Para la conexión al servidor se debe usar conexión con autenticación de Windows. Posteriormente seleccione la base de datos que creo usted en el inicio de esta guía. La configuración anterior debe quedar como muestra la siguiente imagen. Finalmente de clic en el botón de probar conexión el cual nos indicara si se ha podido establecer la conexión y si esta ha sido satisfactoria y luego de clic en Aceptar.



3. Una vez realizado lo anterior, se nos mostrara el conjunto de tablas y demás objetos de la base de datos que creamos con anterioridad pero ahora dentro del entorno de Visual Studio. Como puede observar, desde acá se pueden realizar diversas operaciones sobre la base de datos que también nos modificaran la base de datos original ya que se crea un enlace directo con la misma. Deberá observar una ventana como la siguiente.

4. Ahora estamos listos para crear las páginas del sitio. Para ello, creo un nuevo sitio web desde el menú “Archivo”. Seleccione el nodo de Visual C# a la izquierda de la pantalla y luego “Sitio web vacío de ASP.NET”. Colóquele el nombre de “BolsaTrabajoV2”. Seleccione como ubicación web la opción “Sistema de archivos”. Una vez realizado lo siguiente de clic en “Aceptar”.

5. Una vez creado nuestro sitio web, procederemos a configurar las condiciones de trabajo del mismo mediante la creación de carpetas y archivos. Para ello cree 4 carpetas en la raíz del sitio según el detalle de la siguiente tabla. El contenido de cada carpeta se encuentra como recurso de la guía

número 3, por lo que debe de proceder a adicionar el contenido de cada una de las carpetas como ya lo ha realizado anteriormente.

Carpeta

css

fonts

images

js

6. Adicione un nuevo Formulario de Web Forms y asígnele el nombre de “ListadoCandidatos.aspx”.

Proceda a colocar el siguiente marcado en el archivo justo después de la etiqueta asociada a la directiva “Page”.

<!DOCTYPE HTML> <html> <head> <title>Bolsa de Trabajo en Línea - Universidad Don Bosco</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script src="js/jquery.min.js"></script> <script src="js/jquery.scrolly.min.js"></script> <script src="js/jquery.dropotron.min.js"></script> <script src="js/jquery.scrollex.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-xlarge.css" /> </noscript>   </head> <body>  <header id="header" class="skel-layers-fixed"> <h1 id="logo"><a href="/">Página Principal</a></h1> <nav id="nav"> <ul> <li><a href="ListadoCandidatosBolsaTrabajo.aspx" class="button special">Listado</a></li> <li><a href=" NuevoCandidatoBolsaTrabajo.aspx" class="button special">Edición</a></li> <li><a href=" Filtros.aspx" class="button special">Filtro</a></li> </ul> </nav> </header>  <div id="main" class="wrapper style1"> <div class="container"> <header class="major"> <h2>Bolsa de Trabajo en Línea</h2>

<p>Universidad Don Bosco</p> </header>  <section> <p> Forma Parte de nuestro Programa de Bolsa de Trabajo, el cual tiene como objetivo promover la inserción laboral de sus Estudiantes, Egresados y Graduados en áreas afines a su formación académica a través de Empresas e instituciones potencialmente empleadoras. <br /> La idea del Programa de Bolsa de Trabajo surge en respuesta a su interés de generar un impacto de inserción laboral de sus profesionales en la realidad nacional; a lo que se suma el hecho de estar ubicada en una zona eminentemente industrial. </p> </section>  <section> <h3>Listado de Candidatos Registrados</h3> <form id="form1" runat="server"> <div class="row uniform 50%"> </div> </form> </section> </div> </div>  <footer id="footer"> <ul class="icons"> <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li> </ul> <ul class="copyright"> <li>© 2015. All rights reserved.</li> </ul> </footer> </body> </html>



7. Dentro del marcado anterior, ubique el div que tiene como clase “row uniform 50%” ya que es al

interior de este div que colocaremos el contenido de la página. Una vez realizado lo anterior, procederemos a ubicar en la parte derecha de la ventana la sección del “Explorador de servidores”. Una vez localizado, debe desplegar todos los nodos hasta llegar al nivel de las tablas (guíese por la imagen). Ubicamos la tabla “candidatos” y procedemos a arrastrar la tabla seleccionando y arrastrando con el mouse en el area interna del div que encontramos anteriormente.

8. Dentro de la página en la vista de “Diseño” podrá observar que de forma automática se han añadido dos controles, una especie de tabla llamado GridView y otro control oculto (es decir que no se ve en las páginas HTML) denominado SQLDataSource. Lo que hemos realizado anteriormente es crear de forma automática una tabla que liste todos los registros asociados a candidatos contenidos en la tabla de candidatos. Como usted observa, no se ha escrito ninguna línea de código o realizado alguna configuración, ya que ASP ha realizado todo de forma transparente para usted. Proceda a ejecutar la página en un navegador. Deberá observar lo siguiente.



9. Como usted puede observar, es posible visualizar el contenido de la tabla candidatos, pero algunos datos carecen de significado para la lectura del usuario, por lo que es necesario realizar algunas modificaciones. Para ello, pare de ejecutar la aplicación y proceda a modificar el control de SqlDataSource1 dando clic en la flecha emergente asociada en la esquina superior derecha del control. Se le mostrará un cuadro de menú del cual deberá seleccionar la opción de “Configurar origen de datos”. Con ello, se nos cargará el asistente para configuración del origen de datos.

10. Inicialmente el asistente nos mostrara la conexión de datos utilizada, que en este caso corresponde con la creada al inicio del ejercicio 2. En este punto damos clic en siguiente.



11. En esta parte se nos pedirá que configuremos la instrucción SELECT, para ello, existen dos formas, una de ellas es proporcionando la instrucción SQL de selección de datos y la segunda opcion es seleccionando los campos de la tabla asociada. Para nuestro caso, seleccionamos la opcion de “Especificar una instrucción SQL”.

12. En la siguiente ventana se nos pedirá que proporcionemos la instrucción de selección asociada. Por el momento, haremos que el mismo Visual Studio genere la consulta, para ello de clic en el botón “Generador de consultas…”. Se nos abrirá una ventana de diseñador y prueba la cual usaremos para generar la consulta. Por el momento, solo nos muestra una tabla asociada. Si es su caso, proceda a dar clic derecho sobre un espacio vacío del área superior de la ventana y del menú contextual seleccione la opción de “Agregar tabla”. Agregue las dos tablas faltantes y si todo ha ido bien, podrá observar todas las tablas creadas en el ejercicio 1 y la respectiva relación de llaves entre ellas.



13. Ahora, procederemos a seleccionar los campos que necesitamos mostrar en nuestra tabla. Para ello, seleccione de cada tabla los campos que se desean mostrar seleccionando el checkbox asociado a cada campo. Debe seleccionar los checkbox mostrados en la siguiente imagen. Podrá observar que automáticamente, el generador de consultas crea los enlaces necesarios entre las tablas para seleccionar los datos sin necesidad de que usted escriba ninguna instrucción. Una vez seleccionados todos los campos, de clic el botón “Ejecutar consulta” ubicado en la esquina inferior izquierda. Deberá llenarse una muestra de los datos que arroja la consulta generada por ASP. Finalmente damos clic en Aceptar.



14. Vamos a realizar una pequeña modificación en la consulta generada, ya que es necesario formatear la salida de uno de los tipos de datos. Para ello ubique la columna “candidatos.nIdGenero” y cámbielo por la siguiente instrucción.

Genero = CASE candidatos.nIdGenero WHEN 1 THEN 'Masculino' ELSE 'Femenino' END

Al final, su consulta debe ser como sigue:

SELECT candidatos.nIdCandidato, candidatos.sNombreCandidato,

candidatos.sApellidosCandidato, candidatos.sEmailPrimario, Genero = CASE

candidatos.nIdGenero WHEN 1 THEN 'Masculino' ELSE 'Femenino' END,

candidatos.dFechaNacimiento, candidatos.sTelefonoContacto,

municipios.sNombreMunicipio, paises.sNombrePais FROM candidatos INNER JOIN

municipios ON candidatos.nIdMunicipio = municipios.nIdMunicipio INNER JOIN paises

ON municipios.nIdPais = paises.nIdPais

Debe tener especial cuidado al digitar la consulta ya que podría borrar una coma dentro de la instrucción o generar otro tipo de errores. Una vez realizado lo anterior, de clic en “Siguiente”

15. Finalmente, damos clic en consulta de prueba para verificar si nuestra consulta no presenta errores. Si

es correcto, de clic en finalizar. Ahora, probablemente el IDE nos indique que es necesario actualizar campos y claves para el GridView creado anteriormente. Esto es así ya que el GridView1 esta



asociado a la fuente de datos que acabamos de modificar, por lo que hay que actualizar nuevamente las propiedades del GridView. Por tanto, damos clic en “Si” al cuadro de diálogo presentado.

16. Ahora, procederemos a configurar el aspecto del GridView1, para ello seleccione la opción de “Editar Columnas” del menú de opciones asociado al control. Se nos mostrará una ventana donde podremos observar los campos que nuestra consulta nos devuelve y la forma en que estos se presentan.

17. Procederemos a editar la propiedad “HeaderText” de cada campo, por lo que debe de modificar dicha propiedad de cada campo según se muestra en la figura. Adicionalmente modificaremos la propiedad “DataFormatString” del campo “dFechaNacimiento” digitando el valor de “{0:d}” (sin las comillas dobles) para que se muestre la fecha en formato dd/mm/yyyy mas no el formato largo. Guíese por la siguiente imagen.



18. Finalmente, habilite las propiedades de paginación, ordenación y de eliminación para el GridView1 tal y como se muestra en la siguiente figura. Una vez realizado lo anterior, proceda a ejecutar la página nuevamente. Observe los resultados.

19. Repita nuevamente el paso número 6 de esta guía con la diferencia de que el nombre del archivo será “NuevoCandidatoBolsaTrabajo.aspx”. Adicione el marcado y ubique nuevamente el div con la clase “row uniform 50%”. Una vez realizado esto, agregue un control “FormView” del cuadro de controles y además adicione un control “sqlDataSource”.



20. Proceda a configurar el control sqlDataSource1 dando clic en “Configurar origen de datos”. En el asistente mostrado, seleccione la conexión existente creada con anterioridad y luego de clic en Siguiente. En la siguiente ventana habilite la opción “Especificar columnas de una tabla o vista”. Seleccione la tabla “candidatos” y seleccione uno a uno los campos de la tabla que serán mostrados. Luego, de clic sobre el botón “Avanzadas…” y en el cuadro emergente, seleccione la opción “Generar instrucciones Insert, Update y Delete”. De clic en “Aceptar”, luego en “Siguiente” y luego en “Finalizar”. Guíese por las figuras.



21. Proceda ahora a configurar el FormView1 indicando que el origen de datos es el sqlDataSource1 y habilite la opción de paginación. Proceda a ejecutar la página y observe los resultados. Adicione un nuevo registro. Se le recomienda que edite las leyendas asociadas a los campos (de nIdCandidato a ID, de sNombreCandidato a Nombre, etc) para las diferentes plantillas. Guíese por la figura.



22. Repita nuevamente el paso número 6 y 7 de esta guía con la diferencia de que el nombre del archivo será “Filtros.aspx”. Adicione el marcado y ubique nuevamente el div con la clase “row uniform 50%”. Ahora, agregue un control DropDownList y un control SqlDataSource tal y como se muestra en la siguiente figura.



23. Configure el control sqlDataSource2 tal y como lo realizo anteriormente, ahora en la ventana de configuración de la instrucción select, seleccione la tabla de municipios y seleccione los campos mostrados en la figura. De clic en siguiente y luego en finalizar.

24. Al control DropDown1 se debe especificarle el origen de datos. Para ello, de clic sobre la opción “Elegir origen de datos”. En la ventana emergente debe especificar un campo de texto y un campo de valor tal y como lo muestra la siguiente imagen. Finalmente habilite la propiedad “AutoPostBack” del control.

25. Proceda ahora a configurar el SqlDataSource2. En la ventana de configuración de la instrucción

SELECT, seleccione todos los campos. Luego, de clic en el botón “WHERE” para establecer un filtro a la consulta.



26. En la ventana mostrada, seleccione la columna “nIdMunicipio”, como operador seleccione “=” y como origen seleccione “control”. Luego seleccione “DropDownList1” y como valor por defecto ingrese “4” (sin comillas). Finalmente, damos clic al botón “Agregar” para establecer el respectivo filtro. Luego seguimos con el asistente hasta finalizarlo. Con esto hacemos posible que nuestro GridView1 filtre los datos dependiendo del valor del DropDownList establecido, creando así un filtro para nuestra tabla de forma dinámica. Guíese por las imágenes.

27. Se nos pedirá que actualicemos las propiedades del GridView1, por lo que damos clic en “Si” al mensaje en pantalla. Procedemos a ejecutar la aplicación y observamos su funcionamiento.

V. BIBLIOGRAFÍA

1. Thierry GROUSSARD. (2013). C# 5: Los fundamentos del lenguaje – Desarrollar con Visual Studio 2012 . Barcelona: ENI.

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · Una Base de Datos es un fichero ... el acceso a...

Documents

Transcript of UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · Una Base de Datos es un fichero ... el acceso a...