miércoles, 28 de enero de 2009

Combinando Ajax con PHP, Parte 2


En el último post quedó pendiente la implementación del programa en el servidor, en este caso la aplicación en PHP contenida en el archivo validaDatos.php, que es de los que nos ocuparemos ahora:

Programación del lado del servidor

En el post anterior declaramos algunas de las características de la aplicación PHP, entre estas se encuentra el recibir los datos por medio de las variables predefinidas de PHP, y generar una respuesta en formato HTML. A esto se añadirá que será evaluada la validez de los datos utilizando expresiones regulares, gracias a los cual se podrá incluir un mensaje de salida que indique el resultado de esta evaluación.

El código PHP que deberá incluir el archivo validaDatos.php es el siguiente:


<?
//Expresiones regulares para la validación de los datos
$er_titulo = "/^([a-z]|[A-Z]|[ÁÉÍÓÚáéíóúÑñÜü]|[0-9]|[\s\.\-,:'\"])+$/";
$er_autor = "/^([a-z]|[A-Z]|[ÁÉÍÓÚáéíóúÑñÜü]|[\s,\.'\-])+$/";
$er_anio = "/^([1-2][0-9][0-9][0-9])$/";
//Validamos que se hayan enviado todos los datos por post
if(isset($_POST['txtAutor']) && isset($_POST['txtAnio']) && isset($_POST['txtTitulo'])){
  //Validamos el contenido de los campos
  $autor = stripslashes(trim($_POST['txtAutor']));
  $anio = trim($_POST['txtAnio']);
  $titulo = stripslashes(trim($_POST['txtTitulo']));
  if(!preg_match($er_autor,$autor)){
    $campo = "autor";
  }
  else if(!preg_match($er_anio,$anio)){
    $campo = "año";
  }
  else if(!preg_match($er_titulo,$titulo)){
    $campo = "título";
  }
  else{
    $mensaje = "Todos los campos capturados son correctos :)";
  }
  if(isset($campo))
    $mensaje = "Error: El texto capturado en el campo $campo es incorrecto";
}
else{
  $mensaje = "No se recibieron los valores";
}
?>
<p><?=$mensaje?></p>
<p><u>Valores recibidos</u>:<br />
Autor: <?=$_POST['txtAutor']?><br />
Año: <?=$_POST['txtAnio']?><br />
Título: <?=$_POST['txtTitulo']?><br />
</p>

En sí es un programa sencillo de entender, pero podemos observar que en lugar de embedir el código PHP dentro del HTML, se separaron, dejando la parte del código HTML solo para desplegar el resultado de la evaluación y los valores de los datos recibidos, esta es una buena práctica para facilitar los mantenimientos posteriores a nuestros archivos php.

Al inicio del código observamos que aparecen declaradas tres variables:
$er_titulo = "/^([a-z]|[A-Z]|[ÁÉÍÓÚáéíóúÑñÜü]|[0-9]|[\s\.\-,:'\"])+$/";
$er_autor = "/^([a-z]|[A-Z]|[ÁÉÍÓÚáéíóúÑñÜü]|[\s,\.'\-])+$/";
$er_anio = "/^([1-2][0-9][0-9][0-9])$/";
Como vemos se trata de tres cadenas de texto, las cuales representan las expresiones regulares que utilizaremos para evaluar cada uno de los campos, así el campo título utilizará la expresión regular $er_titulo, la cual indica que solo podrá contener caracteres alfabéticos latinoamericanos, dígitos, espacios y algunos caracteres especiales.

En la siguiente línea se incluye una validación en la condición, con la que se verifica que todos los datos hayan sido recibidos antes de continuar con el proceso, utilizando la variable predefinida $_POST:
if(isset($_POST['txtAutor'])&&isset($_POST['txtAnio'])&& isset($_POST['txtTitulo']))
{
  ...

Una vez pasada ésta validación, alamacenamos los datos recibidos en sus respectivas variables:
$autor = stripslashes(trim($_POST['txtAutor']));
$anio = trim($_POST['txtAnio']);
$titulo = stripslashes(trim($_POST['txtTitulo']));
A los datos que se reciben -que son todos cadenas- se les aplica la función trim, para eliminar los espacios en blanco sobrantes al inicio y al final de cada una, así como la función stripslashes, para eliminar el caracter diagonal invertida "\", que en las versiones 5 y anteriores de PHP se agrega automáticamente, al encontrarse con los caracteres comilla simple y comilla doble, lo que se denomina comillas mágicas.

En las siguientes líneas de código es donde se lleva a cabo la validación de la información proporcionada:
if(!preg_match($er_autor,$autor)){
  $campo = "autor";
}
else if(!preg_match($er_anio,$anio)){
  $campo = "año";
}
else if(!preg_match($er_titulo,$titulo)){
  $campo = "título";
}
else{
  $mensaje = "Todos los campos capturados son correctos :)";
}
if(isset($campo))
  $mensaje = "Error: El texto capturado en el campo $campo es incorrecto";
En éstas condiciones se utiliza la función preg_match para evaluar si los datos proporcionados, cumplen con el patrón de su respectiva expresión regular. En caso contrario se guarda el nombre del campo para incluirlo en un mensaje de error.

En la sección donde encontramos el código HTML del archivo se desplegará un mensaje que indicará el resultado del proceso de evaluación, enseguida del cual se mostrarán los valores recibidos por $_POST.

Al almacenar el archivo validaEntradas.php en la raíz del directorio de páginas web de nuestro servidor, podemos probar el programa que creamos en el post anterior. Así, abrimos el archivo HTML y realizamos la captura de los datos en su formulario:



Al validar los datos, obtenemos el siguiente resultado:



En caso de capturar algún dato que no concuerde con las expresiones regulares que hemos establecido, tendremos un resultado como el siguiente:



De esta manera, combinamos la captura de datos en nuestro cliente con la validación del lado del servidor, para obtener un sencillo sistema de validación de entradas de un formulario.

Conclusiones

Hemos podido darnos cuenta de la capacidad que tiene Ajax para combinarse con otros sistemas, y crear aplicaciones más robustas en nuestros clientes Web, sin embargo, ésta apenas es la punta del iceberg de las capacidades que podemos alcanzar con Ajax, del lado del servidor se podría no solo llevar a cabo la validación de los datos sino también la actualización de una base de datos, además las respuestas que PHP puede devolver no se limitan a contenido HTML, éstas pueden ser también archivos XML, imágenes, archivos PDF o hasta animaciones Flash. Así que esto apenas comienza, en los siguientes post veremos como utilizar PHP para generar respuestas XML que serán procesadas en Ajax, y posteriormente veremos el manejo de bases de datos y la utilización de servicios Web.

Hasta la próxima

2 comentarios:

ACERCA DEL CONTENIDO dijo...

Faltaba solo esto, para que funcione el ejemplo

input type=button value=Validar datos onclick=valida()

Anónimo dijo...

Ya corregí el primer post de este tema. La idea que tuve fue separar por completo el código HTML de Javascript, pero olvidé esa importante instrucción del lado de HTML. Gracias por tu aporte.

Publicar un comentario