Value - Instytut Informatyki PW

TIN – zima 2016-2017, Grzegorz Blinowski
TIN
Techniki Internetowe
zima 2016-2017
Grzegorz Blinowski
Instytut Informatyki
Politechniki Warszawskiej
TIN – zima 2016-2017, Grzegorz Blinowski
Plan wykładów
2
3
4
5
6,
7, 8
9, 10, 11
12
13
Intersieć, ISO/OSI, protokoły sieciowe, IP
Protokoły transportowe: UDP, TCP
Model klient-serwer, techniki progr. serwisów
Protokoły aplikacyjne: telnet, ftp, smtp, nntp, inne
HTTP
HTML, XML
Aplikacje WWW, CGI, sesje, serwery aplikacji
serwlety, integracja z backended SQL
Aspekty zaawansowane: wydajność,
przenośność, skalowalność; klastering
SOAP
TIN – zima 2016-2017, Grzegorz Blinowski
Aplikacje WWW
TIN – zima 2016-2017, Grzegorz Blinowski
Wymagania
•
•
•
•
•
•
•
Otwartość (w sensie obsługi standardów)
Skalowalność,
Wydajność
Stabilność
Bezpieczeństwo
Integralność transakcji
(Ochrona inwestycji )
TIN – zima 2016-2017, Grzegorz Blinowski
Aplikacje WWW
• Aplikacje Web - nowe ucieleśnienie modelu klient- serwer:
– przeglądarka - klient
– Serwer: serwer WWW, serwer aplikacji, serwer bazy danych
(źródła danych), monitor transakcji
Dlaczego aplikacje Web?
– Dostępna, powszechna, standardowa technologia
– Standardy otwarte - pozwalają na wdrożenie intranetu i ekstranetu
- nie możemy zakładać, że klienci (partnerzy) będą się
dostosowywać do naszych rozwiązań
– B. duża oferta serwerów, narzędzi, itp.
– Niski koszt utrzymania klienta - klientem jest przeglądarka lub
applet Java, w przypadku awarii lub złego funkcjonowania
reinstalacja jest b. prosta - przeglądarka - prosta w obsłudze i
administracji, tania, wymienna
TIN – zima 2016-2017, Grzegorz Blinowski
Thin/fat client
Klient - interfejs GUI i
"logika biznesowa"
"Fat Client"
GUI + aplikacja
Źródło danych
Klient - tylko GUI i prosta
weryfikacja danych
Serwer aplikacji logika biznesowa
"Thin Client"
Serwer aplikacji
Źródło danych
TIN – zima 2016-2017, Grzegorz Blinowski
Warstwy aplikacji WWW
• Klient: prezentacja, elementarna logika (JavaScript - np. weryfikacja
danych wejściowych, obsługa słowników)
• Serwer WWW
– strony statyczne
– (prosty serwer aplikacji)
• Serwer Aplikacji
–
–
–
–
warstwa prezentacji
warstwa sesji
warstwa logiki (aplikacji)
warstwa komunikacji z: backend, innymi S.A., innymi serwerami
• Źródła danych
– bazy relacyjne
– inne bazy danych (n.p. full-text, …)
TIN – zima 2016-2017, Grzegorz Blinowski
Podstawowe mechanizmy
klienckie
• Formularze
– Podstawowe kontrolki interaktywne: pola tekstowe,
przyciski, listy wyboru, checkbox, radio, ...
– Dość ubogie w stosunku do kontrolek typowego GUI
• JavaScript (ECMA Script)
• “Applety”
–
–
–
–
Java
"Komponenty" (inne applety):
ActivX,
COM, …
TIN – zima 2016-2017, Grzegorz Blinowski
Formularze HTML
• Formularz zawarty między tagami:
<form> </form>
• atrybuty formularza:
– <form method="GET|POST" action="/path/program"
enctype="application/x-www-form-urlencoded|multi-part/formdata">
– brak akcji - zgłoszenie do aktualnego URL
• Elementy formularza:
– statyczne zmienne ukryte - hidden
– kontrolki "input"
• pola tekstowe zwykłe (text) i z ukrytym tekstem (password)
• radio, checkbox
• przyciski specjalne: submit i reset (przywróć)
– Pola tekstowe (textarea)
– listy wyboru - jednokrotne (select), wielokrotne(select multiple)
TIN – zima 2016-2017, Grzegorz Blinowski
HIDDEN
<input type="hidden" name="Nazwa"
Value="Wartosc">
• Tworzy element formularza, który nie jest w żaden
sposób wyświetlany w przeglądarce
• Elementy hidden wykorzystywane są do przenoszenia
danych między formularzami
• Przykładowo:
– aktualnego języka
– identyfikatora użytkownika
– danych sesji, itp.
TIN – zima 2016-2017, Grzegorz Blinowski
INPUT TEXT, PASSWORD
<input type="text" name="Nazwa"
Value="tekst poczatkowy" size="nnn" maxsize="mmm" >
<input type="password" name="Nazwa"
Value="tekst poczatkowy" size="nnn" maxsize="mmm" >
Tworzy jednolinijkowe pole tekstowe
Jest to domyślny typ elementu input
Value określa tekst domyślny zawarty w polu
Size określa rozmiar widocznego pola, a maxsize maksymalną
długość przyjmowanego tekstu
• Dla password echo tekstu ma postać "*"
• Uwaga - password w żaden sposób nie zabezpiecza danych przed
podsłuchem!
•
•
•
•
TIN – zima 2016-2017, Grzegorz Blinowski
INPUT CHECKBOX
<input type="checkbox" name="Nazwa"
Value="wartosc" [checked]>
Tworzy binarny przełącznik
Z formularza zwracane są tylko te przełączniki, które zostały
zaznaczone
• Zwracana jest watość podana w value
• Można utworzyć wiele przełączników o tej samej nazwie, wartości
zaznaczone zostaną wtedy zgrupowane
•
•
TIN – zima 2016-2017, Grzegorz Blinowski
INPUT RADIO
<input type="radio" name="Nazwa"
Value="wartosc" [checked]>
•
•
•
•
Tworzy przełącznik typu "1-z-wielu"
Grupa przełaczników radio identyfikowana jest wspólną nazwą
W obrębie grupy tylko jeden przełącznik może być zaznaczony
Zwracana jest watość podana w value (jedna)
TIN – zima 2016-2017, Grzegorz Blinowski
INPUT BUTTON
<input type="Button" name="Nazwa"
Value="Opis">
•
•
Tworzy przycisk o nazwie name z opisem value
Przycisk nie przekazuje informacji jako rezultat działania formularza,
może być jednak użyty poprzez zdarzenia JavaScript
TIN – zima 2016-2017, Grzegorz Blinowski
INPUT SUBMIT
<input type="submit" Value="wartosc">
<input type="reset" Value="wartosc">
• Submit:
– Tworzy przycisk zgłaszający formularz
– Domyślny przekazywany tekst to "Submit"
• Reset:
– Naciśnięcie powoduje powrót wszystkich wartości formularza do
domyślnych
TIN – zima 2016-2017, Grzegorz Blinowski
INPUT FILE
<input type="file" name="nazwa" value="nazwapliku"
accept="lista typów MIME">
Tworzy dialog wyboru pliku otwierany przyciskiem "browse"
Plik zostanie wczytany i przesłany do serwera dopiero w momencie
zgloszenia formularza
• value określa prefiks dla nazwy pliku
• accept zawiera listę typów MIME, która zostanie przesłana do
serwera
• encoding przybierze wartość multi-part/form-data (domyślny typ to
application/form-www-urlencoded)
•
•
TIN – zima 2016-2017, Grzegorz Blinowski
TEXTAREA
<textarea name="nazwa" cols="nn" rows="rr" wrap="off|virtual|
physical|soft|hard">
tekst domyslny
</textarea>
•
•
•
Tworzy pole tekstowe składające się z wielu linii
cols, rows: określa rozmiary pola
wrap: określa sposób łamania tekstu:
– off - użytkownik musi sam wcisną "Enter"
– virtual (soft) - automatycznie wstawione znaki końca wiersza nie będą
przesłane do serwera
– physical (hard)- automatycznie wstawione znaki końca wiersza będą
przesłane do serwera
TIN – zima 2016-2017, Grzegorz Blinowski
SELECT
<select name="nazwa" size="nnn" multiple>
<option value="wartosc" label="lab" selected>tekst</option>
….
</select>
•
•
•
Tworzy listę wyboru
multiple - Lista umożliwia wybór wielu elementów na raz
size określa sposób prezentacji i rozmiar:
– 0 - lista rozwijalna w dół
– >=1 - lista opcji, przewijana gdy liczba pozycji > size
•
Option
– zwraca tekst objęty tagami lub value (jeśli obecne)
– selected - domyślnie wybrany
TIN – zima 2016-2017, Grzegorz Blinowski
GET i POST
• GET
– dane przekazane w formularzu przekazywane są
bezpośrednio w żądaniu - tj. w URL
– stosowane jest URL encoding (spacje, inne znaki
nielegalne w URL)
– zastosowanie - proste formularze
• POST
– dane przekazane w formularzu przekazywane są w
request entity
– zastosowanie - tam gdzie wymagane przekazanie
większej porcji danych
TIN – zima 2016-2017, Grzegorz Blinowski
GET i POST
GET
POST
• b. proste do przetworzenia
po stronie serwera
• zgłoszone dane widoczne
jako URL w przeglądarce
(wada?, zaleta?)
• rezultat zgłoszenia może
być dodany jako zakładka
• Nie można zgłaszać plików
(html-file-upload)
• wielkość danych
ograniczona do kilkuset
bajtów - kilku KB
• nieco trudniejsze do
przetworzenia po stronie
serwera
• zgłoszone dane nie są
widoczne
• rezultat zgłoszenia nie
może być dodany jako
zakładka
• można zgłaszać pliki (htmlfile-upload) - kodowanie
MIME
• wielkość danych
nieograniczona