CRUD angular con PHP y MySQL (usando Angular Material)

Angular, PHP y MySQL – CRUD

Resumen: en este post te mostraré cómo consumir una base de datos de MySQL con Angular, usando PHP como lenguaje de servidor y AJAX (con el módulo HttpClient de Angular) para enviar los datos.

Para los estilos vamos a usar Angular Material. Puedes ver el código en GitHub y una demostración con su explicación en el siguiente vídeo:

CRUD de Angular con PHP y MySQL

Si eres nuevo en esto, dejo unos enlaces de interés. Vamos a usar PHP así que es necesario configurar CORS. Para la base de datos vamos a usar MySQL, si quieres puedes comenzar aprendiendo PHP y MySQL.

Después vamos a crear la app de Angular, todos los componentes son generados con la CLI. Más tarde se agrega Angular Material, se crea un servicio que usa el módulo HttpClient, un momento más tarde se configura el router y en algunos componentes utilizamos formularios.

No te preocupes, iremos poco a poco.

Base de datos

La base de datos puede llamarse como quieras, solo recuerda cambiar el nombre en el archivo bd.php listado abajo.

El esquema de la única tabla es el siguiente, puedes pegarlo directamente en la consola o usando phpmyadmin:

Lado del servidor

El lado del servidor es sencillo y simple. Vamos a dividir cada operación en un archivo e incluir el de la conexión a la base de datos en cada uno de ellos.

Dentro de cada archivo se ejecuta la sentencia SQL para el insert, update, delete y select.

Quedan así:

Como ves en el inicio de cada uno de ellos configuro CORS, después decodifico o codifico los datos con JSON y hago las consultas en cada archivo.

Eso es todo lo que haremos del lado del servidor.

El servicio para conectar Angular con PHP

Ahora tengo un servicio que se encargará de llamar a todos esos archivos del servidor. Queda así:

En el servicio utilizo HttpClient, y la clase Mascota que es la siguiente:

El campo id es opcional pues no todos los objetos tendrán id, solo los que ya han sido guardados previamente.

El enrutador

Como estamos creando una SPA con Angular usamos el enrutador de angular; queda configurado así:

Ahora vamos a ver cada componente.

Insertar dato: create

Formulario para insert en Angular con MySQL
Formulario basado en plantilla para registrar un nuevo dato con PHP y MySQL desde Angular

Comencemos viendo el componente para insertar datos. Primero diseñamos el formulario con Angular Material y se ve así:

Dentro de la lógica simplemente esperamos a que el formulario sea enviado, invocamos al servicio previamente visto y mostramos un Snackbar indicando que se ha registrado correctamente.

Para registrar el valor invocamos a addMascota.

Después navegamos a la vista de para listar todas las mascotas y se ve así:

Snackbar de registro correcto

Listar datos en tabla de Angular

Listar datos - Operación select con PHP, Angular y MySQL

Ahora veamos la operación select. Para ello invocamos al archivo getAll de PHP y traemos los datos en formato de arreglo. Comencemos viendo la vista HTML:

Es una tabla de Angular Material. Depende del arreglo mascotas y define algunos botones, uno para editar que navega a la ruta de edición (definida en el router) y otro para eliminar que invoca al método eliminarMascota.

La lógica en el lenguaje TypeScript es la siguiente:

Definimos un arreglo que va a ser el de la tabla; el mismo será modificado más tarde al invocar a obtenerMascotas que consume el servicio de Angular y asigna el valor (línea 42)

En el método ngOnInit obtenemos los datos. También tenemos la función que elimina un valor, que igualmente consume al servicio en el método deleteMascota.

Eliminar valor de MySQL con Angular y PHP

Veamos la operación delete, tanto de HTTP como de MySQL. Para ello vamos a usar un diálogo de confirmación que ya expliqué en otro post, igualmente podrías usar un confirm nativo de JavaScript.

Confirmación para eliminar un valor de MySQL usando Angular

En caso de que se confirme, se ejecuta lo siguiente:

Eso invocará al método deleteMascota del servicio que a su vez invocará al archivo delete.php que hará una sentencia DELETE de SQL.

Editar valor y rellenar formulario

La última operación que veremos es la de editar un valor, para ello usaremos los parámetros del router de Angular para recuperar el id y después obtener el valor en MySQL para más tarde rellenar el formulario.

El código es el siguiente:

Lo importante aquí es el ngOnInit que es en donde obtenemos el parámetro de la ruta y a partir del mismo obtenemos el valor por id llamando al método getMascota.

En cuanto tenemos el valor lo asignamos y así se refleja en la vista, en donde ya está definido el formulario:

Cuando el formulario sea enviado invocamos a updateMascota.

El menú de navegación

Todas las vistas que mostré están dentro de un contenedor tipo navigation drawer. La vista padre queda así:

Con el siguiente resultado (el menú de navegación se puede ocultar y se ve a la izquierda)

CRUD angular con PHP y MySQL (usando Angular Material)

Conclusión y notas finales

Hemos terminado de implementar una aplicación web con Angular usando los estilos de Material Design y PHP como lenguaje de servidor, además de MySQL como manejador de base de datos.

Con esto podemos darnos una idea de cómo conectar el framework Angular con casi cualquier lenguaje de servidor. Espero traer más ejemplos en el futuro, mientras tanto te invito a suscribirte o a ver más artículos sobre Angular.

Por cierto, para la URL base estoy usando variables del entorno, así cambio la URL del servidor dependiendo de si estoy o no en producción.

Nota: prueba la app aquí, o mira el código en GitHub.

Bonus: cómo instalar

Como ves, en el repositorio existe la carpeta server. Esa carpeta server debe estar en tu servidor con PHP y Apache (o cuaquier otro servidor web que soporte PHP)

En modo desarrollo, utiliza CORS. Después, cuando hayas terminado, compila con ng build --prod y copia todo lo generado dentro de dist/crud-angular-php-mysql a la carpeta del servidor (en donde están los archivos de PHP), pues ya no necesitas servirlo con Node en producción, sino con PHP.

No olvides configurar la ruta del servidor dentro de los archivos que están en el directorio environments.

Si quieres algo rápido, simplemente descarga la versión ya compilada, colócala en tu directorio público, configura credenciales de base de datos en bd.php, crea la tabla y listo.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

9 comentarios en “Angular, PHP y MySQL – CRUD”

  1. *Is the syntax still working fine without errors today 05/12/2022?
    *¿Aún sigue funcionando bien sin errores la sintaxis hoy en día 12/05/2022?

    *in case no give me suggestions or something updated to 2022
    *en caso de que no, denme sugerencias o algo actualizado a 2022

  2. Buenas como estas? tengo un problema con el codigo, lo estoy intentando replicar pero siempre me sale este error Access to XMLHttpRequest at ‘http://localhost/mascotas_angular/getAll.php’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Podrias apoyarme para ver porque ese error?

    1. Como el error lo indica, es CORS. Debes configurar los encabezados en PHP; pero recuerda que solo es para el modo desarrollo, para producción no es necesario.
      Saludos 🙂

Dejar un comentario