Aureliux Página 1

Requerimientos

Para poder realizar nuestro sistema de base de datos utilizaremos:

DBDesigner

MySQL para Windows

MySQL Administrator

MySQL Connector Son programas que se pueden descargar gratis desde internet y fáciles de instalar y configurar, y por supuesto

Visual studio 2008.

Para el ejemplo que vamos a desarrollar vamos a partir de la idea de que el lector ya tiene conocimientos

básicos de .NET, de manejo y análisis de bases de datos utilizando “DBDesigner” y SQL, por lo mismo no voy a

abundar en detalles de algunas acciones realizadas en este manual.

Modelo conceptual de datos

Primeramente veamos de qué se trata nuestro sistema:

Se trata de llevar el control de las ventas de de productos de una refaccionaria X de piezas para autos,

debe mostrar un punto de venta e imprimir facturas, esta refaccionaria pertenece exclusivamente a un

taller mecánico por lo tanto se necesita llevar control de los vehículos que tiene cada cliente

(probablemente esto ultimo es absurdo e inútil, pero nos va a servir como práctica de relación maestro-

detalles de las tablas).

Así de sencillo, entonces utilizando DBDesigner el primer paso es

realizar el modelo conceptual de datos, se supone que en este

momento ya se ha realizado un análisis mediante algún modelo

entidad-relación.

Nuestro modelo debe quedar de esta manera:

Tenemos 5 tablas relacionadas y una tabla auxiliar para controlar los números de las facturas, si te preguntas de

donde salió la tabla “detallesVenta” recuerda que al hacer una relación de muchos a muchos se genera

automáticamente una nueva tabla, a la que en este caso editamos agregándole 3 campos mas.

Aureliux Página 2

Hasta ahora tenemos el “dibujo” de nuestra base de datos, pero a nosotros lo que realmente nos interesa es

crear la base de datos y no solo dibujarla, para eso desde DBDesigner crearemos un script el cual manejaremos

desde MySQL, para ello debemos seleccionar la opción File ->

Export -> SQL Create Script…

Nos debe aparecer un cuadro como el que se muestra en la

figura del cual podemos copiar el código del script directamente

al portapapeles o guardarlo en un archivo de texto, es mejor la

segunda opción ya que así podemos editarlo si algo anda mal en

el diseño de las tablas.

Damos clic en el botón “Save Script to file” y seleccionamos

donde queremos guardarlo, en este ejemplo yo lo he llamado

“refaccionaria” y lo guardé en una carpeta llamada “tutorialDB”.

Esto genera un archivo de texto con la extensión .sql en la

dirección seleccionada.

El archivo creado (refaccionaria.sql) contiene el código

SQL de lo que hemos diseñado, de las tablas y de las

relaciones e índices, ese archivo es solo texto y por si

solo no sirve para nada (por ahora).

Podemos ver el contenido del archivo, busca en la

dirección donde lo guardaste y ábrelo, seguramente se

abrirá con el bloc de notas.

Si sabes algo de SQL seguramente el código te a ser

familiar, sino no te debe afectar ya que MySQL para

Windows es bastante amigable y te permite trabajar

liberándote de la parte de la codificación, aunque es

recomendable que sepas un poco del

lenguaje para que sepas como actuar en caso

de que algo salga mal y lo debas corregir

manualmente.

Hasta este punto hemos terminado con

nuestro modelo conceptual de datos, es decir

nuestra base de datos apenas es un diseño,

una idea plasmada en una imagen,

independientemente que hemos creado un

script no hemos comenzado aún a crear

nuestra base de datos.

Aureliux Página 3

Crear la base de datos utilizando MySQL para Windows.

Al instalar MySQL para Windows se debe instalar también

una herramienta llamada “MySQL Query Browser”, esta

herramienta debe estar en el menú inicio de Windows,

búscale y por ahí debe estar el acceso directo.

Dependiendo de cómo hayas hecho la instalación, te va a

pedir unos datos para poder ingresar, por lo general el

servidor es “localhost” a no ser que al momento de

instalarlo lo hubieras configurado de manera diferente, el

nombre de usuario por defecto es “root” que también pudo

haber cambiado en la instalación y la contraseña depende

totalmente de la que hayas registrado al momento de

instalarlo, en mi caso es “sysdba”, la ultima opción la que

dice “Defaul Schema” representa el nombre de la base de datos con la que vamos a trabajar, por defecto se

utiliza una llamada “test”, pero es mas rápido colocar ahí el nombre de nuestra base de datos, en nuestro

ejemplo la llamaremos “RefaccionariaX”. Si es la primera vez que estas entrando con este nombre de base de

datos, te va a avisar que el nombre que escribiste no existe y te da la opción de crearlo, obviamente decimos

que “Yes” (Este proceso es el mismo si

quieres volver a entrar posteriormente).

Si todos los datos están correctos pulsa el

botón OK y sin problema debes ingresar a la

siguiente ventana.

En la solapa donde dice

“Schemata” se encuentra

un listado con todos los

esquemas de base de datos

creadas, en mi caso son

varios, si es el primero que

creas seguramente solo vas

a tener este que creaste y

uno llamado test, aunque

esto es irrelevante.

En ese listado se encuentra

“refaccionariax” debemos

dar doble clic sobre el para

sea la base de datos activa y

asi poder trabajar con ella

(Podemos identificar cual es

la base de datos activa

porque su nombre de encuentra en negritas diferenciándose de todos los demás de la lista), otra forma mas

laboriosa de hacer esto es dar clic derecho sobre el nombre y seleccionar la opción “Make default schema”.

Aureliux Página 4

Como podremos observar tenemos un esquema de base de datos vacío, sin tablas,

sin nada, debemos hacer que todo lo que dibujamos en “DBDesigner” se convierta

en algo mas que un simple dibujo de un diagrama, para ellos vamos a utilizar el

script que generamos anteriormente (refaccionaria.sql), el cual habíamos dicho

que por si solo no sirve para nada, pero ahora utilizando “MySQL Query Browser”

es un complemento que nos liberará de diseñar las tablas manualmente.

Para ellos vamos al menú File -> Open Script y abrimos el archivo “refaccionaria.sql”, podemos ver que en la

ventana de resultados de en medio aparece el código SQL del script, en la parte superior de la ventana hay un

botón que dice “Execute”, pulsamos sobre el.

Y si no hay ningún error veremos que las tablas diseñadas en “DBDesigner”

aparecen en el esquema de “refacionariax”, si hubiera habido algún error

aparecerá en la parte inferior de la pantalla, en este caso lo mejor es

regresar y revisar que salió mal, pueden ser diversos motivos por los que

podría marcarse error.

Hasta ahora ya hemos creado el esquema de la base de datos en MySQL con

tablas, relaciones e índices… en este momento ya podemos ingresar a

“Visual studio 2008” y comenzar a diseñar.

Aureliux Página 5

Capa de datos (Configurando el acceso a datos a MySQL)

A partir de este momento ya podemos comenzar a diseñar nuestro sistema desde visual studio 2008, el lenguaje

que utilizaremos es Visual basic.net por ser mas sencillo y desde mi punto de vista (respeto todos los puntos de

vista) el mas enfocado para trabajar con bases de datos entre todos los lenguajes de visual studio, o por lo

menos el mas ameno para hacerlo.

Creamos un nuevo proyecto utilizando “Visual basic” y como plantilla seleccionamos “Aplicación de Windows

Forms”, guárdalo donde tu quieras (Supongo que esto ya lo deben dominar a la perfección).

La primera gran tarea es configurar nuestro acceso a datos con MySQL, es decir, lograr que “visual basic” logre

establecer comunicación con MySQL, por si solo no puede hacerlo ya que por defecto su administrador de bases

de datos es “SQL Server” y viene configurado para trabajar con el, sin embargo en un principio dije que

deberíamos instalar “MySQL Connector” ya que este paquete nos permite establecer conexión entre “Visual

studio” y “MySQL” si no lo tenemos instalado será imposible configurar nuestro acceso a datos.

Agregar referencia a MySQL: Aunque este paso se supone que se

hace automáticamente es mejor prevenir ya hacerlo manualmente,

consiste en agregar una referencia hacia los dll de “MySQL

Connector”, para ello en el explorador de soluciones damos clic

derecho sobre el nombre del proyecto y elegimos la opción

“Agregar referencia”.

Del cuadro de dialogo que aparece buscamos en la lista el elemento

MySQL.Data lo seleccionamos y damos clic en aceptar.

Agregar origen de datos: En la ventana de orígenes de datos damos clic en donde dice “Agregar nuevo

origen de datos” (Si la ventana orígenes de datos no aparece debes mostrarla seleccionando el menú

Datos -> Mostrar orígenes de datos).

Al hacer esto inicia un asistente que permite configurar el origen de datos, la primera pantalla nos pide

elegir el tipo de origen de datos, marcamos la que dice “Base de datos” y damos clic en el botón

Aureliux Página 6

siguiente, la siguiente ventana es muy importante ya que nos pide elegir la conexión de datos, si es la

primera vez que entras seguramente te aparecerá un cuadro como este (o por lo menos algo parecido).

Para configurar la conexión es necesario

dar clic en el botón “Nueva conexión”.

Esto abre un nuevo cuadro de dialogo

donde se debe especificar el proveedor

de datos y la base de datos con los que

vamos a trabajar, entre los cuales

podemos encontrar Microsoft Access, o

SQL Server, y entre ellos también

encontramos a MySQL.

Para ello donde dice “Origen de datos”

encontramos una lista de todos los

proveedores disponibles en ese momento

en tu sistema, entre ellos está el de

MySQL, para seleccionarlo debes dar clic

en el botón “Cambiar”.

Es necesario rellenar los campos que pide, como ya habíamos dicho anteriormente, el nombre del

servidor en este ejemplo es localhost, el usuario es root y la contraseña es sysdba.

El campo correspondiente a la base de datos debe rellenarse

con el mismo nombre del esquema creado en “MySQL Query

Browser” en este caso es “refaccionariax”. La ventana debe

quedar mas o menos como se muestra en la figura de la

derecha:

Para saber si vamos por buen camino podemos probar la

conexión dando clic en el botón que dice “Probar conexión”,

si no hay ningún error saldrá un mensaje que dice: La

conexión de prueba se realizó correctamente.

Si todo va bien aceptamos dando clic en el botón “Aceptar”.

Acto seguido se nos muestra la misma ventana que estaba originalmente pero ahora ya tiene

establecido los parámetros correspondientes a la conexión con el servidor de datos y el archivo de base

de datos, nos pregunta si queremos incluir los datos de estos parámetros en la cadena conexión o si

queremos excluirlos, lo correcto es marcar la opción que dice “Si incluir los datos confidenciales…”, otro

dato importante a considerar es que enla cadena conexión aparecen los datos de lo que estamos

hablando.

Aureliux Página 7

Teniendo claro lo anterior damos clic en el botón “Siguiente”.

En la siguiente ventana debemos guardar la cadena conexión con algún nombre, por defecto se le asigna

uno el cual podemos cambiar, en este caso le pondremos refaccionariaxCnn.

Damos clic en el botón siguiente.

Finalmente podemos crear el dataset correspondiente, podemos crear un dataset para todas las tablas

o dividir dependiendo de la lógica diferentes dataset’s.

En este ejemplo y para mayor simplicidad utilizaremos uno solo, al cual le pondremos como nombre

“refaccionariaxDs” y marcamos todas las tablas, con esto tenemos que en un solo dataset estarán

incluidas todas las tablas, y damos clic en el botón “Finalizar”.

Aureliux Página 8

Con todo esto ya tenemos configurado nuestro acceso a datos, ya podemos

comenzar nuestra aplicación, pero como un último dato antes de continuar

podemos ver en la ventana de orígenes de datos reflejado nuestro dataset con sus

respectivas tablas, y en la ventana del explorador de

soluciones el archivo creado para ese dataset, si en

momento deseamos eliminar el dataset por el motivo

que sea basta con eliminar este archivo del explorador

de soluciones y listo.

Capa de negocios

Estamos utilizando la arquitectura de N capas, que en ese caso son en realidad tres capas, la primera capa es la

de datos (ya a hicimos anteriormente al configurar la conexión), la segunda capa es la de negocio en donde

creamos todas las rutinas y métodos que ayudan a crear ciertas tareas para acceder y manipular los datos de la

base de datos.

Una manera fácil para comenzar a realizar nuestra capa de negocios es editando el dataset creado

anteriormente,

Damos clic derecho sobre el refaccionariaxDS en la ventana de

orígenes de datos y seleccionamos la opción “Editar Dataset

con el diseñador”, o también en la barra de herramientas esta

un botón que permite hacerlo de manera directa (En la figura

ambas opciones están encerradas con un circulo) puedes elegir

la que quieras.

Se nos despliega una nueva ventana (editor del tadaset) donde

encontramos todas las tablas (Estas tablas están acomodadas

desordenadamente,

pero puedes

arrastrar las tablas y

acomodarlas), en

esta ventana

podemos agregar

rutinas a cada tabla

que nos ayuden a

realizar

determinadas tareas

como por ejemplo:

guardar, eliminar,

consultar, listar,

etc..., todo esto

mediante

instrucciones SQL.

Aureliux Página 9

Antes de empezar se debe tener muy claro las rutinas que se desea hacer con cada tabla, en este

ejemplo solo lo plasmaremos en una sola tabla tomando en cuenta que el proceso es el mismo para

todas las demás.

Trabajaremos con la tabla “articulos”, primeramente haremos:

o Guardar datos

Damos clic derecho sobre la tabla artículos del

submenú escogemos Agregar -> Query

Se ejecutará un asistente para configurar

alguna operación SQL, primeramente nos

pregunta que deseamos hacer, dejamos

remarcado la opción que dice “Usar

instrucciones SQL” y damos clic en el

botón “Siguiente”.

En el siguiente cuadro nos pregunta que

tipo de consulta deseamos, podemos

realizar una consulta típica para buscar

algún solo dato, o para buscar varios datos

dependiendo de un criterio de búsqueda,

etc…, entre estas opciones podemos

encontrar una que dice “INSERT” que nos

permite insertar directamente los datos en

las tablas, pues bien remarcamos esta

opción y damos clic en el botón

“Siguiente”.

Aureliux Página 10

En el cuadro de diálogo “Especifique una

instrucción de SQL” nos muestra el código

que permite guardar los datos, este código

podríamos modificarlo (aunque no es

recomendable hacerlo en este caso), si

utilizas campos autoincrementables,

seguramente este no aparecerán aquí, ya

que como se genera automáticamente el

sistema no los incluye en esta operación.

El último paso es colocarle un nombre a

esta instrucción SQL que acabamos de

realizar, por defecto se le asigna uno, pero

lo recomedables es personalizarlo, en este

caso lo guardaremos con el nombre

“InsertArticulo” y pulsamos el botón

“Finalizar”.

Podemos ver ahora que en la tabla del editor del

dataset se encuentra reflejado esto que acabamos de

hacer.

Acabamos de hacer la instrucción para poder guardar

datos en la tabla artículos la cual invocaremos mas

adelante.

o Borrar datos

Así como hicimos una rutina SQL para insertar los datos directamente en la base de datos, también

podemos hacer una para eliminarlos, el proceso es similar al anterior, damos clic derecho sobe la

tabla y ejecutamos Agregar -> Query y avanzamos hasta el cuadro de dialogo donde nos pide elegir

un tipo de consulta.

Aureliux Página 11

En este cuadro debemos remarcar la opción que dice “DELETE” y damos clic en el botón siguiente. A

continuación nos aparece el cuadro donde debemos especificar una instrucción DELETE de SQL

Por defecto se muestra un código

SQL de eliminación que puede

funcionar perfectamente, pero

debido a la gran cantidad de

parámetros se nos haría difícil

utilizarlo, podemos hacerlo mas

simple, para ello debemos dar clic en

el botón que dice: “Generador de

consultas”, a continuación nos

aparece un nuevo cuadro de diálogo

donde podemos configurar nuestro

query de borrado.

Este cuadro está divido en tres

partes, la parte superior contiene la

tabla y los campos utilizados en el

query, podemos eliminar campos y también agregarlos (pero por ahora es mejor no tocarlos), vemos

que está remarcada la opción que dice “Todas las columnas” lo cual es correcto porque así decimos que

estamos utilizando todos los campos de la tabla, la parte del centro contiene parámetros que realizan la

configuración del query, y la parte de abajo el código generado automáticamente.

Como dije anteriormente el código es muy confuso, ya que para borrar el registro bastaría tan solo

mandar como única parámetro el campo llave, es decir algo como esto:

DELETE FROM artículos WHERE codigo = @codigo

Aureliux Página 12

Pues bien, modifiquemos el código, podemos seleccionarlo y borrarlo (no es necesario borrarlo todo

solo la parte que queremos modificar) de tal manera que nos quede de la siguiente manera:

Podemos observar que la parte de la configuración de los parámetros desaparecieron los

campos, esto no nos debe afectar al ejecutar el query asi que no debemos preocuparnos por

eso.

Si todo está correcto debemos dar clic en botón “Aceptar” y nos regresa al cuadro que estaba

originalmente, en donde podemos dar clic en el botón “Siguiente” avanzamos y guardamos la

instrucción SQL con el nombre que quieras, en este caso la guardamos con el nombre:

“DeleteArticulo” y seguimos avanzando hasta finalizar, veremos que en el editor del dataset

aparecerá listada esta instrucción en la sección que dice “articulosTableAdapter” junto con

“InsertArticulo”.

Es importante aclarar que si la esta tabla no estuviera relacionada hasta aquí bastaría, sin

embargo podemos ver que la tabla ”detallesVenta” depende de esta tabla ya que los detalles de

la venta dependen de los artículos, por lo tanto se debe eliminar primero los datos que

coincidan con este campo en la tabla “detallesVenta” pero a su vez la tabla detalles venta

también depende de la tabla “ventas”, asi que también hay que borrar en la tabla ventas, algo

asi como un borrado en cascada, esto con el fin de evitar inconsistencia en la integridad de los

datos, los querys nos quedarían como se muestran en las figuras de abajo.

Aureliux Página 13

El primero lo llamaremos “DeleteDetallesVenta” y el segundo “DeleteVenta”, este asunto de

borrar datos no es nada irrelevante, al contrario es tan importante que de un mal borrado

podríamos dejar datos sueltos y que a la larga podrían darnos problemas.

o Buscar un dato (Consultas)

Aparte de insertar y eliminar otra tarea importante es buscar datos, consultar, podemos hacer

tantas consultas como necesitemos, por ejemplo podemos buscar por código, por nombre, etc…

podemos buscar un solo dato específico o un conjunto de datos que cumplan con un mismo

criterio por ejemplo todos aquellos cuya existencia sea menor de 50 artículos, bueno

primeramente hagamos una búsqueda por código, para ello el proceso es similar a los anteriore

querys: Agregar -> Query, avanzamos hasta el cuadro que nos pide elegir un tipo de consulta en

el cual remarcamos la opción que dice “SELECT que devuelve filas”, vemos que nos aparece un

cuadro similar a los vistos en los ejemplos anteriores, en el cual se nos muestra un código de

consulta que debemos modificar

para poder establecer que

queremos buscar por medio del

código, damos clic en el botón

“Generado de consultas” el cual nos

abrirá un el mismo cuadro donde

configuramos el “DELETE”.

Pues bien, en la parte de en medio

debemos establecer nuestro criterio

de búsqueda asi que en la fila

correspondiente al campo “codigo”

en la columna “Filtro” escribimos

“@codigo” lo cual le indicará a SQL

que para realizar la búsqueda deberá recibir como parámetro un valor que nos servirá de filtro.

Vemos el que código también ha cambiado, damos clic en “Aceptar” y avanzamos hasta

guardar el query con el nombre “FillByCodigo” y donde dice Nombre del método pongámosle

“GetDataByCodigo”, y avanzamos hasta finalizar.

Aureliux Página 14

Podemos hacer otra consulta, donde nuestro criterio sea el nombre del artículo (descripción),

pues bien , repitamos todo el proceso anterior, lo único que vamos a cambiar es nuestro

criterio, quedando como se muestra en la figura:

Si ya manejas SQL seguramente este criterio te va a ser familiar, ya que utilizamos el operador

“LIKE”, funciona de manera similar al operador “=” pero con la diferencia que es aplicado solo a

cadenas y que nos permite utilizar comodines para buscar al principio de la cadena, al final, en

medio, etc…, por ejemplo si buscamos una palabra podemos buscarla en el principio, en el final

o en medio, ya lo retomaremos mas adelante, pero si no sabes como funciona te recomiendo

que lo investigues ya que en un principio dije que no abundaría en detalles.

Avanzamos y lo guardamos con los nombres “FillByNombre” y “GetDataByNombre” y listo

tenemos nuestras dos consultas.

o Actualizar datos (Modificaciones)

Hasta ahora tenemos insertar, borra y consultar, pero nos falta un query que nos permita

modificar datos, es importante determinar cuales queremos modificar, en este ejemplo solo

podremos modificar la descripción del producto, el precio y el punto de venta, podríamos hacer

un query por separado para cada uno, o uno solo que modifique a los tres, en este caso haremos

este último.

El proceso es similar a los

anteriores vistos, “Agregar ->

Query” avanzamos y donde

nos pide elegir un tipo de

consulta seleccionamos la

opción “UPDATE” y avanzamos,

nos aparece el cuadro donde

aparece el código por defecto

el cual debemos modificar

pulsando el botón “Generador

de consultas”.

En el generador de consultas

debemos modificar

Aureliux Página 15

directamente el código tal como lo hicimos cuando queríamos borrar registros, para modificar

solo necesitamos especificar el nombre de la tabla, los campos a modificar con sus respectivos

parámetros y una referencia que en este caso es el campo llave.

Algo como esto:

Damos clic en el botón “Aceptar” y

continuamos hasta guardarlo con el

nombre “UpdateArticulos”, y

avanzamos hasta finalizar.

Hemos terminado con la tabla

artículos, de ti depende hacer lo demás en las otras tablas, es necesario hacerlo ya que de eso

depende el trabajo que haremos después, se puede hacer a medida que vayamos diseñando, así

que si ahora no sabes que exactamente que hacer en las otras tablas puedes avanzar y regresar

a este editor del dataset cuando sea necesario, pero lo recomendable es hacerlo desde ya y

dejar lo mínimo para después, por ahora tenemos nuestra tabla “articulos” de la siguiente

manera:

Capa del cliente(Formulario)

Ya configuramos el acceso a datos, ya hicimos las rutinas necesarias para manejar los datos, ahora solo falta

diseñar la interfaz del usuario, se muy bien que a veces cuando empezamos a hacer un sistema lo que queremos

es comenzar a diseñar y tirar código a diestra y siniestra, pero también se que eso es un error muy grande que

nos hace perder tiempo y regresar a modificar y corregir (si es que se puede corregir) muchas situaciones que no

se previeron, así que al desarrollar un sistema nos debemos armar de mucha paciencia y hacer las cosas en el

orden correcto.

Disculpen por ser tan insistente en este punto, pero debo repetir que no voy a ser tan detallado en algunas

acciones que realice, ya que este no es un tutorial de VB.NET si alguna de las cosas que aquí realizo no saben

como se hicieron lo mejor es investigarle en manuales que abundan en internet.

Aureliux Página 16

En este manual solo vamos a realizar las operaciones para la tabla “artículos” y cuando sea necesario nos

extenderemos a otras tablas.

o Menú principal

Mediante la herramienta “MenuStrip” creemos el menú principal el cual debe quedar como se muestra

en la figura de abajo, o por lo menos algo parecido, las imágenes puedes personalizarlas a tu manera.

Las principales propiedades quese deben cuidar son:

El nombre del formulario, lo llamaremos “menu”.

La propiedad “IsMdiContainer” la debemos establecer en verdadera para

poder incluir formularios dentro de ella (leer acerca de formulario mdi).

El titulo del formulario en esta caso le pondré “Menu del sistema de la

refaccionaria X”.

La propiedad “windowsState” le pondremos el valor “Maximized” para que

cuando se ejecute el formulario desde el inicio aparezca la ventana

maximizada.

Y si ya sabes utilizar las demás propiedades puedes personalizarlas a tu gusto, puedes ejecutar el

programa(pulsando F5) para ver como va quedando la aplicación y corregirle lo que no te haya gustado.

Como es de imaginarse cuando seleccionemos alguna opción del menú se debe abrir un nuevo

formulario, asi que debemos crear todos los formularios que necesitemos, comencemos con el formlario

Aureliux Página 17

que permitirá controlar los datos de los productos (para seguir con los ejemplos con los que comencé

desde un principio), pero por ahora en el botón “Salir”coloquemos el siguiente código:

o Catalogo de productos

Este será un formulario que nos permitirá agregar,

eliminar, consultar, etc…, ralizar las operaciones mas

importantes que configuramos en la “capa de

negocios” para los productos. Para cada opción

importante deberemos crear un catálogo el cual será

llamado desde el menú princpal.

Primeramente debemos crear un nuevo formulario,

para ellos damos clic derecho sobre el nombre del

proyecto en el explorador de soluciones y

seleccionamos “Agregar -> Windows Forms”.

Enseguida podremos agregar un nuevo formualario al cual debemos colocarle un nombre, para ello en

el nuevo cuadro de diálogo que aparece debemos escribir el nombre del formulario sin borrar la

extensión “.vb”, en nuestro

ejemplo le llamaremos

productos.

Pulsamos el botón

“Agregar” y acto seguido

podremos ver en el

explorador de soluciones un

nuevo elemento con el

nombre del formulario que

acabamos de crear.

S

i

en un determinado momento quisieramos borrar el formulario solo

debemos eliminarlo de esta lista, asi mismo si

queremos acceder a este formulario solo

debemos dar doble clic sobre este elemento (esto ya lo deben saber), lo

mismo si quisieramos cambiarle de nombre, por ejemplo si te fijas el

formulario principal se llama “Form1.vb” lo cual no es muy ilustrativo o

adecuado, lo correcto sería que se llamara “menuPrincipal.vb”(o algo

parecido) asi que vamos a cambiarle el nombre, para ellos damos clic derecho sobre el y elegimos

Aureliux Página 18

“Cambiar nombre” y sin borrar la extensión .vb escribimos “menuPrincipal”, ahora tenemos dos

furmarios (y pronto tendremos mas) facilmente identificables.

Sin embargo lo que a primera vista podremos ver cuando creamos un nuevo formulario es precisamente

un formulario vacío, el cua debemos darle forma y crear lo que queremos, podemos hacerlo de una

manera muy fácil aprovechando las herramientas que nos ofrece visual studio.

Las propiedades que vamos a cambiar a este formulario para ir iguales son:

ControlBox = Falso para que no se pueda maximizar, minimizar o cerrar, en

lugar de esto utilizaremos botones.

FormBorderStyle = FixedSingle para evitar que la ventana se redimensione,

esto para evitar que la ventana se distorsione al cambiarla de tamaño.

Text = Catálogo de productos… para que aparezca en la barra de título de la

ventana.

Y puedes personalizar las demás propiedades que tú consideres.

El tamaño del formulario también lo vamos a redimensionar a medida

que lo necesitemos (porque lo vamos a necesitar).

Coloquemos un botón y cuyo nombre sea “btnCerrar”, su texto

“Cerrar catálogo ” y la propiedad Anchor sea “Top, Left”, el

formulario nos debe quedar de esta

manera.

Vemos un formulario sencillo con un botón el cual está vacío, no

funciona porque no le hemos puesto nada, este botón debe cerrar

el formulario así que debemos programarlo para tal tarea, damos

doble clic sobre el botón y en el editor de código escribimos “Me.Close()” tal como se ve el la figura.

Otra cosa importante es invocar a este formulario que estamos

creando desde el menú, así que debemos cambiarnos al formulario

“menuPrincipal” y dar doble clic sobre el botón “Productos” del

menú.

En el editor de código escribimos

el siguiente código:

Aureliux Página 19

La primera línea es para que el formulario aparezca en el centro de la pantalla, la segunda para indicar

que el formulario “productos” va aser una ventana hija de formulario “menuPrincipal”, y la ultima es

para mostrar la ventana, podemos correr el programa y veamos que está pasando.

Al ejecutar el programa y dar clic en el menu “Productos” podemos ver que aparece el formulario que

creamos.

Es tiempo de dar forma a nuestro catálogo, para ello debemos colocar un

“DataGridView” sobre el formulario, si nos pide seleccionar un origen de

datos no lo hagamos, como nombre (propiedad name) le ponemos

“grdArticulos”y lo redimensionamos junto con el formulario para que

tenga un tamaño mas o menos aceptable como se ve en la figura.

Las otras propiedades que debemos configurar de “grdarticulos” son:

o AutoSizeRowsMode en DisplayedCell para que el tamaño de las

celdas se ajusten al contenido dao de alta.

o Multiselect en falso para que no puedan seleccionar mas de una

fila al mismo tiempo.

o ReadOnly en falso para que no puedan editar el contenido del

datagridView.

o SelectionMode en FullRowSelect para que se selecciona todo el

renglón completo y no solo una columna

Para poder realizar cualquier operación con los datos se puede hacer de distintas maneras, algunas mas

fáciles que otras, de igual forma algunas menos funcionales que otras, respeto todas las formas de

diseñar en VB.NET, pero en este artículo voy a explicar la mía.

Aureliux Página 20

Primeramente vamos a crear una nueva clase que nos

permita administrar los datos y los métodos que

configuramos en la capa de negocios.

Para agregar una nueva clase damos clic derecho sobre el

proyecto en la ventana del “Explorador de soluciones” y

escogemos “Agregar -> Nuevo elemento” con lo cual nos

muestra un nuevo cuadro de diálogo con una serie de

plantillas entre las cuales se encuentra una llama “Clase” la

cual seleccionamos y en el campo Nombre debemos colocar “adminDatabase” sin borrar la extensión

.vb (procedimiento similar al que utilizamos cuando agregamos un nuevo formulario), el nombre

“adminDatabase” es un nombre que a mi se me ocurrió ponerle a la clase, pero pudo haber sido

cualquier otro nombre.

Damos clic en el botón “Aceptar” y podemos ver el nuevo elemento en el “Explorador de soluciones” en

la ventana de diseño vemos el editor de texto de la clase vacía.

Primeramente debemos declarar un “dataset” y un “tableadapter” de la tabla “articulos” y luego crear

los métodos que realicen lo que queremos.

Todo lo que necesitamos está en el “dataset” configurado anteriormente, es decir solo debemos invocar

los métodos que se encuentran en “articulosTableAdapter”.

Fill retorna todos los elementos de una tabla.

DeleteArticulo borra un artículo.

FillByCodigo devuelve los campos que tengan un determinado

código.

FillByNombre devuelve los registros que tengan un determinado

nombre, etc…

Teniendo esto claro hagamos pues el siguiente código:

Aureliux Página 21

Como podemos observar hemos declarado el dataset y el adaptadro, asi mismo hemos creado un método

que devuelve todos los registros de la tabla “articulos”, ahora regresamos el formulario “productos” y

damos doble clic sobre el para ir al evento “Load”, nos aparece el editor de código en el evento Load, pero

antes de programar este evento debemos crear el objeto de la clase que definimos anteriormente, y luego

afectar las propiedades “datasource” y “datamember” del datagridView para establecer la fuente de datos

y después de ello invocar el métdo “todosArticulos” tal y como se muestra en la figura siguiente:

Ahora podemos correr el programa y navegar en el menú “Productos” veremos que al cargarse el

formulario, este aparecerá con los datos de la tabla “articulos”, por supuesto que por ahora todavía está

vacía.

Por ahora nuestro formulario está muy

triste, parece que no sirve para nada, sin

embrago recordemos que todavía lo

estamos diseñando, ahora lo que vamos a

hacer es agregarle 5 botones mas y

configurarlos con las opciones “Agregar,

Eliminar, Modificar, Imprimir”.

La propiedad “anchor” le asignamos los

valores “Top,Rigth”.

Tenemos ahora 5 botones, uno de ellos es

para salir del formulario y a continuación comenzaremos a trabajar con los otros 4.

o Agregar datos

Comenzaremos agregando datos a nuestra tabla para poder ver como se vería cuando insertáramos datos,

para ello podríamos hacerlo directamente en este mismo formulario, sin embargo para una mejor

Aureliux Página 22

presentación utilizaremos uno nuevo que nos permita capturar los datos y guardarlos, para eso agreguemos

un nuevo formulario con el nombre “addProductos”.

A este nuevo formulario agreguémosle 5 textBox, 5 Label y 2 botones, y debemos configurarlo de tal

manera que nos quede como se muestra en la figura:

Debemos ser consientes de la propiedad “MaxLength” de cada textBox

basándonos en el tamaño de cada campo, con el fin de evitar errores de

desbordamiento al momento de guardar datos, es decir si en mi campo código lo

definí como varchar(20) entonces significa que como máximo solo puede

guardar 20 caracteres, asi que a la propiedad MaxLenght de txCodigo le debo

asignar 20, en el caso de los numéricos debemos aplicar sentido común y determinar cuantos dígitos tendría

como máximo el campo y en base a eso asignarle un valor, de no hacerlo asi el textBox aceptaría hasta

32767 caracteres lo cual podría ser una causa de error al momento de guardar los datos.

Es evidente que al presionar el botón “Guardar” los datos deben almacenarse en la tabla y contrariamente

al presionar “Cancelar” el formulario debe cerrarse sin que nada suceda.

Debemos retomar la clase “adminDatabase” y crear un método que permita guardar los datos, agregamos

un método como este:

Ahora este método lo vamos a invocar desde el botón “Guardar” asi que damos doble clic sobre este botón

situado el en formulario “addProductos” y escribimos el siguiente código:

txCodigo

txDescripcion

txExistencia

txPVenta

txPrecio

btnGuardar

btnCancelar

Aureliux Página 23

Y en el botón “Cancelar” el siguiente código:

Y por último en el evento “Load” del formulario debemos limpiar los “TextBox” ya que siempre se quedan

con la última información utilizada y eso es muy molesto:

Hemos terminado con la codificación que nos permite guardar los datos, ahora debemos hacer que al pulsar

el botón “Agregar” del formulario “Productos” aparezca lo que hemos hecho, para ello escribimos el

siguiente código:

Listo podemos ejecutar nuestra aplicación y agregar un nuevo artículo:

A estas alturas ya podemos guardar

datos, pero el principal problema aquí

es la falta de validaciones como por

ejemplo que en el precio se teclee

letras en lugar de números o algo

parecido.

Para ayudarnos a validar utilizaremos

un nuevo control llamado “ErrorProvider”, coloca uno sobre el formulario

y ponle como nombre “Validaciones”.

Este control se coloca en la parte inferior del

formulario.

Aureliux Página 24

Para poder validar cada “TextBox“ se debe hacer mediante el evento “Validating” en este ejemplo

comencemos con “txCodigo” dando doble clic sobre el evento “validating” y ahí validemos que no deje el

control en blanco:

Pero para que tenga un mejor funcionamiento debemos cambiar la

propiedad “AutoValidate” del formulario “addProductos” como se

muestra en la figura.

Para que veas para que sirve esto, corre el programa sin modificar

esta propiedad y luego córrela modificándola, verás que sin

modificarla no puedes avanzar hasta que corrijamos el error, de la

otra forma nos muestra el error pero nos deja continuar.

De esta misma manera valida los otros “textBox” para que no

queden vacíos.

Un asunto importante es validar el botón “Guardar” para que no deje guardar nada vacío, para esto

debemos desactivar el botón “Guardar” para tener mayor control al momento de guardar, es decir mientras

haya algún TextBox vacío este debe permanecer desactivado y se activará hasta que todos los controles

tengan algún valor. Agreguemos una función que retorna verdadero cuando haya algún TextBox vacío:

Lo que hacemos es recorrer todos los objetos que estén

en el formulario por medio del ciclo “For Each” y a

través de la propiedad “textLength” determinamos si

alguno está vacío y de esta manera sabemos que valor

retornar.

Teniendo esta función solamente debemos invocarla

desde el evento “KeyUp” de cada “TextBox”

asignándoselo a la propiedad “Enabled” del botón, y de

esta manera el botón se activará automáticamente cuando ya no haya TextBox vacíos..

Esto mismo para cada TextBox, ahora hagamos unas pruebas e

intentemos dejar algún valor en blanco y veremos el resultado

de nuestras validaciones, cuando dejemos algún campo vacío

nos marcará el error correspondiente y no se activará el botón

guardar.

Aureliux Página 25

Hemos terminado de trabajar con nuestro formulario para guardar los datos, podemos personalizar otras

propiedades, en este ejemplo lo dejamos hasta aquí, es probable que se nos haya escapado algún detalle

pero debe ser mínimo.

o Eliminar datos

Eliminar registros será una tarea fácil, primeramente debemos agregar un método a la clase

“adminDatabase” que permita borrar un registro:

Regresamos al formulario “productos”, debemos saber que fila del dataGridView tenemos seleccionada

para que sea precisamente esa la fila a eliminar, para ello vamos a la propiedad RowStateChanged de

“grdArticulos” y escribimos:

Primeramente definimos una variable pública denominada

“valorCodigo” de tipo string en el inicio de la clase.

Y ahora si codificamos el evento RowStateChange:

Ahora debemos codificar el botón eliminar:

Ahora puedes agregar nuevos artículos a tu tabla y eliminarlos sin ningún problema, sin embargo como dije

anteriormente eliminar no es algo que no tenga repercusiones futuras, ya que antes de eliminar debemos

tener en cuenta si esta tabla tiene relaciones con otras tablas, en nuestro ejemplo si tiene, así que debemos

eliminar primero en las tablas que estén relacionadas (pero esto lo haremos después), por ahora dejémoslo

así.

o Modificar datos

Primero recordemos que en la capa de negocios definimos un método que permitía modificar los datos

de los artículos, pero dijimos que solo podríamos modificar la descripción del producto, el precio y el

punto de venta, el método lo llamamos “UpdateArticulos”.

Aureliux Página 26

Creemos un nuevo formulario llamado “updateProducto” similar que utilizamos cuando dimos de alta a

un artículo.

Los nombres que utilizaremos para cada textBox serán

los mismos que se utilizaron para el formulario

“addProducto”, pero la propiedad “Enabled” de

txExistencia y de txCodigo las ponemos en falso, esto con

el fin de que esos campos no se puedan editar.

En el formulario “productos” debemos invocar a este

formulario por medio del botón “Modificaciones” asi que

colocamos este código en ese botón:

Si ejecutamos el programa podremos ver que nuestro

formulario va quedando como se muestra en la figura:

Podemos ver que los campos pertenecientes al código y

a la existencia no podemos modificarlos, sin embargo el

formulario está vacío, debemos hacer que nos muestre

los datos que queremos modificar.

Para ello debemos primeramente debemos regresar a la

clase “adminDatabase” y agregar este método, que lo

que hace es buscar un artículo por medio de su código:

Luego de eso debemos regresar al formulario “updateProducto” hacer el siguiente código en el evento

“Load” del mismo:

Con esto logramos que al ejecutarse el formulario aparezca con los datos que en ese momento estén

seleccionados en el datagridView del formulario “Productos”.

Aureliux Página 27

Hasta ahora no hemos hecho nada para modificar los datos, para ello primeramente debemos regresar

nuevamente a la clase “adminDatabase” y agregar otro método que permita modificar los datos:

Regresando al formulario “updateArticulo” en el botón “Guardar” colocamos el siguiente código:

Y

e

n

e

Por último en el botón “Cancelar”

colocamos:

Con esto ya podemos modificar cualquier dato.

o Reportes (Imprimir)

Ya podemos hacer altas, bajas, modificaciones, nos falta el reporte de los datos para verlo en pantalla o

mandarlo a la impresora, en este caso vamos a imprimir todos los artículos listados dados de alta.

Primeramente debemos colocar tres controles del cuadro de herramientas sobre el formulario

“productos”: El primero será un “PrintDialog”, el segundo será un “PrintDocument”, y el tercero un

“PrintPreviwDialog”, los configuraremos asi como se muestra en la figura:

Es importante fijarnos que la propiedad “document” apunta a al control documento, pues bien,

documento contendrá la información que se mandará a la impresora, este control es que debemos

Aureliux Página 28

codificar, el control “impresora” nos mostrará un cuadro de diálogo que nos permitirá seleccionar la

impresora en la que queremos imprimir, asi como el número de copias, etc.., y por último “contenido”

nos mostrará una vista preliminar del documento antes de imprimirlo.

Antes de continuar debemos hacer una clase que nos permita hacer todo el trabajo de la impresiones,

se podrían utilizar algunas herramientas como CrystalReports o el generador de reportes que trae por

defecto visual studio que nos liberaría de código, pero repito que yo voy a enseñar este método que me

ha funcionado, si alguien quiere implementar sus métodos de reportear debe funcionar perfectamente

con este ejemplo.

Agreguemos una nueva clase a la que le llamaremos “reporte.vb”, primeramente declaremos las

variables que queremos utilizar:

Lugo creemos un método que inicializa la impresión:

Y por último el método que lanza la impresión a la impresora:

Aureliux Página 29

Explicar el código sería muy extenso así que si quieres saber como funciona cada instrucción vas a tener que

investigar por tu cuenta, pero funciona a la perfección.

Ya hicimos la clase ahora debemos regresar al formulario “productos” e invocar a

la clase desde ahí, primeramente seleccionamos el control “documento” y

codificamos el evento “BeginPrint”

Colocando el siguiente código:

Antes que nada agremos un nuevo objeto de la clase “reporte”

Ahora si inicializamos la impresión en el evento BeginPrint

Aureliux Página 30

Ya inicializamos la impresión, pero no la hemos mandado a la impresora, para ello debemos ahora

codificar el evento PrintPage y colocamos el siguiente código:

Ahora para poder ver el reporte debemos codificar el botón “Imprimir” colocando el siguiente código:

Listo con esto ya puedes imprimir reportes…

o Busquedas (Consultas)

Para este ejemplo vamos a hacer una búsqueda por nombre, es decir que cuando se teclee el nombre

que lo busque en los datos de la tabla, para eso primeramente vamos a modificar un poquito nuestro

formulario añadiendo un TextBox y un Label, de tal manera que quede como se muestra en la figura (Al

TextBox lo llameremos “nameProduct”)

Antes de dontinua debemos agregar un método a nuestra clase “adminDatabase” que permita buscar

por medio del nombre:

De regreso a nuestro formulario “productos”, vamos a hacer nuestra búsqueda de tal manera que

cuando se vaya tecleando el nombre del producto se vaya filtrando la tabla al mismo tiempo, para ello

debemos codificar el evento KeyUp de “nameProduct” colocando el siguiente código:

Listo hemos terminado nuestro sistema, con muchas carencias que en otros textos se irán

enriqueciendo.

Aureliux Página 31

Examen:

En base al texto anterior debes realizar un sistema de altas, bajas, modificaciones, consultas y

reportes del siguiente caso:

Una biblioteca desea tener el control de sus libros y de sus préstamos internos y externos de

libros, asi como un control de sus usuarios registrados.

Hacer un sistema que permita dar de alta los libros y los usuario, debe permitir buscar a los

libros por medio de su nombre lo mismo con los empleados.

Calificar:

Modelo conceptual de datos: 20%

Sistema 80%

Altas Tanto para los libros como para los usuarios.

Bajas Tanto para los libros como para los usuarios.

Modificaciones Tanto para los libros como para los usuarios.

Consultas por nombre Tanto para los libros como para los usuarios.

Reportes Tanto para los libros como para los usuarios.