Web Services, un ejemplo práctico VB .Net

Características de los Web Services

¿Alguna vez pensó de que forma poder integrar aplicaciones creadas en lenguajes y plataformas diferentes a través de Internet o mismo en su propia Intranet basándose en estándares? Bien, si lo pensó o si no lo hizo, la
respuesta más apropiada a este paradigma son los llamados Web Services.

Esto quiere decir que un desarrollador puede incluir en sus sitios o soluciones sentencias, instrucciones que consuman Web Services de terceros o propios como por ejemplo aquellos que proporcionan los datos meteorológicos para una localidad determinada, o las cotizaciones de determinadas monedas, o la cartelera de películas, o calendarios y agenda de algún especialista médico, etc. Esto ya comienza a gustarme.

Ahora pensando un poco mas en forma comercial, ¿que pasaría si por ejemplo yo estuviera trabajando en mi procesador de texto en un idioma para el cual no tengo un corrector ortográfico ni sintáctico instalado (quizás no exista para instalar), pero deseo realizar mi revisión del documento a toda costa? Bien, perfectamente podría haber una opción en el menú de dicho procesador que de alguna forma ubique un Web Service en Internet que brinde esta funcionalidad y lo mas interesante aún para quien lo haya desarrollado es que puede solicitar al usuario que se subscriba para su uso. Como ven, todos ganan en esta transacción.

El ejemplo anterior esta mostrando una realidad de la que no podemos estar ajenos. Es un replanteo de la estrategia utilizada por los desarrolladores que ahora al realizar una aplicación no deben pensar únicamente en el lugar físico donde la misma va a ejecutarse sino en que esa aplicación deberá estar interconectada con otras computadoras corriendo otras aplicaciones quizás en otras plataformas y lenguajes pero usando protocolos y estándares universales.
El intercambio se intensificará muchísimo mas y quizás existan por ejemplo “proveedores de dominios de datos” como ser los países, de forma tal que la aplicación que yo realice en lugar de crear toda la lógica para manejar las tablas y el cargado de los datos para el concepto PAIS se limite a consumir un Web Service que me torne esta información de algún lado en Internet. Imagino una reutilización aun mayor de funcionalidades y una colaboración e intercambio de lógica a nivel mundial. Quizás sea muy ambicioso en este planteo.

Ahora pasando al terreno más técnico y práctico de este artículo hay algunas consideraciones y conceptos para comenzar a entender este tema son las siguientes:

• Un Web Service se puede registrar para poder dejarlo a disposición para otros usuarios y para que los mismos puedan localizarlos. Un mecanismo para registrar estos servicios es por medio de UDDI sigla que obedece a Universal Description, Discovery and Integration, un “repositorio de Web Services” (http://www.uddi.org/). Para registrar un servicio tendrá que tener en cuenta suministrar la información de su empresa, en que categorías ubicaría su servicio y la interfaz a utilizar para consumir dicho servicio.
  
• El mecanismo utilizado por un Web Service para especificar de qué forma hay que proporcionarle los datos, de forma tal que cualquiera pueda interaccionar con el mismo, es por medio de lenguaje XML. Esta información se almacena en un archivo llamado WSDL (Web Services Description Language).
  Este archivo contiene un documento XML junto con la descripción de ciertos mensajes SOAP y como deben intercambiarse, así como también donde esta el recurso del servicio y con que protocolo debe dialogar quien lo consume.
  
• El protocolo de comunicación utilizado es el SOAP generalmente, el cual es relativamente sencillo de utilizar.
  
• Los Web Services utilizan protocolos comúnmente conocidos y difundidos como el formato XML, TCP/IP como protocolo de transporte y HTTP como protocolo de transferencia de hipertexto.

¿Qué es el SOAP?

Es un protocolo que define el formato XML para los mensajes de intercambio en el uso de un Web Service. Para aquellos programadores que solían utilizar llamadas del tipo RPC, SOAP también las soporta. Adicionalmente es posible mediante SOAP definir un mensaje HTTP y este punto es de especial interés puesto que el protocolo imprescindible para Internet es HTTP.

Recomendación: Para comenzar a acercarse a entender este tema es recomendable el uso del Microsoft SOAP Toolkit Version 3.0 (pasaje de COM a SOAP).

Un ejemplo práctico

A partir de ahora describiré en unos pocos pasos un ejemplo práctico y sencillo de creación de un Web Service y una muestra de cómo consumirlo desde una aplicación cliente en este caso una simple planilla de Excel.

Paso 1: Lo primero será crear un proyecto Visual Basic del tipo “ASP.NET Web Service” al que llamaremos “DameCotizacion”.

Paso 2: Al archivo Service1.asmx que se crea una vez generado el proyecto lo renombramos a DameCotizacion.asmx y lo establecemos como “Pagina de Inicio del proyecto”.

Paso 3: Ingresando a la ventana de código del archivo DameCotizacion.asmx en la zona del <webMethod()> agregamos el código siguiente:

<WebMethod()>
 Public Function GetCotizacion(ByVal strmoneda As String) As String
      'Objetivo: Devolver cotizacion para una moneda en pesos uruguayos
      '        Obviamente esto es un ejemplo por lo que esta info que 
      '        se presenta estatica se tomaria de una base de datos
      'Acepta: strmoneda - un id para la moneda de dos caracteres.
      'Devuelve: cotizacion de dicha moneda en pesos uruguayos
 
      Select Case UCase(Trim(strmoneda))
         Case "DO"
            'dolar
            Return "30"
         Case "RE"
            'real
            Return "9.9"
         Case "EU"
            'Euro
            Return "33"
      End Select
   End Function

Para verificar el correcto funcionamiento de esta aplicación, vamos a ejecutarlo. Para ello apretamos F5 y el resultado esperado se verá en el Internet Explorer. Como se puede ver se ofrece el método GetCotizacion() definido en el código anterior.

Si clickeamos sobre dicho método podremos ver la especificación del mismo y la definición del tipo de intercambio de mensajes.

Paso 4: Podemos comprobar el funcionamiento colocando el valor “EU” (código que establecimos para el euro) y clickeando en “Invoke”. El valor esperado por el método es del tipo string y deberá ser uno de los tipo de monedas (“DO”, “RE” o “EU”) definido en nuestro método.

El resultado debería ser un mensaje en XML como se muestra a continuación, mostrando el valor definido para la moneda de código “EU”

Pues bien pongamos a trabajar nuestro Web Service en una aplicación práctica. Supongamos que tenemos una planilla Excel donde tenemos artículos cuyos precios están en su moneda original y queremos que aparezca su valor en pesos uruguayos. Para esto consumiremos el Web Service creado en los pasos anteriores (DameCotizacion) que proporcionando el código de la moneda me devuelve la cotización correspondiente.

Nota: Para este ejemplo debemos tener instalado el paquete Microsoft Web Services Toolkit.

Paso 5: Crearemos una planilla Excel como se muestra en la figura siguiente, donde agregaremos un botón cuyo nombre y Caption será "Cotizar".

Paso 6: En la celda E2 la fórmula para calcular el valor del articulo en pesos uruguayos es =D2*C2. La columna Cotización será alimentada una vez que se oprima el botón Cotizar el cual disparará un evento que consumirá el Web Service DameCotizacion y retornará en cada celda Cotización el valor correspondiente.

Paso 7: Haciendo doble clic sobre el botón Cotizar ingresaremos a la ventana de código Visual Basic posicionados en el evento click de dicho botón.

Previo a esto relacionaremos nuestro Web Service a nuestra planilla mediante el uso de la herramienta Microsoft Web Services Toolkit.

Paso 8: Para ello desde el menú Herramientas de la ventana de código Visual Basic seleccionamos la opción “Web Service References …”

En dicha ventana seleccionamos “Web Service URL” y colocamos http://localhost/DameCotizacion/DameCotizacion.asmx en el cuadro de texto “URL” y apretamos el botón “Search”. Esta acción deberá traer como resultado nuestro Web Service DameCotizacion en la sección “Search Results”, el cual seleccionaremos, donde podrá verse que esta disponible nuestro método GetCotizacion(). Clickearemos “Add”.

Paso 9: El código del evento Cotizar_Click()es el siguiente:

Private Sub Cotizar_Click()
   Dim clsCotizacion As clsws_DameCotizacion
   Dim monedas As Range
   Dim moneda As Range
   Dim cotizacion As String
   
   Set clsCotizacion = New clsws_DameCotizacion
   Set monedas = Range(Range("b2"), Range("b65536").End(xlUp))
   Application.ActiveSheet.Range("b2").Activate
   
   For Each moneda In monedas
      
      cotizacion = clsCotizacion.wsm_GetCotizacion(moneda)
    
      moneda.Offset(0, 1).Value = Val(cotizacion)
      
   Next moneda
End Sub

Ok, si todo sale como es de esperar el resultado de oprimir el botón Cotizar debiera ser el que se muestra a continuación, Eureka!!!!

Como verán este es un simple ejemplo que muestra como consumir un Web Service desde una aplicación cliente en este caso Excel que ilustra dos puntos interesantes: la facilidad de implementación del mismo y la potencia que nos brinda. Basta conocer un proveedor de un servicio de cotizaciones de moneda para mantener nuestra planilla al día con las últimas cotizaciones del mercado bursátil.

Para aquellos desarrolladores que ya hacían uso de incluir referencia a objetos COM en sus herramientas quizás esto no sea muy novedoso pero en el caso de los objetos COM los mismos debían estar físicamente en la computadora cliente. En el caso de los Web Services estamos hablando de compartir recursos que habiten en la Intranet corporativa o mas aún, en Internet y en sitios bien dispersos en el mundo.

Para los que quieran hacer números y le quieran sacar un beneficio económico, ¿qué ocurriría si yo fuera un proveedor de Web Services y solicite la subscripción para el uso de los mismos a mis clientes a lo largo y ancho del planeta? ¿Interesante, no?

Mas aun, no necesariamente el escenario se limita a una aplicación cliente consumiendo un Web Service sino que a su vez un Web Service podría consumir otro Web Service para poder armar la información de respuesta a retornar al cliente. No hace falta Imaginar un escenario de este tipo pues esto ya es posible.

Hacia donde vamos

Si bien se ha avanzado mucho al respecto y hay infinidad de desarrolladores trabajando en este tema hay aspectos a mejorar para catapultar aun más esta funcionalidad. Algunas características a mejorar pasan por temas relacionados a la seguridad (autorización, autenticación y cifrado) en el intercambio de mensajes, manejar el modelo transaccional y poder confirmar la entrega efectiva de los mensajes que se intercambian a través de los Web Services. Adicionalmente se continúa trabajando en la estandarización de los principales actores como ser el WDSL y SOAP. Muchos fabricantes seguirán contribuyendo elaborando herramientas para facilitar el manejo y elaboración de Web Services como en el caso de Microsoft y su Web Services Toolkit para el Office 2003 que actualmente esta en su versión 2.01.

Otros elementos claves que no entran en análisis en este articulo pero igual los menciono por si es de interés del lector ahondar en los mismos, son los relacionados a las especificaciones de WS-Security, WS-Routing y DIME para lo cual pueden encontrar mas información en la herramienta Microsoft WSDK Technology Preview o Internet.

Sistemas de Usuarios en PHP y MYSQL

1.- Creando la tabla en MySQL

Bien, necesitamos una tabla con los datos de nuestros usuarios, así que la vamos a crear. Ésta tabla contiene los siguientes campos:

Código

FIELD     | Type        | KEY | Extra        
----------+-------------+-----+----------------
 id        | tinyint(4)  | PRI | AUTO_INCREMENT 
 nombre    | text        |     |                
 apellidos | text        |     |                
 login     | varchar(40) |     |                
 password  | varchar(20) |     |                
 email     | text        |     |                 
 

Bien, pues la sentencia SQL que utilizaremos será algo así:

Código

CREATE TABLE usuarios (
id TINYINT(4) AUTO_INCREMENT,
nombre TEXT,
apellidos TEXT,
login VARCHAR(40),
password VARCHAR(20),
email TEXT,
UNIQUE (id) )

2.-Creando un script para introducir usuarios
Necesitamos el formulario, con los campos siguientes:

Código

<form action="crea_user.php" method="POST">
Login: <input type="text" name="login"><br>
Password: <input type="password" name="pass1"><br>
Repite Password: <input type="password" name="pass2"><br>
Nombre: <input type="text" name="nombre"><br>
Apellidos: <input type="text" name="apellidos"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit" name="Crear">
</form>

Y también el script crea_user.php, que sería algo así:
crea_user.php

Código

<?
$server="localhost"; /* Nuestro server mysql */
$database="bd"; /* Nuestra base de datos */
$dbpass="password"; /*Nuestro password mysql */
$dbuser="user"; /* Nuestro user mysql */
/* Primero comprovamos que no existe un usuario con el mismo login ya registrado */
 
$query="SELECT * FROM usuarios WHERE login='$login'";
$link=mysql_connect($server,$dbuser,$dbpass);
$result=mysql_db_query($database,$query,$link);
if(mysql_num_rows($result)){
echo "El usuario ya existe en la BD";
} else {
mysql_free_result($result);
/* Ahora comprovamos que los dos pass coinciden */
if($pass1!=$pass2) {
echo "Los passwords deben coincidir<br>";
echo 'Clica <a href="form.php">aquí</a> para volver al formulario';
} else {
$pass1=crypt($pass2, "semilla"); 
 
/* Encripatmos el password, con la clave "semilla" que debeis sustituirpor la que mas os guste. Hay otros metodos de encriptacion, mirad en php.net si quereis conocerlos. */
 
$query="INSERT INTO usuarios (login, nombre, apellidos, password, email) VALUES ('$login','$nombre','$apellidos','$pass1','$email')";
 
$result=mysql_db_query($database,$query,$link);
if(mysql_affected_rows($link)){
echo "Usuario introducido correctamente";
} else {
echo "Error introduciendo el usuario";
} /* Cierre del else */
} /* Cierre del else que corresponde a if(mysql_affected_rows.....) */
} /* Cierre del else que corresponde a if(mysql_num_rows...) */
?>

Pues como veis, este script es muy simple. Si no lo entendeis, es porque no conoceis PHP o su método de acceso a bases de datos mysql. Leeros el prólogo antes de continuar ;-) Aquí deberíamos comprobar que quien está creando los usuarios está identificado (en caso de que el registro no sea público).

3.- Creando la página y scripts de login

Ésta parte consiste en dos páginas, la de login, y el script que comprueba los datos. Aquí va la página de login:

login.php

Código

<?
session_start();
if(isset($SESSION)){
header("location: user.php"); /* Si ha iniciado la sesion, vamos a user.php */
} else { 
/* Cerramos la parte de codigo PHP porque vamos a escribir bastante HTML y nos será mas cómodo así que metiendo echo's */
?>
<html><head><title>Necesita identificación! </title></head>
<body>
<center><h1>Identificate! :D </h1></center>
<form action="comprueba.php" method="POST">
Login: <input type="text" name="login"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Entrar">
</form>
</body></html>
<?
} /* Y cerramos el else */ 
?>
 

Y el que sigue es el script de comprobación, que comprobará los datos y si son correctos nos manda a user.php tras iniciar la sesión. Si no, nos dará un mensajito avisandonos de que no hemos dado el login correcto. Primero os explicaré las funciones que usaremos.

session_start() se debe usar al principio de cada script en el que vayamos a hacer uso de variables de sesión.

session_register("nombre_variable") se usará para crear una variable de sesión, que luego podremos usar con

el nombre $nombre_variable. Lo que haremos aquí será primero inicializar las variables como un array, y luego registrarlas en la sesión.

Ahora el código:

comprueba.php

Código

<?
session_start();
$server="localhost"; /* Nuestro server mysql */
$database="bd"; /* Nuestra base de datos */
$dbpass="password"; /*Nuestro password mysql */
$dbuser="user"; /* Nuestro user mysql */
$query="SELECT * FROM usuarios WHERE login='$login'";
$link=mysql_connect($server,$dbuser,$dbpass);
$result=mysql_db_query($database,$query,$link);
if(mysql_num_rows($result)==0){
echo "No existe el login introducido";
} else {
$array=mysql_fetch_array($result);
if($array["password"]==crypt($pass,"semilla") ){
/* Comprobamos que el password encriptado en la BD coincide con el password que nos han dado al encriptarlo. Recuerda usar la misma semilla para encriptar los dos passwords. */
$SESSION["login"]=$login;
$SESSION["nombre"]=$array["nombre"];
$SESSION["apellidos"]=$array["apellidos"];
session_register("SESSION");
header("location: user.php");
 
} else {
echo "Password incorrecto!";
} /* Cerramos este ultimo else */
} /* Cerramos el else que corresponde a la comprobación de que el login existe */
 
?>

4.- Creación de la página de los usuarios

Bien, ésta página la voy a dejar bastante vacía, solo va a comprobar si el usuario ya se ha identificado. Si es así, le daremos la bienvenida simplemente, y pondremos el botón para logout. Si no, le mandaremos a login.php. Ahí va el código:

user.php

Código

<?
session_start();
if(!isset($SESSION)){
header("location: login.php");
} else {
echo "<html><body>";
echo "Bienvenido ";
echo $SESSION["nombre"];
echo $SESSION["apellidos"]." ";
echo "<br>Has entrado con el nombre de usuario ";
echo $SESSION["login"];
echo "<br>Para cerrar la sesión, pulsa: <a href='logout.php'>logout</a>";
echo "</body></html>";
}
?>
 

5.- Cerrando la sesión

En el script logout.php simplemente cerraremos la sesión y mostraremos un mensaje indicando que ha

sido cerrada correctamente. Antes de ésto, comprovaremos que ha sido iniciada la sesión. Si no lo ha sido, mandaremos al usuario a login.php. Aquí usaremos dos funciones nuevas:

session_unset() destruye todas las variables de sesión que hemos creado. Debemos llamarla antes de llamar a

session_destroy.

session_destroy() destruye la sesión en sí, pero no destruye las variables.

Ahora sí, aquí os dejo el código:

Código

<?
session_start();
if(!isset($SESSION)){
header("location: login.php");
} else {
session_unset();
session_destroy();
echo "Las variables de sesión han sido eliminadas, y la sesión se ha dado por finalizada correctamente ;-)";
}
?>

Simple verdad? Pues ya tenemos nuestro sistema de usuarios completo!

ALERTA!: En éstos scripts hay algunas cosillas que tendremos que mejorar.

Por ejemplo, hay que mejorar el manejo de errores de la base de datos. Además, deberíamos incluir redirecciones hacia login.php tras mostrar los mensajes de logout, de error al identificarse (tanto de login incorrecto como de password incorrecto), que lo podríamos hacer con un refresh simple en HTML.

Además de todo ésto, tendríamos que crear un filtro para los datos introducidos en el login para evitar la inyección SQL en nuestras páginas. Para el password no sería necesario, puesto que hemos encriptado la entrada del usuario antes de pasarsela al MySQL, pero tampoco pasaría nada si, una vez implementado el filtro, se lo pasamos al password introducido por el usuario.

Inserción de Datos con Ajax y POO con PHP

Tenemos la tabla Empleado. También disponemos de la Clase DBManager, esta Clase la vamos a usar
para verificar y realizar la conexión a la Base de Datos.

La Clase cEmpleado se encuentra en el archivo cEmpleado.php, a esta Clase vamos agregarle un método para que guarde un nuevo registro en la tabla Empleado. A este método lo llamaremos crear() el cual tendrá como parámetros de entrada los datos que se requiere del empleado: Nombre, Departamento, Sueldo. Hay que tener en cuenta que el campo idempleado incrementa automáticamente, por ello no lo incluimos dentro de los parámetros.

Veamos como quedaría este método en el archivo cEmpleado.php:

<?php 
 include_once("DBManager.php");
 
 //implementamos la clase empleado
 class cEmpleado{
 
  //constructor 
  function cEmpleado(){
  }
 
  // consulta los empledos de la BD
  function consultar(){
   //creamos el objeto $con a partir de la clase DBManager
   $con = new DBManager;
   //usamos el metodo conectar para realizar la conexion
   if($con->conectar()==true){
    $query = "select * from empleados order by nombres";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }
 
  //* inserta un nuevo empleado en la base de datos *//
  function crear($nom,$dep,$suel){
   $con = new DBManager;
   if($con->conectar()==true){
    $query = "INSERT INTO empleados (nombres, departamento, sueldo) 
    VALUES ('$nom','$dep',$suel)";
    $result = mysql_query($query);
    if (!$result)
     return false;
    else
     return true;
   }
  }
 
 }
?>

Ya tenemos la Clase cEmpleado con su nuevo método listo para ser usado en cualquier momento. Ahora continuando con el desarrollo vamos a listar todos los empleados de la tabla Empleados. A este archivo lo llamamos consulta.php y va usar las clase cEmpleado. Esta vez vamos a listar los resultados en una tabla HTML. Veamos:

<?php
 include_once("cEmpleado.php");
 
 //creamos el objeto $objempleados de la clase cEmpleado
 $objempleados=new cEmpleado;
 
 //la variable $lista consulta todos los empleados
 $lista= $objempleados->consultar();
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
 while($row = mysql_fetch_array($lista)){
  echo "<tr>";
  echo "<td>".$row['nombres']."</td>";
  echo "<td>".$row['departamento']."</td>";
  echo "<td>".$row['sueldo']."</td>";
  echo "</tr>";
 }
?>
</table>

Veamos ahora, el proceso de guardado o inserción de los datos en la tabla Empleado, vamos a llamar a este archivo registro.php y notemos que se crea un objeto de la clase cEmpleado y usamos el método crear() donde especificamos los parámetros requeridos. Al final hace un include al archivo consulta.php para listar los nuevos datos.

<?php
 include_once("cEmpleado.php");
 
 //variables POST
 $nom=$_POST['nombres'];
 $dep=$_POST['departamento'];
 $suel=$_POST['sueldo'];
 sleep(2);
 
 //creamos el objeto $objempleados
 //y usamos su método crear
 $objempleados=new cEmpleado;
 if ($objempleados->crear($nom,$dep,$suel)==true){
  echo "Registro grabado correctamente";
 }else{
  echo "Error de grabacion";
 }
 include('consulta.php');
?>

Ahora las funciones en JavaScript, creamos 3 funciones: 1) para crear el objeto XMLHttpRequest, 2) para enviar y recibir los datos del empleado para que sean guardados en la tabla Empleado y 3) para limpiar las cajas de texto del formulario. El archivo ajax.js va así:

function objetoAjax(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}
 
function enviarDatosEmpleado(){
 //donde se mostrará lo resultados
 divResultado = document.getElementById('resultado');
 divResultado.innerHTML= '<img src="anim.gif">';
 
 //valores de las cajas de texto 
 nom=document.nuevo_empleado.nombres.value;
 dep=document.nuevo_empleado.departamento.value;
 suel=document.nuevo_empleado.sueldo.value;
 
 //instanciamos el objetoAjax
 ajax=objetoAjax();
 
 //uso del medoto POST 
 //archivo que realizará la operacion
 //registro.php
 ajax.open("POST", "registro.php",true);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divResultado.innerHTML = ajax.responseText
 
   //llamar a funcion para limpiar los inputs
   LimpiarCampos();
  }
 }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
 //enviando los valores
 ajax.send("nombres="+nom+"&departamento="+dep+"&sueldo="+suel)
}
 
//limpiando las cajas de texto
function LimpiarCampos(){
 document.nuevo_empleado.nombres.value="";
 document.nuevo_empleado.departamento.value="";
 document.nuevo_empleado.sueldo.value="";
 document.nuevo_empleado.nombres.focus();
}

Finalmente, el archivo index.php que contendrá un formulario con caja de texto para escribir los datos del empleado y una lista de los empleados registrado. Una vez que pulsamos el botón Grabar, los datos se guardarán en la tabla Empleado y la lista se actualizará automaticamente. Dentro de las etiquetas <head></head> hacemos referencia al archivo ajax.js, en el atributo onsubmit de la etiqueta <form> especificamos la función enviarDatosEmpleado() y en la dentro de las etiquetas <div id="resultado"></div> en la parte final hacemos un include al archivo consulta.php. El archivo quedaría así:

<html>
<head>
<title>Registro con AJAX</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="nuevo_empleado" action="" onSubmit="enviarDatosEmpleado(); return false">
<h2>Nuevo empleado</h2>
<p>Nombres 
<label>
<input name="nombres" type="text" />
</label>
</p>
<p>Departamento 
<label>
<select name="departamento">
<option value="Informatica">Informatica</option>
<option value="Contabilidad">Contabilidad</option>
<option value="Administracion">Administracion</option>
<option value="Logistica">Logistica</option>
</select>
</label>
</p>
<p>Sueldo <strong>S/.</strong>
<label>
<input name="sueldo" type="text" />
</label>
</p>
<p>
<label>
<input type="submit" name="Submit" value="Grabar" />
</label>
</p>
</form>
<div id="resultado"><?php include('consulta.php');?></div>
</body>
</html>

Se habrá dado cuenta que hemos incluido un método a la clase cEmpleado y ello sin alterar el método anterior. Incluso hemos usado el método consultar() que ya estaba allí. Esto nos hace ver que si programamos Orientando a Objetos, nuestro código se hace flexible y reutilizable.

Adicionar Filas a Tablas Dinamicamente mediante Ajax

Veamos como quedaría nuestra función PHP agregaFila()

function agregarFila($formulario){
    $respuesta = new xajaxResponse();
 extract($formulario);
 $id_campos = $cant_campos = $num_campos+1;
 $str_html_td1 = "$txtNombre" ;
    $str_html_td2 = "$txtEdad";
    $str_html_td3 = "$txtDireccion";
    $str_html_td4 = "$selSexo";
    $str_html_td5 = "$selEstCivil";
    $str_html_td6 = '<img src="images/delete.png" width="16" height="16" alt="Eliminar" 

onclick="if(confirm(\'Realmente desea eliminar este detalle?\')){xajax_eliminarFila('. $id_campos .', proyecto.cant_campos.value);}"/>';
 
 if($num_campos == 0){ // creamos un encabezado de lo contrario solo agragamos la fila
  $respuesta->addCreate("tbDetalle", "tr", "rowDetalle_0");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_01");    //creamos los campos
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_02");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_03");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_04");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_05");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_06");
 
        $respuesta->addAssign("tdDetalle_01", "innerHTML", "Nombre");   //asignamos el contenido
        $respuesta->addAssign("tdDetalle_02", "innerHTML", "Edad");
        $respuesta->addAssign("tdDetalle_03", "innerHTML", "Direccion");
        $respuesta->addAssign("tdDetalle_04", "innerHTML", "Sexo");
        $respuesta->addAssign("tdDetalle_05", "innerHTML", "Estado Civil");
        $respuesta->addAssign("tdDetalle_06", "innerHTML", "Eliminar");
 }
    $idRow = "rowDetalle_$id_campos";
    $idTd = "tdDetalle_$id_campos";
 $respuesta->addCreate("tbDetalle", "tr", $idRow);
    $respuesta->addCreate($idRow, "td", $idTd."1");     //creamos los campos
    $respuesta->addCreate($idRow, "td", $idTd."2");
    $respuesta->addCreate($idRow, "td", $idTd."3");
    $respuesta->addCreate($idRow, "td", $idTd."4");
    $respuesta->addCreate($idRow, "td", $idTd."5");
    $respuesta->addCreate($idRow, "td", $idTd."6");
/*
 *     Esta parte podria estar dentro de algun ciclo iterativo  */
 
    $respuesta->addAssign($idTd."1", "innerHTML", $str_html_td1);   //asignamos el contenido
    $respuesta->addAssign($idTd."2", "innerHTML", $str_html_td2);
    $respuesta->addAssign($idTd."3", "innerHTML", $str_html_td3);
    $respuesta->addAssign($idTd."4", "innerHTML", $str_html_td4);
    $respuesta->addAssign($idTd."5", "innerHTML", $str_html_td5);
    $respuesta->addAssign($idTd."6", "innerHTML", $str_html_td6);
 
/*  aumentamos el contador de campos  */
 
 $respuesta->addAssign("num_campos","value", $id_campos);
 $respuesta->addAssign("cant_campos" ,"value", $id_campos);
 return $respuesta;
}

El HTML para esta aplicacion:

<form name="proyecto" id="proyecto" action="" method="post">
<input type="hidden" id="num_campos" name="num_campos" value="0" />
<input type="hidden" id="cant_campos" name="cant_campos" value="0" />
<div id="cont" class="container">
<fieldset>
 <legend>El formulario</legend>
<div class="top">
 <label class="label" for="txtNombre">Nombre:</label>
<div class="div_texbox">
<input type="text" id="txtNombre" name="txtNombre" value="" class="textbox" /></div>
 
        <label class="label" for="txtEdad">Edad:</label>
<div class="div_texbox">
<input type="text" id="txtEdad" name="txtEdad" value="" class="textbox txtUser" /></div>
 
        <label class="label" for="txtDireccion">Direccion:</label>
<div class="div_texbox">
<input type="text" id="txtDireccion" name="txtDireccion" value="" class="textbox txtCmt" /></div>
 
        <label class="label" for="selSexo">Sexo:</label>
<div class="div_texbox">
<select id="selSexo" name="selSexo" class="textbox txtFec">
                <option value="-">Seleccione</option>
                <option value="Hombre">Hombre</option>
                <option value="Mujer">Mujer</option>
            </select>
</div>
 
        <label class="label" for="selEstCivil">Estado Civil:</label>
<div class="div_texbox">
<select id="selEstCivil" name="selEstCivil" class="textbox txtFec">
                <option value="-">Seleccione</option>
                <option value="Soltero">Soltero</option>
                <option value="Casado">Casado</option>
                <option value="Viudo">Viudo</option>
            </select>
</div>
</div>
 
</fieldset>
<div class="button_div">
<input type="reset" id="btnCancel" name="btnCancel" value="Cancelar" class="buttons_CANCEL" onclick="xajax_cancelar();" />
<input type="button" id="btnAgregar" name="btnAgregar" value="Agregar Persona" class="buttons_aplicar" onclick="xajax_agregarFila(xajax.getFormValues('proyecto'));" />
</div>
 
<fieldset class="fieldset">
    <legend class="legend">
        Detalle de Personas
    </legend>
<div class="clear"></div>
<div id="form3" class="form-horiz">
<table width="100%" id="tblDetalle" class="listado">
<tbody id="tbDetalle"></tbody>
</table>
</div>
 
</fieldset>
</div>
</form>

Y como sabroso entremes, le traemos… la función que elimina las filas
agregadas por la función anterior.

function eliminarFila($id_campo, $cant_campos){
 $respuesta = new xajaxResponse();
 $respuesta->addRemove("rowDetalle_$id_campo"); //borro el detalle que indica el parametro id_campo
 -- $cant_campos; //Resto uno al numero de campos y si es cero borro todo
 if($cant_campos == 0){
  $respuesta->addRemove("rowDetalle_0");
  $respuesta->addAssign("num_campos", "value", "0"); //dejo en cero la cantidad de campos para seguir agregando si asi lo desea el usuario
  $respuesta->addAssign("cant_campos", "value", "0");
 }
    $respuesta->addAssign("cant_campos", "value", $cant_campos);
 return $respuesta;
}

Importar datos de archivo CSV (Excel) a Mysql mediante PHP

<?php 
//require("config.php") se refiere al archivo de conexion a la BD
require("config.php"); 
$row = 0; 

$fp = fopen ("prueba.csv","r"); 
//el valor mil indica la cantidad de bytes del archivo

//si el archivo es un poco grande es mejor dejarlo en 0

//en algunos casos el ";" no es aceptado usa ","
while ($data = fgetcsv ($fp, 1000, ";")) 
{ 
$num = count ($data); 
print " <br>"; 
$row++; 
echo "$row- ".$data[0].$data[1].$data[2].$data[3].$data[4].$data[5]; 
$insertar="INSERT INTO tutabla () VALUES ('$data[0]','$data[5]')"; 
mysql_query($insertar); 
} 
fclose ($fp); 

?>

El e-commerce

La web es un espacio de comercialización cada vez más importante. Las empresas o comercios que abren sus puertas al público también abren una ventana en la gran nube para el e-commerce.

Actualmente existe mucho software que proporciona la facilidad de implementar una tienda virtual en la web por medio de servicios gratuitos como Oscommerce, Prestashop o Magento. Conozcámoslos.

Oscommerce, es una aplicación open source gratuita. Admite formas de pago como Ahthorize.net, tarjetas de crédito, pago contra reembolso, iPayment, cheque, transferencia bancaria, PayPal, 2CheckOut, SECPay, Visa, MasterCard, entre otros.

Aunque en su momento fue uno de los mejores gestores, hoy presenta algunas objeciones. Cuenta a su favor con que integra distintos idiomas, ofrece una gran cantidad de módulos desarrollados que economizan costos y su desarrollo es sencillo, incluso la instalación, no usa CSS.

Prestashop, también es un software gratuito y open source, pero que a diferencia del anterior cueynta con una importante comunidad de usuarios que crece a pasos agigantados.

Actualmente es uno de los preferidos de los preferidos de los desarrolladores porque ofrece una buena indexación, Ajax integrado, funciona con CSS.

Ofrece un panel de administración intuitivo que permite crear categorías, productos, fabricantes y controlar a los clientes. No por nada fue galardonada en el 2010 como la mejor aplicación para comercio electrónico.

Magento, este proyecto comenzó a funcionar en 2007 y ha logrado sumar desde entonces una muy buena reputación. También es open source y gratuito, se destaca porque se puede navegar de manera fácil, cuenta con un código simple, ofrece un muy buen posicionamiento en lis buscadores y un diseño de interfaz distinguido.

Aunque es uno de los más utilizados, su gestor de instalación es sumamente complejo respecto a los anteriores, como así también el uso del panel de control.

e-Voto, el diseño del nuevo universo electoral

El voto electrónico ha llegado a la sociedad de la información para agilizar el sistema tradicional y ofrecer mayor seguridad. Pese a que gradualmente se está instalando en el mundo, sigue siendo muy cuestionado. Desarrolladores y diseñadores concentran su trabajo en hacer que las decisiones electrónicas tengan validez.

Es la expresión ciudadana por medios electrónicos que, a diferencia del voto tradicional, ofrece más seguridad y eficacia. Si bien estos puntos son los beneficios que tiene a favor, también son los más cuestionados debido a que todos conocemos cuán inseguras pueden ser las transferencias de datos en una sociedad de la información donde la piratería y hackeo de cuentas electrónicas y bancarias se han convertido en temores cotidianos.

El número de transferencias electrónicas aumenta progresivamente y esto se debe a que las personas eligen este medio no sólo para comprar productos y pagar servicios sino también para compartir información laboral y personal, participar de encuestas sobre productos que les interesan, etc. Aunque la seguridad es un tema aún indefinido, ya que crecen los métodos que ofrecen confianza y al mismo tiempo crecen las formas de flanquearlos, es cada vez más evidente que muchas de nuestras actividades pasan por una computadora.

Si cada vez son más las diligencias que pueden realizarse desde una computadora domestica, de oficina y hasta desde un smartphone, ¿Por qué no se podría emitir un sufragio electrónico también? Países como Alemania, Italia, Australia, Suiza, Bélgica, Canadá, Estonia, Francia, India, Irlanda, Holanda, Noruega, Rumania, Reino Unido, Brasil, Venezuela y Argentina ya lo han puesto a prueba y han experimentado al mismo tiempo sus controversias.

Consejos para agilizar la carga de una página web

Los sites compiten entre si en el globo de internet con su formato y diseño. Más allá del contenido y hacia donde están dirigidos, algunos pecan de tener demasiados artilugios que aunque atractivos terminan por alejar a los usuarios. Aquí recorreremos un listado de tips para mejorar tus propuestas y no caer recurrentemente en loa pintorescos errores.

Atrás quedaron los tiempos donde el usuario tiene que esperar que se descargue una imagen y menos confiemos en que estos tendrán tantas ganas de acceder a la página que esperaran el tiempo necesario a que la misma se descargue por completo. Actualmente la velocidad y el mensaje directo son fundamentales a la hora de acceder a la vorágine de Internet, por lo que nuestras creaciones tienen que estar a la altura de los usuarios más impacientes.

MIDE TU PACIENCIA:

A veces las páginas están muy bien armadas y se descargan velozmente pero es la computadora que utilizamos o el navegador el que está recargado de información. Entonces antes de perder la paciencia en pos de la búsqueda de velocidad, resuelve estos puntos y te los presente para hacerlo regularmente.

Para reconocer con facilidad que es lo que ralentiza tu página puede utilizar extensiones como Firebug o YSlow, también puede recurrir a Google Page Speed o algunas opciones online como WebSiteOptimization.com y StopWatch de Numion. De esta forma podrás ver un reporte de tablas y gráficos de los pintos débiles del site, además de medir el tiempo de carga.

GENERA VÍNCULOS:

Si utilizas Javascript y CSS externos, lo recomendable es vincular las hojas de estilo y el lenguaje porque simplifican la codificación permitiendo una descarga más rápida del contenido. Al utilizarlos en archivos externos se pueden guardar en caché y por tanto se reduce notablemente la cantidad de solicitudes HTTP.

También es recomendable comprimir los archivos Javascript.

UTILIZA SOLO LOS RECURSOS NECESARIOS:

Los sitios recargados de imágenes demorarán en cargarse por completo, por lo cual es aconsejable usar la menor cantidad posible, las que si utilices asegúrate que sean PNG o JPG, para que al comprimirlas no pierdan el detalle. Las animaciones y GIFs están prohibidas si lo que queremos lograr es un sitio rápido.

Recuerda que los HTML, CSS, y JS, como algunas imágenes, se pueden comprimir para reducir la cantidad de datos de transferencia y aún mejor si activas la posibilidad de guardar en caché para acelerar aún más la carga y lograr que los usuarios accedan más fácil y mayor cantidad de veces.

Otro de los recursos innecesarios son las páginas personalizadas. Muchas veces para entretener al usuario mientras una sección de la página esta en proceso se colocan plantillas tipificadas como la famosa 404-No Encontrado, o peor aún, dibujos que simulan que el site esta en desarrollo.

Nada peor que hacerle perder el tiempo al usuario visitando una página cuyo contenido esta incompleto, y que no advertirán cuando ya esté terminado el site.

Los archivos realizados en Flash también tienen lo suyo, quedan muy lindos, pero en realidad es que son archivos muy pesados y que dificultan la carga de la página.

Para finalizar también es importante tener en cuenta con que tipo de servidor trabajas, cuál es el proveedor y el ancho de banda que tienes.

Tecnología NFC: La llave de la instantaneidad y velocidad para móviles

Aunque existe desde hace muchos años, recién ahora empezaremos a ver los primeros productos que cuentan con la tecnología NFC. Esta plataforma sirve para transferencias de datos instantáneos, ideal para dispositivos móviles, y que abre un universo de aplicaciones al alcance de tus manos.

Near Field Communication es una tecnología inalámbrica que funciona desde el 2003 cuando fue aprobada como estándar ISO/IEC, y que recién en el año 2008 se incluye en los periféricos que además cuentan con Bluetooth.

Básicamente se trata de una plataforma abierta inalámbrica para dispositivos móviles que utiliza una banda, de la cual no necesita licencia, de 13.56 MHz, además de la etiqueta RFID (Radio Frequency Identifiaction) y que ocupa una tasa de transferencia que puede alcanzar los 424 kbits/a. Significa que sirve para transmitir datos mediante una comunicación instantánea y de corto alcance ta que solo funciona en un rango de 20 cm.

Esta reducida transmisión entre un objeto emisor, que puede ser un celular, y un objeto receptor, que puede ser un terminal de cobro u otro celular, permite que un móvil se transforme en una tarjeta de presentación para registrarse en un lugar, una tarjeta de crédito para abonar un servicio o un canal directo para recibir y enviar pequeñas cuotas de datos de manera rápida y segura.

Se estima que en los próximos cinco años la tecnología NFC complementara a loa teléfonos del mercado en todo el mundo garantizando utilidades como pagos, obtención de descuentos y ofertas.