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:

See the gist on github.

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í:

See the gist on github.

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í:

See the gist on github.

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

See the gist on github.

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í:

See the gist on github.

Ahora vamos a ver cada componente.

Insertar dato: create

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

See the gist on github.

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.

See the gist on github.

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

Listar datos en tabla de Angular

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:

See the gist on github.

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:

See the gist on github.

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.

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

See the gist on github.

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:

See the gist on github.

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:

See the gist on github.

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í:

See the gist on github.

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

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.