docProjektowanie i konstrukcja systemów rozproszonych (SUM)
download 
Reklamacja Transkrypt
Projektowanie i konstrukcja systemów rozproszonych (SUM)
Projektowanie i konstrukcja systemów rozproszonych (SUM) Skrypt do ćwiczeń laboratoryjnych Cezary Sobaniec v2.1 2012-12-13 Politechnika Poznańska Instytut Informatyki Spis treści Wstęp 2 1 HTML 3 2 CSS 8 2.1 Zadania podstawowe . . . . . . . . . . . . . . . . . . . . . . . 8 2.2 Zadania zaawansowane . . . . . . . . . . . . . . . . . . . . . . 9 2.3 Projekt I . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 3 HTTP 14 4 CGI 18 5 PHP 21 5.1 PHP jako język programowania . . . . . . . . . . . . . . . . . . . 21 5.2 Zastosowania PHP na serwerach WWW . . . . . . . . . . . . . . . . 22 5.3 Projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 6 XML 25 7 XSLT 27 8 XSL-FO 29 Wstęp Niniejszy skrypt przeznaczony jest do ćwiczeń laboratoryjnych z przedmiotu Projektowanie i konstrukcja systemów rozproszonych dla studentów studiów uzupełniających magisterskich. Jest on dostępny w sieci w postaci dokumentu PDF: http://www.cs.put.poznan.pl/csobaniec/edu/piksr/sum/piksr.pdf Uwagi ogólne 1. Przykłady zamieszczone w skrypcie mogą być kopiowane do edytorów tekstowych. Podczas kopiowania z niektóre znaki mogą zostać wklejone w niepoprawny sposób — są zastępowane innymi znakami Unicode. Dotyczy to m.in. apostrofów, cudzysłowów i myślników. Należy je po skopiowaniu usunąć i wstawić ponownie korzystając z klawiatury. 2. Do zapisu poleceń wydawanych w środowisku unix przyjęto następującą konwencję. Znak „#” na początku linii symbolizuje znak zachęty interpretera poleceń. Pogrubiona czcionka oznacza komendy/tekst wprowadzany przez użytkownika. Poniższy przykład: # echo przykład przykład oznacza wpisanie komendy echo przykład, która powoduje wypisanie napisu „przykład” na ekranie. 3. Do testów można wykorzystać serwer unixlab. Logujemy się do niego protokołem SSH na swoje konto (infXXXXXX). W systemach uniksowych można to uzyskać komendą ssh: # ssh [email protected] W systemach Windows można do zdalnej pracy zastosować program PuTTY. Kopiowanie plików między systemem lokalnym a zdalnym serwerem unixlab można zrealizować w systemach uniksowych komendą scp, np.: # scp index.html [email protected]:public_html/ W systemach Windows można wykorzystać darmowy program WinSCP. 1 HTML 1. Zaloguj się do serwera Unix. Przejdź do podkatalogu public_html i utwórz tam plik index. html z dowolną zawartością. Następnie uruchom lokalnie przeglądarkę i wpisz adres URL: http://sirius.cs.put.poznan.pl/~infXXXXX/ Uwaga: Uzyskanie dostępu do plików z katalogu public_html poprzez serwer WWW wymaga następujących praw dostępu: a) prawo x dla pozostałych (other) użytkowników do katalogu domowego, b) prawa rx dla pozostałych użytkowników do katalogu public_html, c) prawo r dla pozostałych użytkowników do pliku index.html. 2. Utwórz poprawny dokument HTML w pliku index.html, np.: <html> <head> </head> <body> <h1>Hello </body> </html> world!</h1> 3. Korzystając z serwisu http://validator.w3.org dokonaj walidacji poprawności dokumentu HTML. a) Dodaj deklarację typu dokumentu na początku pliku: <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01//EN” ”http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”> b) Dodaj tytuł dokumentu: <head> ... <title>Tytul dokumentu</title> ... </head> 4 1 HTML 4. Wstaw do dokumentu następujące elementy blokowe: a) akapity tekstowe: <p>...</p> z przełamaniem linii znacznikiem <br>. b) listy nienumerowane: <ul> <li>Element pierwszy</li> <li>Element drugi</li> </ul> c) listy numerowane: <ol> <li>Element pierwszy</li> <li>Element drugi</li> </ol> d) listy de nicyjne: <dl> <dt>Rower</dt> <dd>Pojazd jednosladowy</dd> <dt>Samochod</dt> <dd>Pojazd wielosladowy</dd> </dl> e) nagłówki: <h1>...</h1> <h2>...</h2> <h3>...</h3> f) teksty preformatowane: <pre> ... </pre> 5. Sformatuj fragmenty tekstów znacznikami wierszowymi: <b>...</b> <i>...</i> <strong>...</strong> <em>...</em> <tt>...</tt> <code>...</code> 6. Przećwicz zagnieżdżanie list. 7. Wstaw tabelkę do dokumentu: <table border=”1”> <tr> <td> A </td> <td> B </td> </tr> <tr> 5 1 HTML <td> C </td> <td> D </td> </tr> </table> 8. Przećwicz łączenie komórek za pomocą atrybutów colspan i rowspan: <table border=”1”> <tr> <td colspan=”2”> A </td> </tr> <tr> <td> C </td> <td> D </td> </tr> </table> Do układania tekstu w komórkach wykorzystaj atrybuty znacznika <td>: align (left, right, center) i valign (top, bottom, middle). 9. Stwórz drugi dokument HTML i dodaj do pierwszego odnośnik: <a href=”inny.html”>Odnosnik do drugiego dokumentu</a> 10. Utwórz odnośnik do miejsca w bieżącym dokumencie: <p id=”etykieta”>...</p> ... <p>Idz do <a href=”#etykieta”>poczatku</a>.</p> 11. Dodaj rysunek do dokumentu: <img src=”globe.png” alt=”Kula ziemska” align=”left”> 12. Zde niuj standard kodowania dla dokumentu w stylu HTML4: <head> ... <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> ... </head> lub w stylu HTML5: <meta charset=utf-8”> 13. Dodaj komentarz do dokumentu: <!-- To jest komentarz --> 14. Przetestuj działanie następujących encji nazwanych, wstawiając je do dokumentu: © & € " > ± • ™ “ < ½ † Ø ” ° × ‰ ÷ „ Sprawdź również poniższe encje nienazwane: — ― 6 1 HTML 15. Przetestuj działanie programu tidy sprawdzającego poprawność dokumentu HTML: # tidy -q -e -utf8 index.html line 4 column 3 - Warning: inserting missing ’title’ element line 26 column 7 - Warning: <table> lacks ”summary” attribute Zastosuj program tidy do uporządkowania zawartości dokumentu HTML: # tidy -i -utf8 index.html 2> /dev/null <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> ... 16. Obejrzyj zawartość dokumentu w różnych przeglądarkach porównując sposób prezentacji. Wykorzystaj Firefox, Chrome, Opera, Konqueror. 17. Przygotuj stronę WWW, która będzie prezentować się jak przykład z Rys. 1.1. Materiały Kurs HTML http://webmaster.helion.pl/kurshtml/. Kurs jest dostępny również w postaci gotowej do pobrania w całości z adresu http://webmaster.helion.pl/kurshtml/kurshtml.zip. Rys. 1.1: Pierwszy dokument HTML 2 CSS Ćwiczenia poniższe najlepiej wykonać korzystając jednocześnie z kilku przeglądarek internetowych i porównując sposoby interpretacji odpowiednich zapisów. Można w tym celu wykorzystać przeglądarki: Google Chrome, Mozilla Firefox, Opera, w systemie Windows Internet Explorer, a w systemie Linux — Konqueror. 2.1 Zadania podstawowe 1. Przećwicz różne metody łączenia stylu z dokumentem HTML (wewnątrz dokumentu, zewnętrzny plik CSS, atrybut style) wykorzystując regułę mody kującą kolor tekstu, np.: H1 { color: red } Docelowo styl powinien być zapisywany w zewnętrznym pliku CSS. 2. Zmody kuj formę prezentacji wybranych fragmentów tekstów mody kując krój czcionki (własność font-family), jej wielkość (font-size), kolor (color), styl (font-style), wariant (font-variant), grubość (font-weight) i podkreślenie (text-decoration). De niując wielkość czcionki użyj różnych jednostek: logicznych (small, medium), punktowych (np. 12pt), bezwzględnych (np. 12px). Oto przykład reguły CSS: p { color: #00FF00; font-size: 14pt; font-style: italic; font-variant: small-caps; font-weight: bold; text-decoration: underline; } /* lub oblique */ /* inne: overline, line-through */ 3. Zwery kuj zgodność przygotowywanego stylu ze specy kacją korzystając z usługi wery kacyjnej pod adresem http://jigsaw.w3.org/css-validator/. Jako parametr należy podać adres URL pliku ze specy kacją stylu CSS. 4. Zde niuj styl dla formatowania znacznikiem <span class=”big”> powodując zwiększenie czcionki bazowej o 20%. Przećwicz działanie znacznika wewnątrz akapitów tekstowych i nagłówków różnego poziomu (<h1>, <h2> itd.), np. dla następującego fragmentu dokumentu HTML: <h1>Wprowadzenie do <span class=”big”>Informatyki</span></h1> 2.2 Zadania zaawansowane 9 <p>Pierwszy akapit <span class=”big”>tekstowy</span>. </p> 5. Przetestuj wyrównywanie tekstu w poziomie (własność text-align). 6. Określ kolory wypełnienia (background-color) dla elementów <ol> i <li>, a następnie przetestuj działanie własności modelu blokowego dotyczących wypełnienia (padding), ramek (border) i marginesów (margin), np.: li { background-color: #FF8080; padding: 2ex 1em; border: 1pt solid blue; margin: 1ex 0.5em; } Przetestuj de niowanie własności modelu blokowego niezależnie dla każdej krawędzi (własności z su ksami -top, -bottom, -left, -right). 7. Zde niuj sposób prezentacji wybranych akapitów tekstowych w ramkach o ustalonej szerokości (własności width, min-width i max-width), z tłem i pustym obramowaniem. Akapity tego typu powinny być oblewane tekstem z lewej strony (własność float). 8. Przetestuj pozostałe własności prezentacyjne dla tekstów: odstępy między znakami (letterspacing), odstępy między słowami (word-spacing), transformacje do dużych i małych liter (text-transform). 9. Zde niuj tło dla wybranego elementu blokowego w postaci wielokrotnie powtarzanego rysunku. 10. Zaprezentuj wewnątrz zwykłego akapitu tekstowego fragment programu w języku C, formatując go tak, jak w pliku źródłowym i wytłuszczając słowa kluczowe. 11. Przećwicz importowanie ustawień z zewnętrznych źródeł korzystając z dyrektywy @import, np.: @import url(inny.css); 2.2 Zadania zaawansowane 1. Napisz reguły formatujące dla następujących fragmentów kodu HTML: a) <h1 id=”wstep”>...</h1> b) <p lang=”en”>...</p> 2. Uzupełnij rozwiązanie zadania 4 z grupy zadań podstawowych tak, aby wielokrotne (zagnieżdżone) użycie znacznika <span class=”big”> nie powodowało dalszego zwiększania rozmiaru czcionki. 3. Napisz regułę zmieniającą czcionkę wewnątrz akapitów i list występujących w tabelach na czcionkę bezszeryfową, mniejszą o 20% od czcionki bazowej i z mniejszą interlinią (lineheight). 4. Napisz reguły dodające wcięcie w pierwszej linii akapitów tekstowych (text-indent) we wszystkich akapitach tekstowych oprócz tych, które następują zaraz za nagłówkiem dowolnego poziomu. 2.2 Zadania zaawansowane 10 5. Wykorzystując pseudoklasę :hover stwórz odnośniki do innych dokumentów zmieniające swój wygląd po najechaniu myszką. Utwórz formularz, którego pola będą wyróżniane po wybraniu. 6. Stosując znacznik <div> zmody kuj prezentację kilku kolejnych akapitów tekstowych. Przykładowy fragment kodu HTML: <div> <p>Akapit pierwszy... </p> <p>Akapit drugi... </p> <p>Akapit trzeci... </p> </div> 7. Utwórz regułę powiększającą pierwszą literę (pseudoklasa :first-letter) w pierwszym akapicie tekstowym każdego rozdziału. Litera ta powinna rozciągać się na 3 kolejne wiersze tekstu i powinna być oblewana tym tekstem z prawej strony. 8. Dodaj przed każdym akapitem tekstowym klasy notatka napis „Uwaga” w kolorze czerwonym. 9. Przećwicz pozycjonowanie elementów (position). Dodaj do dokumentu menu wyświetlane zawsze w prawym górnym rogu okna przeglądarki. 10. Zde niuj złożony układ strony (nagłówek, stopka, margines) bez stosowania tabel, np.: <html> <head> <title>Układ strony z wykorzystaniem elementów DIV</title> <style> div.header { background-color: #C0C0C0; } div.menu { background-color: #E0E0E0; width: 15%; min-height: 30em; float: left; } div.main { width: 85%; float: right; } div.footer { background-color: #C0C0C0; clear: both; } </style> </head> <body> <div class=”header”> To jest nagłówek strony. </div> <div class=”menu”> To jest menu. </div> <div class=”main”> To jest główna treść dokumentu. </div> 11 2.3 Projekt I <div class=”footer”> To jest stopka strony. </div> </body> </html> 11. Zde niuj odrębne reguły dla wydruku strony, rede niując krój i wielkość czcionki bazowej, oraz wyłączając na wydruku prezentację wybranych elementów dokumentu (display). @media print { body { font-size: 10pt; } div.footer { display: none; } } 2.3 Projekt I Przygotuj dokument HTML w standardzie HTML 4.01 wersja strict, korzystający ze styli kaskadowych CSS w celu opisania prezentacji dokumentu. Dokument powinien spełniać następujące wymagania: 1. Styl dla dokumentu powinien być zapisany w zewnętrznym pliku. 2. Układ dokumentu powinien być taki jak zaznaczono na Rys. 2.1 za pomocą linii przerywanych. Układ ten należy uzyskać de niując pojedynczą tabelkę obejmującą cały dokument lub pozycjonując kilka elementów <div>. 3. Menu po lewej stronie dokumentu powinno zawierać odnośniki do wybranych zewnętrznych stron WWW. Treść tej komórki powinna być wyrównana w pionie do góry. 4. Treść stopki na dole strony powinna być wyśrodkowana przez całą szerokość okna. Należy użyć mniejszej czcionki, bezszeryfowej o kolorze szarym. 5. Cały dokument powinien mieć ustawione tło jednolitego koloru. 6. Tytuł dokumentu powinien znajdować się na górze, wyśrodkowany, z odstępami od góry i od dołu, oddzielony od reszty tekstu linią, wypisany czcionką szeryfową, pogrubioną w kolorze brązowym. 7. W treści dokumentu powinny się znaleźć 2 rysunki. Jeden z nich powinien być oblewany tekstem z prawej strony, a drugi wyśrodkowany. 8. W tekście powinien znaleźć się akapit tekstowy klasy „uwaga”, prezentowany w czarnej ramce o grubości 1pt, oddalonej od tekstu pionowo o 1ex i poziomo o 2em, wypełnionej kolorem błękitnym, z tekstem w kolorze czerwonym. Ramka powinna zajmować 70% szerokości okna i być wyśrodkowana. Czcionka wewnątrz ramki powinna być bezszeryfowa i pochylona. 9. Wewnątrz dokumentu powinny znajdować się 2 rozdziały, których tytuły powinny być umieszczone w znaczniku <h1>. Wewnątrz rozdziałów powinny się znajdować po 2 sekcje oznaczone przez <h2>. 10. Zwykłe akapity tekstowe powinny mieć wcięcie w pierwszej linii tekstu. Nie dotyczy to akapitów występujących zaraz po tytułach rozdziałów i podrozdziałów. W dokumencie HTML 12 2.3 Projekt I akapity powinny być umieszczone w zwykłych znacznikach <p> bez użycia atrybutu class. 11. W jednym z rozdziałów należy umieścić poniższy program w języku C, zaprezentowany w ramce, z wytłuszczonymi słowami kluczowymi, prezentowany czcionką o stałej szerokości. #include <stdio.h> #include <string.h> int main() { int i, x=0; char buf[] = ”Przykład”; char *ptr = buf; for(i=0; i<strlen(buf); i++) { ptr = &buf[i]; if (*ptr > 0) x += *ptr; } printf(”%d\n”, x); return 0; } 12. W prawym górnym rogu okna przeglądarki powinna się znaleźć mała ramka pozycjonowana w sposób ustalony (fixed), zawierająca dowolny tekst (np. reklama). Ramka powinna znajdować się w odległości 10px od górnej i 10px od prawej krawędzi okna przeglądarki. Materiały Specy kacja CSS2 Specy kacja standardu CSS2 jest dostępna pod adresem: http://www.w3.org/TR/CSS2/. Specy kacja zawiera wygodny w użyciu indeks wszystkich własności zde niowanych w CSS2. Jest on dostępny pod adresem http://www.w3.org/TR/CSS2/propidx.html. Kurs HTML Wspomniany w poprzednim rozdziale kurs HTML w języku polskim zawiera rozdział poświęcony standardowi CSS: http://webmaster.helion.pl/kurshtml/css2/index.htm. Rozdział ten dostępny jest w postaci gotowej do pobrania pod adresem http://webmaster.helion.pl/kurshtml/ css2/css2guid.zip. Tytul dokumentu MENU <img> Uwaga: Rozdzial 1 Sekcja 1.1 <img> Rys. 2.1: Projekt HTML + CSS Reklama 3 HTTP 1. Przetestuj działanie programu netcat w roli klienta protokołów sieciowych na przykładzie usług echo (port 7) i daytime (port 13): # netcat unixlab echo Ala Ala ma ma kota kota ^D # netcat unixlab daytime 27 MAR 2006 11:33:30 CEST 2. Przetestuj działanie lokalnego serwera z wykorzystaniem programu netcat: # netcat -l 1234 Połącz się z uruchomionym serwerem w innym oknie terminala również korzystając z programu netcat: # netcat localhost 1234 Ala ma kota Przećwicz wpisywanie danych zarówno po stronie klienta jak i serwera. 3. Przećwicz interakcję z serwerem WWW używając prostego zapytania z protokołu HTTP/0.9: # netcat www.put.poznan.pl http GET / <html> ... Pobierz w ten sposób plik ze stylem CSS z serwera. 4. Przećwicz interakcję z serwerem WWW używając zapytań HTTP w wersji 1.0 i 1.1, np.: # netcat sirius 80 GET / HTTP/1.0 Host: sirius.cs.put.poznan.pl ← pusta linia 15 3 HTTP HTTP/1.1 200 OK Date: Mon, 27 Mar 2006 10:34:25 GMT Server: Apache/2.0.54 (Linux) Accept-Ranges: bytes Transfer-Encoding: chunked Content-Type: text/html 248 <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”> ... Uwaga: zapytania przesyłane do serwera można zapisać do pliku tekstowego i później wielokrotnie wykorzystywać. Jeżeli zawartość pliku get.txt jest następująca: GET / HTTP/1.0 Host: sirius.cs.put.poznan.pl <pusta linia> to wykonanie komendy # cat get.txt | netcat -q 1 sirius 80 spowoduje pobranie dokumentu z serwera tak, jak w poprzednim punkcie1 . 5. Przećwicz działanie serwerów wirtualnych podając różne wartości w polu Host: # netcat lindev 80 GET / HTTP/1.0 Host: lindev.cs.put.poznan.pl ... # netcat lindev 80 GET / HTTP/1.0 Host: exam.cs.put.poznan.pl ... 6. Zasymuluj pracę serwera WWW korzystając z programu netcat: # netcat -l 8080 Po uruchomieniu serwera wpisz w przeglądarce adres http://localhost:8080 i odczytaj nagłówek żądania: GET / HTTP/1.0 Host: localhost:8080 User-Agent: Mozilla/5.0 Gecko/20060126 Firefox/1.5.0.1 Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9, text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: en Accept-Encoding: gzip,deflate Accept-Charset: UTF-8,* Keep-Alive: 300 Connection: keep-alive Odeślij odpowiedź do przeglądarki formułując poprawny nagłówek odpowiedzi i treść dokumentu, np.: 1 Przełącznik -q włącza oczekiwanie na odpowiedź z serwera po zakończeniu wprowadzania danych na standardowym wejściu. 16 3 HTTP HTTP/1.0 200 ok Content-Type: text/plain Ala ma kota ^D 7. Uruchamiając własny serwer odczytaj nagłówek żądania wysłany przez przeglądarkę po wpisaniu adresu http://localhost:8080/ab/cd/go.html?x=10. 8. Analogicznie jak w zadaniu 6 wygeneruj dla przeglądarki dokument HTML zwracając w polu Content-Type typ text/html. 9. Dokonaj przekierowania przeglądarki po połączeniu z lokalnym serwerem na adres http:// www.cs.put.poznan.pl: HTTP/1.1 302 Przekierowanie Location: http://www.cs.put.poznan.pl Content-Length: 0 10. Przećwicz działanie preferencji językowych odwołując się do serwera http://www.debian.org z różnymi kon guracjami. Wykonaj zapytanie do lokalnego serwera (uruchomionego komendą netcat) i sprawdź jak kon guracja preferencji językowych odzwierciedlana jest w wysyłanych w protokole HTTP żądaniach. 11. Stwórz na serwerze unixlab w swoim katalogu public_html wielojęzyczny dokument HTML o nazwie lang.html i odwołaj się do niego podając w przeglądarce adres http://sirius.cs.put. poznan.pl/~infXXXX/lang.html. Na serwerze powinny zostać utworzone oddzielne pliki lang. html.XX dla każdego języka, gdzie XX jest kodem języka, np.: en — angielski, de — niemiecki, fr — francuski, po — polski. 12. Przećwicz obsługę ciasteczek w przeglądarce. W tym celu skon guruj przeglądarkę Firefox tak, aby ostrzegała o przyjęciu nowego ciasteczka. Należy tego dokonać poleceniem Edit ▷ Preferences. W zakładce Privacy w punkcie History wybierz „Use custom settings for history” i opcję „Keep until” ustaw na „ask me every time”. Następnie uruchom lokalny serwer komendą netcat, połącz się z nim w przeglądarce (tak jak w zadaniu 6) i odpowiedz wysyłając: HTTP/1.1 200 ok Content-Type: text/plain Set-Cookie: x=10 Ala ma kota ^D Po odebraniu nagłówka odpowiedzi przeglądarka powinna zapytać się o potwierdzenie przyjęcia ciasteczka. Po zakończonej interakcji należy ponownie uruchomić serwer i odwołać się do niego w przeglądarce. Nowe zapytanie powinno zawierać zapamiętane ciasteczko. 13. Przećwicz działanie mechanizmu uwierzytelniania w protokole HTTP. Uruchom w tym celu lokalny serwer, połącz się z nim w przeglądarce i wyślij następującą odpowiedź: HTTP/1.1 401 Brak hasła WWW-Authenticate: Basic realm=”tajne” Content-Length: 0 Przeglądarka powinna spytać się o nazwę użytkownika i hasło. Po wpisaniu tych danych nastąpi ponowne odwołanie do serwera zawierające pole Authorization, np.: Authorization: Basic d29qdGVrOmdvc2lhMTI= Przesłane dane zakodowane są w standardzie Base64 i można je zdekodować komendą mi- 17 3 HTTP mencode: # printf ”d29qdGVrOmdvc2lhMTI=” | mimencode -u wojtek:gosia12 14. Sprawdź mechanizm przesyłania pola Referer w zapytaniach kierowanych przez przeglądarki. W tym celu utwórz dokument HTML i dodaj do niego odnośnik do lokalnego serwera (adres http://localhost:8080). 15. Skon guruj przeglądarkę do pracy z serwerem pośredniczącym. W przypadku przeglądarki Firefox należy wybrać z menu Edit ▷ Preferences zakładkę Advanced ▷ Network i wybrać przycisk Settings, gdzie należy wpisać poniższe parametry: (*) Manual proxy configuration HTTP Proxy: sirius Port: 3128 16. Wyślij pełne zapytanie do serwera proxy i przeanalizuj nagłówek odpowiedzi przy pierwszym i kolejnych odwołaniach w przypadku dokumentów statycznych i dynamicznych, np.: GET http://www.cs.put.poznan.pl HTTP/1.1 Host: www.cs.put.poznan.pl HTTP/1.0 200 OK Date: Mon, 27 Mar 2006 12:45:04 GMT Server: Apache/2.0.54 (Linux) Last-Modified: Fri, 17 Dec 2004 11:56:04 GMT ETag: ”680e-134-7485fd00” Accept-Ranges: bytes Content-Length: 308 Content-Type: text/css X-Cache: MISS from sirius.cs.put.poznan.pl X-Cache-Lookup: MISS from sirius.cs.put.poznan.pl:3128 Proxy-Connection: close 4 CGI 1. W katalogu public_html stwórz plik o nazwie hello.cgi zawierający następującą treść: #!/bin/bash echo ”Content-Type: text/plain” echo echo ”Hello world!” Następnie dodaj prawo wykonywania dla tego pliku: # chmod +x hello.cgi i odwołaj się do niego poprzez przeglądarkę, wpisując adres URL http://sirius.cs.put.poznan.pl/ ~infXXXX/hello.cgi. 2. Wyświetl listę zmiennych środowiskowych widzianych przez skrypt dodając do niego wywołanie komendy env. Sprawdź jak zmienia się zawartość zmiennej QUERY_STRING dla następujących adresów URL: http://sirius/~infXXXX/hello.cgi?kolor http://sirius/~infXXXX/hello.cgi?kolor=czerwony http://sirius/~infXXXX/hello.cgi?kolor=żółty http://sirius/~infXXXX/hello.cgi?kolor=czerwony&plik=test.txt 3. Bezpieczeństwo. Sprawdź działanie skryptu zawierającego zlecenie: eval $QUERY_STRING po odwołaniu się do niego poprzez adres: http://sirius/~infXXXX/hello.cgi?date http://sirius/~infXXXX/hello.cgi?finger 4. Przygotuj skrypt CGI, który wyprodukuje dokument HTML. W dokumencie powinna być prezentowana bieżąca godzina w formacie HH:MM:SS. 5. Napisz skrypt man.cgi wyświetlający stronę pomocy systemowej dla zadanego hasła w formacie HTML, stosując komendę man, np.: man -Thtml ls Odwołanie do skryptu powinno wyglądać np. tak: http://sirius/~infXXXX/man.cgi?mkdir 19 4 CGI 6. Stwórz dokument HTML zawierający formularz odwołujący się do wyszukiwarki Google. 7. Odwołaj się poprzez formularz HTML do swojego skryptu CGI przesyłając dane metodą POST. Skrypt powinien wyświetlić przekazane argumenty w postaci zakodowanej (tak jak w zmiennej QUERY_STRING). 8. Stwórz skrypt CGI w języku C korzystając z biblioteki cgi-util. Dokumentacja do tej biblioteki jest dostępna w pliku /usr/share/doc/packages/cgi-util/README.txt. Skrypt powinien generować dokument HTML składający się z n linii (n jest parametrem skryptu) powtarzających napis przekazany parametrem napis. Kompilację programu można zrealizować następująco: # gcc -o prg.cgi prg.c -lcgi-util Przykładowe odwołanie do skryptu metodą GET: http://sirius/~infXXXX/prg.cgi?n=10&napis=CGI 9. Stwórz skrypt w języku C wyświetlający wszystkie elementy listy wyświetlanej na formularzu HTML. Lista powinna umożliwiać wybór wielu pozycji. 10. Stwórz licznik odwołań do strony. Stan licznika powinien być zapisywany do zewnętrznego pliku aktualizowanego przy każdym wywołaniu skryptu. Implementację można przeprowadzić w interpreterze Bourne’a lub w języku C. 11. Zrealizuj przekierowanie przeglądarki klienta poprzez odpowiednią dynamiczną odpowiedź skryptu CGI. 12. Stwórz skrypt, który będzie zwracał różną treść w zależności od nazwy serwera wirtualnego lub adresu IP klienta. 13. Przetestuj działanie skryptu CGI w języku Python: #!/usr/bin/python import cgi print ”Content-type: text/plain\n” form = cgi.FieldStorage() if ’imie’ in form: print ’imie=’ + form[’imie’].value print ’Inne argumenty:’ for f in form: print f + ’=’ + form[f].value 14. Przetestuj działanie skryptu w języku Python pobierającego dane z bazy danych. Wykorzystaj do tego celu testową bazę danych MySQL o nazwie webdb dostępną dla użytkownika piksrs. W bazie danych jest relacja pracownicy o następującym schemacie danych: ┌──────────┬─────────────┬──────┬─────┬─────────┬───────┐ │ Field │ Type │ Null │ Key │ Default │ Extra │ ├──────────┼─────────────┼──────┼─────┼─────────┼───────┤ │ id │ PRI │ NULL │ │ │ nazwisko │ varchar(30) │ YES │ int(11) │ │ │ NULL │ │ │ imie │ varchar(30) │ YES │ │ NULL │ │ │ zarobki │ double │ YES │ │ NULL │ │ │ wiek │ int(11) │ YES │ │ NULL │ │ └──────────┴─────────────┴──────┴─────┴─────────┴───────┘ Przykładowy skrypt może wyglądać następująco: import MySQLdb 20 4 CGI conn = MySQLdb.connect(host=”hostname”, user=”username”, passwd=”password”, db=”database”) cursor = conn.cursor() cursor.execute (”SELECT * FROM pracownicy”) for row in cursor: print ’%s %s’ % (row[1], row[2]) cursor.close() conn.close() 15. Przygotuj skrypt CGI w języku Perl korzystając z modułu CGI. Dokumentacja do tego modułu znajduje się na stronie pomocy systemowej CGI(3pm). 16. Przetestuj dostęp do bazy danych z poziomu skryptu w języku Perl korzystając z modułu DBI. Zadanie Stwórz aplikację umożliwiającą rejestrowanie pracowników. Aplikacja powinna składać się z dwóch skryptów CGI (lista.cgi i dodaj.cgi) oraz ze statycznego formularza (dodaj.html). Skrypt lista. cgi powinien wyświetlić zawartość pliku pracownicy.txt z listą pracowników w postaci tabelki HTML i odnośnik do formularza umożliwiającego dodanie nowego pracownika. Formularz z pliku dodaj.html powinien zawierać 3 pola wejściowe: imie, nazwisko oraz wiek. Dane z formularza traają metodą POST do skryptu dodaj.cgi, który dopisuje je do pliku pracownicy.txt i informuje o poprawnym (lub nie) wykonaniu zapisu. Skrypt powinien wyświetlić również odnośnik do skryptu lista.cgi. Format pliku pracownicy.txt jest następujący: Jan Kowalski 32 Barbara Nowak 27 Do implementacji można użyć dowolnego języka programowania (Bash, C, Python, Perl lub inny). 5 PHP W pierwszej kolejności należy wykonać ćwiczenia ze strony: http://www.cs.put.poznan.pl/csobaniec/ edu/piksr/sum/php.html. Dokumentacja do języka PHP znajduje się pod adresem http://pl.php.net/manual/pl/. Materiały te są w dużej części przetłumaczone na język polski. 5.1 PHP jako język programowania 1. Przećwicz działanie zewnętrznego interpretera języka PHP przygotowując plik hello.php z poniższą zawartością: #!/usr/bin/php <?php echo(”Hello world!\n”); ?> a następnie ustawiając prawo do wykonywania tego pliku i wykonując go w interpreterze poleceń. 2. Dopisz do przykładowego skryptu pętlę wyświetlającą wszystkie argumenty z linii poleceń. Wyświetlenie jednego argumentu realizuje poniższy fragment kodu: echo(”Arg 1: $argv[1]\n”); 3. Dodaj do skryptu pętlę foreach wyświetlającą wszystkie zmienne środowiskowe zapisane w tablicy $_ENV. Utwórz nową tablicę korzystając z funkcji array(). Sprawdź działanie funkcji var_dump() wypisującej zawartość dowolnie złożonej struktury danych. 4. Napisz funkcję zwiększającą liczbę przekazaną jako pierwszy argument o wartość przekazaną jako drugi argument. Przykładowe wywołanie: $x = 10; zwieksz($x, 5); Do aktualizacji wartości zmiennej wykorzystaj referencje. Przećwicz również mody kację zmiennych globalnych z wnętrza funkcji. 5. Przećwicz mechanizmy programowania obiektowego w języku PHP. Zde niuj klasę Figura oraz klasy pochodne: Kwadrat i Trojkat. Klasa Figura powinna mieć pole typ określające 5.2 Zastosowania PHP na serwerach WWW 22 typ gury (1 — kwadrat, 2 — trójkąt). Klasy pochodne powinny mieć pola przechowujące informację o rozmiarach odpowiednich gur. Pola te powinny być inicjowane przez odpowiednie konstruktory. W klasie Figura powinna być zde niowana metoda pole(), której zadaniem jest obliczanie pola powierzchni gury. Zaimplementuj tę metodę dla klas pochodnych. W klasie Figura powinna być też zde niowana metoda wyswietl() wyświetlająca nazwę gury i jej pole. Poniższy fragment kodu odwołujący się do opisanych klas: $k = new Kwadrat(10.2); $t = new Trojkat(5, 3.4); echo( $k->wyswietl() ); echo( $t->wyswietl() ); powinien spowodować wyświetlenie napisów: kwadrat o polu 104.04 trójkąt o polu 8.5 6. Umieść de nicje klas z zadania 5 w oddzielnych plikach i wczytaj je w programie głównym funkcją require() lub require_once(). 5.2 Zastosowania PHP na serwerach WWW 1. Wyświetl w postaci dokumentu HTML wszystkie argumenty przekazane do skryptu odwołując się do tablicy $_GET. Oto szkielet odpowiedniego dokumentu PHP: <html> <body> <h1>Test PHP</h1> <?php echo(”<p>Hello world!</p>\n”); ?> </body> </html> 2. Stwórz dokument HTML z formularzem i skojarz go ze skryptem z poprzedniego zadania. Przećwicz przekazywanie argumentów metodą POST protokołu HTTP. 3. Obsługa ciasteczek w PHP. Napisz skrypt, który ustawia ciasteczko reprezentujące licznik odwołań do strony. Każde odwołanie powinno powodować wysłanie ciasteczka ze zwiększoną wartością licznika. Sprawdź działanie licznika po restarcie przeglądarki. Ustaw datę ważności ciasteczka na kilka minut. 4. Napisz skrypt PHP realizujący przekierowanie w protokole HTTP, korzystając z funkcji header(). 5. Przećwicz działanie mechanizmu sesji w języku PHP. Zadeklaruj zmienną sesyjną reprezentującą licznik odwołań i zwiększaj jej wartość przy każdym odwołaniu. Generowany dokument powinien zawierać statyczny odnośnik HTML do tego dokumentu, tak aby ponowne wczytywanie odbywało się poprzez wybranie tego odnośnika, a nie przeładowanie strony. Sprawdź działanie skryptu po wyłączeniu obsługi ciasteczek. Wyłączenie obsługi ciasteczek w przeglądarce Firefox wymaga wybrania zakładki Privacy/Cookies i wyłączenia opcji Allow sites to set Cookies. 6. Przetestuj działanie mechanizmu uwierzytelnienia z protokołu HTTP. W tym celu wygeneruj błąd 401, a następnie odczytaj wartości zmiennych środowiskowych PHP_AUTH_USER i PHP_AUTH_PW. 23 5.3 Projekt 7. Przećwicz dostęp do bazy danych MySQL z poziomu języka PHP. Wykorzystaj do tego celu testową bazę danych opisaną w zadaniu 16 w rozdziale 4. 8. Stwórz dokument HTML z formularzem i skrypt PHP umożliwiające wprowadzanie nowych zapisów do do relacji pracownicy w testowej bazie danych. 9. Przetestuj dostęp do baz danych za pośrednictwem biblioteki ADODB. Zastosuj obiekt ADODB_Pager do stronicowania wyników zapytań. 10. Przetestuj wysyłanie listów elektronicznych funkcją mail(). Dodaj do nagłówka listu pole From wskazujące na nadawcę: From: [email protected] 11. Przećwicz mechanizm wstawiania plików na serwer poprzez skrypty PHP. Na formularzu HTML dodaj w tym celu pole <input type=”file”>, a po stronie serwera odwołaj się do tablicy $_FILES. 12. Napisz skrypt do pobierania plików z niedostępnego katalogu. 13. Napisz przykładową aplikację internetową umożliwiającą zalogowanie do systemu, wykonywanie przykładowego przetwarzania i wylogowanie się. Wykorzystaj mechanizm sesji. 5.3 Projekt Skonstruuj aplikację internetową, której zadaniem będzie manipulacja pojedynczą relacją w bazie danych. Aplikacja powinna realizować następujące zadania: 1. Wyświetlanie wszystkich rekordów z relacji w sformatowanej tabelce HTML. Na stronie z listą rekordów powinien być odnośnik do strony służącej do dodawania nowych rekordów. 2. Dodawanie nowych rekordów poprzez formularz HTML. Zatwierdzenie formularza powinno powodować przejście do strony z listą rekordów lub wyświetlenie komunikatu o błędzie wraz z wypełnionym formularzem. Wprowadzanie danych powinno podlegać wery kacji po stronie serwera. Wszystkie pola na formularzu powinny być wypełnione, pole zarobki powinno być poprawną liczbą zmiennoprzecinkową, a pole wiek poprawną liczbą całkowitą. Działanie aplikacji jest następujące. Po załadowaniu w przeglądarce skryptu wyświetlającego zawartość relacji (list.php) użytkownik ma możliwość przejścia do strony służącej do dodawania nowych rekordów. Wywołanie skryptu dodającego pracowników (add.php) powinno powodować wyświetlenie pustego formularza HTML. Zatwierdzenie formularza powoduje ponowne wywołanie tego samego skryptu i wykonanie polecenia SQL mającego na celu dodanie nowego rekordu do bazy danych. W przypadku poprawnego wykonania polecenia SQL skrypt powinien dokonać przekierowania do skryptu wyświetlającego rekordy (przekierowanie na poziomie HTTP z wykorzystaniem pola Location). Błędne dane lub błąd w realizacji polecenia SQL powinien powodować ponowne wyświetlenie formularza wraz z częściowo wprowadzonymi danymi i z komentarzem dotyczącym zaistniałego błędu. W projekcie należy zastosować mechanizm uwierzytelniania użytkowników. Odwołanie się do dowolnej strony bez zalogowania się powinno powodować przekierowanie do strony z formularzem do logowania się (login.php). Podanie poprawnej nazwy użytkownika i hasła powinno powodować zapamiętanie nazwy użytkownika w danych sesji i przekierowanie do strony wyświetlającej rekordy (list.php). Na każdej ze stron powinien znajdować się odnośnik do skryptu wylogowującego. Skrypt wylogowujący (logout.php) powinien zamknąć sesję usuwając w ten sposób dane z nią związane i dokonać przekierowania do strony do logowania się (login.php). 24 5.3 Projekt Ostateczny schemat aplikacji można zobrazować jak na rysunku poniżej. Linią przerywaną zaznaczono podstawową funkcjonalność aplikacji. wylogowanie login.php list.php logout.php poprawne dodanie dodawanie bledne haslo add.php bledne dane czesc podstawowa Uwagi: 1. Należy użyć języka PHP jako podstawowego narzędzia implementacji aplikacji. 2. Zawartość dynamicznie generowanych stron HTML powinna być zgodna z HTML 4.01 strict lub XHTML 1.0 (podobnie jak w projekcie pierwszym). 3. Do formatowania prezentacji wyników należy zastosować CSS. 4. Relacja Pracownicy, do której należy się odwołać ma postać taką jak w punkcie 16 z rozdziału 4. 6 XML 1. Stwórz przykładowy dokument w standardzie XHTML 1.0 w wersji strict. Plik powinien mieć rozszerzenie .html. Przećwicz użycie znacznika <br>. Poniżej znajduje się szkielet takiego dokumentu: <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html> ... </html> Dokonaj walidacji dokumentu korzystając z walidatora HTML W3C. 2. Zapoznaj się z parserem rxp. Dokonaj walidacji przygotowanego dokumentu XHTML z poprzedniego punktu. Sprawdzenie poprawności sformułowania można wykonać poprzez wykonanie komendy: # rxp -s plik.html Sprawdzenie zgodności z DTD realizuje zlecenie: # rxp -s -V plik.html 3. Popraw błędy niepoprawnego sformułowania w przykładowym pliku book-bad.xml. Plik book.dtd zawiera de nicję typu dokumentu (DTD) dla tego przykładu. 4. Zmody kuj DTD dla książki tak, aby możliwe było używanie znaczników <b> i <i> wewnątrz akapitów tekstowych. Wstaw takie znaczniki do przykładowego dokumentu i przetestuj zgodność z DTD. Sprawdź czy możliwe jest zagnieżdżanie elementów <b> i <i>, np.: <para>Przykładowy <b>akapit <i>tekstowy</i></b>.</para> 5. Wyświetl dokument book.xml w przeglądarce dołączając do niego styl CSS. Wskazanie na styl wymaga dodania poniższej instrukcji sterującej za prologiem dokumentu XML: <?xml-stylesheet type=”text/css” href=”styl.css”?> De niując styl pamiętaj o wskazaniu wartości dla własności display. 6. Zaprojektuj język znacznikowy (aplikację XML) do reprezentacji książki adresowej. Książka powinna przechowywać informacje o jej właścicielu (imię, nazwisko, email). Każda pozycja powinna przechowywać: nazwisko, adres email, nr tel., adres strony WWW i opis. Opis może zawierać podzbiór znaczników formatujących XHTML: <b>, <i>, <tt>. 6 XML 26 W drugim kroku rozbuduj język o możliwość de niowania grup osób. Grupy powinny móc tworzyć hierarchię. Dane powinny więc być zorganizowane na podobnej zasadzie jak struktura plików (grupa to odpowiednik katalogu, a pojedyncza osoba to odpowiednik pliku). 7 XSLT 1. Przetestuj pracę przykładowego stylu book.xsl konwertującego dokument book.xml z poprzedniego rozdziału do poprawnego dokumentu HTML. Skorzystaj w tym celu z procesora Sablotron, którego przykładowe wywołanie podano poniżej: # sabcmd book.xsl book.xml book.html 2. Dodaj do stylu reguły konwertujące główny tytuł książki, tytuły podrozdziałów (sekcji) i element <important>. 3. Zmień formatowanie akapitów tekstowych z atrybutem type ustawionym na quote tak, aby prezentowane były one wewnątrz znacznika <blockquote>. 4. Wprowadź numerację akapitów tekstowych. Wykorzystaj w tym celu najpierw funkcję position() a później element <xsl:number/>. 5. Dodaj hierarchiczną numerację rozdziałów i sekcji. 6. Dodaj do stylu reguły generujące dynamicznie spis treści książki (tytuły rozdziałów i podrozdziałów). Do formatowania spisu wykorzystaj listy numerowane HTML. Przykładowy styl generujący spis treści jest w pliku toc.xsl. 7. Zmień prezentację tytułów rozdziałów w spisie na duże litery. 8. Zde niuj styl konwertujący dokument XML w możliwie czytelny dokument tekstowy. 9. Przetestuj możliwość dołączenia stylu transformującego do dokumentu czytanego bezpośrednio przez przeglądarkę: <?xml-stylesheet type=”text/xsl” href=”book.xsl”?> 10. Zde niuj reguły dla prezentacji elementu <important>, który powinien zmieniać krój czcionki na pochyloną, a w przypadku zagnieżdżenia anulować pochylenie. Rozważ przypadek dowolnie głębokiego zagnieżdżenia. 11. Dodaj do książki możliwość obsługi elementu <xref> reprezentującego odwołania do innych fragmentów książki. Oto przykłady użycia tego elementu: <chapter id=”wstep”> <title>Wstęp</title> ... </chapter> ... 28 7 XSLT <chapter> <para>Zobacz <xref target=”wstep”>rozdział poprzedni</xref> lub rozdział pod tytułem <xref target=”wstep”/>. <para> </chapter> 12. Przygotuj reguły generujące spis treści w sposób proceduralny z wykorzystaniem pętli <xsl:foreach>. 13. Dodaj do stylu głównego generację spisu treści elementem <toc/>. 14. Uzupełnij formatowanie spisu treści książki, tak aby tytuły rozdziałów i sekcji stały się odnośnikami do odpowiednich miejsc w tekście. 15. Opracuj styl trasformujący książkę do formatu XHTML + CSS. 8 XSL-FO 1. Użyj procesorów fop i xep do przetworzenia przykładowego dokumentu XSL-FO. Kompilację można wykonać zleceniami: # fop book.fo book.pdf # /a/local/xep/xep -fo book.fo -out book.pdf 2. Wyróżnij fragment tekstu w akapicie poprzez pogrubienie, pochylenie, kolor i zmianę rozmiaru czcionki. 3. Wyrównaj tekst do prawej w akapicie. 4. Umieść wybrany akapit tekstu w ramce z dodatkowym wypełnieniem i wolną przestrzenią dookoła oraz wypełnieniem pobranym z pliku JPEG. 5. Narysuj tabelkę w XSL-FO. 6. Zapisz zagnieżdżoną listę. 7. Zde niuj treść nagłówka strony wyśrodkowaną w pionie i poziomie. Użyj własności displayalign. 8. Przećwicz układ wielokolumnowy akapitów. 9. Wstaw rysunek do dokumentu. Rysunek powinien być oblewany tekstem po prawej stronie. 10. Wstaw odnośnik do innego dokumentu. 11. Wstaw numerację stron do stopki strony. 12. Stwórz kompletny styl XSL do prezentacji książki z pliku book.xml.
