Insertar y eliminar registros de una base de datos en mysql empleando PHP, HTML y Jquery
En este pequeño tutorial se muestra como programar las funciones necesarias para insertar y eliminar registros en una tabla que almacena datos de personas.
Arquitectura
La aplicación esta dividida en 3 capas, en la siguiente figura se muestra de manera general la interacción entre las capas.
Operaciones de base de datos: establece la conexión con la base de datos y mediante SQL obtiene, inserta o elimina registros.
Manejador de acciones: esta capa se encarga de recibir las peticiones del usuario y solicita a la capa de operaciones de base de datos lo que necesite. En esta capa se genera todo el código HTML que es dinámico, por ejemplo tablas y formularios.
Interfaz: es la capa que se muestra al usuario la cual esta conformada por código HTML, en este ejemplo se utiliza Jquery para manejar las acciones de los botones y JqueryUI para mostrar un formulario emergente.
Descripción del flujo de información entre capas
Para comprender mejor como interactúa cada capa lea el siguiente caso.
Caso: Agregar registro
En la “Interfaz” el usuario presiona el botón “Nuevo”, al ser presionado Jquery ejecuta una función que se comunica con la capa “Manejador de acciones” la cual genera el código del formulario que se mostrará al usuario, después el flujo regresa a la capa de interfaz de usuario donde Jquery se encarga de procesar el código recibido y lo muestra al usuario.
Hasta este punto se tiene en la interfaz de usuario el formulario que le permitirá ingresar los datos del nuevo registro. El formulario cuenta con el botón de “Guardar” al ser presionado Jquery ejecuta una función que se comunica con la capa “Manejador de acciones” la cual se encarga de procesar o preparar los datos provenientes del formulario y enseguida los envía a la capa de “Operaciones de base de datos” la cual intenta inserta el nuevo registro con los datos recibidos, la capa de “Operaciones de base de datos” responde a la capa “Manejador de acciones” si pudo o no insertar el nuevo registro, entonces la capa “Manejador de acciones” se encarga de generar con código HTML el mensaje para informar al usuario lo que sucedió, y finalmente el flujo regresa a la capa de “interfaz” donde Jquery recibe el mensaje para finalmente mostrarlo al usuario.
Descripción de la tabla Personas
La tabla que utilizaremos tiene cuatro campos o columnas que son las siguientes: id, nombre, apellido paterno y apellido materno. Como podrá notar es muy sencilla pero servirá para mantener sencillo el ejemplo completo. Acontinuación se muestra el script para crear la base de datos
-- -- Base de datos: `tutorial` -- CREATE DATABASE IF NOT EXISTS `tutorial` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; USE `tutorial`; -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `personas` -- CREATE TABLE IF NOT EXISTS `personas` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(30) NOT NULL, `apellido_paterno` varchar(30) NOT NULL, `apellido_materno` varchar(30) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Desarrollo
Empezaremos programando la capa encargada de las operaciones de base de datos, posteriormente la capa manejador de acciones y finalmente la interfaz de usuario.
Capa de Operaciones de base de datos
Esta capa interactúa directamente con la base de datos por lo tanto haremos una clase Conector donde definiremos los parámetros de conexión y las funciones de conectar y desconectar, el código es bastante simple y no requiere de mayor explicación a continuación se muestra el código del conector.
/**
* esta clase proporciona los metodos necesarios
* para poder establecer la conexion con el servidor de la
* base de datos mysql
*
* @author dav
*/
class Conector {
static private $host = "localhost";
static private $user = "";
static private $password = "";
static private $dataBase = "tutorial";
public static function conectar() {
$link = mysqli_connect(
self::$host, self::$user,
self::$password, self::$dataBase);
if (mysqli_connect_error()) {
die('Error no se conecto al servidor de la base de datos -> '
. mysqli_connect_error());
}
return $link;
}
public static function desconectar($link) {
mysqli_close($link);
}
}
Ahora que ya tenemos el conector podemos hacer la clase de operaciones de base de datos con las funciones de insertar, eliminar y para buscar todos los registros. A continuación se muestra el código de la clase, se han puesto comentarios para explicar que hace cada línea.
require_once 'Conector.php';
/**
* Esta clase contiene funciones de operaciones sencillas
* de interacción con la base de datos
*
* @author dav
*/
class OperacionesDB {
public function consultar() {
$conexion = Conector::conectar(); //establece la conexión
$query = "Select * from personas;"; //sql
$result = mysqli_query($conexion, $query); //ejecuta el código SQL
Conector::desconectar($conexion); //cierra la conexión
return $result; //retorna el conjunto de resultados obtenidos
}
public function insertar($nombre,$apellidoP,$apellidoM) {
$operacionExitosa = false; //bandera para indicar éxito de operación
$conexion = Conector::conectar();//establece la conexión
$query = "Insert into personas(nombre, apellido_paterno, apellido_materno) values('$nombre','$apellidoP','$apellidoM');"; //sql
mysqli_query($conexion, $query); //ejecuta el código SQL
if(mysqli_affected_rows($conexion)>0){//Se afectaron filas?
$operacionExitosa = true;// entoces la operación fue exitosa
}
Conector::desconectar($conexion); //cierra la conexión
return $operacionExitosa;// retorna la bandera
}
public function eliminar($id){
$operacionExitosa = false; //bandera para indicar éxito de operación
$conexion = Conector::conectar();//establece la conexión
$query = "Delete from personas WHERE id = '$id';"; //sql
mysqli_query($conexion, $query); //ejecuta el código SQL
if(mysqli_affected_rows($conexion)>0){ //Se afectaron filas?
$operacionExitosa = true; // entoces la operación fue exitosa
}
Conector::desconectar($conexion); //cierra la conexión
return $operacionExitosa; //retorna la bandera
}
}
Capa Manejador de acciones
Como ya se menciono anteriormente esta capa recibe las peticiones provenientes de la capa de interfaz y si la situación requiere obtener datos de la base de datos entonces establecerá comunicación con la capa de operaciones de base de datos si no simplemente se encargara de generar el código HTML para responder a la petición del usuario.
A continuación se muestra el código del manejador de acciones, se ha comentado cada línea para explicar que hace cada una de ellas.
require_once 'OperacionesDB.php';
/*
* Este archivo PHP se encarga de recibir las peticiones
* y genera el codigo HTML para responder a las peticiones
*/
//La capa de interfaz debe mandar un parámetro llamado “acción” indicando la operación solicitada
$accion = $_POST['accion'];
$operacionesDB = new OperacionesDB(); //crea una nueva instancia de la clase OperacionesDB
if(strcasecmp($accion, "guardar") == 0){ //solicita la acción guardar?
guardar(); //entonces ejecuta la función guardar
}
if(strcasecmp($accion, "buscar") == 0){ //solicita la acción buscar?
buscar();//entonces ejecuta la función buscar
}
if(strcasecmp($accion, "agregarNuevo") == 0){ //solicita la acción agregar nuevo?
agregarNuevo();//entonces ejecuta la función agregar nuevo
}
if(strcasecmp($accion, "eliminar") == 0){ //solicita la acción eliminar?
eliminar();//entonces ejecuta la función eliminar
}
function buscar() {
global $operacionesDB;
$resultados = $operacionesDB->consultar(); //solicita a la capa de operaciones de base de datos el conjunto de registros existentes
//elsiguiente código genera el código correspondiente a una tabla HTML
$html = "<table id=\"tablaResultados\">"
. "<thead><tr>"
. "<th>Folio</th>"
. "<th>Nombre</th>"
. "<th>A. Paterno</th>"
. "<th>A. Materno</th>"
. "<th>Accion</th></tr></thead>"
. "<tbody>";
if (!empty($resultados)) { //hay registros
//entonces mediante un ciclo hay que obtener los registros
//e ir llenado el cuerpo de la tabla html
while ($fila = $resultados->fetch_object()) {
$html = $html . "<tr>"
. "<td>$fila->id</td>"
. "<td>$fila->nombre</td>"
. "<td>$fila->apellido_paterno</td>"
. "<td>$fila->apellido_materno</td>"
. "<td>"
. " <img class=\"modificar\" id=\"$fila->id\" src=\"css/img/edit.png\" alt=\"Modificar\" title=\"Modificar Datos\" width=\"20\">"
. " <img class=\"borrar\" id=\"$fila->id\" src=\"css/img/borrar.png\" alt=\"Eliminar\" title=\"Eliminar Persona\" width=\"20\"> "
. "</td>"
. "</tr>";
}
$html = $html . "</tbody></table>";
} else { //si no hay registros termina la tabla
//y agregar el mensaje indicando que no hay registros
$html = $html . "</tbody></table> </br> No hay datos.";
}
echo $html; //imprime el código HTML generado
}
function agregarNuevo(){
//al agregar nuevos datos el formulario debe estar limpio
//por eso se pasan cadenas vacías a la función que
//genera el formulario
echo $html = generaFormulario("", "", "", ""); //imprime el formulario
}
function generaFormulario($id,$nombre,$apPat,$apMat){
//genera el codigo HTML del formulario.
//Pon especial atención en los Id btn_guardar y btn_cancelar ya que se utilizaran en la capa de interfaz
$html=
'<form method="post" action="manejadorAcciones.php">
<input id="id" name="id" value="'.$id.'" type="hidden"/>
Nombre:<input id="nombre" name="nombre" type="text" maxlength="30" value="'.$nombre.'" title="Ingresa Nombre"/><br>
A. Paterno:<input id="apellido_paterno" name="apellido_paterno" type="text" value="'.$apPat.'" maxlength="30" title="Ingresa Apellido Paterno"/><br>
A. Materno:<input id="apellido_materno" name="apellido_materno"type="text" value="'.$apMat.'" maxlength="30" title="Ingresa Apellido Materno"/><br>
<input id="btn_guardar" type="submit" value="Guardar" title="Guardar Persona"/>
<input id="btn_cancelar" type="button" value="Cancelar" title="Cancelar"/>
</form>';
return $html; //retorna el codigo html
}
function guardar() {
//obtiene parametros
global $operacionesDB;
//obtiene los valores enviados por el formulario
$id = $_POST['id'];
$nombre = $_POST['nombre'];
$apellidoP = $_POST['apellido_paterno'];
$apellidoM = $_POST['apellido_materno'];
$operacionExitosa = $operacionesDB->insertar($nombre, $apellidoP, $apellidoM); //solicita a la capa de operaciones de base de datos que inserte un registro con los parámetros enviados
if ($operacionExitosa) { //se inserto el registro?
$html = "<h2>Operación Exitosa</h2>";
} else {
$html = "<h2>No se realizó la Operación</h2>";
}
echo $html; //imprime el mensaje
}
function eliminar() {
global $operacionesDB;
//obtiene parametros
$id = $_POST['id'];
$operacionExitosa = $operacionesDB->eliminar($id); //solicita a la capa de operaciones de base de datos que elimine el registro con el id X
if ($operacionExitosa) { //se elimino el registro?
$html = "<h2>Operación Exitosa</h2>";
} else {
$html = "<h2>No se realizó la Operación</h2>";
}
echo $html; //imprime el mensaje
}
Capa de interfaz de usuario
Como ya se menciono la capa de usuario contiene código HTML y se manean las acciones de los botones con Jquery, se explicará de manera general el código de Jquery si necesita más detalles favor de consultar la página oficial de Jquery y JqueryUI.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Crud Personas by Dav Acoltzi</title>
<link rel="stylesheet" type="text/css" href="css/themes/dark-hive/jquery-ui-1.10.3.custom.css"/>
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript">
var x;
x=$(document);
x.ready(inicio); //cuando la pagina este lista ejecuta la funcion inicio
var formulario;
var btn_guardar;
var btn_cancelar;
var btn_nuevo;
function inicio(){
//selecciona los elementos con el id x
btn_nuevo = $("#btn_nuevo"); // boton con el id btn_nuevo
formulario = $("#formulario");// div con el id formulario
//establece las propiedades del formulario
//inicialmente el formulario estará oculto
formulario.dialog({
autoOpen: false,
show: {
effect: "drop",
duration: 300
},
hide: {
effect: "explode",
duration: 500
},
height: 300,
width: 300,
modal: true}
);
btn_nuevo.button();
btn_nuevo.click(mostrarFormularioNuevo); //al hacer click sobre el botn "Nuevo" se ejecturá la funcion "mostrarFormularioNuevo"
//Se definen las propiedades de los tooltip o mensajes emergentes
$(document).tooltip({
show: {
effect: "explode",
delay: 150
},
hide: {
effect: "explode",
delay: 150
}
});
//llamada a la funcion llenarTabla
llenarTabla();
}
function llenarTabla(){
//realiza la peticion de buscar al manejador de acciones
$.post("manejadorAcciones.php",
{accion:'buscar'},
function(data){
$("#tablaResultadosConsulta").html(data); //recive el codigo html generado por el manejador de acciones y lo pone el div con el id "tablaResultadosConsulta"
agregaAccionesImgBorrar(); //ejecuta la funcion
});
}
function agregaAccionesImgBorrar(){
var img_borrar = $(".borrar");
img_borrar.click(eliminar); //al hacer click sobre la imagen borrar ejecutara la funcion eliminar
return false;
}
function eliminar(){
if(confirm("Se eliminará de manera permamente el registro")){ //si el usuario confirma
//Entonces solicita al manejador de aciones la accion de eliminar y el id del registro a borrar
$.post("manejadorAcciones.php",
{accion:'eliminar',id:$(this).attr("id")},
function(data){
$("#mensajes").html(data); //el mensaje revibido lo muestra en el div con el id "mensajes"
llenarTabla(); //ejecuta la funcion de llenarTabla para actualizar el contenido de la tabla HTML
});
}
}
function mostrarFormularioNuevo(){
//pide al manejador de acciones que genere el formulario
$.post("manejadorAcciones.php",
{accion:'agregarNuevo'},
function(data){
$("#formulario").html(data);
agregaAccionesBtnFormulario(); //agrega las acciones a los botones del formulario
});
formulario.dialog( "open" ); //muestra el formulario
}
function agregaAccionesBtnFormulario(){
btn_guardar = $("#btn_guardar");
btn_guardar.button();
btn_guardar.click(guardar); //al hacer click en el boton guardar se ejecuta la funcion guardar
btn_cancelar = $("#btn_cancelar");
btn_cancelar.button();
btn_cancelar.click(ocultarFormulario); //al hacer click en el boton cancelar se ejecuta la funcion ocultar formulario
return false;
}
function guardar(){
//solicita al manejador de acciones la accion de guardar con los parametros del formulario
$.post("manejadorAcciones.php",
{accion:'guardar',
id:$("#id").val(),
nombre:$("#nombre").val(),
apellido_paterno:$("#apellido_paterno").val(),
apellido_materno:$("#apellido_materno").val()
}, function(data){
$("#mensajes").html(data); //muestra mensaje de operacion
ocultarFormulario();
llenarTabla(); //actualiz el contenido de la tabla HTML
});
return false;
}
function ocultarFormulario(){
formulario.dialog( "close" );
}
</script>
</head>
<body>
<div id="mensajes"></div>
<div id="botones"> <input id="btn_nuevo" type="button" value="Nuevo" title="Agregar Persona"></div>
<div id="tablaResultadosConsulta"></div>
<div id="formulario" title="Datos de Persona"></div>
</body>
</html>
Como podrá ver la capa de interfaz tiene más código de Jquery que HTML, dentro del código HTML se puede ver que únicamente hay div´s vacíos esto se debe a que el contenido de esos div´s se genera dinámicamente por medio del manejador de acciones y Jquery se encarga de llenar los divs con las respuestas del manejador de acciones.
Nota: Para que funcione el codigo se debe descargar la libreria de Jquery(http://jquery.com/) y JqueryUI (http://jqueryui.com/download//)
Nota: Para que funcione el codigo se debe descargar la libreria de Jquery(http://jquery.com/) y JqueryUI (http://jqueryui.com/download//)
conchatumare deja el link para descargar toda tu huevada
ResponderEliminartotalmente deacuerdo...
Eliminartotalmente deacuerdo...
Eliminarbuen ejemplo muchas gracias , podrías realizar un paginado a la tabla?
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarcopie todo e hice todo pero no me resulto (y)
ResponderEliminarCreo que falta mucho mas, no tienen el css, no explica el manejo de archivos, como se llaman, definitivamente le falta mucho
ResponderEliminar