DEMOSTRACIÓN

En este tutorial voy a compartir un fragmento de código que nos ayudará a la hora de realizar ciertas operaciones básicas en una base de datos MySQL, como lo es: crear, leer, actualizar y eliminar datos (CRUD por sus acrónimos en ingles).

La idea de este ejemplo es proporcionar la idea de manera básica a programadores principiantes, y que puedan tomarlo como una base para trabajar en sus proyectos web.

Características del tutorial:

1. Insertar registros en la base de datos MySQL.
2. Leer los registros de la base de datos y listarlos.
3. Actualizar los registros.
4. Eliminar los registros.

Tecnologías utilizadas:

1. HTML
2. PHP con MySQL
3. jQuery
4. Bootstrap
5. CSS
6. AJAX

CRUD de productos con PHP – MySQL – jQuery AJAX

Comencemos por crear nuestra aplicación web de demostración para aprender las operaciones CRUD, lo primero que vamos a ver es crear una base de datos y tablas requeridas. (si tienes tu base de datos lista en mysql, sigue adelante y crea la tabla usando el siguiente código sql). Estoy asumiendo que tienes una base de datos creada y lista para usar.

Crear la base de datos MySQL y tabla requerida:

Estructura básica del index.php:

Crea el archivo llamado “index.php” e incluye los archivos básicos para que jQuery y Bootstrap  funcionen, tal como se muestra a continuación:

Ahora que hemos creado el archivo index.php, debemos crear un directorio llamado “html“, y en dicho directorio vamos a crear los archivos siguientes:

modal_add.php

modal_delete.php

modal_edit.php

Lo que hemos hecho anteriormente es crear 3 archivos que contienen formularios que son cargados desde el archivo “index.php”, a manera de ventanas modales. Ahora vamos a crear una carpeta llamada css y en dicha carpeta crear un archivo llamado “custom.css”, el cual se encarga de dar estilos css personalizados a las tablas html que se ha utilizado para este ejemplo.

Conexión de nuestra con la base de datos

Para conectarme con la base de datos mysql, he usado la extensión mysqli y realizado una conexión a  manera de procedimientos,  el código empleado en el archivo “conexion.php” es el siguiente:

Ahora que ya nos hemos conectado a la base de datos, se procede a crear un nuevo directorio llamado js, dentro del cual he creado un archivo llamado “script.js”. Dicho archivo es llamado desde el index.php y se encarga de gestionar mediante jquery y ajax todas las peticiones a nuestro servidor en tiempo real y sin tener que recargar la pagina por cada acción que realicemos

Script PHP para leer registros existentes de la base de datos:

Para poder leer los archivos de la base de datos lo haremos mediante una petición ajax al servidor, dicha petición se realiza desde el archivo script.js.

La función JavaScript load(); se encarga de realizar una petición a un archivo llamado “listar_productos.php“, que lo hemos colocado dentro del directorio ajax. El código es mostrado a continuación:

El archivo anterior se conecta con la base de datos y realiza una consulta a nuestra tabla. También nos devuelve los registros paginados, ya que hace una include de un archivo nombrado “pagination.php“, siempre dentro del directorio ajax.

pagination.php

Ahora que hemos realizado y paginado una consulta a la base de datos, así es como se mostrarán los datos en el navegador web:

Script PHP para guardar registros en la base de datos:

Para poder almacenar los datos en nuestra base de datos mysql, vamos a crear dentro del directorio ajax, un archivo llamado “guardar_producto.php“. Su código es mostrado a continuación:

El formulario que captura los datos desde una ventana modal es el siguiente:

Script PHP para actualizar los registros de la base de datos:

Para poder actualizar los registros dentro de la base de datos, es necesario crear siempre dentro del directorio ajax, un archivo llamado “editar_producto.php” y colocamos el código siguiente:

El formulario que muestra los datos a actualizar, es mostrado a continuación:

Script PHP eliminar registros de la base de datos:

Se debe crear un archivo en el directorio ajax, y nombrarlo “eliminar_producto.php“, y pegar el código siguiente:

Para eliminar un registro es necesario confirmar el cuadro de dialogo.

Finalmente hemos terminado con la función CREAR, LEER, ACTUALIZAR y ELIMINAR,  puedes probar el código completo, descargando todos los archivos fuente, en el enlace a continuación.

Vídeo de demostración