miércoles, 25 de junio de 2014

Ingresar datos en una tabla dinamica - Java



En este articulo vamos a hacer una tabla en java que permite ingresar  y borrar datos dinamicamente.


Para ello se crea un archivo JFrame llamado principal el cual contendrá la tabla:

Se agrega un campo para ingresar la información a la tabla, un botón para borrar los datos y la tabla donde estos serán desplegados:



En el código del archivo JFrame se crea una instancia de la clase DefaultTableModel la cual  brindará la dinamicidad de la tabla principal:


Se le asigna el titulo (entrada) a la columna que tendrá la tabla y se le da número de filas que contendrá cuando el programa se ejecute, en este caso se iniciará en cero (linea 23).


Se le asigna un evento a la caja de texto llamado ActionPerformed que permitirá ingresar los datos con un Enter:



Se ingresa el código en el evento que permitirá ingresar los datos a la tabla:


Se va a las propiedades de la tabla, se ingresa al item table model o modelo de la tabla y se digita el nombre de la instancia de la clase DefaultTableModel (dtm) en la opción custom code o código personalizado en español:


 Se agrega el código al botón para borrar los campos de la tabla:


Se corre el programa y se ingresan algunos datos a la tabla:


Se muestra un mensaje si se pretende ingresar una cadena vacia:


Y se borran los datos presionando el botón Borrar filas:


jueves, 19 de junio de 2014

Ingresar y obtener información de base de datos con php a través de Ajax




En este blog vamos a aprender a ingresar y obtener información de una base de datos usando Ajax.


Creamos una carpeta en el servidor en la cual alojaremos las páginas con las que vamos a trabajar, luego creamos la página principal llamada index.html, en ésta crearemos un formulario para ingresar los datos a la base de datos, y también un botón para desplegarlos.

  



Se crean archivos .php para abrir y cerrar la conexión a la base de datos.


Para abrir la conexión. 


Nombre de archivo: Conexion.php 

Para cerrar la conexión.



Nombre de archivo: cerrarConexion.php


 Se crea un archivo .js para enviar la información del usuario a la base de datos, y en él incluimos la función que enviará los datos con ajax.

Se le asigna un evento al formulario el cual ejecuta el método preventDefault() que evita que éste se redireccione cuando envíe los datos (Linea 18).  






Se crea el archivo que recibirá los datos enviados por ajax para ser agregados en la base de datos.



Nombre de archivo: setUsuario.php


Se crea el archivo que organiza la información para ser desplegada en una tabla.


Nombre de archivo: getUsuario.php


Para obtener la información de la base de datos creamos una función en el mismo archivo .js que obtendrá la información con ajax.



En la página index.html se agregan algunos estilos, las librerías para tener acceso a ajax y jquery, también el acceso al archivo .js donde están las funciones ajax setUsuario y usuario que se han creado (Lineas 5-7):



Se llama la función setUsuario que envía los datos a la base de datos (Linea 13).

Se agrega el evento onclick al botón pasandole como parámetro la función usuarios que muestra los usuarios (linea 22) .

 Ingresando los datos de usuarios (nombre,apellido,teléfono,email) a la base de datos.



Otro usuario



y por ultimo se verifica que los datos fueron ingresados correctamente en la base de datos.





Mostrando los datos a través del botón Mostrar usuarios







lunes, 16 de junio de 2014

Conexion a Base de Datos con Netbeans y XAMPP (Linux)




En este articulo vamos  a conectarnos a una base de datos en MYSQL a través de Netbeans junto con XAMPP como servidor base, y a ingresar información en una tabla de prueba, el OS manejado para el desarrollo de este articulo es Ubuntu GNU/Linux 14.04 LTS.

Empecemos...

Primero que todo necesitamos crear una base de datos y luego crear una tabla para almacenar nuestros datos. Para realizar esto usaremos un servidor independiente el cual contiene como nucleo de base de datos a MYSQL, un servidor web Apache, y los interpretes PHP y Perl (XAMPP).


Paso 1: Primero iniciamos el servidor Apache junto con Mysql desde consola de la siguiente manera:

Ingresamos como super usuario con el comando  sudo su, a continuación pedira la contraseña de super usuario la cual debemos digitar.





Luego se ejecuta el siguiente comando cd /opt/lampp, con el cual estamos accediendo a la carpeta donde esta instalado XAMPP por defecto, para poder iniciar el servidor.






Si es primera vez que se instala XAMPP, vemos los archivos que contiene la carpeta con el comando ls antes de iniciar los servicios, y verificamos los permisos que tiene el archivo ejecutable xampp  con el comando ls -l xampp. Si el archivo aparece con todos los permisos aparecerá resaltado de color verde (xampp), en caso de que no sea asi se le asignan todos los permisos con el comando chmod 777 xampp, una vez hecho esto iniciamos el servidor con el comando ./xampp start.



Y si todo va bien deben aparecer  3 mensajes de confirmación (OK) y ya tendremos el servidor corriendo junto con la base de datos.

Paso 2: creacion de base de datos en phpmyadmin


Ahora vamos a phpmyadmin para crear la base de datos que esta ubicada en la siguiente dirección  http://localhost/phpmyadmin. Cuando abra la anterior dirección debe aparecer la siguiente interfaz de inicio.




Para crear la base de datos damos click en Databases y luego introducimos el nombre de la base de datos que se llamará dbprueba y le damos una collation de utf8_general_ci y luego damos click en "crear" como lo muestra la imagen.






Después de creada seleccionamos la base de datos que aparecerá en la parte izquierda con las otras bases de datos, ahora creamos una tabla llamada usuario con 5 columnas y damos click en Go para continuar.





Ahora le damos nombres a las columnas y especificamos los tipos de datos de la siguiente manera:



Por ultimo damos click en guardar.


Paso 3: conexión a la base de datos desde netbeans.

Abrimos netbeans y creamos un proyecto de escritorio llamado DBPrueba,
luego creamos una clase llamada Conexion. 


 


Ahora creamos la conexión a la base de datos de la siguiente manera:

debemos tener en cuenta información básica como:

nombre de la base de datos:                      dbprueba
nombre de usuario de la base de datos:    root 
contraseña de usuario base de datos:       root 
driver para conexion con la DB mysql:     mysql-connector-java-5.1.18-bin.jar

que para éste ejemplo se manejarán los datos ya aportados.

Para agregar el driver en el proyecto, dentro de éste hay una carpeta que se llama libreria en la cual este debe estar ubicado, para eso se da click derecho en la carpeta y luego en agregar libreria, aparece una ventana que permite agregar archivos, despues se busca el directorio donde descargaron el driver y lo agregan. El driver debe quedar ubicado de la siguiente forma:




luego de tener los datos anteriores procedemos a realizar la conexión con la base de datos de la siguiente manera:




Con el código anterior se realiza la conexión a la base de  datos. Si todo está bien cuando se corra el programa debe mostrar el siguiente mensaje.





Si no sale el mensaje anterior entonces puede que sea por alguno de los errores típicos, como:
  1. El driver no es el correcto para la conexion.
  2. El path para ubicar la base de datos no es el adecuado.
  3. El nombre de la base de datos o las credenciales de usuario no son correctos.
  4. MYSQL no se encuentra iniciado.
  5. El puerto de conexion a mysql (default: 3306) no se encuentra abierto.

Una vez todo esté correcto y realizada la conexión con la base de datos procedemos a llenar nuestra tabla usuario con algo de información, para ésto crearemos una nueva clase en nuestro proyecto llamada Consultas.



 



En el interior de la clase Consultas crearemos una función llamada setUsuario desde la cual ingresaremos los datos en la base de datos. Asi:





Los únicos parametros que lleva la función son: nombre, apellido, telefono y edad, los cuales son los campos a llenar en la base de datos, el ID del usuario no es necesario que sea ingresado manualmente ya que éste se genera automaticamente por la propiedad de autoincremento que fue dada cuando se estaba creando la tabla usuario al inicio del articulo, por lo cual se le asigna null al primer argumento que se va a ingresar a la tabla (linea 26).

una vez hecha la función ya podemos ingresar información a la base de datos, creando un metodo main.


 ingresando dos usuarios.

Por ultimo verificamos en el gestor de base de datos phpmyadmin y vemos que los usuarios fueron ingresados correctamente.





Si terminamos todo y queremos  bajar el servidor Apache y Mysql, volvemos a la consola y escribimos el siguiente comando ./xampp stop y listo.