Aplicación CRUD con AngularJS – parte I (Servicios).

Este es el primer post de una seria dedicada a realizar una aplicación CRUD con AngularJS, PHP y MySQL.

Esta aplicación CRUD nos permitirá gestionar la información de una entidad, digamos, estudiante.

Para este ejercicio vamos a utilizar las siguientes herramientas:

1. Servidor de hosting gratuito Hostinger.
2. Hostinger nos permite utilizar un servidor WEB Apache, un servidor de base de datos MySQL y un servidor FTP para transferir nuestros archivos.

La siguiente es la arquitectura de nuestra aplicación:

Como podemos ver, debemos desarrollador en dos lados diferentes, esto es: cliente y servidor.

En esta primera parte iniciaremos desarrollando el lado servidor de nuestra aplicación:

Empezamos creando la base de datos «Colegio» compuesta de la tabla llamada «Estudiantes» con la siguiente estructura:

Luego de la base de datos, procedemos a construir nuestro modelo de clases. Este es muy sencillo, dado que sólo tiene la entidad «Estudiante».

En nuestro servidor, creamos la siguiente estructura de directorios incluyendo la clase Estudiante que corresponde a la entidad de negocio:

Posteriormente, debemos crear un servicio que nos permita persistir estudiantes en la base de datos, este servicio vamos a denominarlo persistirEstudianteService, aquí vamos a utilizar una técnica denominada deserialización, que nos permitirá convertir un string (cadena) en formato JSON a un objeto Estudiante de nuestro lenguaje servidor, en este caso PHP. Para esto, vamos a utilizar la función json_decode().

En el ejemplo anterior convertimos el string $jsonEstudiante a un objeto $objetoEstudiante.

Hasta ahora, sólo hemos definido la clase Estudiante, y hemos de-serializado el string $jsonEstudiante a una instancia de esta clase.

En el mundo real, el string JSON va a tener diferentes fuentes: un cliente WEB, un dispositivo móvil, otro servidor… etc, por lo tanto, debemos capturar el flujo de entrada JSON que viene en el request HTTP, esto lo hacemos con la línea de código:

$jsonEstudiante = file_get_contents(«php://input»);

De tal forma, que debemos modificar nuestro servicio PHP, para que lea los datos que provienen del request HTTP:

Es de resaltar la función file_get_contents(«…») de PHP que nos permite obtener el contenido (body) del request HTTP.

Para probar el funcionamiento de nuestro persistirEstudianteService.php, vamos a utilizar una extensión del browser Google Chrome que nos permite disponer de un cliente HTTP para realizar peticiones/requests a un servidor, este complemento se denomina Postman, así que debemos instalar Postman en nuestro navegador Chrome, abrirlo y configurar un request de la siguiente forma:

Seleccionamos «Apps«:

Del menú de aplicaciones elegimos «Postman – REST Client»:

Ahora procedemos a configurar nuestro request/petición HTTP, como sigue:

Note como los parámetros que enviamos en formato JSON corresponden a la información de 1 objeto estudiante.

Ahora que tenemos el objeto estudiante en el servidor, sólo nos queda persistirlo en la base de datos, para esto, vamos a utilizar el API PDO (PHP Data Objects) de PHP:

De nuevo probamos con nuestro cliente HTTP (Postman):

Al verificar si la información ha quedado en la base de datos, podemos constatar que efectivamente se han persistido los datos del objeto enviado por JSON: