ABC con jQuery, Ajax, PHP

#CRUD #ABC #jQuery #Ajax #PHP

En esta ocasión, les dejo un artículo dedicado a construir un completo ABC (Altas, Bajas y Cambios) o CRUD, sobre una tabla MySQL, mediante el uso de las herramientas:

• PHP
• jQuery
• Ajax

Tratamos de hacer todo, desde cero, esto que indica, que no trabajamos con ningún plugin de jQuery, sino que todo lo hicimos a mano. ¿Porqué hacerlo así? En algunas ocasiones, tenemos un buen plugin de jQuery que hace algo, pero queremos además agregarle una funcionalidad extra, por ejemplo, tenemos un plugin que valida un formulario, pero queremos que haga el envío de los datos mediante ajax y de esa forma, actualice la tabla en MySQL (ya sea para borrar, actualizar o agregar un registro), pero sin recargar el sitio en el que estamos.

Para tal motivo, iniciamos con este artículo, tratamos de dejarlo lo más completo posible, además agregamos funcionalidades tales como refrescar la información y dar clic a una tabla y abrir la "ventana" de actualización.

Por todo lo anteriormente mencionado, creamos este Tutorial dedicado a los que están comenzando o quieren ver nuevas opciones con jQuery.

 

 

Aclaración

 

Antes de iniciar, vamos hacer algunas aclaraciones:

• Las acciones de agregar/actualizar,consultar y borrar, se harán desde archivos separados, para esto creamos cada archivo según la necesidad, en el caso de Agregar/Actualizar, en un único archivo se procesan las dos acciones.
• La tabla donde se muestran los registros se cargará dinámicamente, por lo tanto se debe crear el archivo de consulta (llamado getdata.php).
• El archivo modificar.php, muestra el formulario desde donde se llama las acciones de actualizar/agregar y borrar.
• El archivo conex.php contiene las instrucciones de conexión a la base de datos, se debe adecuar al hosting donde se vaya a ejecutar.

 

Desarrollo

Estructura de la tabla utilizada



CREATE TABLE `tmp_usuarios` (
  `user` varchar(20) NOT NULL,
  `pass` varchar(20) NOT NULL,
  `correo` text NOT NULL,
  `estado` tinyint(1) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8

Contenido de Archivos PHP

getdata.php

<?php
/*Contenido del archivo getdata.php
el cual construye la tabla en html que mostrará los datos de los usuarios
a partir de la tabla tmp_usuarios
*/
include('conex.php');
 
$sql = "Select * from tmp_usuarios" ;
$resUser = mysql_query($sql, $conex) or die(mysql_error());
$totUser = mysql_num_rows($resUser);
 
if ($totUser> 0) {
 
$tabla  = '<table width="100%" border="1" id="tblUser">';
$tabla .= '<tr>';
$tabla .= '   <th scope="col">Usuario</th>';
$tabla .= '   <th scope="col">Clave</th>';
$tabla .= '   <th scope="col">Correo</th>';
$tabla .= '  </tr>';
 
   while ($rowUser = mysql_fetch_assoc($resUser)) {
    $tabla .= '  <tr>';
    $tabla .= '    <td>' . $rowUser["user"]. '</td>';
    $tabla .= '    <td>' . $rowUser["pass"]. '</td>';
    $tabla .= '    <td>' . $rowUser["correo"]. '</td>';
    $tabla .= '   </tr>';
   }
   $tabla .= ' </table>';   
   echo $tabla;
}else{
    echo "NO hay Información que mostrar";
    }
 
?>

deluser.php

<?php
/*Contenido archivo deluser.php*/
include('conex.php');
 
$user  = $_POST["nombre"];
 
if(empty($user)) {
    echo "0";
    return false;
}
$sql = "Delete from tmp_usuarios where user='" . $user ."'" ;
 
mysql_query($sql, $conex) or die(mysql_error());
echo "1";
?>

saveuser.php

<?php
/*
Contenido del archivo saveuser.php
Se procesa el actualizar (update) y el Insertar (Insert)
*/
include('conex.php');
 
$user  = $_POST["nombre"];
$pass  = $_POST["password"];
$email = $_POST["email"];
 
/*Validamos si el Usuario ya existe, de existir, se actualiza, sino se Ingresa*/
$sql = "Select user from tmp_usuarios where user='" . $user . "'" ;
$resUser = mysql_query($sql, $conex) or die(mysql_error());
$totUser = mysql_num_rows($resUser);
 
if($totUser>0) //Registro ya existe se actualiza
{
    $sql = "Update tmp_usuarios set pass='". $pass."',correo='". $email ."' where user='" . $user . "'";
}else{
    //Registro nuevo, se ingresa
    $sql = "Insert Into tmp_usuarios(user,pass,correo,estado) values ('" . $user ."','" . $pass ."','" . $email ."',0)" ;
}
mysql_query($sql, $conex) or die(mysql_error());
echo "1";
 
?>

Lado del Cliente

Para iniciar, lo primero que debemos hacer es agregar la librería de jQuery, para esto se recomienda siempre tener la última versión. Para agregarla, tomamos el archivo index.php y en la sección head, se agregó:

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>

Mostrar Datos

Una vez que cargamos la librería ya podemos comenzar a trabjar con jQuery. Como vimos, el archivo getdata.php imprime en pantalla la tabla, de tal forma, cada vez que lo mandamos a llamar, se generará la tabla de contenido. Dicha tabla, la tendremos dentro de un div, al cual podremos el id Usuarios, de la siguiente forma

<div id="Usuarios">
<?php include("getdata.php"); ?>
</div>

Podemos observar que incluimos el archivo getdata.php, el cual devuelve la tabla con el resultado de la consulta de la tabla.

Refrescar Datos

Y para el botón refrescar, tenemos

//Botón Refrescar Presionado
$("#refrescar").click(function(){
    $("#Usuarios").html("");
    $("#Usuarios").load("getdata.php", function(){});
    })

Agregar / Modificar Registros

El efecto que se logra, para que muestre el formulario visible de esa forma (un div superpuesto, se logra) con el siguiente estilo

.div_User{
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 60%;
    padding: 16px;
    background: #fff;
    color: #333;
    z-index:1002;
    overflow: auto;
}

Y, se ubicará en el div

<div class="div_User" id="div_User">

Y es en este div que cargaremos el contenido del formulario. Dicha acción se lleva a cabo de dos formas, dando clic en el botón Agregar o en algún usuario (de haber registros). En el caso del clic del botón,

$("#adduser").click(function(){
       $("#div_User").fadeIn();
       $("#div_User").html("<div id='cargando' style='display:none; color: green;text-align:center' width='100%' height='100%'><img width='16' height='16' src='img/ajax-loader.gif' /> Cargando...</b></div>");
       $("#cargando").css("margin-left", "auto");
       $("#cargando").css("margin-right", "auto");
       $("#cargando").css("display", "inline");
       $("#div_User").load("modificar.php", function(){
           $("#cargando").css("display", "none");
     });
    });

Antes de cargar el archivo modificar.php, ponemos el mensaje de cargando, luego usamos el método load y mandamos a cargamos el archivo modificar.php, si carga bien, se "oculta" el div cargando. Para capturar el clic en la tabla de usuarios, usamos el método live y preguntamos por el evento click

modificar.php

Dentro del archivo modificar.php, veremos que al inicio recibe los valores pasados, si no recibe nada, las variables estarán vacías, el contenido de esas variables, se pone en el value de cada input.

<?php
$user  = $_POST["user"];
$pass  = $_POST["pass"];
$email = $_POST["mail"];
 
?>
 
<form class='contacto' method='POST' action='' id="formu">
            <div><label>Usuario (*):</label><input type='text' class='nombre' name='nombre' id='usuario' value='<?php echo $user;?>'></div>
            <div><label>PassWord (*):</label><input class='nombre' name='password'  id='password' value='<?php echo $pass; ?>' type="password"></div>            
            <div><label>Tu Email (*):</label><input type='text' class='email' name='email'  id='email' value='<?php echo $email; ?>'></div>
            <div><input type='submit' value='Guardar' class='boton' name='boton' id="enviar">
            <?php if(!empty($user)) {?>
            <input type='button' value='Borrar' class='boton' name='boton' id="Borrar">
            <?php }?>
            <input  type='button' value='Cerrar' class='boton' name='boton' id="Cerrar">
            </div>
</form>

Botón Enviar Datos (Actualizar o Modificar

En el evento clic del botón enviar, primeramente usamos preventDefault(), para evitar que se ejecute el Submit del formulario. Luego para cada input preguntamos por el valor y si está vacío, se agrega un spam con la clase error, al final de cada validación, se usa el return false, para evitar que siga a la siguiente instrucción.

Luego de validar todo, utilizamos ajax para enviar los datos al archivo saveuser.php, para capturar los valores del formulario, se utiliza el método serialize de jQuery.

En el ajax, se pone el especifica el tipo (en nuestro caso POST), en url, se especifica el destino (saveuser.php), si sucede algún error (como que no exista el archivo especificado en url), está la sección error:, en data ponemos los valores serializados del formulario.

Si el envío es satisfactorio, se utiliza la sección success, la variable data, contiene lo que envíe de respuesta el archivo saveuser.php, para esto, utilizamos el echo "1", si data contiene el valor 1, se asume que todo salió bien, así que se procede a "repintar" la tabla de usuarios.

/*Evento Click Botón Enviar*/
 $("#enviar").click(function(evento){
     evento.preventDefault(); //Evitamos que el formulario se vaya
 
     /*Validación*/
     var emailreg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;   //Creamos las reglas para validar el correo
     $(".error").fadeOut().remove();
 
     if ($("#usuario").val() == "") { 
        //alert("Usuario Inválido");
        $("#usuario").focus().after('<span class="error">Usuario Inválido</span>');
        return false;
     }
 
     if ($("#password").val() == "") { 
        //alert("Password Requerido");
        $("#password").focus().after('<span class="error">Password Requerido</span>');
        return false;
     }
 
    if ($("#email").val() == "" || !emailreg.test($("#email").val())) {
        //alert("Dirección de Correo Inválida");
        $("#email").focus().after('<span class="error">E-Mail Inválido</span>');
        return false;       
    }
    /*Fin Validación*/
 
    //Determinanos los datos del formulario y los serializamos
    var datos = $("#formu").serialize();
    //alert(datos);
    // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: 'saveuser.php',
            error: function(data){
                //Si sucedió algo, se notifica
                    $(".result_fail").fadeIn();
                    $(".result_fail").html("Error Procesando Datos");
                },
            data: datos,
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                if(data==1){
 
                    /*Reconstruimos la tabla*/
                    $("#Usuarios").html("");
                    $("#Usuarios").load("getdata.php", function(){});
                    /*Fin Reconstruir la tabla*/
 
                    $("#div_User").hide();
                }
                else{
                    $(".result_fail").fadeIn();
                    $(".result_fail").html("Error " . data);
                    return false;
                    }
             }
        });
});
 /*Fin Evento Click Botón Enviar*/

Botón Borrar

De la misma forma, sucede con el botón borrar.

/*Evento Click Botón Borrar*/
$("#Borrar").click(function(){
 
    /*Confirmar si se desea borrar el registro*/
    var Resp = confirm("Eliminar Registro para " + $("#usuario").val());
 
    if(Resp){
            /*Escogió opción ACEPTAR*/
            //Determinanos los datos del formulario y los serializamos
           var datos = $("#formu").serialize();
           // Enviamos el formulario usando AJAX
           $.ajax({
               type: 'POST',
               url: 'deluser.php',
               error: function(data){
                   //Si sucedió algo, se notifica
                       $(".result_fail").fadeIn();
                       $(".result_fail").html("Error Eliminando Registro");
                   },
               data: datos,
               // Mostramos un mensaje con la respuesta de PHP
               success: function(data) {
                   if(data==1){
 
                       /*Reconstruimos la tabla*/
                       $("#Usuarios").html("");
                       $("#Usuarios").load("getdata.php", function(){});
                       /*Fin Reconstruir la tabla*/
 
                       $("#div_User").hide();
                   }
                   else{
                       $(".result_fail").fadeIn();
                       $(".result_fail").html("Error " . data);
                       return false;
                       }
                }
           });      
        }
 
    })
 /*Fin Evento Click Botón Borrar*/

Conclusiones

Espero que este tutorial les sea de mucha utilidad, es bastante básico, pero traté que quedara lo más completo posible. Sígannos en Twitter (o Facebook), para descargar los fuentes, sólo deben compartir este contenido en alguna de las redes sociales que se indica en el botón siguiente e inmediatamente saldrá el link de descarga.  La aplicación pedirá permiso para poder postear.


Hay detalles concernientes a la seguridad, pero este pequeño tutorial les sea de utilidad.

Enlace Relacionado

Tutorial ABC con jQuery y MySQL

---

"Enseñar es la mejor forma de aprender"

---