Receptes de cuina en repositori remot. JSONP i CORS

Introducció

En la primera pràctica d'aquesta UF4 vas fer dues receptes XML, i vas fer l'aplicatiu web per visualitzar les receptes amb una maquetació adequada.

Ara és el moment de posar en comú totes les receptes (i les respectives imatges) que s'han generat, i penjar-les en un repositori remot. Aquesta és la url:

• http://joanqc.no-ip.biz/iesbalmes/wec/receptes/recipes/

Accediràs a aquesta informació de dues maneres:

1. JSONP (JSON with padding)
2. directament a la url, si és que en el servidor Apache remot s'ha habilitat la directiva Access-Control-Allow-Origin.

La segona forma és més directa que la primera, però no sempre aquesta directiva està habilitada.

Hem vist la teoria de JSONP a:

• http://wiki.joanillo.org/index.php/JSONP:_JSON_with_Padding
• https://www.w3schools.com/js/js_json_jsonp.asp

Desenvolupament

En la teva aplicació web hi haurà una llista desplegable amb totes les receptes dels teus companys. La generació d'aquesta llista desplegable la faràs automàticament, sabent que el servidor et pot donar tota la llista de les receptes en aquesta url:

• http://joanqc.no-ip.biz/iesbalmes/wec/receptes/list_recipes_callback.php?callback=JSONPHandlerList

Fixa't bé com utilitzem la funció de callback per tal de poder recuperar la llista d'opcions en el cantó del client.

Se't proporciona el codi del script list_recipes_callback.php (encara que no el necessites), per veure com des de PHP podem explorar tota la llista de fitxers XML de què disposem, i entrem en cadascun dels fitxers XML per trobar el títol de la recepta. script list_recipes_callback.php:

<?php
header('content-type: text/plain; charset=utf-8');
header("access-control-allow-origin: *");

if ($handle = opendir('recipes/')) {

    /* This is the correct way to loop over the directory. */
    while (false !== ($entry = readdir($handle))) {
        if (strstr($entry, '.xml')) {
            //SimpleXML functions are part of the PHP core
            $xml = simplexml_load_file('recipes/'.$entry)
                or die("Error: Cannot create object");
            
            foreach($xml->children() as $child)
            {
                if (!strstr($child->getName(),'recipe')) {
                //echo $child->getName() . ": " . $child . "<br />";
                if ($child->getName() == "title") {
                    $title = $child;
                    break;
                }
                }
            }
            $data .= "<option value=\"".$entry."\">".$title."</option>";


        }
    }

    closedir($handle);
}

echo $_GET['callback'] . '('.json_encode($data).')';
?>

Entrega

Els alumnes entregaran al Classroom tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Classroom dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Classroom: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology

---

creat per Joan Quintana Compte, febrer 2019