2. Podstawy programowania internetowego

Głównym celem tego rozdziału jest zapoznanie czytelnika z głównymi zasadami programowania internetowego, które są niezależne od konkretnej technologii wykorzystywanej do ich wdrożenia. Zawiera on liczne przykłady, które warto przetestować, aby stopniowo „wczuć się” w filozofię tworzenia aplikacji internetowych. Czytelnik posiadający już tę wiedzę może przejść bezpośrednio do następnego rozdziału.

Elementy składowe aplikacji internetowej są następujące:

Numer	Rola	Typowe przykłady
1	OS Serwer	Unix, Linux, Windows
2	Serwer WWW	Apache (Unix, Linux, Windows) IIS (Windows + platforma .NET) Node.js (Unix, Linux, Windows)
3	Kody wykonywane po stronie serwera. Mogą być one uruchamiane przez moduły serwera lub przez programy zewnętrzne względem serwera (CGI).	JAVASCRIPT (Node.js) PHP (Apache, IIS) JAVA (Tomcat, Websphere, JBoss, Weblogic, ...) C#, VB.NET (IIS)
4	Baza danych – może znajdować się na tym samym komputerze co program, który z niej korzysta, lub na innym komputerze, z którym łączy się przez Internet.	Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) SQL Server (Windows)
5	OS Klient	Unix, Linux, Windows
6	Przeglądarka internetowa	Chrome, Internet Explorer, Firefox, Opera, Safari, ...
7	Skrypty wykonywane po stronie klienta w przeglądarce. Skrypty te nie mają dostępu do dysków komputera klienta.	JavaScript (wszystkie przeglądarki)

2.1. Wymiana danych w aplikacji internetowej z formularzem

Numer	Rola
1	Przeglądarka wysyła po raz pierwszy żądanie URL dotyczące (http://machine/url). Nie przekazano żadnych parametrów.
2	Serwer WWW wysyła mu stronę internetową o identyfikatorze URL. Może to być strona statyczna lub wygenerowana dynamicznie przez skrypt serwera (SA), który mógł wykorzystać zawartość baz danych (SB, SC). W tym przypadku skrypt wykryje, że żądanie dotyczy pliku URL bez przekazania parametrów, i wygeneruje stronę internetową początkową. Przeglądarka odbiera stronę i wyświetla ją (CA). Skrypty po stronie przeglądarki (CB) mogły zmodyfikować stronę początkową wysłaną przez serwer. Następnie, w wyniku interakcji między użytkownikiem (CD) a skryptami (CB), strona internetowa zostanie zmodyfikowana. W szczególności zostaną wypełnione formularze.
3	Użytkownik zatwierdza dane z formularza, które następnie muszą zostać wysłane do serwera WWW. Przeglądarka ponownie żąda strony początkowej URL lub innej, w zależności od sytuacji, i jednocześnie przekazuje serwerowi wartości z formularza. W tym celu może wykorzystać dwie metody o nazwach GET i POST. Po otrzymaniu żądania od klienta serwer uruchamia skrypt (SA) powiązany z żądanym URL, który wykrywa parametry i przetwarza je.
4	Serwer dostarcza stronę internetową wygenerowaną programowo (SA, SB, SC). Ten etap jest identyczny z poprzednim etapem 2. Wymiana danych odbywa się teraz zgodnie z etapami 2 i 3.

2.2. Strony internetowe statyczne, strony internetowe dynamiczne

Strona statyczna jest reprezentowana przez plik HTML. Strona dynamiczna to strona HTML generowana „na bieżąco” przez serwer WWW.

2.2.1. Strona statyczna HTML (język znaczników HyperText)

Stwórzmy pierwszy projekt internetowy za pomocą programu Visual Studio Express 2012. Wykorzystamy opcję [Fichier / Nouveau projet]:

w [1] określamy, że chcemy utworzyć pustą aplikację ASP.NET;
w [2] podajemy nazwę rozwiązania Visual Studio. Wszystkie przykłady w tym dokumencie będą znajdować się w tym samym rozwiązaniu;
w [3] – folder nadrzędny względem folderu projektu, który ma zostać utworzony;
w polu [4] należy wpisać nazwę projektu.

Potwierdzamy.

Powstały projekt jest przedstawiony w [5]. Wykorzystamy go do zilustrowania głównych zasad programowania stron internetowych.

Zacznijmy od utworzenia statycznej strony o nazwie HTML:

w [1], kliknij prawym przyciskiem myszy na projekt, a następnie postępuj zgodnie z wyświetlonymi opcjami;

w [2], nadaj nazwę stronie;
na [3] – strona została dodana.

Treść utworzonej strony jest następująca:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

</body>
</html>

wiersze 2–10: kod jest ograniczony tagiem głównym <html>;
wiersze 3–6: tag <head> wyznacza tzw. nagłówek strony;
wiersze 7–9: tag <body> wyznacza tzw. treść strony.

Zmodyfikujmy ten kod w następujący sposób:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

wiersz 5: określa tytuł strony – zostanie wyświetlony jako tytuł okna przeglądarki wyświetlającej stronę;
wiersz 8: tekst napisany dużymi literami (<h1>).

Wyświetlmy tę stronę w przeglądarce:

w [1] żądamy wyświetlenia strony;
w [2] – adres URL wyświetlanej strony;
w [3] – tytuł okna – został dostarczony przez tag <title> na stronie;
w [4] treść strony – została pobrana z tagu <h1>.

Przyjrzyjmy się kodowi [1], który przeglądarka otrzymała jako HTML:

w [2] przeglądarka otrzymała stronę HTML, którą stworzyliśmy. Zinterpretowała ją i wyświetliła w formie graficznej.

2.2.2. Strona ASP.NET

Stwórzmy teraz stronę o nazwie ASP.NET. Jest to strona HTML, która może zawierać kod wykonywany po stronie serwera i generujący niektóre części strony. Postępujemy analogicznie do tworzenia strony HTML:

w [1] wywoływana jest strona ASP.NET, czyli [Web Form];

w [2] nadano nazwę nowej stronie;
w [3] strona została utworzona.

Kod utworzonej strony wygląda następująco:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Występują tu już znane nam tagi HTML. Tagi posiadające atrybut [runat= "server "] to tagi, które zostaną przetworzone przez serwer i przekształcone w czyste tagi HTML. To, co widzimy powyżej, nie jest więc – w przeciwieństwie do poprzedniej strony statycznej – kodem HTML, który otrzyma przeglądarka. Mamy tu zatem do czynienia ze stroną dynamiczną: strumień HTML wysyłany do serwera jest generowany przez kod wykonywany po stronie serwera. Zmodyfikujmy stronę w następujący sposób:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Démo asp.net</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
    </div>
  </form>
</body>
</html>

wiersz 8: nadajemy stronie tytuł;
wiersz 13: wyświetlamy tekst wygenerowany przez kod C#. Kod ten znajduje się pomiędzy tagami <% %>. Ten kod C# wyświetla aktualną godzinę w formacie godziny:minuty:sekundy.

Wyświetlmy tę stronę w przeglądarce:

w [1] żądamy wyświetlenia strony;
w [2] – adres URL wyświetlanej strony;
w [3] – tytuł okna – został podany przez tag <title> na stronie;
w [4] treść strony – została pobrana z tagu <h1>.

Jeśli odświeżymy stronę (F5), otrzymamy inny widok (nowy czas), podczas gdy URL pozostaje niezmieniony. Jest to dynamiczny charakter strony: jej zawartość może zmieniać się w miarę upływu czasu. Przyjrzyjmy się teraz kodowi HTML otrzymanemu przez przeglądarkę:

w [1] wyświetlamy kod źródłowy strony;
w [2]: tym razem otrzymany kod HTML nie jest tym, który stworzyliśmy, ale tym, który został wygenerowany przez serwer WWW na podstawie informacji z naszej strony ASP.NET.

2.2.3. Wniosek

Z powyższego wynika, że strony dynamiczne i statyczne różnią się zasadniczo pod względem charakteru.

2.3. Skrypty po stronie przeglądarki

Strona HTML może zawierać skrypty, które będą wykonywane przez przeglądarkę. Głównym językiem skryptowym po stronie przeglądarki jest obecnie (wrzesień 2013 r.) JavaScript. W tym języku stworzono setki bibliotek, aby ułatwić pracę programistom.

Stwórzmy nową stronę o nazwie HTML [1] w ramach już utworzonego projektu:

Edytujmy plik [HtmlPage2.html], wpisując następującą treść:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>

wiersz 13: definiuje przycisk (atrybut type) z tekstem „Kliknij mnie” (atrybut value). Po kliknięciu na niego uruchamiana jest funkcja JavaScript [réagir] (atrybut onclick);
wiersze 6–10: skrypt JavaScript;
wiersze 7–9: funkcja [réagir];
wiersz 8: wyświetla okno dialogowe z komunikatem [Vous avez cliqué sur le bouton].

Wyświetlmy stronę w przeglądarce:

w [1] – wyświetlana strona;
w [2] – okno dialogowe wyświetlane po kliknięciu przycisku.

Po kliknięciu przycisku nie dochodzi do wymiany danych z serwerem. Kod JavaScript jest wykonywany przez przeglądarkę.

Dzięki ogromnej liczbie dostępnych bibliotek JavaScript można obecnie wbudowywać w przeglądarkę pełnoprawne aplikacje. W związku z tym dąży się do stosowania następujących architektur:

1-4: serwer HTML jest serwerem statycznych stron HTML5 / CSS / JavaScript;
5–6: dostarczane strony HTML5 / CSS / JavaScript współdziałają bezpośrednio z serwerem danych. Serwer ten dostarcza wyłącznie dane bez szablonu HTML. To właśnie JavaScript wstawia je do stron HTML już wyświetlanych w przeglądarce.

W tej architekturze kod JavaScript może stać się zbyt rozbudowany. Dlatego staramy się go uporządkować warstwowo, tak jak w przypadku kodu po stronie serwera:

warstwa [UI] odpowiada za interakcję z użytkownikiem;
warstwa [DAO] współpracuje z serwerem danych;
warstwa [métier] obejmuje procedury biznesowe, które nie wchodzą w interakcję ani z użytkownikiem, ani z serwerem danych. Warstwa ta może nie istnieć.

2.4. Wymiana danych między klientem a serwerem

Wróćmy do naszego początkowego schematu, który przedstawiał elementy składowe aplikacji internetowej:

W tym miejscu skupiamy się na wymianie danych między komputerem klienckim a serwerem. Odbywa się ona za pośrednictwem sieci i warto przypomnieć ogólną strukturę wymiany danych między dwoma odległymi komputerami.

2.4.1. Model OSI

Model otwartej sieci o nazwie OSI (Open Systems Interconnection Reference Model), zdefiniowany przez ISO (Międzynarodową Organizację Normalizacyjną), opisuje idealną sieć, w której komunikację między komputerami można przedstawić za pomocą modelu siedmiowarstwowego:

Każda warstwa korzysta z usług warstwy niższej i udostępnia swoje usługi warstwie wyższej. Załóżmy, że dwie aplikacje znajdujące się na różnych maszynach A i B chcą się komunikować: robią to na poziomie warstwy Application. Nie muszą one znać wszystkich szczegółów działania sieci: każda aplikacja przekazuje informacje, które chce przesłać, do warstwy znajdującej się poniżej, czyli warstwy Présentation. Aplikacja musi zatem znać jedynie zasady współpracy z warstwą Présentation. Gdy informacja znajdzie się w warstwie Présentation, jest przekazywana zgodnie z innymi regułami do warstwy Session i tak dalej, aż informacja dotrze do nośnika fizycznego i zostanie fizycznie przesłana do komputera docelowego. Tam zostanie poddana procesowi odwrotnemu do tego, który miała miejsce na komputerze nadawczym.

Na każdej warstwie proces nadawczy odpowiedzialny za wysyłanie informacji przekazuje ją do procesu odbiorczego na innym komputerze należącym do tej samej warstwy co on sam. Odbywa się to zgodnie z określonymi zasadami, zwanymi protokołem warstwy. Otrzymujemy zatem następujący ostateczny schemat komunikacji:

Rola poszczególnych warstw jest następująca:

Fizyczna	Zapewnia transmisję bitów za pośrednictwem nośnika fizycznego. W tej warstwie znajdują się urządzenia końcowe do przetwarzania danych (E.T.T.D.), takie jak terminal lub komputer, a także urządzenia końcowe obwodów danych (E.T.C.D.), takie jak modulator/demodulator, multiplekser, koncentrator. Istotne kwestie na tym poziomie to: wybór sposobu kodowania informacji (analogowego lub cyfrowego) wybór trybu transmisji (synchroniczny lub asynchroniczny).
Łącze danych	Ukrywa specyfikę fizyczną warstwy fizycznej. Wykrywa i koryguje błędy transmisji.
Sieć	Zarządza trasą, jaką muszą pokonać informacje przesyłane w sieci. Nazywa się to routage: określenie trasy, jaką musi pokonać informacja, aby dotarła do odbiorcy.
Transport	Umożliwia komunikację między dwiema aplikacjami, podczas gdy poprzednie warstwy pozwalały jedynie na komunikację między komputerami. Usługą świadczoną przez tę warstwę może być multipleksowanie: warstwa transportowa może wykorzystywać to samo połączenie sieciowe (między komputerami) do przesyłania informacji należących do kilku aplikacji.
Sesja	W tej warstwie znajdują się usługi umożliwiające aplikacji otwarcie i utrzymanie sesji roboczej na zdalnym komputerze.
Prezentacja	Ma ona na celu ujednolicenie sposobu prezentacji danych na różnych maszynach. W ten sposób dane pochodzące z maszyny A zostaną „przetworzone” przez warstwę Présentation maszyny A zgodnie ze standardowym formatem, zanim zostaną wysłane do sieci. Po dotarciu do warstwy Présentation komputera docelowego B, który rozpozna je dzięki standardowemu formatowi, zostaną one przekształcone w inny sposób, aby aplikacja na komputerze B mogła je rozpoznać.
Aplikacja	Na tym poziomie znajdują się aplikacje zazwyczaj bliskie użytkownikowi, takie jak poczta elektroniczna lub przesyłanie plików.

2.4.2. Model TCP/IP

Model OSI jest modelem idealnym. Zestaw protokołów TCP/IP zbliża się do niego w następującej postaci:

interfejs sieciowy (karta sieciowa komputera) pełni funkcje warstw 1 i 2 modelu OSI
warstwa IP (Internet Protocol) pełni funkcje warstwy 3 (sieć)
warstwa TCP (Transfer Control Protocol) lub UDP (User Datagram Protocol) pełni funkcje warstwy 4 (transportowej). Protokół TCP zapewnia, że pakiety danych wymieniane między urządzeniami dotrą do miejsca przeznaczenia. Jeśli tak się nie stanie, odsyła zagubione pakiety. Protokół UDP nie wykonuje tej czynności, więc zadanie to spoczywa na programistach aplikacji. Dlatego w Internecie, który nie jest siecią w 100% niezawodną, najczęściej stosowany jest protokół TCP. Mówimy wówczas o sieci TCP-IP.
Warstwa aplikacji obejmuje funkcje poziomów od 5 do 7 modelu OSI.

Aplikacje internetowe znajdują się w warstwie Application i opierają się zatem na protokołach TCP-IP. Warstwy Application na komputerach klienckich i serwerze wymieniają między sobą komunikaty, które są przekazywane warstwom od 1 do 4 modelu w celu dostarczenia do miejsca przeznaczenia. Aby się porozumieć, warstwy aplikacji obu komputerów muszą „mówić” tym samym językiem lub protokołem. Protokół aplikacji internetowych nosi nazwę HTTP (HyperText Transfer Protocol). Jest to protokół tekstowy, c.a.d, dzięki któremu urządzenia wymieniają między sobą wiersze tekstu w sieci, aby się porozumieć. Wymiana ta jest znormalizowana, tzn. klient dysponuje pewną liczbą komunikatów, aby dokładnie wskazać serwerowi, czego oczekuje, a serwer również dysponuje pewną liczbą komunikatów, aby udzielić klientowi odpowiedzi. Ta wymiana komunikatów ma następującą postać:

Klient --> Serwer

Gdy klient wysyła żądanie do serwera WWW, przesyła

wiersze tekstu w formacie HTTP, aby wskazać, czego oczekuje;
pusty wiersz;
opcjonalnie dokument.

Serwer --> Klient

Gdy serwer wysyła odpowiedź do klienta, przesyła

wiersze tekstu w formacie HTTP, aby wskazać, co wysyła;
pusty wiersz;
opcjonalnie dokument.

Wymiana danych ma zatem tę samą formę w obu kierunkach. W obu przypadkach może nastąpić wysłanie dokumentu, choć rzadko zdarza się, by klient wysyłał dokument do serwera. Jednak protokół HTTP to przewiduje. To właśnie pozwala na przykład abonentom dostawcy usług internetowych na pobieranie różnych dokumentów na swoją stronę osobistą hostowaną u tego dostawcy. Wymieniane dokumenty mogą być dowolne. Weźmy na przykład przeglądarkę żądającą strony internetowej zawierającej obrazy:

przeglądarka łączy się z serwerem WWW i żąda żądanej strony. Żądane zasoby są jednoznacznie identyfikowane za pomocą URL (Uniform Resource Locator). Przeglądarka wysyła jedynie nagłówki HTTP, a nie sam dokument.
Serwer odpowiada na to żądanie. Najpierw wysyła nagłówki HTTP, wskazujące, jaki typ odpowiedzi wysyła. Może to być komunikat o błędzie, jeśli żądana strona nie istnieje. Jeśli strona istnieje, serwer poinformuje w nagłówkach HTTP swojej odpowiedzi, że po nich wyśle dokument HTML (HyperText Markup Language). Dokument ten stanowi ciąg wierszy tekstu w formacie HTML. Tekst HTML zawiera znaczniki (tagi), które dostarczają przeglądarce wskazówek dotyczących sposobu wyświetlania tekstu.
Klient na podstawie nagłówków HTTP wysłanych przez serwer wie, że otrzyma dokument HTML. Przeanalizuje go i być może zauważy, że zawiera odniesienia do obrazów. Obrazy te nie znajdują się w dokumencie HTML. W związku z tym wysyła nowe żądanie do tego samego serwera WWW, prosząc o pierwszy potrzebny mu obraz. Żądanie to jest identyczne z tym wysłanym w punkcie 1, z tą różnicą, że żądany zasób jest inny. Serwer przetworzy to żądanie, wysyłając klientowi żądany obraz. Tym razem w odpowiedzi nagłówki HTTP będą wskazywać, że wysłany dokument to obraz, a nie dokument HTML.
Klient pobiera przesłany obraz. Etapy 3 i 4 będą powtarzane, dopóki klient (zazwyczaj przeglądarka) nie otrzyma wszystkich dokumentów umożliwiających wyświetlenie całej strony.

2.4.3. Protokół HTTP

Przyjrzyjmy się protokołowi HTTP na przykładach. Jakie dane wymieniają między sobą przeglądarka i serwer WWW?

Serwis internetowy lub serwis HTTP to serwis TCP-IP, który zazwyczaj działa na porcie 80. Może jednak działać na innym porcie. W takim przypadku przeglądarka kliencka musiałaby podać ten port w żądaniu URL. Żądanie URL ma ogólną postać:

protokół://serwer[:port]/ścieżka/informacje

gdzie

protokołu	http dla serwisu internetowego. Przeglądarka może również pełnić rolę klienta usług ftp, news, telnet itp.
komputer	nazwa komputera, na którym działa usługa internetowa
port	port usługi internetowej. Jeśli wynosi 80, można pominąć numer portu. Jest to najczęstszy przypadek
ścieżka	ścieżka wskazująca żądany zasób
informacje	dodatkowe informacje przekazywane serwerowi w celu doprecyzowania żądania klienta

Co robi przeglądarka, gdy użytkownik żąda załadowania pliku o nazwie URL?

otwiera połączenie TCP-IP z maszyną i portem wskazanymi w części machine[:port] pliku URL. Nawiązanie połączenia TCP-IP oznacza utworzenie „kanału” komunikacyjnego między dwoma maszynami. Po utworzeniu tego kanału wszystkie informacje wymieniane między tymi maszynami będą przez niego przepływać. Utworzenie tego kanału TCP-IP nie wiąże się jeszcze z wykorzystaniem protokołu internetowego HTTP.
Po utworzeniu kanału TCP-IP klient wyśle żądanie do serwera internetowego, wysyłając mu wiersze tekstu (polecenia) w formacie HTTP. Wyśle on do serwera część ścieżki/informacji z URL
serwer odpowie w ten sam sposób i w tym samym kanale
jeden z partnerów podejmie decyzję o zamknięciu kanału. Zależy to od używanego protokołu HTTP. W przypadku protokołu HTTP 1.0 serwer zamyka połączenie po każdej swojej odpowiedzi. Zmusza to klienta, który musi wysłać kilka żądań w celu uzyskania różnych dokumentów tworzących stronę internetową, do nawiązywania nowego połączenia przy każdym żądaniu, co wiąże się z pewnymi kosztami. W przypadku protokołu HTTP/1.1 klient może poinstruować serwer, aby utrzymywał połączenie otwarte do momentu, aż klient poleci mu je zamknąć. Dzięki temu może pobrać wszystkie dokumenty strony internetowej za pomocą jednego połączenia i samodzielnie zamknąć połączenie po otrzymaniu ostatniego dokumentu. Serwer wykryje to zamknięcie i również zamknie połączenie.

Aby zapoznać się z wymianą danych między klientem a serwerem internetowym, wykorzystamy rozszerzenie [Advanced Rest Client] przeglądarki Chrome, które zainstalowaliśmy w punkcie 1.3. Znajdziemy się w następującej sytuacji:

Serwer WWW może być dowolny. Chcemy tutaj prześledzić wymianę danych, która będzie miała miejsce między przeglądarką a serwerem WWW. Wcześniej utworzyliśmy następującą statyczną stronę HTML:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

którą wyświetlamy w przeglądarce:

Widać, że żądana strona URL to: http://localhost:56376/HtmlPage1.html. Serwer usługi internetowej to zatem localhost (=serwer lokalny), a port to 56376. Skorzystajmy z aplikacji [Advanced Rest Client], aby wysłać żądanie do tego samego serwera URL:

w [1] uruchamiamy aplikację (w zakładce [Applications] w nowej karcie przeglądarki Chrome);
w [2] wybieramy opcję [Request];
w [3] należy podać adres serwera: http://localhost:56376;
w polu [4] należy określić żądany adres URL: /HtmlPage1.html;
w [5] dodaje się ewentualne parametry do URL. Tutaj nie ma żadnych;
w [6] określa się polecenie HTTP użyte w zapytaniu, w tym przypadku GET.

W rezultacie otrzymujemy następujące zapytanie:

Tak przygotowane zapytanie [7] jest wysyłane do serwera przez [8]. Otrzymana odpowiedź wygląda następująco:

Jak wspomniano powyżej, komunikacja między klientem a serwerem ma następującą postać:

w [1] widać nagłówki HTTP wysłane przez przeglądarkę w jej żądaniu. Nie miała ona żadnego dokumentu do wysłania;
w [2] widać nagłówki HTTP wysłane przez serwer w odpowiedzi. W [3] widać dokument, który serwer wysłał.

W pliku [3] rozpoznajemy statyczną stronę HTML, którą umieściliśmy na serwerze WWW.

Przyjrzyjmy się żądaniu HTTP wysłanemu przez przeglądarkę:

GET /HtmlPage1.html HTTP/1.1 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

wiersz 1 nie został wyświetlony przez aplikację;
wiersz 2: przeglądarka identyfikuje się za pomocą nagłówka [User-Agent];
wiersz 3: przeglądarka wskazuje, że wysyła do serwera dokument tekstowy (text/plain) w formacie UTF-8. W rzeczywistości przeglądarka nie wysłała tutaj żadnego dokumentu;
wiersz 4: przeglądarka wskazuje, że akceptuje każdy typ dokumentu w odpowiedzi;
wiersz 5: przeglądarka określa akceptowane formaty dokumentów;
wiersz 6: przeglądarka określa preferowane języki w kolejności według preferencji.

Serwer odpowiedział, wysyłając następujące nagłówki HTTP:

HTTP/1.1 304 Not Modified 
Accept-Ranges: bytes 
Server: Microsoft-IIS/8.0 
X-SourceFiles: =?UTF-8?B?RDpcZGF0YVxpc3RpYS0xMzE0XGFzcG5ldFxkdnBcRXhlbXBsZXNcRXhlbXBsZS0wMFxIdG1sUGFnZTEuaHRtbA==?=
X-Powered-By: ASP.NET
Date: Wed, 18 Sep 2013 15:33:53 GMT 
Content-Type: text/html 
Content-Encoding: gzip 
Last-Modified: Wed, 18 Sep 2013 13:13:19 GMT 
ETag: "b474e0d770b4ce1:0" 
Vary: Accept-Encoding 
Content-Length: 313

wiersz 1: nie został wyświetlony przez aplikację;
wiersz 3: serwer identyfikuje się, w tym przypadku jest to serwer IIS firmy Microsoft;
wiersz 5: wskazuje technologię, która wygenerowała odpowiedź, w tym przypadku ASP.NET;
wiersz 6: data i godzina odpowiedzi;
wiersz 7: rodzaj dokumentu wysłanego przez serwer. W tym przypadku jest to dokument HTML;
wiersz 12: rozmiar w bajtach wysłanego dokumentu HTML.

2.4.4. Wnioski

Na podstawie kilku przykładów zapoznaliśmy się ze strukturą żądania klienta sieciowego oraz odpowiedzi udzielanej mu przez serwer sieciowy. Komunikacja odbywa się za pomocą protokołu HTTP, czyli zestawu poleceń w formacie tekstowym wymienianych między obydwoma stronami. Żądanie klienta i odpowiedź serwera mają tę samą strukturę:

Dwa typowe polecenia służące do żądania zasobu to GET oraz POST. Polecenie GET nie jest opatrzone dokumentem. Natomiast polecenie POST jest opatrzone dokumentem, który najczęściej stanowi ciąg znaków zawierający wszystkie wartości wprowadzone w formularzu. Polecenie HEAD służy do żądania wyłącznie nagłówków HTTP i nie jest mu dołączony żaden dokument.

Na żądanie klienta serwer wysyła odpowiedź o tej samej strukturze. Żądany zasób jest przekazywany w części [Document], chyba że polecenie klienta brzmiało HEAD – w takim przypadku wysyłane są wyłącznie nagłówki HTTP.

2.5. Podstawy języka HTML

Przeglądarka internetowa może wyświetlać różne dokumenty, z których najpopularniejszym jest dokument HTML (język znaczników HyperText). Jest to tekst sformatowany za pomocą znaczników o postaci <balise>texte</balise>. W ten sposób tekst <B>important</B> wyświetli ważny fragment tekstu pogrubioną czcionką. Istnieją również pojedyncze znaczniki, takie jak znacznik <hr/>, który wyświetla poziomą linię. Nie będziemy omawiać znaczników, które można znaleźć w tekście HTML. Istnieje wiele programów WYSIWYG umożliwiających tworzenie stron internetowych bez pisania ani jednej linii kodu HTML. Narzędzia te automatycznie generują kod HTML na podstawie układu strony utworzonego za pomocą myszki i gotowych elementów sterujących. Można więc wstawić (za pomocą myszki) do strony tabelę, a następnie przejrzeć kod HTML wygenerowany przez oprogramowanie, aby dowiedzieć się, jakich tagów należy użyć do zdefiniowania tabeli na stronie internetowej. To naprawdę nie jest skomplikowane. Ponadto znajomość języka HTML jest niezbędna, ponieważ dynamiczne aplikacje internetowe muszą samodzielnie generować kod HTML, który ma zostać wysłany do klientów internetowych. Kod ten jest generowany programowo i oczywiście trzeba wiedzieć, co należy wygenerować, aby klient otrzymał stronę internetową, której oczekuje.

Podsumowując, nie ma potrzeby znajomości całego języka HTML, aby rozpocząć programowanie internetowe. Jednak znajomość ta jest niezbędna i można ją zdobyć, korzystając z oprogramowania do tworzenia stron internetowych w języku WYSIWYG, takiego jak DreamWeaver i dziesiątek innych. Innym sposobem na poznanie subtelności języka HTML jest przeglądanie sieci i wyświetlanie kodu źródłowego stron, które zawierają interesujące i jeszcze nieznane Ci funkcje.

2.5.1. Przykład

Rozważmy poniższy przykład, który przedstawia kilka elementów, jakie można znaleźć w dokumencie internetowym, takich jak:

tabela;
obraz;
link.

Dokument HTML ma następującą ogólną postać:

<html>
    <head>
        <title>Tytuł</title>
        ...
    </head>
    <atrybuty body>
        ...
    </body>
</html>

Cały dokument jest ujęty w tagi <html>...</html>. Składa się on z dwóch części:

<head>...</head>: jest to niewidoczna część dokumentu. Zawiera informacje dla przeglądarki, która wyświetli dokument. Często znajduje się tam tag <title>...</title>, który określa tekst, który zostanie wyświetlony w pasku tytułu przeglądarki. Można tam znaleźć również inne tagi, w szczególności tagi definiujące słowa kluczowe dokumentu, które są następnie wykorzystywane przez wyszukiwarki. W tej części można również znaleźć skrypty, najczęściej napisane w języku JavaScript lub VBScript, które zostaną wykonane przez przeglądarkę.

<body atrybuty>...</body>: jest to część, która zostanie wyświetlona przez przeglądarkę. Tagi zawarte w tej części wskazują przeglądarce „pożądany” wygląd dokumentu. Każda przeglądarka interpretuje te tagi na swój sposób. W związku z tym dwie przeglądarki mogą wyświetlać ten sam dokument internetowy w różny sposób. Jest to zazwyczaj jeden z problemów, z którymi borykają się projektanci stron internetowych.

Kod HTML naszego przykładowego dokumentu wygląda następująco:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>balises</title>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Les balises HTML</h1>
  <hr />

  <table border="1">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cellule(1,1)</td>
        <td style="width: 150px; text-align: center;">cellule(1,2)</td>
        <td>cellule(1,3)</td>
      </tr>
      <tr>
        <td>cellule(2,1)</td>
        <td>cellule(2,2)</td>
        <td>cellule(2,3</td>
      </tr>
    </tbody>
  </table>

  <table border="0">
    <tr>
      <td>Une image</td>
      <td>
        <img border="0" src="/images/cerisier.jpg"/></td>
    </tr>
    <tr>
      <td>le site de l'ISTIA</td>
      <td><a href="http://istia.univ-angers.fr">ici</a></td>
    </tr>
  </table>
</body>
</html>

Element	tagi i przykłady HTML
tytuł dokumentu	<title>tagi</title> (wiersz 5) tekst balises pojawi się w pasku tytułu przeglądarki wyświetlającej dokument
pozioma linia	<hr/>: wyświetla poziomą kreskę (wiersz 10)
tabela	<table atrybuty>....</table>: w celu zdefiniowania tabeli (wiersze 12, 32) <thead>...</thead>: w celu zdefiniowania nagłówków kolumn (wiersze 13, 19) <tbody>...</tbody>: służy do zdefiniowania zawartości tabeli (wiersze 20, 31) <tr atrybuty>...</tr>: w celu zdefiniowania wiersza (wiersze 21, 25) <td atrybuty>...</td>: do zdefiniowania komórki (wiersz 22) przykłady: <table border="1">...</table>: atrybut border określa grubość obramowania tabeli <td style="width: 150px; text-align: center;">komórka(1,2)</td>: definiuje komórkę, której zawartością będzie komórka(1,2). Zawartość ta zostanie wyśrodkowana w poziomie (text-align: center). Komórka będzie miała szerokość 150 pikseli (width: 150px)
obraz	<img border="0" src="/images/cerisier.jpg"/> (wiersz 38): definiuje obraz bez ramki (border=0"), którego plik źródłowy znajduje się w katalogu /images/cerisier.jpg na serwerze WWW (src="/images/cerisier.jpg"). Link ten znajduje się w dokumencie internetowym uzyskanym za pomocą URL http://localhost:port/html/balises.htm. W związku z tym przeglądarka zażąda pliku URL http://localhost:port/images/cerisier.jpg, aby pobrać obraz, do którego odwołuje się ten link.
link	<a href="http://istia.univ-angers.fr">tutaj</a> (wiersz 42): sprawia, że tekst ici służy jako link do strony URL http://istia.univ-angers.fr.
tło strony	<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (wiersz 8): wskazuje, że obraz, który ma służyć jako tło strony, znajduje się pod adresem URL /images/standard.jpg na serwerze WWW. W kontekście naszego przykładu przeglądarka wyśle żądanie do adresu URL http://localhost:port/images/standard.jpg, aby pobrać ten obraz tła. Ponadto treść dokumentu zostanie wyświetlona w prostokącie o wysokości 400 pikseli i szerokości 400 pikseli.

Na tym prostym przykładzie widać, że aby zbudować cały dokument, przeglądarka musi wysłać trzy żądania do serwera:

http://localhost:port/html/balises.htm, aby pobrać plik źródłowy HTML dokumentu
http://localhost:port/images/cerisier.jpg, aby pobrać obraz cerisier.jpg
http://localhost:port/images/standard.jpg, aby uzyskać obraz tła o numerze standard.jpg

2.5.2. Formularz HTML

Poniższy przykład przedstawia formularz:

Kod HTML generujący ten widok jest następujący:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="FormulairePost.aspx">
    <table border="0">
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

Powiązanie między kontrolą wizualną a tagiem HTML przedstawia się następująco:

Element	tag HTML
formularz	<form method="post" action="...">
pole wprowadzania danych	<input type="text" name="txtSaisie" size="20" value="kilka słów" />
ukryte pole wprowadzania danych	<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
pole wielowierszowe	<textarea rows="2" name="areaSaisie" cols="20"> wiersz1 wiersz 2 wiersz3 </textarea>
przyciski opcji	<input type="radio" value="Tak" name="R1" />Tak <input type="radio" name="R1" value="nie" checked="checked" />Nie
pola wyboru	<input type="checkbox" name="C1" value="jeden" />1 <input type="checkbox" name="C2" value="dwa" checked="checked" />2 <input type="checkbox" name="C3" value="trzy" />3
Lista rozwijana	<select size="1" name="cmbValeurs"> <option value="1">opcja1</option> <option selected="selected" value="2">opcja 2</option> <option value="3">opcja 3</option> </select>
lista z jednym wyborem	<select size="3" name="lst1"> <option selected="selected" value="1">lista1</option> <option value="2">lista2</option> <option value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
lista z możliwością wyboru wielu pozycji	<select size="3" name="lst2" multiple="multiple"> <option value="1">lista1</option> <option value="2">lista2</option> <option selected="selected" value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
przycisk typu „submit”	<input type="submit" value="Wyślij" name="cmdRenvoyer" />
przycisk typu reset	<input type="reset" value="Przywróć" name="cmdRétablir" />
przycisk typu button	<input type="button" value="Usuń" name="cmdEffacer" onclick="effacer()" />

Przyjrzyjmy się tym różnym tagom:

2.5.2.1. ulary

formularz


<form method="post" action="FormulairePost.aspx">

tag HTML

<form name="..." method="..." action="...">...</form>

atrybuty

name="frmexemple": nazwa formularza

method="..." : metoda używana przez przeglądarkę do wysyłania do serwera WWW wartości zebranych w formularzu

action="..." : adres, na który zostaną wysłane wartości zebrane w formularzu.

Formularz internetowy jest otoczony tagami <form>...</form>. Formularz może mieć nazwę (name="xx"). Dotyczy to wszystkich elementów kontrolnych, które można znaleźć w formularzu. Celem formularza jest zebranie informacji podanych przez użytkownika za pomocą klawiatury lub myszy oraz wysłanie ich do adresu URL serwera internetowego. Którego? Tego, który jest wskazany w atrybucie action="URL". Jeśli ten atrybut nie występuje, informacje zostaną wysłane do serwera dokumentu, w którym znajduje się formularz. Klient sieciowy może wykorzystać dwie różne metody o nazwach POST i GET do wysyłania danych na serwer WWW. Atrybut method="méthode", przy czym method jest równy GET lub POST, w tagu <form> wskazuje przeglądarce metodę, jaką należy zastosować do wysłania informacji zebranych w formularzu do adresu URL określonego przez atrybut action="URL". Gdy atrybut method nie jest określony, domyślnie stosowana jest metoda GET.

2.5.2.2. Pola wprowadzania tekstu

pole tekstowe

tag HTML

<input type="..." name="..." size=".." value=".."/>

Tag `input` występuje w różnych typach elementów sterujących. To właśnie atrybut type pozwala odróżnić te różne elementy sterujące od siebie.

atrybuty

type="text": określa, że jest to pole wprowadzania danych

type="password": znaki w polu wprowadzania danych są zastępowane znakami *. Jest to jedyna różnica w stosunku do zwykłego pola wprowadzania danych. Ten typ elementu kontrolnego nadaje się do wprowadzania haseł.

size="20": liczba znaków widocznych w polu – nie uniemożliwia wprowadzenia większej liczby znaków

name="txtSaisie": nazwa elementu

value="kilka słów": tekst, który będzie wyświetlany w polu wprowadzania danych.

2.5.2.3. Pola wprowadzania danych wielowierszowe

Pole wprowadzania wielowierszowe

wiersz1

wiersz 2

wiersz 3

</textarea>

tag HTML	<textarea ...>tekst</textarea> wyświetla wielowierszowe pole wprowadzania tekstu z domyślnym tekstem
atrybuty	rows="2": liczba wierszy cols="'20" : liczba kolumn name="areaSaisie": nazwa kontrolki

2.5.2.4. Przyciski opcji

przyciski opcji

<input type="radio" value="Tak" name="R1" />Tak

<input type="radio" name="R1" value="nie" checked="checked" />Nie

tag HTML

<input type="radio" attribut2="valeur2" ..../>tekst

wyświetla przycisk opcji z tekstem obok.

atrybuty

name="radio": nazwa elementu sterującego. Przyciski opcji o tej samej nazwie tworzą grupę przycisków, które wykluczają się wzajemnie: można zaznaczyć tylko jeden z nich.

value="wartość": wartość przypisana do przycisku opcji. Nie należy mylić tej wartości z tekstem wyświetlanym obok przycisku opcji. Ten ostatni służy wyłącznie do wyświetlania.

checked="checked": jeśli to słowo kluczowe jest obecne, przycisk opcji jest zaznaczony, w przeciwnym razie nie jest.

2.5.2.5. Pola wyboru

Pola wyboru

<input type="checkbox" name="C1" value="jeden" />1

<input type="checkbox" name="C2" value="dwa" checked="checked" />2

<input type="checkbox" name="C3" value="trzy" />3

tag HTML

<input type="checkbox" attribut2="valeur2" ....>tekst

wyświetla pole wyboru z tekstem obok.

atrybuty

name="C1": nazwa elementu sterującego. Pola wyboru mogą, ale nie muszą mieć tę samą nazwę. Pola o tej samej nazwie tworzą grupę powiązanych pól.

value="wartość": wartość przypisana do pola wyboru. Nie należy mylić tej wartości z tekstem wyświetlanym obok pola wyboru. Ten ostatni służy wyłącznie do wyświetlania.

checked= „checked”: jeśli to słowo kluczowe występuje, pole wyboru jest zaznaczone, w przeciwnym razie nie jest.

2.5.2.6. Lista rozwijana (combo)

Combo

<option value="1">opcja1</option>

<option selected="selected" value="2">opcja 2</option>

<option value="3">opcja 3</option>

</select>

tag HTML

<select size=".." name="..">

<option [selected="selected"] value=”v”>...</option>

...

</select>

wyświetla na liście teksty zawarte między znacznikami <option>...</option>

atrybuty

name="cmbValeurs": nazwa kontrolki.

size="1": liczba widocznych elementów listy. size="1" sprawia, że lista działa jak pole kombi.

selected="selected": jeśli to słowo kluczowe występuje dla elementu listy, element ten pojawia się jako zaznaczony na liście. W naszym przykładzie powyżej element listy choix2 pojawia się jako zaznaczony element pola kombi, gdy jest ono wyświetlane po raz pierwszy.

value=”v”: jeśli element zostanie zaznaczony przez użytkownika, to właśnie ta wartość [v] zostanie przesłana na serwer. W przypadku braku tego atrybutu na serwer zostanie przesłany wyświetlany i zaznaczony tekst.

2.5.2.7. Lista z jednym wyborem

lista z jednym wyborem

<option selected="selected" value="1">lista1</option>

<option value="2">lista2</option>

<option value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

tag HTML	<select size=".." name=".."> <option [selected="selected"]>...</option> ... </select> wyświetla na liście teksty zawarte między tagami <option>...</option>
atrybuty	takie same jak w przypadku listy rozwijanej wyświetlającej tylko jeden element. Ten element sterujący różni się od poprzedniej listy rozwijanej jedynie atrybutem size>1.

2.5.2.8. Lista z możliwością wielokrotnego wyboru

lista z możliwością wyboru pojedynczego elementu

<option value="1" selected="selected">lista1</option>

<option value="2">lista2</option>

<option selected="selected" value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

tag HTML	<select size=".." name=".." multiple="multiple"> <option [selected="selected"]>...</option> ... </select> wyświetla na liście teksty zawarte między tagami <option>...</option>
atrybuty	multiple: umożliwia zaznaczenie wielu elementów z listy. W powyższym przykładzie zaznaczone są zarówno elementy liste1, jak i liste3.

2.5.2.9. Przycisk typu button

przycisk typu button

tag HTML

<input type="button" value="..." name="..." onclick="effacer()" ..../>

atrybuty

type="button": definiuje kontrolkę przycisku. Istnieją dwa inne typy przycisków: submit i reset.

value="Usuń": tekst wyświetlany na przycisku

onclick="funkcja()": pozwala zdefiniować funkcję, która ma zostać wykonana po kliknięciu przycisku przez użytkownika. Funkcja ta jest częścią skryptów zdefiniowanych w wyświetlanym dokumencie internetowym. Powyższa składnia jest zgodna ze standardem javascript. Jeśli skrypty są napisane w języku VBScript, należy wpisać onclick="funkcja" bez nawiasów. Składnia pozostaje taka sama, jeśli do funkcji trzeba przekazać parametry: onclick="funkcja(val1, val2,...)"

W naszym przykładzie kliknięcie przycisku Effacer wywołuje następującą funkcję JavaScript effacer:

function effacer() {

alert("Kliknąłeś przycisk Usuń");

}

</script>

Funkcja effacer wyświetla komunikat:

2.5.2.10. Przycisk typu „submit”

przycisk typu „submit”

tag HTML	<input type="submit" value="Wyślij" name="cmdRenvoyer" />
atrybuty	type="submit": określa przycisk jako przycisk wysyłający dane formularza do serwera WWW. Gdy użytkownik kliknie ten przycisk, przeglądarka wyśle dane formularza do adresu URL zdefiniowanego w atrybucie action tagu <form> zgodnie z metodą określoną przez atrybut method tego samego tagu. value="Wyślij”: tekst wyświetlany na przycisku

2.5.2.11. Przycisk typu reset

przycisk typu reset

tag HTML	<input type="reset" value="Przywróć" name="cmdRétablir"/>
atrybuty	type="reset": określa przycisk jako przycisk resetowania formularza. Gdy użytkownik kliknie ten przycisk, przeglądarka przywróci formularz do stanu, w jakim go otrzymała. value="Przywróć": tekst wyświetlany na przycisku

2.5.2.12. Pole ukryte

ukryte pole

tag HTML

<input type="hidden" name="..." value="..."/>

atrybuty

type="hidden": określa, że jest to pole ukryte. Pole ukryte stanowi część formularza, ale nie jest widoczne dla użytkownika. Jeśli jednak użytkownik poprosiłby przeglądarkę o wyświetlenie kodu źródłowego, zobaczyłby tag <input type="hidden" value="..."> i tym samym wartość pola ukrytego.

value="uneValeur": wartość pola ukrytego.

Jaka jest zaleta pola ukrytego? Pozwala to serwerowi internetowemu na przechowywanie informacji w trakcie kolejnych żądań wysyłanych przez klienta. Rozważmy przykład aplikacji do zakupów online. Klient kupuje pierwszy produkt o numerze art1 w ilości q1 na pierwszej stronie katalogu, a następnie przechodzi do kolejnej strony katalogu. Aby zapamiętać, że klient kupił q1 sztuk produktu o numerze art1, serwer może umieścić te dwie informacje w ukrytym polu formularza internetowego na nowej stronie. Na tej nowej stronie klient kupuje produkty o numerach q2 i art2. Gdy dane z tego drugiego formularza zostaną wysłane na serwer (submit), serwer otrzyma nie tylko informacje (q2,art2), ale także (q1,art1), które również stanowią część formularza jako ukryte pola. Serwer WWW umieści wówczas w nowym ukrytym polu informacje (q1,art1) oraz (q2,art2) i wyśle nową stronę katalogu. I tak dalej.

2.5.3. Wysyłanie wartości formularza do serwera WWW przez klienta WWW

W poprzednim opracowaniu wspomnieliśmy, że klient internetowy dysponuje dwiema metodami wysyłania do serwera internetowego wartości z wyświetlonego formularza: metodami GET i POST. Przyjrzyjmy się na przykładzie różnicy między tymi dwiema metodami.

2.5.3.1. Metoda GET

Przeprowadźmy pierwszy test, w którym w kodzie HTML dokumentu tag <form> jest zdefiniowany w następujący sposób:


<form method="get" action="FormulaireGet.aspx">

Gdy użytkownik kliknie przycisk [1], wartości wprowadzone w formularzu zostaną przesłane na stronę ASP.NET [2]. Strona ta nie wykonuje żadnych działań na tych parametrach i zwraca pustą stronę. Chcemy jedynie dowiedzieć się, w jaki sposób przeglądarka przekazuje wprowadzone wartości do serwera WWW. W tym celu wykorzystamy narzędzie do debugowania dostępne w przeglądarce Chrome. Aktywuje się je, wpisując CTRL-I (wielkimi literami) [3]:

Ponieważ interesuje nas komunikacja sieciowa między przeglądarką a serwerem internetowym, otwieramy powyższą kartę [Network], a następnie klikamy przycisk [Envoyer] w formularzu. Jest to przycisk typu [submit] umieszczony wewnątrz tagu [form]. Przeglądarka reaguje na kliknięcie, żądając wartości URL [FormulaireGet.aspx] podanej w atrybucie [action] tagu [form], przy użyciu metody GET podanej w atrybucie [method]. Otrzymujemy wówczas następujące informacje:

Powyższy zrzut ekranu przedstawia element URL, o który poprosiła przeglądarka po kliknięciu przycisku [envoyer]. Przeglądarka rzeczywiście żąda adresu URL, przewidzianego jako [FormulaireGet.aspx], ale na końcu dodaje informacje, które są wartościami wprowadzonymi w formularzu. Aby uzyskać więcej informacji, klikamy powyższy link:

Powyżej, w przypadku [1, 2], widzimy nagłówki HTTP wysłane przez przeglądarkę. Zostały one tutaj sformatowane. Aby wyświetlić surowy tekst tych nagłówków, klikamy link [view source] [3, 4]. Pełny tekst wygląda następująco:

GET /FormulaireGet.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Znajdujemy tu elementy, które pojawiały się już wcześniej. Inne pojawiają się po raz pierwszy:

Connection: keep-alive	klient prosi serwer, aby nie zamykał połączenia po wysłaniu odpowiedzi. Dzięki temu będzie mógł wykorzystać to samo połączenie do kolejnego żądania. Połączenie nie pozostaje otwarte w nieskończoność. Serwer zamknie je po zbyt długim okresie bezczynności.
Referer	URL – adres, który był wyświetlany w przeglądarce w momencie wysłania nowego żądania.

Nowością jest wiersz 1 w informacjach następujących po URL. Widać, że wybory dokonane w formularzu znajdują się w URL. Wartości wprowadzone przez użytkownika w formularzu zostały przekazane w poleceniu GET URL?param1=wartość1&param2=wartość2&... HTTP/1.1, gdzie parami to nazwy (atrybut name) elementów sterujących formularza internetowego, a valeuri to wartości z nimi powiązane. Poniżej przedstawiamy tabelę składającą się z trzech kolumn:

kolumna 1: zawiera definicję elementu sterującego HTML z przykładu;
kolumna 2: przedstawia wygląd tego elementu sterującego w przeglądarce;
kolumna 3: przedstawia wartość wysyłaną do serwera przez przeglądarkę dla elementu sterującego z kolumny 1 w postaci, jaką ma ona w zapytaniu GET z przykładu.

element sterujący HTML	wygląd	zwracana(-e) wartość(-e)
<input type="radio" value="Tak" name="R1"/>Tak <input type="radio" name="R1" value="nie" checked="checked"/>Nie		R1=Tak – wartość atrybutu value przycisku opcji zaznaczonego przez użytkownika.
<input type="checkbox" name="C1" value="jeden"/>1 <input type="checkbox" name="C2" value="dwa" checked="checked"/>2 <input type="checkbox" name="C3" value="trzy"/>3		C1=jeden C2=dwa – wartości atrybutów value pól zaznaczonych przez użytkownika
<input type="text" name="txtSaisie" size="20" value="kilka słów"/>		txtSaisie=programowanie+Web - tekst wpisany przez użytkownika w polu wprowadzania danych. Spacje zostały zastąpione znakiem +
<input type="password" name="txtMdp" size="20" value="unMotDePasse"/>		txtMdp=tojesttajemnica – tekst wpisany przez użytkownika w polu wprowadzania danych
<textarea rows="2" name="areaSaisie" cols="20"> wiersz1 wiersz 2 wiersz 3 </textarea>		areaSaisie=podstawy+programowania+%0D%0A programowania+stron+internetowych - tekst wpisany przez użytkownika w polu wprowadzania danych. %OD%OA to znacznik końca linii. Spacje zostały zastąpione znakiem +
<select size="1" name="cmbValeurs"> <option value='1'>opcja1</option> <option selected="selected" value='2'>opcja2</option> <option value='3'>opcja3</option> </select>		cmbWartości=3 - atrybut [value] elementu wybranego przez użytkownika
<select size="3" name="lst1"> <option selected="selected" value='1'>lista1</option> <option value='2'>lista2</option> <option value='3'>lista3</option> <option value='4'>lista4</option> <option value='5'>lista5</option> </select>		lst1=3 - atrybut [value] elementu wybranego przez użytkownika
<select size="3" name="lst2" multiple="multiple"> <option selected="selected" value='1'>lista1</option> <option value='2'>lista2</option> <option selected="selected" value='3'>lista3</option> <option value='4'>lista4</option> <option value='5'>lista5</option> </select>		lst2=1 lst2=3 - atrybuty [value] elementów wybranych przez użytkownika
<input type="submit" value="Wyślij" name="cmdRenvoyer"/>		cmdRenvoyer=Wyślij - nazwa i atrybut value przycisku, który posłużył do wysłania danych formularza na serwer
<input type="hidden" name="secret" value="uneValeur"/>		secret=wartość - atrybut value ukrytego pola

2.5.3.2. Metoda POST

Modyfikujemy dokument HTML tak, aby przeglądarka korzystała teraz z metody POST do wysyłania wartości formularza na serwer WWW:


  <form method="post" action="FormulairePost.aspx">

Wypełniamy formularz tak samo jak w przypadku metody GET i przesyłamy parametry na serwer za pomocą przycisku [Envoyer]. Tak jak w poprzednim akapicie na stronie 34, w przeglądarce Chrome mamy dostęp do nagłówków HTTP żądania wysłanego przez przeglądarkę:

POST /FormulairePost.aspx HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Content-Length: 195
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:56376
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

W żądaniu HTTP od klienta pojawiają się nowe elementy:

POST URL HTTP/1.1	Zapytanie GET zostało zastąpione zapytaniem POST. Parametry nie występują już w pierwszym wierszu zapytania. Można zauważyć, że znajdują się one teraz (wiersz 14) za zapytaniem HTTP, po pustym wierszu. Ich kodowanie jest identyczne jak w zapytaniu GET.
Content-Length	liczba „wysłanych” znaków, c.a.d. Liczba znaków, które serwer WWW będzie musiał odczytać po otrzymaniu nagłówków HTTP, aby pobrać dokument wysłany przez klienta. Dokumentem tym jest w tym przypadku lista wartości z formularza.
Content-type	określa typ dokumentu, który klient wyśle po nagłówkach HTTP. Typ [application/x-www-form-urlencoded] wskazuje, że jest to dokument zawierający wartości z formularza.

Istnieją dwie metody przesyłania danych do serwera WWW: GET i POST. Czy jedna z tych metod jest lepsza od drugiej? Widzieliśmy, że jeśli wartości formularza były wysyłane przez przeglądarkę metodą GET, przeglądarka wyświetlała w polu Adresse żądaną wartość URL w postaci URL?param1=val1&param2=val2&.... Można to postrzegać jako zaletę lub wadę:

zaletą, jeśli chcemy umożliwić użytkownikowi dodanie tego skonfigurowanego adresu URL do ulubionych;
wadą, jeśli nie chcemy, aby użytkownik miał dostęp do niektórych informacji zawartych w formularzu, takich jak na przykład pola ukryte.

W dalszej części będziemy stosować w naszych formularzach niemal wyłącznie metodę POST.

2.6. Conclusion

W niniejszym rozdziale przedstawiono różne podstawowe pojęcia związane z tworzeniem stron internetowych:

wymianę danych między klientem a serwerem za pośrednictwem protokołu HTTP;
tworzenie dokumentu przy użyciu języka HTML;
tworzenie formularzy do wprowadzania danych.

Na przykładzie mogliśmy zobaczyć, w jaki sposób klient może wysyłać informacje do serwera WWW. Nie omówiliśmy jednak, w jaki sposób serwer może

pobierać te informacje;
przetwarzać je;
wysłać do klienta dynamiczną odpowiedź zależną od wyniku przetwarzania.

Jest to dziedzina programowania internetowego, którą omówimy w następnym rozdziale wraz z prezentacją technologii ASP.NET MVC.