Conexión de ASP .Net con SQL Server usando WebService

Para este ejemplo necesitamos las siguientes aplicaciones:

• Microsoft Core XML Services (MSXML) 6.0 --> Motor SQL
• Microsoft SQL Server Management Studio Express --> Ide SQL Server
• Script para la base de datos que usaremos en este ejemplo
  

Paso 1: Creación de la base de datos e inicio de los servicios necesarios

Nota: Si ya tienes iniciado los servicios necesarios y tienes la base de datos puedes pasar al siguiente paso.

Primero instalamos el motor y luego el ide. Una vez que tengamos ambos instalados abrimos el SQL Management y nos conectamos con el servidor. Normalmente es el nombre de tu computador seguido de "\SQLExpress". (Véase la imágen)

Una vez que nos conectamos abrimos el script que bajaron (Archivo, Abrir, Archivo) y lo ejecutan con el botón "Ejecutar". Se crearán nuevas tablas en la base de datos "master". Para este ejemplo usaremos la tabla "dbo.usuarios". (Para un proyecto propio creen sus propias tablas y tengan en cuanta los de sus campos)

Ahora que ya tenemos la tabla requerida debemos iniciar el servico de SQL Server para permitir que Visual Studio pueda conectarse con ella. Para ello abrimos "SQL Server Configuration Manager" que se encuentra en Inicio, Todos los Programas, Microsoft SQL Server 2005, Herramientas de configuración.

Una vez abierto nos vamos al panel izquiero y abrimos "Servicios de Sql Server 2005". En el panel de la derecha aparacerán dos servicios, uno de ellos está detenido, debemos iniciarlo modificando su modo de inicio como "manual" (en sus propiedades y en la ficha Servicios") y luego iniciarlo.

Una vez hecho esto podemos comenzar con la programación en Visual Studio.

Paso 2: Creación de la interfaz gráfica y las clases necesarias junto con WebService

Para este proyecto debemos tener 3 cosas:

• Una interfaz gráfica
• Una clase con los datos que usaremos para grabar a la base de datos
• Un WebService que se encarga de la conexión

Anexo 1: Conectar con servidor
Lo primero que haremos será conectar el Visual Studio con SQL Server. Para ello nos vamos a la pestaña de la izquierda "Explorador de Servidores" y creamos una nueva conexión:

En la ventana que aparecerá en el espacio "Nombre del Servidor" escribimos el nombre de nuestro computador seguido de "\SQLExpress":

Aceptamos y ya estamos conectados con SQL Server.

Lo siguiente que haremos es la interfaz gráfica usando un Web Form:

Lo siguiente que debemos hacer es añadir el WebService. Para estoo añadimos un nuevo elemento y seleccionamos "Servicio Web". Se creará una carpeta con nombre "App_Code" en la cual se encuentra nuestro WebService y además se creará un fichero ".asmx" en la raíz del proyecto.

Anexo 2: Registrar WebService
Ahora hay que registrar el WebService al proyecto para que este pueda ser usado. Debemos arrancar el proyecto usando el fichero del servicio web que se encuentra en la raíz del proyecto que tiene extensión ".asmx". Cuando este arranque veremos una página representando al WebService:

Cuándo la veamos copiamos la URL del WebService y cerramos la ventana. Ahora damos click con el botón derecho en el proyecto (en la ventana "Explorador de soluciones") y seleccionamos "Página de propiedades". En la ventana que se mostrará seleccionamos "Agregar referencia web". Ahora en la ventana en el espacio "Direccion URL" pegamos la URL del WebService y en "Nombre referencia Web" escribimos el nombre que le daremos a la referencia, en mi caso le puse "webServiceEjem" y añadimos la referencia.

Una vex hecho esto nos dirigimos al código del WebService que se encuantra dentro de "App_Code" e importamos las librerías:

• using System.Data;
• using System.Data.SqlClient;

El siguiente paso es crear una clase que tenga las variables que contenerán los datos que el usuario ingrese. Entonces, añadimos una nueva clase al proyecto con nombre "Usuarios" y
en su código agragamos las siguiente variables con sus métodos para ingresar y devolver sus valores:

private string rut;
private string password;
private string habilitado;
private string funcion;

public Usuario()
{
}

public string Rut{
set { this.rut = value;}
get { return this.rut; }
}

public string Password{
set { this.password = value; }
get { return this.password; }
}

public string Habilitado {
set { this.habilitado = value; }
get { return this.habilitado; }
}

public string Funcion {
set { this.funcion = value; }
get { return this.funcion; }
}

Ahora que tenemos lista esta clase debemos programar el WebService para conectar a la base de datos y almacenar los datos. Para ello nos vamos nuevamente al WebService. Lo primero es hacer una nueva variable de tipo "SQLConnection" que es la que se encarga de la conexión a SQL Server, en mi caso le puse por nombre "conexion":

SqlConnection conexion;

Ahora crearemos el método encargado de conectar y almacenar los datos, en mi caso usé el nombre "almacenarUsuarios":

[WebMethod]
public void almacenarUsuario(Usuarios user)
{

}

Es importante mencionar que a un método en WebService se le antepone la sentencia
[WebMethod] que lo identifica como un método perteneciente a un Servicio Web. Además este método recibe una variable de tipos "Usuarios". La variable la recibirá de la interfaz gráfica y esta vendrá con todos los datos que el usuario ingresará.

Ahora añadimos la siguiente línea al método:

conexion = new SqlConnection("Data Source=WOLF\\SQLExpress;Integrated Security=True");

Anexo 3: Cadena de conexión

Esta crea una nueva conexión usando una cadena de conexión. ES IMPORTANTE mencionar que esta cadena no les servirá. Para saber cuál es su cadena deben primero ir a la pestaña de la izquierda "Explorador de servidores", damos con el botón derecho a la conexón que hicimos al principio y después en propiedades. En la ventana propiedades de la derecha debemos copiar toda la cadena de conexión que está en el ítem "Cadena de conexión" y reemplazar la del código anterior:

Nota: La cadena que copiarás será parecida a esta:
Data Source=WOLF\SQLExpress;Integrated Security=True

Pero si la copiamos tal cuál el programa se caerá. Debemos agregar entre el nombre del computador y \SQLExpress otro "\", de este modo quedaría así:

Data Source=WOLF\\SQLExpress;Integrated Security=True

Con la cadena lista abrimos la conexión añadiendo la sentencia: conexion.Open();

Ahora escribimos la consulta en forma de string:

string sql = "Insert into usuarios(rut, password, habilitado, funcion) values ('{0}', '{1}', '{2}', '{3}')";

Las etiquetas '{0}', '{1}', '{2}', '{3}' representan comodines los cuales se reeplazarán por los datos a ingresar.

Ahora ejecutamos la consulta:

SqlCommand query = conexion.CreateCommand();

query.CommandText = String.Format(sql, user.Rut, user.Password, user.Habilitado, user.Funcion);

query.ExecuteNonQuery();

Si se fijan en la segunda línea estamos usando la cadena "sql" que es la de la consulta que creamos anteriormente y los comodines que tenía se reemplazan en el mismo orden que estaban escritos por los valores de rut, password, habilitado y funcion los cuáles obendremos desde la interfaz y que rescatamos usando los métodos de la clase "Usuarios".

Ahora sólo queda la interfaz. Nos vamos a esta y programamos botón "Ingresar". Ahora haremos que la interfaz le pase los valores que el usuario ingrese a la clase "Usuarios" y a la vez pasaremos estos datos al WebService que se encaragará de grabarlos en la base de datos usando el método almacenarUsuarios.

Añadimos el siguiente código al botón "Ingresar":

//Segmento 1
localhostWebService.Usuario user = new localhostWebService.Usuario();
user.Rut = this.TextBox1.Text.Trim();
user.Password = this.TextBox2.Text.Trim();
user.Habilitado = this.TextBox3.Text.Trim();
user.Funcion = this.TextBox4.Text.Trim();

//Segmento 2
localhostWebService.WebService wsBaseDato = new localhostWebService.WebService();
wsBaseDato.almacenarUsuario(user);
this.TextBox1.Text = "";
this.TextBox2.Text = "";
this.TextBox3.Text = "";
this.TextBox4.Text = "";

En el segmento 1 creamos una nueva instancia de la clase "Usuarios" con nombre "user" pero en forma de WebService para que este pueda tener acceso a ella. Además usamos los métodos de la clase para ingresar los valores a la nueva instancia de la clase.

En el segmento 2 creamos una nueva instancia del WebService con nombre "wsBaseDato". Además usamos el método almacenarUsuario() del WebService y le pasamos la instancia de la clase "Usuarios" con nombre "user" que contiene los valores que el usuario ingresó para que se guarden en la base de datos. Al hacer esto el WebService los recibe en el método almacenarUsuarios y los guarda en la base de datos.

Ya hemos conectado satisfactoriamente Visual Studio y SQL Server. Ahora basados en este código pueden programar en el WebService un método que les permita leer desde la base de datos y mostrarlos por pantalla, asi también como eliminar o modificar la información.

Aquí les dejo el código fuente (Para abrirlo usen Archivo, Abrir, Sitio Web y seleccionen la carpeta):

http://www.megaupload.com/?d=J7BHYLAJ

Nota: Para que funcione apropiadamente deben conectar el Visual Studio con su servidor de base de datos (Véase Anexo 1), registrar el WebService (Véase Anexo 2) y escribir la cadena de conexión (Véase Anexo 3)

Uso de ActionListener para añadir acciones a un jButton en Java

En la guía anterior construimos un proyecto y creamos una interfaz gráfica usando SWING. Ahora ocuparemos el mismo proyecto para explicar el ActionListener.

Si no tienen el proyecto aquí está el código fuente para NetBeans:
http://www.megaupload.com/?d=CVKNCZIP

Paso 1: Implementar la interfaz ActionListener y sus métodos

Para que podamos implementar la interfaz ActionListener y sus métodos abstractos debemos usa la sentencia "implements ActionListener" seguido de la declaración de clase. En este caso sería:

public class IDEfrm extends JFrame implements ActionListener
{

También debemos importar "java.awt.event.ActionListener;" usando la sentencia "import java.awt.event.ActionListener;" en la zona de importaciones.

Ahora que hemos implementado la interfaz debemos añadir por obligación todos los métodos que esta posee. En este caso sería:

public void actionPerformed(ActionEvent e) {

}

Paso 2: Añadir las acciones a los jButton

Ahora estamos preparados para añadir acciones al los jButton. Para esto debemos usar la propiedad .setActionCommand(" ") y .addActionListener(this); en el método initComponents(). La sentencia sería así para el caso del jButton2 que lleva la etiqueta "Nuevo":

jButton2.setText("Nuevo"); //esta línea ya está escrita, solo para ubicarse
jButton2.setActionCommand("Nuevo");
jButton2.addActionListener(this);

Con la propiedad setActionComand lo que hacemos es asignarle un string, en este caso "Nuevo" al jButton para que el ActionListener lo escuche y haga lo que se indica (esto lo haremos mas tarde). Además con la sentencia .addActionListener(this); hacemos que el método abstracto actionPerformed() que está en esta clase (por eso el "this") sea el encargado de escuchar las acciones del jButton.

Ahora que el jButton está enviando la acción solo falta programar el método actionPerformed() para que escuche al jButton y haga lo que queramos.

Paso 3: Programando en actionPerformed()

Ahora nos dirigimos al método actionPerformed y agregamos el siguiente código:

if(e.getActionCommand().equals("Nuevo"))
{

}


En este caso la variable "e" está declarada en el método actionPerformed(ActionEvent e). Esta variable de tipo ActionEvent es la que obtiene el string que un jButton envñia en caso de ser pulsado, en este ejemplo obtiene el string "nuevo". Con el código que agregamos lo que hacemos es verificar que el string que la variable "e" capturó sea "nuevo", lo que indica que estamos pulsando el jButton2.

Ahora sólo tenemos que programar lo que queramos que el jButton2 haga. Para este ejemplo sólo haremos que el programa imprima un string "Se está pulsando nuevo en la ventana".
Para esto dentro del if que agregamos escribimos la sentencia:

System.out.println("Se está pulsando nuevo en la ventana");

Esta sentencia hace que el ide imprima en la consola la cadena deseanda y al final le agregue un salto de línea para que las siguientes cadenas a imprimir no aparezcan pegadas y seguidas a esta. El resultado sería:

Ahora les pondré el código fuente. Sólo que en mi caso hice más que sólo agragar un System.out.println(). Lo que hice fué con cáda jButton realizar una accion que activara o desactivara otros jButton o algunos jTextField. Esto será muy útil para la siguiente guía en la que conectaremos nuestra interfaz a mySQL. Además en el método iniComponents() establecí algunos jTexField como "no editables", aunque estos se activaran cúando apretemos los jButton indicados.

http://www.megaupload.com/?d=FWXEYOYF

Note: Recuerden que sobre este proyecto agregaremos la conexión a base de datos con mySQL

Hasta la próxima y recuerden comentar o preguntar por dudas.

Creación de interfaz gráfica con Java usando SWING

Paso 1: Creación de una interfaz usando JPanel

Para este ejemplo usaremos el ide NetBeans. Yo estoy usando la versión 6.1, pero cualquier versión sirve, sólo que cambian algunos detalles de menor importancia.

Una vez que tengamos creado nuestro proyecto agregamos un nuevo formulario JPanel haciendo click con el boton derecho en el paquete del proyecto donde queremos crearlo, luego en nuevo y despues en JPanel como se muestra en la siguiente figura:

A continuación escribimos el nombre de nuestro formulario en la ventana que aparcerá y aceptamos.

Luego nos debería aparecer el formulario en blanco en nuestro ide como se muestra en la imágen:

En este punto tenemos la libertad de diseñar nuestro formulario como lo queramos simplemente arrastrando los componentes de la pantalla de la derecha al formulario. Si en cualquier punto desean ver el diseño final sin tener que ejecutarlo solo hagan click en el boton "Diseño Previo" que esta arriba del formulario.

Como en el futuro usaré esta misma interfaz para explicar como se conecta a una base de datos mySQL usaremos el siguiente esquema:

No se preocupen por las etiquetas de los componentes ya que estan pueden cambiarse en el futuro en el código fuente del programa, aunque estas pueden modificarse dando dos click lentos sobre el componente.

1. Los jButtons del 2 al 5 corresponden en orden a:

• Nuevo
• Modificar
• Guardar
• Eliminar

2. Los jButton 1, 6 y 7 corresponden en orden a:

• Listar Datos
• Salir
• Buscar

3. Los jLabel del 1 al 8 corresponden en orden a (Según el esquema de la base de datos a utilizar en el futuro):

• ID
• Precio
• Descrición
• Número Bodega
• Stock por compra --> La cantidad de este producto que se compra cada vez
• Stock actual
• Stock crítico --> Cuando el Stock actual llega al indicado por el crítico se realiza una compra
• Buscar

(No se preocupen por la lógica de la base de datos aún, esto lo explicaré más adelante).

4. Todos los jTextField tienen etiquetas en blanco.

Ustedes pueden ordenar su interfaz como prefieran pero este es el formato que yo utilizé.


Paso 2: Incrustación de código útil sobre una clase

Para el siguiente paso debemos añadir al paquete de nuestro proyecto una nueva clase de la misma forma como añadimos un JPanel en el Paso 1 pero ahora seleccionamos "Java Class" o "Clase Java".

Una vez que tenemos añadida nuestra clase al proyecto lo primero que tenemos que hacer es extender la clase a JFrame usando la sentencia "extends JFrame" junto al nombre de la clase en la zona de declaración de clase. (Asegurence que el ide haya importado javax.swing.JFrame; - si no lo hizo haganlo manualmente usando "import javax.swing.JFrame;" antes de la zona de declaración de clase).

Ahora nos vamos al código del JPanel haciendo click en el botón "Diseño" ubicado sobre el formulario.

Ahora lo que debemos hacer es copiar el codigo de inicializacion de los componentes de la interfaz (jLabel, jTextField y jButton con sus posiciones y etiquetas). Para esto debemos buscar el método initComponents(). Usualmente este método no se ve pero para que podamos usarlo debemos hacer click en lo que se indica en la siguiente imágen:

Una vez que lo hacemos aparecerá el método initComponents(). Posterior a eso debemos seleccionar el método completo y copiarlo a la clase que creamos bajo el metodo constructor de la misma. Este es el metodo constructor (uso el nombre IDEejemplo como nombre de clase):

public IDEejemplo()
{

}

Cuando hayamos hecho eso debemos hacer lo mismo con las variables. Estas se encuantran bajo la el método initComponents() mostrado en la imágen anterior. Debemos copiar todas las variables a la clase en la parte de declaración de variables sobre el método constructor vacío.
De esta forma nos quedaría así:

public class nombreDeTuClase {
Declaración de variables;

Método constructor vacío
{

}

Método initComponents
{

}

}


Una vez que esto esta listo, en el constructor vacío debemos añadir una llamada al método initComponents() usando la sentencia "initComponents();". De esta forma al crear una nueva instancia del constructor el método initComponents() cargará todos los componentes con las etiquetas y las posiciones establecidas en el JPanel.

public Login()
{
initComponents();

}

Pero si sólo hacemos esto el formulario nunca será visible. Para esto debemos añadir en el constructor la sentencia: "this.setVisible(true);". Con esto estamos diciendo que el formulario se haga visible en el mismo momento que creamos una nueva instancia del método constructor (Ej: Formulario form = new Formulario(); --> Al hacer esto el constructor hace visible inmediatamente la ventana).

Ahora en el método initComponents() debemos añadir antes de la última llave de cierre la sentencia "pack();". Con esto indicamos que empaquetamos todos los componentes en el formulario para que se puedan ver.

Además de esto debemos buscar el siguiente código en el método initComponents():

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(this);
this.setLayout(layout);

Una vez que lo tengamos reemplazamos ambos this por la sentencia getContentPane(). Con esto estamos pidiendo el Panel del contenedor actual para insertarle los componentes.

Si cuando crearon la interfaz no modificaron las etiquetas de los componentes ahora es el momento de hacerlo. En el metodo initComponents() deben modificar las sentencias .setText("etiqueta"); por las que quieran. Por ejemplo jLabel1.setText("jLabel1"); la modificamos por jLabel1.setText("ID");. Hacemos esto con todos los componentes.

Ahora sólo falta ejecutarlo y ver el resultado de la interfaz. Para eso debemos crear la clase main() o sólo añadir el método main() a nuestra clase:

public static void main(String args[]){
IDEejemplo objeto = new IDEejemplo();

}

Este codigo puede ir en la misma clase o en una clase externa.

Nota: Para ejecutar asegurense de tener el proyecto como principal ya que si no lo tienen, el ide puede lanzar un error con el contenedor de la interfaz)

Con este código ya pueden diseñar sus propias interfaces gráficas usando la misma lógica.

Ahora que ya les funcionó vayanse a descansar por que probablemente deben estar aburridos con tando initComponent y código java. Para la siguiene guía explicaré como añadir acciones a los jButton usando el método actionListener();

Código fuente

Les dejo el código fuente del programa pero les RECOMIENDO QUE LO HAGAN USTEDES ya que se aprende más que copiando y pegando el código:

http://www.megaupload.com/?d=CVKNCZIP




Hasta la próxima y no olviden comentar, pregunta por dudas o aconsejar para una futura guía.