Revisión de 21:08 15 feb 2019

BLOQUE 2 PHP: PROGRACION DE APLICACIONES WEB EN ENTORNO SERVIDOR

Contenido

• 1 ¡El servidor te responde
  • 1.1 Objetivo
  • 1.2 Jaxon
  • 1.3 Xajax
  • 1.4 Usando xajax
• 2 Resumen
  • 2.1 Implementando el método xajax en el servidor
  • 2.2 Invocando a la función desde el cliente
  • 2.3 Ejemplo
• 3 Actividad

¡El servidor te responde

PHP Como lenguaje orientado a objetos

Conceptos básicos |  Ejercicios |  Práctica

Objetivo

• La intención es que php genere una página html que entrega al cliente y que contenga código ajax, de modo que cuando el cliente lo necesite solicite recargar solo parte de la página.
• En este caso pretendemos que sea el servidor el que genere este código, y no generarlo directamente en el cliente.
• Existen situaciones en las cuales puede ser interesante aplicar esta forma de proceder.

• Muchas de estas librerías suelen apoyarse en librerías JavaScript como jQuery para la ejecución de código en el cliente.
• Podemos ver estas librerías en

1. http://ajaxpatterns.org/PHP_Ajax_Frameworks
2. http://www.ribosomatic.com/articulos/top-librerias-ajax-dhtml-y-javascript/

• Vamos a estudiar un poco por encima Xajax, por ser una librería de código abierto y de sencillo uso.
• Ha estado muchos años caída, pero actualmente se ha recuperado el proyecto y por lo tanto lo vamos a utilizar

Jaxon

• Es una librería basada en xajax adaptada para php-7
• En la actualidad (2019) funciona correctamente.
• La página oficial:

https://www.jaxon-php.org/

Instalación

• Podemos instalar con composer montando un composer.json en el directorio del proyecto

{
"require": {
    "jaxon-php/jaxon-core": "~2.0"
}
}

• Después actualizamos composer

 composer update

• Vemos que se ha descargado la librería bajo el directorio vendor

Usando ajax

1.- En el servidor cargamos la librería de ajax a través del autoload de composer<nr />

<?php
require_once "./vendor/autoload.php";
?>

2.- Cargamos un objeto de la clase Jaxon a través de la función jaxon() que obtiene un singleton (si ya existía lo recupera, si no, lo crea).

<?php
$ajax = jaxon();
?>

3.- Temas de configuración (MRM pendienete de mirar)
4.- Cargamos el código de javascript en el cliente a través de la librería

<?php
 $ajax->getCss();
 $ajax->getJs();
 $ajax->getScript().
?>

Insert javascript and CSS code in the HTML page with calls to

Make sure that the application does not use one of the classes that were deprecated. Install the jaxon-core package with Composer and load the autoloader in the application. Access to the main object with $jaxon = jaxon(), and get response objects by instanciating the Jaxon\Response\Response class. Set the new configuration options with calls to $jaxon->setOption(), especially the core.request.uri and core.language options which replace the $sRequestURI and $sLanguage parameters of the xajax class constructor.

Xajax

• Para instalarlo vamos a la página oficial

http://www.xajax-project.org/en/home/ si no está disponible ir a esta ubicación de githun
https://github.com/Xajax/Xajax

• Esta página suele estar con mucha frecuencia hakeada.
• En la sección download podemos bajar la versión 0.6 (es beta, pero funciona ok). Para un sitio en producción se recomienda la última estable (0.5)
• Nos interesan las carpetas xajax_core y xajax_js, las cuales incorporaremos a nuestro proyecto
• Además en el fichero php donde vayamos a usarlo lo incluiremos

require_once (./xajax_core/xajax_inc.php');

• Nosotros usaremos la clase xajax, podemos ver su documentación en la misma página sección doc&tutorial

http://www.xajax-project.org/en/docs-tutorials/api-docs/xajax-core/xajax-inc-php/xajax/

Usando xajax

• Para usar esta tecnología con esta clase

require_once (./xajax_core/xajax_inc.php');
 
$miXajax = new xajax();

• La clase necesita incluir una serie de código en javascript en la página que vamos a generar, printJavascript()

....
$miXajax->printJavascript()

• Prueba a ver el resultado de la página con lo escrito hasta ahora. Para ello ejecuta el proyecto, y aunque no aparezca nada, mira el código de la página en el cliente y podrás observar algo parecido

<?php
//cargo la librería de xajax
require ('xajax_core/xajax.inc.php');
 
$ajax = new xajax();
$ajax->printJavascript();
 
?>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Probando xajax</title>
        <script type="text/javascript" src="valida.js"></script>
 
 
    </head>
    <body>
        <h1> Accede al código fuente de esta página y verás código javascript</h1>
 
 
    </body>
</html>

{{Plegable|hide|Viendo el resultado del código escrito|

<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
xajax.config.requestURI = "http://localhost/AppAjax/index.php";
xajax.config.statusMessages = false;
xajax.config.waitCursor = true;
xajax.config.version = "xajax 0.5";
xajax.config.defaultMode = "asynchronous";
xajax.config.defaultMethod = "POST";
xajax.config.JavaScriptURI = "";
/* ]]> */
</script>
<script type="text/javascript" src="xajax_js/xajax_core.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
window.setTimeout(
 function() {
  var scriptExists = false;
  try { if (xajax.isLoaded) scriptExists = true; }
  catch (e) {}
  if (!scriptExists) {
   alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: xajax_js/xajax_core.js");
  }
 }, 2000);
/* ]]> */
</script>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Probando xajax</title>
        <script type="text/javascript" src="valida.js"></script>
 
 
    </head>
    <body>
        <h1> Accede al código fuente de esta página y verás código javascript</h1>
 
 
    </body>
</html>
</html>
}}
*En caso de que la librería de '''''xajax_js''''', no esté en la carpeta actual, hay que confirugarlo
<source lang=php>
...
$miXajax->configure ('javascript URI','./libs/');
 
....

• Podemos también establecer (solo para el desarrollo), que nos dé un traceo del proceso.

...
$miXajax->configure ('debug',true);
 
....

• A continuación debemos registrar aquellas funciones que queremos ejecutar en modo ajax.

Es decir el cliente puede solicitar para recargar solo parte de la página que se ejecute una función. Estas funciones las debemos de registrar primero

...
$ajax->register(XAJAX_FUNCTION, 'saludar');
 
....

• Esto implicará que se en la página html se crea una función que tiene este nombre con el prefijo xajax_
• En el caso anterior se creará una función llamada xajax_saludar(...)
• Y para terminar este proceso de configuración, debemos usar el método que se encargue de procesar las llamadas ajax que se reciban.

...
$ajax->processRequest();
 
....

• El método processRequest() debe ser invocado antes de sacar ninguna salida ni echo ni código html

Resumen

<?php //cargo la librería de xajax require ('xajax_core/xajax.inc.php');   $ajax = new xajax();   //Para poder tener una traza de lo que ocurre $ajax->configure('debug',true); //Especificar la ubicación de la librería (En este caso innecesario) $ajax->configure('javascript URI','./');   //Ahora registramos las funciones que podrán ser invocadas de forma asíncrona desde el cliente $ajax->register(XAJAX_FUNCTION, 'saludar'); $ajax->register(XAJAX_FUNCTION, 'otraFuncion'); //Estas acciones implicarán que en el html del cliente se creen las funciones xajax_saludar () y xajax_otraFuncion()   //Este método procesará las llamadas que reciba la página  ???? //Imporante llamarla antes de que el guión genere ningúna salida. $ajax->processRequest();     //La librería necesita generar código java script en la página que enviamos al cliente $ajax->printJavascript();

Implementando el método xajax en el servidor

• Ahora en el servidor hay que escribir el código de la función que hemos registrado
• Implementarmos lo que queremos que haga
• Para comunicarnos con el cliente necesitamos un objeto de la clase xajaxReponse()

http://www.xajax-project.org/en/docs-tutorials/api-docs/xajax-core/xajaxresponse-inc-php/xajaxresponse/

function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
 
 ................ 
   return $respuesta;
}
;Leyendo los datos que vienen del cliente
*En el parámetro de la función recibimos un array con todos los input del formulario desde el que se invoca a la función
<source lang=php>
function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
 
//En el formulario del cleinte desde donde se invoca a esta función habrá un input con name  nombre
$nombre = $datosDelCliente['nombre'];
 
 ................ 
   return $respuesta;
}

Indicando acciones en el cliente

• por ejemplo podemos poner un mensaje que se visualizará en el cliente
• También podemos indicar que se ejecute un script

function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
   $respuesta->alert("Este es un mensaje para el cliente");
 
 ................ 
   return $respuesta;
}

Poniendo datos para el cliente

• Una de los objetivos principales será pasar valores al cliente para que actualice la página
• Podremos actuar sobre los distintos elementos del html volviendo elementos ocultos o mostrando otros
• Para pasar valores usamos el método assign o append

function saludar ($datosDelCliente){
 
   $respuesta = new xajaxResponse();
   //En el formulario del cleinte desde donde se invoca a esta función habrá un input con name  nombre
  $nombre = $datosDelCliente['nombre'];
  $msj="Hola $nombre encantado de saludarte");
  $respuesta->assign('saludo', 'innerHTML', $msj);
 ................ 
   return $respuesta;
}

• En el cliente tendremos un elemento con id saludo que se sustituirá por el texto especificado

Invocando a la función desde el cliente

• Para terminar el proceso lo que nos queda es la parte de cliente
• Ahora tenemos que hacer que desde el cliente podamos invocar a este método
• En este caso lo vamos a hacer desde un formulario
• Nos vamos a crear un formulario donde vamos a invocar a una funcion en el cliente
• Esa función es la que va a invocar a la función del servidor
• Es importante ahora el id del formulario que va a ser el nombre de array con el que el servidor va a recibir los datos del mismo
• Al mismo tiempo establecemos un id para ubicar el lugar donde pongamos el texto que el servidor nos ponga

 <form id='datosFormulario' action="javascript:void(null);" onsubmit="saludar();">
            Dime tu nombre:
            <input type="text" name="nombre" id="nombreCliente">
            <input type="submit" value="enviar">
            <div id="saludo" ></div>
 </form>

• Ahora queda implementar la función saludar()

<script type="text/javascript">
 
function saludar() {
 
    // Aquí se hace la llamada a la función registrada de PHP
    xajax_saludar(xajax.getFormValues("datosFormulario"));
 
    return false;
}
</script>

• Como ya sabéis se recomienda escribir las funciones en un fichero aparte

  <script type="text/javascript" src="saludar.js"></script>

• y ya en el fichero saludar.js escribimos la función

Ejemplo

• Hacemos un programa que nos haga o el cuadrado de un número o su raiz cuadrada meditante llamadas ajax

<?php
//cargo la librería de xajax
require ('xajax_core/xajax.inc.php');
 
$ajax = new xajax();
 
//$ajax->configure('debug',true);
//Estas funciones podrán ser invocadas de forma asíncrona desde el cleinte
$ajax->register(XAJAX_FUNCTION, 'calcularC');
$ajax->register(XAJAX_FUNCTION, 'calcularR');
 
//Este método procesará las llamadas que reciba la página  ????
//Imporante llamarla antes de que el guión genere ningúna salida.
$ajax->processRequest();
 
//$ajax->configure('javascript URI','./');
//La librería necesita generar código java script en la página que envíamos al cliente
$ajax->printJavascript();
 
 
 
 
 
 
function calcularC($datos) {
    $respuesta = new xajaxResponse();
    $num = $datos['cuadradoServidor'];
    $r = $num*$num;
    $respuesta->alert("Calculando Cuadrado .....");
    $respuesta->assign('valorC', 'innerHTML', $r);
    return $respuesta;
}
 
function calcularR($datos) {
    $respuesta = new xajaxResponse();
    $num=$datos['raizServidor'];
    $rtdo = sqrt($num);
    $respuesta->alert("Calculando Raiz .....");
    $respuesta->assign('valorR', 'innerHTML', $rtdo);
    return $respuesta;
}
?>
 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Probando xajax</title>
        <script type="text/javascript" src="valida.js"></script>
 
 
    </head>
    <body>
        <form id='datosC' action="javascript:void(null);" onsubmit="calcularCuadrado();">
            Calcula Cuadrado:
            <input type="text" name="cuadradoServidor" id="cuadradoCliente">
            <input type="submit" value="calcular Cuadrado" name="calcularC">
            <div id="valorC" ></div>
        </form>
        <hr/>
 
        <form id='datosR' action="javascript:void(null);" onsubmit="calcularRaiz();">
            Calcula Raiz:
            <input type="text" name="raizServidor" id="raizCliente">
            <input type="submit" value="calcular Raiz" name="calcularR">
            <div id="valorR" ></div>
        </form>
        <hr />
 
 
    </body>
</html>

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
 
 
 
function calcularCuadrado() {
    // Se cambia el botón de Enviar y se deshabilita
    //  hasta que llegue la respuesta
   // xajax.$('enviar').disabled = true;
   // xajax.$('enviar').value = "Procesando.....";
 
    // Aquí se hace la llamada a la función registrada de PHP
    xajax_calcularC(xajax.getFormValues("datosC"));
 
    return false;
}
 
function calcularRaiz() {
    // Se cambia el botón de Enviar y se deshabilita
    //  hasta que llegue la respuesta
   // xajax.$('enviar').disabled = true;
   // xajax.$('enviar').value = "Procesando.....";
 
    // Aquí se hace la llamada a la función registrada de PHP
    xajax_calcularR(xajax.getFormValues("datosR"));
 
    return false;
}

Actividad

Vamos a hacer una validación de un formulario en el servidor usando ajax <span class='error'>Debe tener más de 3 caracteres.</span> <span class='error'>Debe ser mayor de 5 caracteres o no coinciden.</span> <span class='error'>La dirección de email no es válida.</span> Para ello vamos a tener las siguientes funciones en php

• Descargamos los ficheros de github git clone git:/githib.com/MAlejandroR/xajax