<?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)
<?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
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 2 50 2 50 100 5 <36 ndst 36-39 dst 40-43 dst+ 44-50 db 51-54 db+ 55-60 bdb 3
Kontakt z prowadzącym, konsultacje e-mail: jaymz@mat.umk.pl tematy wysyłanych do mnie e-maili proszę ZAWSZE poprzedzać tekstem WNEiZ, np.: WNEiZ pytanie o zaliczenie przedmiotu KONSULTACJE (po wcześniejszym umówieniu się przez e-mail) Wydział Matematyki i Informatyki UMK ul. Chopina 12/18, pokój C102 Materiały dydaktyczne: http://www.mat.umk.pl/~jaymz (zakładka materiały dydaktyczne) 4
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
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
<?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
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
Prosta sieć lokalna LAN (Local Area Network) Każda karta sieciowa posiada unikalny adres MAC (adres sprzętowy, adres fizyczny) 00-0C 78-4B - 28-9A identyfikator producenta numer urządzenia Małgosia Jaś http://standards.ieee.org/regauth/oui/oui.txt 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 - 28-9A identyfikator producenta numer urządzenia Małgosia Jaś Krzyś http://standards.ieee.org/regauth/oui/oui.txt 1 0
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
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
Adres IPv4 Każdy komputer w sieci Internet ma unikalny adres IP. Adres IPv4 131.122.16.203 10000011 01111010 00010000 11001011 8 bitów 8 bitów 8 bitów 8 bitów 32 bity 13
Maska sieciowa Maska sieciowa to szablon bitowy (sito) umożliwiający rozdzielenie adresu sieciowego IP na adres sieci oraz adres komputera w sieci. 131.122.16.203 Adres IP Maska sieciowa Adres sieci 10000011 01111010 00010000 11001011 logiczna operacja AND (logiczne i) 11111111 11111111 00000000 00000000 255. 255. 0. 0 10000011 01111010 00000000 00000000 131. 122. 0. 0 Adres rozgłoszeniowy 10000011 01111010 11111111 11111111 131. 122. 255. 255 14
Klasy adresów IP Klasa A Klasa B Klasa C 0xxxxxxx zakres 1 oktetu od 0 do 127 Network Host Host Host Standardowa maska 255.0.0.0 11111111 00000000 00000000 00000000 10xxxxxx zakres 1 oktetu od 128 do 191 Network Network Host Host Standardowa maska 255.255.0.0 11111111 11111111 00000000 00000000 110xxxxx zakres 1 oktetu od 192 do 223 Network Network Network Host Standardowa maska 255.255.255.0 11111111 11111111 11111111 00000000 15
Sieć lokalna LAN, GATEWAY, ROUTER Sieć LAN 212.77.100.0/24 INTERNET Sieć LAN 158.75.10.0/24 John USA 212.77.100.1 GATEWAY / ROUTER ROUTER Małgosia POLSKA 158.75.10.1 GATEWAY / ROUTER ROUTER 16
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
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 www.wp.pl ping 212.77.100.101 netstat a informacje o połączeniach sieciowych i ich stanie w komputerze tracert umożliwia śledzenie drogi pakietów internetowych tracert www.google.com Pierwszy host napotkany podczas śledzenia drogi pakietu to GATEWAY. 18
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 0 65535). 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
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
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
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
<?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
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
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
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
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
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 2616 28
HTTP <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <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
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 2.0.50727; Media Center PC 5.0;.NET CLR 3.0.04506; InfoPath.1) Pola nagłówkowe Host: www.example.edu <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <title>strona WWW </title><style type="text/css"> Ciało dokumentu np.: dokument HTML 30
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
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 2.0.50727;.NET CLR 3.0.04506; InfoPath.2) Host: www.torun.pl 32
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
Komunikacja HTTP odpowiedź serwera HTTP/1.1 200 OK Date: Fri, 22 Feb 2008 16:34:18 GMT Server: Apache/2.0.52 (Red Hat) Last-Modified: Thu, 15 Nov 2007 19:33:12 GMT Content-Length: 15137 Connection: close Content-Type: text/html odpowiedź serwera (kod zwrotny) odpowiedzi rozmiar odpowiedzi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 34
Komunikacja HTTP odpowiedź serwera HTTP/1.1 200 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
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
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
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. 503 504 Usługa niedostępna lub przekroczony czas oczekiwania na odpowiedz bramki. Przekroczony czas oczekiwania na odpowiedz pomocniczej bramki lub serwera. 38
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: 15173 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
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
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
HTTP Basic Authentication K o t A l i 75 111 116 65 108 105 010010 11 0110 1111 01 110100 010000 01 0110 1100 01 101001 010010 110110 111101 110100 0100000 010110 110001 101001 18 54 61 52 16 22 49 41 S 2 9 0 Q W x p Authorization: Basic S290QWxp 42
HTTP Basic Authentication Jaka to treść? QWxhIG1hIGtvdGE= SGFzxYJvIGplc3QgYmFyZHpvIHdhxbxueW0gZWxlbWVudGVtIGJlenBpZWN6Zc WEc3R3YQ== Tabela kodów ASCI: http://pl.wikipedia.org/wiki/tablica_ascii Tabela kodów Base16, Base32, and Base64 (RFC 3548): http://www.ietf.org/rfc/rfc3548.txt 43
HTTP Base64 Konwerter Base64 on-line dostępny jest pod adresem: http://www.base64decode.org/ 44
Zakończenie http://www.mat.umk.pl/~jaymz/ 45