Projektowanie stron WWW

Transkrypt

1 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); Projektowanie stron WWW Projektowanie stron WWW Wykład 1 Michał Dudkiewicz, WMiI UMK (jaymz@mat.umk.pl)

2 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); Informacje organizacyjne $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 2 Projektowanie stron WWW

3 Zasady zaliczenia Obecność na zajęciach (dopuszczalne jest 20% nieobecności) Kolokwium 1 (50 punktów z wagą 2) Kolokwium 2 (50 punktów z wagą 2) Projekt zaliczeniowy własny serwis WWW (100 punktów z wagą 1) p ocena p <36 ndst dst dst db db bdb 3

4 Kontakt z prowadzącym, konsultacje jaymz@mat.umk.pl tematy wysyłanych do mnie i proszę ZAWSZE poprzedzać tekstem WNEiZ, np.: WNEiZ pytanie o zaliczenie przedmiotu KONSULTACJE (po wcześniejszym umówieniu się przez ) Wydział Matematyki i Informatyki UMK ul. Chopina 12/18, pokój C102 Materiały dydaktyczne: (zakładka materiały dydaktyczne) 4

5 Plan przedmiotu 1. Sieć komputerowa, usługi sieciowe, architektura klient serwer 2. Środowisko wspomagające tworzenie serwisów WWW (Aptana Studio) 3. Serwer WWW Apache, serwer bazy danych mysql - konfiguracja serwisów w systemie Windows 4. Budowa serwisu WWW - HTML - język konstrukcji stron WWW - CSS - kaskadowe arkusze stylu - język skryptowy JavaScript - obsługa formularzy po stronie klienta 5

6 Plan przedmiotu 5. PHP - zmienne proste i tablicowe - pętle i warunki - dynamiczne generowanie treści (grafika, PDF) - komunikacja z bazą danych - sesje i logowanie - obsługa formularzy po stronie serwera 6. Baza danych mysql - mysql Workbench - Phpmyadmin 7. Typowe ataki na serwisy WWW i bazę danych. 8. Tworzenie własnego serwisu WWW z wykorzystaniem PHP i bazy danych. 6

7 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); Sieci komputerowe usługi w sieciach komputerowych $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 7 Projektowanie stron WWW

8 Prosta sieć lokalna LAN (Local Area Network) Komputery wyposażone w karty sieciowe są połączone w sieć lokalną LAN za pomocą urządzeń sieciowych: switch (przełącznik-koncentrator sieciowy) hub (koncentrator sieciowy) Switche można łączyć ze sobą umożliwiając podłączenie większej ilości urządzeń do sieci lokalnej. 8

9 Prosta sieć lokalna LAN (Local Area Network) Każda karta sieciowa posiada unikalny adres MAC (adres sprzętowy, adres fizyczny) 00-0C 78-4B A identyfikator producenta numer urządzenia Małgosia Jaś 9

10 Prosta sieć lokalna LAN (Local Area Network) Każda karta sieciowa posiada unikalny adres MAC (adres sprzętowy, adres fizyczny) 00-0C 78-4B A identyfikator producenta numer urządzenia Małgosia Jaś Krzyś 1 0

11 Prosta sieć lokalna i wyjście na świat Aby komunikacja z sieci lokalnej LAN mogła odbywać się na zewnątrz sieci potrzebne jest urządzenie nazywane bramą sieciową GATEWAY. Każdy komputer (karta sieciowa) musi posiadać unikalny adres identyfikujący urządzenie w sieci ADRES IP. Urządzenie zarządzające i sterujące ruchem w sieci to ROUTER. Sieci LAN mogą komunikować się z innymi sieciami LAN za pomocą ROUTERA. Sieci LAN mogą komunikować się z siecią INTERNET za pomocą ROUTERA. 11

12 Komputer w sieci komputerowej Każdy komputer aby mógł pracować w sieci komputerowej musi mieć ustalone następujące informacje: adres IP ( unikalny adres zamieszkania ) maska sieci/podsieci adres IP bramy ( drzwi na świat ) Adres IP bramy musi być zawsze w tej samej sieci, w której znajduje się komputer. Opcjonalnie: adres IP serwera DNS Adres IP serwera DNS nie jest niezbędny do pracy komputera w sieci, ale z całą pewnością ułatwia człowiekowi korzystanie np.: z Internetu 12

13 Adres IPv4 Każdy komputer w sieci Internet ma unikalny adres IP. Adres IPv bitów 8 bitów 8 bitów 8 bitów 32 bity 13

14 Maska sieciowa Maska sieciowa to szablon bitowy (sito) umożliwiający rozdzielenie adresu sieciowego IP na adres sieci oraz adres komputera w sieci Adres IP Maska sieciowa Adres sieci logiczna operacja AND (logiczne i) Adres rozgłoszeniowy

15 Klasy adresów IP Klasa A Klasa B Klasa C 0xxxxxxx zakres 1 oktetu od 0 do 127 Network Host Host Host Standardowa maska xxxxxx zakres 1 oktetu od 128 do 191 Network Network Host Host Standardowa maska xxxxx zakres 1 oktetu od 192 do 223 Network Network Network Host Standardowa maska

16 Sieć lokalna LAN, GATEWAY, ROUTER Sieć LAN /24 INTERNET Sieć LAN /24 John USA GATEWAY / ROUTER ROUTER Małgosia POLSKA GATEWAY / ROUTER ROUTER 16

17 Hosty, serwery, klienci Host jest dowolną maszyną, uczestniczącą w wymianie danych poprzez sieć komputerową, np. poprzez Internet. Rolę hosta określa zainstalowane oprogramowanie oraz funkcje, które realizuje w sieci. Host może być jednocześnie i klientem i serwerem. Serwer udostępnia informacje, świadczy usługi dla klientów np.: e-mai, ftp, WWW Klien t żąda informacji i realizacji usług od serwera 17

18 Polecenia sieciowe w systemie Windows ipconfig zwraca podstawowe informacje o konfiguracji kart sieciowych ipconfig /all zwraca rozszerzone informacje o konfiguracji kart sieciowych ping umożliwia diagnozowanie połączenia sieciowego, działania karty sieciowej ping ping netstat a informacje o połączeniach sieciowych i ich stanie w komputerze tracert umożliwia śledzenie drogi pakietów internetowych tracert Pierwszy host napotkany podczas śledzenia drogi pakietu to GATEWAY. 18

19 Usługi sieciowe, numer portu Usługa sieciowa to usługa świadczona poprzez sieć telekomunikacyjną, a w tym sieć komputerową, w szczególności przez Internet. Usługa sieciowa jest realizowana przez oprogramowanie serwera. Na serwerze może działać wiele różnych usług sieciowych. Numer portu Każda usługa sieciowa posiada przypisany unikalny numer (liczba naturalna z przedziału ). Każdy klient komunikując się z konkretną usługą zna numer portu dla tej usługi. Niektóre numery portów (od 0 do 1023) są określone jako ogólnie znane i zarezerwowane na standardowo przypisane do nich usługi, takie jak np. WWW czy poczta elektroniczna. 19

20 Porty, protokoły TCP i UDP Różne usługi mogą używać tego samego numeru portu, pod warunkiem że korzystają z innego protokołu. Istnieją usługi korzystające jednocześnie z jednego numeru portu i obu protokołów np.: DNS - korzysta z portu 53 za pomocą TCP i UDP jednocześnie. Jedna usługa może korzystać z dwóch różnych portów używanych do innych zadań, np.: FTP Numery portów popularnych usług sieciowych POP3 110, 587 FTP 20,21 DNS 53 SMTP 25 HTTP 80 DHCP 67,68 UDP protokół bezpołączeniowy TCP protokół połączeniowy 20

21 Protokoły TCP i UDP TCP (Transmission Control Protocol ): Zalety: gwarantuje dostarczenie danych w całości bez przemieszania i duplikatów Wady: TCP protokół połączeniowy mniejsza szybkość transmisji danych większa ilość danych do wysłania UDP protokół bezpołączeniowy UDP (User Datagram Protocol ): Zalety: szybkość transmisji danych i brak dodatkowych zadań Wady: brak kontroli przepływu i retransmisji brak gwarancji dostarczenia danych 21

22 Popularne protokoły sieciowe, numery portów TCP/IP (Transmision Control Protocol/Internet Protocol) IPX (Internetwork Packet Exchange ) NetBEUI (NetBIOS Extended User Interface) DHCP (Dynamic Host Configuration Protocol) ICMP (Internet Control Message Protocol) ARP (Address Resolution Protocol) RARP (Reverse Address Resolution Protocol) POP3 (Post Office Protocol version 3 ) IMAP (Internet Message Access Protocol) SMTP (Simple Mail Transfer Protocol) DNS (Domain Name System) HTTP (Hypertext Transfer Protocol) FTP (File Transfer Protocol) 22

23 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; Protokół HTTP $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); (HyperTextTransferProtocol) $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 23 Projektowanie stron WWW

24 Podstawowe elementy składowe WWW Server HTTP (serwer WWW) Pracuje w sposób ciągły udostępniając dokumenty klientom Klient HTTP (przeglądarka WWW) Program odpowiadający za wysyłanie żądań, pobieranie dokumentów ich wizualizację oraz interakcję z użytkownikiem Protokół HTTP Pozwala na wymianę informacji pomiędzy serwerem HTTP a klientem HTTP 24

25 Zadania klienta HTTP Inicjowanie połączenia HTTP Wysyłanie żądań pobierania dokumentów Odbieranie dokumentów i ich wizualizacja Obsługa innych protokołów FTP, Gopher 25

26 Przeglądarka internetowa - klient Przeglądarka aplikacja po stronie klienta. Wyświetla żądane strony WWW oraz umożliwia nawigację. Protokół HTTP nie ma wpływu na to w jaki sposób strona WWW jest interpretowana przez przeglądarkę WWW, ale może pozwolić na wybranie odpowiedniej wersji strony WWW!!! Popularne przeglądarki internetowe: Mozilla Firefox Safari Opera Internet Explorer Google Chrome 26

27 Zadania serwera HTTP Obsługa żądań HTTP Nawiązywanie połączenia Rejestrowanie zdarzeń (log files) Uwierzytelnianie użytkowników i kontrola dostępu (nazwy, hasła) Kryptograficzne szyfrowanie komunikacji sieciowej Automatyczny wybór dokumentu w zależności od preferencji klienta HTTP (np. wersja językowa, format grafiki, itp.) Serwery HTTP: Apache HTTP server Microsoft Internet Information Services Jigsaw HTTP server Sun Java System Web Server 27

28 Protokół HTTP Służy do przesyłania dokumentów udostępnianych przez serwery WWW Pozwala na przesłanie dokumentów tekstowych i binarnych Oparty na protokole TCP (80, alternatywnie 8080) Oparty na modelu żądanie-odpowiedź Wykorzystuje znakowe komendy i komunikaty Po dostarczeniu dokumentu połączenie jest zamykane Bezstanowy, bezsesyjny, transmisja 8-bitowa Obowiązująca wersja: HTTP/1.1 Dokumenty RFC 1945 i RFC

29 HTTP <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>strona WWW</title><style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; Używany do przesyłania stron WWW (np. dokumenty html) Może zawierać obiekty: Pliki tekstowe (HTML, XHTML, TXT, DOC, PDF) Pliki graficzne (JPEG, GIF, PNG) Pliki Audio Aplety JAVA 29

30 Komunikacja HTTP żądanie Ogólna postać żądania HTTP GET /~example/test/ HTTP/1.1 żądany dokument Accept-Language: en-us User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1;.NET CLR ; Media Center PC 5.0;.NET CLR ; InfoPath.1) Pola nagłówkowe Host: <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>strona WWW </title><style type="text/css"> Ciało dokumentu np.: dokument HTML 30

31 Komunikacja HTTP żądanie GET /~example/test/ HTTP/1.1 Rozkaz protokołu HTTP (żądanie) Żądany dokument (wraz z jego lokalizacją na serwerze) Wersja protokołu HTTP obsługiwana przez klienta 31

32 Komunikacja HTTP żądanie Przykładowe pola nagłówkowe Zawierają metadane opisujące żądanie lub odpowiedź HTTP w postaci: nazwa pola: wartość Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash Accept:_language: pl Accept_encoding: gzip, deflate User_Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; GTB5; SLCC1;.NET CLR ;.NET CLR ; InfoPath.2) Host: 32

33 Komunikacja HTTP pola nagłówkowe Accept wykorzystywane przez klienta HTTP do przedstawienia serwerowi HTTP listy obsługiwanych formatów danych. Na podstawie tej listy serwer HTTP dobiera właściwą postać treści dostępnej w wielu formatach. Accept: text/html, text/plain; q=0.5 klient HTTP preferuje dokumenty w formacie "text/html", a jeżeli takie nie są dostępne, to w formacie "text/plain", jednocześnie wybór drugiego formatu będzie oznaczać 50% utratę jakości. W przypadku gdy serwer HTTP nie może dostarczyć treści w żadnym z podanych formatów, zwraca on odpowiedź HTTP z kodem zwrotnym 406 (Not Acceptable). Accept-Charset wykorzystywane przez klienta HTTP do przedstawienia serwerowi HTTP listy obsługiwanych stron kodowych. Składnia pola oraz zachowanie serwera HTTP są analogiczne jak w przypadku pola Accept. 33

34 Komunikacja HTTP odpowiedź serwera HTTP/ OK Date: Fri, 22 Feb :34:18 GMT Server: Apache/ (Red Hat) Last-Modified: Thu, 15 Nov :33:12 GMT Content-Length: Connection: close Content-Type: text/html odpowiedź serwera (kod zwrotny) odpowiedzi rozmiar odpowiedzi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" 34

35 Komunikacja HTTP odpowiedź serwera HTTP/ OK HTTP/1.1 - określa wersję protokołu, którego używa serwer 200 OK - jest kodem zwrotnym przesłanym przez serwer oznaczającym, iż żądanie zostało obsłużone bezbłędnie Kody odpowiedzi z serwera Pierwsza cyfra kodu statusu HTTP określa jedną z pięciu klas odpowiedzi. 1: informacje - nie używana, zarezerwowana dla przyszłych zastosowań, 2: sukces - dane zostały odebrane, zrozumiale i zaakceptowane, 3: zapytanie zwrotne - w celu zakończenia transakcji należy wykonać dodatkowe operacje, 4: błąd klienta - niepoprawna składnia zadania lub zadanie niemożliwe do zrealizowania, 5: błąd serwera - serwer nie zrealizował poprawnego zadania, 35

36 Komunikacja HTTP odpowiedź serwera STATUS OPIS 200 OK. 201 Polecenie POST wykonano poprawnie. 202 Akceptacja zadania. 203 Zrealizowano zadanie GET lub HEAD. 204 Zrealizowano zadanie, lecz brak danych do wysłania. 300 Zasoby odnaleziono w kilku miejscach. 301 Zasoby przeniesiono w inne miejsce. 302 Zasoby przeniesiono tymczasowo. 304 Zasoby nie zostały zmodyfikowane. 36

37 Komunikacja HTTP odpowiedź serwera STATUS OPIS 400 Niepoprawne zadanie klienta. 401 Zadanie wymaga autoryzacji. 402 Za realizacje zadania jest wymagana oplata. 403 Dostęp do zasobów wzbroniony. 404 Nie znaleziono zasobów. 405 Niedozwolona metoda korzystania z zasobów. 406 Nieakceptowany tryb zasobów. 410 Zasoby niedostępne. 37

38 Komunikacja HTTP odpowiedź serwera STATUS 500 Błąd usługi wewnętrznej. OPIS 501 Metoda niezaimplementowana. 502 Niewłaściwa bramka lub przeciążony serwer Usługa niedostępna lub przekroczony czas oczekiwania na odpowiedz bramki. Przekroczony czas oczekiwania na odpowiedz pomocniczej bramki lub serwera. 38

39 Komunikacja HTTP odpowiedź serwera Ciałem komunikatu odpowiedzi jest żądany dokument. Najczęściej zawiera żądane pliki. Powiązane są z nim pola w wierszach nagłówkowych: Content-Type deklaruje format pliku stanowiącego ciało np.: Content-Type: text/html format HTML Content-Length deklaruje wielkość pliku w bajtach np.: Content-Length: Symbole formatów plików definiuje specyfikacja MIME (RFC 1521), image/gif-plik graficzny w formacie GIF, application/zip -plik skompresowany w formacie ZIP. Odpowiedź HTTP może zawierać tylko jeden załączony plik/dokument!!! 39

40 Komunikacja HTTP autoryzacja Protokół HTTP obsługuje prostą metodę uwierzytelniania użytkowników nazwaną Basic Authentication. Jeżeli serwer HTTP wymaga uwierzytelnienia użytkownika, wtedy odpowiedź na żądanie HTTP zawiera kod zwrotny 401 (AuthorizationRequired), oznaczający, że klient HTTP powinien zażądać od użytkownika wprowadzenia danych (nazwy i hasła). Klient HTTP pobiera od użytkownika jego nazwę i hasło, łączy je w jeden łańcuch znakowy, koduje za pomocą algorytmu Base64, a następnie zapisuje w polu nagłówka Authorization ponowionego żądania HTTP. Jeżeli wynik weryfikacji przez serwer HTTP jest negatywny, serwer HTTP ponownie przesyła kod zwrotny 401 (AuthorizationRequired) - operacja ta ponawiana jest aż do skutku. Zamknięcie okna uwierzytelniania powoduje brak uwierzytelnienia i wyświetlenie u klienta dokumentu przesyłanego przez serwer w odpowiedzi na nieprawidłowe żądanie klienta. Raz wprowadzone przez użytkownika dane uwierzytelniające są przez klienta HTTP automatycznie dołączane do kolejnych żądań HTTP. 40

41 HTTP Basic Authentication Czy użyte kodowanie jest bezpieczne? BASE 64 - Kodowanie opracowane na potrzeby poczty elektronicznej. Zapisuje ciąg bajtów w postaci łańcuch znaków. Sposób kodowania: Przedstawienie znaków w postaci kodów ASCI Złożenie danych w jeden ciąg bitów Podzielenie danych na 6 bitowe odcinki Przekształcenie odcinków na postać dziesiętną Zastąpienie liczby znakiem z tablicy Base64. Wniosek: Przekształcenie jednoznaczne i odwracalne!!! 41

42 HTTP Basic Authentication K o t A l i S Q W x p Authorization: Basic S290QWxp 42

43 HTTP Basic Authentication Jaka to treść? QWxhIG1hIGtvdGE= SGFzxYJvIGplc3QgYmFyZHpvIHdhxbxueW0gZWxlbWVudGVtIGJlenBpZWN6Zc WEc3R3YQ== Tabela kodów ASCI: Tabela kodów Base16, Base32, and Base64 (RFC 3548): 43

44 HTTP Base64 Konwerter Base64 on-line dostępny jest pod adresem: 44

45 Zakończenie 45