Joan: /* Entrega */

2018-09-20T15:22:40Z

Entrega

Pàgina nova

=Introducció=
Les llistes/arbres col.lapsables/desplegables estan disponibles a la web des de fa anys, gràcies a Javascript i CSS. Amb jQuery es poden implementar fàcilment d'altres efectes com ara una certa amortiguació a l'hora de desplegar/col.lapsar la llista.

=Referències=
sense jquery:
*http://code.stephenmorley.org/javascript/collapsible-lists/
amb jquery:
*http://www.jstree.com/

=Desenvolupament=
==Feina per l'alumne==
El professor ha explicat a classe la manera de procedir i ha ensenyat el resultat a aconseguir. Es tracta, a partir dels enllaços, de fer dues llistes desplegables (sense i amb jQuery) que carreguin les comunitats autònomes (en el primer nivell de la llista), i les províncies (en el segon nivell de la llista), a partir de la base de dades que ja hem treballat en altres pràctiques. Per aconseguir-ho no cal adaptar el codi font, però sí que t'hauràs de descarregar tots els recursos necessaris (fitxers .js, .css i imatges). A més, se't demana que aquests recursos tinguin una estructura de directoris fixa:
<pre>
index.htm
css/
css/imatges/
lib/
</pre>
Hauràs de vigilar amb les imatges que estan referenciades des dels fitxers d'estil css. La referència és relativa al fitxer CSS, no relativa al projecte.
===Solució parcial===
'''index.php''':
<pre>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>
<meta charset="utf-8" />
<title>Províncies</title>

<style>
.collapsibleList li{
list-style-image : url('img/button.png');
cursor : auto;
}

li.collapsibleListOpen{
list-style-image : url('img/button-open.png');
cursor : pointer;
}

li.collapsibleListClosed{
list-style-image : url('img/button-closed.png');
cursor : pointer;
}
</style>

</head>

<body onload="CollapsibleLists.apply();">

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

</script>

<ul class="collapsibleList">
<?php
include("open_db.php");
//$sql = "select comunitat from comunitats";
$sql = "select comunitat, provincia from comunitats c, provincies p where c.id_com=p.id_com order by comunitat, provincia";

$result=mysqli_query($conn,$sql);

if (!$result) {
$message = 'Invalid query: ' . mysqli_error() . "\n";
die($message);
}
if (mysqli_num_rows($result) > 0) {
// output data of each row
$comunitat = "";
$count = 0;
$te_provincies = 0;

while($row = mysqli_fetch_assoc($result)) {
if ($comunitat != $row["comunitat"]) {
if ($te_provincies == 1) echo "</ul>";
$te_provincies = 0;
if ($count==0) echo "</li>";
echo "<li>" . $row["comunitat"];
if ($row["comunitat"] != $row["provincia"]) $te_provincies = 1;
if ($te_provincies == 1) echo "<ul>";
$comunitat = $row["comunitat"];
if ($te_provincies == 1) echo "<li>".$row["provincia"]."</li>";
$count++;
} else {
if ($te_provincies == 1) echo "<li>".$row["provincia"]."</li>";
}
}

}

?>
<?php
include("close_db.php");
?>
</body>

</html>
</pre>

=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 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Collapsable list/tree: sense i amb jQuery - Historial de revisió

Joan: /* Entrega */