---
# System prepended metadata

title: Kurs WWW. Lista nr 5
tags: [pwit, www20]

---


# 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.
![](https://i.imgur.com/wvh8Y1H.png)

**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.