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.2 2013-10-25 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 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, Google 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 Przykłady programów CGI wskazywane w tym rozdziale są dostępne na stronie http://www.cs.put. poznan.pl/csobaniec/examples/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 19 4 CGI Odwołanie do skryptu powinno wyglądać np. tak: http://sirius/~infXXXX/man.cgi?mkdir 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. Przetestuj poniższy program CGI napisany w języku C z wykorzystaniem biblioteki cgi-util: #include <stdio.h> #include <stdlib.h> #include <cgi-util.h> int main(int argc, char * argv[]) { int res; char* nazwisko; char* imie; res = cgi_init(); printf(”Content-type: text/html\n\n”); if (res != CGIERR_NONE) { printf(”Error # %d: %s<p>\n”, res, cgi_strerror(res)); exit(0); } nazwisko = (char*)cgi_getentrystr(”nazwisko”); imie = (char*)cgi_getentrystr(”imie”); printf(”<html>\n<body>\n”); printf(”<h1>Odczyt parametrów</h1>\n”); printf(”<p>Nazwisko=%s\n”, nazwisko); printf(”<p>Imię=%s\n”, imie); printf(”</body>\n</html>\n”); cgi_quit(); return(0); } Dokumentacja do biblioteki cgi-util jest dostępna w pliku /usr/share/doc/packages/cgi-util/ README.txt. 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. Zrealizuj przekierowanie przeglądarki klienta poprzez odpowiednią dynamiczną odpowiedź skryptu CGI. 10. Przetestuj działanie skryptu CGI w języku Python wypisującego przekazane do niego argumenty: #!/usr/bin/python3 import cgi 20 4 CGI print(”Content-type: text/plain\n”) args = cgi.FieldStorage() print(”Lista wszystkich argumentów:”) for x in args: print(x + ”=” + args[x].value) Następnie przetestuj również wersję generującą dokument HTML i informującą o ewentualnych błędach w programie (moduł cgitb): #!/usr/bin/python3 import cgi import cgitb print(”Content-type: text/html\n”) cgitb.enable() print(”<html>\n<body>”) args = cgi.FieldStorage() print(”<h1>Lista wszystkich argumentów</h1>”) print(”<pre>”) for x in args: print(x + ”=” + args[x].value) print(”</pre>\n</body>\n</html>”) 11. Przetestuj obsługę baz danych SQLite z poziomu języka Python. W tym celu stwórz podkatalog data, który będzie udostępniony serwerowi WWW do zapisu: # cd public_html # mkdir data # setfacl -m u:wwwrun:rw data Następnie wykonaj po kolei następujące skrypty (dostępne do pobrania na stronie http:// www.cs.put.poznan.pl/csobaniec/examples/cgi/). Pierwszy tworzy bazę danych: #!/usr/bin/python3 import sqlite3 import cgitb print(”Content-type: text/html\n”) cgitb.enable() conn = sqlite3.connect(”data/sqlite.db”) c = conn.cursor() c.executescript(””” DROP TABLE IF EXISTS pracownicy; CREATE TABLE pracownicy( id INT PRIMARY KEY, nazwisko VARCHAR(30), imie VARCHAR(30), zarobki DOUBLE, wiek INT); INSERT INTO pracownicy VALUES(1, ’Kowalski’, ’Jan’, 3500, 32); 21 4 CGI INSERT INTO INSERT INTO INSERT INTO INSERT INTO ”””) conn.commit() c.close() print(”OK”) pracownicy pracownicy pracownicy pracownicy VALUES(2, VALUES(3, VALUES(4, VALUES(5, ’Nowak’, ’Barbara’, 3650, 33); ’Kaczmarek’, ’Jacek’, 2400, 24); ’Iksi�ska’, ’Ma�gorzata’, 2800, 26); ’Niewiadomski’, ’Jerzy’, 2200, 22); Następny wyświetla zawartość relacji pracownicy: #!/usr/bin/python3 import sqlite3 import cgitb print(”Content-type: text/html\n”) cgitb.enable() conn = sqlite3.connect(”data/sqlite.db”) c = conn.cursor() c.execute(”select * from pracownicy”) print(”<pre>”) for row in c: print(row[1],row[2]) c.close() print(”</pre>”) Ostatni dodaje nową krotkę do relacji: #!/usr/bin/python3 import sqlite3 import cgitb print(”Content-type: text/html\n”) cgitb.enable() conn = sqlite3.connect(”data/sqlite.db”) c = conn.cursor() c.execute(”INSERT INTO pracownicy VALUES(6, ’Nowy’, ’Hektor’, 4444, 37)”) conn.commit() c.close() print(”OK”) 12. Do bazy danych SQLite można się również odwołać z poziomu wiersza poleceń: # sqlite3 data/sqlite.db sqlite> select * from pracownicy; ... sqlite> .headers on sqlite> .mode column sqlite> select * from pracownicy; ... 22 4 CGI Zadanie Stwórz aplikację umożliwiającą rejestrowanie pracowników. Aplikacja powinna składać się ze skryptów CGI lista.cgi, dodaj.cgi i usun.cgi oraz ze statycznego formularza dodaj.html. Skrypt lista.cgi powinien wyświetlić zawartość bazy danych SQLite z listą pracowników w postaci tabelki HTM, odnośnik do formularza umożliwiającego dodanie nowego pracownika oraz odnośniki umożliwiające usunięcie poszczególnych pracowników. Formularz z pliku dodaj.html powinien zawierać 3 pola wejściowe: imie, nazwisko oraz wiek. Dane z formularza tra ają metodą POST do skryptu dodaj.cgi, który dopisuje je do bazy danych i informuje o poprawnym (lub nie) wykonaniu zapisu. Skrypt powinien wyświetlić również odnośnik do skryptu lista.cgi. Skrypt usun.cgi powinien usunąć wskazanego pracownika i przekierować przeglądarkę do skryptu lista.cgi. Do implementacji można użyć dowolnego języka programowania (C, Python, Perl, PHP), choć zalecanym jest Python. Zobacz również • Interfejs dostępu do bazy danych SQLite dla Pythona: http://docs.python.org/3.3/library/sqlite3. html • Składnia SQL w SQLite: http://www.sqlite.org/lang.html • Dokumentacja modułu CGI: http://docs.python.org/3.3/library/cgi.html • HOWTO Use Python in the web: http://docs.python.org/3.3/howto/webservers.html
