En está oportunidad veremos como realizar la eliminación de registros combinando php + mysql + ajax. Nuestro objetivo es mostrar una relación o lista de todos los empleados, y que cada elemento tenga una opción para ser eliminado, al momento de hacerle clic en este opción, un cuadro de dialogo nos preguntará si deseamos realmente continuar con la operación. Haremos uso de la tabla empleados que hemos usado ya en los 3 tutoriales anteriores. Empezemos entonces.
Quiza te pueda interesar: CRUD con PHP, MySQL y Jquery
Funciones en JavaScript
ajax.js » Este archivo contiene 2 funciones: objetoAjax declara el objeto XMLHttpRequest que usaremos dependiendo del navegador y eliminarDato(idempleado) se encarga de enviar el codigo del empleado que será eliminado.
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 eliminarDato(idempleado){ //donde se mostrará el resultado de la eliminacion divResultado = document.getElementById('resultado'); //usaremos un cuadro de confirmacion var eliminar = confirm("De verdad desea eliminar este dato?") if ( eliminar ) { //instanciamos el objetoAjax ajax=objetoAjax(); //uso del medotod GET //indicamos el archivo que realizará el proceso de eliminación //junto con un valor que representa el id del empleado ajax.open("GET", "eliminacion.php?idempleado="+idempleado); ajax.onreadystatechange=function() { if (ajax.readyState==4) { //mostrar resultados en esta capa divResultado.innerHTML = ajax.responseText } } //como hacemos uso del metodo GET //colocamos null ajax.send(null) } }
Código en PHP
conexion.php » Guarda los datos de la conexión a la base de datos.
<?php //Configuracion de la conexion a base de datos $bd_host = "localhost"; $bd_usuario = "root"; $bd_password = ""; $bd_base = "ribosomatic"; $con = mysql_connect($bd_host, $bd_usuario, $bd_password); mysql_select_db($bd_base, $con); ?>
consulta.php » Lista todos los registros de la tabla empleado. Además cada elemento mostrado tiene la opción de ser eliminado haciendo clic en su ID, así se llamará a la funcion eliminarDato(idempleado) que especificamos en el archivo ajax.js.
<?php require('conexion.php'); //consulta todos los empleados $sql=mysql_query("SELECT * FROM empleados",$con); //muestra los datos consultados //haremos uso de tabla para tabular los resultados ?> <table style="border:1px solid #FF0000; color:#000099;width:400px;"> <tr style="background:#99CCCC;"> <td>Codigo</td> <td>Nombres</td> <td>Departamento</td> <td>Sueldo</td> </tr> <?php while($row = mysql_fetch_array($sql)){ echo " <tr>"; //mediante el evento onclick llamaremos a la funcion eliminarDato(), la cual tiene como parametro //de entrada el ID del empleado echo " <td><a style=\"text-decoration:underline;cursor:pointer;\" onclick=\"eliminarDato('".$row['idempleado']."')\">".$row['idempleado']."</a></td>"; echo " <td>".$row['nombres']."</td>"; echo " <td>".$row['departamento']."</td>"; echo " <td>".$row['sueldo']."</td>"; echo " </tr>"; } ?> </table>
eliminacion.php » Se encarga de recibir el parametro idempleado, de la función eliminarDato(idempleado), y mediante una sentencia SQL eliminar dicho registro, al final del proceso se vuelve a llamar al archivo consulta.php para mostrar los registros actuales.
<?php require('conexion.php'); //variable GET $idemp=$_GET['idempleado']; //elimina el registro de la tabla empleados $sql="DELETE FROM empleados WHERE idempleado=$idemp"; mysql_query($sql,$con); include('consulta.php'); ?>
index.php » Es el archivo principal de nuestro ejemplo, donde llamaremos al archivo ajax.js y también especificaremos una capa (div) llamada resultado.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Eliminacion de registros con AJAX</title> <script language="JavaScript" type="text/javascript" src="ajax.js"></script> </head> <body> <h2>Eliminar registros de la tabla empleado</h2> <p>Clic en el código del empleado para eliminar el registro. </p> <div id="resultado"> <?php include('consulta.php'); ?> </div> </body> </html>
Eso es todo! Recuerden cambiar los valores del archivo conexion.php pues si no lo hacen habra errores. Así finalizamos los cuatro procesos que siempre se realiza en una base de datos: Consulta, Inserción, Actualización y Eliminacion de registros. Pueden descargar el ejemplo y probarlo en su servidor web local. En la sección Ejemplos también pueden ver la puesta en marcha de este tutorial.