En este post te mostraré un ejemplo completo de CRUD que hace las operaciones fundamentales de la base de datos usando MySQL y PHP, pero además las llamadas se hacen con AJAX desde JavaScript.

Al final te dejaré el código completo que podrás descargar, probar y modificar, mismo que tendrá todas las operaciones para enviar y recibir datos desde JavaScript a un servidor PHP que se conecta a MySQL.

Básicamente todo se hará del lado del cliente, no vamos a procesar formularios con PHP, solo llamadas AJAX con JSON. Así que tendremos un CRUD con PHP y AJAX.

No vamos a usar ninguna librería como React, Vue o Angular; será JavaScript puro.

Descripción general del proyecto

Vamos a usar PHP para reutilizar la plantilla con el encabezado y pie, además de usarlo para la conexión a la base de datos con MySQL y responder las peticiones desde JavaScript.

Ya con JavaScript vamos a procesar todo el funcionamiento del lado del cliente. Podría decirse que PHP se usará para renderizar las vistas y atender peticiones.

Por cierto, igualmente usaremos SweetAlert para los avisos, fetch para las llamadas AJAX y Bulma para los estilos.

Conexión a la base de datos

Usaremos MySQL que bien puede ser reemplazado por MariaDB. Recuerda que las credenciales viven en un archivo llamado env.php que debes crear tú mismo,  basándote en el archivo env.ejemplo.php.

En mi caso se ve así:

Y la conexión así como la lectura del archivo se hace con estas funciones:

Finalmente, el esquema solo contiene una tabla. Para este ejemplo voy a usar una tabla de productos en donde los mismos llevan nombre, descripción y precio, además del respectivo ID.

CRUD de productos

Antes de pasar al uso de la técnica AJAX con JavaScript veamos las operaciones que se hacen desde PHP a la base de datos. Luego vamos a exponer estas funciones en archivos separados que vamos a consultar con JavaScript.

Como puedes ver tenemos las operaciones básicas que una API debería tener. Esto es, obtener todos los datos, obtener por id, actualizar, insertar y eliminar. Ahora cada uno de estos métodos estará en su respectivo archivo que llamaremos desde el cliente.

En cuanto a la interacción con MySQL estamos usando el driver PDO para conectarnos, además de usar sentencias preparadas para evitar inyecciones SQL.

Agregar producto

Vemos el formulario de datos. Cada input tiene un id, esto es muy importante porque más tarde vamos a recuperarlos usando querySelector.

Fíjate en que se está incluyendo un archivo de JavaScript en la última línea. Esta práctica se sigue para los demás archivos. En cuanto al código de JavaScript, primero declaramos unas constantes para los elementos del DOM:

Y escuchamos el clic del botón:

Lo que se está haciendo es recuperar los valores de los campos y hacer una pequeña validación, aunque recuerda que siempre es importante validar en el servidor. En este caso he omitido esa parte por simplicidad.

En caso de que la validación pase, preparamos la carga útil que será un objeto con los datos, y luego lo codificamos con JSON.stringify. La verdadera magia con AJAX está sucediendo cuando invocamos a fetch para que haga la petición.

Finalmente esperamos la respuesta del servidor que también estará en JSON y la manejamos como debe ser. Esto último está en un try catch ya que siempre puede haber problemas al hacer estas llamadas.

Lado del servidor

Pasando a PHP, el archivo es guardar_producto.php, mismo que solo se encarga de obtener el cuerpo de la petición (que será lo que enviamos con JavaScript a través de AJAX), validar su presencia y llamar a una de las funciones que vimos anteriormente:

Ya para terminar en la parte de PHP, devolvemos un booleano dependiendo de lo que devuelva la función para indicar el éxito o fracaso de la operación. Y de manera similar haremos las otras operaciones; ya no explicaré a detalle el código, solo las partes más importantes.

Obtener productos

Este apartado es un poco largo en cuanto al código, pues vamos a obtener los datos, procesarlos para dibujar una tabla (todo a mano) y agregar los dos botones con su respectivo listener.

Veamos el diseño:

Lo único destacable es que estamos definiendo el cuerpo de la tabla, pues sobre ella vamos a dibujar, de manera dinámica, todas las filas dependiendo de la cantidad de productos.

En cuanto al código de JavaScript queda como se ve a continuación:

En las primeras líneas invocamos a un archivo de PHP igualmente usando AJAX, mismo que nos va a devolver un array con los datos. Decodificamos esos datos y después recorremos toda la respuesta.

Lo que hacemos más tarde es crear un elemento <tr>, adjuntarle varias celdas con <td> y finalmente adjuntar esa fila al cuerpo de la tabla. En el caso de los botones, uno de ellos en realidad es un enlace.

Botón de eliminar

Para el clic del botón de eliminar, el código es el siguiente. Si te preguntas de dónde sale la variable idProducto mira la línea 26 del archivo anterior. Cuando el usuario hace clic en este botón se le muestra una alerta de confirmación con SweetAlert:

En caso de que el usuario confirme la acción, se hace igualmente una petición AJAX con el método HTTP delete al archivo eliminar_producto.php pasándole el ID. El contenido del mismo es muy simple y parecido a los otros:

Como puedes ver, estos archivos solo sirven para comunicar lo que quiere JavaScript con las funciones definidas en el archivo que se incluye en la línea 7.

Editar producto

La última operación para completar este CRUD es la de editar. En este caso primero debemos extraer el id del producto leyendo valores de la URL, obtener sus detalles, rellenar el formulario y luego escuchar el clic del botón que actualiza el producto.

Ésta última parte del clic del botón es muy similar a cuando insertamos un producto por primera vez, lo que cambia es la forma en la que se rellena el formulario y la redirección que se hace al terminar de editar.

Veamos el código HTML:

Y en cuanto al código de JavaScript queda así:

Poniendo todo junto

Lo que te he mostrado a través de todo el post solo ha sido el código más importante de todo este proyecto. El código completo y actualizado lo dejaré, como siempre, en mi GitHub.

Recuerda que te he dejado enlaces interesantes a lo largo del artículo por si quieres profundizar más en el tema. De igual modo te dejo algunas cosas que pueden gustarte:

• Consumo de API con Vue y JavaScript
• CRUD con PHP y MySQL
• Más de mis proyectos
• Otros ejemplos con PHP