Wprowadzenie

Rozwój i początki WWW

Sieć WWW (World Wide Web) nieustannie się rozwija, znacznie przekraczając pierwotne założenia z początku lat 90. Jej stworzenie było odpowiedzią na konkretne potrzeby: podczas zaawansowanych eksperymentów w ośrodku CERN generowano ogromne ilości danych, których nie dało się efektywnie udostępniać naukowcom na całym świecie.

Internet już istniał, a do sieci było podłączonych kilkaset tysięcy komputerów. W tym kontekście Tim Berners-Lee, specjalista pracujący w CERN, zaprojektował sposób na poruszanie się między dokumentami za pomocą hiperłączy — tak powstał protokół HTTP (Hyper Text Transfer Protocol). Stworzył również język HTML (Hyper Text Markup Language) oraz pierwszą przeglądarkę i serwer WWW.

W tamtym czasie była to koncepcja rewolucyjna. Przed WWW użytkownicy korzystali głównie z modemów i tablic ogłoszeń (BBS), które działały lokalnie i wymagały osobnych połączeń dla każdego systemu. Berners-Lee ujednolicił komunikację, tworząc wspólną platformę dostępu do informacji.

Do połowy lat 90. na rynku działały już trzy główne graficzne przeglądarki, a sieć odwiedzało około 5 milionów użytkowników. Jednak szybko zauważono, że statyczne strony z tekstem i grafiką, mimo obecności hiperłączy, nie wykorzystywały w pełni potencjału komputerów i Internetu. WWW potrzebowała dynamiki.

Dynamiczne komponenty WWW, takie jak koszyki zakupowe, wyszukiwarki czy sieci społecznościowe, całkowicie zmieniły sposób korzystania z Internetu. Pojawiła się potrzeba natychmiastowej interakcji, dostosowania treści do użytkownika oraz efektywnego przetwarzania danych.

W tej części omówimy główne elementy, które kształtują nowoczesną sieć WWW, oraz technologie i oprogramowanie, które umożliwiają dynamiczne i interaktywne doświadczenia użytkownika.

HTTP i HTML: fundamenty sieci WWW

HTTP (Hypertext Transfer Protocol) to standard komunikacyjny, który reguluje sposób wysyłania żądań oraz odbierania odpowiedzi – proces ten zachodzi pomiędzy przeglądarką internetową (działającą na komputerze użytkownika końcowego) a serwerem WWW. Zadaniem serwera jest odebranie żądania i udzielenie sensownej odpowiedzi, zazwyczaj poprzez przesłanie żądanej strony internetowej. Stąd pochodzi nazwa „serwer” – urządzenie obsługujące żądania.

Partnerem serwera w tej wymianie jest klient – tym terminem określa się zarówno przeglądarkę, jak i komputer, na którym ona działa. Pomiędzy klientem a serwerem mogą znajdować się inne urządzenia, takie jak routery, bramy dostępu czy przełączniki, których zadaniem jest zapewnienie poprawnej transmisji danych.

Serwery WWW zazwyczaj obsługują wiele połączeń jednocześnie. W stanie bezczynności oczekują na nowe żądania. Gdy takie żądanie się pojawi, serwer je odbiera i odpowiada, przesyłając klientowi odpowiednie dane.

Procedura „żądanie — odpowiedź”

W najprostszej postaci mechanizm „żądanie — odpowiedź” polega na tym, że przeglądarka prosi serwer WWW o przesłanie strony internetowej, a następnie wyświetla otrzymaną zawartość. Proces ten przebiega według następujących kroków:

Wprowadzasz adres URL (np. http://server.com) w pasku adresu przeglądarki.
Przeglądarka wyszukuje adres IP odpowiadający nazwie domeny server.com.
Przeglądarka wysyła żądanie o przesłanie strony głównej serwera server.com.
Żądanie przechodzi przez Internet i dociera do serwera WWW.
Serwer odnajduje odpowiedni plik HTML na swoim dysku twardym.
Serwer przesyła stronę internetową z powrotem do przeglądarki klienta.
Przeglądarka renderuje i wyświetla stronę użytkownikowi.

Podstawowa sekwencja procesu „żądanie — odpowiedź” między klientem a serwerem

Proces „żądanie — odpowiedź” dla dynamicznych stron internetowych

Podczas przesyłania typowej strony internetowej proces „żądanie — odpowiedź” wykonywany jest dla każdego obiektu znajdującego się na stronie: elementów graficznych, osadzonych materiałów wideo, animacji, szablonów CSS i td.

W kroku 2 przeglądarka wyszukuje adres IP odpowiadający nazwie domenowej server.com. Każde urządzenie podłączone do Internetu, w tym Twój komputer, posiada własny adres IP. Jednak zazwyczaj dostęp do serwerów WWW odbywa się za pomocą nazw domenowych, takich jak google.com. Przeglądarka korzysta w tym celu z pomocniczej usługi internetowej – systemu nazw domenowych (DNS – Domain Name Service), aby przetłumaczyć nazwę domeny na adres IP serwera.

W przypadku przesyłania dynamicznych stron internetowych procedura zawiera więcej kroków, ponieważ mogą zostać zaangażowane język PHP oraz baza danych MySQL.

Wprowadzasz w pasku adresu przeglądarki adres http://server.com.
Przeglądarka wyszukuje adres IP odpowiadający nazwie domenowej server.com.
Przeglądarka wysyła żądanie pobrania strony głównej z serwera server.com.
Żądanie dociera przez sieć do serwera WWW.
Serwer WWW lokalizuje stronę na swoim dysku twardym.
Po załadowaniu strony do pamięci, serwer wykrywa, że zawiera ona kod PHP i przekazuje ją do interpretera PHP.
Interpreter PHP wykonuje kod PHP.
Niektóre fragmenty kodu PHP zawierają instrukcje MySQL, które interpreter przekazuje silnikowi bazy danych MySQL.
Baza danych MySQL zwraca wyniki zapytań interpreterowi PHP.
Interpreter PHP zwraca serwerowi WWW wynik działania kodu PHP wraz z danymi z bazy danych.
Serwer WWW odsyła gotową stronę klientowi, który ją wyświetla na ekranie.

Dynamiczna sekwencja procesu „zapytanie – odpowiedź” wykonywanego przez klienta i serwer

Oczywiście zapoznanie się z tym procesem i poznanie współdziałania trzech elementów nie zaszkodzi, ale w praktyce te szczegóły nie będą potrzebne, ponieważ wszystko odbywa się w trybie automatycznym.

W każdym z przykładów strony HTML zwrócone do przeglądarki mogą zawierać również kod JavaScript interpretowany lokalnie na komputerze klienta. Kod ten może zainicjować kolejne żądanie, podobnie jak żądanie może zostać zainicjowane przez obiekty wbudowane, na przykład obrazy.

Zalety korzystania z PHP, MySQL, JavaScript i CSS

Przejście od Web 1.0 do Web 1.1 przyniosło dynamiczny rozwój technologii internetowych po stronie klienta i serwera. Przeglądarki zaczęły wspierać rozszerzenia, takie jak Java, JavaScript czy ActiveX, a na serwerach wykorzystywano języki skryptowe (np. Perl) oraz interfejs CGI.

Z czasem na czoło wysunęły się trzy kluczowe technologie: PHP, MySQL oraz JavaScript. PHP zyskał popularność dzięki prostocie i łatwej integracji z bazą danych MySQL, umożliwiając szybkie tworzenie dynamicznych treści. MySQL to wydajny, a zarazem prosty w obsłudze system zarządzania bazą danych, dostarczający wszystkie potrzebne funkcje do przetwarzania danych w aplikacjach webowych.

JavaScript odpowiada za dynamiczną interakcję z użytkownikiem oraz manipulację strukturą i stylami strony (HTML i CSS). Dodatkowo technologia AJAX umożliwia przetwarzanie danych i komunikację z serwerem w tle — bez konieczności przeładowywania strony.

W połączeniu z CSS, odpowiadającym za prezentację graficzną stron, zestaw tych technologii (PHP, MySQL, JavaScript, CSS) tworzy solidne podstawy do budowy nowoczesnych, dynamicznych i interaktywnych serwisów internetowych, takich jak aplikacje społecznościowe i rozwiązania klasy Web 2.0.

PHP – podstawy użycia i zalety

PHP znacząco ułatwia tworzenie dynamicznych stron internetowych. Wystarczy przypisać stronie rozszerzenie .php, aby zyskać dostęp do języka skryptowego po stronie serwera.

Kod PHP można wstawiać bezpośrednio w kod HTML. Serwer interpretuje wszystko między znacznikami <?php i ?>. Wszystko poza tymi znacznikami jest przekazywane przeglądarce jako zwykły HTML.

<?php
echo "Today is " . date("l") . ". ";
?>
Here's the latest news.

Efektem działania powyższego kodu może być na przykład: Today is Wednesday. Here's the latest news.

Często PHP umieszcza się bezpośrednio w tekście HTML, jak w tym uproszczonym przykładzie:

Today is <?php echo date("l"); ?>. Here's the latest news.

Choć PHP nie dorównuje prędkością językom kompilowanym (np. C), jest wystarczająco szybki i doskonale integruje się z HTML-em.

W PHP można m.in. dynamicznie modyfikować zawartość strony, przetwarzać dane z formularzy, zapisywać i odczytywać dane z bazy danych, a nawet komunikować się z zewnętrznymi serwisami.

Proces „żądanie — odpowiedź” i rola MySQL w dynamicznych stronach WWW

Podczas ładowania typowej strony internetowej, proces „żądanie — odpowiedź” zachodzi dla każdego elementu na stronie – obrazów, osadzonych filmów, stylów CSS i innych zasobów. W kroku 2 przeglądarka tłumaczy nazwę domenową (np. server.com) na adres IP za pomocą DNS (Domain Name System), aby nawiązać połączenie z odpowiednim serwerem.

Dla stron dynamicznych proces ten jest bardziej złożony, ponieważ często angażuje język PHP i bazę danych MySQL (zob. rys. ). W takim przypadku przeglądarka wysyła żądanie, a serwer przetwarza je przy użyciu kodu PHP, pobiera dane z bazy i generuje dynamiczny kod HTML.

Dlaczego MySQL?

W początkach WWW dane użytkowników (np. loginy, hasła) przechowywano w prostych plikach tekstowych, co prowadziło do problemów z wydajnością i bezpieczeństwem. Rozwiązaniem stały się relacyjne bazy danych – uporządkowane, bezpieczne i zoptymalizowane pod kątem zapytań. MySQL, będący darmowym systemem zarządzania bazą danych (SZBD), jest dziś szeroko wykorzystywany na serwerach WWW.

Najwyższym poziomem struktury w MySQL jest baza danych, w której znajdują się tabele. Przykład tabeli users z kolumnami surname, firstname i email pozwala przechowywać dane użytkowników. Dodanie nowego rekordu wygląda następująco:

INSERT INTO users VALUES('Smith', 'John', 'jsmith@mysite.com');

To polecenie używa języka SQL (Structured Query Language), który powstał w latach 70. XX wieku. Jego składnia przypomina angielski, dzięki czemu jest przystępna i czytelna.

Wyszukiwanie danych

Aby wyszukać użytkownika na podstawie adresu e-mail, wystarczy użyć zapytania:

SELECT surname, firstname FROM users WHERE email = 'jsmith@mysite.com';

MySQL zwróci pasujące wyniki, np. Smith, John. Możliwości języka SQL wykraczają daleko poza INSERT i SELECT – można łączyć tabele, filtrować dane, wyszukiwać częściowe dopasowania, sortować i ograniczać wyniki.

Za pomocą PHP zapytania SQL są wykonywane bezpośrednio z poziomu kodu, bez potrzeby używania konsoli MySQL. Dzięki temu dane można dynamicznie pobierać, modyfikować i wykorzystywać w zależności od wyników wcześniejszych zapytań.

Dodatkowo MySQL oferuje zestaw wbudowanych funkcji przyspieszających najczęstsze operacje, co jeszcze bardziej zwiększa jego wydajność i możliwości.

JavaScript i jego rola w dynamicznych stronach internetowych

JavaScript to najstarsza z trzech technologii omawianych w tym kursie. Został stworzony, aby umożliwić skryptom dostęp do wszystkich elementów dokumentu HTML. Oznacza to, że pozwala na dynamiczną interakcję z użytkownikiem, np. sprawdzanie poprawności adresów e-mail w formularzach czy wyświetlanie podpowiedzi w stylu „Czy chodziło Ci o...?”. Jednak z punktu widzenia bezpieczeństwa, które zawsze powinno być realizowane po stronie serwera, JavaScript nie może być jedynym zabezpieczeniem.

W połączeniu z CSS, JavaScript stanowi fundament dynamicznych stron, które mogą zmieniać się na oczach użytkownika, bez konieczności przeładowania całej strony z serwera.

Problemy mogą pojawić się z powodu różnic w implementacji JavaScriptu przez różnych producentów przeglądarek. Często dodawali oni własne funkcje bez uwzględnienia kompatybilności. Obecnie większość twórców przeglądarek dąży do zgodności ze standardami, ale wiele starszych przeglądarek wciąż jest używanych. Istnieją jednak biblioteki i technologie, które pomagają radzić sobie z tymi niezgodnościami.

Przykład kodu JavaScript

<script>
document.write("Today is " + Date());
</script>

Powyższy kod mówi przeglądarce, aby potraktowała zawartość znacznika <script> jako JavaScript, co spowoduje wyświetlenie tekstu „Today is ” wraz z aktualną datą, np.:

Jeśli nie potrzebujesz określać konkretnej wersji JavaScriptu, możesz pominąć atrybut type="text/javascript".

AJAX i asynchroniczność

JavaScript nadal służy głównie do dynamicznego zarządzania elementami HTML, ale jest też kluczowy w technologii AJAX — umożliwiającej komunikację z serwerem w tle, bez przeładowania strony.

Początkowo AJAX oznaczał Asynchronous JavaScript and XML, jednak obecnie dane często przesyłane są w formacie JSON. Dzięki AJAX-owi strony internetowe mogą działać jak aplikacje – zamiast ładować wszystko od nowa, możliwa jest szybka zmiana wybranego elementu, np. zdjęcia profilowego lub przycisku.

jQuery — popularna biblioteka

jQuery to popularna biblioteka JavaScript, która upraszcza pisanie szybkiego, zgodnego z wieloma przeglądarkami kodu. Choć istnieją inne rozwiązania, jQuery jest jedną z najbardziej niezawodnych i najczęściej wykorzystywanych bibliotek, szczególnie przez doświadczonych programistów. Ułatwia tworzenie interaktywnych i responsywnych stron internetowych.

CSS i jego rola w dynamicznych stronach

CSS3 wprowadził nowe możliwości, które wcześniej wymagały JavaScriptu, takie jak animowane przejścia czy transformacje. CSS pozwala stylizować elementy HTML, zmieniając ich rozmiary, kolory, marginesy czy obramowania, a także dodawać efekty dynamiczne za pomocą kilku linii kodu.

Przykład prostego kodu CSS w sekcji

p {
  text-align: justify;
  font-family: Helvetica;
};

Powyższe reguły wyrównują tekst w akapitach i ustawiają czcionkę Helvetica. CSS można stosować bezpośrednio w tagach, w osobnych plikach lub w sekcji, co zapewnia elastyczność w stylizacji stron.

CSS3 umożliwia również tworzenie efektów, takich jak animacje po najechaniu myszą (efekt hover), oraz dostęp do właściwości CSS z poziomu JavaScriptu lub HTML, co pozwala na precyzyjne dostosowanie wyglądu strony.

HTML5 i jego znaczenie dla nowoczesnych stron internetowych

HTML5 to standard, który zrewolucjonizował tworzenie stron internetowych, eliminując ograniczenia poprzednich wersji HTML. Powstał, by sprostać potrzebom ambitnych programistów, oferując natywne wsparcie dla grafiki, audio i wideo bez konieczności używania wtyczek, takich jak Flash, oraz rozwiązując problemy z niespójnościami w starszych wersjach HTML.

Prace nad HTML5 rozpoczęły się w 2004 roku z inicjatywy Mozilla Foundation i Opera Software, a ostateczny projekt został opublikowany przez World Wide Web Consortium (W3C) w 2013 roku. Choć standard wciąż ewoluuje (np. w kierunku HTML5.1), HTML5 jest fundamentem nowoczesnej sieci i pozostanie nim przez wiele lat.

Kluczowe cechy HTML5

HTML5 wprowadził wiele nowych możliwości, przy minimalnych zmianach w istniejących właściwościach. Główne innowacje to:

Rozszerzona struktura: Nowe elementy, takie jak <nav>, <footer>, zastąpiły przestarzałe, jak <font> czy <center>.
Nowe API: Element <canvas> umożliwia rysowanie grafiki, a elementy <audio> i <video> obsługują multimedia. Wprowadzono także lokalne przechowywanie danych i wsparcie dla aplikacji offline.
Technologie graficzne: MathML (dla formuł matematycznych) i SVG (dla skalowalnej grafiki wektorowej) rozszerzają możliwości wizualne, choć są to specjalistyczne technologie.

Przykłady i uproszczenia

HTML5 uprościł składnię, rezygnując z wymogów XHTML. Na przykład, samozamykające się znaczniki, takie jak <br> czy <hr>, nie wymagają już ukośnika (<br />), co zmniejsza ilość kodu i zwiększa czytelność.

Przykład kodu HTML5:


<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 150, 80);
</script>

Powyższy kod tworzy prostokąt na elemencie <canvas>, demonstrując podstawowe możliwości graficzne HTML5.

HTML5 to standard, który nie tylko ulepszył istniejące technologie, ale także otworzył drzwi do tworzenia bardziej interaktywnych, wydajnych i dostępnych aplikacji internetowych. Jego znajomość jest kluczowa dla współczesnych programistów.

Web-serwer Apache i jego rola w dynamicznych technologiach internetowych

Apache to kluczowy element dynamicznych technologii internetowych, obok PHP, MySQL, JavaScript, CSS i HTML5. Jest to serwer HTTP, który obsługuje komunikację między klientem a serwerem, dostarczając nie tylko pliki HTML, ale także szeroki zakres zasobów, takich jak obrazy, pliki MP3, strumienie RSS czy animacje Flash.

Zasoby obsługiwane przez Apache nie muszą być statycznymi plikami. Mogą być generowane dynamicznie, np. przez skrypty PHP, które tworzą obrazy, dokumenty lub inne treści w locie lub z wyprzedzeniem. Przykładem jest biblioteka GD (Graphics Draw), wykorzystywana przez PHP do generowania i przetwarzania grafiki.

Moduły Apache

Apache oferuje bogaty zestaw modułów, które rozszerzają jego funkcjonalność. Najważniejsze dla programistów to:

Moduły bezpieczeństwa: Zapewniają ochronę serwera i aplikacji.
Moduł Rewrite: Umożliwia przetwarzanie i przekształcanie adresów URL zgodnie z potrzebami serwera.
Moduł Proxy: Obsługuje buforowanie często żądanych stron, zmniejszając obciążenie serwera.

Moduły te, często wbudowane w Apache lub PHP, pozwalają na elastyczne dostosowanie serwera do wymagań aplikacji, poprawiając wydajność i bezpieczeństwo.

Przykład konfiguracji mod_rewrite

Poniższy przykład pokazuje prostą regułę mod_rewrite w pliku .htaccess, która przekierowuje URL do bardziej przyjaznej formy:


RewriteEngine On
RewriteRule ^produkty/([0-9]+)/?$ product.php?id=$1 [L]

Powyższy kod przekierowuje adresy w formacie produkty/123 na product.php?id=123, co ułatwia zarządzanie URL-ami.

Apache, dzięki swojej modularności i wszechstronności, jest fundamentem dla dynamicznych stron internetowych, umożliwiając efektywne dostarczanie treści i optymalizację wydajności.

Synergia technologii webowych

Prawdziwa siła PHP, MySQL, JavaScript (czasami wspieranego przez jQuery lub inne frameworki), CSS oraz HTML5 ujawnia się w niezwykły sposób, w jaki te technologie współdziałają, tworząc dynamiczną treść internetową: PHP wykonuje główną pracę na serwerze internetowym, MySQL zarządza danymi, a CSS i JavaScript wspólnie dbają o prezentację strony internetowej. JavaScript może także komunikować się z kodem PHP na serwerze, gdy potrzebna jest aktualizacja (zarówno na serwerze, jak i na stronie internetowej). Dzięki nowym, wysoce efektywnym funkcjom HTML5, takim jak płótna, audio, wideo czy geolokalizacja, strony internetowe mogą stać się bardziej dynamiczne, interaktywne i multimedialne.

Warto teraz krótko podsumować wszystko, co omówiono w tym rozdziale, i bez użycia kodu programistycznego przeanalizować proces, który łączy niektóre z tych technologii w funkcji AJAX, powszechnie stosowanej na wielu stronach internetowych: sprawdzaniu podczas rejestracji nowego konta, czy wybrane imię użytkownika nie jest już zajęte przez innego użytkownika. Dobrym przykładem takiego wykorzystania technologii może być serwer pocztowy Gmail.

Proces AJAX

Proces AJAX składa się mniej więcej z następujących kroków:

Serwer generuje kod HTML, który tworzy formularz internetowy, zbierający niezbędne dane: nazwę użytkownika, imię, nazwisko oraz adres e-mail.
Jednocześnie serwer dołącza do kodu HTML kod JavaScript, który umożliwia monitorowanie zawartości pola wprowadzania nazwy użytkownika i sprawdzanie dwóch rzeczy:
- czy w polu tym wprowadzono jakikolwiek tekst;
- czy fokus wprowadzania został przeniesiony z tego pola po kliknięciu użytkownika w inne pole formularza.
Gdy tylko tekst zostanie wprowadzony, a fokus przeniesiony na inny element formularza, kod JavaScript w tle przesyła wprowadzoną nazwę użytkownika do skryptu PHP na serwerze internetowym i oczekuje odpowiedzi.
Serwer internetowy wyszukuje nazwę użytkownika i zwraca kodowi JavaScript odpowiedź, informując, czy dana nazwa jest już zajęta.
Następnie JavaScript umieszcza pod polem wprowadzania nazwy użytkownika wskaźnik akceptowalności nazwy, być może w formie zielonego haczyka lub czerwonego krzyżyka, wraz z odpowiednim tekstem.
Jeśli użytkownik wprowadzi niedopuszczalną nazwę, ale mimo to spróbuje wysłać formularz, kod JavaScript przerywa wysyłanie i ponownie zwraca uwagę użytkownika (na przykład poprzez wyświetlenie większego wskaźnika graficznego i/lub otwarcie okna ostrzeżenia) na konieczność wyboru innej nazwy.
Zaawansowana wersja tego procesu może nawet przeanalizować nazwę wybraną przez użytkownika i zaproponować alternatywną, dostępną w danym momencie nazwę.

Wszystko to dzieje się w tle, dla wygody użytkownika i zapewnienia spójnego odbioru całego procesu, bez angażowania jego uwagi. Bez użycia AJAX cały formularz zostałby wysłany na serwer, który następnie zwróciłby kod HTML z podświetleniem pól, w których popełniono błędy. Można to zrobić w ten sposób, ale przetwarzanie pola w locie wygląda znacznie ciekawiej i przyjemniej.

Technologia AJAX może być wykorzystywana do znacznie szerszego zakresu zadań niż tylko kontrola i przetwarzanie wprowadzanych danych. W dalszej części tej książki omówione zostaną liczne dodatkowe techniki realizowane przy użyciu AJAX.

W tym rozdziale przedstawiono dość wyczerpujące wprowadzenie do podstawowych technologii stosowanych w PHP, MySQL, JavaScript, CSS oraz HTML5 (a także Apache) oraz omówiono sposób ich współdziałania. W rozdziale drugim przeanalizowane zostaną sposoby konfiguracji własnego serwera przeznaczonego do tworzenia stron internetowych, na którym będzie można praktycznie przećwiczyć весь omawiany materiał.