# Kurs WWW. Lista nr 5
###### tags: `www20` `pwit`

:::info
grupa PWit, wtorki 12-14
:::

## Deklaracje

:::info
Studenci wypełniają poniższą tabelkę przed rozpoczęciem zajęć.
:::
Gotowość rozwiązania zadania należy wyrazić poprzez postawienie X w odpowiedniej kolumnie!

Można również wyrazić chęć prezentacji któregoś zadeklarowanych zadań za pomocą znaku ==X== (X na żółtym tle).

| | 1 | 2 | 2bonus | 3 |
|--------------------------- | ----- | ----- | ----- | ----- |
| Kacper Bajkiewicz | X | X | | X |
| Jakub Bok | | | | |
| Kamila Brzozowska | x | x | | |
| Monika Jędrzejkowska | | | | |
| Karol Kęciński | | | | |
| Szymon Kiczak | x | | | |
| Szymon Kosakowski | | | | |
| Denys Lukeniuk | | | | |
| Piotr Mańkowski | | | | |
| Mateusz Materek | | | | |
| Sonia Pawluk | | | | |
| Patryk Pęczak | | | | |
| Bartosz Polaszek | | | | |
| Marcin Rogala | | | | |
| Aleksander Szymański | x | | | |
| Jakub Świgło | | | | |
| Nikola Wrona | X | X | | X |
----------------------------------------------------------------

Zadanie 1: Marcin Rogala

Pola formularza: numer konta bankowego, pesel, data urodzenia, email.

Schemat XML - opisuje strukturę i typy elementów w pliku XML.

Schemat: https://pastebin.com/agCPG8y9
Wykorzystane elementy:
1. element - "The element element defines an element."
2. complexType - element zawierający w sobie inne elementy
3. sequence - dzieci tego elementu muszą występować w ustalonej kolejnosci
4. simpleType - element prostego typu np. string
5. restriction - określa dopuszczalne wartości dla elementu
6. pattern - pozwala na sprawdzenie wartosci z wyrażeniem regularnym

Przykładowy plik XML: https://pastebin.com/R09gUrDv

Schemat JSON - określa jak powinien wyglądać plik JSON
Schemat: https://pastebin.com/fMKQz58F
Wykorzystane elementy:
1. "type" - typ danych danego pola np. string
2. "format" - określa format trzymanych danych np. data
3. "pattern" - wykorzystanie wyrażenia regularnego
4. "required" - określa czy dane pole jest wymagane

Przykłądowy plik JSON: https://pastebin.com/j6RL5EcX

Zadanie 2: Kacper Bajkiewicz

W tym zadaniu trzeba pobrać RSS serwisu TVN24 i wyświetlenie 5ciu newsów.

Rozwiązanie problemu CORS -> https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

W pliku HTML jest tylko pusta lista, do której będę wrzucał newsy, więc bez sensu jest wrzucanie tutaj kodu HTML. JS wygląda za to tak:

$(document).ready(function() {
    let link = "https://cors-anywhere.herokuapp.com/" +         "https://tvn24.pl/najnowsze.xml";
        $.get(link, function(tvnXML){
            let i = 0;
            $(tvnXML).find("item").each(function(){
                if(i == 5)
                    return;
                let article = "";
                    article +=     (`<li>${$(this).find("title").text()}</li>`);
                article += (`<br><ul>    <li>${removeIMGtvn($(this).find("description").text())}</li><br>`);
                article += (`<li><a href="${$(this).find("guid").text()}">Zobacz sam!</a></ul></li><br>`);
                $("#TVNnews").append(article);
                i++;
            })
        })
    });


function removeIMGtvn(string){
    let start_newstring = string.indexOf('/>'); //wiemy ze najpierw pojawia sie zdjecie w tych znacznikach;
    return string.substring(start_newstring + 2);
}

Funkcja removeIMGtvn używana jest do usunięcia linku do obrazka, który psuł efekt wizualny wyświetlanych wiadomości.
Pobrany dokument jest już sparsowany i da się nim posługiwać jak dokumentem XML, wobec czego nie trzeba używać podanej w treści zadania funkcji.
Funkcja wypisująca kończy działanie, kiedy wyświetli 5 wiadomości.

Zadanie 3: Nikola Wrona

W tym zadaniu należy pobrać plik RSS z podanego linku (https://tvn24.pl/najnowsze.xml). Następnie z użyciem konwertera przekształcamy plik to formatu JSON i oglądamy plik w postaci drzewa w edytorze. Przyda nam się to w dalszej części zadania, gdzie musimy pobrać pierwszych 5 newsów z tego pliku.

**Mustache.js**
Mustache.js to biblioteka, której zadaniem jest oddzielenie logiki aplikacji JavaScript od kodu HTML, poprzez obsługę szablonów.
`{{zmienna}}` – znacznik wyświetlający zmienną
`render` – dwuargumentowa funkcja (przyjmuje szablon i obiekt JS) zwracająca wynikowy kod HTML, przetworzony z użyciem szablonu i zmiennych.

Bibliotekę dołączamy do pliku HTML w następujący sposób:

<script src="https://unpkg.com/mustache@latest"></script>

lub użyciem npm'a:

$ npm install mustache --save

Pełną dokumentację znajdziemy tutaj:
https://github.com/janl/mustache.js

**Dalsza część zadania**
W pliku HTML tworzymy tablicę:

<body>
    <table id="content"></table>
</body>

Tworzymy skrypt pobierający plik RSS za pomocą metody $.getJSON. Następnie tworzymy odpowiedni template, który będzie wyświetlał 5 pierwszych newsów. Korzystając z odpowiednich znaczników mustache.js, wskazujemy miejsca umieszczenia danych.
`{{title.__cdata}}` - tytuł newsa
`{{description.__cdata}}` - opis newsa wraz ze zdjęciem
`{{link}}` - link do newsa w serwisie TVN24

Oglądając plik RSS w postaci drzewa mogliśmy zauważyć, że każdy news zawiera się w tablicy item, zatem iterujemy po jej kolejnych elementach i korzystając z funkcji render, łączymy szablon z danymi, a następnie z użyciem append wstawiamy wynik do tabeli.

<script>
$(document).ready(function(){
    $.getJSON("z3.json", function(object){
		var template = '<tr><td><b>{{title.__cdata}}</b><br>';
		template += '{{description.__cdata}}<br><a href="{{link}}">Zobacz więcej...</a></td></tr>';
		for(var i = 0; i < 5; i++)
		{
			var delete_img = object.rss.channel.item[i].description.__cdata.split(">");
			object.rss.channel.item[i].description.__cdata = delete_img[1];
			var add = Mustache.render(template, object.rss.channel.item[i]);
			$("#content").append(add);		
		}
    });
});
</script>

Dodatkowo, aby pozbyć się obrazu z elementu `description.__cdata` dzielimy treść tego elementu funkcją split. Otrzymujemy dwuelementową tablicę `delete_img`, zawierającą odpowiednio znacznik obrazu `<img>` oraz opis danego newsa. Wystarczy, że przypiszemy do danego elementu `delete_img[1]`, aby otrzymać szukany opis bez zbędnego obrazu.