====== Laboratorium JiTW, XML ======

XML i JSON są najczęściej wykorzystywanymi formatami do wymiany danych pomiędzy klientem a serwerem w aplikacjach AJAX. 

XML stanowi również najczęściej wykorzystywany format pobierania danych z zewnętrznych serwisów, udostępniających odpowiednie interfejsy programistyczne (API). Do serwisów takich należą źródła bieżących wiadomości (news), serwisy pogodowe czy serwisy udostępniające wyniki rozgrywek sportowych. Wykorzystanie XML pozwala na automatyczne pobieranie tych danych w swojej aplikacji, obróbkę, wizualizację, a także (dzięki DTD lub XML Schema) na weryfikację ich poprawności.


===== Ćwiczenia =====

Google Maps jest znaną aplikacją umożliwiającą m.in. przeglądanie map, planowanie tras, wyszukiwanie POI oraz korzystanie z usługi Street View. Jedną z dodatkowych możliwości jest tworzenie własnych "map", tj. nanoszenie na mapę elementów takich jak punkty (posiadające opis i reprezentację graficzną - ikonę) czy linie łamane.

http://maps.google.com | Menu | MyMaps | CREATE MAP

Zdefiniowaną mapę wraz z elementami można wyeksportować w formacie [[http://en.wikipedia.org/wiki/Keyhole_Markup_Language|KML]]. Jest to jeden ze znanych formatów reprezentacji danych geograficznych. Inne znane formaty to m.in. [[http://en.wikipedia.org/wiki/GPS_eXchange_Format|GPX]] (popularny m.in. wśród sprzętowych tzw. loggerów GPS) czy [[https://en.wikipedia.org/wiki/Shapefile|ESRI shapefile]] (wykorzystywany często w aplikacjach GIS).

Format KML (jak i inne podobne formaty) pozwala na przechowywanie tzw. prymitywów geometrycznych, osadzonych w jednym z układów odniesienia aproksymujących kształt kuli ziemskiej (często w znanym i lubianym [[https://en.wikipedia.org/wiki/World_Geodetic_System|WGS-84]]). 

Za pomocą [[http://maps.goole.com|Google Maps]] sporządź mapę z zaznaczonymi punktami. Mapa powinna posiadać po co najmniej jednym przykładzie następujących elementów:
  * tytuł mapy i opis,
  * punkty posiadające opisy i przypisane ikonki (spośród dostępnych w aplikacji Google Maps),
  * linia łamana (LineString).

Możesz również skorzystać z przykładu: {{:pl:jitw:agh.kml}}, który możesz zwizualizować na mapie korzystając np.: [[http://www.mappingsupport.com/p/gmap4.php?q=http://home.agh.edu.pl/~wojnicki/wiki/_media/pl:jitw:agh.kml]] podając jako atrybut ''q'' URI do Twojego dokumentu KML.

==== Ćwiczenie: XML i CSS ====

Za pomocą CSS wykonaj odpowiednią wizualizację danych ze swojego dokumentu KML, lub przykładu: {{agh.kml}}. Tak aby były widoczne nazwy, opisy i koordynaty punktów (element ''Placemark'' i jego zawartość). Przetestuj rezultaty za pomocą przeglądarki.

Ponieważ dokument KML nie posiada elementów przypisujących mu CSS należy dodać odpowiedni znacznik (Processing Instruction):
<code xml><?xml-stylesheet type="text/css" href="moj_css_dla_kml.css"?></code>

Swój CSS możesz zacząć np. od:
<code css>
kml {
    background: black;
}

Placemark {
    display:block;
    color: white;
}
</code>

Jeżeli zachodzi potrzeba wizualizacji danych przekazywanych z wykorzystaniem atrybutów bardzo przydatne będą selektory '':before'', '':after'' oraz własność ''content''.
Np. aby wyświetlić zawartość atrybutu ''data'' elementu ''condition'' należy użycć konstrukcji CSS:

<code>
condition:after {
    content: attr(data);
}
</code>

=== Dla zainteresowanych (nadobowiązkowe) ===

Do automatyzacji powyższej procedury napisz aplikację PHP, który pobierze zasób KML z określonego adresu, oraz doda odpowiedni element określający CSS, i tak zmodyfikowany dokument zwróci na wyjściu.
Uwaga: należy zwrócić uwagę na właściwy typ dokumentu zwracanego przez skrypt tj: ''text/xml'' oraz kodowanie znaków diakrytycznych zgodne z kodowaniem danych źródłowych. Poniższy kod może się przydać:

<code php>
<?php 
        header('Content-type: application/xml');
        $lines=file('http://home.agh.edu.pl/~wojnicki/wiki/_media/pl:tiim:agh.kml');
        echo implode('',$lines);
?>
</code>



==== Ćwiczenie: walidacja XML ====

Na podstawie zawartości posiadanego pliku KML, stwórz plik DTD pozwalający na weryfikację poprawności (i np. wychwycenie ew. zmian formatu wprowadzonych przez dostawcę).
Możesz skorzystać z przykładu {{kml.dtd}}, który zawiera fragment składni KML, tak aby pasować do {{agh.kml}}. 


Zwróć uwagę na zawieranie się i krotność elementów.

Następnie proszę zwalidować poniższe pliki i sprawdzić, czy zostanią w nich wychwycone błędy np. za pomocą parsera ''xmlstarlet'':
  xmlstarlet val -e -d aaa.dtd aaa.xml
albo ''xmllint'':
  xmllint --noout --dtdvalid aaa.dtd aaa.xml

{{agh0.xml}}
{{agh1.xml}}
{{agh2.xml}}
{{agh3.xml}}

Gdzie pojawiają się błędy poprawności składniowej (dobre sformułowanie), a gdzie strukturalnej?


==== Ćwiczenie: JSON ====

JSON ([[http://en.wikipedia.org/wiki/JSON|JavaScript Object Notation]]) jest formatem serializacji obiektów w języku JavaScript. Dlatego też "odserializowanie" JSONa jest możliwe przy pomocy funkcji funkcji [[http://www.w3schools.com/jsref/jsref_eval.asp|eval]]; bezpieczniej jest jednak użyć zewnętrzengo parsera ([[http://www.json.org/js.html|więcej informacji]]). 

Pełny opis składni dostępny jest na [[http://www.json.org/json-pl.html|tej stronie]], [[http://json.org/example.html|tu]] jest kilka przykładów.

W ramach ćwiczenia napisać skrypt PHP, który sparsuje plik KML (np. poprzez stworzenie elementu [[http://php.net/manual/pl/book.simplexml.php|SimpleXMLIterator]]) i zserializuje te dane w formacie JSON (najłatwiej [[http://php.net/manual/pl/function.json-encode.php|tak]]).

Istnieje wiele edytorów wspierających edycję plików JSON, np.: http://mb21.github.io/JSONedit/

=== Zadanie domowe dla zainteresowanych ===

Istnieje dobrze zdefiniowany format do przechowywania danych geograficznych oparty o JSON: [[http://www.geojson.org|GeoJSON]] ([[http://en.wikipedia.org/wiki/GeoJSON|Wikipedia]]).

Przerób skrypt PHP tak, aby generował poprawny kod GeoJSON.

==== Ćwiczenie: JS i XML/JSON ====

Celem ćwiczenia jest porównanie sposobu parsowania XML oraz JSON przez JavaScript. Formaty te są głównymi formatami wykorzystywanymi w aplikacjach webowych opartych o AJAX.

Umieść kod KML oraz wygenerowany w poprzednim ćwiczeniu JSON w dwóch osobnych plikach na serwerze WWW. W tym samym katalogu stwórz stronę HTML wraz z kodem JavaScript, który:
  * wykona zapytanie AJAX do URI kodu w formacie KML, sparsuje przy pomocy wbudowanego parsera (''responseXML'') oraz zwróci na konsolę (''console.log(...)'') wszystkie obiekty reprezentujące elementy ''Placemark'' (praca z obiektem ''responseXML'' jest analogiczna do pracy z DOM), oraz
  * wykona zapytanie AJAX do URI kodu w formacie JSON, sparsuje przy pomocy funkcji ''eval'' oraz zwróci na konsolę (''console.log(...)'') wynik parsowania.

**Uwaga:** obiekt ''console'' udostępniany jest m.in. przez dodatek Firebug do Firefoksa. Jego wyjście wyświetlane jest w konsoli błędów w panelu Firebuga.

**Uwaga 2:** w zastosowaniach produkcyjnych, zaleca się wykorzystanie zewnętrznych, "bezpiecznych" parserów JSON - wykorzystanie funkcji ''eval'' może pozwolić na "przemycenie" z danymi również wrogiego kodu wykonywalnego JS.

==== Ćwiczenie: XSLT ====

XSLT umożlwia definiowanie transformacji dokumentów XML do innych postaci.

{{ :pl:tiim:xml-xslt.png }} 

1. Niniejszy {{:pl:jitw:kml-txt.xsl|przykład}} obrazuje prostą transformację XSLT pliku XML do formatu tekstowego (proszę zwrócić uwagę na element ''xsl:output''). 

Przetestuj działanie tej transformacji korzystając z jednego z dostępnych na serwerze borg/charon parserów XML na swoim lub {{agh.xml|przykładowym}} pliku KML:

  xmlstarlet tr kml-txt.xsl aaa.xml
  xsltproc kml-txt.xsl aaa.xml
  sabcmd kml-txt.xsl aaa.xml
  
2. Przeglądarka WWW jest również wyposażona w parser XML, dodając odpowiednie dyrektywy do dokumentu xml (np. ''%%<?xml-stylesheet type="text/xsl" href="kml-txt.xsl"?>%%'') można poprosić parser o jego przetworzenie.
Przetestuj tak zmodyfikowany plik KML w przeglądarce!

3. Zmodyfikuj ''kml-txt.xsl'' tak aby generował kod XHTML a nie czysty tekst.
Postaraj się wykorzystać adresy ikon reprezentujących style dla konkretnych położeń (Placemark) 
 
Przetestuj działanie transformacji za pomocą wybranego parsera, lub przeglądarki WWW (dodając odpowiedni element ''<?xml-stylesheet...>'').

4. Do konwersji XML->JSON można również wykorzystać XSLT.
Na dokumencie KML przetestuj transformację {{xml2json.xsl}} pochodzącą z: http://xml2json.duttke.de/