Table Of Content

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"