Joan: /* Llista de municipis, curs 19-20 */

2020-04-06T16:46:22Z

Llista de municipis, curs 19-20

Pàgina nova

=Introducció=
Requeriments: Veure la teoria de JQuery: a la wiki i en un tutorial com ara w3schools:
*http://wiki.joanillo.org/index.php/JQuery_Framework._Teoria
*https://www.w3schools.com/jquery/

'''NOTA''': per al curs 18-19 és possible fer aquesta mateixa pràctica amb la llibreria datatables (que no és JQuery):
*https://www.datatables.net/

'''Tablesorter''' és un plugin de '''jQuery''' que converteix una taula HTML estàndard amb tags ''THEAD'' i ''TBODY'' en una taula que es pot ordenar per columnes, sense haver de refrescar la pàgina. '''tablesorter''' pot parsejar i ordenar de manera satisfactòria molts tipus de dades contingudes en les cel.les. Té moltes característiques com per exemple:

*ordenació multi-columna
*parsers per ordenar text, URIs, enterns, monedes, floats, direccions IP, dates (ISO, long and short formats), time
*Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
*Extensibility via widget system
*Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
*Small code size

=Referències=
Curs 19-20:
*https://mottie.github.io/tablesorter/docs/index.html
En aquesta pàgina de documentació veiem que la versió actual és la 2.31.3. Allà on indica la versió tenim l'enllaç per tal de descarregar la llibreria.

Un cop descarregat, pots provar tots els exemples que estan dins de ''docs/'', doncs aquests exercicis ja tenen les rutes correctes a la llibreria ''tablesorter'' i ''jquery''. (La llibreria jquery no cal descarregar-la, doncs inclou el fitxer ''docs/js/jquery-latest.min'').

El primer que has de fer és provar algun dels exemples dins de ''docs/'', i veure quina és l'estructura de directoris on es va a buscar les llibreries i els CSS. Quan hagis de fer el teu exercici pots programar-lo dins de docs/. Però si vols utilitzar un altre directori, hauràs d'accedir correctament a les llibreries.

===NOTA: No funciona? (17-18)===
El més pràctic
Alguns dels exemples de la carpeta ''tests/'' no funcionen. Per fer-los funcionar, recordar que s'ha de posar:
<pre>
class="tablesorter"
</pre>
dins de la taula, i que la manera de referenciar el full d'estils és (en comptes de posar @import):
<pre>
<link rel="stylesheet" href="../themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
</pre>
Sembla ser que hi ha una incoherència entre els exemples dins la carpeta ''tests/'' i la versió que has descarregat del '''tablesorter'''. Però al final, ha d'acabar funcionant.

=Desenvolupament=
==Feina per l'alumne==
A classe s'ha vist algun exemple extret de la web de tablesorter.com, s'ha mirat la documentació, i s'ha justificat la necessitat de tenir taules ordenables, i com gràcies a jQuery aquesta tasca pot esdevenir molt fàcil i amb poques línies de codi.

L'alumne ha d'implementar una taula HTML a partir de dades reals (per exemple pots extreure dades del Institut Nacional d'Estadística, http://www.ine.es/ o de l'Institut Català d'Estadística, http://www.idescat.cat), i fer que les columnes siguin ordenables. Quan diem dades reals el professor vol dir taules que continguin centenars o milers de dades.

Exemple: noms dels nadons de Catalunya:
*http://www.idescat.cat/nadons/

També pots utiltizar el servei:
*https://jsonplaceholder.typicode.com/
que ens proporciona dades aleatòries en format JSON.

==Servei Web del IDESCAT==
El IDESCAT ens permet accedir a les dades mitjançant una API. Anem a: ''http://www.idescat.cat/ > Serveis > API'':
*http://www.idescat.cat/dev/api/

Disposem d'una documentació abundant, clara i precisa.

Resum:
*URI base: http://api.idescat.cat/{servei}/v{versió principal}/{operació}.{format}[?paràmetres]
*Mètode: HTTP GET
*Formats de la resposta: xml, json, php
*Versió: 1.00 (14.12.2009)
*Dreceres: Petició, Resposta

Tenim diferents APIs disponibles, per ex, ''cerca de població'': ''pob''
*http://www.idescat.cat/dev/api/pob/

Diversos exemples:

Ex. 1: Llista d'entitats territorials que comencen amb "ab", separades per salts de línia
*http://api.idescat.cat/pob/v1/sug.txt?p=q/ab

Ex. 2: Llista de municipis i nuclis de població que comencen amb "ca", en format json
*http://api.idescat.cat/pob/v1/sug.json?p=q/ca;tipus/mun,npbp

Ex. 3: Població de totes les comarques de Catalunya, en format XML
*http://api.idescat.cat/pob/v1/cerca.xml?p=tipus/com
i en format JSON:
*http://api.idescat.cat/pob/v1/cerca.json?p=tipus/com

Ex4: noms de persones que comencen per 'a':
*http://api.idescat.cat/onomastica/v1/noms/sug.txt?q=a
*http://api.idescat.cat/onomastica/v1/noms/sug.json?q=a

Ex5: llista de tots els municipis de Catalunya, en format JSON:
*http://api.idescat.cat/emex/v1/dades.json?tipus=mun
==Llista de municipis, curs 19-20==
Respecte del curs anterior, a l'hora d'accedir a l'API de IDESCAT hem tingut problemes amb el CORS. Per resoldre-ho, hem mirat a:
*https://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working
I la solució més senzilla que funciona és (està cap al final del post):

script '''llista_municipis_v0.html''':
<pre>
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript Test</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
xhrFields: {cors: false},
type: "GET",
url: "http://api.idescat.cat/emex/v1/dades.json?tipus=mun",
success: function (data) {
alert("Núm municipis: " + data.fitxes.cols.col.length);
},
error: function (x, y, z) {
alert(x.responseText + " :EEE: " + x.status);
}
});
});
</script>
</head>
<body>
</body>
</html>
</pre>

Abans de fer el '''tablesorter''', podem mostrar els municipis en una llista html, omplint una llista amb JQuery:

script '''llista_municipis_v1.html''':
<pre>
<!DOCTYPE HTML>
<html>
<head>
<title>Llista municipis</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
xhrFields: {cors: false},
type: "GET",
url: "http://api.idescat.cat/emex/v1/dades.json?tipus=mun",
success: function (data) {
//alert("Núm municipis: " + data.fitxes.cols.col.length);
var info = data.fitxes.cols.col;
$.each(info, function(i,field) {
$("#municipis").append("<li>" + field.id+" - " + field.content + "</li>");
});
},
error: function (x, y, z) {
alert(x.responseText + " :EEE: " + x.status);
}
});
});
</script>
</head>
<body>
<h1>Llista de municipis, v1</h1>
<p>
<ul id="municipis"></ul>
</p>
</body>
</html>
</pre>

I finalment, ara ja podeu integrar un dels codis tablesorter que us han funcionat amb les vostres dades dels municipis. Per exemple, el professor ha fet servir el codi de ''docs/index.html'' (però he tingut un problema: cursiosament la referència ''docs/js/jquery-1.2.6.min.js'' no funciona; i en canvi ''docs/js/jquery-latest.min.js'' sí que m'ha funcionat).

script '''llista_municipis_v2.html''':
<pre>
<!DOCTYPE HTML>
<html>
<head>
<title>Llista municipis</title>
<meta charset="UTF-8">

<link href="./docs/css/jq.css" rel="stylesheet">



<script src="./docs/js/jquery-latest.min.js"></script>

<link href="./dist/css/theme.default.min.css" rel="stylesheet">
<script src="./dist/js/jquery.tablesorter.min.js"></script>
<script src="./dist/js/jquery.tablesorter.widgets.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$.ajax({
xhrFields: {cors: false},
type: "GET",
url: "http://api.idescat.cat/emex/v1/dades.json?tipus=mun",
success: function (data) {
//alert("Núm municipis: " + data.fitxes.cols.col.length);
var info = data.fitxes.cols.col;
//$.each(info, function(i,field) {
// $("#municipis").append("<li>" + field.id+" - " + field.content + "</li>");
//});
$.each(info, function(i,field) {
$('table').tablesorter({
widgets : ['zebra', 'columns'],
usNumberFormat : false,
sortReset : true,
sortRestart : true
});
$("tbody").append("<tr><td>"+field.id+"</td><td>"+field.content+"</td></tr>");
//o bé:
//row = '<tr><td>' + field.id + '</td><td>' + field.content + '</td></tr>';
//$("table/tbody:first").append(row);
});
//important!:
$("table").trigger('update');
},
error: function (x, y, z) {
alert(x.responseText + " :EEE: " + x.status);
}
});
});
</script>
</head>
<body>
<h1>Llista de municipis, v2</h1>
<p>
<ul id="municipis"></ul>
</p>
<table cellspacing="0" class="tablesorter">
<thead>
<tr>
<th>ID</th>
<th>Municipi</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
</pre>
L'alumne, a part de l'exercici dels municipis, hauríeu de cercar alguna altra font de dades del IDESCAT.

=Entrega=
Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). Entrega també una captura de la pantalla on es pugui veure el funcionament correcte de l'exercici. S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

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

{{Autor}}, abril 2018
[[Categoria: INS Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

JQuery: Tablesorter - Historial de revisió

Joan: /* Llista de municipis, curs 19-20 */