PHP i HTML. Tworzenie dynamicznych stron WWW

200 Pages·2010·6.138 MB·Polish

by  Jacek Ross

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 ........................................1034.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ą pojedyn-
czej 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ęzy-
kó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 jedno-
cześ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 sku-
pienie się na jednym narzędziu czy jednej technice ryzykujemy stworzenie rozwiąza-
nia, 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 inte-
resują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
2.
Rozdział
aplikacji
Przykład
łączącej różne tech~ologie
~9.
2 1
:~~~e prezentuję przykłada ~'f!która łączy
"
"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ł,
~acji
2.2. Opis „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
1.0 PHP i HTML. Tworzenie dynamicznych stron WWW
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 zde
finiowanie 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 J[ Usuń: oliwa z oliwek J Usu Usuń ogórek J
[ Dodaj no\i\ij składnik J
Dodaj nową czynność: [~d_od_a~j -~
Czyimoś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łó ekranu aplikacji „Dodaj przepis" po wprowadzeniu kilku składników
i zdefiniowaniu blku czyn
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 klik
nij 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 informacją o ilości
i jednostce, w której należy ją odmierzyć.
ł Przycisk Usuń .. umożliwiający usunięcie danego składnika.
ł Poniżej 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 łączącej różne technologie 1.1.
Rysunek 2.2.
Widok okna aplikacji Dodaj kolejny składnik. używancy :w: :p:rzJep isie:
składnik. I ogórek v I ile ~Is -zt-uk-a--~„ 11i ó~ci;;jLJj
„Dodaj przepis"
Dodałem jut wszystkie. Zamknij okno. I
umożliwiającego
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 przynajm
niej 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: 1 sztuka
żółty ser 100 gram
ogórek: 1 sztuka
Czyi.mości:
1. 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
Wprowadź nowy przepis
Rysunek 2.3. Widok podsumowania przepisu w aplikacji „ Dodaj przepis"