Mostra la font per a Artròpodes: classes, ordres, famílies. Pràctica AJAX

=Introducció: els artròpodes=
[[Fitxer:483324871 17ce215005 o.250a.jpg | right]]

De la mateixa manera que comunitats autònomes, províncies i municipis tenen una estructura jeràrquica amb relacions 1:M, el mateix podem fer per al regne animal i vegetal, on la classificació de les espècies segueix un ordre jeràrquic. De la ciència que estudia la classificació de les espècies se'n diu '''taxonomia''':
*http://ca.wikipedia.org/wiki/Taxonomia
Concretament nosaltres ens centrarem en una base de dades sobre artròpodes (que incou bàsicament els insectes, aranyes i miràpodes (centpeus, milpeus)). Per situar-nos direm que els artròpodes són '''invertebrats''' (no posseeixen una estructura òssia com ara mamífers, peixos,...), són animals (no són ni plantes ni fongs), i posseeixen cèl.lules amb nucli (a diferència d'altres éssers vius com les bactèries que tenen cèl.lules sense nucli).

La taxonomia és una ciència difícil, amb evolució constant i discussió viva entre científics, i que gràcies a nous mètodes com la genòmica evoluciona i evolucionarà molt. De forma simplificada podem dir que una espècie animal o vegetal pertany a un gènere, que alhora pertany a una família, que alhora pertany a un ordre, i que alhora pertany a un philum. 

Per exemple, la papallona [http://ca.wikipedia.org/wiki/Apol%C2%B7lo_%28lepid%C3%B2pter%29 Apollo] (Parnassius apollo), que viu al Pirineu, pertany al gènere ''Parnassius'', a la família dels ''papiliònids'' (''Papilionidae'' en llatí), ordre dels ''lepidòpters'' (''Lepidoptera''), classe ''insectes'' (''Insecta'') i filum ''artròpodes'' (''Arthropoda'').

=Base de dades arthropoda=
Pots descarregar-te la base de dades (mysql) dels artròpodes en aquest enllaç:
*[[Fitxer:Arthropoda 170213.dmp.zip]] (data 13/02/2017)

Crea una base de dades en el mysql que es digui ''arthropoda'', i importa l'anterior base de dades.

Si vols familiaritzar-te amb la base de dades pots executar les següents sentències SQL:

*Classes, ordres i famílies
<pre>
select id_class, class, id_order, ordre, id_family, family from VTAXO;
</pre>
*Classes, ordres i famílies dels quals es disposa un representant amb família identificada:
<pre>
select id_class, class, id_order, ordre, id_family, family from VTAXO V, BUG B where V.id_family=B.id_taxo;
</pre>
*Classes amb bitxos identificats fins a família:
<pre>
select distinct id_class, class from VTAXO V, BUG B where V.id_family=B.id_taxo;
</pre>
*Ordres amb bitxos identificats fins a família, per a una classe determinada (insectes, id_class=12):
<pre>
select distinct id_order, ordre from VTAXO V, BUG B where V.id_family=B.id_taxo and id_class=12;
</pre>
*Famílies amb bitxos identificats fins a família, per a un ordre determinat (Lepidoptera, id_order = 258):
<pre>
select distinct id_family, family from VTAXO V, BUG B where V.id_family=B.id_taxo and id_order=258;
</pre>
*Bitxos per a la família indicada (Nymphalidae, id_family=1487):
<pre>
select id_bug, genere, especie from BUG where id_taxo=1487;
</pre>
*Bitxos per a la família indicada (Nymphalidae, id_family=1487), i la primera foto del bitxo:
<pre>
select B.id_bug, genere, especie, titol, nom_fitxer from BUG B, FOTO F where id_taxo=1487 and B.id_bug=F.id_bug and ordre=1;
</pre>
*Bitxos per a la família indicada (Nymphalidae, id_family=1487), i la primera foto del bitxo amb la seva ruta (versió thumbnail i versió 400px):
<pre>
select B.id_bug, genere, especie, titol, concat('http://joanqc.no-ip.biz/fotosarthropoda/pics400/',substr(nom_fitxer,1,2),'/',substr(nom_fitxer,3,2),'/',replace(nom_fitxer,'.JPG','_pic.JPG')) pic, concat('http://joanqc.no-ip.biz/fotosarthropoda/thumbnails/',substr(nom_fitxer,1,2),'/',substr(nom_fitxer,3,2),'/',replace(nom_fitxer,'.JPG','_th.JPG')) thumb from BUG B, FOTO F where id_taxo=1487 and B.id_bug=F.id_bug and ordre=1;
</pre>
==Resum de les consultes que necessitaràs==
Llistar totes les classes d'artròpodes dels quals es disposa almenys un bitxo en la col.lecció:
<pre>
select distinct id_class, class from VTAXO V, BUG B where V.id_family=B.id_taxo;
</pre>
Donada una classe, llista tots els ordres dels quals es disposa un bitxo en la col.lecció:
<pre>
select distinct id_order, ordre from VTAXO V, BUG B where V.id_family=B.id_taxo and id_class=12;
</pre>
Donat un ordre, llista totes les famílies de les quals es disposa un bitxo en la col.lecció:
<pre>
select distinct id_family, family from VTAXO V, BUG B where V.id_family=B.id_taxo and id_order=258;
</pre>
Donada una família, llista de tots els bitxos de la col.lecció amb la primera foto (versió thumbnail i 400 px):
<pre>
select B.id_bug, genere, especie, titol, concat('http://joanqc.no-ip.biz/fotosarthropoda/pics400/',substr(nom_fitxer,1,2),'/',substr(nom_fitxer,3,2),'/',replace(nom_fitxer,'.JPG','_pic.JPG')) pic, concat('http://joanqc.no-ip.biz/fotosarthropoda/thumbnails/',substr(nom_fitxer,1,2),'/',substr(nom_fitxer,3,2),'/',replace(nom_fitxer,'.JPG','_th.JPG')) thumb from BUG B, FOTO F where id_taxo=1487 and B.id_bug=F.id_bug and ordre=1;
</pre>
'''NOTA''': la base de dades que aquí es mostra és un exemple de base de dades jeràrquica. Pots veure'n un altre exemple aclaridor en el següent enllaç:
*http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/

=Desenvolupament=
La pràctica consisteix en fer una navegació AJAX de les '''classes''', '''ordres''' i '''famílies''' dels insectes, tal com preveu les consultes SQL que se't proporcionen. A classe s'ha comentat tres versions d'aquest problema, i que tots ells tenen pros i contres quant als aspectes de usabilitat. Se't proporciona el codi de les tres versions per tal de què el puguis estudiar (veure solució), però s'espera de què l'alumne faci la seva pròpia solució particular.

La relació entre '''classes''', '''ordres''' i '''famílies''' és similar a la que teníem entre '''comunitats''', '''provincies''' i '''municipis''', malgrat que la base de dades que hi ha al darrera és més complexa. Tot i així, aquesta complexitat queda amagada a l'alumne, doncs se't proporcionen les sentències SQL que necessites, i no cal un coneixement total de les relaciones que hi ha entre les taules.

==Feina per l'alumne==
1. Fes la teva solució pròpia (tot i que pots consultar el codi que se't proporciona). En la part de servidor pots utilitzar tant PHP com NodeJS (es recomana fer-ho de les dues maneres). En el proper examen que farem tant sortirà una part de PHP com de NodeJS.

2. Utilitza la '''Fetch API''' per fer les crides asíncrones amb el servidor.

3. Recorda dissenyar aquesta mini-aplicació amb uns estàndards correctes i moderns, incorporant un fitxer CSS.

4. Quan cliquis sobre la miniatura, per defecte enllaça amb la foto de 400px. Pots enllaçar a una pàgina ben formatada on incloguis la foto grossa i altra informació d'interès que es troba a la base de dades (BUG.notes, FOTO.notes).

5. En el cas d'utilitzar PHP, utilitzar crides ''POST'' en comptes de crides ''GET'':
<pre>
	xmlhttp.open("POST","cercar_bitxos.php",true);
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.send("id_familia="+id_familia);
</pre>
i en el fitxer ''cercar_bitxos.php'', recordar ficar:
<pre>
$id_familia = $_POST["id_familia"];
</pre>
Si utilitzes POST, ara ja no funcionarà la url:
*http://localhost/artropodes/ajax_nadiu/v1/cercar_bitxos.php?id_familia=1487

6. Codi orientat a JSON. Tant en la part PHP com NodeJS has de construir els objectes JSON de forma elegant (POO).

Codi d'exemple PHP:
<pre>
<?php
/*
{
"insectes": [
{ "genere":"Acherontia" , "especie":"atropos" },
{ "genere":"Adela" , "especie":"australis" },
{ "genere":"Adelphocoris" , "especie":"vandalicus" },
{ "genere":"Adonia" , "especie":"variegata" }
]
}
*/

$array[] = new stdClass;
$array[0]->genere = "Acherontia";
$array[0]->especie = "atropos";
$array[] = new stdClass;
$array[1]->genere = "Adela";
$array[1]->especie = "australis";
$array[] = new stdClass;
$array[2]->genere = "Adelphocoris";
$array[2]->especie = "vandalicus";
$array[] = new stdClass;
$array[3]->genere = "Adonia";
$array[3]->especie = "variegata";

$myObj = new \stdClass();
$myObj->insectes = $array;
$myJSON = json_encode($myObj);
echo $myJSON;

?>
</pre>
Codi d'exemple NodeJS:
<pre>
        for (var i = 0; i < rows.length; i++) {
          console.log(rows[i].comunitat);
          var vcomunitat = {
            id_com: rows[i].id_com,
            comunitat: rows[i].comunitat
          };
          o[key].push(vcomunitat);         
        };
        res.write(JSON.stringify(o));
</pre>

=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]]

=Solució=
[[Fitxer:Artropodes.zip]] (8 de març 2019)
Per tal de què funcioni el codi la única cosa que hauràs de fer és canviar la connexió a la base de dades.
==Versions de la solució==
Les versions v1, v2 i v3 funcionen però hi ha codi que no és molt exemplar (ho comentem a classe). Les versions que són correctes són la v4 i la v5. En la v4 tenim una foto per cada bitxo.

En la versió v5, per cada bitxo recuperem totes les fotos de què disposem de cada bitxo, i això fa que el script ''v5/cercar_bitxos.php'' sigui més complex (dos sentències SQL, doble bucle); i quan recuperem aquesta informació en la funció ''function canvi_familia(id_familia)'' també ens trobem aquest doble bucle.

Tot aquest codi es comenta a classe.

{{Autor}}, febrer 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]