Taller 3
Taller 3
Taller No 3
Orlando Tovar Valencia
Introducción
En este taller comenzaremos a crear nuestra lógica de la aplicación de “carritos de
compras” la cual hasta el taller No 2 se había estructurado y puesto en marcha, todo
esto creado desde nuestro archivo index.html y shoppingCart.js, ahora en este taller
desarrollaremos la lógica en el servidor “Apache” con el lenguaje de programación
PHP y manejo de base de datos con MySQL, para esto utilizaremos la comunicación
de la aplicación con el servidor vía servicios REST.
Objetivos
Al finalizar este taller, los estudiantes serán capaces de:
Requisitos
Para la realización de este laboratorio es necesario contar con lo siguiente:
Los archivos del framework de JQuery Mobile.
Un editor de texto de su preferencia.
Tener instalados: Apache, Mysql, PHP
Instalar el programa SoapUi
Servicio Web
Un servicio web (en inglés, Web Service o Web services) es una tecnología que
utiliza un conjunto de protocolos y estándares que sirven para intercambiar
datos entre aplicaciones. Distintas aplicaciones de software desarrolladas en
lenguajes de programación diferentes, y ejecutadas sobre cualquier plataforma,
pueden utilizar los servicios web para intercambiar datos en redes de
ordenadores como Internet. La interoperabilidad se consigue mediante la
adopción de estándares abiertos.
¿Qué es REST?
Métodos HTTP
JSON y XML
Los estándares JSON y XML son con peculiaridad los lenguajes usados para
servir datos desde un Web Services. Los lenguajes son equivalentes, con la
única diferencia de que sus sintaxis tienen su particularidad. He aquí algunos
ejemplos:
Orlando Tovar Valencia
{
"statusCode": 200,
"statusMessage": "OK",
"data": [
{
"Id": "1",
"Usuario": "admin",
"Clave": "21232f297a57a5a74389",
"Status": "1"
}
]
}
Como se puede ver en la imagen anterior nuestra aplicación cuenta con tres nodos
principales, App Mobile, La API y el servidor de base de datos, manejando un modelo 3
capas. En este modelo solo está la parte del procesamiento de los productos, pero con
esta la misma lógica se podrá manipular las categorías.
Orlando Tovar Valencia
Parte No 1
Para esta primera parte del taller No 3 vamos a comenzar creando nuestra base de datos
y seguido a esto insertar los registros necesarios para poder obtener los resultados
esperados.
INSERT INTO `producto` (`ID`, `IDCategoria`, `Nombre`, `Descripcion`, `Valor`, `Imagen`) VALUES
(1, 1, 'Hamburguesa', 'Hamburguesa con doble patacona ....', '12000.00', 'hamburguesa-250x250.png'),
(2, 1, 'Perro Caliente', 'Perro caliente sencillo ....', '10000.00', 'perro-caliente-sencillo_600x600.png'),
(3, 1, 'Salchi Papa', 'La salchipapa es una comida muy popular en Peru', '16000.00', 'salchi-
papa_600x600.png'),
(4, 2, 'Coca Cola', 'Gaseosa de soda refrescante.', '2500.00', 'coca-cola-400x400.png'),
(5, 2, 'Colombiana', 'Gaseosa de 350 cc.', '2200.00', 'colombiana_400x400.png');
Parte No 2
Para esta segunda parte del taller necesitamos crear nuestra estructura de carpetas y
archivos para poner a funcionar los servicios REST que vamos a necesitar, para esto
comenzamos con lo siguiente:
a) CategoriaAPI.php
b) CategoriaController.php
c) CategoriaModel.php
d) index.php
Orlando Tovar Valencia
a) ProductoModel.php
b) ProductoController.php
c) ProductoAPI.php
d) index.php
<?php
class Conexion {
public $db;
const LOCALHOST = '127.0.0.1';
const USER = 'root';
const PASSWORD = '';
const DATABASE = 'carrito';
<?php
require_once "ProductoAPI.php";
?>
/* Encabezados requeridos */
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
switch ($method) {
case 'GET': /** consulta **/
$idCategoria = isset($_GET["idCategoria"]) ? $_GET["idCategoria"] : '';
$this->getAllProducts($idCategoria);
break;
case 'POST': /** inserta **/
echo "Method not developed";
break;
case 'PUT': /** actualiza **/
echo "Method not developed";
break;
case 'DELETE': /** elimina **/
Orlando Tovar Valencia
5) Ahora codificamos el archivo que contendrá la lógica del negocio ósea nuestro
controlador ProductoController.php
<?php
require_once "ProductoModel.php";
public $model;
/**
* Constructor de la clase
**/
function ProductoController(){
/* Instanciamos la clase de persistencia de datos */
$this->model = new ProductoModel();
}
/**
* Obtiene la lista de productos filtrados por su categoria
* @param int $idCategoria identificador unico de la categoria del producto
* @return Json array tipo json con los registro encontrados
**/
public function getAllProducts($idCategoria){
$arrayJson = [];
$rows = $this->model->getAllProducts($idCategoria);
$arrayJson[$key] = array(
"id" => $row["ID"],
"name" => $row["Nombre"],
"value" => $row["Valor"],
Orlando Tovar Valencia
echo json_encode($arrayJson);
}
}
?>
<?php
require_once "../Conexion.php";
/**
* Obtiene la lista de productos filtrados por su categoria
* @param int $idCategoria identificador unico de la categoria del producto
* @return data regresa los datos encontrados en la tabla producto
**/
public function getAllProducts($idCategoria){
return $rows;
}
}
?>
Desarrollado este paso, vamos a proceder a probar nuestro servicio REST, para esto
necesitamos instalar la siguiente herramienta:
- SoapUI, la url de descarga es: https://www.soapui.org/downloads/soapui.html
Orlando Tovar Valencia
7) Una vez instalada procedemos con la prueba de nuestro primer servicio REST,
damos click en REST, luego pegamos la url en la que quedo nuestro servicio
creado dentro de nuestro servidor APACHE.
Orlando Tovar Valencia
8) Procedemos a generar la petición GET a nuestro servicio, para ver que nos
retorna, para esto le damos click en el botón , y nos devuelve un error donde
nos especifica que la respuesta que envió el servidor no es soportado en formato
xml.
Si damos click en la pestaña JSON nos responderá que el contenido del json
Orlando Tovar Valencia
está vacío:
Lo que quiere decir que nuestro servicio está funcionando, pero no devolvió nada,
esto porque el espera a que nosotros le enviemos como parámetro el id de la
categoría.
10) Volvemos a ejecutar el servicio y nos debería mostrar los productos filtrados por
la categoría No 1:
Parte No 3
En esta última parte del taller No 3, terminaremos la parte del servicio REST que consulta
las categorías que tenemos para los productos.
<?php
require_once "CategoriaAPI.php";
?>
/* Encabezados requeridos */
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$method = $_SERVER['REQUEST_METHOD'];
switch ($method) {
case 'GET': /** consulta **/
$this->getAllCategories();
break;
Orlando Tovar Valencia
3) Ahora codificamos el archivo que contendrá la lógica del negocio ósea nuestro
controlador CategoriaController.php
<?php
require_once "CategoriaModel.php";
public $model;
/**
* Constructor de la clase
**/
function CategoriaController(){
/* Instanciamos la clase de persistencia de datos */
$this->model = new CategoriaModel();
}
/**
* Obtiene la lista de categorias
* @return Json array tipo json con los registro procesados
**/
public function getAllCategories(){
$arrayJson = [];
$rows = $this->model->getAllCategories();
Orlando Tovar Valencia
$arrayJson[$key] = array(
"id" => $row["ID"],
"name" => $row["Nombre"],
"amount" => $row["Cantidad"],
"description" => $row["Descripcion"],
"img" => $row["Imagen"]
);
}
echo json_encode($arrayJson);
}
}
?>
<?php
require_once "../Conexion.php";
/**
* Obtiene la lista de las categiras
* @return data regresa los datos encontrados en la tabla categoria
**/
public function getAllCategories(){
/* Consulta que trae las categorias con la cantidad de productos que tiene cada
Una de ellas, se realiza una sub-consulta para sacar esto. */
$sql = "SELECT
c.ID,
c.Nombre,
c.Descripcion,
c.Imagen,
(SELECT COUNT(*) FROM producto AS p WHERE c.ID = p.IDCategoria) AS Cantidad
FROM
categoria AS c";
Orlando Tovar Valencia
$query = $this->db->prepare($sql);
$query->execute();
$rows = $query->fetchAll(PDO::FETCH_ASSOC);
return $rows;
}
}
?>
Hasta este punto ya tememos creado toda la estructura de servicios REST de nuestra
aplicación y se encuentra funcionando correctamente en el servidor APACHE, en el
siguiente taller conectaremos nuestra app Jquery Mobile para consumir estos servicios.