Formulario Jquery y Ajax desde 0 [PHP]

Muy bien, si haz llegado hasta esta parte del tutorial te felicito, ya casi acabas el formulario, en los post anteriores hicimos las validaciones del lado del cliente, ahora toca hacer las validaciones del lado del servidor y enviar el correo utilizando PHP.

Los post del tutorial son los siguientes:

Es un hecho que al final del día no podemos confiar en los usuarios que utilizaran la aplicación (suena mal, pero así es), existen practicas de seguridad que son básicas como por ejemplo asegurarnos que los datos que recibimos sean correctos, es decir si pedimos que el usuario ingrese un correo electrónico sea un correo electrónico valido, etc.

Tenemos que crear un nuevo archivo php, asegúrate de que el nombre sea el mismos que el que indicaste en el javascript

<?php
function validaLongitud($valor, $permiteVacio, $minimo, $maximo)
{
  $cantCar = strlen($valor);
  if(empty($valor))
  {
    if($permiteVacio) return TRUE;
    else return FALSE;
  }
  else
  {
    if($cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
    else return FALSE;
  }
}

function validaCorreo($valor)
{
  if(eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})", $valor)) return TRUE;
  else return FALSE;
}

// MAIN  

if($_POST)
{
  foreach($_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));
  sleep(5);
  if(!validaLongitud($nombre, 0, 4, 50)) $error=1;
  if(!validaLongitud($web, 1, 4, 50)) $error=1; 
  if(!validaCorreo($correo)) $error=1;
  if(!validaLongitud($comentarios, 0, 5, 500)) $error=1;
  
  if($error==1) echo "Error";
  else
  {
    $fecha=date("d/m/y - H:i");
    $mensaje="
Tienes un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Sitio web: $web
Correo electrónico: $correo
Comentarios: $comentarios";

    //Debug en un archivo ... probando haber si imprime
    
    /*$master=fopen('mensajes.txt',a);
    fwrite($master,",".$fecha.",".$nombre.",".$web.",".$correo.",".$comentarios);
    fclose($master);*/
    
    mail("[email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web <[email protected]>");
    echo "OK";
  }
}
?>

Ok, explicare el código paso por paso, al inicio del script hay 2 funciones que se utilizaran mas abajo, lo importante comienza donde esta el

if($_POST)
{

Estamos indicando que si el arreglo asociativo $_POST no esta vacío entonces ejecutaremos el código entre las llaves. La primera línea

foreach($_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));

Foreach lo que hace es recorre el array y crear una variable por cada valor que encuentre y le asigna como nombre el mismo (similar a si utilizáramos extract($_POST); o algo similar), además de eso por seguridad le aplica la función trim que elimina espacios en blanco al inicio y al final y addslashes que agrega barras invertidas en caso de encontrar caracteres extraños como comillas simple.

Ahora realizamos las validaciones haciendo uso de las funciones de arriba

        if(!validaLongitud($nombre, 0, 4, 50)) $error=1;
  if(!validaLongitud($web, 1, 4, 50)) $error=1; 
  if(!validaCorreo($correo)) $error=1;
  if(!validaLongitud($comentarios, 0, 5, 500)) $error=1;

Las funciones validaLongitud y validaCorreo son muy similares a las que hicimos anteriormente en Javascript 🙂

function validaLongitud($valor, $permiteVacio, $minimo, $maximo)
{
  $cantCar = strlen($valor);
  if(empty($valor))
  {
    if($permiteVacio) return TRUE;
    else return FALSE;
  }
  else
  {
    if($cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
    else return FALSE;
  }
}

La función recibe 4 parámetros, el valor, una variable para ver si puede estar vacía, una longitud mínima y una máxima, después obtenemos la longitud de la cadena, revisamos si la variable esta vacía y de ser así vemos si esta permitido que lo este, de ser verdadero esto regresamos true, por el otro lado si la variable no viene vacía tenemos que ver que la longitud cumpla con la longitud mínima y máxima, en cado de cumplirse la condición regresamos verdadero.

function validaCorreo($valor)
{
  if(eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})", $valor)) return TRUE;
  else return FALSE;
}

En esta función solamente se evalúa con la función eregi que la cadena $valor cumpla con las condiciones de la expresion regular, de ser cierto devolvemos true, de lo contrario false, no hay nada mas que decir.

Esta demás decir que dependiendo de si el resultado de las validaciones es verdadero o falso pondremos un 1 o dejaremos en 0 la variable $error.

Después revisamos si hubo algún error (si error es igual a 1), de ser así imprimimos con echo error, si no hubo errores procedemos a enviar el mensaje con el siguiente código.

  if($error==1) echo "Error";
  else
  {
    $fecha=date("d/m/y - H:i");
    $mensaje="
Tienes un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Sitio web: $web
Correo electrónico: $correo
Comentarios: $comentarios";

    //Debug en un archivo ... probando haber si imprime
    
    /*$master=fopen('mensajes.txt',a);
    fwrite($master,",".$fecha.",".$nombre.",".$web.",".$correo.",".$comentarios);
    fclose($master);*/
    
    mail("CORREO EJ. [email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web <[email protected]>");
    echo "OK";
  }

Lo que hacemos básicamente es armar el cuerpo del mensaje, después utilizar la función mail

mail("[email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web <[email protected]>");

La función mail envía un mensaje de acuerdo a parámetros recibidos, mas adelante aprenderemos que hay maneras mas sofisticadas de enviar correo electrónico con todas las cabeceras en orden, pero por el momento esta bien de esta manera.

Al final para avisarle al javascript (el cual hizo la petición ajax) que todo ha ido bien regresamos un OK 🙂

Y listo con esto el mensaje ha sido enviado!

10 pensamientos en “Formulario Jquery y Ajax desde 0 [PHP]

  1. kuo
    Firefox 11.0 Windows XP

    Impresionante documento.
    Todavía no lo he probado, pero sólo pensar en el rato que te ha costado hacer el tutorial y lo bien explicado que está, ya merece la pena darte la enhorabuena.

    Responder
  2. Rocío
    Internet Explorer 8.0 Windows XP

    Hola!!

    Gracias por compartir este tutorial, me ha resultado muy útil.

    Tengo una duda: ¿como tengo que organizar los archivos Jquery, Ajax y PHP ?

    Gracias

    Responder
    1. Alevsk Autor
      Google Chrome 19.0.1084.46 Mac OS

      Hola para mayor comodidad publique un archivo comprimido que trae todo lo necesario (y ya organizado) para que puedas montar el script y lo comiences a usar :), el post en cuestión es:

      http://www.alevsk.com/2011/01/tutorial-de-formulario-php-jquery-ajax-xhtml-css/

      y puedes descargar el formulario de acá desde dropbox

      Dropbox
      http://dl.dropbox.com/u/47704638/contacto/tutorial.zip

      Y si quieres ver como esta estructurado todo, puedes verlo en skydrive 🙂

      Skydrive
      https://skydrive.live.com/?cid=08814bef055a8755&id=8814BEF055A8755%21399

      salu2

      Responder
  3. Damian Buch
    Google Chrome 18.0.1025.168 Windows 7

    Hola, muy interesante el tutorial, andaba buscando algo asi y lo encuentro muy completo! Desde ya te lo agradezco por subir esta valiosa informacion. Ahora queria hacerte 2 preguntas:

    1° Cuando completo los campos y trato de enviar el formulario se queda en el cartel “Enviando. Por favor espere.”

    2° Donde tendria que hacer las modificaciones para que en vez de mandar un mail, lo envie a una base de datos.

    Desde ya muchas gracias!!

    Responder
    1. Alevsk Autor
      Google Chrome 19.0.1084.46 Mac OS

      Hola @Damian Buch, asegurate de que el servidor donde estas probando el script tenga la función mail habilitada, lo segundo si quieres insertar los datos en una base de datos es sencillo, en el script en PHP donde aparece el siguiente código:

        if($error==1) echo "Error";
        else
        {
          $fecha=date("d/m/y - H:i");
          $mensaje="
      Tienes un nuevo mensaje desde el Sitio:
      
      Fecha: $fecha
      Nombre: $nombre
      Sitio web: $web
      Correo electrónico: $correo
      Comentarios: $comentarios";
      
          //Debug en un archivo ... probando haber si imprime
          
          /*$master=fopen('mensajes.txt',a);
          fwrite($master,",".$fecha.",".$nombre.",".$web.",".$correo.",".$comentarios);
          fclose($master);*/
          
          mail("CORREO EJ. [email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web <[email protected]>");
          echo "OK";
        }
      

      Si te fijas ahi puse una parte de código comentada, donde yo mandaba la salida de datos a un archivo de texto, puedes sustituir eso por lo código de inserción a la tabla de alguna base de datos que tengas :).

      Podrías dejar el código así

       if($error==1) echo "Error";
        else
        {
           //Aqui tu código para insertar a una base de datos.
           echo "OK";
        }

      Responder
      1. Damian Buch
        Google Chrome 18.0.1025.168 Windows 7

        Muchisimas Gracias! y tenias razon, no tenia habilitada la opcion de mandar mails con el servidor en el que estaba! Ni bien cambie el codigo no tuve mas problemas.
        Ahora otra consulta, si no es molestarte mucho, para agregar mas campos al formulario estuve viendo, y fui entendiendo bastante el funcionamiento de “funciones.js” y “validacion_form.js”, ahora mi pregunta es, debo modificar en algo el archivo “jquery-1.3.2.min.js”?? Porque de ese si que no entendi nada. Desde ya muchisimas gracias por responder!!

        Responder
  4. LalO
    Firefox 12.0 Windows 7

    hola amigo el ultimo paso de enviar un mensaje a un email no aparece el blog.. podrias xfavor enviarmelo… graciazz =)

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *