Desde la salida de Visual Studio 2005 y junto con el la salida de las versiones express, se han podido dar cuenta de como estas versiones gratuitas pueden ser explotadas de una forma bastante interesante. En versiones anteriores el acceso a fuentes de datos en algunos casos resultaba confuso y en algunos casos complicado, en la nueva version de visual studio mas exactamente con Visual Web Developer Express edition veremos las ventajas, el manejo y en general el beneficio que trae con sigo esta herramienta y mas especificamente en el tema de acceso a datos. Veremos como sin necesidad de escribir ni una sola linea de codigo se puede llegar a construir una aplicacion sencilla graficamente pero fuerte funcionalmente.
Creacion de la Base de Datos
1. Para la creacion de la base de datos utilizaremos Access 2003. Abrimos Access y en el menu archivo seleccionamos nuevo y en el panel de la derecha seleccionamos "Base de datos en Blanco".
2. Le asignamos un nombre, para el ejemplo sera Usuarios, una ubicacion especifica y selecionamos "Crear", al crearlo se presenta la siguiente ventana de dialogo.
3. La unidad escencial de almacenamiento de informacion en una base de datos es la tabla asi que para almacenar nuestros datos vamos a crear una tabla y definir los campos que vamos a almacenrar. Hacemos doblo clic en "Crear Tabla" en vista de diseño.
4. Una tabla esta formada por campos (columnas) y por registros (filas), para nuestra tabla en el ejemplo crearemos los campos cedula, nombre, telefono y carrera, al compo cedula le asignamos el tipo numero y a los demas tipo texto. Una de las principales caracteristicas de una table es la existencia de un identificador unico cuya funcion es "diferenciar" cada uno de los registros de la tabla, conocido como Llave primaria (Primay Key), para el ejemplo nuestra llave primaria sera la cedula. Para asignarla como llave primaria seleccionamos toda la fila cedula y seleccionamos de la barra de herramientas el icono "Clave Principal".
5. Una vez que hemos definido los campos y la llave primaris guardamos la tabal con el nombre de "Usuario".
Ahora vamos a ingresar un dato para posteriormente luego manipularlo y visualizarlo, por ejemplo los datos personales del usuario. Para ello hacemos doble clic sobre la tabla que acabamos de crear e ingresamos los datos.
Con este utimo paso hemos terminado de crear y poblar nuestra base de datos , esta ha quedado lista para su consumo desde Web Developer.
Control para la Insercion de Registros (Details View)
En este punto una vez creada la base de datos vamos a iniciar la creacion de la aplicaion web, primero vamos a crear el modulo de insercion de registros utilizando uno de los controles que nos ofrece la herramienta conocido como "DetailsWiew".
Abrimos Visual Web Developer 2005 Express Edition, seguidamente hacemos clic en "Nuevo sitio web".
Para crear un sitio web hacemos clic en "Crear Sitio Web…" o bien podemos ia a Archivo/Nuevo Sitio Web.
A continuacion se nos presenta la siguiente ventat en donde seleccionamos "Sitio Web ASP.NET" en ubicacion seleccionamos "Sistema de Archivos" y el que mas nos parezca comodo (aunque como comente al inicio no vamos a tener que escribir codigo) por ultimo al sitio lo llamaremos Sistema de Informacion.
En la ventana de "Nuevo Sitio Web" en ubicacion seleccionamos "Sistema de Archivos" (para indicar que nuestro sitio web va a quedar ubicado en un conjunto de archivos en una carpeta como una aplicacion normal), seleccionamos la ubicacion que deseemos y le damos el nombre de "SistemadeInformacion", el lenguaje seleccionaremos el que mas nos agrade.
2. Una vez creado el sitio se nos presenta la siquiente ventana en donde podemos visualizar la estructuda de la pagina en html, nos pasaremos a la vista de diseño para manipular mas grafica y facilmente la misma, una vez en la vista de diseño traemos del cuadro de herramientas una tabla Html y la arrastraremos hasta la pagina.
Al crear el proyecto se presenta una pagina llamada Default.aspx esta se muestra en vista "Source" o fuente donde podemos ver el codigo Html que compone la pagina. Vamos a cambiarnos a vista de diseño para observer como manejar los controles.
Ya estando en vista de diseño, en al cuadro de herramientas seleccionamos la pestaña HTML y arrastramos un control "Tabla" a la pagina.
A continuacion vamos a manipular la tabla.
En esta tabla vamos a agregar los controles que vamos a utilizar, para visualizar mejor ello vamos a combinar las celdas seleccionando toda la fila, clic derecho y seleccionar "Combinar Celdas". Como podemos ver el manejo de esta tabla es muy simlar al de una tabla de Excel podemos agregar mas filas, columnas, mezclarlas etc.
3. Una vez acomodada nuestr tabla, en ella vamos a ubicar los controles que vamos a utilizar, pero primero debemos agregar la base de datos al proyecto, luego arrastramos del cuadro de herramientas el control "DetailsView" de la ficha Data y posteriormente configuramos la conexion a la base de datos.
Para poder manipular la base de datos que creamos anteriormente, primero debemos agregarla al proyecto ya que es desde aqui que nuestra aplicacion va a acceder a ella. Para ello en el cuadro de explorador de soluciones hacemos clic derecha sbre la carpeta "App_Data" (En esta carpeta se almacenana todas las fuentes de datos que intervienen el el proyecto) y seleccionamos "Agregar elemento Existente", buscamos la base de datos y la abrimos.
Con la base de datos incluida en el proyecto ahora vamos a utilizar el control "DetailsView" para ingresar los datos a la base de datos.
Una vez incluida la base de datos, en el cuadro de herramientas en la ficha "Data" arrastramos el control "DetailsView" y lo colocamos en la tabla.
Ahora que tenemos la base de datos incluida en el proyecto vamos a configurar la conexion a esta para poder manipular la info existente.
Primero creamos un nuevo objeto de fuente de datos, este objeto es el que se va a conectar y contendra las caracteristicas de la misma (proveedor, path, tipo, etc), estas propiedades las podemos visualizar en el panel de propiedades.
Al hacer clic en "Nueva fuente de datos" se nos presenta la siguiente ventana, en ella seleccionamos el tipo de fuente a la que nos vamoa a conectar, para este caso "Base de datos de access", damos nombre a la funente o OK.
A continuacion nos preguntanla ubicacion de la base de datos la cual ubicamos en la carpeta "App_Data" (por defecto la ubico ahi) la seleccionamos damos OK y Next
Ya hemos creado la conexion a nuestra base de datos ahora vamos a configurar el como vamos a trabajar con ella, es decir la vamos a indicar como vamos a hacer las inserciones, busquedas, actualizaciones y borrados.
A continuacion se nos presenta la ventana Configuración de fuente de datos, el ayudante nos da la posibilidad de crear automáticamente las sentencias para hacer las tareas antes mencionadas. Para ello En el panel Columnas Seleccionamos el primer valor “*” indicando que todos los campos de la tabla son los que van a ser modificados. Posteriormente hacemos clic en el botón avanzado que se encuentra a mano derecha, y así surge la ventana “Opciones avanzadas de generación de SQL”. Se nos muestra la posibilidad de generar sentencias INSERT, UPDATE Y DELETE sobre la tabla que seleccionamos, checkeamos ambas opciones como se muestra en la figura. Damos OK y Next.
Ahora se nos da la posibilidad de mirar si la conexión quedo bien hecha hacemos clic en “Test Query” y podemos ver que salen los valores que ya habíamos ingresado en la tabla. Clickeamos en “Finish”.
Una vez creada y configurada la conexion podemos ver las propiedades de esta en el panel de propiedades, a continuacion vamos a configurar el control (Details View) que ya teniamos para que trabaje con la fuente de datos que acabamos de crear.
Una vez terminada de crear y configurar la conexión podemos ver que se creo un pequeño cuadro de nombre “AccessDataSource – …” esta es nuestra conexiona la fuente de datos podemos trabajar con ella de aquí en adelante cuando la necesitemos.
Adicionalmente podemos ver sus propiedades en el panel de propiedades.
Por otro lado podemos cambiar el estilo del control haciendo clic en “Autoformato”, que nos permite seleccionar algunos de los estilos predefinidos para nuestra tabla.
Ahora vamos a terminar de configurar el control, cuando terminamos de crear la fuente de datos podemos observar como el control toma os nombres de los campos que habíamos definido en nuestra base de datos (cedula, nombre…), adicionalmente, se nos habilitaron las opciones de “Activar Paginación”, “Activar Inserción” entre otros. Para nuestro ejercicio activamos “Activar Inserción”.
Como nuestro control va a ser utilizado para ingresar usuarios, seleccionamos el control y nos vamos al panel de propiedades buscamos la propiedad “Default Mode” y seleccionamos “Insert”, para que cuando arranque nuestra aplicación esta arranque por defecto con los campos listos para insertar valores.
El control lo vamos a utilizar únicamente para inserciones entonces en el menú desplegable del control seleccionamos la opción “Editar campos” en ella en el panel de “Campos Seleccionados”.
Listo, configurardo tando la fuente de datos como la conexion vamos probar la misma para verificar su funcionamiento.
Para ejecutar la aplicación hacemos clic en “start Debugging” u oprimimos F5. Al hacerlo e nos presenta un cuadro de dialogo con titulo “Depuración no establecida” aquí se nos advierte que el proyecto no esta habilitado para ser depurado, hacemos clic en OK y la aplicación se ejecuta.
Si hacemos clic en este icono se nos muestra la ventana de Servidor de desarrollo de ASP.NET el cual nos indica la dirección física del proyecto, el puerto que utiliza y la dirección del servidor local por el cual podemos acceder a la aplicación a través de un navegador web.
Como podemos ver cuando se corre la aplicación la dirección URL del explorador coincide con la que se nos mostro en el cuadro anterior.
Ahora podemos probar la aplicación para ver si se esta haciendo correcta la inserción en la base de datos.
Control de visualizacion, edicion y eliminacion de datos (GridView)
A continuacion vamos a configurar el control GridView ya que con este vamos a poder visualzar los datos que se encuentran almacenados ademas de editarlos y eliminarlos.
Primero arrastramos un control GridView del cuadro de controles en la ficha Data. Al igual que el control anterior (DetailsView) debemos configurar la fuente de datos a la cual este se va a conectar.
Como la fuente de datos ya la habíamos creado simplemente seleccionamos la misma que teníamos.
Al igual que el anterior control podemos asignarle algún de los estilos que ya vienen junto con el control, para esto hacemos clic en “Autoformato”.
Una vez asignada la fuente de datos se habilitan las opciones de permitir acciones adicionales. Para nuestro ejemplo seleccionamos “Permitir Paginación”, “Permitir Edición” y “Permitir Borrado.”
Una vez configurado el control vamos a probarlo.
Como podemos ver en la tabla de abajo (GridView) podemos visualizar los datos que ya teníamos en nuestra base de datos.
Cuando seleccionamos Editar en alguna de las filas de la tabla esta se transforma de tal forma que nos permite editar los valores que se encuentra almacenados.
Ahora cada vez que ingresemos un dato por medio del control (DetailsView) podemos ver como la tabla (GridView) se va actualzando automaticamente.
Conclusiones
Pudimos ver como sin tener que escribir una sola linea de codigo creamos y configuramos la conexiona a una base de datos, creamos los controles y manipulamos sus propiedades para conseguir el objetivo, Visual Studio 2005 trae duficientes recursos para temas como este en donde el objetivo principal es facilitar el trabajo del desarrollador y agilizar los procesos.
Gerardo Ramos – Microsoft Student Partner
