Aplicaciones web dinámicas e híbridas

Caso práctico

Foto del personaje María trabajando con su portátil.

StartupStockPhotos (Licencia de contenido (Pixabay))

Juan y Carlos tienen definida la estructura de la aplicación web que deben desarrollar. Han llevado a cabo algunas pruebas de programación, y están contentos con los resultados obtenidos. Antes de seguir avanzando, deciden reunir al equipo de BK Programación para mostrarles los progresos realizados y el plan de desarrollo previsto.

Durante la presentación de la aplicación web, todo el equipo se muestra entusiasmado con el aspecto que está tomando el proyecto. Ada, la directora, les felicita por el trabajo que han llevado a cabo hasta el momento. Ana, que tiene experiencia como diseñadora gráfica, se ofrece a ayudarles con el aspecto visual del interfaz web. Pero de todas las opiniones, hay una que les llama la atención. María, que se encarga del mantenimiento de servidores y sitios web, les pregunta si han tenido en cuenta la posibilidad de integrar en su aplicación algún tipo de código cliente, de poner algún mapa o de usar de usar otros servicios web para mejorar la funcionalidad. Les comenta que muchas aplicaciones actuales lo utilizan dentro de su estructura para muy diversas funciones.

Juan y Carlos se miran, y saben que ambos están pensando lo mismo. Habrá que hacer un último esfuerzo e informarse sobre el tema. Si deciden que resulta interesante, aún están a tiempo de incorporarlo en su proyecto.

Ocultar

Imagen que muestra un helado muy apetecible.

Steve Buissinne (Licencia de contenido (Pixabay))

Hoy en día las aplicaciones web son tan versátiles que parecen capaces de hacer de todo. Podemos encontrar aplicaciones web que implementan editores de vídeo e imágenes on-line, aplicaciones web que nos permiten hacer presentaciones, editar documentos,... las posibilidades son innumerables.

Para desarrollar este tipo de aplicaciones obviamente hay un equipo de programadores y programadoras enorme y desarrollarlas requiere horas y horas de trabajo. Pero su desarrollo no sería posible si no existieran otras tecnologías que le dan soporte y que son la base fundamental para poder llevar a cabo ese tipo de proyectos.

Pues bien, esos servicios no serían posibles si no existiera Javascript y AJAX, conceptos en los que profundizaremos en esta unidad. Tampoco serían posibles si las aplicaciones web no se pudieran conectar entre sí para ofrecer servicios más completos y ricos, dando lugar a las conocidas aplicaciones web híbridas. Vamos a adentrarnos en este interesante mundo, ¿te apetece?

1.- Introducción a las aplicaciones web dinámicas e híbridas.

Ocultar

Caso práctico

Ocultar

Imagen de dos hombres sentados charlando.

James Oladujoye (jamesoladujoye) (Licencia de contenido (Pixabay))

Ada revisa la aplicación web y les propone retocar un par de detalles, sobre todo relativos a la apariencia. Con los años de experiencia que tiene en el desarrollo de aplicaciones, les ofrece también algunos consejos sobre la usabilidad de los interfaces, y le indica que es muy importante seguir algunas normas básicas que garanticen la accesibilidad de la aplicación.

Por último, tienen que hablar con su amigo Esteban para concretar los detalles de la implantación de la aplicación en las dependencias del cliente. Parece que están a punto de finalizar el proyecto, aunque es posible que tengan que integrar su aplicación con otras aplicaciones web que ya usa el cliente.

Ocultar

Las aplicaciones web de hoy día son aplicaciones que trabajan a múltiples niveles. Como ya has visto en unidades anteriores las aplicaciones web que se ejecutan en el servidor pueden ofrecer servicios a otras aplicaciones web, y a su vez, podemos implementar aplicaciones que usen servicios disponibles en aplicaciones web de terceros. Incluso podemos crear aplicaciones web cuya arquitectura interna esté basada íntegramente en el uso de servicios, modelando la estructura interna como si todo fueran servicios usando los conceptos de la arquitectura orientada a servicios (SOA).

Vamos a hacer un pequeño recorrido sobre los escenarios en los que puede encontrarse una aplicación web actual:

A) Aplicaciones web donde solo interviene el servidor web

En estas aplicaciones el navegador se limita a renderizar la interfaz de usuario generada por la aplicación web y la aplicación web se limita a generar HTML, CSS y poco más. Conforman el modelo de aplicaciones visto hasta ahora.

Imagen donde se visualiza la función del navegador (renderizar páginas) y del código PHP de la aplicación web (generación de interfaz de usuario)

Salvador Romero Villegas (Elaboración Propia). (CC BY-NC-SA)

B) Aplicaciones web dinámicas

Teniendo en cuenta que los navegadores web son capaces de realizar cierto procesamiento a través de Javascript, es muy habitual que las aplicaciones web actuales incluyan:

Pre-validación de datos en el navegador. Por ejemplo, antes de enviar una petición HTTP al servidor con datos de un formulario en el navegador se realiza una prevalidación de los datos. Esta pre-validación no quita que en el servidor tengamos que hacer también una validación y saneado estricto de datos, pero quita carga de trabajo en el servidor.
Añadir efectos en la interfaz. Por ejemplo, menús desplegables o elementos que se resaltan al pasar el ratón por encima.

En este escenario el procesamiento que se realiza en el servidor web y en el navegador son independientes entre sí:

Imagen que muestra por un lado como el servidor web se encarga de generar la interfaz de usuario, y por otro, que el navegador puede a través de Javascript realizar una prevalidación de datos y generar efectos en la interfaz de usuario

Salvador Romero Villegas (Elaboración propia) (CC BY-NC-SA)

C) Aplicaciones web dinámicas con AJAX

En este escenario se amplía la funcionalidad de las aplicaciones web en el lado del cliente, es decir, en el navegador. Ahora la página se actualizará dinámicamente usando datos que están en el servidor web y además sin renderizar la página entera. Para esto desde Javascript se realizan peticiones al servidor web para obtener la información necesaria para actualizar el contenido de la página, y también desde Javascript, se modificará el contenido de la página que el usuario visualiza. Aquí el procesamiento que se realiza en el servidor web y en el navegador web dejan de ser independientes.

Imagen en la que se visualiza como desde Javascript se podrían realizar peticiones AJAX para recabar datos en el servidor web que permitirían actualizar el contenido de la página de forma dinámica sin recargarla entera.

Salvador Romero Villegas (Elaboración propia) (CC BY-NC-SA)

D) Aplicaciones web híbridas en el lado del cliente.

Este escenario tiene similitudes al escenario anterior. La idea es que en el navegador, bien a través de HTML o bien a través de Javascript, se usan servicios externos para conformar una aplicación web más rica. Un ejemplo típico es la integración de mapas.

Imagen que describe como a través de peticiones a un servicio externo desde el mismo navegador o desde Javascript puede enriquecerse la interfaz de usuario.

Salvador Romero Villegas (Elaboración propia) (CC BY-NC-SA)

E) Aplicaciones web híbridas en el lado del servidor.

Por último en este escenario se utiliza un servicio web externo desde nuestra misma aplicación web para realizar aplicaciones web más completas. Un ejemplo podría ser una aplicación web que realiza una petición de transporte a una empresa de trasportes cuando el usuario finaliza un pedido.

Imagen en la que se visualiza como desde PHP se accede a un servicio web externo para conformar el servicio web ofertado.

Salvador Romero Villegas (Elaboración propia) (CC BY-NC-SA)

Hasta ahora las aplicaciones web que hemos realizado estaban más bien centradas en el primer escenario, en esta unidad abordaremos los principios de los otros cuatro escenarios, partiendo de la base de que en unidades anteriores ya se han revisado los conceptos de servicio web y su creación.

Recuerda que los servicios web permiten a tus aplicaciones comunicarse con otras utilizando la web (el protocolo HTTP) como medio de transmisión. Los servicios web actuales ofrecen APIs para acceder a los servicios web que suelen estar basadas en REST, aunque todavía está muy extendido el protocolo SOAP y hay otros sistemas que toman fuerza (como GraphQL). En estos servicios web la comunicación con el servicio web se realiza normalmente en XML o JSON.

Para saber más

Ocultar

REST no es un estándar, pero muchos servicios web actuales se implementan utilizando arquitecturas de tipo REST. Échale un vistazo al siguiente artículo para recordar el concepto:

Artículo sobre REST.

2.- Programación en el lado del cliente web.

Caso práctico

Ocultar

Fotografía de una persona manejando un ordenador. — Stockbyte (CD-DVD Num. SD174) (Uso educativo no comercial para plataformas públicas de Formación Profesional a distancia.)

El primer paso que deciden dar Juan y Carlos, siempre contando con el asesoramiento de María, es informarse sobre las tecnologías de programación web actuales. Conocen de oídas el lenguaje JavaScript, y saben cuáles son los fundamentos de la tecnología AJAX, pero no tienen claras las ventajas e inconvenientes que les puede suponer su incorporación al proyecto en el que están trabajando.

Y lo más importante; si finalmente consideran que puede ser ventajoso introducir en su aplicación web algún tipo de programación que se ejecute en el navegador… ¿Cómo se puede integrar ésta con la programación del servidor web? ¿Pueden coexistir, y aún más, integrarse ambos lenguajes de alguna forma?

Siguiendo su método de trabajo, deciden buscar información por separado y compartirla pasados unos días.

Ocultar

RosZie (Licencia de contenido (Pixabay))

Cuando comenzaste con el presente módulo, uno de los primeros conceptos que aprendiste es a diferenciar entre la ejecución de código en el servidor web y la ejecución de código en el navegador o cliente web.

Todo lo que has aprendido hasta el momento se ha centrado en la ejecución de código en el servidor web utilizando el lenguaje PHP. La otra parte importante de una aplicación web, la programación de código que se ejecuta en el navegador, tiene su propio módulo dedicado, Desarrollo Web en Entorno Cliente, sin embargo, como veremos en esta unidad, existen algunos puntos de unión entre ambas partes.

La mayor parte de las aplicaciones web que existen en la actualidad tienen dos componentes: una parte de la aplicación que se ejecuta en el servidor y que generalmente se encarga de la lógica de negocio; y otra parte de la aplicación que se ejecuta en el cliente y que se encarga de gestionar la interfaz de usuario. La interfaz de usuario tiene su propio lenguaje de programación que se ejecuta en el navegador web: javascript. La unión de ambas tecnologías de forma eficiente es fundamental.

El nivel de integración entre el código que se ejecuta en el cliente web y el código que se ejecuta en el servidor web puede variar de una aplicación a otra en función de las necesidades. Para el propósito de esta unidad vamos a distinguir tres niveles fundamentales:

Utilización de javascript para generar animaciones y efectos de usuario.
Utilización de javascript para prevalidación y presaneado de los datos antes de ser enviados al servidor web.
Utilización de javascript para modificar el contenido de la interfaz de usuario. En este nivel encontramos aplicaciones que desde el mismo navegador web inician comunicaciones con el servidor web para obtener datos y actualizar dinámicamente la interfaz de usuario, sin tener que recargar la página completamente.

Hoy día es habitual encontrarse con aplicaciones web tremendamente ricas en lo relativo a la interfaz de usuario. Desde hace bastante tiempo se habla de aplicaciones SPA (Single Page Application). Este tipo de aplicaciones son el máximo exponente del tercer nivel antes comentado: aplicaciones cuya interfaz de usuario se gestiona íntegramente desde Javascript. En este tipo de aplicaciones se carga un HTML inicial y a través de Javascript se gestiona completamente todo el contenido que ve el usuario, generando una sensación de usuario similar a la de una aplicación de escritorio. Ejemplos de este tipo de aplicaciones web son Google Docs, Gmail o Outlook (la versión online).

En la presente unidad vamos a revisar cómo integrar estas dos partes en una misma aplicación web: código PHP que se ejecutará en el servidor con código que se ejecutará en el navegador web.

Si queremos insertar código Javascript para que se ejecute en un cliente web (un navegador), debemos indicarlo en el HTML a través de etiquetas especiales. De esta forma el navegador detectará la secuencia y será capaz de ejecutarlo. Esta etiqueta es la siguiente:

<!-- Inclusión de código en el documento HTML -->
<script type="text/javascript">
// Código que ejecuta el navegador
alert ("Bienvenido a Javascript!");
</script>

Cuando el volumen de código es muy alto podemos separar el código Javascript en otro archivo e indicarle al navegador que lo debe cargar como otro recurso más. Esto lo haremos así:

<!-- Inclusión de código en un fichero externo -->
<script type="text/javascript" src="codigo.js"></script>

Las etiquetas <script></script> pueden incluirse tanto en el <head></head> como en el <body></body> con sutiles diferencias. Habitualmente:

Formas de incluir Javascript en un documento HTML
Dentro del <head></head>	Al final del bloque <body></body>
<HTML> <head> <script type="text/javascript"> alert ("Bienvenido a Javascript!"); </script> </head> <body> ¡Contenido de la página!<br /></body> </HTML> En este caso, salvo que se indique lo contrario, el código Javascript se cargará y se ejecutará antes de que se empiece a renderizar la página. Si ejecutas el código anterior verás que el contenido de la página se muestra después de mostrar el mensaje de alerta, con lo que la página en sí no tiene contenido en el momento de generar el mensaje. Esto puede empeorar la experiencia de usuario que tiene que esperar a que el script se ejecute para empezar a ver el contenido. Este comportamiento se puede modificar usando el atributo defer, para así conseguir que el código Javascript se ejecute tras la renderización del código HTML: <HTML> <head> <script type="text/javascript" defer> alert ("Bienvenido a Javascript!"); </script> </head> <body> ¡Contenido de la página! </body> </HTML>	<HTML> <head> </head> <body> ¡Contenido de la página! <script type="text/javascript"> alert ("Bienvenido a Javascript!"); </script> </body> </HTML> Para asegurar que el script se empieza a ejecutar cuando el contenido se ha renderizado se suele incluir la etiqueta <script></script> justo antes de </body>. Esto consigue que el documento HTML esté cargado en memoria antes de que el código Javascript empiece a ejecutarse.

Debes conocer

Ocultar

Actualmente, con HTML5 en todos los navegadores modernos ya no es necesario incluir lo de type="text/javascript" dentro de la etiqueta <script></script> puesto que JavaScript es el lenguaje de script por defecto.

Ocultar

Cuando el código se incluye en el propio documento HTML, se suele encerrar en una sección CDATA para no encontrar errores de validación en documentos XHTML. Estos errores aparecerían si dentro del código del guión hubiera algún carácter especial como < o >.

Sin embargo, al utilizar una sección CDATA,sección CDATAEs una forma de marcar una parte de un documento XML (XHTML en nuestro caso) para que no sea interpretada al procesar el documento. Las siglas se refieren a que esa parte del documento contiene sólo "Character Data". puede suceder que cuando se procese la página como documento HTML, algún navegador no reconozca éstas secciones. Es por este motivo que el texto CDATA que identifica estas secciones suele también ponerse dentro de un comentario (por ejemplo, utilizando // o /* */).

<script type="text/javascript">
/* <![CDATA[ */
// Código que ejecuta el navegador
/* ]]> */
</script>

Para saber más

Ocultar

En la siguiente página puedes encontrar información sobre la forma más adecuada de incluir Javascript en tu código dependiendo de la situación:

¿Dónde poner la etiqueta <script>? (en inglés)

Autoevaluación

Ocultar

Solución

2.1.- El lenguaje Javascript. (I)

Ocultar

ArtsyBee (Licencia de contenido (Pixabay))

El lenguaje de guiones que se utiliza mayoritariamente hoy en día para la programación de clientes web es JavaScript. Su sintaxis está basada en la del lenguaje C y parecida en algunos aspectos al lenguaje PHP. Aunque su utilización principal es incorporarlo a páginas web, también puedes encontrar JavaScript en otros lugares como en documentos PDF, o para definir la funcionalidad de extensiones de escritorio o de algunas aplicaciones (widgetsWidget Es una aplicación, generalmente pequeña, que se ejecuta sobre otra aplicación denominada motor de widgets, y con frecuencia orientada a incorporar alguna funcionalidad adicional o a mejorar el aspecto visual de otra aplicación o del escritorio del sistema operativo del usuario.).

Si bien, la gran mayoría de navegadores web soportan código en lenguaje JavaScript, debes tener en cuenta que:

La ejecución de JavaScript en el navegador puede haber sido deshabilitada por el usuario.
La implementación de JavaScript puede variar de un navegador a otro. Puede haber características de Javascript disponibles en un navegador que no lo estén en otro.

A través de las siguientes páginas vamos a revisar la sintaxis básica de Javascript, tienes que tener en cuenta que no es el propósito de este módulo por lo que vamos a ver su sintaxis a nivel muy general. Vamos a empezar revisando los tipos de datos de Javascript. En Javascript los tipos de datos son dinámicos, es decir, se establecen en el momento de asignarle un valor a una variable. Para crear una variable en Javascript tenemos las siguientes opciones:

let variable1=7; //Crear una variable de ámbito local (solo disponible dentro de la función o bloque)

var variable2=7; //Crear una variable de ámbito global (disponible en cualquier sitio aunque se inicialice dentro de una función o bloque)

variable3=7; //Asignarle directamente un valor (es equivalente a usar var)

const constante3=10; //Creación de una constante, contenido no modificable

Los tipos primitivos que tiene Javascript son:

Tipo primitivo String

Un ejemplo de cadena de texto sería:

<script>
let c="Ejemplo!";
alert (c);
</script>

Puedes concatenar cadenas y números usando el operador: +

<script>
let a="Ejemplo ";
let b="numero ";<br />let c=2;
alert (a+b+c);
</script>

Tipo primitivo número

Los números son básicamente números con decimales y enteros, por ejemplo:

<script>
let a=1.4; 
let b=4.3; 
let c=2;
alert (a+b+c);
</script>

Las operaciones que podemos hacer con ellos son prácticamente las mismas que en PHP.

Tipo primitivo Boolean

Las variables de tipo primitivo Boolean puede contender dos valores posibles, true o false. El resultado de una operación comparación (por ejemplo, 5>7) es un boolean. Además, sobre las variables tipo boolean podemos hacer operaciones lógicas. Veamos un ejemplo rápido:

let x=true;
alert(typeof x); //Mostrará el tipo "boolean" en una alerta de usuario

x=5>7; 
console.log (x); //Mostrará false por la consola de depuración

let y=x || 7<9; //Operación O lógica
console.log (y); //Mostrará true por la consola de depuración

y=x && 7<9; //Operación Y lógica
console.log (y); //Mostrará false por la consola de depuración

y=!x; //Negación lógica
console.log (y); //Mostrará true por la consola de depuración

Tipos primitivo undefined y null

El tipo undefined indica ausencia de valor. Por ejemplo:

<script>
let a; //al no tener asignado un dato tiene el valor "undefined"
alert (a); //se mostraría "undefined"
</script>

Sin embargo, el tipo primitivo null indica ausencia de un objeto. Normalmente, se establece a mano:

<script>
let a=null; //se asigna el valor "null" para denotar la ausencia de un objeto
alert (a); //se mostraría "null"
</script>

Además en Javascript tenemos las siguientes estructuras dinámicas:

Arrays

El uso de arrays es ligeramente diferente a PHP. En primer lugar, no disponemos de arrays asociativos, pero la creación y el acceso a los elementos es similar. Veamos un ejemplo sencillo:

<script>
//Creamos un array (podemos mezclar tipos de datos diferentes)
let a=[1,'A',2,3,'C'];

//La longitud del array se obtiene usando .length:
let longitudDeArray=a.length;

//Podemos añadir un elemento al final usando .push
a.push('D');

//Podemos añadir un elemento al principio usando .unshift
a.unshift('0');

//Podemos eliminar un elemento del final usando .pop
console.log(a.pop());

//Podemos eliminar un elemento del principio usando .push
console.log(a.shift());

//Podemos acceder elemento a elemento usando []
console.log(a[2]);

//Y podemos modificar un elemento de forma similar a PHP:
a[1]=8;

</script>

Objetos

Javascript permite el uso de objetos con una sintaxis bastante sencilla:

       //Crear objeto (puede no tener atributos al inicio)
        let objeto={'a':3, 'b':'valor'};
        //Acceder al valor de un atributo:
        console.log (objeto.a);
        //Añadir un atributo
        objeto.c='nuevo atributo';
        //Obtener el valor de un atributo
        console.log(objeto.b);
        //Formas alternativas de manipular atributos
        objeto['d']=5;
        console.log (objeto['d']);
        //Borrando un atributo
        delete(objeto.c);
        console.log(objeto.c); //Mostrará undefined
        //Añadiendo un método
        objeto.metodo=function (v) { return v+this.a};
        //Usando un método
        console.log(objeto.metodo(7)); //Mostrará 10

Javascript permite también trabajar con clases y otros elementos de programación, pero no es el propósito de este módulo, por lo que no vamos a profundizar más en ese aspecto.

Debes conocer

Ocultar

En los navegadores actuales existen potentes herramientas de desarrollo que podemos habilitar de diferentes formas. Tanto en Firefox, Chrome como Edge el kit de herramientas de desarrollo se abren pulsando la tecla F12:

Imagen que muestra el aspecto de la herramienta de ayuda al desarrollo del navegador Firefox.

Salvador Romero Villegas (elaboración propia) (Dominio público)

En la sección Consola podemos ver los mensajes de depuración que podemos ir generando con console.log. Por ejemplo, el siguiente código:

<script>
            console.log("ejemplo de mensaje de log");
</script>

Generaría mensajes de log como el siguiente:

Imagen que muestra como aparecen los mensajes de log en la herramienta de ayuda al desarrollo del navegador Firefox.

Salvador Romero Villegas (elaboración propia) (Dominio público)

Autoevaluación

Ocultar

Solución

2.1.1.- El lenguaje Javascript (II).

Ocultar

Imagen que muestra una infografía genérica de un proceso

bytrangle (Licencia de contenido (Pixabay))

Si en apartados anteriores hemos revisado algunos aspectos básicos de Javascript, en este apartado vamos a revisar otros pocos conceptos relacionados con la programación estructurada y algunas estructuras de control básicas usadas en Javascript:

Estructuras básicas de programación en Javascript
Tipo de estructura de programación	Ejemplo	¿Qué hace el código de ejemplo?
Condicionales	let k=Math.random()*10; if (k<5) { console.log('mayor o igual que cero y menor de 5'); } else if (k<7) { console.log('mayor o igual que 5 y menor de 7'); } else { console.log('mayor o igual que 7 y menor de 10'); }	En primer lugar se eligirá al azar un número entre 0 y 10 (10 no incluido). Después, en función del rango del valor mostrará un texto u otro.
Operador ternario	let k=Math.random()<0.5 ? "manos arriba" : "manos abajo"; console.log (k);	El contenido de la variable k será elegido al azar. Si el número generado al azar está por debajo de 0.5 entonces la variable k contendrá el texto "manos arriba", sino contendrá el texto "manos abajo".
Bucles while	let k=Math.random()*10; let i=0; while (i<k) { console.log(i); i++; }	Se elegirá al azar un número real entre 0 y 10 (sin incluir 10) y después se mostrarán por la consola de depuración los números enteros que van desde el 0 hasta el número elegido al azar. Si el número real elegido al azar es menor que uno, el bucle no se ejecutará.
Bucles do-while	let k=Math.random()*10; let i=0; do { console.log(i); i++; } while (i<k);	Se elegirá al azar un número real entre 0 y 10 (sin incluir 10) y después se mostrarán por la consola de depuración los números enteros que van desde el 0 hasta el número elegido al azar. Si el número real elegido al azar es menor que uno, el bucle si se ejecutará. El bucle se ejecuta al menos una vez.
Bucles for	let k=Math.floor(Math.random()10); let array=[]; for (let i=0; i<k; i++) { array.push(Math.floor(Math.random()10)+1); } console.log (array);	Rellena un tamaño de longitud aleatoria (entre 0 y 9) con números entre 1 y 10. Después muestra el contenido del array por la consola de depuración.
Bucles for..of	let array=[0,1,2,3,4,5]; for (let elemento of array) { console.log(elemento); }	Recorre un array elemento a elemento, mostrando por la consola de depuración su contenido.
Bucles for..in	let objeto={"a":10,"b":"texto"}; for (let atributo in objeto) { console.log("El atributo " + atributo + " tiene el valor: " + objeto[atributo] ); }	Recorre todos los atributos de un objeto mostrando por pantalla el nombre del atributo y el valor del mismo.

Debes conocer

Ocultar

En Javascript existen tres funciones básicas que debes conocer y que permiten interaccionar con el usuario: alert, confirm y prompt. La función alert se ha usado ya en ejemplos anteriores pero el resto de funciones no. Veamos para que se usan y algunos ejemplos:

Funciones bloqueantes que permiten interaccionar directamente con el usuario
Función	Ejemplo	Resultado
Usaremos alert para mostrar un mensaje informativo al usuario.	let fecha=new Date(); let dias=['domingo','lunes','martes', 'miércoles','jueves','viernes','sábado']; alert ("Hoy es "+dias[fecha.getDay()]);	Salvador Romero Villegas (elaboración propia) (CC BY-NC-SA)
Usaremos confirm para pedir confirmación de una operación al usuario.	if (confirm("¿Desea borrar el registro?")) { console.log("Borrando registro"); } else { console.log("Borrado cancelado"); }	Salvador Romero Villegas (elaboración propia) (CC BY-NC-SA)
Usaremos prompt para solicitar al usuario que introduzca un dato en un momento concreto.	if (prompt('Introduzca SI para confirmar','no')==='SI') { console.log("Borrando registro"); } else { console.log("Registro no borrado"); }	Salvador Romero Villegas (elaboración propia) (CC BY-NC-SA)

2.1.2.- El lenguaje Javascript (III).

Ocultar

mcmurryjulie (Licencia de contenido (Pixabay))

Por último vamos a revisar algunos aspectos importantes cómo es la creación de funciones en Javascript y su posterior uso. La sintaxis para crear una función en Javascript es similar a PHP como puedes comprobar:

function nombreFuncion (param1, param2)
{
    let resultado;
    
    //operaciones
    
    return resultado; //Opcional
}

La invocación de la función se realiza de forma similar a otros lenguajes:

nombreFuncion(10,20);

Organizativamente, podemos tener funciones almacenadas en variables, pudiendo ejecutar dicha función desde la misma variable:

function ejemplo (param1, param2)
{
    console.log(param1 + param2);
}

let variable = ejemplo;

variable(10,20);

Además podemos tener funciones anónimas, es decir, sin nombre, que podemos almacenar directamente en una variable:

let variable = function (param1, param2)
{
    console.log(param1 + param2);
};

variable(10,20);

También podemos tener funciones en objetos (y clases, aunque esto no lo vamos a revisar). Pudiendo definirlo en el momento de crear el objeto o a posteriori:

//Objeto con función declarada en la creación
let objeto = {
               "i": 0,
               "incrementar": function () {this.i++;}              
             };
//Función añadida posteriormente al objeto
objeto.decrementar=function() {this.i--};

//Uso del objeto
objeto.incrementar();
objeto.incrementar();
objeto.decrementar();
console.log(objeto.i); //Valor mostrado 1

Fíjate que en el objeto anterior se usa this para acceder a los atributos o propiedades del objeto desde las funciones.

Autoevaluación

Ocultar

Solución

2.2.- Acceso al modelo de documento desde Javascript (I).

Ocultar

Imagen que muestra un objeto abstracto compuesto de otros objetos. — Gerd Altmann (Licencia de contenido (Pixabay))

Uno de los aspectos más relevantes de las páginas web dinámicas es el hecho de que desde Javascript es posible modificar el contenido del documento que el usuario está visualizando. Esto se consigue gracias a que desde Javascript es posible acceder a una interfaz de programación que permite modificar la estructura de la página web: el DOM (Document Object Model).

Este modelo de documento (DOM) puede variar ligeramente de un navegador a otro, pero en general mantienen una estructura bastante uniforme entre navegadores. Aun así es conveniente que verifiques si una funcionalidad concreta está disponible en un navegador concreto o no, y esto no es solo aplicable al DOM, sino también a otras API que ofrecen los navegadores y que pueden ser usadas desde Javascript.

El DOM estructura el documento HTML de forma que es posible accederlo de forma programática. No es el objetivo de este módulo profundizar en el uso de esta API, por lo que vamos a centrarnos en algunos aspectos clave.

Inspeccionar el DOM.

Para inspeccionar el DOM y poder depurar nuestro código javascript podemos utilizar las herramientas de desarrollo integradas en la mayor parte de los navegadores web actuales. Puedes activar las herramientas de desarrollo pulsando F12 en la mayoría de los navegadores. Échale un vistazo a al siguiente vídeo:

Descripción textual del vídeo.

Obtener un objeto del DOM desde Javascript.

Obtener un objeto del modelo de documento con el objetivo de cambiar sus propiedades puede hacerse de múltiples formas. Imagina que tienes el siguiente documento HTML que incluye un formulario y un espacio para mostrar los resultados:

        <form action="" method="post">
            <input type="text" name="ejemplo" id="ejemplo" value="valor por defecto">            
        </form>
        <div id="salida"></div>

La idea es crear un código que recoja el valor por defecto del <input type="text"> y que lo añada a <div id="salida">. Lo primero que necesitamos es obtener esos elementos del DOM y para ello puedes usar el método o función getElementById del objeto document. El objeto document es un objeto global que crea el mismo navegador y que será el punto de entrada para manipular el modelo de documento. Su uso es relativamente sencillo:

        <form action="" method="post">
            <input type="text" name="ejemplo" id="ejemplo" value="valor por defecto">            
        </form>
        <div id="salida"></div>
        <script>
            //Obtenemos los dos elementos buscandolos por ID:
            let inputEjemplo=document.getElementById('ejemplo');
            let divSalida=document.getElementById('salida');
            //Modificamos las propiedades de los elementos 
            divSalida.innerHTML=inputEjemplo.value;
        </script>

Importante: no debe haber dos elementos del DOM con el mismo identificador (id).

Otras formas de acceder a los elementos del DOM podrían ser:

Usando document.getElementsByTagName, el cual permitiría obtener una lista de todos los elementos con un nombre determinado: más información.
Usando document.getElementsByClassName. Este método permite obtener una lista de todos los elementos que tienen en el atributo class una clase concreta (por ejemplo: <div class="nombreClase"></div>). Puedes consultar más información en el siguiente enlace:más información.
Usando document.getElementsByName. Este método permite obtener una lista de todos los elementos que tienen en el atributo name un nombre concreto (por ejemplo: <input name="nombre" type="text">), siendo especialmente útil en formularios. Puedes consultar más información en el siguiente enlace:más información.

Aparte de las técnicas anteriores, existe la posibilidad de usar document.querySelector. Este método permite obtener el primer elemento que encaja con un selector CSS dado. Un selector CSS sería el mismo que se pondría en una hoja de estilos para dotar de estilo a un elemento dado. Por ejemplo, dado el siguiente HTML: <div class="nombreClase"><span></span></div>; podríamos acceder al <span> interior usando un selector CSS como el siguiente: document.querySelector('div.nombreClase span'). Veamos un pequeño ejemplo de uso:

<div class="nombreClase"><span></span></div>
<script>
document.querySelector('div.nombreClase span').innerHTML="<B>ejemplo</B>";
</script>

Puedes consultar más información sobre document.querySelector en el siguiente enlace:más información sobre document.querySelector.

Para saber más

Ocultar

En la siguiente página puedes echar un vistazo al conjunto de APIs existentes en la mayoría de los navegadores, entre ellas encontrarás las relacionadas con el modelo de documento (DOM):

Listado de APIs Web de la página de mozilla.org

Al entrar en un API concreta podrás ver en que navegadores está implementada.

2.2.1.- Acceso al modelo de documento desde Javascript (II).

Ocultar

PDF; in SVG konvertiert von de:Benutzer:Connum (Dominio público)

Para poder manipular el modelo de documento desde Javascript de una forma más sencilla es muy habitual hacer uso de algunas librerías Javascript que nos facilitan algunos aspectos. Un ejemplo es el uso de JQuery, del cual puedes encontrar más información aquí:

Página web oficial de JQuery (en inglés).

Si quieres integrar JQuery en tu proyecto puedes descargar el código o bien incorporarlo desde un CDN como en el siguiente ejemplo:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.4.min.js"></script>

Una vez cargado el código JQuery tendremos acceso a un objeto nombrado con el símbolo $. Este nos permitirá acceder al modelo de documento usando selectores CSS que retornarán todos los elementos que encajen con el selector dado. Por ejemplo, dado el código:

<form action="" method="post">
    <input type="text" name="ejemplo" id="ejemplo" value="valor por defecto">                 
</form>
<div id="salida"></div>

Podríamos acceder a los elementos id="ejemplo" y id="salida" de la siguiente forma:

let lista1=$('#ejemplo'); //Lista de elementos con id=ejemplo
let lista2=$('#salida'); //Lista de elementos con id=salida

Después, podemos manipular todos los elementos para: modificar su estilo, añadirle alguna clase CSS, obtener su valor, etc. Por ejemplo:

        <form action="" method="post">
            <input type="text" name="ejemplo" id="ejemplo" value="valor por defecto">            
        </form>
        <div id="salida"></div>        
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.4.min.js"></script>
        <script>
            let lista1=$('#ejemplo'); //Lista de elementos con id=ejemplo
            let lista2=$('#salida'); //Lista de elementos con id=salida           

            //Modificar el inline CSS de un conjunto de elementos
            lista1.css({'background-color':'lightgreen','border':'5px solid green'}); 
            //Añadir una clase a una lista de elementos
            lista2.addClass('caja');    
            //Obtener el valor del primer elemento seleccionado
            let valor=lista1.val();
            //Añadir algo al final de otros elementos
            lista2.append('<B>'+valor+'</B>');
        </script>

Para conocer el conjunto total de acciones que se pueden realizar, es conveniente que consultes la documentación oficial.

Para saber más

Ocultar

En la siguiente página encontrarás información adicional sobre el uso de selectores CSS:

Resumen del uso de Selectores CSS

Autoevaluación

Ocultar

Solución

2.3.- Gestión de eventos.

Ocultar

Imagen que muestra la estructura en forma de árbol del modelo DOM

Birger Eriksson. Esquema del modelo de documento DOM (CC BY-SA)

Uno de los aspectos más importantes del desarrollo combinado entre Javascript y PHP es la gestión de los eventos que se producen en el modelo de documento (DOM).

Cuando un usuario interacciona con el navegador mientras visualiza una página web concreta (mueve el ratón, hace clic en un botón, pulsa una tecla, etc.) se desencadena un evento en el elemento HTML que recibe la acción de usuario. En función de la acción realizada por el usuario se desencadenará un evento u otro.

La gestión de eventos en el DOM es importante porque los eventos en el navegador pueden luego desencadenar peticiones al servidor. Interceptarlas en Javascript nos ayudará a prevalidar los datos enviados al servidor web o a conformar otro tipo de peticiones al servidor web (como las peticiones a través de AJAX).

A este nivel podemos distinguir varios mecanismos para interceptar estos eventos y actuar en consecuencia. La primera forma es inyectando Javascript en propiedades específicas de algunos elementos HTML:

<form action="script.php" method="post" onsubmit="alert('No se envía'); return false;">
  <input type="submit" value="¡Enviar!">
</form>

El elemento <form> por ejemplo genera el evento onsubmit justo antes de enviar un formulario. Si el usuario hace clic en el botón ¡Enviar!, se mostrará un mensaje de usuario y el formulario no se enviará (debido a return false;). Este comportamiento también se puede establecer a través de una función de la siguiente forma:

        <form id="form1" action="script.php" method="post">
            <input type="submit" value="Enviar!">
        </form>
        <div id="salida"></div>        
        <script>
            document.getElementById('form1').onsubmit=function()
                {
                    alert('No se envía'); return false;
                };
            document.querySelector('#form1 input[type=submit]').onclick=function()
            {
                let salida=document.getElementById('salida');
                salida.innerHTML+='<P>Se ha pulsado el botón Enviar!';
            };
        </script>

En el ejemplo anterior si la función asociada al evento onsubmit hubiera retornado true el formulario si se enviaría. En el código anterior estamos interceptando dos eventos: onsubmit y onclick en dos elementos diferentes: formulario y botón. El conjunto de eventos que podemos tratar son muchos entre ellos cabe destacar: onclick (invocado cuando el usuario hace clic con el ratón en el elemento seleccionado), onfocus (invocado cuando un elemento toma el foco de la entrada de datos), onmouseover (invocado cuando el ratón está encima).

El código anterior también es posible realizarlo usando JQuery de forma sencilla, veamos un ejemplo de uso de JQuery:

        <form id="form1" action="script.php" method="post">
            <input type="submit" value="Enviar!">
        </form>
        <div id="salida"></div>        
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.4.min.js"></script>
        <script>
            $('#form1').submit(function(){
                alert('No se envía'); return false;
            });
            $('#form1 input[type=submit]').click(function ()
            {
                $('#salida').append("<p>Se ha pulsado el botón Enviar!</p>");
            });
        </script>

Debes conocer

Ocultar

¿Conoces todos los que eventos pueden capturarse a través de Javascript? Seguramente no, y nosotros tampoco. Lo más normal es consultar la documentación para ver que evento necesitamos capturar en un momento dado. En la siguiente página tienes información sobre los eventos que puedes capturar en el navegador:

Referencia de eventos.

2.4.- Validación de formularios.

Ocultar

Imagen que muestra una mano con el pulgar arriba saliendo de un ordenador — Gerd Altmann (Licencia de contenido (Pixabay))

El proceso de validación de un formulario en Javascript requiere interceptar el evento onsubmit, recoger los valores de los diferentes campos y después comprobar si son válidos. Como se ha visto en apartados anteriores para interceptar un evento de este tipo es necesario proporcionar una función que se ejecutará cuando se produzca el evento en cuestión.

Imagina el siguiente formulario:

<form id="form1" action="script.php" method="post">
   <label>Nombre: <input type="text" value="" name="nombre"></label><BR>
   <label>DNI: <input type="text" value="" name="dni"></label><BR>
   <label>Edad: <input type="text" value="" name="edad"></label><BR>
   <input type="submit" value="Enviar!">
 </form>

El siguiente paso es asociar una función manejadora al evento onsubmit, como has visto en apartados anteriores esto podemos hacerlo de varias formas, por ejemplo:

Ejemplos de interceptar evento
Interceptar evento onsubmit usando Javascript puro	Interceptar evento onsubmit usando JQuery
<script> document.getElementById('form1').onsubmit=function() { let error=false; // Verificación de datos (error puede volverse true) if (error) { alert("Hay errores en el formulario. Reviselo."); return false; } else { return true; } }; </script>	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.4.min.js"> </script> <script> $('#form1').submit(function() { let error=false; // Verificación de datos (error puede volverse true) if (error) { alert("Hay errores en el formulario. Reviselo."); return false; } else { return true; } }); </script>

Ejemplos de interceptar evento

Interceptar evento onsubmit usando Javascript puro

Interceptar evento onsubmit usando JQuery

<script>
document.getElementById('form1').onsubmit=function()
{
    let error=false;
    // Verificación de datos (error puede volverse true)
    if (error) {
       alert("Hay errores en el formulario. Reviselo.");
       return false;
    } else {
       return true;
    }                        
};
</script>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.4.min.js">
</script>
<script>
$('#form1').submit(function()
{
   let error=false;
   // Verificación de datos (error puede volverse true)
   if (error) {
      alert("Hay errores en el formulario. Reviselo.");
      return false;
   } else {
      return true;
   }
});
</script>

En los bloques de código anteriores (incompletos) se retornaría false si hay errores en el formulario y true si no los hay. Si se retorna false el navegador cancelaría la petición al servidor web que este formulario desencadenaría, sin embargo, si se retorna true si se realizaría la petición web enviando los datos que el usuario ha rellenado (en este caso a script.php usando el método POST).

En la verificación de datos debemos recoger los datos de los diferentes campos para comprobar si son válidos o no. Para este propósito podemos apoyarnos en la clase FormData disponible en todos los navegadores o usar los mecanismos para acceder al DOM antes vistos. A continuación tienes dos ejemplos de verificación de los datos (usando FormData y sin usar FormData):

Ejemplos de prevalidación de datos usando Javascript
Prevalidar los datos recogiéndolo con FormData	Prevalidar los datos recogiéndolo con getElementByName
document.getElementById('form1').onsubmit=function() { let error=false; let formData=new FormData(this); let edad=formData.get('edad'); if (!edad.match(/^[0-9]+$/) \|\| edad<=0 \|\| edad>120) error=true; if (error) { alert("Hay errores en el formulario. Revíselo."); return false; } else { return true; } };	document.getElementById('form1').onsubmit=function() { let error=false; let edad=document.getElementsByName("edad")[0]; if (!edad.value.match(/^[0-9]+$/) \|\| edad.value<=0 \|\| edad.value>120) error=true; if (error) { alert("Hay errores en el formulario. Reviselo."); return false; } else { return true; } };

Ejemplos de prevalidación de datos usando Javascript

Prevalidar los datos recogiéndolo con FormData

Prevalidar los datos recogiéndolo con getElementByName

document.getElementById('form1').onsubmit=function()
{
   let error=false;
   let formData=new FormData(this);
   let edad=formData.get('edad');
   if (!edad.match(/^[0-9]+$/) || edad<=0
       || edad>120) error=true;        
   if (error) {
       alert("Hay errores en el formulario. Revíselo.");
       return false;
   } else {
       return true;
   }
};

document.getElementById('form1').onsubmit=function()
{
    let error=false;
    let edad=document.getElementsByName("edad")[0];
    if (!edad.value.match(/^[0-9]+$/) || edad.value<=0 
         || edad.value>120) error=true;        
    if (error) {
        alert("Hay errores en el formulario. Reviselo.");
        return false;
    } else {
        return true;
    }
};

La prevalidación o preverificación de datos que se puede realizar en Javascript tiene ciertas limitaciones:

Cuando ejecutamos código PHP en un servidor tenemos el control sobre el entorno de ejecución. Sin embargo, cuando se programa código para que se ejecute en un cliente web no tenemos la certeza de que el navegador del usuario vaya a soportar la ejecución del código que recibe. Existen ciertos sistemas, como dispositivos móviles o navegadores integrados en hardware específico que no permiten la ejecución de código Javascript. Además, tienes que tener en cuenta que el usuario puede deshabilitar la ejecución de Javascript o alterar su funcionamiento si tiene los conocimientos necesarios.
El código que se ejecuta en el navegador está normalmente limitado a ser ejecutado en un entorno controlado, que no permite, por ejemplo, la lectura o escritura de ficheros en el ordenador del usuario. De esta forma se restringen los efectos negativos que pueda causar un guion en Javascript y se favorece la confianza del usuario en este tipo de código.

Pese a estas limitaciones, la ejecución de código en el navegador encaja perfectamente con cierto tipo de tareas como:

Comprobar y/o procesar los datos que introduce el usuario en los formularios, como paso previo a su envío al servidor web.
Gestionar diferentes marcos y/o ventanas del navegador.
Modificar de forma dinámica los elementos que componen la página web, ajustando sus propiedades o estilos en respuesta a la interacción del usuario.

Ocultar

MUY IMPORTANTE: la realización de prevalidación de formularios en Javascript es una ayuda al usuario y evita envío de datos incorrectos al servidor web en muchas situaciones, sin embargo, el usuario puede deshabilitar la ejecución de Javascript o alterar su funcionamiento. Es por ello que es imprescindible mantener siempre la validación y saneado de datos en el servidor web y no confiar en los datos recibidos desde el navegador por el simple hecho de haber prevalidado los datos en Javascript.

Ejercicio Resuelto

Ocultar

Dado el siguiente formulario:

        <form id="form1" action="script.php" method="post">
            <label>Nombre: <input type="text" value="" name="nombre"></label><BR>
            <label>DNI: <input type="text" value="" name="dni"></label><BR>
            <label>Edad: <input type="text" value="" name="edad"></label><BR>
            <input type="submit" value="Enviar!">
        </form>

De forma que se prevalide lo siguiente:

Si el nombre tiene al menos dos caracteres.
Si el DNI tiene un formato válido conforme a los DNIs o NIEs emitidos en España.
Si la edad es un número mayor de cero y menor de 120.

Los errores en la prevalidación deberán mostrarse con un mensaje acorde al error producido. En caso de que los datos sean correctos, deberá pedirse confirmación al usuario.

2.5.- Comunicación asíncrona con el servidor web: AJAX. (I)

Caso práctico

Ocultar

Fotografía de una pareja frente a un ordenador. — Stockbyte (CD-DVD Num. V43) (Uso educativo no comercial para plataformas públicas de Formación Profesional a distancia.)

Pasados unos días, Juan y Carlos se vuelven a reunir y deciden que en el diseño de su aplicación existen muchos lugares en los que podrían aprovechar las capacidades que ofrece la programación del navegador web, concretamente el lenguaje JavaScript.

Sin embargo, ambos siguen sin tener claro cómo pueden integrar el código del cliente web en una aplicación programada en lenguaje PHP. Animados por María, que les orienta sobre el rumbo que deben tomar, preparan una serie de pruebas de programación que les puedan orientar sobre el tema.

Ocultar

Siglas de la tecnología AJAX. — Jed Schmidt (CC BY)

Una de las principales causas de la evolución e incremento de uso de JavaScript en los últimos tiempos es, sin duda, la tecnología AJAX. El término AJAX hace referencia a la posibilidad de un navegador web de establecer una comunicación con un servidor web y recibir una respuesta sin necesidad de que el navegador recargue la página completamente.

El establecimiento de esta comunicación se realizaría desde Javascript, y el contenido recibido puede utilizarse para actualizar dinámicamente el contenido de la página que visualiza el usuario. Aunque las siglas AJAX contienen en su interior la palabra XML (Asynchronous JavaScript and XML), los datos que intercambian entre el servidor web y el navegador web al usar esta tecnología no tienen porqué ser necesariamente XML, pueden emplearse otros formatos, tales como: JSON, HTML, YAML, CSV, texto plano, etc.

Actualmente hay dos formas básicas de utilizar AJAX desde Javascript. La primera es usando el objeto XMLHttpRequest, creado originariamente por Microsoft como parte de su librería MSXML y que hoy en día se ha incorporado de forma nativa a todos los navegadores actuales. La segunda es usando la función fetch (introducida en la especificación ECMAScript 2015).

Aparte de las técnicas anteriores, existen librerías que facilitan la creación de aplicaciones que hacen uso de AJAX desde el navegador, como el caso de JQuery o Axios.

Para ilustrar el funcionamiento de XMLHttpRequest vamos a imaginar un script PHP que va a generar datos en formato JSON que consumiremos desde Javascript para actualizar dinámicamente la interfaz. El script de trabajo va a ser el siguiente el cual imaginamos que es accesible en la dirección http://localhost/backend/listarnumeros.php:

<?php
//Script backend/listarnumeros.php
session_start();

$metodoHTTP=$_SERVER['REQUEST_METHOD'];

if (!isset($_SESSION['datos'])) $_SESSION['datos']=[rand(1,100),rand(1,100)];

$datos=&$_SESSION['datos']; //creamos una referencia para manejar mejor los datos de la sesión

if ($metodoHTTP==='GET')
{
   echo json_encode(array_values($datos));
}
else
{
   echo json_encode(["error"=>"Método no implementado"]);
}

El script anterior simplemente genera dos números aleatorios que se introducen en un array y se guardan en la sesión (para no volver a generarlos en caso de que se vuelva a realizar la misma petición). El ejemplo se podría realizar con datos almacenados en una base de datos, pero los almacenamos en la sesión para simplificar el ejemplo. Fíjate en el uso de json_encode, función que utilizaremos para dar convertir a JSON el array PHP que contiene los números. El script de momento solo atiende peticiones con el método HTTP GET, por lo que si es de otro tipo, se generará un código JSON que contiene un error. La pregunta ahora es, ¿cómo accedemos a dichos datos desde Javascript? Veamos como lo podríamos hacer con XMLHttpRequest (el siguiente código debería ser accedido desde una dirección web como http://localhost/index.html para que encuentre la dirección http://localhost/backend/listarnumeros.php):

<button id="boton">Actualizar Lista De Numeros </button>
<script>
    function actualizarListaDeNumeros() {
        // Creamos una instancia de XMLHttpRequest
        var xmlhttp = new XMLHttpRequest();

        // Indicamos la función manejadora del evento onreadystatechange
        xmlhttp.onreadystatechange = function () {
            //Comprobamos que la petición retorna un estado correcto
            if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                //Si el estado es correcto, procesamos los datos                 
                const numeros = document.getElementById('numeros');
                let datos = JSON.parse(this.responseText);
                numeros.innerHTML = datos.join('<BR>');
                console.log(this.responseText);
            }
        };

        // Inicializa la petición que se va a realizar de forma asíncrona
        xmlhttp.open("GET", "backend/listarnumeros.php");

        /* Envía la solicitud al servidor, cuando se reciba se 
           ejecutará la función manejadora */
        xmlhttp.send();
    }
    document.getElementById('boton').onclick=actualizarListaDeNumeros;
</script>

<div id="numeros">
No cargado todavía
</div>

El código ejecuta la petición AJAX cuando se hace clic en el botón (document.getElementById('boton')). Al hacer clic, se ejecuta una función llamada actualizarListaDeNumeros donde se configura y lanza una petición AJAX a backend/listarnumeros.php. Cuando el resultado de la petición es recibido (de forma asíncrona) se ejecuta la función manejadora del evento onreadystatechange encargada de actualizar la interfaz.

Este código se podría hacer también usando fetch o JQuery. Para ello modificaríamos la función actualizarListaDeNumeros de la siguiente forma:

Ejemplo utilizando fetch

El uso de fetch para esta tarea implica el conocimiento del uso de promesas en Javascript (Promise) y del Fetch API (conjunto de objetos asociados a la función fetch). Su uso sería como sigue:

        function actualizarListaDeNumeros() {
            // Obtenemos el elemento HTML donde mostraremos los números
            const numeros = document.getElementById("numeros");

            // Realizamos la petición al servidor utilizando fetch
            fetch("backend/listarnumeros.php")
                .then(response => {
                    // Comprobamos que la petición retorna un estado correcto
                    if (!response.ok) {
                        //Si no es correcta, lanzamos un error
                        throw new Error("Error al realizar la solicitud.");
                    }
                    // Si el estado es correcto, retornamos una promesa con el json
                    return response.json();
                })
                .then(data => {
                    //Actualizamos la interfaz de usuario
                    numeros.innerHTML = data.join("<BR>");                    
                })
                .catch(error => {
                    //Capturamos posibles errores                    
                    numeros.innerHTML = "Error al conectar.";                    
                });
        }

Ejemplo utilizando JQuery

El uso de JQuery requiere que cargues primero la librería de JQuery:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.4.min.js"></script>

JQuery dispone de funciones específicas para realizar peticiones AJAX. En este caso vamos a usar la función $.get dado que la petición es de tipo HTTP GET. Veamos su uso:

        function actualizarListaDeNumeros() {
            // Obtenemos el elemento HTML donde mostraremos los números
            const numeros = $("#numeros");

            // Realizamos la petición al servidor utilizando jQuery
            $.get("backend/listarnumeros.php")
                .done(function (data) {
                    // Si la petición se realiza correctamente, procesamos los datos
                    data=JSON.parse(data);
                    numeros.html(data.join("<BR>"));
                })
                .fail(function () {
                    // Si falla realizamos una acción alternativa
                    numeros.html("Error al realizar la solicitud.");
                });
        }

Como puedes observar hay dos funciones manejadoras, que se proporcionan en done (si la petición tiene éxito) o fail (cuando la petición no tiene éxito).

Ocultar

A las páginas web que se aprovechan de las capacidades de ejecución de código en el cliente para cambiar su apariencia, o su funcionamiento, se conocen como páginas web dinámicas. Tradicionalmente se llama HTML dinámico (DHTML) al conjunto de técnicas que emplean HTML, el modelo de objetos del documento web (DOM), hojas de estilo CSS y lenguaje Javascript ejecutado en el navegador para crear sitios webs dinámicos.

Debes conocer

Ocultar

Si deseas añadir algún parámetro GET en la consulta AJAX recuerda codificarlos adecuadamente:

Introduce el dato: <input type="text" name="dato" id="dato">
<script>
   let dato=document.getElementById('dato').value;
   let url="backend/ejemplo.php?param="+encodeURIComponent(dato);
   //... resto del código
</script>

Para este propósito es especialmente útil la función Javascript encodeURIComponent.

Recomendación

Ocultar

Como se comentó en apartados anteriores, para trabajar con jQuery puedes usar un CDN (Content Delivering Networks) o bien descargar una copia que se sirva desde el mismo servidor web donde está tu aplicación web.

Para desarrollar es más rápido tener una copia en local, aunque de cara a desplegar una aplicación web (ponerla en producción), es más eficiente usar un CDN, dado que se ahorra ancho de banda.

2.5.1.- Comunicación asíncrona con el servidor web: AJAX. (II)

Ocultar

Imagen que muestra dos personas comunicándose a través de una lata — Peggy und Marco Lachmann-Anke (Licencia de contenido (Pixabay))

Vamos a complementar el ejemplo anterior imaginando que queremos incluir la funcionalidad de añadir números a la lista de números vía AJAX. Imagina que ponemos un formulario como el siguiente para que el usuario indique el número que desea añadir a la lista de números):

    <form action="" id="nuevonumero" method="post" onsubmit="nuevoNumero(); return false;">
        <label for="nuevo"><input type="text" name="numero"></label>
        <input type="submit" value="¡Añadir!">
    </form>

La idea es crear una función Javascript llamada nuevoNumero para interceptar el evento de enviar el formulario (onsubmit). Al interceptarlo, se realizará una petición AJAX tipo POST a un script PHP para añadir el número a la lista de números. La lista de números estará almacenada en la sesión para simplificar el ejemplo, como ocurría en el apartado anterior, pero que bien podría estar almacenado en una base de datos. El script PHP que se tendría que invocar vía AJAX podría ser el siguiente (imagina que el siguiente código es accesible desde http://localhost/backend/nuevonumero.php):

<?php

session_start();

$metodoHTTP=$_SERVER['REQUEST_METHOD'];

if (!isset($_SESSION['datos'])) $_SESSION['datos']=[rand(1,100),rand(1,100)];

$datos=&$_SESSION['datos']; //creamos una referencia para manejar mejor los datos de la sesión

if ($metodoHTTP==='POST')
{
    $numero=filter_input(INPUT_POST,'numero',FILTER_VALIDATE_INT);
    if ($numero!==false && $numero!==null && 
        count($datos)<10 && !in_array($numero,$datos)) 
    {   
        $datos[]=$numero;
        $res=true;
    }
    echo json_encode(['resultado'=>$res??false]);
}
else
{
   echo json_encode(["error"=>"Método no implementado"]);
}

El código PHP anterior espera que el número a añadir a la lista se reciba en una petición tipo HTTP POST:

$metodoHTTP=$_SERVER['REQUEST_METHOD'];
//...
if ($metodoHTTP==='POST')
{
  //...
}

Por otro lado, la carga útil espera ser recibida como si fueran datos de un formulario ( x-www-form-urlencoded ). Es decir, se espera que la petición HTTP a realizar vía AJAX a backend/nuevonumero.php tenga un aspecto como el siguiente:

POST /backend/nuevonumero.php HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded

numero=66

En el ejemplo anterior la carga útil solo tiene un número y se recogerá en PHP usando $numero=filter_input(INPUT_POST,'numero',FILTER_VALIDATE_INT), es decir, se recogerá como si fueran datos de un hipotético formulario (PHP los cargará en el array $_POST). Además en el script backend/nuevonumero.php se controla que la lista de números no tenga más de 10 números y que el número no esté ya dentro de la lista de números (para evitar repetidos). ¿Cómo podríamos efectuar desde Javascript esa petición POST usando AJAX? Antes de revisar el código Javascript que realiza las peticiones AJAX fíjate que el nombre del campo en el formulario (<input type="text" name="numero">) coincide con el nombre del campo esperado en PHP (filter_input(INPUT_POST,'numero',FILTER_VALIDATE_INT)) esto está así a propósito para facilitar el envío del formulario usando FormData de Javascript. Veamos cómo:

Usando XMLHttpRequest

Es básicamente igual que la petición GET realizada en el apartado anterior, con la salvedad de que en este caso indicamos que es una petición POST (xhttp.open("POST", "backend/nuevonumero.php")) y que usamos la clase FormData para recopilar los datos del formulario y enviarlos junto a la petición (xhttp.send(formData)):

        function nuevoNumero() {
            // Creamos una instancia de XMLHttpRequest
            var xhttp = new XMLHttpRequest();

            // Indicamos la función manejadora del evento onreadystatechange
            xhttp.onreadystatechange = function () {
                if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                    let respuesta = JSON.parse(this.responseText);
                    if (respuesta.resultado)
                        actualizarListaDeNumeros();
                    else
                        alert("No se ha podido agregar el número.");
                }
            };

            // Configuramos la solicitud <acronym title="HyperText Transfer Protocol">HTTP</acronym> POST asíncrona
            xhttp.open("POST", "backend/nuevonumero.php");

            // Creamos una instancia de FormData y agregamos los datos del formulario
            var formData = new FormData(document.getElementById('nuevonumero'));

            // Enviamos los datos del formulario
            xhttp.send(formData);
        }

Fíjate que tras la inserción del número en la lista de números se invoca actualizarListaDeNumeros para actualizar la lista de números que el usuario visualiza, haciendo que la aplicación tenga un carácter dinámico.

Usando fetch

Usando fetch es también parecido a lo visto en el apartado anterior (requiere conocer el uso de promesas y el API Fetch). La diferencia está básicamente en las líneas 2, 5 y 6, donde se recogen los datos del formulario usando FormData (línea 2), se indica que la petición es de tipo POST (línea 5) y se adjuntan los datos a enviar en el cuerpo de la petición HTTP (línea 6). El uso de fetch es más complejo, pero más compacto que XMLHttpRequest.

        function nuevoNumero() {
            const formData = new FormData(document.getElementById('nuevonumero'));

            fetch('backend/nuevonumero.php', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.resultado) {
                        actualizarListaDeNumeros();
                    } else {
                        alert('No se ha podido agregar el número.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

Usando JQuery

Usando JQuery tenemos varias alternativas, vamos a optar por usar la función $.post. En este caso no recopilaremos los datos del formulario usando FormData sino que nos aprovecharemos de que JQuery los puede formatear adecuadamente a partir de un simple objeto Javascript. Veamos como:

        function nuevoNumero() {
            //Obtenemos el valor del input
            var numero = $("form#nuevonumero input[name=numero]").val();

            //Componemos un objeto con los datos a enviar
            var datosAEnviar={ "numero": numero };

            // Realizamos la petición POST usando $.post
            $.post("backend/nuevonumero.php", datosAEnviar)
                .done(function (respuesta) {
                    let datos = JSON.parse(respuesta);
                    if (datos.resultado)
                        actualizarListaDeNumeros();
                    else
                        alert("No se ha podido agregar el número.");
                })
                .fail(function () {
                    alert("Ha ocurrido un error al agregar el número.");
                });
        }

Fíjate en las líneas 3, 6 y 9, donde se componen los datos a enviar al servidor web. Recuerda que JQuery requiere que añadas las librerías oportunas.

Autoevaluación

Ocultar

Los datos de formulario se envían al servidor web en una petición HTTP usando una cabecera llamada Rellenar huecos (1): con el valor application/x-www-form-urlencoded. Cuando se envía otro tipo de contenido, se suele usar otra cabecera como application/json.

Para iniciar una petición POST con el servidor usando XMLHttpRequest, pondríamos xhttp.open(" Rellenar huecos (2): JXUwMDA4JXUwMDFmJXUwMDFjJXUwMDA3 ", "backend/nuevonumero.php"). Si lo hacemos con fetch pondríamos fetch('backend/nuevonumero.php', { Rellenar huecos (3): : 'POST', body: formData }). Y si lo hiciéramos con JQuery pondríamos: Rellenar huecos (4): ("backend/nuevonumero.php", datosAEnviar).

Habilitar JavaScript

2.5.2.- Comunicación asíncrona con el servidor web: AJAX. (III)

Ocultar

Imagen que muestra un dedo pulsando el botón de DELETE — Auaan (CC BY-SA)

Por último vamos a imaginar una última operación, la de borrado de un número de la lista de números. Esta operación nuevamente la vamos a hacer vía AJAX, pero en vez de usar los métodos HTTP GET y HTTP POST, vamos a usar el método HTTP DELETE. Como sabrás, los métodos DELETE y PUT son muy usado en servicios web tipo REST, por lo que es especialmente útil cuando el código Javascript va a actualizar dinámicamente la página usando los datos de un servicio web tipo REST.

Imagina que tienes el siguiente formulario, donde se recoge el número a borrar de la lista:

<form action="" id="borrarnumero" method="post" onsubmit="borrarNumero(); return false;">
        <label for="nuevo"><input type="text" name="numero"></label>
        <input type="submit" value="¡Añadir!">
    </form>

Nuevamente, a través de Javascript se intercepta el envío del formulario invocando la función Javascript borrarNumero(). En dicha función se usará AJAX para establecer una comunicación con el servidor web donde un script PHP se encargará de borrar el número de la lista. En este caso el método será HTTP DELETE y vía AJAX necesitamos enviar el número a borrar de la lista. En este caso, para enviar al servidor web el número a borrar de la lista no vamos a usar la codificación de datos típica de un formulario (x-www-form-urlencoded) sino que vamos a enviar datos JSON en crudo. Para ello, necesitamos que desde AJAX se genere una petición HTTP del siguiente estilo:

POST /backend/borrarnumero.php HTTP/1.1
Host: localhost
Content-Type: application/json

{
    "numero": 58
}

Fíjate en la línea Content-Type: application/json. En esa línea se indica que el contenido del cuerpo de la petición HTTP será un documento JSON . Vamos a ver ahora como haríamos para que desde AJAX se generara una petición HTTP con los datos anteriores:

Implementación de borrarNumero usando XMLHttpRequest

El procedimiento es similar a lo que ya hemos visto con la salvedad de que debemos especificar una cabecera en la petición HTTP para indicar que los datos que se envían van en formato application/json (línea 29), y además, codificar los datos en formato JSON usando JSON.stringify (líneas 32 a 34). Veamos como:

function borrarNumero() {
    // Obtenemos el valor del input
    const numero = document.querySelector('#borrarnumero input[name=numero]').value;

    // Creamos una instancia de XMLHttpRequest
    const xhr = new XMLHttpRequest();

    // Indicamos la función manejadora del evento onreadystatechange
    xhr.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE) {
            // Si la petición ha sido completada correctamente
            if (this.status === 200) {
                const respuesta = JSON.parse(this.responseText);
                if (respuesta.resultado) {
                    actualizarListaDeNumeros();
                } else {
                    alert("No se ha podido borrar el número.");
                }
            } else {
                alert("Ha ocurrido un error: " + this.statusText);
            }
        }
    };

    // Configuramos la solicitud <acronym title="HyperText Transfer Protocol">HTTP</acronym> DELETE asíncrona
    xhr.open("DELETE", "backend/borrarnumero.php");

    // Configuramos la cabecera de la petición
    xhr.setRequestHeader("Content-Type", "application/json");

    // Enviamos los datos en formato JSON
    xhr.send(JSON.stringify({
        numero: numero
    }));
}

Implementación de borrarNumero usando fetch

La diferencia de borrarNumero al método nuevoNumero que hicimos en apartados anteriores es que en este caso habrá que indicar que se usará el método DELETE (línea 6), que el tipo de contenido que se enviará en el cuerpo del mensaje es un documento JSON (línea 8) y los datos a enviar en formato JSON para lo cual usaremos JSON.stringify (líneas 10, 11 y 12):

function borrarNumero() {
    const numero = document.querySelector('#borrarnumero input[name=numero]').value;
    // Enviamos la solicitud <acronym title="HyperText Transfer Protocol">HTTP</acronym> DELETE usando fetch
    fetch('backend/borrarnumero.php', {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            numero: numero
        })
    })
        .then(response => response.json())
        .then(data => {
            if (data.resultado) {
                actualizarListaDeNumeros();
            } else {
                alert("No se ha podido borrar el número.");
            }
        })
        .catch(error => {
            alert("Ha ocurrido un error: " + error.message);
        });
}

Implementación de borrarNumero usando JQuery

En este caso haremos uso de una función más genérica para hacer peticiones AJAX en JQuery, es el caso de $.ajax. A la función $.ajax se le pasa como único parámetro un objeto con la configuración de la petición AJAX. En este objeto tenemos que indicar los siguientes aspectos:

type: "DELETE": que en la petición HTTP se usará el método DELETE.
contentType: "application/json": que los tipos de datos a enviar en la petición son JSON en crudo.
data: "..." : los datos de la petición en formato JSON (en el ejemplo, líneas 9,10 y 11).
success: function (..) {...} : función que se invocará en caso de que la petición tenga éxito.
error: function (..) {...} : función que se invocará en caso de que la petición falle.

Veamos como podría ser:

function borrarNumero() {
    // Obtenemos el valor del input
    const numero = $("#borrarnumero input[name=numero]").val();
    // Enviamos la solicitud <acronym title="HyperText Transfer Protocol">HTTP</acronym> DELETE usando jQuery
    $.ajax({
        url: "backend/borrarnumero.php",
        type: "DELETE",
        contentType: "application/json",
        data: JSON.stringify({
            numero: numero
        }),
        success: function (response) {
            const respuesta = JSON.parse(response);
            if (respuesta.resultado) {
                actualizarListaDeNumeros();
            } else {
                alert("No se ha podido borrar el número.");
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("Ha ocurrido un error: " + errorThrown);
        }
    });
}

Si quisiéramos usar el método HTTP UPDATE se podría realizar de forma similar al método DELETE, simplemente cambiando el tipo de petición o verbo HTTP.

Ahora nos faltaría por completar el código PHP de backend/borrarnumero.php. A diferencia de scripts anteriores, los datos no estarán en el array $_POST (dado que no van codificados con x-www-form-urlencoded en la petición HTTP recibida), por lo que deberemos recoger los datos de entrada y decodificarlo usando json_decode. Para ello, hacemos uso del flujo de entrada llamado php://input el cual podemos leer y procesar los datos que se han recibido en crudo. Fíjate especialmente en la línea 13 del siguiente código:

<?php

session_start();

$metodoHTTP=$_SERVER['REQUEST_METHOD'];

if (!isset($_SESSION['datos'])) $_SESSION['datos']=[rand(1,100),rand(1,100)];

$datos=&$_SESSION['datos']; //creamos una referencia para manejar mejor los datos de la sesión

if ($metodoHTTP==='DELETE')
{
    $r=json_decode(file_get_contents("php://input"));            
    if (is_object($r) && isset($r->numero) && in_array($r->numero,$datos))
    {
        unset($datos[array_search($r->numero,$datos)]);
        $res=true;
    }
    echo json_encode(['resultado'=>$res??false]); 
}
else
{
   echo json_encode(["error"=>"Método no implementado"]);
}

Para saber más

Ocultar

Si quieres saber más sobre los diferentes métodos de petición del protocolo HTTP puedes consultar la siguiente página:

Métodos de petición HTTP

2.5.3.- Comunicación asíncrona con el servidor web: AJAX. (IV)

Ocultar

Facebook (vía Wikimedia Commons) (Dominio público)

Para desarrollar aplicaciones AJAX que actualizan la interfaz de usuario de forma dinámica es aconsejable usar algunas librerías Javascript más avanzadas. Los scripts del servidor web, también conocidos como backend, pueden ser implementados de igual forma en PHP, pero el desarrollo de interfaces complejas se simplifica.

Para desarrollar aplicaciones tipo SPA (dónde solo hay una página web que se actualiza dinámicamente de forma completa a través AJAX y Javascript) existen muchas librerías Javascript, entre las que caben destacar:

Angular: marco de trabajo o framework desarrollado por Google.
React: biblioteca de código abierto mantenida por Facebook muy usada en el desarrollo de interfaces de usuario.
VueJS: proyecto de código abierto mantenido por una amplia comunidad.
EmberJS: proyecto de código abierto mantenido por una amplia comunidad.

En esta unidad no vamos a profundizar en ningún framework concreto, pero hemos revisado los conceptos fundamentales para implementar una aplicación AJAX desde la base.

Ejercicio Resuelto

Ocultar

En este ejercicio resuelto te proponemos ampliar la funcionalidad del ejemplo trabajado en estos apartados añadiendo en un único documento HTML una pantalla para iniciar sesión y la gestión de la lista de números. Recuerda que se trata de una aplicación para gestionar una lista de números no repetidos. La pantalla para iniciar sesión podría ser como la siguiente:

Salvador Romero Villegas (elaboración propia) (CC BY-NC-ND)

El inicio de sesión se realizará también vía AJAX. El inicio de sesión se podría procesar en un archivo PHP llamado backend/login.php y la información del usuario autenticado se almacenará en en la sesión ($_SESSION), al igual que la lista de números. Aprovecharemos el hecho de que en las peticiones AJAX también se propaga la información de la sesión a través de cookies para realizar la aplicación PHP/AJAX con autenticación. Una vez que el usuario haya iniciado sesión, muestra una interfaz como la siguiente para gestionar la lista de números:

Ejemplo de interfaz para gestionar la lista de números, donde hay tres formularios (para añadir un número, para borrar un número y para modificar un número por otro). Adicionalmente, hay dos botones, uno para forzar la actualización de la lista de números y otro para cerrar sesión.

Salvador Romero Villegas (elaboración propia) (CC BY-NC-ND)

Las operaciones nuevas (cambia un número por otro y cerrar sesión), que no han sido vista en apartados anteriores, se realizarían también vía AJAX invocando respectivamente los scripts backend/cambiarnumero.php y backend/logout.php. El script backend/cambiarnumero.php aceptaría el método PUT y los datos se recibirían en formato JSON. El script backend/logout.php aceptaría una petición HTTP sin datos usando el método GET y simplemente borraría los datos de la sesión.

Los scripts de PHP ahora deberían comprobar también si el usuario está autenticado verificando la información de las sesión ( $_SESSION ). Recuerda que la idea es realizar todo el proceso en un único documento HTML que se actualizaría dinámicamente vía Javascript.

Nota: para facilitar la autenticación puedes almacenar los datos de usuario y contraseña en un archivo de configuración en vez de usar una base de datos.

Intenta resolver el ejercicio, y luego, échale un vistazo a la solución propuesta. Elige la forma más cómoda para tí de resolverlo: usando XMLHttpRequest, fetch API o JQuery.

3.- Librerías PHP para integración AJAX.

Caso práctico

Ocultar

Fotografía de una mano sobre un teclado de ordenador. — Stockbyte (CD-DVD Num. V43) (Uso educativo no comercial para plataformas públicas de Formación Profesional a distancia.)

En los últimos días Juan y Carlos han logrado grandes avances. Tienen claras las capacidades que les ofrece la programación del cliente web. Han profundizado en la tecnología AJAX. Y saben, incluso, de qué manera pueden integrar en una misma aplicación ambos tipos de programación: la programación del servidor web en lenguaje PHP, y la programación del cliente web en lenguaje JavaScript.

Saben lo qué tienen que hacer, pero antes de ponerse manos a la obra, deben decidir de qué forma hacerlo. María les ha informado de que existen librerías y herramientas que se pueden utilizar para agilizar la programación de aplicaciones en lenguaje JavaScript. Su último paso será decidir qué librerías y herramientas utilizarán para facilitar la programación de la aplicación web, tomando como punto de partida que sería preferible utilizar un único lenguaje en todo el proyecto para evitar la fragmentación del código de la misma.

Ocultar

Como ya sabes, la tecnología AJAX se utiliza desde el cliente web para permitir comunicaciones asíncronas con el servidor web sin necesidad de recargar la página web que se muestra en el navegador. Se basa en la utilización de código en lenguaje JavaScript. Llegado este momento te estarás preguntando, ¿existen librerías que facilitan la integración de la tecnología AJAX desde nuestro código en PHP? La respuesta es sí.

Acabamos de ver cómo se pueden crear aplicaciones web que utilicen de forma simultánea la programación del cliente web (con JavaScript) y la programación del servidor web (con PHP). En el procedimiento seguido en el ejemplo anterior, ambas tecnologías coexistían, pero su programación era independiente. El código PHP se ejecutaba en el servidor y en la misma página se incluían también fragmentos de código en JavaScript que se ejecutan en el navegador.

Si vas a usar aplicaciones que utilicen ambos lenguajes existen mecanismos más ágiles para integrarlos. Existen librerías y frameworks para PHP que te permiten aprovechar las capacidades de JavaScript utilizando casi exclusivamente código en lenguaje PHP. Estas librerías definen una serie de objetos y componentes que puedes utilizar en desde PHP en el servidor y que generan de forma automática código JavaScript en las páginas web que se envían al cliente. Esto reduce el tiempo de desarrollo.

La mayoría de estas librerías añaden a las aplicaciones web funcionalidades que usan la tecnología AJAX como base. Esto es: permiten crear páginas PHP que, tras ejecutarse en el servidor, producen páginas web que incorporan código JavaScript con funcionalidades AJAX. El mecanismo de funcionamiento lo puedes observar en el siguiente diagrama.

Esquema de funcionamiento de las librerías PHP que incorporan funcionalidades AJAX. — Elaboración propia (Dominio público)

Ejemplos de este tipo de tecnologías son JAXON y Laravel Livewire. JAXON es una librería que permite crear aplicaciones web que integran AJAX de forma sencilla, la cual veremos de forma introductoria en este apartado. Livewire es un framework que se integra dentro de Laravel y que permite crear aplicaciones que integran AJAX de forma natural usando el motor de plantillas de Laravel (conocido como Blade) y componentes. Livewire no lo abordaremos en esta unidad.

Autoevaluación

Ocultar

Solución

3.1.- ¿Qué es JAXON?

Ocultar

Imagen que muestra varios engranajes — ddog (CC BY-SA)

Jaxon es una librería PHP que permite crear aplicaciones AJAX fácilmente, reduciendo la complejidad de usar XMLHttpRequest, del fetch API u otro tipo de implementaciones (como los métodos $.get o $.post JQuery). Jaxon simplifica además la creación de interfaces de usuario que usen HTML dinámico, permitiendo controlar desde PHP las modificaciones que se realizan en la interfaz.

La idea es crear aplicaciones webs que permitan modificar y actualizar la interfaz de usuario (en adelante frontend), renderizada en el navegador web, sin tener que cargar toda la página en cada acción de usuario. Esto reduce la transmisión de datos entre navegador y servidor, y además mejora la experiencia de usuario.

En este tipo de aplicaciones la comunicación entre navegador y servidor se desencadena desde código Javascript ejecutado en el navegador, en el navegador se envían datos al servidor vía AJAX, el cual será responsable de retornar datos y acciones que, una vez procesadas, actualizarán la interfaz de usuario. Al código PHP que se ejecuta en el servidor y que atiende las peticiones AJAX generadas en Javascript normalmente se le llama backend.

Cuando el conjunto completo de acciones se desencadenan siempre a través de Javascript y la actualización dinámica del frontend se realiza siempre de esa forma (solo a través de AJAX), hablamos de aplicaciones SPA (Single Page Application). No obstante, detrás de todo SPA siempre hay un backend para dar soporte a la lógica de la aplicación y a la persistencia de la información manejada.

Cuando desarrollamos una aplicación que usa Jaxon necesitaremos dos componentes:

Jaxon-PHP: librerías PHP que se encargarán de recibir la petición AJAX realizada en Javascript, procesarla y enviar las respuestas en el formato adecuado.
Jaxon-JS: librerías Javascript que realizarán la comunicación con el backend e interpretarán la información recibida del mismo.

La función de Jaxon-PHP es, por tanto, permitir la recepción y procesamiento de peticiones AJAX generadas en el navegador. Estas peticiones se reciben en el servidor (backend) en un formato específico propio de JAXON. Una vez recibida en el backend, la petición AJAX se procesa y se emite una respuesta que se podrá interpretar en el navegador (frontend) usando una librería Javascript específica (Jaxon-JS). Esa respuesta consistirá en datos y modificaciones que el frontend debe realizar. La forma más habitual de instalar un JAXON-PHP es usando un gestor de paquetes como composer.

Para instalar Jaxon-PHP solo tienes que inicializar el proyecto (si no lo tienes ya) e instalar la dependencia:

composer init
composer require jaxon-php/jaxon-core:~4.1

En el caso anterior vamos a instalar Jaxon versión 4.1 (compatible desde PHP 7.1 hasta PHP 8.2). Esto generará una estructura como la siguiente:

proyecto\
    \vendor
    composer.json
    composer.lock

En la carpeta vendor tendrás jaxon-php listo para usar con solo incluir el archivo vendor/autoload.php.

Jaxon-JS será, por otro lado, la parte de Jaxon que se ejecutará en el navegador y que formará parte del frontend. Su responsabilidad será la de facilitar la comunicación entre el servidor y navegador e internamente usará AJAX para realizar peticiones al backend y procesar la respuesta generada.

Para incluirlo en nuestro proyecto la opción más rápida es ir al repositorio GIT de Jaxon-JS y copiar la carpeta dist en nuestro proyecto:

Carpeta dist en GitHub del proyecto Jaxon

Cuando lo descargues, podríamos tener una estructura de proyecto como la siguiente:

proyecto\
    \jaxon-dist
    \vendor
    composer.json
    composer.lock

Una vez realizado esto, ya podemos arrancar.

Para saber más

Ocultar

GIT es un sistema de control de versiones sumamente interesante. Posiblemente, el software de control de versiones más usado hoy día. A continuación tienes un tutorial básico sobre el uso de GIT:

Tutorial Básico sobre GIT

3.2.- Estructura del proyecto JAXON.

Ocultar

Para trabajar de forma más cómoda con Jaxon y entender fácilmente su funcionamiento vamos a crear tres archivos PHP: setup.php, frontend.php y backend.php; cuya función será la siguiente:

frontend.php: es un script en PHP que genera el HTML con todo el código Javascript necesario para que Jaxon funcione. Aquí se inyectaría Jaxon-JS, aunque opcionalmente podemos incorporarlo desde un CDN.
backend.php: es el script que se encargará de procesar las peticiones AJAX generadas desde el navegador vía Javascript y generar una respuesta.
setup.php: es una parte de configuración que tendrán en común tanto el frontend.php como backend.php.

Esto nos dejará una estructura de proyecto base como la siguiente:

proyecto\
    \jaxon-dist
    \vendor
    composer.json
    composer.lock
    setup.php
    frontend.php
    backend.php

Obviamente es una estructura inicial al que luego podrías ir añadiendo archivos o modificando, es simplemente una estructura que nos permitirá abordar el uso de Jaxon de forma más sencilla a nivel didáctico.

En el archivo setup.php vamos a realizar el groso de nuestro trabajo, fundamentalmente en dicho archivo crearemos funciones o clases PHP que atenderán los eventos AJAX que se produzcan en el navegador. Básicamente el esquema sería como sigue:

Ejemplo de comunicación AJAX/Jaxon desde el navegador al script PHP de backend.

Salvador Romero Villegas (elaboración propia). (CC BY-NC-SA)

En el archivo setup.php procederemos a registrar el conjunto de funciones que deseamos que sean invocadas remotamente usando JAXON. En la imagen se puede ver la existencia de una función llamada nuevonumero. Tras realizar el proceso de registro de una función PHP en Jaxon se va a genera código Javascript que permitirá invocar dicha función desde Javascript. En el ejemplo se puede ver como el código javascript generado es jaxon_nuevonumero y que dicha función autogenerada desencadenaría la petición AJAX al backend.

El código del archivo setup.php podría ser el siguiente:

<?php
require_once __DIR__.'/vendor/autoload.php';

use Jaxon\Jaxon;
use function Jaxon\jaxon; 

function nuevonumero($numero)
{
    $response = jaxon()->newResponse(); // JAXON 4
    
    if (!preg_match('/^\d+$/',$numero))
        {
            $response->alert("No se ha indicado un número");
        }

    session_start();
    if (!isset($_SESSION['numeros'])) $_SESSION['numeros']=[];    
    if (!in_array($numero,$_SESSION['numeros'])) {
                $_SESSION['numeros'][]=$numero;
                $response->alert("Numero $numero insertado!");
    }
    else $response->alert('El número ya está en la lista!');
        
    return $response;
}

jaxon()->register(Jaxon::CALLABLE_FUNCTION, 'nuevonumero');

Vamos a analizar el código anterior:

En la líneas 4 y 5 se incluyen la clase Jaxon y la función jaxon(), necesarias para el funcionamiento.
Desde la línea 7 a 25 crearemos la función que deseamos invocar desde el navegador vía AJAX. Fíjate en el uso de la función jaxon()->newResponse() para construir una instancia de la clase Response (lo analizaremos más adelante). Es importante que estos métodos registrados retornen un objeto tipo Response y que no generen nada en la interfaz (no realicen echo ni similar), dado que sino podrían "estropear" el código JSON/Jaxon generado.
Línea 27: se registra la función que deseamos invocar remotamente usando jaxon()->register(...). Si la función no está registrada, no se podrá invocar remotamente.

Cuando el número de funciones o clases a registrar es muy elevado, lo más habitual es separar el código en diferentes archivos. En este caso, por simplicidad, lo vamos a dejar todo en el archivo setup.php.

Autoevaluación

Ocultar

Rellena los huecos del siguiente texto:

En los métodos manejadores usaremos el método Rellenar huecos (1): () para crear una instancia de la clase Response. Usando la instancia de la clase Response indicaremos que acciones deben realizarse en la interfaz de usuario, como por ejemplo, mostrar una alerta (usando el método Rellenar huecos (2): ).

Una vez creados los métodos manejadores debemos registrarlos con el método Rellenar huecos (3): , para que se puedan invocar remotamente vía AJAX. Jaxon generará el código Rellenar huecos (4): necesario para que se pueda realizar la petición AJAX al servidor de forma transparente para nosotros.

Habilitar JavaScript

3.3.- Procesando peticiones remotas con Jaxon.

Ocultar

Imagen que muestra a varias personas atendiendo llamadas de teléfono a modo de teleoperadores.

Peggy und Marco Lachmann-Anke (Licencia de contenido (Pixabay))

Una vez que tenemos ya el script setup.php donde hemos registrado todas las funciones o clases que deseamos invocar remotamente vamos a crear el script PHP a través el cual se procesarán las peticiones AJAX recibidas desde el navegador. A este script lo hemos llamado backend.php.

En este script se va a realizar algo muy sencillo: procesar las peticiones AJAX recibidas y enviarlas a la función o clase correspondiente. Para ello tenemos que poner un código muy simple:

<?php
//Código de backend.php
require_once __DIR__.'/setup.php';

use function Jaxon\jaxon; 

if(jaxon()->canProcessRequest())
{
    jaxon()->processRequest();
}

Fíjate que incluimos al principio el archivo setup.php. Es necesario incluirlo porque es en él donde se han registrado previamente las funciones. En este script no tenemos que hacer mucho más. Ahora pasaremos al frontend.php, encargado de generar la interfaz de usuario. En este script debemos hacer varias cosas:

Indicar cual es el script al que han de dirigirse las peticiones AJAX (en este caso backend.php).
Incluir el código Javascript de Jaxon-JS necesario para que pueda iniciarse una petición AJAX al backend.php.
Incluir el código Javascript generado por Jaxon con las funciones registradas (para nuevonumero generará una función Javascript llamada jaxon_nuevonumero).
Usar las funciones Javascript generadas por Jaxon (como jaxon_nuevonumero) en nuestro código.

Veamos un ejemplo sencillo:

<?php
require_once __DIR__.'/setup.php';

use function Jaxon\jaxon; 

jaxon()->setOption("js.lib.uri","jaxon-dist");
jaxon()->setOption('core.request.uri', 'backend.php');

$jaxonCss = jaxon()->getCss();
$jaxonJs = jaxon()->getJs();
$jaxonScript = jaxon()->getScript();

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo de uso de JAXON</title>
    <?php echo $jaxonCss ?>
</head>
<body>
<form onSubmit="jaxon_nuevonumero(jaxon.$('numero').value); return false;" >
Numero: <input id="numero" type="text" name="numero">
<input type="submit" value="Nuevo numero">
</form>

<?php echo $jaxonJs ?>

<?php echo $jaxonScript ?>

</body>
</html>

En el ejemplo anterior cabe destacar lo siguiente:

En la línea 6 se configura cual es la URL para obtener el código Javascript de Jaxon-JS (hemos de tenerlo descargado previamente) y en la línea 7 se configura cual es la URL al script de backend.php. En estos caso, al estar en el mismo servidor, no hace falta indicar la ruta completa, basta con indicar una ruta relativa, pero en otro escenario si es posible que tengas que indicar una URL absoluta.
En la línea 10 se obtiene el código Javascript a insertar en la página para incluir el código de Jaxon-JS. Más adelante se inserta en la línea 26.
En la línea 11 se obtiene el código Javascript con las funciones generadas por Jaxon-PHP para que puedan ser invocadas remotamente las funciones registradas. Fíjate que más adelante se inserta en la línea 28.
El resto del código Javascript (línea 21), se limita a utilizar la función generada de forma automática por Jaxon-PHP para establecer esa comunicación AJAX entre navegador y servidor.

Autoevaluación

Ocultar

Solución

3.4.- Respuestas AJAX con JAXON.

Ocultar

Imagen que muestra a un repartidor cargando con varios paquetes en una carretilla.

Peggy und Marco Lachmann-Anke (Licencia de contenido (Pixabay))

Cuando un método o función manejadora genera una respuesta, como se ha visto en los ejemplos anteriores, utiliza una instancia de la clase Response creada con jaxon()->newResponse() para desencadenar un evento en la interfaz de usuario, por ejemplo:

$response->alert('El número ya está en la lista!')

Generaría una ventana mostrando en el navegador mostrando el texto indicado. Sin embargo, como parte de una respuesta JAXON se pueden insertar muchas más respuestas para modificar de forma dinámica la interfaz de usuario. Veamos las más relevantes:

Ejemplos de respuestas generadas que implican modificaciones en la interfaz de usuario
Antes de la acción	Código de ejemplo en JAXON-PHP para realizar la acción	Resultado esperado en la interfaz
Limpiar un contenido (innerHTML) de un elemento del documento HTML por id. Por ejemplo: <div id="lista"> 123 </div>	$response->clear('lista');	El contenido del elemento desaparece: <div id="lista"> </div>
Añadir contenido a una propiedad de un elemento buscándolo por id. Por ejemplo, dado el siguiente elemento, buscarlo por id y añadir al final el número 7 en negrita: <div id="lista"> 6 </div>	$response->append('lista','innerHTML','<b>7</b>');	De tal forma que quede así: <div id="lista"> 6<b>7</b> </div>
Cambiar el contenido de una propiedad de un elemento buscándolo por id. Por ejemplo, dado el siguiente elemento, buscarlo por id y cambiar el contenido por 100 en negrita: <div id="lista"> 6 </div>	$response->assign('lista','innerHTML','<b>100</b>');	De tal forma que quede así: <div id="lista"> <b>100</b> </div>
Añadir contenido al comienzo de una propiedad buscándolo el elemento por id. Por ejemplo, dado el siguiente elemento, buscarlo por id y añadirle la clase prueba antes de las que ya tenga: <div class="dwes07" id="lista"> 6 </div>	$response->prepend('lista','<span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><span class="object-label">className</span><span class="object-delimiter"></span></span></span></span>','prueba ');	De tal forma que quede así: <div class="prueba dwes07" id="lista"> 6 </div>

Es importante consultar las propiedades DOM del objeto antes de manipularlo. Jaxon ofrece también métodos interesantes para desencadenar en el navegador la ejecución de código javascript:

$response->script('...'): ejecutaría el código Javascript dado en el navegador.
$response->call('nombrefuncion'): ejecutaría la función Javascript indicada en el navegador.

Puedes consultar más información sobre el conjunto de acciones que se pueden realizar en la siguiente página:

Capacidades de la clase Response (en inglés)

Adicionalmente, si hemos cargado JQuery en la página (usando un CDN por ejemplo), podemos indicar en la respuesta JAXON que se hagan acciones basadas en selectores CSS similares a las que se harían con JQuery usando $response->jq(...). El uso de esta función imita como se usaría JQuery en Javascript, veamos algunos ejemplos relevantes:

Ejemplos de modificaciones en la interfaz de usuario que se podrían realizar con JQuery a través de Jaxon
Antes de la acción	Código de ejemplo en JAXON-PHP para realizar la acción	Resultado esperado en la interfaz
Seleccionar un elemento y modificarlo usando un selector CSS usando sintaxis de JQuery. Por ejemplo, modificar el siguiente div y añadirle un estilo CSS: <div class="dwes07"> </div> Usamos para ello el método $response->jq() al que pasamos el selector CSS.	$response->jq('div.class')->css('background-color','green');	El resultado sería: <div class="dwes07" style="background-color: green;"></div>
Modificar el valor de un input a partir de su id: <input type="text" id="numero">	$response->jq('#numero')->val(90);	El resultado haría que se mostrara el valor 90 en el input seleccionado.

Para consultar más información sobre esta última capacidad consulta la siguiente página:

JQuery PHP API de JAXON

Autoevaluación

Ocultar

Pregunta

¿Qué se añadiría a la interfaz tras ejecutar el siguiente código?

$response->append('body','innerHTML','<div id="cl"></div>');
$response->jq('#cl')->html('<p>hola</p>');

Respuestas

Opción 1

Se reemplazaría el <div id="cl"></div> por el párrafo (<p>hola</p>).

Opción 2

Se metería el <div id="cl"></div> dentro el párrafo (<p>hola</p>).

Opción 3

Se pondría el párrafo (<p>hola</p>) tras el <div id="cl"></div>.

Opción 4

Se pondría el párrafo (<p>hola</p>) dentro del <div id="cl"></div>.

Retroalimentación

Incorrecto. Piensa que el método html() funciona igual que el método html() de JQuery.

¡Correcto! Bien hecho.

Solución

3.5.- Peticiones AJAX con JAXON

Ocultar

Imagen que muestra una pieza de puzzle encajando.

Hebi B. (422737) (Licencia de contenido (Pixabay))

Hasta ahora hemos visto que Jaxon-PHP generará funciones Javascript a partir de funciones PHP que hayamos registrado. En apartados anteriores hemos visto un ejemplo básico y ahora vamos a profundizar en este aspecto, analizando como podemos recoger datos de la interfaz de usuario para enviarlos en la petición AJAX. Tal y como se ha tratado en apartados anteriores, podemos registrar una función PHP registrada de la siguiente forma:

function borrarNumero($numero)
{
...
}

jaxon()->register(Jaxon::CALLABLE_FUNCTION, 'borrarnumero');

Jaxon-PHP permitirá usar una función Javascript como la siguiente:

<script>
   jaxon_borrarnumero(8);
</script>

Ya sabes que dicha función Javascript cuando es invocada desencadena una petición AJAX al servidor, procesándose en el script denominado backend.php. El nombre del script del servidor donde se procesan las peticiones AJAX de JAXON podría ser otro, el nombre obviamente se puede cambiar en función de la configuración.

Bien, ahora vamos a revisar técnicas para recoger datos de la interfaz de usuario para pasarlos como parámetro en los métodos generados por Jaxon-PHP (como es el caso de jaxon_borrarnumero anterior). En el caso anterior se pasa un literal numérico, pero lo suyo es recoger dichos valores de formularios, como ocurre en el ejemplo siguiente:

    <form action="" id="borrarnumero" method="post" onsubmit="return false;"        
        <label for="nuevo"> Número a borrar: <input type="text" id="numeroABorrar"></label>
        <input type="button" value="¡Borrar!">
    </form>
    <script>
        document.querySelector('#borrarnumero input[type=button]').onclick=function()
        {
            jaxon_borrarnumero(document.getElementById('numeroABorrar').value);
        }
    </script>

El ejemplo anterior usa formas de recoger datos de formularios ya vistas en apartados anteriores. Jaxon-JS (la parte Javascript de Jaxon) incorpora un objeto llamado jaxon que permite obtener datos de formularios y otros elementos. Al usar la forma jaxon.$(...) desde Javascript se puede indicar el id de un objeto a seleccionar, y luego podemos usar cualquiera de sus atributos DOM (desde value - si es de tipo input - a innerHTML). El código anterior también se podría escribir como sigue:

    <script>
        document.querySelector('#borrarnumero input[type=button]').onclick=function()
        {
            jaxon_borrarnumero(jaxon.$('numeroABorrar').value);
        }
    </script>

Cuando queremos recoger todos los datos de un formulario de golpe podríamos usar jaxon.getFormValues(...), donde habría que especificar el id del formulario que contiene los datos, por ejemplo:

    <form id="cambiarnumero" onSubmit="jaxon_cambiarnumero(jaxon.getFormValues('cambiarnumero')); return false;">
        Numero actual:
        <input id="numero_actual" type="text" name="numero_actual"><BR>
        Numero nuevo:
        <input id="numero_nuevo" type="text" name="numero_nuevo"><BR>
        <input type="submit" value="Cambiar un número por otro">
    </form>

En ese caso el método PHP que recibirá los datos AJAX en el backend, recibirá un array asociativo con los datos donde la clave de dada dato es el nombre del atributo, por ejemplo, para el caso anterior se recibirían los datos: $datos['numero_actual'] y $datos['numero_nuevo'].

Además de los casos anteriores podemos generar Javascript desde PHP para obtener dichos datos reduciendo la cantidad de código Javascript a escribir. Por ejemplo, para recoger datos podemos usar la función pm() de Jaxon-PHP:

<?php
use function Jaxon\pm;
$idCampo='numeroABorrar';
?>
<form action="" id="borrarnumero" method="post" onsubmit="return false;"        
        <label for="nuevo"> Número a borrar: <input type="text" id="<?=$idCampo?>"></label>
        <input type="button" value="¡Borrar!">
</form>
<script>
        document.querySelector('#borrarnumero input[type=button]').onclick=function()
        {
            jaxon_borrarnumero(<?=pm()->input($idCampo)?>);
        }
</script>

El código se ejecutaría en PHP y generaría código Javascript para recoger el dato de un input. Este componente (pm()) forma parte del Parameter Factory de Jaxon-PHP. Básicamente va a generar el código Javascript visto antes (jaxon.$('numeroABorrar').value), pero nos otorga más flexibilidad a la hora de generar HTML y Javascript de forma dinámica. Además, la función pm() tiene un abanico de funcionalidades que permite recoger datos de una variedad de elementos diferentes.

También podemos escribir código PHP para que nos genere las invocaciones remotas al backend. Por ejemplo:

<?php
use function Jaxon\pm;
use function Jaxon\rq;
?>
<script>
        document.querySelector('#borrarnumero input[type=button]').onclick=function()
        {
            <?=rq()->call('borrarnumero',pm()->input('numeroABorrar'))?>
        }
</script>

El método anterior usa el componente rq() que forma parte del Request Factory de Jaxon-PHP. Al usar el método rq()->call(...) se generará el código Javascript equivalente (en el caso anterior jaxon_borrarnumero(...)). Fíjate que se ha combinado el uso de rq() y pm() para integrar ambas funcionalidades.

Adicionalmente el Request Factory de Jaxon-PHP permite generar código Javascript para pedir confirmaciones y realizar verificaciones. Por ejemplo:

<?php
use function Jaxon\pm;
use function Jaxon\rq;
?>
<script>
        document.querySelector('#borrarnumero input[type=button]').onclick=function()
        {
            <?=rq()->call('borrarnumero',pm()->input('numeroABorrar'))->confirm('¿Estas seguro?');?>
        }
</script>

Estas técnicas, junto con otras más avanzadas (en las que no vamos a profundizar), permite reducir drásticamente la cantidad de código Javascript a escribir para crear una aplicación con HTML dinámico que use AJAX. Puedes consultar más información sobre el Request Factory y el Parameter Factory aquí:

Documentación sobre el uso de Parameter Factory y Request Factory.

Ejercicio Resuelto

Ocultar

A continuación te proponemos completar la aplicación trabajada en este apartado usando Jaxon 4.1. La idea es almacenar una lista de números en la sesión de usuario y gestionar la lista de números a través de AJAX usando Jaxon. La aplicación podría tener una interfaz como la siguiente, para permitir insertar nuevos números (no duplicados), borrar números existentes o reemplazar un número por otro. Tras cada operación, se actualizaría el conjunto de números almacenados en la sesión. ¿Serías capaz?

Ejemplo de interfaz de la aplicación web para gestionar una lista de números almacenada en la sesión, con operaciones para insertar un nuevo número, borrarlo o modificar uno existente.

Salvador Romero Villegas (Elaboración Propia). (CC BY-NC-SA)

4.- Aplicaciones híbridas en el cliente: OpenStreetMap.

Autoevaluación

Ocultar

Fotografía de una mano introduciendo un CD en una lectora de un ordenador.

Stockbyte (CD-DVD Num. V43). (Uso educativo no comercial para plataformas públicas de Formación Profesional a distancia.)

Mientras Juan le da los últimos retoques a la integración de Javascript y PHP, lo que ha conseguido hacer su aplicación web mucho más atractiva y más cómoda para el usuario, Carlos se informa sobre los servicios web que pueden serle útiles, y decide añadir a la aplicación una funcionalidad que no tiene: un mapa para localizar las diferentes oficinas de la empresa.

En realidad nadie ha solicitado esa funcionalidad, pero cree que si es capaz de programarla la empresa de Esteban lo verá con muy buenos ojos. En ocasiones los clientes no piden una característica simplemente porque desconocen que es posible realizarla. Y cuando comenzó este proyecto en particular, no había nadie en BK Programación con la experiencia suficiente como para orientar correctamente al cliente.

Se pone manos a la obra. Si en la semana que tiene le da tiempo a finalizarla, se la mostrará a Esteban. Y si no le da tiempo, echará mano de la versión anterior. De cualquier modo, no es tiempo perdido. Este proyecto le está sirviendo para adquirir experiencia que a buen seguro aprovechará en el futuro inmediato.

Ocultar

Imagen que muestra un atlas abierto sobre el que se posan unas gafas de lectura.

Dariusz Sankowski (Licencia de contenido (Pixabay))

Cuando pensamos en aplicaciones híbridas, es decir, en aplicaciones que usan otros servicios para complementar su funcionalidad, una de las opciones más habituales es la integración de servicios a nivel de cliente web, es decir, a nivel de navegador. La idea es integrar código en la interfaz de usuario de una fuente externa, generalmente usando Javascript.

Un ejemplo claro de este tipo de técnicas se da cuando integramos un mapa externo (como puedes el mapa de Google Maps o el mapa de OpenStreetMaps). En esta sección vamos a ver como podemos integrar OpenStreetMaps en nuestra aplicación web aprovechando así la potencia de las aplicaciones web híbridas a nivel de cliente.

OpenStreetMaps es un proyecto de código abierto y potenciado por la comunidad, por lo que no tendremos que pagar para utilizarlo. Actualmente es uno de los más populares servicios de mapas online de internet y un proyecto encaminado a la creación, publicación y visualización de mapas para su uso en diferentes plataformas y dispositivos. Accediendo al sitio, podrás cargar mapas de cualquiera región o zona geográfica.

A continuación tienes un ejemplo de integración de OpenStreetMaps:

La integración de este tipo de servicios es tan sencilla como insertar el código HTML adecuado:

<iframe width="425" height="350" style="border: 1px solid black;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://www.openstreetmap.org/export/embed.html?bbox=-7.520141601562501%2C35.209721645221386%2C-0.9118652343750001%2C39.37677199661635&amp;layer=mapnik">
</iframe>

Esto también podemos hacerlo con mapas como Google Maps:

Donde su integración se realiza también a través de código HTML sin necesidad de usar Javascript.

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1608121.5035561596!2d-4.661179199061079!3d38.0735875812619!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1684348564395!5m2!1ses!2ses" 
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>

Sin embargo, la integración más común de este tipo de mapas es usando marcadores y otro tipo de elementos superpuestos al mapa que permiten indicar aspectos como: localización de una oficina o tienda, lugar donde se encuentra un repartidor, etc. Es decir, se trata de integrar y usar un servicio externo en consonancia con la aplicación web donde se integra, y para ello es necesario usar Javascript.

Para poder trabajar con aspectos como los anteriores y realizar aplicaciones híbridas en este nivel necesitamos trabajar con librerías Javascript específicas. Si queremos por ejemplo integrar un mapa de la plataforma de mapas de Google (Google Maps Plattform) y usar características avanzadas (como el uso de capas superpuestas propias), deberemos usar sus propios servicios y realizar los pagos oportunos (si es requerido).

En el caso de OpenStreetMaps es posible incrustar mapas en nuestras aplicaciones web que añadan algunas características avanzadas usando algunas librerías Javascript interesantes y libres:

OpenLayers.
Leaflet.

Existen otras opciones, obviamente. De las opciones anteriores vamos a revisar, por su sencillez, el uso de Leaflet.

Ocultar

Adicionalmente, el proyecto de OpenStreetMap ofrece una API REST para facilitar que permite trabajar, puedes consultar más información en su Wiki . El conjunto de servicios que ofrecen no son tan extensos como los de la plataforma de mapas de google (Google Maps Plattform), pero es cuanto menos útil en muchos casos.

Autoevaluación

Ocultar

Solución

4.1.- Mostrar mapas de OpenStreetMap con Leaflet.

Ocultar

Imagen que muestra a una mujer usando un ordenador portátil.

StartupStockPhotos (Licencia de contenido (Pixabay))

Leaflet es una librería de JavaScript ligera de código abierto y de carácter gratuito que permite integrar mapas de diferentes fuentes en páginas webs y dispositivos móviles. Es fácil de usar y los mapas generados son adaptables, de ahí que sea una de las librerías más extendidas.

Los mapas de servicios tales como como Google Maps, Mapbox, OpenStreetMap o Bing Maps están formados por pequeñas piezas (llamadas teselas) que al unirse, en forma de mosaico, dan lugar al mapa que visualizamos. De esa forma, al mover el mapa en una dirección u otra, simplemente se añaden las teselas necesarias para dar sensación de continuidad. Leaflet permite trabajar con mapas de diferentes proveedores de "teselas" (tiles providers en inglés), entre los que caben destacar Mapbox y OpenStreetMaps.

Lo primero que tenemos que hacer para que Leaflet pueda cargar un mapa es cargar el código CSS y el código Javascript necesario para que Leaflet funcione. Esto podemos hacerlo descargando el código de la página original e integrándolo en nuestro servidor web:

Sección de descargas de la página web oficial de Leaflet.

Aunque también podemos usar un CDN para integrarlo en nuestro proyecto:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo de uso de Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
</head>
<body>
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" 
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" 
        crossorigin=""></script>
</body>
</html>

Una vez integrado, lo siguiente será crear un elemento DIV destinado a contener el mapa a visualizar, como por ejemplo el siguiente:

    <div id="map" style="height:400px;width:800px"></div>

Es importante indicar el alto, dado que sino podemos encontrarnos con que no se muestre en pantalla. A continuación, tenemos que usar Leaflet para indicar que ese DIV anterior va a contener un mapa:

var map = L.map('map');

Una vez inicializado el mapa, debemos indicarle de donde se van a obtener las teselas para conformar el mapa, es decir lo que sería el proveedor de teselas con la que se compondrá la capa que muestra el mapa. Esto lo haremos de la siguiente forma:

let osm_tile_template='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
L.tileLayer(osm_tile_template, {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

Básicamente indicamos la URL que se utilizará para obtener las teselas (Leaflet sustituirá algunas partes de la URL para ir obteniendo las diferentes teselas, en función del zoom {z} y las coordenadas {x} e {y}). En el caso anterior además indicamos la información del copyright del mapa, algo obligatorio si deseamos usar OpenStreetMaps.

Imagen que muestra un ejemplo de OpenStreetMaps usando Leaflet

Una vez realizado lo anterior, toca establecer las coordenadas a visualizar usando el método setView, al que se les facilitará la latitud y la longitud del punto central del mapa, y el zoom, por ejemplo:

let latitud=36.84011072974817;
let longitud=-2.4699259151793393;
let zoom=14;
map.setView([latitud, longitud], zoom);

Adicionalmente, podemos añadirle elementos superpuestos al mapa para destacar o marcar lugares, zonas, etc. Dentro de los elementos que podemos superponer caben destacar los marcadores y popups (que se activarán al hacer clic en un marcador y mostrarán un texto asociado al mismo). En la imagen de la derecha puedes ver como quedarían dos marcadores, uno de ellos tiene un popups abierto con el texto "Catedral de Cádiz". Veamos como se podrían añadir:

let latitud=36.52931308004989;
let longitud=-6.294051850580315;
let marcador=L.marker(latitud,longitud);
marker.addTo(map); //Añadir marcador al mapa
marker.bindPopup('Catedral de Cádiz (Cádiz)'); //asociar un popup al marcador
maker.openPopup();//abrir el popup

Ejercicio Resuelto

Ocultar

En esta ocasión te proponemos un reto interesante. Recopila varias localizaciones que sean de tu interés y almacénalas en un script PHP dentro de un array u otro tipo de estructura. La idea es que puedas modificar las localizaciones en cualquier momento, añadiendo o quitando localizaciones según sea necesario.

Después crea un script PHP que genere el HTML y Javascript adaptado para mostrar un mapa con OpenStreetMaps y Leaflet, de forma que se puedan ver las diferentes localizaciones seleccionadas haciendo clic en diferentes enlaces. Por ejemplo:

Ejemplo de aplicación que muestra un mapa OpenStreetMaps usando Leaflet y donde se puede ir a diferentes localizaciones a través de enlaces.

Captura de pantalla de aplicación que integra OpenStreetMaps con LeaftLet. Creada por Salvador Romero Villegas con propósito educativo. Las imágenes del mapa tienen copyright de OpenStreetMaps. (Todos los derechos reservados)

La idea es que al hacer clic en una localización el mapa cambie a la ubicación seleccionada (usando setView) y muestre diferentes marcadores y un popups con información sobre dicha localización. ¿Serás capaz?

5.- Aplicaciones web híbridas en el backend.

Caso práctico

Ocultar

Fotografía de dos ordenadores sobre una mesa.

Stockbyte (CD-DVD Num. V43.) (Uso educativo no comercial para plataformas públicas de Formación Profesional a distancia.)

Pasa la semana, y Juan y Carlos, después de un arduo esfuerzo, consiguen tener a punto la nueva versión de la aplicación como quería. Para la presentación, pone las dos versiones en funcionamiento, la que integra el mapa de oficinas, y la que no, pero no le comenta a nadie los nuevos cambios. Si hay algún problema con las últimas modificaciones, echará mano de la versión anterior.

Cuando en BK Programación muestran a Esteban la aplicación, éste queda asombrado por el resultado. Le ha parecido genial incluir los mapas, sorprende a todos positivamente, especialmente a Ada y a Juan, que empiezan a darse cuenta de las nuevas capacidades que ha adquirido Carlos en las últimas semanas.

Esteban comenta que es una aportación muy interesante, pero se pregunta si podrían llegar un poco más lejos. Tras ver el resultado de lo que han conseguido, su cabeza empieza a dar vueltas y empiezan a venirle nuevas ideas. ¿Sería posible que se conectara la aplicación con redes sociales para publicar los productos que bajan de precio? ¿Sería posible que se conectara esta aplicación web con la aplicación web que usan para gestión de compras?

Esteban les plantea el escenario, y Juan y Carlos se empiezan a agobiar un poco. Ada les intenta tranquilizar:

- No os preocupéis, no es algo tan complicado como parece, solo necesitamos que esas aplicaciones tenga un API para poder acceder a ellas remotamente.

Ocultar

Mozilla Foundation (GNU/GPL)

Los servicios web permiten que las aplicaciones se comuniquen entre sí utilizando el protocolo HTTP a través de la web, lo cual ya conoces. El concepto de aplicación web híbrida, también conocida como mashup, nace de la idea de combinar datos y funcionalidades de diferentes fuentes para crear nuevos servicios.

Ya hemos revisado cómo integrar datos de diferentes fuentes a nivel de cliente web, como hemos visto con el ejemplo visto de OpenStreetMaps. El siguiente paso es hacer uso de servicios web remotos accediendo a ellos desde nuestro código PHP.

De esta forma, podemos aprovechar servicios y repositorios de información remotos para complementar la funcionalidad de nuestra aplicación. De cara a este propósito tenemos que diferenciar tres aspectos fundamentales:

Autenticación en los servicios web remotos: la gran mayoría requieren autenticación, por lo que revisaremos las técnicas principales, y practicaremos con alguna de ellas.
Acceso a datos y funcionalidad de los servicios web: es necesario conocer como se ha realizado el servicio web, si usando REST, SOAP o algún otro tipo de tecnología (como GraphQL).
Formato de la información a intercambiar con el servicio web: al intercambiar información se manejan fundamentalmente dos tipos de datos: XML y JSON; aunque hay algunos servicios web que utilizan otros formatos de información (como YAML).

Generalmente, las tecnologías más usadas en este ámbito son servicios autenticados a través de usuario o contraseña, o usando claves de autenticación API keys), a través de un servicio web REST donde los datos se intercambian con JSON.

Recuerda que los servicios web tipo REST hacen uso de diferentes métodos del protocolo HTTP (GET, POST, DELETE, PUT, etc.), conocidos también como "verbos", para realizar diferentes por operaciones.

Por ejemplo, la petición HTTP siguiente:

DELETE /articulo/KSTDTG332GBR HTTP/1.1
Host: ejemplo.localhost

Podría significar el borrado del artículo KSTDTG332GBR. Cada verbo tiene un significado diferente:

GET: obtener información.
POST: insertar información.
PUT: modificar información.
DELETE: borrar información.

Aparte del uso de información de servicios web y APIs de diferentes proveedores de servicios como Google, Yahoo!, Flickr, Microsoft o Amazon, es común encontrar aplicaciones web híbridas que utilicen fuentes de datos como las siguientes:

Datos públicos ofrecidos mediante protocolos de redifusión web, como RSS o Atom.
En casos menos frecuentes, técnicas de ingeniería inversa como el "web scraping" para extraer datos de sitios web.

Todos esos datos se combinan normalmente con datos generados y gestionados internamente por el propietario de la aplicación web híbrida, como pueden ser datos internos de la empresa.

Para saber más

Ocultar

Algunos proveedores de servicios facilitan sus propias librerías en PHP y otros lenguajes para usar sus servicios en la nube. Ten en cuenta que aunque estas librerías puedas usarlas en tu código PHP e instalarlas desde composer, se trata de servicios en muchos casos de pago y que requieren autenticación previa, por lo que antes de usarlos revisa bien las condiciones de uso:

5.1.- Introducción a la reutilización de código e información.

Ocultar

Imagen que muestra dos estantes llenos de revistas.

Christian Bohr (Thommess) (CC BY-SA)

Cuando se utilizan repositorios de información y servicios web remotos en una aplicación web que se ejecuta en el servidor es necesario disponer de mecanismos para acceder a ellos. Por ejemplo, si el servicio web remoto está implementado usando SOAP, podemos usar el cliente SoapClient para acceder al servicio web remoto desde nuestro código PHP.

Para el caso de los servicios web REST y del uso de otro tipo de información RSS, Atom, etc.) que son accesibles a través del mismo protocolo HTTP, e incluso para la realización de web scrapping, necesitaremos hacer uso librerías y funciones que permiten hacer las veces de clientes HTTP desde nuestro propio código PHP. Esto en PHP es relativamente fácil en ciertos escenarios.

Por ejemplo, la siguiente URL contiene un feed RSS con noticias educativas de interés para el alumnado de Andalucía. Imagina que quieres descargarla y procesarla para ofrecer a los usuarios de tu web datos de dicha fuente:

http://www.juntadeandalucia.es/educacion/portals/delegate/rss/ced/portalconsejeria/alumnado/-/-/false/OR/true/ishare_noticefrom/DESC/

Si queremos acceder a dicho contenido remoto, el cual irá en XML, podemos ejecutar el siguiente código:

<?php 
$url="http://www.juntadeandalucia.es/educacion/portals/delegate/rss/ced/portalconsejeria/alumnado/-/-/false/OR/true/ishare_noticefrom/DESC/";
$contenidoDelFeed=file_get_contents($url);
echo $contenidoDelFeed;

El código anterior accederá al contenido de la URL indicada usando el método HTTP GET y funcionará siempre que tengas la opción allow_url_fopen = On en el archivo php.ini. El resultado será que obtendremos una cadena de texto con el XML de dicho feed RSS. Dicho documento podremos procesarlo con SimpleXML u otra librería.

Cuando las peticiones HTTP son sencillas, podemos utilizar métodos como el anterior, pero cuando son peticiones que usan los métodos POST, PUT o DELETE o requieren el envío de datos o el envío de cabeceras HTTP específicas (como el envío de cookies), es necesario hacer uso de funciones específicas.

En PHP podríamos hacer uso de la librería cURL que permite realizar peticiones HTTP complejas, pero su uso es ciertamente complicado. Como alternativa existen algunas librerías que facilitan el trabajo y que podemos instalar usando composer como es el caso de Guzzle:

Página web oficial de Guzzle (en inglés).

Para su instalación simplemente ejecutamos el siguiente comando:

composer require guzzlehttp/guzzle:~7.6

El comando anterior instalará la versión 7.6 compatible con PHP 7.2.5 o superior. Aunque no es obligatorio, Guzzle puede hacer uso de la extensión cURL cuando está activa en PHP, por lo que antes es conveniente que revises tu archivo php.ini y descomentes la línea siguiente:

Salvador Romero Villegas (Elaboración Propia). (CC BY-NC-SA)

A continuación tienes un pequeño ejemplo de su uso:

<?php
require_once __DIR__.'/vendor/autoload.php';

//Creamos un cliente HTTP
$clienteHTTP=new GuzzleHttp\Client();
//Iniciamos una petición GET
$url="http://www.juntadeandalucia.es/educacion/portals/delegate/rss/ced/portalconsejeria/alumnado/-/-/false/OR/true/ishare_noticefrom/DESC/";
$respuesta=$clienteHTTP->request('GET',$url, ['verify'=>false]);
//Obtenemos los datos del cuerpo del mensaje
echo $respuesta->getBody();

A la petición se ha añadido la opción ['verify'=>false], esta opción hará que no se verifique el certificado SSL en las peticiones seguras usando HTTPS. Si deseamos que se verifique podemos descargar el certificado público de la entidad certificadora y pasarselo como parámetro. En el siguiente ejemplo puedes ver como:

Ejemplo de proyecto para obtener un feed RSS (zip - 3,50 KB).

Nota: es necesario realizar composer install para instalar los paquetes necesarios y crear la carpeta vendor. El certificado SSL puede haber caducado en el momento de acceder a estos materiales, por lo que puede ser necesario que asocies uno actualizado.

Debes conocer

Ocultar

Cuando el contenido remoto a obtener tiene parámetros en la URL, como por ejemplo: http://sitioremoto/libro/datos.php?titulo=%C2%BFQu%C3%A9+fue+de+los+70%3F ; los datos deben ir codificados adecuadamente para que no "rompan" la URL con caracteres no permitidos. En este caso el valor pasado al parámetro titulo realmente es ¿Qué fue de los 70? pero se ha codificado para que la URL sea válida. Para realizar esto podemos hacer uso de la función urlencode:

<?php
$tituloCodificado=urlencode('¿Qué fue de los 70?');
$url="http://sitioremoto/libro/datos.php?titulo=".$tituloCodificado;

O bien también podemos hacer uso de la función http_build_query donde podemos proporcionar un array asociativo con todos los parámetros a enviar:

<?php

$datos=['titulo'=>'¿Qué fue de los 70?','year'=>2019];
$datosUrl=http_build_query($datos);
$url="http://sitioremoto/libro/datos.php?".$datosUrl
//Generaría la URL:
// http://sitioremoto/libro/datos.php?titulo=%C2%BFQu%C3%A9+fue+de+los+70%3F&year=2019

Y como era de esperar, Guzzle nos facilita un mecanismo muy sencillo para el envío de parámetros en la cadena de petición, veamos como:

$response = $clienteHTTP->get($url, [
    'query' => ['titulo' => '¿Qué fue de los 70?']
]);

Autoevaluación

Ocultar

Solución

5.2.- Autenticación y autorización.

Ocultar

Imagen que muestra dos muñecos con forma de policías.

Alexa (Licencia de contenido (Pixabay))

Como se comentó en el apartado anterior, existen repositorios de información y servicios web remotos de muchos tipos. Unos permiten el acceso sin restricciones y otros requieren el uso de algún tipo de credencial o autorización para su utilización. Esto ocurre especialmente en los servicios web de pago o que permiten el acceso a datos sensibles de usuarios.

Dentro de los mecanismos de acceso a servicios web REST, y de cara a su uso en aplicaciones web en un contexto B2B y/o SOA, se distinguen lo siguientes mecanismos para acreditar la identidad de quien va a usa el servicio de forma remota:

Autenticación y autorización basada en métodos HTTP de autenticación, como HTTP Digest o HTTP Basic. En cada petición se envía la información de autenticación usando las cabeceras HTTP propias de este tipo de autenticación.
Autenticación y autorización basada en tokens. Este tipo de autenticación tiene dos fases, en primer lugar el usuario se autentica enviando su usuario y contraseña (usando por ejemplo el método POST y enviando los datos de usuario y contraseña). Posteriormente el servicio web remoto genera un token único que deberá incluirse en cada petición HTTP añadiéndolo a la cabecera HTTP de alguna forma (que pueden variar desde cookies hasta cabeceras tipo Bearer).
Autenticación y autorización basada en sesiones. Una variación del uso de tokens es el uso de sesiones. Las sesiones utilizan cookies para propagar un identificador de sesión único (que equivale a un token), por lo que muchos servicios web aprovechan el uso de sesiones y cookies para autorizar el uso de un servicio, tras una autorización previa que suele realizarse usando el método HTTP POST y enviando los datos de usuario y contraseña.
Autorización basada en API keys. En este caso se trata de utilizar un servicio en el que previamente hemos solicitado unas claves para su uso API keys). No tiene una fase de autenticación, porque en realidad las API keys que obtenemos del mismo servicio son usadas para la autenticación y generalmente hay que enviarlas en cada petición que hacemos al servicio web remoto.
Autenticación y autorización basada en estándares avanzados (como SAML). En este tipo de escenarios primero es necesario autenticarse en un proveedor de identidad para luego poder acceder a diferentes proveedores de servicios que confían en el proveedor de identidad.

Ocultar

Por otro lado, cuando los servicios web remotos permiten acceder a datos personales de usuarios, como por ejemplo archivos que un usuario puede tener almacenados en la nube, se hace necesario que el usuario ofrezca un consentimiento explicito. Ese consentimiento consistirá en que el usuario acepta que una aplicación web como la que nosotros podemos estar desarrollando haga uso de sus datos en otro servicio web.

Para ilustrar este escenario piensa en un servicio como Google Drive. Imagina que la aplicación web que estás desarrollando permite subir un archivo al espacio de almacenamiento de un usuario en dicha plataforma. Para que tu aplicación web pueda usar el servicio de Google Drive en nombre de un usuario que ya está en dicha plataforma es necesario que: Google nos permita hacer uso de dicho servicio (generalmente a través de un API key) y también que obtengamos la autorización por parte del usuario para hacer uso de sus datos en Google.

El protocolo más usado hoy día para permitir que un usuario autorice el acceso a sus datos a un tercero es OAuth2. Este protocolo permite a una aplicación externa obtener acceso a información de carácter privado estableciendo un acuerdo de acceso a la misma entre la aplicación externa (nuestra aplicación), el servicio web y el propietario de los datos a los que se solicita el acceso.

El funcionamiento de OAuth2 se puede resumir con el siguiente esquema, donde una aplicación web intenta hacer uso del servicio de Google Tasks para añadir una tarea a la lista de tareas de un usuario:

Esquema de la utilización del protocolo OAuth2 en una aplicación web.

Elaboración propia. (Uso educativo no comercial)

En primer lugar, la aplicación web se comunica con el servidor de autorización OAuth2, indicando la información a la que quiere acceder y el tipo de acceso a la misma.
Tras esa solicitud, el usuario es redirigido a una página del proveedor de servicio (Google en este ejemplo) donde el servidor de autorización OAuth2 solicita directamente al usuario que inicie sesión (si aún no lo ha hecho) y le pide consentimiento expreso para otorgar acceso a su información desde la aplicación de un tercero (nuestra aplicación web).

Elaboración propia (Uso educativo no comercial)
Si el usuario da su consentimiento, el servidor de autorización OAuth2 devuelve a la aplicación web un código de autorización que permitirá acceder a los datos del usuario dentro de los límites de acceso que se han otorgado.

Debes conocer

Ocultar

Algunos mecanismos de autorización conllevan el envío de cabeceras HTTP para enviar tokens que han sido obtenidos en un paso previo de autenticación. Generalmente para ello se usa la cabecera Authorization. Por ejemplo, es común el uso de los denominados tokens de portador (bearer tokens):

GET /api/resource HTTP/1.1
Host: example.com
Authorization: Bearer eyJhbGciOiJIUzI1N

Esta misma cabecera se utiliza también para mecanismos de autorización basados en HTTP Basic o Digest, por ejemplo:

GET /api/resource HTTP/1.1
Host: example.com
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Usando Guzzle podemos enviar esta información de forma sencilla al realizar la petición HTTP:

$response = $client->request('GET', $url, [
    'headers' => [
        'Authorization' => 'Bearer ' . $token
    ]
]);

Para saber más

Ocultar

En el siguiente enlace tienes información sobre como usar los servicios de Google con OAuth2 para acceder a datos privados de un usuario (tras su consentimiento):

Artículo sobre la creación de una página de inicio de sesión en Google usando PHP

5.3.- Obteniendo datos remotos desde PHP. (I)

Caso práctico

Ocultar

Fotografía de una pila de discos ópticos.

Stockbyte (CD-DVD Num. V43.) (Uso educativo no comercial para plataformas públicas de Formación Profesional a distancia.)

Ada llegó a un acuerdo con Esteban sobre los aspectos a desarrollar en esta nueva fase del proyecto, y obtuvo los detalles sobre como integrar su aplicación de gestión de compras con la que ellos estaban desarrollando.

En poco tiempo, Carlos modifico la aplicación web para desarrollar los detalles del acuerdo. Su aplicación web era capaz de conectarse con la aplicación web de control de compras para lanzar, incluso, nuevas ordenes de compra cuando algunos productos se estaban quedando sin stock. Está muy contento con el resultado obtenido.

Ada le llama y le comenta que la próxima semana Esteban vendrá a BK Programación a conocer la aplicación. Carlos guarda una copia de la aplicación en su estado actual, y decide tomarse esa semana para intentar mejorarla y probarla a fondo. Hace una lista de los detalles que podría mejorar. Esa semana toca hacer pruebas y dar las últimas pinceladas, no pude haber ningún detalle que se escape.

Ocultar

Imagen que muestra un árbol del que cuelgan muchas conexiones y aplicaciones.

Gerd Altmann (Licencia de contenido (Pixabay))

Llega el momento de empezar a utilizar datos externos en nuestras aplicaciones web para convertirlas en aplicaciones web híbridas. Ya hemos visto un pequeño ejemplo en apartados anteriores y ahora vamos a entrar de lleno en ello y vamos a utilizar la librería Guzzle para ello.

Las peticiones HTTP con Guzzle requieren la creación de un cliente HTTP:

//Creamos un cliente HTTP con Guzzle
$clienteHTTP=new GuzzleHttp\Client();

La instancia de cliente tiene varios métodos para realizar peticiones. De forma genérica podemos hacer una petición HTTP usando el método request:

// Enviar una solicitud GET al recurso protegido con los encabezados de autenticación
$response = $clienteHTTP->request('GET', $url);

En el método request podemos ir cambiando el verbo y usar 'GET', 'POST', 'PUT' o 'DELETE' según las características del servicio remoto a usar (deberemos leer la documentación del servicio web remoto para saber que método debemos usar en cada momento). Si no queremos usar el método request, el cliente HTTP de Guzzle dispone de métodos alias para realizar cada tipo de petición, aunque realmente el resultado es el mismo:

$response = $clienteHTTP->get($url);    // Enviar una solicitud GET 
$response = $clienteHTTP->post($url);    // Enviar una solicitud POST
$response = $clienteHTTP->put($url);    // Enviar una solicitud PUT
$response = $clienteHTTP->delete($url);    // Enviar una solicitud DELETE

Tanto si usamos el método request como si usamos los métodos alias (post, put, get y delete) podemos proporcionar opciones a las peticiones HTTP, las cuales serán muy útiles en múltiples escenarios:

//Enviar datos JSON en la petición POST
$opciones=['json'=>['dato'=>'ejemplo']];
$response = $clienteHTTP->request('POST',$url, $opciones);

En la siguiente página puedes consultar las opciones que se pueden indicar en las peticiones HTTP usando Guzzle:

Opciones en las petición HTTP con Guzzle.

Una vez realizada la petición, toca analizar la respuesta. Tanto el método request como sus alias (post, put, get y delete) retornan un objeto que implementa la interfaz ResponseInterface de Guzzle. Este objeto tiene una serie de métodos para acceder a los datos recibidos, entre los que cabe destacar:

Métodos $response->getHeaders() y $response->getHeader('Content-Type'): permiten acceder a las cabeceras HTTP recibidas en la petición HTTP. El primero, permite obtener un array con todas las cabeceras recibidas, el segundo permite acceder a una cabecera HTTP concreta (como puede ser Content-Type o Content-Length).
Método $response->getBody(): permite obtener el contenido en texto recibido desde el servidor y hacer uso del mismo usando varias técnicas, entre las que cabe destacar las dos siguientes.
- Convertir la respuesta a cadena de texto: $textoRecibido=(string) $response->getBody().
- Usar el método getContents para acceder al texto recibido: $textoRecibido=$response->getBody()->getContents().

Adicionalmente, es normal encapsular la petición en un try-catch de forma que si se produce un error en la petición, pueda ser tratado adecuadamente:

try {
    $response = $clienteHTTP->request('GET', $url, $options);
    $body = $response->getBody();
    //Manejamos los datos de la respuesta recibida
    echo $body;
} catch (GuzzleHttp\Exception\RequestException $e) {    
    //Tratamos posibles errores al realizar la petición
}

Autoevaluación

Ocultar

Solución

5.3.1.- Obteniendo datos remotos desde PHP. (II)

Ocultar

Imagen que muestra a una persona picando en una mina

OpenClipart-Vectors (Licencia de contenido (Pixabay))

Como ya se ha comentado en apartados anteriores, muchos servicios web requieren de una autenticación previa o del envío de información de autorización (por ejemplo, credenciales en forma de API Keys).

Esta información de autenticación generalmente se envía en texto plano, aunque obviamente hay algunas excepciones. Esto quiere decir que en caso de que un tercero intercepte la petición HTTP esta información puede ser leída sin mucha dificultad, por lo que el proveedor de este tipo de servicios web siempre suele ofrecer sus servicios web usando el protocolo HTTPS en lugar de HTTP. La diferencia fundamental entre HTTPS y HTTP es que la comunicación va cifrada entre extremos, por lo que en caso de interceptar un mensaje no es posible ver el contenido.

Dicho lo anterior, y teniendo en cuenta que este tipo de servicios generalmente se usan a través del protocolo HTTPS, vamos a ilustrar el funcionamiento de un servicio autenticado usando HTTP Basic. Para ello vamos a imaginar un servicio web remoto que implementa una autorización tipo HTTP Basic y retorna, en caso de autenticación exitosa, un documento JSON:

<?php
require_once __DIR__.'/libs/functions.php';
$requiereAutenticacion=true;
if (isset($_SERVER['PHP_AUTH_USER']) && isset($_SERVER['PHP_AUTH_PW'])) {
    $user=$_SERVER['PHP_AUTH_USER'];
    $passwd=$_SERVER['PHP_AUTH_PW'];
    $requiereAutenticacion=!usuarioValido($user,$passwd);    
}

if ($requiereAutenticacion)
{
    header('WWW-Authenticate: Basic realm="APP"');
    header('HTTP/1.0 401 Unauthorized');        
    exit();
}

$resultado=['estado'=>'ERROR','monumentos'=>null];
$monumentosfile=__DIR__.'/datos/monumentos.json';
if (file_exists($monumentosfile))
{
    $resultado['estado']='OK';
    $resultado['monumentos']=json_decode(file_get_contents($monumentosfile));
}
header('Content-Type','application/json');
die(json_encode($resultado));

La autorización HTTP Basic requiere el envío de usuario y contraseña en cada petición HTTP. PHP almacenará dicha información en $_SERVER['PHP_AUTH_USER'] y $_SERVER['PHP_AUTH_PW']. El script anterior comprueba si el usuario y la contraseña son válidos usando una función llamada usuarioValido. Si el usuario no es válido, vuelve a enviar una cabecera tipo WWW-Authenticate con el estado 401 con la que reclama la autenticación por no estar autorizado. En caso de que el usuario sea válido enviará los datos solicitados en formato JSON.

La pregunta ahora es, ¿cómo podríamos usar Guzzle para acceder remotamente a dicho servicio web? Imagina que el servicio web anterior es accesible desde la URL http://localhost/mup_bas/servicioweb/obtenerListadoCiudades_AUTHBASIC.php. El servicio web anterior no tiene restricciones del método o verbo HTTP a utilizar, podríamos usar GET, POST, PUT o DELETE y la respuesta sería la misma. En este caso, vamos a realizar el método GET. Lo primero que deberíamos hacer es encapsular la información de autenticación:

$datosDeAutenticacion = base64_encode($usuario . ':' . $password);
$headers = [
    'Authorization' => 'Basic ' . $datosDeAutenticacion
];

La autorización HTTP BASIC requiere el envío de datos codificados en Base64, tal y como muestra el ejemplo anterior. Esos datos hay que adjuntarlos en la petición HTTP:

    //Enviamos la solicitud GET con las cabeceras
    $response = $clienteHTTP->request('GET', $url, ['headers' => $headers]);
    // Obtener el cuerpo de la respuesta
    $body = $response->getBody();
    // Usar los datos de la respuesta
    var_dump(json_decode($body));

Por último, es necesario tener en cuenta que es posible que la autenticación falle. Esto lo vamos a comprobar tratando posible excepciones en la petición HTTP, dado que si la autenticación falla el servicio web retorna el código 401 que indica que no se autoriza el acceso al recurso.

try {
    $response = $clienteHTTP->request('GET', $url, ['headers' => $headers]);
    $body = $response->getBody();
    var_dump(json_decode($body));
} catch (GuzzleHttp\Exception\RequestException $e) {    
    if ($e->getResponse()->getStatusCode()==401) //Error en la autenticación <acronym title="HyperText Transfer Protocol">HTTP</acronym> Basic
    {
        echo "<H2>Usuario y/o contraseña incorrectos</H2>";
    }
}

Ocultar

A la hora de realizar este tipo de aplicaciones híbridas (especialmente en desarrollo), debes siempre considerar que la aplicación web que implementa el servicio web y la aplicación web híbrida que usará dicho servicio web estarán en máquinas diferentes. En un escenario real la aplicación web híbrida no podrá usar ningún código PHP del servicio web ni viceversa.

Debes conocer

Ocultar

Muchos servicios requieren el uso de API Keys. Como ya se ha visto en apartados anteriores las API Keys son claves únicas que permiten el uso de un servicio concreto en un API remota concreta. Generalmente se usa en servicios web de tipo REST y debemos solicitarlas directamente al proveedor del servicio. Es importante que tengas en cuenta que las API Keys son secretas, por lo que no deberás compartirlas con nadie (salvo con el proveedor del servicio).

Dependiendo del servicio web y de su implementación, las API Keys se envían de una variedad de formas y deberás consultar la documentación específica del servicio para saber como enviarlas. Por lo general, se distinguen las siguientes formas:

Formas más comunes de envío de API *Keys*
Ejemplo de petición HTTP donde se envía el API Key	Explicación	Ejemplo de código en Guzzle
GET /recurso?api_key=<APIKEY>	Enviando el API Key en la cadena de petición como parámetros en la ruta (query string).	$response=$clienteHttp->get($url, ['query' => ['api_key' => $apiKey]);
GET /recurso HTTP/1.1 X-API-Key: <APIKEY>	Usando cabeceras personalizadas como X-API-Key.	$response=$clienteHttp->get($url, ['headers' => ['X-API-Key' => $apiKey]);
GET /recurso HTTP/1.1 Cookie: X-API-KEY=<APIKEY>	Encapsulándolo en una cookie.	$response=$clienteHttp->get($url, ['cookies' => ['X-API-Key' => $apiKey]);
GET /recurso HTTP/1.1 Authorization: <APIKEY>	Usando la cabecera <span class="typ">Authorization</span> a la que se le añade el APIKEY, a veces solo y a veces precedido de algún tipo de esquema de autenticación (Bearer, por ejemplo).	$response=$clienteHttp->get($url, ['headers' => ['Authorization' => $apiKey]);

Ejercicio Resuelto

Ocultar

En este ejercicio resuelto te proponemos que intentes realizar una aplicación web permita obtener un listado de monumentos de provincias de Andalucía basándote en el código aquí expuesto. Por un lado, deberás desarrollar la aplicación web que implementa el servicio web, accesible desde la URL:

http://localhost/mup_bas/servicioweb/obtenerListadoCiudades_AUTHBASIC.php

Y por otro lado deberás implementar la aplicación web híbrida que usará dicho servicio web:

http://localhost/mup_bas/cliente/listadoCiudadesAuthBasic.php

Aunque ejecutarás ambas aplicaciones web en el mismos servidor web local tienes que considerar que ambas son completamente independientes.

5.3.2.- Obteniendo datos remotos desde PHP. (III)

Ocultar

Imagen que muestra a un hombre que lleva una carretilla llena.

Mohamed Hassan (Licencia de contenido (Pixabay))

En el apartado anterior hemos revisado como usar Guzzle para construir nuestra aplicación web híbrida usando autenticación basada en HTTP Basic, y hemos visto por encima como enviar datos para otras autenticaciones.

Ahora vamos a revisar el proceso para realizar autenticaciones basadas en sesiones y cookies. El procedimiento es bastante similar en ambos casos:

En primer lugar es necesario iniciar sesión. Tras eso obtendremos una cookie con datos que tendremos que reenviar en cada petición posterior. En el caso de uso de sesiones, la información recibida en la cookie contendrá el identificador de sesión.
En segundo lugar haremos una o más peticiones, donde reenviaremos la información de la cookie, para solicitar los datos del recurso.

Para realizar este supuesto vamos a imaginar que en el servicio web tiene varios puntos de conexión (endpoint en inglés):

auth.php: endpoint para realizar el proceso de autenticación, retornará cookies con identificadores de sesión que deberán enviarse en sucesivas peticiones. Los datos de usuario y contraseña deben ir codificados como se envían en un formulario (es decir, Content-Type: x-www-form-urlencoded).
get.php: endpoint que permitirá obtener un listado de recursos, solo admite peticiones tipo GET y retorna un documento JSON.
post.php: endpoint que permitirá añadir un recurso al listado de recursos, solo admite peticiones tipo POST y los datos deben ir en formato JSON (es decir, Content-Type: application/json).
delete.php: endpoint que permitirá borrar un recurso del listado de recursos, solo admite peticiones tipo DELETE y los datos deben ir formato JSON.

Vamos a revisar como sería el proceso de autenticación y de obtención de listado de recursos imaginando que los puntos de conexión del servicio web están accesibles en la URL: http://localhost/mup_ses/servicioweb/<script>.php. Antes de entrar en el meollo, a continuación puedes ojear una posible implementación de los scripts del servicio web:

Posible implementación del endpoint: auth.php

El punto de conexión del servicio web auth.php se encargaría del proceso de autenticación y podría ser así. Fíjate como se inicializan las sesiones y se guarda en la sesión los datos del usuario autenticado, y además, como la respuesta es diferente en caso de que se pueda iniciar sesión adecuadamente.

$respuesta = new stdClass;
session_start();
if (!isset($_SESSION['auth'])) //Si no está autenticado previamente
{
    $user = filter_input(INPUT_POST, 'user');
    $pwd = filter_input(INPUT_POST, 'pwd');    
    $respuesta->estado = 'AUTH_INCOMPLETA';
    //Si no está autenticado previamente, miramos user/pwd vía POST
    if (is_string($user) && is_string($pwd)) {
        if (usuarioValido($user, $pwd)) {
            $respuesta->estado = 'AUTH_OK';
            $_SESSION['auth'] = $user;
        } else
            $respuesta->estado = 'AUTH_FALLO';
    }
    
}
else $respuesta->estado = 'READY';

header("Content-Type","application/json");
die(json_encode($respuesta));';

Posible implementación del endpoint: get.php

Este punto de conexión se encargaría simplemente de obtener un listado de datos que en este caso corresponden con un conjunto de monumentos de las provincias de Andalucía. Fíjate que antes de proceder a enviar los datos, se verifica que en la sesión haya almacenados sobre el usuario autenticado y que el método sea GET.

session_start();

if (!$_SESSION['auth'] && $_SERVER['REQUEST_METHOD']!='GET') 
    die(json_encode(['error'=>'Petición no esperada']));

$archivo=__DIR__.'/datos/monumentos.ser';

//Obtenemos los datos para deserializar
$monumentos=unserialize(file_get_contents($archivo));

header("Content-Type","application/json");
die(json_encode($monumentos));

En el proceso de autenticación a través de sesiones recogeremos las cookies (fundamentales en este caso) en un objeto llamado CookieJar que proporciona Guzzle. Estas cookies las usaremos después, con lo que lo único que tenemos que hacer ahora es enviar los datos de autenticación como si de un formulario normal y corriente se tratase a auth.php:

$clienteHTTP=new GuzzleHttp\Client();

//Creamos un "bote" de cookies para almacenar las cookies
$jar = new \GuzzleHttp\Cookie\CookieJar;

// Establecemos los datos de autenticación
$usuario = 'ejemplo';
$password= 'ejemplo*';

$datosForm = [
    'user' => $usuario,
    'pwd' => $password
];

$url=SERVER_URI.'auth.php';
try {
    // Enviar una solicitud POST al recurso enviando los datos de
    // autenticación como datos de formulario.
    // Añadimos el "bote de cookies" para que se guarden ahí las cookies recibidas
    $response = $clienteHTTP->request('POST', $url, 
        ['form_params' => $datosForm, 'cookies'=>$jar]
    );    
    $body = $response->getBody();    
    $resultado=json_decode($body->getContents());
    
} catch (GuzzleHttp\Exception\RequestException $e) {    
        echo "<H2>Se ha producido un error en la petición</H2>";
        echo "<P>Error: {$e->getMessage()}</P>";
}

En el código anterior las líneas clave son:

Línea 4: creamos el "bote de cookies" para guardar las cookies recibidas desde el servicio web.
Líneas 20, 21 y 22: enviamos la petición añadiendo la información de autenticación como un formulario normal y corriente (form_params) y añadimos el bote de cookies para que las cookies recibidas se guarden ahí.

Una vez creado eso, a continuación del código anterior en el mismo script PHP, pondríamos el código para usar el servicio esperado:

$url=SERVER_URI.'get.php';
if (isset($resultado) && $resultado->estado=="AUTH_OK" || $resultado->estado=='READY')
{
    $options=['cookies'=>$jar];    
    $response = $clienteHTTP->get($url,$options);  
    var_dump(json_decode($response->getBody()->getContents()));
}
else
{
    echo "No se ha podido autenticar en el servicio.";
}

Fíjate como en las las líneas 5 y 6 se usa el "bote de cookies" donde se han almacenado las cookies recibidas de la petición anterior. Además, este bloque se ejecuta solo si el resultado de la autenticación realizada en el bloque de código anterior ha resultado exitosa.

Debes conocer

Ocultar

En caso de que quisiéramos conservar de forma permanente las cookies, podríamos almacenarlas en disco usando FileCookieJar. En el siguiente enlace tienes más información sobre el uso de cookies en Guzzle, donde se trata este asunto:

Uso de cookies en Guzzle

5.3.3.- Obteniendo datos remotos desde PHP. (IV)

Ocultar

Imagen que muestra un fragmento de código fuente

fancycrave1 (Licencia de contenido (Pixabay))

En el apartado anterior vimos como se podía autenticar una aplicación web híbrida en un servicio web que usa sesiones y cookies para realizar la autenticación de un usuario. Vamos a complementar el apartado anterior viendo como un aplicación web híbrida podría realizar una petición POST y una petición DELETE donde se envían datos en formato JSON usando Guzzle.

Para ello vamos a ver como podrían ser los endpoints del servicio web que atenderían dichas peticiones HTTP desde nuestra aplicación web híbrida:

Posible implementación del endpoint: post.php

En este punto de conexión del servicio web encontraríamos nuevamente la verificación de información de la sesión y la comprobación del método HTTP esperado. Dado que lo datos se reciben son de tipo JSON, lo cual es diferente a como los envía un formulario normal y corriente, se recopilan accediendo directamente a lo datos recibidos en el cuerpo de la petición HTTP (leyendo php://input con file_get_contents).

<?php

session_start();

if (!$_SESSION['auth'] || $_SERVER['REQUEST_METHOD']!='POST') 
    die(json_encode(['error'=>'Petición no esperada']));

$archivo=__DIR__.'/datos/monumentos.ser';

//Obtenemos los datos para deserializar
$monumentos=unserialize(file_get_contents($archivo));

//$datos recibidos
$datos=json_decode(file_get_contents('php://input'));

$respuesta=new stdClass;
$respuesta->resultado='ERROR';
if ($datos!==false 
    && isset($datos->provincia) && is_string($datos->provincia) 
    && isset($datos->nombre) && is_string($datos->nombre) 
    && isset($datos->latitud) && is_numeric($datos->latitud)
    && isset($datos->longitud) && is_float($datos->longitud)     
    && isset($monumentos[$datos->provincia]))
{
    $monumentos[$datos->provincia][] = 
        ['nombre'=>$datos->nombre, 
         'latitud'=>$datos->latitud, 
         'longitud'=>$datos->longitud, 
         'id'=>uniqid()];
    file_put_contents($archivo,serialize($monumentos));
    $respuesta->resultado='OK';
}

header("Content-Type","application/json");
die(json_encode($respuesta));

Posible implementación del endpoint: delete.php

Nuevamente en este punto de conexión del servicio web encontraríamos en primer lugar un control que verifica si el usuario ha iniciado sesión o no y el control del método HTTP esperado (DELETE en este caso).

Aquí también los datos que se reciben deben ser JSON y se recopilan accediendo a php://input usando file_get_contents.

<?php

session_start();

if (!$_SESSION['auth'] || $_SERVER['REQUEST_METHOD']!='DELETE') 
    die(json_encode(['error'=>'Petición no esperada']));

$archivo=__DIR__.'/datos/monumentos.ser';

//Obtenemos los datos para deserializar
$monumentos=unserialize(file_get_contents($archivo));

//$datos recibidos
$datos=json_decode(file_get_contents('php://input'));

$respuesta=new stdClass;
$respuesta->resultado='ERROR';
if ($datos!==false && isset($datos->id) && is_string($datos->id))
{
    $encontrado=false;
    foreach($monumentos as &$provincia)
        foreach ($provincia as $pos=>$monumento)
            if ($monumento['id']===$datos->id)
            {
                unset ($provincia[$pos]);
                $encontrado=true;
                break 2;
            }    
    if ($encontrado)
    {
        file_put_contents($archivo,serialize($monumentos));
        $respuesta->resultado='BORRADO';
    }
    else
        $respuesta->resultado='NO_ENCONTRADO';    
}

header("Content-Type","application/json");
die(json_encode($respuesta));

Una vez revisados como podría ser el código de los puntos de conexión al servicio web, veamos como podríamos hacer uso de ellos desde nuestra aplicación web híbrida. En ambos casos, los datos irían en formato JSON, con lo que usaremos la opción json a la hora de realizar la petición con Guzzle.

En el siguiente ejemplo se enviaría una petición POST a post.php para crear un nuevo monumento. El código siguiente solo muestra la parte donde se hace uso de post.php, el proceso de autenticación contra auth.php se realizaría siguiendo el mismo proceso explicado en el apartado anterior:

$url=SERVER_URI.'post.php';
if (isset($resultado) && $resultado->estado=="AUTH_OK" || $resultado->estado=='READY')
{
    $datosNuevoMonumento=[
        'provincia'=>'Almería',
        'nombre'=>'El cable inglés',
        'latitud'=>36.83291439124473,
        'longitud'=>-2.458332716320346
    ];
    $options=['cookies'=>$jar,'json'=>$datosNuevoMonumento];    
    $response = $clienteHTTP->post($url,$options);  
    var_dump(json_decode($response->getBody()->getContents()));
}
else
{
    echo "No se ha podido autenticar en el servicio.";
}

En el código anterior caben destacar las líneas 11 y 12, donde se envían las cookies (usando el bote de cookies donde están almacenadas previamente) y datos del nuevo monumento, usando el método post() del cliente HTTP de Guzzle. De forma similar, pero usando el método delete() podríamos acceder al otro punto de conexión del servicio web (delete.php):

$url=SERVER_URI.'delete.php';
if (isset($resultado) && $resultado->estado=="AUTH_OK" || $resultado->estado=='READY')
{
    $monumentoABorrar=[
        'id'=>'646a151b8a27c'
    ];
    $options=['cookies'=>$jar,'json'=>$monumentoABorrar];    
    $response = $clienteHTTP->delete($url,$options);  
    var_dump(json_decode($response->getBody()->getContents()));
}
else
{
    echo "No se ha podido autenticar en el servicio.";
}

Ejercicio Resuelto

Ocultar

Para finalizar la unidad te proponemos crear un proyecto con los aspectos tratados en los dos últimos apartados. La idea sería que intentes realizar una aplicación web que hará las veces de servicio web, implementando los puntos de conexión siguientes:

http://localhost/mup_ses/servicioweb/auth.php : Implementar la autenticación por sesiones.
http://localhost/mup_ses/servicioweb/get.php: Verificar si el usuario ha iniciado sesión y obtener el listado de monumentos.
http://localhost/mup_ses/servicioweb/post.php: Verificar si el usuario ha iniciado sesión y añadir un nuevo monumento.
http://localhost/mup_ses/servicioweb/delete.php: Verificar si el usuario ha iniciado sesión y borrar un documento.

Después, la idea sería que implementaras una aplicación web híbrida que haga uso del servicio web anterior, donde haya tres scripts:

http://localhost/mup_ses/cliente/listarmonumentos.php : hacer uso del servicio web con autenticación por sesiones para obtener un listado de monumentos.
http://localhost/mup_ses/cliente/nuevomonumento.php: hacer uso del servicio web con autenticación por sesiones para añadir un nuevo monumento.
http://localhost/mup_ses/cliente/borrarmonumento.php:hacer uso del servicio web con autenticación por sesiones para borrar un monumento existente.

Aunque ejecutarás ambas aplicaciones web en el mismos servidor web local tienes que considerar que ambas son completamente independientes.

Retroalimentación

A continuación te ofrecemos una solución propuesta para el ejercicio, basada en los ejemplos que has visto en este último apartado. La aplicación es un esquema base que puede servir de partida para proyectos de más embergadura:

Proyecto de ejemplo: implementación de aplicación web híbrida usando autenticación por sesiones. (zip - 9,10 KB)

Cuando descomprimas el proyecto ten en cuenta lo siguiente:

Entra en la carpeta llamada cliente y ejecuta composer install desde la línea de comandos para instalar las dependencias.
Ajusta la ruta al servicio web en el archivo cliente/conf.php.
Fíjate en los ejemplos cliente/test.php y servicioweb/dumper.php. Puedes usar dichos archivos para comprobar que datos recibe el servicio web desde la aplicación web híbrida.
Se acepta como usuario y contraseñas válidas los datos: usuario y usuario*.

Anexo I.- Información sobre JSON y XML.

Ocultar

Muchas de las operaciones que se llevan a cabo cuando utilizas un servicio web implican la obtención de cierta información por parte del mismo. La información obtenida puede ser bastante sencilla o tener cierto grado de complejidad.

Símbolo de un ordenador que muestra en pantalla una bola del mundo.

David Schoen / lyte (Dominio público)

Los formatos más utilizados por los servicios web para dar formato a esas respuestas son dos: JSON y XML. En algunos casos tendrás que adaptar tu código al tipo de respuesta que ofrezca el servicio. Otros servicios permiten que escojas el tipo de respuesta que prefieras. Veamos cómo se pueden procesar de forma sencilla desde PHP mensajes en ambos formatos.

A partir de la versión 5.2 de PHP, se incluye por defecto la extensión JSON. Su funcionamiento es muy sencillo. Incorpora dos funciones para tratar con cadenas de texto en notación JSON:

Extensión JSON.

json_decode. Decodifica una cadena de texto JSON y la transforma en un objeto PHP (opcionalmente también se podría convertir en un array).
```
$cadena_json = '{"negro":1,"rojo":2,"verde":3,"azul":4}';
```
json_encode. Función inversa a la anterior. Devuelve una cadena de texto en notación JSON a partir del contenido de una variable PHP.
```
$arr = array('negro' => 1, 'rojo' => 2, 'verde' => 3, 'azul' => 4);
$cadena_json = json_encode($arr);
```

Así como las opciones para trabajar con JSON desde PHP están bien definidas, para utilizar XML hay más variedad de herramientas para escoger. En PHP 4 podías utilizar dos formas para procesar documentos en formato XML: DOM y SAX. La extensión SimpleXML, habilitada por defecto a partir de PHP 5.1.2, facilita la tarea de extraer información de un documento XML. Vamos a ver su funcionamiento.

Extensión SimpleXML.

La extensión convierte un documento XML en un objeto de la clase SimpleXMLElement. Puedes cargar el documento:

desde una cadena de texto, utilizando la función simple_load_string.
```
$xml = simplexml_load_string($cadena); 
```

desde un fichero, utilizando la función simplexml_load_file. Puedes utilizar una dirección URI como origen, por ejemplo:

$xml = simplexml_load_file('http://www.juntadeandalucia.es/educacion/portals/delegate/rss/ced/portalconsejeria/alumnado/-/-/false/OR/true/ishare_noticefrom/DESC/');

Los nodos y atributos del documento XML se convierten en atributos. Los nodos pasan a ser arrays que contienen a su vez como elementos los atributos y subnodos del documento XML. Por ejemplo, para acceder al siguiente documento XML:

<libros>
  <libro>
    <titulo>El Gran Gatsby</titulo>
    <autor>F. Scott Fitzgerald</autor>
    <anio>1925</anio>
  </libro>
  <libro>
    <titulo>Cien años de soledad</titulo>
    <autor>Gabriel García Márquez</autor>
    <anio>1967</anio>
  </libro>
</libros>

Podríamos hacerlo así:

$xml = simplexml_load_file($textoXML);

// cada <libro></libro> sería un elemento del array $xml->libro
foreach ($xml->libro as $libro) {
    //Cada elemento dentro de libro, es un atributo
    $titulo = $libro->titulo;
    $autor = $libro->autor;
    $anio = $libro->anio;
    echo "Título: $titulo<br>";
    echo "Autor: $autor<br>";
    echo "Año: $anio<br>";
    echo "<br>";
}

Debes conocer

Ocultar

Es importante que conozcas cómo procesar documentos XML para extraer información de los mismos. En el manual de PHP puedes encontrar información sobre la utilización de la extensión SimpleXML.

Extensión SimpleXML.

Condiciones y términos de uso de los materiales

Ocultar

Materiales desarrollados inicialmente por el Ministerio de Educación, Cultura y Deporte y actualizados por el profesorado de la Junta de Andalucía bajo licencia Creative Commons BY-NC-SA.

Antes de cualquier uso leer detenidamente el siguente Aviso legal

Ocultar

Historial de actualizaciones

Versión: 03.00.01	Fecha de actualización: 08/05/25
Actualización de materiales y correcciones menores.

Versión: 03.00.00	Fecha de actualización: 30/05/23	Autoría: Salvador Romero Villegas
Ubicación: Reorganización completa. Mejora (tipo 3): Esta unidad (Unidad 7) se fusionaría con la Unidad 6 con este nuevo título: Aplicaciones web dinámicas e híbridas. Los cambios solicitados para Aplicaciones web híbridas serían: Añadir sección de cómo generar información para un aplicación híbrida del lado del servidor. Reconvertir a la idea de aplicación híbrida del lado del cliente de lo que se explica del servicio OpenStreetMap u otros. Constituir los conceptos de Aplicaciones web híbridas con Aplicaciones web dinámicas en una nueva unidad integrada. Ubicación: 1.0 Mejora (tipo 1): Enlace roto al pdf de Rest y Servicios web Ubicación: Mapa conceptual Mejora (Mapa conceptual): Modificación del mapa conceptual por reestructuración de la unidad Ubicación: Orientaciones del alumnado Mejora (Orientaciones del alumnado): Modificación de las Orientaciones del alumnado por reestructuración de la unidad

Versión: 03.00.00

Fecha de actualización: 30/05/23

Autoría: Salvador Romero Villegas

Ubicación: Reorganización completa.
Mejora (tipo 3): Esta unidad (Unidad 7) se fusionaría con la Unidad 6 con este nuevo título: Aplicaciones web dinámicas e híbridas. Los cambios solicitados para Aplicaciones web híbridas serían: Añadir sección de cómo generar información para un aplicación híbrida del lado del servidor. Reconvertir a la idea de aplicación híbrida del lado del cliente de lo que se explica del servicio OpenStreetMap u otros. Constituir los conceptos de Aplicaciones web híbridas con Aplicaciones web dinámicas en una nueva unidad integrada.

Ubicación: 1.0
Mejora (tipo 1): Enlace roto al pdf de Rest y Servicios web

Ubicación: Mapa conceptual
Mejora (Mapa conceptual): Modificación del mapa conceptual por reestructuración de la unidad

Ubicación: Orientaciones del alumnado
Mejora (Orientaciones del alumnado): Modificación de las Orientaciones del alumnado por reestructuración de la unidad

Versión: 02.00.00	Fecha de actualización: 29/05/17	Autoría: Jesús Manuel Marín Navarro
Ubicación: 3, 3.1, 4.3, 4.6 Mejora (tipo 1): Cambiados los vídeos para adaptarse al nuevo interfaz del portal de desarrollo de Google en 3 y 3.1. Añadido un para saber más con más info sobre la política de precios de Google Map. Añadida la libreria gmaps.js en para saber más del 4.3. Añadida la sección 4.6 con OpenStreetMap Ubicación: Completo Mejora (tipo 3): Las APIs de Google son ahora de pago, hay que volver a redactar dichos apartados y buscar otras alternativas libres.

Versión: 02.00.00

Fecha de actualización: 29/05/17

Autoría: Jesús Manuel Marín Navarro

Ubicación: 3, 3.1, 4.3, 4.6
Mejora (tipo 1): Cambiados los vídeos para adaptarse al nuevo interfaz del portal de desarrollo de Google en 3 y 3.1. Añadido un para saber más con más info sobre la política de precios de Google Map. Añadida la libreria gmaps.js en para saber más del 4.3. Añadida la sección 4.6 con OpenStreetMap

Ubicación: Completo
Mejora (tipo 3): Las APIs de Google son ahora de pago, hay que volver a redactar dichos apartados y buscar otras alternativas libres.

Versión: 01.02.00	Fecha de actualización: 14/04/15	Autoría: Carlos Ríos Ruiz
Ubicación: Sección 4.5.3 Mejora (tipo 2): Modificación de la aplicación web de ejemplo Repartos para adaptarla a los cambios de las APIs de Google. Ubicación: Sección 4.5.3 Mejora (tipo 2): Añadido recurso fichero pdf explicando detalladamente la forma de configurar todo lo necesario para la ejecución de la aplicación web ejemplo, así como su funcionamiento.

Versión: 01.02.00

Fecha de actualización: 14/04/15

Autoría: Carlos Ríos Ruiz

Ubicación: Sección 4.5.3
Mejora (tipo 2): Modificación de la aplicación web de ejemplo Repartos para adaptarla a los cambios de las APIs de Google.

Ubicación: Sección 4.5.3
Mejora (tipo 2): Añadido recurso fichero pdf explicando detalladamente la forma de configurar todo lo necesario para la ejecución de la aplicación web ejemplo, así como su funcionamiento.

Versión: 01.01.00	Fecha de actualización: 20/04/14	Autoría: Sonia Amate Garrido
Adaptación de los contenidos a las nuevas librerías de google.

Versión: 01.00.00	Fecha de actualización: 20/04/14
Versión inicial de los materiales.