Receptes de cuina en repositori remot. JSONP i CORS

De Wikijoan
Dreceres ràpides: navegació, cerca

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:

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:

Desenvolupament

Recpetes.png

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:

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

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines