PHP i HTML. Tworzenie dynamicznych stron WWW [PDF]

Zitiervorschau

Spis treści Rozdział 1. Wstęp . ............................................................................................ 7 Rozdział 2. Przykład aplikacji łączącej różne technologie . .................................. 9 2.1. Wstęp . ....................................................................................................................... 9 2.2. Opis aplikacji „Dodaj przepis” ................................................................................. 9 2.3. Wewnętrzna architektura aplikacji .......................................................................... 12 2.4. Opis najciekawszych fragmentów kodu źródłowego . ............................................ 13 Zakończenie . .................................................................................................................... 23 Zadania do samodzielnego wykonania ............................................................................ 23 Pytania kontrolne . ............................................................................................................ 23

Rozdział 3. Projektujemy serwis WWW . ........................................................... 25 3.1. Wstęp . ..................................................................................................................... 25 3.2. Z czego zbudowany jest serwis WWW? ................................................................. 25 3.3. Projektowanie aplikacji internetowych z biznesowego punktu widzenia ............... 27 3.3.1. Cele . ............................................................................................................. 27 3.3.2. Porównanie z konkurencją ........................................................................... 28 3.3.3. Plan działań . ................................................................................................ 29 3.3.4. Budżet . ......................................................................................................... 30 3.3.5. Metody kontrolowania postępów ................................................................. 31 3.4. Modele aplikacji internetowych — pajęczyna HTML . .......................................... 32 3.5. Modele aplikacji internetowych — HTML z arkuszem stylów . ............................ 33 3.6. Modele aplikacji internetowych — klient-serwer . ................................................. 34 3.7. Modele aplikacji internetowych — Dynamic HTML (DHTML) ........................... 35 3.8. Modele aplikacji internetowych — trójwarstwowa . .............................................. 37 3.9. Modele aplikacji internetowych — trójwarstwowa — ujęcie drugie ..................... 39 3.10. Modele aplikacji internetowych — wielowarstwowa . ........................................... 39 3.11. Etapy projektowania aplikacji — podejście klasyczne . ......................................... 40 3.12. Etapy projektowania aplikacji — podejście zwinne . ............................................. 41 3.13. Planowanie utrzymania aplikacji ............................................................................ 46 Zadania do samodzielnego wykonania ............................................................................ 47 Pytania kontrolne . ............................................................................................................ 47

Rozdział 4. Od PHP do HTML . ......................................................................... 49 4.1. Pierwszy skrypt . ...................................................................................................... 49 4.2. Przeplatanie PHP i HTML. Czego nie robić, na co uważać? . ................................ 51 4.3. Struktura skryptów . ................................................................................................. 59

4

PHP i HTML. Tworzenie dynamicznych stron WWW 4.4. Użycie szablonów . .................................................................................................. 62 4.5. Obiektowość w PHP — projektowanie obiektowe . ............................................... 66 4.6. Obiektowość w PHP — praktyczne przykłady . ..................................................... 72 4.6.1. Przykład 1. Odwzorowanie modelu danych . ............................................... 72 4.6.2. Przykład 2. Odwzorowanie trójwarstwowości . ........................................... 74 4.6.3. Przykład 3. Uniwersalne przetwarzanie danych . ........................................ 77 4.7. Typy danych w PHP . .............................................................................................. 77 4.8. Generowanie w PHP plików innych niż HTML . ................................................... 81 4.9. Bezpieczeństwo aplikacji PHP ................................................................................ 84 4.9.1. Obsługa danych z zewnątrz ......................................................................... 84 4.9.2. Przekazywanie danych między skryptami . ................................................. 86 4.9.3. Niebezpieczne konstrukcje języka . ............................................................. 87 4.9.4. Bezpieczeństwo systemu plików ................................................................. 88 4.9.5. Cross-Site Scripting ..................................................................................... 88 4.9.6. Wstrzykiwanie kodu SQL ............................................................................ 90 4.9.7. Wstrzykiwanie poleceń systemowych (shell injection) .............................. 97 4.9.8. Cross-Site Request Forgery ......................................................................... 97 4.9.9. Przejęcie kontroli nad sesją (session fixation) . ........................................... 99 4.9.10.Session poisoning ........................................ 103 4.9.11.Ataki typu DOS i DDOS . ......................................................................................................................................... 112 Zadania do samodzielnego wykonania .......................................................................... 114 Pytania kontrolne . .......................................................................................................... 115

Rozdział 5. JavaScript i DHTML . .................................................................... 119 5.1. Skrypty JavaScript, ich ulokowanie w dokumencie . ............................................ 119 5.2. Modyfikowanie dokumentu HTML przez JavaScript . ......................................... 121 5.3. Obsługa zdarzeń w JavaScript .............................................................................. 124 5.4. Podmiana fragmentów dokumentu ....................................................................... 126 5.5. Podmiana stylów CSS . .......................................................................................... 127 5.6. Optymalizacja działania skryptów JavaScript . ..................................................... 128 Zadania do samodzielnego wykonania .......................................................................... 129 Pytania kontrolne . .......................................................................................................... 129

Rozdział 6. Zastosowanie AJAX . ................................................................... 131 6.1. Czym jest technologia AJAX? .............................................................................. 131 6.2. Przykładowy program . .......................................................................................... 132 6.3. Więcej o XMLHttpRequest .................................................................................. 133 Zadania do samodzielnego wykonania .......................................................................... 135 Pytania kontrolne . .......................................................................................................... 135

Rozdział 7. Od XML-a do HTML-a . .................................................................. 137 7.1. Czym jest XML i po co go stosować? .................................................................. 137 7.2. Metody przetwarzania XML-a w aplikacjach sieciowych . .................................. 139 7.3. XML w aplikacjach JavaScript ............................................................................. 144 Zadania do samodzielnego wykonania .......................................................................... 145 Pytania kontrolne . .......................................................................................................... 146

Rozdział 8. Kaskadowe arkusze stylów (CSS) . ............................................... 149 8.1. Czym jest CSS i po co go stosować? .................................................................... 149 8.2. Składnia CSS . ....................................................................................................... 150 8.3. CSS a PHP . ........................................................................................................... 152 8.4. CSS a JavaScript . .................................................................................................. 152 Zadania do samodzielnego wykonania .......................................................................... 153 Pytania kontrolne . .......................................................................................................... 154

Spis treści

5

Dodatki — wprowadzenie . ........................................................... 155 Dodatek A Podstawy HTML . ......................................................................... 157 A.1. Co to jest HTML? Podstawowe wiadomości . ...................................................... 157 A.2. Grafika . ................................................................................................................. 158 A.3. Użycie atrybutów, znacznik A .............................................................................. 159 A.4. Tabelki . ................................................................................................................. 161 A.5. Formularze . ........................................................................................................... 164 A.6. Inne znaczniki HTML . .......................................................................................... 166 A.7. Dokument HTML — pisać ręcznie czy korzystać z edytorów wizualnych? ........ 167 Zadania do samodzielnego wykonania .......................................................................... 167 Pytania kontrolne . .......................................................................................................... 168

Dodatek B Podstawy programowania w języku PHP . ...................................... 171 B.1. Wstęp . ................................................................................................................... 171 B.2. Podstawy . .............................................................................................................. 171 B.3. Zmienne i operatory . ............................................................................................. 172 B.4. Instrukcje warunkowe i pętle ................................................................................ 174 B.4.1. Instrukcje warunkowe if-else . ............................................................................ 175 B.4.2. Instrukcje warunkowe switch . ........................................................................... 176 B.4.3. Pętle typu for . ..................................................................................................... 177 B.4.4. Pętle typu while .................................................................................................. 178 B.5. Funkcje . ................................................................................................................ 179 B.6. Podstawy programowania obiektowego ................................................................ 181 Zadania do samodzielnego wykonania .......................................................................... 181 Pytania kontrolne . .......................................................................................................... 181

Odpowiedzi do pytań kontrolnych . ................................................ 183 Słowniczek pojęć . ....................................................................... 191 Skorowidz . .................................................................................. 195

6

PHP i HTML. Tworzenie dynamicznych stron WWW

Rozdział 1.

Wstęp

Aby nauczyć się programowania, zazwyczaj sięgamy po wiedzę dotyczącą pojedynczej technologii czy pojedynczego języka. Niezależnie od tego, czy są to książki, czy inne źródła, zazwyczaj koncentrują się one na dogłębnym nauczaniu pojedynczego aspektu trudnej sztuki programowania. Tymczasem we współczesnym dynamicznym i nieustannie zmieniającym się świecie programista musi często łączyć różne techniki oraz posiadać wiedzę z co najmniej kilku dziedzin informatyki, w tym znać wiele języków programowania, wzorców projektowych, metod projektowania, narzędzi, formatów, frameworków itp. Poprzez łączenie wielu technologii niejednokrotnie można osiągnąć dodatnie sprzężenie zwrotne i sprawić, że 2+2 wyniesie więcej niż 4. A to dlatego, że pewne techniki czy języki programowania mają swoje słabe i mocne strony i używając kilku z nich jednocześnie, wzajemnie niwelujemy wady. Warto znać wiele technik i narzędzi, aby móc zastosować najodpowiedniejsze z nich do właściwego rozwiązania. Przez zbytnie skupienie się na jednym narzędziu czy jednej technice ryzykujemy stworzenie rozwiązania, którego pewne elementy będą wykonane na siłę, sklecone byle jak i pełne wad. Niniejsza książka jest próbą połączenia wielu technik, pokazania tego, jak przeplatają się wzajemnie, jak wspierają oraz jak uzyskać takie połączenie bez stresu i wysiłku. Jest ona przeznaczona dla początkujących oraz średnio zaawansowanych programistów, jednak osoby o wyższym stopniu zaawansowania również powinny znaleźć tutaj interesujące idee, zasady i przykłady. Dla początkujących opracowane zostały dwa dodatki stanowiące podstawy HTML oraz PHP — zachęcam do zapoznania się z nimi. Sama książka została z kolei tak przygotowana, że można ją czytać zarówno od deski do deski, jak i wyrywkowo — sięgając do tematyki, która okaże się potrzebna w konkretnym momencie.

8

PHP i HTML. Tworzenie dynamicznych stron WWW

Rozdział

2.

Przykład

aplikacji

łączącej różne tech~ologie

~9.

:~~~e prezentuję przykłada ~'f!która łączy

21 " "W

technologie PHP, JavaScript i DHTML w celu zapewnie ownikowi jak największej wygody. Podczas przeglądania jej kodu źródło ożesz wiele nie rozumieć - nie przejmuj się jednak. Za pierwszym razem pr mu się tylko ogólnie, a potem wróć do detali po przeczytaniu reszty książki. umieszczenie na samym początku służy przede wszystkim zapreze~towaniu, j ~ .ozl~wości lezą w zasięgu ręki i jak je wykorzystać przy stosunkowo med~~zie sił,

2.2. Opis

~acji „Dodaj przepis"

Wykorzystywana w niniejszej publikacji przykładowa aplikacja służy do dodawania przepisów kulinarnych do bazy danych. Użytkownik może wybrać składniki potrawy oraz określić szereg czynności, które należy wykonać, aby ją przyrządzić. Oczywiście ze względu na potrzeby książki aplikacja zawiera sporo uproszczeń, w tym niezbyt wiele dostępnych składników oraz możliwych czynności. Została ona tak zaprojektowana, aby do minimum ograniczyć przeładowanie stron. Jedyne, co jest pewnym odstępstwem od tej reguły, to użycie dodatkowej strony w celu dodawania nowych składników. Jej zawartość mogłaby także znaleźć się w głównym oknie aplikacji, lecz przykład został rozbity na dwa okna celowo - po to, aby zademonstrować odwoływanie się skryptów między oknami, co w wielu złożonych aplikacjach może być nie do uniknięcia. Przykład został umieszczony pod adresemftp://ftp.helion.pl/przyklady/phtdyn.zip w katalogu

PHP i HTML. Tworzenie dynamicznych stron WWW

1.0

source/R2. Aby go zobaczyć, wrzuć wszystkie pliki na setWer i następnie uruchom skrypt nowy_przepis.php. W przeglądarce powinieneś zobaczyć formularz umożliwiający zdefiniowanie przepisu oraz kilka przycisków. Zostało to uwidocznione na rysunku 2.1. N owy przepis

Skla(hliki:

pomidor: 2 sztuka

s alata 1 sztuka

oliwa z oliwek: 2 łyżka

stołowa

sól: 1 gram

żółty

ser 100 gram

ogórek 1 sztuka [

Usuń: pomidor

][

Usuń: se.tata

[ Dodaj no\i\ij składnik

J[

Usuń: oliwa z oliwek

J

Usuń

Usu

ogórek

J

J

Dodaj nową czynność: [~d_ od_a~ j -~ C zyimości :

I.pokrój pomidor 2 umyj sałata 3.pokrój żółty ser 4.posiekaj ogórek 5 dodaj oliwa z oliwek 6 dodaj sól

Rysunek 2.1.. Widok głó i zdefiniowaniu blku czyn

ekranu aplikacji „Dodaj przepis" po wprowadzeniu kilku

składników

Kliknij teraz przycisk Dodaj nowy składnik, aby otworzyć okno dodawania składników. Powinno ono wyglądać tak, jak pokazano na rysunku 2.2. Wybierz składnik, który chcesz dodać do potrawy, następnie ilość oraz jednostkę, w jakiej podajesz ilość, i kliknij przycisk Dodaj. Zobacz, jak automatycznie, bez przeładowywania którejkolwiek ze stron główne okno zostało zaktualizowane o szereg elementów: ł Informację

o dodanym składniku wraz z miniaturką oraz i jednostce, w której należy ją odmierzyć.

ł

Przycisk

ł Poniżej

Usuń

..

umożliwiający usunięcie

danego

informacją o ilości

składnika.

przycisku, który otwiera okno dodawania składników, znajduje się formularz dodawania nowej czynności. PietWsza z list zawiera dostępne akcje, a druga składniki - tu znajdują się wyłącznie te składniki, których zdecydowałeś się użyć w przepisie. Po kliknięciu przycisku Dodaj w małym oknie lista ta zostanie zaktualizowana.

Rozdział

2.

+ Przykład

aplikacji

Rysunek 2.2. Widok okna aplikacji „Dodaj przepis"

łączącej różne

1.1.

technologie

Dodaj kolejny składnik. używany w przepisie: składnik. I ogórek v I ile ~Isztuk-a--~ „ 11ió~ci;;jLJj

c::::J

Dodałem jut wszystkie. Zamknij okno.

umożliwiającego

I

dodawanie składników Jeśli

chcesz usunąć składnik, kliknij odpowiedni przycisk, jeden z tych dynamicznie dodanych podczas uzupełniania składników. Zauważ, jak bez przeładowywania strony wszystkie informacje o składnikach zostają zaktualizowane. Możesz dodawać i usuwać składniki, a strona nigdy nie odwołuje się do serwera i skryptów PHP. Nie ma takiej potrzeby - przepis jest dopiero przygotowywany i nie trzeba go zapisywać w bazie danych ani w jakikolwiek sposób informować o nim serwera. Cała logika znajduje się w skryptach JavaScript uruchamianych w Twojej przeglądarce. Dodaj teraz kilka czynności i kliknij przycisk Gotowe!. Gdybyś użył go przed dodaniem składników czy czynności, przepis nie zostałby wysłany. Ap ·kacja waliduje przynajmniej podstawową poprawność przepisu. Nie ma również moż · 'ci dodania dwukrotnie tego samego składnika. Po wysłaniu przepisu skrypt PHP ze orzy jego dane i prześle wynikowe informacje z powrotem do przeglądar~~Yi strony prezentującej je można zobaczyć na rysunku 2.3. -,...~ Dziękujemy.

Oto Twój przepis:

pomidor: 2 sztuka

sałata:

żółty

1 sztuka

ser 100 gram

ogórek: 1 sztuka Czyi.mo ś ci:

1. pokrój pomidor umyj sałata pokrój żółty ser posiekaj ogórek dodaj oliwa z oliwek dodaj sól

2. 3. 4. 5. 6.

Wprowadź

nowy przepis

Rysunek 2.3. Widok podsumowania przepisu w aplikacji „ Dodaj przepis"

PHP i HTML. Tworzenie dynamicznych stron WWW

1.2

2.3.

Wewnętrzna

Aplikacja

składa się

architektura aplikacji

z kilku fragmentów-

są to:

ł

Przygotowanie danych wejściowych przez skrypt PHP. W prawdziwej aplikacji dane zostałyby pobrane z bazy danych. W naszym przypadku mały wycinek danych jest po prostu przypisywany do odpowiednich zmiennych w skrypcie dane.php. Nie zamieszczam kodu źródłowego tego pliku, ponieważ nie jest on szczególnie interesujący. Razem z innymi przykładami można go ściągnąć z serwera pod adresem:ftp://ftp.helion.pl/przykladylphtdyn.zip.

ł

System szablonów. Aplikacja korzysta z systemu szablonów Smarty, którego silnik umieszczony został w katalogu smarty. Szablony stanowią pewien wzorzec strony HTML, która zostanie wysłana do przeglądarki internetowej użytkownika. Różni się on tym od gotowego dokumentu HTML, ~ · e ogą się w nim jeszcze znajdować pewne zmienne czy instrukcje systemu Sm . pętle lub warunki). Dopiero po przetworzeniu szablon staje się dokumen m ML.

ł

Szablony stron. Aplikacja składa się z dwóch oki~2'g owane więc zostały dwa szablony. Są to pliki z rozszerzeniem . ~ ęcej o systemie Smarty przeczytasz w dokumentacji na stronie ~r~&J;

ł Katalog obrazki. Zawiera on miniatu~dników.

ł Główny skrypt aplikacji -doda~ · Q

s.php. Jego zadaniem jest przypisanie zmiennym szablonu odpowiedni ych oraz obsługa przesłanych formularzy. Podobne zadania wykonuj ~ owiązany z oknem dodawania składników. W j~go przypadku całe d~~sprow~dza się wyłącznie do obsługi szablonu, pomeważ żadne ~ -Drm la~1e są do mego przesyłane.

ł

Kod JavaScript o Do każdego z ·e

iialn~ za.~ogikę po stroni~ przegl~darki intemet~wej. en aphkacJl przygotowano Jeden phk z rozszerzemem będne skrypty. .

Podczas wyko ania typowych czynności z aplikacją, np. takich jak opisane w podrozdziale 2.2, zachodzi następująca komunikacja między wyżej wymienionymi składo­ wymi aplikacji: ł

Skrypt nowy_yrzepis.php przygotowuje dane,

wykorzystując

plik dane.php.

ł Następnie

przypisuje odpowiednie dane zmiennych w szablonie nowy_yrzepis.tpl i używa go do wyprodukowania strony HTML.

ł Dołączony

do strony kod JavaScript jest odpowiedzialny za wszelkie czynności wykonywane w przeglądarce. Nie licząc otwierania okna dodawania składników, wszystko, co dzieje się w aplikacji aż do momentu wysłania gotowego przepisu, odbywa się właśnie w jego wnętrzu.

ł

Podczas otwierania okna dodawania składników skrypt dodaj_skladnik.php przypisuje dane do szablonu dodaj_skladnik.tpl i używa go do stworzenia dokumentu HTML z tą stroną.

Rozdział

2.

+ Przykład ł

aplikacji

łączącej różne

1.3

technologie

Po wysłaniu gotowego przepisu skrypt nowy_yrzepis.php przetwarza formularz i przełącza szablon nowy_yrzepis.tpl w tryb wyświetlania podsumowania przepisu. W tym szablonie znajduje się warunek, który steruje opisanym procesem.

2.4. Opis najciekawszych fragmentów kodu źródłowego Jak już wspomniałem wyżej, w pliku dane.php ustawiane dane potrzebne pozostałym skryptom. Są to tablice:

są

pewne zmienne zawiera-

jące ł

ł

$skl adni ki -zawiera dane składników, z których można przyrządzać potrawy: identyfikator składnika, jego nazwę i nazwę obrazka miniaturki

można ~ać składniki:

$m1 ara - zawiera dane jednostek, w których identyfikator miary i jej nazwę ~~ .

ł $akcJa - definiuje dostępne akcje (czynnoś · , określaniu

' rych można użyć przy

przepisu: identyfikator i nazw1 ' :;·.

o' O

Pierwszy fragment pliku nowy_yrzepis.p~ załadowanie pliku dane.php. Fragment pliku nowy_yrzepis.php:

inicjalizację systemu Smarty oraz

~