Tenemos Cuidado de Su Negocio
Cada Minuto

Somos profesionales y nos preocupamos por cada detalle de cada proyecto que Ud. nos entrege a desarrollar, por tal motivo, cada elemento que realizamos, lo hacemos con el más sumo cuidado. Lo invitamos a que conozca un poco más nuestra empresa.

ABC con jQuery, Ajax, PHP

En esta ocasión, les traemos un artículo dedicado a construir un completo ABC (Altas, Bajas y Cambios) 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.

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.

La estructura de la tabla utilizada es:

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;

El contenido de los archivos .php utilizado es el siguiente:

<?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";
	}

?>

<?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";

?>

<?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";

?>

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>

Una vez que cargamos la librería ya podemos comenzar a trabjar con jQuery. Como vimos, el archivo getdata.php imprime el 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.

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

//Evaluamos los clic que se hacen en cada registro	 
 $('#tblUser tbody tr').live('click', function () {
        var sTitle;
        var nTds = $('td', this);
		var usuario,clave,correo,estado,nivel;
		user = $(nTds[0]).text();
		pass  = $(nTds[1]).text();
		mail  = $(nTds[2]).text();
		
		
		$("#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",{user:user,pass:pass,mail:mail} ,function(){
			$("#cargando").css("display", "none");
		});
		
 });

Y para el botón refrescar, tenemos

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

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>

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.

El evento completo es:

 /*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*/

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*/

Esperamos que este tutorial les sea de mucha utilidad. Sígannos en Twitter (o Facebook), nos envían un mensaje (por Twitter o Facebook) y les enviaremos el enlace de descarga.

Verlo en acción

Demo

DEBS News Ticker

ABC con jQuery, Ajax, PHP
ABC con jQuery, Ajax, PHP

En esta ocasión, les traemos un artículo dedicado a construir

Tenemos Cuidado de Su Negocio
Cada Minuto

ABC con jQuery, Ajax, PHP

DEBS News Ticker

ABC con jQuery, Ajax, PHP

DEBS twitter Perfil

¿Qué ofrecemos?

Lo que ellos dicen

Contacto Rápido

Tenemos Cuidado de Su Negocio Cada Minuto

ABC con jQuery, Ajax, PHP

DEBS News Ticker

ABC con jQuery, Ajax, PHP

DEBS twitter Perfil

¿Qué ofrecemos?

Lo que ellos dicen

Contacto Rápido

Tenemos Cuidado de Su Negocio
Cada Minuto