Aplikacje WWW Wprowadzenie

Aplikacje WWW
Wprowadzenie
Beata Pańczyk
na podstawie
http://www.e-informatyka.edu.pl/
http://wazniak.mimuw.edu.pl/index.php?title=Aplikacje_WWW
Plan wykładu
• Składniki architektury WWW: klient HTTP,
•
•
•
•
•
•
serwer HTTP, protokół HTTP
Rozszerzona architektura WWW - aplikacja
WWW, serwer aplikacji, aplikacje
komponentowe
Język HTML
Technologie tworzenia interfejsu uŜytkownika
(CSS, XML, XHTML, JavaScript, aplety Java)
Protokół HTTP
Logika prezentacji (technologie serwletów i
szablonów)
Logika biznesowa
2
Składniki architektury WWW
• Klient HTTP (przeglądarka WWW)
• Serwer HTTP (serwer WWW)
• Protokół HTTP
3
Interakcja w środowisku WWW
http://www.pollub.pl/plany/inf.html
www.pollub.pl
4
Zadania klienta HTTP
•
•
•
•
•
Inicjalizowanie połączenia HTTP
Pobieranie interfejsu uŜytkownika
Prezentacja interfejsu uŜytkownika
Interakcja z uŜytkownikiem
Buforowanie odpowiedzi (zapisywanie w
lokalnym systemie plików, a następnie
wykorzystanie do obsługi identycznych,
powtórzonych Ŝądań w przyszłości - skrócenia
czasu odpowiedzi)
• Kryptografia (podniesienia bezpieczeństwa
komunikacji - moŜliwe szyfrowanie połączeń
5
sieciowych z serwerami HTTP)
Zadania serwera HTTP
(serwera WWW)
•
•
•
•
•
Obsługa Ŝądań HTTP
Rejestracja Ŝądań
Uwierzytelnianie i kontrola dostępu
Kryptografia
Wybór wersji językowej wysyłanych
plików
6
HTTP, URL
• Protokół HTTP:
• oparty na TCP
• komendy tekstowe
• bezstanowy, bezsesyjny
• Adres URL:
http://www.pollub.pl/plany/inf.html
7
Dokumenty
statyczne i dynamiczne
• Dokument statyczny - gotowy do
pobrania plik w systemie plików serwera
HTTP
• Dokument dynamiczny - dokument
generowany na Ŝądanie przez program
po stronie serwera HTTP
• Aplikacje WWW
8
Aplikacja WWW - przykład
9
Aplikacje WWW - porównanie
10
Rozszerzona architektura WWW
11
Serwer aplikacji
• Platforma dla uruchamiania aplikacji WWW
• Obsługa komunikacji z warstwą klienta i
warstwą danych
• Usługi systemowe
– transakcje
– rejestracja Ŝądań
– autoryzacja dostępu
– itd.
12
Komponentowe aplikacje WWW
13
Zalety i wady aplikacji WWW
• Zalety
– Niski koszt urządzeń dostępowych
– Wygoda administrowania aplikacjami
– Łatwość uŜytkowania
– Ochrona własności intelektualnej
• Wady
– Trudność wytwarzania oprogramowania
– Uproszczony interfejs uŜytkownika
– Koszt serwerów
14
Język HTML
• najwaŜniejszy język definicji dokumentów dla
klientów HTTP - umoŜliwia zapis treści
dokumentu i równocześnie opis jego układu
• Zalety
– prostota składni
– dostępność przeglądarek
• Wady
– brak szablonów/wzorców
– brak separacji formy i treści
– ubogi graficznie
15
Interfejs uŜytkownika I
•
CSS - preferowany mechanizm formatowania
dokumentów HTML
• XML - tekstowy format ogólnego przeznaczenia
– format publikacji danych w Internecie
– format wymiany i składowania danych
• XHTML - wersja HTML dostosowana do reguł
XML
• XSL - język do formatowania dokumentów XML
– XSLT – do opisu automatycznej transformacji
dokumentu XML do dokumentu o innej strukturze
– XSL-FO – słownik znaczników opisujących
formatowanie (funkcjonalnie przypomina CSS, ale
jest bardziej zorientowany na przygotowywanie
dokumentów do druku)
16
Interfejs uŜytkownika II
• Formularze HTML - podstawowy mechanizm
przekazywania parametrów do aplikacji
internetowej
• Język JavaScript - przydatne narzędzie
zapewniające:
– interakcyjność
– walidację danych
• Aplety Java - wykorzystywane do budowy
bogatszego graficznego interfejsu
uŜytkownika
17
Protokół HTTP
• SłuŜy do transportu dokumentów udostępnianych
przez serwery HTTP
• Tekstowy, oparty na protokole TCP, domyślny
port 80
• Model klient-serwer, styl Ŝądanie-odpowiedź
• Po dostarczeniu dokumentu połączenie jest
zamykane
18
Komunikaty HTTP – Ŝądanie
Pola nagłówkowe Ŝądania
19
Komunikaty HTTP – odpowiedź
Pola nagłówkowe odpowiedzi
kod zwrotny
format ciała
odpowiedzi
20
Formaty plików MIME
• MIME określa sposób opisu formatów
plików
• Content-Type:
– dokumenty tekstowe: text/* (css, html, plain)
– pliki dźwiękowe: audio/* (midi, mpeg, x-wav)
– pliki graficzne: image/* (gif, jpeg, png)
– pliki wideo: video/* (mpeg, quicktime)
– pliki obsługiwane przez dedykowaną
aplikację: application/* (pdf, zip)
21
Analiza komunikatów
HTTP: Mozilla
LiveHTTPHeaders
22
Rozkaz HEAD
• HEAD - podobny do GET – reprezentuje
Ŝądanie klienta HTTP, jednak w jego wyniku
klient otrzymuje wyłącznie wiersze
nagłówkowe odpowiedzi HTTP, bez
załączonego ciała (dokumentu wynikowego).
• umoŜliwia przeglądarce pobranie
metadanych opisujących dokument, bez
konieczności pobierania pełnej treści
dokumentu
• główne zastosowania obejmują
weryfikowanie poprawności adresów i łączy
23
URL.
Rozkaz POST
• POST - podobny do GET – reprezentuje
Ŝądanie klienta HTTP, lecz do Ŝądania tego
dołączone jest ciało, które reprezentuje dane
wysyłane przez klienta HTTP do serwera
HTTP (np. parametry, plik).
• w związku z obecnością ciała Ŝądania,
komunikat sieciowy zawiera pola nagłówkowe
„Content-Type” i „Content-Length”, a
najpopularniejszym formatem przekazywanej
treści jest „Content- Type: application/x-wwwform-urlencoded”, oznaczający dane
formularza HTML przekształcone do postaci
ASCII metodą „URL-encoding” (RFC 1738) 24
Parametry Ŝądania HTTP
http://www.pollub.pl/my_app?x=1&y=2
25
HTTPS – protokół bezpieczny
• HTTP podatny na podsłuch
• HTTPS - odmiana protokołu HTTP
wykorzystująca SSL
• HTTPS zapewnia:
– szyfrowanie Ŝądań i odpowiedzi HTTP
– kontrolę integralności Ŝądań i odpowiedzi
HTTP
– uwierzytelnianie serwera HTTP
– opcjonalne uwierzytelnianie klienta HTTP
26
Przebieg połączenia HTTPS
https://www.pollub.pl/
27
Implementacja logiki prezentacji
• Zadania logiki prezentacji
• Technologie serwletów
– programy CGI
– serwlety Java
• Technologie szablonów
– Java Server Pages
– PHP
– ASP.NET
28
Logika biznesowa
• "serce aplikacji" - wykonuje
operacje na danych i zapytania
SQL przed zaprezentowaniem ich
uŜytkownikowi
• zwykle zaprogramowana w
zarządzanych komponentach
29
Oddzielenie logiki biznesowej od
interfejsu
• Mała aplikacja (kilka stron) - projektowanie
zgodnie z paradygmatem MVC nie jest niezbędne
(chociaŜ eleganckie). MoŜna sięgać do logiki
biznesowej prosto z interfejsu, w razie
modyfikacji logiki, przedefiniować cały interfejs
i nie martwić się o poprawność przesyłanych
między interfejsem a logiką danych
• DuŜa aplikacja (kilkadziesiąt dynamicznie
generowanych stron z rozbudowaną logiką i bazą
danych) - Model-View-Controller staje się
niezbędny i moŜe oszczędzić olbrzymie ilości
czasu.
30
Wzorzec projektowy MVC
Warstwa modelu (model)
• reprezentowany przez klasy stanowiące
autonomiczne, niezaleŜne od siebie jednostki
• klasy umieszczone w katalogu oddzielnie od
reszty aplikacji – rozmieszczenie klas zaleŜne od
platformy (Java Servlet czy PHP)
• aplikacja moŜe posiadać 2 rodzaje klas:
• klasy realizujące kaŜda własną logikę - moŜna je
przenosić do innych aplikacji
• klasy zawierające specyficzne implementacje tylko dla
konkretnej aplikacji (przenoszenie nie wskazane)
31
Wzorzec projektowy MVC
Warstwa sterownika i widoku
Warstwa sterownika (Controller)
• realizuje zadania związane z obsługą Ŝądań
kierowanych do aplikacji
• pobiera parametry z metod GET lub POST
i decyduje jakie działania naleŜy dalej
podjąć
Warstwa widoku (View)
• prezentuje dane i wyniki działania aplikacji
w postaci html (w przypadku servletów –
strony JSP, w przypadku PHP – skrypty
PHP i szablony Smarty)
32