wikiserver - Contribucions de l’usuari [ca]

NF1 - WEBSOCKETS

2024-04-26T17:04:49Z

Amoncusi2: /* ENVIAR MENSAJE AL CLIENTE */

==WEBSOCKETS==

'''VIDEOTUTORIAL:''' https://youtu.be/B1C_xNehrk8

'''Introducción'''

Los websockets son una tecnología que permite una comunicación bidireccional entre cliente y servidor sobre un ''único socket TCP''. En cierta manera es un buen sustituto de AJAX como tecnología para obtener datos del servidor, ya que no tenemos que pedirlos, ''el servidor nos los enviará cuando haya nuevos''.
Podemos utilizar diferentes bibliotecas para utilizar esta tecnología con [https://developer.mozilla.org/es/docs/WebSockets-840092-dup/Writing_WebSocket_client_applications#Disponibilidad_de_WebSockets websocket] (ws) más básica y la que vamos a trabajar que es algo más completa [https://socket.io sockets.io].

[[Fitxer:websockets.png|600px]]
-------------------
-------------------
[[Fitxer:ajaxvswebsocket.png|600px]]
-------------------
-------------------

[[Fitxer:ajaxvswebsocket1.png|600px]]

https://stackoverflow.com/questions/10112178/differences-between-socket-io-and-websockets/38558531#38558531

https://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet

Si queremos montar nuestro servidor en windows primero debemos instalar Nodejs que es el servidor que vamos a instalar, nos creamos una carpeta y hacemos la instalación del framework Express y nuestra biblioteca socket.io dentro de esa ruta, por ejemplo, C:\Users\pc\websocket2.

Empezamos creando un paquete de Node con "npm init -y" para generar un package.json con las opciones por defecto ( luego instalamos express y socket.io)

<source lang="bash">
$ npm init -y
$ npm install --save express
$ npm install --save socket.io
</source>

después abrimos consola de windows, accedemos a la carpeta y añadimos el server.js y index.html

==RECIBIR MENSAJE EL CLIENTE==

nos creamos un archivo dentro de la carpeta websocket llamado 'server.js' que será nuestro código en el servidor e introducimos:

'''CLIENTE'''

por parte del cliente tendremos que introducir el siguiente código
<source lang="html">
<!DOCTYPE html>
<html>
<head>
<script src="./node_modules/socket.io/client-dist/socket.io.js"></script>


<script>
//conectamos el cliente con el servidor de websockets que tenemos en http://localhost:8080
// y escuchamos el evento mensajes y obteniendo el array en data.
var socket = io.connect('http://localhost:8080', { 'forceNew': true });
// var socket = io.connect('http://localhost');

socket.on('mensajes', function(data) {
document.write("Bienvenidos.digo");
console.log(data);
});
</script>

<body>Hello world</body>
</html>
</source>

'''SERVIDOR'''

<source lang="nodejs">
var express = require('express');
var app = express();
var path = require('path');
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.use(express.static(path.join(__dirname, '/'))); //Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript,

server.listen(8080, function() { ////Pondremos el servidor a escuchar en localhost con el puerto 8080
console.log('Servidor corriendo en http://localhost:8080');
});

// array de mensajes
var mensajes= [{
profesor: "Julio",
texto: "Hola! ¿Cómo estáis?"
},{
profesor: "Alumno1",
texto: "Muy bien! ¿y tú?"
},{
profesor: "Alumno1",
texto: "Perfecto!"
}];

//servidor de websockets, que lo tenemos en la variable io, esté atento a que se realice una conexión. Eso lo logramos con io.on() y pasándole el mensaje connection, también tenemos el método en el cual enviaremos el array de objetos mensaje con el evento 'mensajes'

io.on('connection', function(socket) {
console.log('Un cliente se ha conectado');
socket.emit('mensajes', mensajes);
});
</source>

cuando ya tengamos nuestro fichero 'server.js' en terminal escribimos 'node server.js'

==ENVIAR MENSAJE AL CLIENTE==

<source lang="html">
<!DOCTYPE html>
<html>
<head>
<script src="./node_modules/socket.io/client-dist/socket.io.js"></script>


<script>
//conectamos el cliente con el servidor de websockets que tenemos en http://localhost:8080
// y escuchamos el evento mensajes y obteniendo el array en data.
var socket = io.connect('http://localhost:8080', { 'forceNew': true });
// var socket = io.connect('http://localhost');

socket.on('mensa', function(data) {
document.write("Bienvenidos.digo");
console.log(data);
});

var MensajeCliente= [{
alumno: "alumno1",
texto: "Estoy en el cliente"
},{
alumno: "alumno1",
texto: "yo también lo estoy"
},{
alumno: "alumno1",
texto: "Perfecto!"
}];

socket.emit('mensajes', MensajeCliente); //envía al servidor el JSON 'MensajeCliente' y escuchará en el evento 'mensajes'
</script>

<body>Hello world</body>
</html>

</source>

'''server.js'''

<source lang="javascript">
var express = require('express');
var app = express();
var path = require('path');
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.use(express.static(path.join(__dirname, '/'))); //Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript,

server.listen(8080, function() { ////Pondremos el servidor a escuchar en localhost con el puerto 8080
console.log('Servidor corriendo en http://localhost:8080');
});

// array de mensajes
var MensajeServidor= [{
profesor: "Julio",
texto: "Hola! estoy en el servidor"
},{
profesor: "Albert",
texto: "¿Qué haces por ahí?"
},{
profesor: "Alex",
texto: "Dando una vuelta me imagino!"
}];

//servidor de websockets, que lo tenemos en la variable io, esté atento a que se realice una conexión.
//Eso lo logramos con io.on() y pasándole el mensaje connection, también tenemos el método en el cual enviaremos el array de objetos mensaje con el evento 'mensajes'

io.on('connection', function(socket) {
console.log('Un cliente se ha conectado');
socket.emit('mensa', MensajeServidor); //envia al cliente el array Mensajeservidor al cliente que escuchará con el evento 'mensa'
socket.on('mensajes', function(data) { //está escuchando del cliente si le ha enviado algo mediante el evento 'mensajes'
console.log(data);
});

});

</source>

https://manuais.iessanclemente.net/index.php/Node.js_y_Websockets#Servidor_web_b.C3.A1sico_con_node.js_y_express

http://micaminomaster.com.co/herramientas-desarrollo/nodejs-projecto-esqueleto-mvc-crud/

https://carlosazaustre.es/websockets-como-utilizar-socket-io-en-tu-aplicacion-web

==EJERCICIOS==

*Se desea enviar desde el servidor un JSON con la fecha actual cada segundo al cliente "new Date().toJSON()".

:[[sol_websockets_reloj]]

*Se desea enviar desde el cliente un número al servidor que será el tiempo X que hará ejecutar un función mediante setInterval que genera números aleatorios, deberá mostrarlo por consola en el servidor y mostrarlo al cliente.

:[[sol_websockets_random]]

*Mostrará por pantalla el número de personas que están conectadas en ese momento y en caso de desconectarse deberá actualizarse la información.

:[[sol_websockets_clientes]]

*Se desea realizar un chat en el cual diferentes clientes se conectan al servidor y van viendo el historial de mensajes en pantalla.El cliente deberá tener dos inputs para introducir información, uno para el nombre y otro para el texto.

:[[sol_websockets_chat]]

NF3 - XML i JSON

2024-04-12T17:27:18Z

Amoncusi2: /* Traduïr un XML a JSON */

= JSON =
JSON (JavaScript Object Notation) és un format d'intercanvi de dades lleuger. És fàcil per als éssers humans a llegir i escriure. És fàcil per a les màquines per analitzar i generar. Es basa en un subconjunt del llenguatge de programació JavaScript, estàndard ECMA-262 3rd Edition -. Desembre 1999 JSON és un format de text que és completament independent del llenguatge però utilitza convencions que són familiars per als programadors de la C-família de llenguatges, incloent C , C + +, C #, Java, JavaScript, Perl, Python, i molts altres. Aquestes propietats fan de JSON un llenguatge ideal-l'intercanvi de dades.
JSON es basa en dues estructures:

*Una col·lecció de parells nom / valor. En diversos idiomes, això es realitza com un objecte, fitxa, estructura, diccionari, taula hash, llista amb clau, o una matriu associativa.
*Una llista ordenada de valors. En la majoria dels idiomes, això es realitza en forma de matriu, vector, llista o seqüència.
Es tracta d'estructures de dades universals. Pràcticament tots els llenguatges de programació moderns els donen suport d'una manera o altra. Té sentit que un format de dades que és intercanviable amb els llenguatges de programació també es basarà en aquestes estructures.

Com que utilitza la sintaxi de JSON amb JavaScript sense necessitat de programari addicional que es necessita per treballar amb JSON en JavaScript.

Exemples de Json

El principi bàsic és amb parells atribut-valor, aquests han d'estar tancats entre claus {,} que és el que defineixen l'inici i la fi de l'objecte.

== Parell Nom/Valor ==
Generador JSON https://www.json-generator.com/

Les dades en format JSON està escrit en forma de parells nom / valor.

Un parell de nom / valor consisteix en un nom de camp (entre cometes), seguit de dos punts, seguit d'un valor:

<pre>
"firstName" : "John"
</pre>

Això és fàcil d'entendre, i és igual a la instrucció de JavaScript:

<pre>
firstName = "John"
</pre>

Valors Json:

*Un nombre (sencer o punt flotant)
*Una cadena (entre cometes)
*Booleà (cert o fals)
*Un conjunt (entre claudàtors)
*Un objecte (entre claus)
*nul

==JSON Objects==
Objectes JSON s'escriuen entre claus,

Els objectes poden contenir diversos parells de noms / valors:

<source lang="json">
{
"firstName": "John",
"lastName": "Doe"
}
</source>

Això també és fàcil d'entendre, i és igual a les sentències de JavaScript:

<source lang="json">
firstName = "John";
lastName = "Doe";
</source>

==JSON Array==
Arrays JSON s'escriuen entre claudàtors.

Una matriu pot contenir diversos objectes:

<source lang="json">
{
"profes": [
{
"firstName": "Julio",
"lastName": "Noguera"
},
{
"firstName": "Albert",
"lastName": "Canela"
},
{
"firstName": "Alex",
"lastName": "Salinas"
}
]
};
</source>

En l'exemple anterior, l'objecte "empleats" és una matriu que conté tres objectes. Cada objecte és un registre d'una persona (amb un nom i un cognom).

<source lang="json">
var profes=[
{
"firstName": "Julio",
"lastName": "Noguera"
},
{
"firstName": "Albert",
"lastName": "Canela"
},
{
"firstName": "Alex",
"lastName": "Salinas"
}
]

profes[0].firstName + " " + profes[0].lastName;
</source>
-------------------
'''EXEMPLES'''

<source lang="json">
//Ejemplo de JSON para un objeto tipo Persona
{
"nombre":"Julio Noguera",
"edad":30,
"nacionalidad":"Española",
"altura":"182 cm",
"peso":75
}
</source>

Json amb booleans, nombre, cadenes i un objecte direcció
<source lang="json">
{
"nombre":"Fulano Probencio",
"edad":27,
"nacionalidad":"Chileno",
"altura":"172 cm",
"peso":75,
"pasatiempos":["Polo","Cricket","Ski","Drafting","Gaming"],
"soltero":true,
"direccion":{
"calle":"Ave. Siempre Viva",
"numero":"123",
"pais":"México"
}
}
</source>

Un array de objectes persona.
<source lang="json">
{
"personas": [
{
"nombre": "Julio Noguera",
"edad": 30,
"nacionalidad": "Española",
"altura": "182 cm",
"peso": 75,
"pasatiempos": [
"Polo",
"Cricket",
"Ski",
"Drafting",
"Gaming"
],
"soltero": true,
"direccion": {
"calle": "Ave. Siempre Viva",
"numero": "123",
"pais": "España"
}
},
{
"nombre": "Ramón",
"edad": 22,
"nacionalidad": "Catalana",
"altura": "178 cm",
"peso": 72,
"pasatiempos": [
"Pintar",
"Programar",
"Scuba Diving"
],
"soltero": true,
"direccion": {
"calle": "Ave. Siempre Viva",
"numero": "123",
"pais": "Catalana"
}
},
{
"nombre": "Amiga Pepita",
"edad": 25,
"nacionalidad": "Cubana",
"altura": "167 cm",
"peso": 55,
"pasatiempos": [
"Natación",
"Alpinismo",
"Cinéfila",
"Socializar",
"Gaming"
],
"soltero": true,
"direccion": {
"calle": "Cerro del Estudiante",
"numero": "456",
"pais": "Argentina"
}
}
]
}
</source>
-----------------------------------------------------------
Exemple 1 :
<source lang="json">
{
"employees": [
{
"firstName": "Julio",
"lastName": "Noguera"
},
{
"firstName": "Albert",
"lastName": "Canela"
},
{
"firstName": "Alex",
"lastName": "Salinas"
}
]
}
</source>
Exemple 2 :
<source lang="json">
var JSONObject={
"name": "John Johnson",
"street": "Oslo West 555",
"age": 33,
"phone": "555 1234567"
};

document.getElementById("jname").innerHTML=JSONObject.name;
document.getElementById("jage").innerHTML=JSONObject.age;
document.getElementById("jstreet").innerHTML=JSONObject.street;
document.getElementById("jphone").innerHTML=JSONObject.phone;
</source>

'''Validadors de json'''

http://jsonviewer.stack.hu/

http://jsonlint.com/

==La conversió d'un text JSON a un objecte JavaScript==

'''NO RECOMENDADO'''

http://www.etnassoft.com/2011/01/05/javascript-eval-uso-y-alternativas/

Crear una cadena de JavaScript que conté la sintaxi de JSON:
<source lang="java">
var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
</source>

La sintaxi JSON és un subconjunt de la sintaxi de JavaScript, la funció eval () de JavaScript es pot utilitzar per convertir un text JSON en un objecte de JavaScript.

La funció eval () utilitza el compilador de JavaScript que analitzar el text JSON i produeix un objecte de JavaScript. El text ha de ser embolicat amb parèntesi per evitar un error de sintaxi:

<source lang="java">
var obj = eval ("(" + txt + ")");
</source>

<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<pre>
<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
</pre>

És més segur utilitzar un analitzador JSON per a convertir un text JSON en un objecte de JavaScript. Un analitzador JSON reconeixerà només text JSON i no compilar scripts.

En els navegadors que donen suport JSON natiu, analitzadors JSON són també més ràpid.

Suport JSON nadiu està inclòs en tots els principals navegadors i en l'últim estàndard ECMAScript (JavaScript).

== JAVASCRIPT & JSON ==

=== Analitzar text JSON i convertir-lo en un objecte (JAVASCRIPT)===
*Es pot fer amb la llibreria nativa de JSON per javascript (Javascript)
*la llibreria tracta una cadena de text i el transforma com a objecte JSON

<pre>
var myObject = JSON.parse('{ "name": "John" }');
</pre>
https://www.w3schools.com/js/js_json_parse.asp

=== Donat un objecte JSON converti-lo en Text ===

* Transforma tot el contingut de un objecte Json a string
<pre>
var myJSONText = JSON.stringify(myObject);
</pre>
Més informació a https://www.w3schools.com/js/js_json_stringify.asp

== PHP & JSON ==
A PHP s'utilitzen dos funcions per manipular JSON: json_encode i json_decode. A la següent Web trobareu com utilitzar-les: http://www.php.net/manual/es/function.json-decode.php

'''LLegir i escriure Fitxer desde PHP '''

Si volem llegir un fitxer .json haurem d'utilitzar la instrucció "file_get_contents". Les dades que obtinguis d'aquesta funció, els hauràs de guardar en una variable qualsevol
<source lang="php">
$ json = file_get_contents ("./datos.json");
</source>

Guarda información dentro de un fichero, en este caso un JSON

<source lang="php">
$json_string1 = {"posicionX":250,"posicionY":100}
file_put_contents('./datos.json', $json_string1)
</source>

'''Crear un JSON desde PHP (json_encode)'''

Creem un objecte Json a partir de un array en PHP

<source lang="php">
$miArray = array("manzana"=>"verde", "uva"=>"Morada", "fresa"=>"roja");
print_r(json_encode($miArray));

//resultat que mostrar {"manzana":"verde","uva":"Morada","fresa":"roja"}
</source>

'''Crear un objeto en PHP con JSON (json_decode)'''

Tenim un objecte Json y el transformen a un array de PHP
exemple 1 un json simple.

<source lang="php">

<?php
$jsonData = '{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" }';

$phpArray = json_decode($jsonData);

//print_r($phpArray);
//stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya )

//en el cas de volver recorrer l'array mostraría la clau i el valor
foreach ($phpArray as $key => $value) {
echo "<p>$key | $value</p>";
}
?>

<php>
</source>

Altre exemple
<source lang="php">
$jsonData = '[{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" },{ "usuario":"pepe", "edad":28, "comunidad":"valencia" },{ "usuario":"pep", "edad":23, "comunidad":"murcia" }]';
$phpArray = json_decode($jsonData);

//print_r($phpArray);
/*Array ( [0] => stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya ) [1] => stdClass Object ( [usuario] => pepe [edad] => 28 [comunidad] => valencia ) [2] => stdClass Object ( [usuario] => pep [edad] => 23 [comunidad] => murcia ) ) Julio 30 catalunya pepe 28 valencia pep 23 murcia */

//recorrer un array i mostrar les dades.
foreach($phpArray as $obj){
$id_usuario = $obj->usuario;
$edad = $obj->edad;
$comunidad = $obj->comunidad;
echo $id_usuario." ".$edad." ".$comunidad;
echo "";
}

//també podem accedir al contingut de la seguüent manera echo "$phparray[0]->usuario";
</source>

== jQuery & JSON ==
=== Analitzar text JSON i convertir-lo en un objecte (JQUERY)===
* Es pot fer amb la funció Jquery.parse(): rep una cadena JSON ben formatada i retorna l'objecte JavaScript resultant. (JQuery)
<pre>
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );
</pre>
https://api.jquery.com/jQuery.parseJSON/

=== LLegir dades des de un fitxer JSON (JQUERY)===
Supossem que tenim un fitxer anonenat dades.json i el volem llegir amb Javascript.
Fitxer dades.json :
<source lang="json">
{
"users": [
{
"firstName": "Ray",
"lastName": "Villalobos",
"joined": {
"month": "January",
"day": 12,
"year": 2012
}
},
{
"firstName": "John",
"lastName": "Jones",
"joined": {
"month": "April",
"day": 28,
"year": 2010
}
}
]
}
</source>
S'utilitza la funcion getJSON de jQuery:
<source lang="jquery">
$.getJSON('files/data.json', function(data) {
var output="<ul>";
for (var i=0;i<data.users.length;i++) {
output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
}

output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</source>

Ens mostrará en pantalla
<source lang="html">
* Ray Villalobos--January
* John Jones--April
</source>

=== Enviar un objecte JSON amb $.ajax() (JQUERY) ===
Exemple 1:
<pre>
$.ajax({
type: "POST",
url: hb_base_url + "consumer",
contentType: "application/json",
dataType: "json",
data: JSON.stringify({
first_name: $("#namec").val(),
last_name: $("#surnamec").val(),
email: $("#emailc").val(),
mobile: $("#numberc").val(),
password: $("#passwordc").val()
}),
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
</pre>
Exemple 2:
<pre>
var obj = {};

obj.first_name = $("#namec").val();
obj.last_name = $("#surnamec").val();
obj.email = $("#emailc").val();
obj.mobile = $("#numberc").val();
obj.password = $("#passwordc").val();

$.ajax({
type: "POST",
url: hb_base_url + "consumer",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(obj),
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
</pre>

Exemple 3:
<source lang="java">
var parametros = {
"valorCaja1" : valorCaja1,
"valorCaja2" : valorCaja2
};

$.ajax({
data: parametros,
url: 'ejemplo_ajax_proceso.php',
type: 'post',
beforeSend: function () {
$("#resultado").html("Procesando, espere por favor...");
},
success: function (response) {
$("#resultado").html(response);
}
});
}

</source>

= XML =
En aquest apartat es veurà com utilitzar XML per guardar dades des de un servidor PHP.
Exemple de XML:
<source lang="xml">
Fitxer aules.xml:
<aules>
<aula>
<nom>205</nom>
<subxarxa>172.16.205.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>filtra</estatactual>
</aula>
<aula>
<nom>206</nom>
<subxarxa>172.16.206.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>denega</estatactual>
</aula>
</aules>
</source>
Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP.

== Creació de l'Arbre XML ==
Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer:
<pre>
$file = "files/aules.xml";
$xmldom = new DOMDocument();
$xmldom->load($file);
</pre>

== Obtenir un element de l'arbre ==
Es pot utilitzar la funció ''getElementsByTagName''. Exemple:
<pre>
$aules = $xmldom->getElementsByTagName("aula");
</pre>

== Recòrrer tots els elemens ==
Podem recòrrer tots els element amb un foreach:
<pre>
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
$net = $aula->getElementsByTagName("subxarxa")->item(0)->nodeValue;
$mask = $aula->getElementsByTagName("mascara")->item(0)->nodeValue;
}
</PRE>

== Afegir un nou element ==
Per afegir un nou elment s'ha de crear un node nou i afegir tos els fills que es necessiti per crear el XML correcte.
Exemple:
<pre>
$auladom = $xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("nom");
$domnode = $xmldom->createTextNode(strtolower($classroomName));
$aulanomdom->appendChild($domnode);
$auladom->appendChild($aulanomdom);

//creamos el nodo NETWORK con su valor $network
$aulanetwork = $xmldom->createElement(XARXA_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($network));
$aulanetwork->appendChild($domnode);
$auladom->appendChild($aulanetwork);

//creamos el nodo MASK con su valor $mask
$aulamask = $xmldom->createElement(MASK_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($mask));
$aulamask->appendChild($domnode);
$auladom->appendChild($aulamask);

//creamos el nodo initial status con su valor $initialstatus
$aulastatus = $xmldom->createElement(INIT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulastatus->appendChild($domnode);
$auladom->appendChild($aulastatus);

//creamos el nodo current status con su valor $initialstatus
$aulacurrentstatus = $xmldom->createElement(CURRENT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulacurrentstatus->appendChild($domnode);
$auladom->appendChild($aulacurrentstatus);

//afegim el node aula a la llista de nodes
$root = $xmldom->documentElement;
$root->appendChild($auladom);

//guardem
$xmldom->save($filename);
</pre>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Esborrar un element ==
Per esborrar un element, primer s'ha de cercar, després dir-li al pare que ens volem eliminar. Però també hem d'esborrar els fills!.
<source lang="php">
//funció que esborra un node i els seus fills
function deleteNode($node) {
deleteChildren($node);
$parent = $node->parentNode;
$oldnode = $parent->removeChild($node);
}

//funció que esborra els fills d'un node
function deleteChildren($node) {
while (isset($node->firstChild)) {
deleteChildren($node->firstChild);
$node->removeChild($node->firstChild);
}
}

//funció que cerca al XML un node amb el nom=$classroomname
function delete($classroomName){
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
deleteNode($aula);
$xmldom->save($this->filename);
}
}
}
</source>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

== Modificar un valor ==
Per modificar un valor, primer es cerca i després es mira quin dels atributs es vol modificar:
<pre>
function setNewClassroomAttr($classroomName, $attr, $value)
{
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
$aula->getElementsByTagName($attr)->item(0)->nodeValue = strtolower($value);
$this->xmldom->save($this->filename);
}
}

}
</pre>
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció ''save''.

Podeu trobar més informació a http://www.php.net/manual/en/class.domdocument.php

=Traduïr un XML a JSON =
En el següent enllaç podem veure que els fitxers XML es poden traduir a sintaxi JSON. Tanmateix, quan els fitxers XML es compliquen, el seu equivalent JSON passa a ser bastant difícil de llegir i interpretar:
http://www.utilities-online.info/xmltojson/#.WjqMa2fWxMw

-------------------------------------------

=== EXERCICIS ===

1.Crea una aplicació que rep com paràmetre en un input una ciutat i després es realitza una consulta amb fetch que retorni el temps de la ciutat o que digui que no hi ha cap ciutat anomenada així.

*Api d'on treurem el temps:

http://neftali.clubdelphi.com/hablando-del-tiempo-openweathermap-12/

*Exemple amb la ciutat Barcelona
http://api.openweathermap.org/data/2.5/find?&q=Barcelona,es&lang=es&units=metric&APPID=278857e8dee51f914026df21d0d40c19"

*Exemple html on mostra les dades obtingudes:
<source lang="javascript">
</source>