Adobe Creative Suite 3

Web Standard. Tworzenie

dynamicznych stron WWW.
Warsztaty
Autor: Pawe Zakrzewski
ISBN: 978-83-246-1133-1
Format: B5, stron: 392
Zawiera DVD
Zmie statyczne strony WWW w atrakcyjne i dynamiczne witryny!
Zaprojektuj grafik i struktur witryny
Napisz kod dynamicznych stron i skorzystaj z gotowych elementw
Wzboga witryn elementami wykonanymi w technologii Flash i Ajax

Kto w dobie ttnicych yciem, funkcjonalnych witryn chce dzi odwiedza nudne,
statyczne strony? Statyczne witryny WWW, nawet te najbardziej atrakcyjne pod wzgldem
treci i grafiki, maj take inn wielk wad ich aktualizacja zajmuje sporo czasu
i wymaga rcznej modyfikacji kadej ze stron. Wady tej pozbawione s witryny
dynamiczne, w ktrych tre przechowywana jest w bazie danych i pobierana przy kadym
otwarciu przez odwiedzajcego. Modyfikacja treci takiej witryny opiera si na wygodnym
module administracyjnym, ktrego obsuga nie wymaga znajomoci jzyka HTML.
Ksika Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW.
Warsztaty to podrcznik dla tych twrcw witryn WWW, ktrzy chc przeksztaci
statyczne strony WWW w dynamiczne, korzystajc z doskonaych narzdzi firmy Adobe,
takich jak Dreamweaver CS3 i Fireworks CS3, oraz technologii PHP i MySQL. Czytajc j,
poznasz zasady przygotowywania grafiki sieciowej, projektowania struktury dynamicznej
witryny WWW i nawizywania pocze z baz danych. Dowiesz si, w jaki sposb
umieszcza na stronie elementy dynamiczne z biblioteki Dreamweavera, tworzy strony
z nowociami, moduy wyszukiwawcze i moduy zarzdzania treci. Znajdziesz tu take
informacje o dodawaniu do strony elementw zrealizowanych w technologiach Flash
i Ajax oraz o publikowaniu witryny na serwerze.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Przygotowanie elementw graficznych w Fireworks CS3

Projektowanie struktury witryny
Instalacja rodowiska PHP i bazy danych MySQL
Tworzenie strony startowej
Korzystanie ze skryptw znajdujcych si w bibliotece Dreamweavera
Implementacja mechanizmu wyszukiwania informacji w serwisie
Modu administracyjny
Dodawanie elementw utworzonych za pomoc Flasha
Przeniesienie witryny na serwer WWW

Wykorzystaj moliwoci Adobe Creative Studio 3

i pracuj jak profesjonalista

Spis treci
Informacje o autorze ................................................................................... 5
Wstp ........................................................................................................ 7

Informacje o autorze ......................................................................................................................7

Do kogo adresowana jest ksika? ................................................................................................8
Co znajdziemy w tej ksice? ........................................................................................................8
Czego nie znajdziesz w tej ksice? ............................................................................................11

Rozdzia 1. Grafika internetowa .................................................................................. 13

Planowanie ..................................................................................................................................13
Rola grafiki na stronie WWW ...............................................................................................13
Planowanie serwisu WWW ...................................................................................................13

Rozdzia 2. Budowa podstawowej strony WWW .......................................................... 49

Struktura serwisu WWW .............................................................................................................49

Opracowanie struktury katalogw i definicja Sitea ..............................................................49
Tworzymy statyczn stron WWW .......................................................................................55

Rozdzia 3. Baza danych ............................................................................................ 89

rodowisko pracy

........................................................................................................................89
Baza danych MySQL i PHP ..................................................................................................89

Rozdzia 4. Dynamiczny serwis WWW ....................................................................... 133

Poczenie z baz danych ..........................................................................................................133

Tworzenie dynamicznej wersji serwisu ...............................................................................133
Dynamiczna strona WWW ........................................................................................................141
Edycja strony startowej .......................................................................................................141
Przygotowanie rda danych Recordset ........................................................................143
Dynamiczne menu na stronie ..............................................................................................148
Dynamiczna zawarto strony startowej .............................................................................158
Wprowadzenie elementw graficznych ...............................................................................162
Aktualnoci na stronie index.php ........................................................................................164
Formatowanie sekcji nowoci .............................................................................................168
Wywietlenie penej sekcji nowoci ....................................................................................175
Sortowanie nowoci ............................................................................................................175
Warunkowe uycie elementw graficznych ..............................................................................176
Instrukcje warunkowe .........................................................................................................177

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Rozdzia 5. Dynamiczny serwis WWW ....................................................................... 181

Budowa dynamicznych stron WWW .........................................................................................181

Tworzenie strony Archiwum nowoci .................................................................................181
Budowa strony Informacje ..................................................................................................191

Rozdzia 6. Wyszukiwanie danych ............................................................................. 235

Wyszukiwarki na stronie WWW ...............................................................................................235

Tworzenie prostej wyszukiwarki .........................................................................................235

Rozdzia 7. Modu zarzdzania treci ....................................................................... 273

Aktualizacja serwisu ..................................................................................................................273

Tworzenie systemu zarzdzania treci ...............................................................................273
Logowanie i zabezpieczanie ................................................................................................317

Rozdzia 8. Flash i Ajax na stronie WWW .................................................................. 325

Animacje, efekty i funkcjonalno ............................................................................................325

Wykorzystanie technologii Flash ........................................................................................325
Budowa elementw animowanych SWF .............................................................................326
Dynamiczny baner Flash .....................................................................................................349
Wykorzystanie technologii Ajax .........................................................................................358

Rozdzia 9. Ostatni szlif, wsppraca z serwerem WWW, dodatki.................................. 369

Ostatnie poprawki.......................................................................................................................369
Testowanie ...........................................................................................................................369
Eksport zawartoci bazy danych ..........................................................................................372
Co wicej? ..................................................................................................................................379

Skorowidz .............................................................................................. 383

Rozdzia 4.

Dynamiczny serwis WWW

Poczenie z baz danych
Tworzenie dynamicznej wersji serwisu
W pierwszej czci niniejszego opracowania zajlimy si planowaniem, a nastpnie przygotowaniem podstawowych elementw struktury naszej strony. W rezultacie przygotowane zostay
konieczne do jej budowy elementy graficzne, katalog i definicja sitea, strona gwna naszego
serwisu index.html, a take konieczne do jej atrakcyjnej prezentacji style kaskadowe. Nieco
pniej przeksztacilimy gwn stron serwisu w szablon programu Adobe Dreamweaver CS3
i na tym zakoczylimy dotychczasowe dziaania. Najwysza pora, by przej do najciekawszego
etapu budowy dynamicznych serwisw przeksztacenia jego statycznej wersji w now struktur,
opart na bazie danych i kodzie PHP.
Przygotowanie rodowiska testowego w programie Adobe Dreamweaver CS3

Do budowy dynamicznej strony internetowej konieczne jest uycie testowego serwera WWW
oraz odpowiednio skonfigurowanych baz danych i tabel MySQL. Aby unikn koniecznoci
staego uycia serwera WWW w Internecie, obcienia cza internetowego, a take dla szybkoci
dziaania i testw, najwygodniejszym rozwizaniem jest wykorzystanie poznanego w poprzednim
rozdziale serwera Krasnal (lub oczywicie dowolnego innego pakietu serwer/baza danych/parser
jzyka PHP) umoliwiajcego uruchamianie skryptw PHP lokalnie na dysku naszego komputera.
Dziaania zwizane z instalacj serwera i konfiguracj baz danych za pomoc panelu phpMyAdmin, ktre podjlimy ju w poprzednim rozdziale, pozwalaj nam miao wkroczy na dalszy
etap pracy.
Uruchamiamy serwer testowy Krasnal.

134

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Edycja sitea

Do dalszego etapu budowy i testowania dynamicznej strony WWW nie wystarczy jedynie uruchomienie lokalnego serwera testowego. Konieczne jest take odpowiednie skonfigurowanie
programu tak, by nie tylko pozwala na prac z plikami PHP, ale take uatwia ich przygotowanie
oraz pniejsz edycj.
oraz zmieni lokalizacj kataW tym celu musimy nieco zmodyfikowa definicj caego
logu gwnego strony. Dziaania podjte w tej czci rozdziau by moe wywoaj pewne
zdziwienie u Czytelnikw i zrodz kilka logicznych pyta.
sitea

W jakim celu budowalimy statyczn wersj strony, ktr teraz bdziemy musieli modyfikowa?
Czemu podczas definiowania struktury
w panelu
nie wskazalimy od razu
waciwej lokalizacji?
sitea

Site Definition

Odpowiedzi jest wiele.

Zwykle, gdy budujemy prototyp strony, wygodniej jest skorzysta z jzyka HTML i bez
koniecznoci uycia serwera WWW testowa stron w rnych przegldarkach za pomoc
wasnego komputera.
Czsto trudno jest zacz budow bazy danych, gdy nie znamy jeszcze szczegowych
potrzeb klienta. By lepiej wykorzysta nasz czas, rozpoczynamy prac od budowy
statycznej strony, ktra uatwia ocen projektu graficznego i logiki nawigacji.
Na etapie planowania i budowy statycznej wersji strony nie mielimy jeszcze dostpu
do serwera testowego i nie byo moliwoci wskazania od razu odpowiednich danych.
W tym momencie, dysponujc ju odpowiednim rodowiskiem pracy, moemy dowolnie
zmodyfikowa ustawienia i dostosowa je do naszych potrzeb.
By moe podczas rozpoczynania budowy serwisu nie planowalimy jeszcze uycia
bazy danych oraz skryptw jzyka PHP. Pomys budowy dynamicznej strony zrodzi
si nieco pniej i wymaga teraz dostosowania naszej pracy do nowych zaoe.
Moe ju podczas tworzenia kolejnych stron statycznego serwisu doszlimy
do przekonania, e budowa nastpnych stron na bazie podobnego wzorca jest
szalenie mudna, monotonna i nudna. Mogaby zosta w jaki sposb zautomatyzowana
i przyspieszona. Take i w takim przypadku odpowiedzi na nowe potrzeby jest wanie
przeksztacenie biecego (istniejcego ju) serwisu w dynamiczn posta przy uyciu
bazy danych i skryptw PHP.
Podczas (nawet zaawansowanej ju) pracy nad serwisem pojawia si konieczno
dodania dodatkowej funkcjonalnoci niemoliwej do wykonania bez bazy danych
i skryptw dziaajcych po stronie serwera. Dziki reedycji ustawie struktury
moemy atwo przej do trybu budowy dynamicznej wersji strony, uywajc jako
podstawy istniejcej ju struktury.
By moe nasz klient zamwi wanie usug przeksztacenia biecej, statycznej wersji
serwisu w nowoczesn dynamiczn stron WWW, bez modyfikacji gwnych elementw
graficznych. W tej sytuacji umiejtno przeksztacenia stron HTML w dynamiczne
PHP okae si niezwykle cenn umiejtnoci.
sitea

Rozdzia 4. i Dynamiczny serwis WWW

135

W kadym wymienionym powyej przypadku umiejtno przeksztacenia biecej wersji strony

w jej dynamiczn posta moe okaza si doskonaym rozwizaniem nie tylko dla przyspieszenia
pracy nad stron, ale take dla rozwinicia struktury serwisu i dodania jego dodatkowej funkcjonalnoci, czy po prostu rozwizaniem umoliwiajcym w ogle wykonanie zlecenia.
Takie wanie rozumowanie stao si przyczyn zastosowania przedstawionej kolejnoci wykonywania dziaa przyjtej na amach tej ksiki.
Przygotowanie struktury katalogw

Aby w dalszej pracy skorzysta z moliwoci uruchamiania skryptw PHP, wszystkie pliki
naszego serwisu musz znale si na testowym serwerze WWW. W tym celu przenosimy
(lub kopiujemy) cay katalog naszej witryny siteRecenzje w now, docelow lokalizacj
katalog o ciece: C:/usr/Apache/httpd/html.
Aby moliwe byo przeniesienie katalogu (w celu archiwizacji lub bezpieczestwa moemy
przenie w miejsce docelowe jedynie kopi folderu siteRecenzje), konieczne jest wyczenie
programu Adobe Dreamweaver CS3.

Jak pamitamy, katalog o nazwie html jest gwnym folderem naszego serwera testowego
localhost. Tu wanie zlokalizowane powinny by wszystkie nasze dynamiczne aplikacje oraz
elementy wykorzystywane do ich budowy.

Jeli zdecydujemy si na przeniesienie (bez kopiowania) katalogu naszej strony, bezporednio

po otwarciu programu Adobe Dreamweaver CS3 wywietlony zostanie komunikat ostrzegawczy
o braku folderu zawierajcego struktur naszej witryny. Aby niezwocznie przej do trybu edycji
ustawie sitea, wybieramy opcj Manage Sites w wywietlonym oknie dialogowym. Edycji ustawie sitea moemy dokona take pniej, gdy zdecydujemy si na uycie opcji Cancel.
Edycja waciwoci sitea

Jeli podczas otwierania Adobe Dreamweavera CS3 od razu zdecydujemy si na przejcie w tryb
edycji sitea za pomoc opcji Manage Sites, wywietlone zostanie okno dialogowe z list wszystkich serwisw budowanych na naszym komputerze. Aby przej w tryb edycji naszej witryny,
lokalizujemy i zaznaczamy jej nazw w oknie po lewej stronie, a nastpnie za pomoc przycisku
Edit wchodzimy tryb edycji sitea (rysunek 4.1).
Rysunek 4.1.

Okno Manage
Sites przechowuje
informacje o wszystkich
serwisach, jakie
budujemy za pomoc
Dreamweavera.
Aby atwiej
identyfikowa kad
prac, dobrze jest
stosowa unikalne
i opisowe nazwy
serwisw

136

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Jeli zdecydowalimy si na utworzenie kopii serwisu w nowej lokalizacji lub te podczas otwierania programu wybralimy opcj Cancel, Adobe Dreamweaver CS3 otwiera si, nie wywietlajc adnych komunikatw.
W celu przejcia do modyfikacji waciwoci naszej strony wybieramy polecenie Manage Sites
dostpne w menu grnym Site. W dostpnym oknie dialogowym wskazujemy nazw naszego
serwisu i za pomoc przycisku Edit wchodzimy w tryb edycji jego waciwoci Site Definition (rysunek 4.2).
Rysunek 4.2.
Za pomoc przycisku

Edit w oknie Manage

Sites przechodzimy
w tryb edycji
waciwoci wybranego
serwisu. W tym miejscu
mamy moliwo
modyfikacji wszystkich
jego parametrw

Zakadka Basic widoczna w grnej czci okna Site Definition pozwala na edycj ustawie
za pomoc kreatora. Jest on niezwykle wygodnym narzdziem do zarzdzania waciwociami
witryny, szczeglnie dla osb o mniejszym dowiadczeniu.
Na pierwszym ekranie kreatora Site Definition Editing Files widzimy wprowadzon wczeniej
nazw serwisu i w tym momencie nie musimy wprowadza tu adnych zmian. Za pomoc przycisku Next przechodzimy do ekranu Editing Files, Part 2.
W tym miejscu musimy wprowadzi kilka istotnych zmian. Na pytanie Do you want to work with
a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP? wskazujemy odpowied
Yes, I want to use a server technology, a nastpnie wybieramy PHP MySQL z dostpnej poniej
listy Which server technology? (rysunek 4.3).
Za pomoc przycisku Next przechodzimy do trzeciego okna, Editing Files, Part 3. Pytanie How
do you want to work with your files during development? pozwala wybra sposb, w jaki bdziemy

budowa i edytowa nasze strony w dalszej czci pracy. Dziki uyciu dostpnego na naszym
dysku serwera testowego (Krasnal) mamy moliwo wyboru pierwszej opcji Edit and test locally

Rozdzia 4. i Dynamiczny serwis WWW

137

Rysunek 4.3.

Tym razem w oknie

Editing File, Part 2
wskazujemy
technologi,
jak wykorzystamy
podczas budowy
serwisu. Dreamweaver
oferuje wsparcie
i narzdzia do
budowy dynamicznych
aplikacji WWW
dla wielu popularnych
technologii
PHP+MySQL,
ASP, JSP, Cold
Fusion itp.

(my testing server is on this computer), ktra precyzyjnie okrela, e do budowy i testowania

dynamicznych stron uyjemy serwera testowego zainstalowanego na naszym komputerze. Zaznaczamy pierwsz opcj (rysunek 4.4).
Rysunek 4.4.

Opcja Edit and test

locally pozwala nam
na tworzenie serwisu
lokalnie na dysku
naszego komputera.
Po zakoczeniu pracy
i testw, gotow
i dziaajc stron
przesyamy na serwer
WWW

138

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

W polu poniej, Where on your computer do you want to store your files?, naley wskaza
biec lokalizacj gwnego folderu naszej witryny C/usr/Apache/httpd/html/siteRecenzje
(rysunek 4.5) i za pomoc przycisku Next przej do sekcji Testing Files.
Rysunek 4.5.

Widoczny w dolnej
czci okna zapis
Select:siteRecenzje
wskazuje docelow
lokalizacj testowej
wersji naszej aplikacji
na dysku lokalnego
komputera

Na pytanie dotyczce adresu URL naszego serwisu What URL would you use to browse to
the root of your site?, w polu poniej musimy na kocu widocznej cieki (http://localhost)
wprowadzi nazw siteRecenzje (rysunek 4.6). To jest bowiem gwny folder naszego sitea
zapisany na lokalnym serwerze WWW. Jak pamitamy, gwny katalog serwera to inaczej
localhost. W tym folderze znajduje si midzy innymi take nasz folder siteRecenzje. W tej
sytuacji cieka dostpu do witryny ma posta nastpujc: http://localhost/siteRecenzje i w tej
formie wprowadzamy j w polu What URL would you use to browse to the root of your site?.
Rysunek 4.6.

Localhost to adres
naszego serwera
WWW. Dynamiczny
serwis z recenzjami
ksiek zlokalizowany
jest w katalogu
siteRecenzje.
Adres w postaci
localhost/siteRecenzje
wskazuje na stron
gwn index.php
naszej aplikacji

Rozdzia 4. i Dynamiczny serwis WWW

139

Przycisk Test URL pozwala ju na etapie definiowania ustawie sitea sprawdzi, czy katalog
o wprowadzonej nazwie rzeczywicie istnieje i jest poprawnie widziany przez program (rysunek 4.7).
Rysunek 4.7.

Testowanie pozwala
na sprawdzenie poprawnoci
wprowadzonych adresw
i lokalizowanie potencjalnych
problemw

Za pomoc przycisku Next przechodzimy do sekcji Sharing Files, gdzie nie wprowadzamy ju
adnych modyfikacji i od razu przechodzimy dalej (Next). Widoczna sekcja Summary przedstawia
podsumowanie wszystkich wprowadzonych i zmodyfikowanych ustawie naszego sitea i nie
wymaga adnych modyfikacji (rysunek 4.8). Za pomoc przycisku Done potwierdzamy zmiany
i powracamy do okna edycji Manage Sites. Take w tym miejscu ponownie za pomoc przycisku
Done zamykamy okno i jednoczenie potwierdzamy zmiany konfiguracyjne naszej strony.
Rysunek 4.8.

W oknie podsumowania
znajdziemy wszystkie
podstawowe waciwoci
edytowanego serwisu

Zmiana typw plikw

Do budowy szablonu, a take pierwszej strony serwisu uywalimy do tej pory klasycznych
dokumentw HTML. Nadszed czas, by przeksztaci je w dynamiczne pliki PHP, ktre umoliwi interpretowanie kodu PHP bezporednio na serwerze WWW. Dziki uyciu parsera (interpretacji) kodu PHP na serwerze otrzymamy w rezultacie prosty, statyczny dokument HTML
w postaci czytelnej dla przegldarki uytkownika.
Zmiany rozpoczniemy od edycji szablonu. W tym celu otwieramy folder Templates i lokalizujemy
dokument normal.dwt. Do jego nazwy wprowadzamy dodatkowe rozszerzenie .php. Nowa

140

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

nazwa szablonu normal.dwt.php wyglda nieco dziwnie, jednak gotowy dokument bdzie
dziaa poprawnie i jako wzorzec doskonale posuy do budowy kolejnych stron PHP naszego
serwisu.
W gwnym katalogu siteRecenzje znajduje si ponadto pierwsza strona serwisu index.html.
Take j powinnimy przeksztaci w dokument PHP. W tym celu w oknie Files wystarczy jedynie zmieni rozszerzenie pliku z html na php, nie wprowadzajc ju wicej dodatkowych zmian
(rysunek 4.9).
Rysunek 4.9.

W celu przeksztacenia
statycznej wersji serwisu
WWW w dynamiczn
aplikacj bazodanow
konieczna jest zmiana
rozszerze plikw
naszej strony. Moemy
wykona to zarwno
w oknie Files w Adobe
Dreamweaverze,
jak te systemowo
w katalogu siteRecenzje
na naszym dysku
Zmiany rozszerze plikw szablonu normal.dwt oraz strony gwnej index.html moemy
dokona w panelu Files programu Adobe Dreamweaver, ale take systemowo, w widoku
podgldu zawartoci folderu na dysku.

czenie strony z baz danych

Przygotowana wczeniej strona index.php jest podstawowym dokumentem naszej pracy, posuy
ona bowiem do budowy kolejnych stron serwisu. Zbudowana na podstawie szablonu normal.
dwt.php zawiera zestaw staych elementw (zablokowanych do edycji na stronach) oraz
obszary edytowalne umoliwiajce wprowadzanie odpowiednich treci na kolejnych stronach
serwisu. Co wane, edycja graficznej struktury szablonu normal.dwt.php pocignie za sob
nie tylko zmian startowej strony index.php, ale take pozostaych podstron serwisu, podobnie
jak index.php opartych na tym samym szablonie.
Analizujc projekt strony index.php oraz zestaw przygotowanych wczeniej tabel MySQL, atwo
zauway, e boczne menu zawierajce list kategorii dostpnych ksiek powinno by generowane dynamicznie na podstawie danych z bazy. W ten sposb, dziki uyciu dynamicznego
menu na stronie szablonu, dodawanie kolejnych kategorii, ich edycja czy usunicie bdzie od razu
widoczne na wszystkich stronach serwisu.
W przyszoci dziki uyciu bazy danych i dynamicznej listy moliwe bdzie take stosunkowo
atwe i szybkie przygotowanie dodatkowych wersji jzykowych czy innych moduw rozszerzajcych funkcjonalno caego serwisu.

Rozdzia 4. i Dynamiczny serwis WWW

141

Dynamiczna strona WWW

Edycja strony startowej
Jeli decydujemy si na wykorzystanie listy kategorii ksiek na podstawie treci pobranych
z bazy danych, statyczne, wprowadzone rcznie nazwy kategorii widoczne w chwili obecnej nie
s ju potrzebne i w zasadzie mog by usunite. Jednak nie spieszmy si zanadto, nie po to
wprowadzalimy je wczeniej, by teraz w jednej chwili usun je bezpowrotnie. Aby jednak
uatwi sobie dalsze dziaania, wykorzystamy jedn, pierwsz pozycj listy do budowy nowej
dynamicznej zawartoci menu.
W tym celu uwanie, najlepiej w widoku kodu (widok Source lub Split), zaznaczamy kolejne
nazwy kategorii, pozostawiajc jedynie pierwsz pozycj, a nastpnie po prostu usuwamy zaznaczone elementy ze strony. W rezultacie pozostaa nam jedynie nazwa jednej kategorii menu.
Wykorzystamy j jako wzorzec do dalszej pracy (rysunek 4.10).

W widoku kodu lokalizujemy i usuwamy nazwy kategorii. Do budowy dynamicznej wersji serwisu
wystarczy nam jedna pozycja na licie
Rysunek 4.10.

Recordset rdo dynamicznych danych

Do budowy dynamicznej strony WWW konieczne jest przygotowanie i dostarczenie jej odpowiednich danych. W programie Adobe Dreamweaver CS3 rdem dynamicznych danych jest
Recordset. Skada si on z kilku istotnych moduw przygotowanych za pomoc jzyka PHP
i doczanych do kodu HTML naszej strony. Kady Recordset zawiera:
Zestaw instrukcji umoliwiajcych nawizanie komunikacji z baz danych,
Zestaw instrukcji umoliwiajcych wykonanie konkretnego zapytania do bazy,

142

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Zestaw instrukcji przetwarzajcych dane uzyskane w wyniku zapytania do bazy,

Zestaw instrukcji czyszczcych.

Co wane, do przygotowania podstawowej wersji Recordseta nie jest potrzebne nie tylko rczne
wprowadzanie kodu PHP, ale nawet jego podgld. Wszystkie operacje moemy wykona
w trybie graficznym za pomoc odpowiednich paneli dostpnych w programie Adobe Dreamweaver CS3.
Panel Data narzdzia budowy aplikacji

Sercem dynamicznych narzdzi Adobe Dreamweaver CS3 jest panel Data dostpny w grnym
pasku lub menu (w zalenoci od konfiguracji programu) Insert (rysunek 4.11). W tym miejscu
mamy dostp do wszystkich istotnych elementw, potrzebnych do budowy dynamicznej aplikacji
WWW. Przyjrzyjmy si tym narzdziom. Wstpnie wszystkie elementy panelu Data mona
podzieli na trzy fantastyczne kategorie:
Narzdzia do pracy z zewntrznymi danymi XML oraz tworzenia dynamicznych efektw
w technologii Ajax.
Narzdzia do wsppracy z baz danych.
Import Tabular Data osobne narzdzie do wprowadzania danych tabelarycznych,
dostpne jako odrbna kategoria. Podczas importu plikw zawierajcych odpowiednio
sformatowane dane (np. pliku tekstowego zawierajcego dane oddzielane przecinkiem,
tabulatorem itp.) moemy atwo i szybko zamieci je w tabeli na stronie bez koniecznoci
rcznego wprowadzania danych.

Rysunek 4.11. Panel Data (w poprzednich wersjach programu nosi nazw Application) zawiera szereg narzdzi
uatwiajcych budow strony WWW opartej na bazie danych lub plikach XML

Narzdzia do pracy z zewntrznymi danymi XML oraz tworzenia dynamicznych efektw

w technologii Ajax:
Spry XML Data Set narzdzie pozwalajce utworzy nowe rdo danych technologii
Spry (Ajax) na stronie WWW. W tym celu wykorzystywane s zewntrzne pliki XML
o odpowiedniej strukturze.
Spry Region narzdzie tworzenia obszaru dynamicznych danych budowanych
na podstawie zewntrznego rda XML.
Spry Repeat narzdzie umoliwiajce wywietlanie kolejno wielu wzw XML
na pojedynczej stronie.
Spry Repeat list narzdzie umoliwiajce tworzenie dynamicznej listy, menu
na podstawie danych zawartych w zewntrznym pliku XML.
Spry Table wygodne narzdzie do tworzenia tabeli danych na podstawie zewntrznego
pliku XML.

Rozdzia 4. i Dynamiczny serwis WWW

143

Narzdzia do wsppracy z baz danych:

Recordset narzdzie, ktre umoliwia poczenie strony z baz, odczyt waciwych
danych oraz ich prezentacj na stronie.
Dynamic Data narzdzie umoliwiajce wprowadzenie dynamicznego (pochodzcego
z bazy danych) tekstu, listy lub pola w wybranym miejscu na stronie WWW.
Repeat Region narzdzie umoliwiajce wywietlanie wielu rekordw z bazy
jednoczenie.
Show Region zestaw narzdzi umoliwiajcych wykonanie podstawowych instrukcji
warunkowych na podstawie danych z bazy. Za pomoc narzdzi z tej sekcji moemy

wywietla (lub nie) dane z bazy w zalenoci od ich dostpnoci. Instrukcja typu

umoliwia dodanie najprostszej logiki do strony WWW.

Recordset Paging to zestaw narzdzi do zarzdzania du iloci danych. Umoliwia
atwe dodanie elementw nawigacyjnych na kolejnych stronach zawierajcych
jednoczenie wiele rekordw.
Display Record Count to take zestaw narzdzi do zarzdzania du iloci danych.
Umoliwia atwe dodanie elementw nawigacyjnych na kolejnych stronach zawierajcych
jednoczenie wiele rekordw.
Master Detail Page Set zestaw narzdzi do budowy stron typu
.
zawiera list wszystkich produktw danej kategorii, strona
Strona
informacje o wybranym produkcie.
Insert Record fantastyczne narzdzia umoliwiajce dodawanie rekordw
do bazy danych.
Update Record narzdzia umoliwiajce aktualizacj rekordw bazy.
Delete Record narzdzia umoliwiajce usuwanie wybranych rekordw z bazy.
User Authentication zestaw narzdzi uatwiajcy budow systemu uwierzytelniania
i logowania uytkownikw.
XSL Transformation zestaw narzdzi formatowania dokumentu XML
lub danych RSS
poka

je li jest

kategoria i produkt

Master

Detail

Z punktu widzenia twrcy dynamicznej aplikacji WWW budowanej przy uyciu bazy danych
i skryptw PHP, zestaw ten udostpnia nie tylko doskonae narzdzia bazodanowe. Pozwala take
na budow elementw strony na bazie niezwykle popularnej i funkcjonalnej technologii Ajax.
Tym zagadnieniom przyjrzymy si nieco uwaniej w dalszej czci ksiki.
Dziki uyciu prostych narzdzi z kategorii
, nauka programowania PHP oraz uycia bazy
danych czy plikw XML staje si po prostu przyjemnoci.
Data

Przygotowanie rda danych Recordset

(strona gwna serwisu) konieczne
Do budowy dynamicznej listy kategorii na stronie
jest przygotowanie rda danych
, ktre umoliwi poczenie strony z baz, odczyt
waciwych danych wprowadzonych kategorii oraz ich prezentacj na stronie. W tym celu
index.php

Recordset

144

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

przechodzimy do zakadki (lub menu) Data dostpnej w grnym panelu Insert, po czym z dostpnych przyciskw wybieramy polecenie (przycisk) Recordset (rysunek 4.12).

Rysunek 4.12. Przycisk Recordset umoliwia budow nowego rda danych. Na jednej stronie moemy wykorzysta
kilka Recordsetw. Kady z nich odpowiedzialny jest za inne dziaania
Nowy Recordset moemy utworzy take dwiema innymi metodami. Za porednictwem
dostpnego w menu grnym Window panelu Bindings klikamy przycisk oznaczony symbolem
+, a nastpnie z rozwijanej listy wybieramy polecenie Recordset (Query). Moemy wykorzysta
take menu grne Insert, a nastpnie przej do pozycji Data Objects i z dostpnej w tym
miejscu listy wybra polecenie Recordset.

Niezalenie od wybranej metody, due okno dialogowe Recordset pozwoli na precyzyjne ustalenie rda danych dla naszej strony.
Panel Recordset dostpny jest w dwch odmianach: Basic (Podstawowy domylnie aktywny),
doskonay dla wszystkich rozpoczynajcych prac z baz danych, oraz Advanced (Zaawansowany), konieczny do wprowadzania bardziej zaawansowanych zapyta do bazy. W trybie Basic
podstawowe elementy Recordseta dostpne s w postaci wizualnej i nie wymagaj w zasadzie
adnej znajomoci jzyka SQL. Podczas pracy w trybie Advanced niezbdne jest wprowadzanie
kodu zapytania SQL rcznie. Daje nam to due moliwoci dowolnego ksztatowania samego
zapytania, jak i relacji pomidzy rnymi tabelami.
Do pierwszych prb poczenia szablonu z baz danych wykorzystamy Recordset w trybie Basic.
Jego funkcjonalno okazuje si zupenie wystarczajca podczas tworzenia listy kategorii ksiek.
W polu Name wprowadzamy opisow nazw zbioru danych. Warto pamita, by nie uywa tu
polskich znakw ani spacji. Nazwa powinna by dobrana tak, by nie kolidowaa z nazwami tabel,
pl bazy danych ani innymi elementami (nazwami) strony. W tym przypadku do budowy listy
kategorii ksiek moemy wykorzysta prost, a jednoczenie opisow nazw typu listaKategorii (rysunek 4.13).
Rysunek 4.13.

Okno Recordset
umoliwia
wprowadzenie
na stron zapytania
SQL w trybie
graficznym.
To wspaniay sposb
na poznanie i nauk
pierwszych polece
SQL dla uytkownikw
o mniejszym
dowiadczeniu

Rozdzia 4. i Dynamiczny serwis WWW

145

Pole Connection pozwala na wskazanie lub utworzenie waciwego pliku konfiguracyjnego

umoliwiajcego poczenie wszystkich stron serwisu z baz danych. Pliki konfiguracyjne
zapisywane s automatycznie w folderze Connections i zawieraj wszystkie niezbdne dane
dotyczce serwera baz danych, samej bazy, jej tabel, a take nazw uytkownika oraz haso.
Uycie zewntrznych plikw konfiguracyjnych z rozszerzeniem *.PHP w znaczcy sposb zabezpiecza nasz stron przed nieautoryzowanym dostpem do bazy. Dla jednego serwisu moemy
przygotowa kilka niezalenych sposobw czenia z baz (plikw konfiguracyjnych), co pozwala
ograniczy dostp do wybranych tabel bazy, podnoszc w ten sposb stopie ich zabezpieczenia.
Czsto podczas prac testowych wygodnie jest utworzy dwa niezalene pliki konfiguracyjne.
Jeden zawiera dane do serwera testowego localhost dostpnego na naszym dysku. Drugi zawiera
dane niezbdne do wsppracy z produkcyjn baz danych na fizycznym serwerze WWW.
Podczas tworzenia pierwszego zbioru danych, Recordset, nie ma moliwoci wyboru sposobu
poczenia strony z baz. Po prostu do tej pory nie utworzylimy jeszcze adnego pliku konfiguracyjnego. W polu Connection pozostawiamy pozycj None i za pomoc przycisku Define
przechodzimy do okna Connections for Site siteRecenzje (rysunek 4.14).

Rysunek 4.14. W celu nawizania komunikacji z baz danych trzeba przygotowa plik konfiguracyjny Connection.
Dla wygody testowania naszej strony moemy przygotowa dwa poczenia, lokalne do testowania strony na serwerze
z naszego dysku oraz internetowe, niezbdne do poprawnego dziaania strony w Internecie

Jeli wczeniej zdefiniowane byy metody poczenia z baz, ich lista widoczna bdzie w wywietlonym oknie. Aby zmieni ustawienia istniejcego pliku konfiguracyjnego, wybieramy go z listy,
a nastpnie za pomoc przycisku Edit wchodzimy w tryb edycji jego waciwoci.
W przypadku, gdy tworzymy pierwszy plik konfiguracyjny, na licie nie ma jeszcze widocznych
adnych pocze. Za pomoc przycisku New przechodzimy do kolejnego okna MySQL
Connection. W tym miejscu uwanie wprowadzamy niezbdne dane konfiguracyjne.
Connection name (Nazwa poczenia) to opisowa nazwa poczenia, ktra powinna
by krtka i zrozumiaa. W przypadku uycia serwera testowego localhost moemy
wprowadzi nazw localTest. Jest ona krtka, zrozumiaa i jednoznacznie wskazuje
na uycie lokalnego serwera testowego. W przypadku pracy z serwerem internetowym
nazwa w postaci remoteTest doskonale oddaje ten wanie charakter poczenia.
MySQL Server (Serwer bazy danych MySQL) to adres serwera WWW. W przypadku
pracy z serwerem Krasnal (lub innym zainstalowanym na naszym dysku) jego adres
ma posta localhost.
User name (Nazwa uytkownika) to nazwa uytkownika, ktry ma dostp do bazy
danych. W przypadku uycia serwera Krasnal nazwa uytkownika o prawach
administracyjnych (Admin) to root. W przypadku uycia innych serwerw konieczne
jest sprawdzenie waciwej nazwy w ich dokumentacji.

146

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

( ) to haso dostpu do bazy danych dla wybranego uytkownika.

W przypadku pracy z serwerem Krasnal haso domylnego uytkownika to krasnal.
(
) to waciwa baza danych wykorzystywana podczas budowy
danego serwisu WWW. Moemy oczywicie wprowadzi nazw bazy rcznie, jednak
duo wygodniej jest wskaza waciw baz z dostpnych dla wybranej lokalizacji
(localhost) za pomoc przycisku Select. Do budowy strony z recenzjami ksiek
wybieramy utworzon wczeniej baz siterecenzje.
Password

Database

Has o

Baza danych

Przykadowe dane okna MySQL Connection dla serwera Krasnal przedstawione s poniej
(rysunek 4.15).
Connection name: localTest
MySQL Server: localhost
User Name: root
Password: krasnal
Database: siteRecenzje
Rysunek 4.15.

Podczas tworzenia
lokalnego poczenia
uyjemy danych
dotyczcych bazy
na naszym dysku.
W przypadku
poczenia
internetowego w tym
miejscu wprowadzamy
dane umoliwiajce
poczenie i wspprac
z baz internetow

Za pomoc przycisku OK potwierdzamy wprowadzone waciwoci poczenia i przechodzimy

ponownie do okna Connections for Site siteRecenzje. Przycisk Done pozwala zachowa ustawienia i przenosi nas z powrotem do okna edycji Recordset.
Co bardzo istotne, bezporednio po zdefiniowaniu waciwoci ustawie poczenia nie bdzie
ono automatycznie widoczne w polu Connection. Musimy rcznie wskaza wprowadzon nazw
localTest, by przej do dalszej czci panelu.
W polu Table wybieramy jedn z tabel w wybranej bazy danych. W przypadku bazy siterecenzje
do budowy listy kategorii wybieramy tabel kategorie, a nastpnie w polu Columns poniej
okrelamy, ktre pola (kolumny) tabeli chcielibymy wykorzysta.
W tym przypadku konieczne jest uycie wszystkich pl (All), jednak w wielu innych sytuacjach
moemy wybra opcj Selected i (z wcinitym klawiszem Ctrl) wskaza wybrane pola konieczne
do budowy naszej strony.

Rozdzia 4. i Dynamiczny serwis WWW

147

Widoczne poniej sekcje Filter oraz Sort pozwalaj na wprowadzenie dodatkowych opcji
dotyczcych budowanego zbioru danych. W tej chwili nie ma koniecznoci ich modyfikacji
(jednak zrobimy to nieco pniej), zatem w obu polach pozostawiamy domylnie wybran
opcj None (rysunek 4.16) i za pomoc przycisku OK potwierdzamy wprowadzone dane.
Rysunek 4.16.

Podczas tworzenia
Recordseta konieczne
jest wskazanie
odpowiedniego
poczenia, tabeli
z bazy oraz jej pl.
W wielu przypadkach
uyjemy wszystkich pl
tabeli, jednak o ile jest
to moliwe, starajmy
si ogranicza ilo
przesyanych danych
do minimum

Kady Recordset (rdo danych) widoczny jest automatycznie w panelu Bindings (panel
Bindings otwiera si w chwili utworzenia nowego Recordseta). Po rozwiniciu zawartoci za
pomoc przycisku z symbolem + (widoczny tu przed jego nazw) wywietla on list wszystkich
pl bazy danych doczonych do biecego Recordseta podczas definiowania jego waciwoci.
W chwili uycia rda danych generowanego na podstawie tabeli kategorie w panelu Bindings
widoczne s dwie pozycje (rysunek 4.17):
id_kategorii zawiera numeryczny identyfikator kategorii w tabeli
kategoria nazwa waciwej kategorii
Rysunek 4.17.

W panelu Bindings
widoczne s (w tym
przypadku dwa) pola
z wybranej tabeli
bazy danych

Do utworzenia dynamicznej listy menu wystarczy oczywicie uycie jedynie pola kategoria, ktre
zawiera nazwy kategorii wprowadzone do bazy danych. Pole id_kategorii wykorzystamy w nieco
innym celu w dalszej czci rozdziau.
Warto w tym momencie zwrci uwag na kod (przycisk Source widoczny w grnej czci
okna biecego dokumentu) HTML/PHP edytowanej strony. Dodanie dynamicznego rda
Recordset wprowadzio wiele istotnych zmian. Wikszo z nich widoczna jest w grnej czci
strony. Pomidzy znacznikami kodu PHP <?php tu tre kodu PHP na naszej stronie ?>
wprowadzonych jest kilka funkcji PHP uatwiajcych poczenie z wybran baz, wyszukanie
odpowiednich danych oraz wywietlenie ich na stronie.

148

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Podobnie jak w przypadku jzyka HTML, kod PHP zawarty jest w sekcji ograniczonej znacznikami. Zapis <?php oznacza pocztek kodu PHP na stronie, za odpowiednio znacznik ?> jest
jego zakoczeniem. Pomidzy znacznikami zawarte s waciwe funkcje i dziaania jzyka
PHP/MySQL wykorzystane do wywietlenia treci na podstawie utworzonego rda danych.
Adobe Dreamweaver CS3 generuje bardzo ciekawy kod strony. Jest on poczeniem tradycyjnego HTML z elementami PHP umieszczonymi wewntrz znacznikw <?php tu tre kodu
PHP na naszej stronie ?>. Co wane, dziki uyciu jzyka HTML moemy budowa serwis
w trybie graficznym, wprowadzajc jedynie dynamiczne dane w wybranych sekcjach strony. Tego
typu podejcie zdecydowanie uatwia prac nawet zaawansowanym uytkownikom programu
Adobe Dreamweaver CS3 o mniejszym dowiadczeniu w programowaniu.

Dynamiczne menu na stronie

Strona index.php po usuniciu nazw pozostaych kategorii w menu po lewej stronie zawiera teraz
jedynie pojedyncz kategori. Zaznaczamy j, a nastpnie przechodzimy do palety Bindings. Tu
wybieramy pole kategoria i za pomoc przycisku Insert widocznego w dolnej czci panelu
wprowadzamy dynamiczn zawarto na stron (rysunek 4.18).
Rysunek 4.18.
Za pomoc przycisku
Insert moemy
wprowadza

dynamiczne teksty
na stron. atwiej
i szybciej jest je
przeciga z panelu
Bindings w wybrane
pooenie w oknie
aktywnego dokumentu

Zaznaczona wczeniej statyczna pozycja menu zostaje w ten sposb automatycznie zastpiona
treci w postaci {listaKategorii.kategoria}. Zapis w tej wanie postaci, a take inny kolor
zaznaczenia informuje nas, e w tym miejscu wprowadzone zostay dynamiczne dane (rysunek
4.19). Pierwszy segment nazwy {listaKategorii.kategoria} oznacza rdo danych Recordset. W tym przypadku widoczna nazwa jednoznacznie wskazuje na Recordset listaKategorii.
Druga cz nazwy widoczna bezporednio po kropce zawiera nazw pola (kategoria) wykorzystanego do budowy menu na stronie.
Niezwykle wygodn funkcj Adobe Dreamweavera CS3 jest moliwo podgldu dynamicznej
zawartoci z bazy danych na biecej stronie bez koniecznoci uruchamiania przegldarki internetowej. W tym celu naley zlokalizowa przycisk Live Data View widoczny w grnej czci okna
aktywnego dokumentu. Po uruchomieniu podgldu na licie kategorii powinna ukaza si jedynie
pierwsza pozycja z bazy (rysunek 4.20).
W niektrych sytuacjach uycie podgldu Live Data View nie daje dobrych rezultatw. Dotyczy
to szczeglnie sytuacji, gdy domylny kolor podwietlenia dynamicznych danych pokrywa si
z kolorystyk lub tem tekstu. Moemy to atwo zmieni za pomoc odpowiedniej edycji preferencji oglnych programu. Za pomoc polecenia Preferences (Ctrl+U) dostpnego w menu

Rozdzia 4. i Dynamiczny serwis WWW

149

Rysunek 4.19. Dynamiczna nazwa kategorii na stronie. W domylnej postaci dynamiczne pole tekstowe widoczne
jest w jasnoniebieskim podwietleniu. W wielu przypadkach skutecznie utrudnia to prac.

Za pomoc przycisku Live Data View moemy podglda dynamiczne treci bezporednio na
stronie WWW. Znacznie uatwia to pniejsze formatowanie i planowanie rozmieszczenia elementw na stronie

Rysunek 4.20.

grnym Edit przechodzimy do sekcji Highlighting (rysunek 4.21). Jeli w dolnej sekcji Live Data
w obu przypadkach ustawimy brak koloru, Adobe Dreamweaver CS3 wywietli dane w oryginalnej ostylowanej postaci. Tego typu podgld bardzo uatwia dalsz prac (rysunek 4.22).
Rysunek 4.21.

W oknie Preferencji,
w kategorii
Highlighting mamy
moliwo modyfikacji
koloru podwietlenia
dynamicznych danych
na stronie. W wielu
przypadkach usunicie
podwietlenia jest
bardzo wygodnym
rozwizaniem

150

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Rysunek 4.22. Dynamiczne dane bez podwietlenia prezentuj si duo lepiej. Taki tryb podgldu jest bardzo
przydatny podczas edycji stylw CSS i formatowania elementw strony

Prawdopodobnie dla wielu Czytelnikw widoczny podgld jest pewnym zaskoczeniem. Skoro
nasz Recordset mia umoliwi wywietlanie wszystkich kategorii ksiek, czemu widoczny
jest tylko pierwszy rekord bazy danych? Nie ma tu nic dziwnego. Do tej pory nie podjlimy
adnych dziaa umoliwiajcych wywietlenie wszystkich pozycji z pola kategoria. Sprbujmy
to zmieni.
Automatycznie podczas uycia dowolnego rda danych (Recordset) mamy dostp jedynie do pierwszego rekordu bazy. Jego tre widoczna jest w trybie Live Data View, a take
na podgldzie strony w przegldarce internetowej polecenie Preview In Browser (F12)
dostpne w menu grnym File.

W celu wywietlenia wikszej liczby rekordw na stronie trzeba wprowadzi dodatkowe funkcje
jzyka PHP. Oczywicie w pierwszej chwili brzmi to raczej mao zachcajco, jednak nie jest
to wcale trudne zadanie. Musimy jedynie precyzyjnie zaznaczy pierwsz pozycj menu w lewej
kolumnie, zawart pomidzy znacznikami <li></li> (rysunek 4.23), a nastpnie w grnej sekcji
strony zlokalizowa i wykorzysta przycisk Repeat Region dostpny w zakadce (lub menu) Data
(rysunek 4.24).

Rysunek 4.23. W dolnej czci strony widoczna jest hierarchia znacznikw HTML naszej strony. Ostatni znacznik
na licie przyporzdkowany jest do obiektu aktywnego na stronie. Widoczne tu selektory moemy wykorzystywa
take do precyzyjnego zaznaczania wybranych elementw strony

Za pomoc przycisku Repeat Region moemy wprowadza cykliczne, powtarzalne elementy strony
na podstawie treci pobranych z bazy danych. Obszar Repeat Region budowany na podstawie znacznikw pozycji
listy <li> pozwala na budow dynamicznego menu na stronie
Rysunek 4.24.

Uycie polecenia Repeat Region pozwala automatycznie utworzy funkcj jzyka PHP, ktra
wywietla dowoln liczb rekordw z bazy danych.

Rozdzia 4. i Dynamiczny serwis WWW

151

W oknie Repeat Region znajduj si trzy nieskomplikowane opcje. W polu Recordset upewniamy
si, e widoczna jest nazwa waciwego rda danych lista kategorii. Sekcja Show pozwala
na wybr iloci rekordw jednorazowo prezentowanych na stronie (rysunek 4.25).

W oknie konfiguracyjnym Repeat Region wprowadzamy docelow liczb rekordw (elementw

z bazy danych), jakie chcielibymy wywietli na stronie. Nie zawsze uycie opcji All daje dobre rezultaty
Rysunek 4.25.

Show ... Records at a Time to wybr dowolnej, skoczonej liczby rekordw

widocznych na stronie
Show All records wywietla pen list rekordw, niezalenie od jej iloci. W sytuacji,
gdy lista rekordw jest bardzo duga, uycie tej opcji nie tylko spowalnia proces
wywietlania strony, ale take nie wyglda pniej zbyt elegancko.

W przypadku budowy listy kategorii ksiek wybierzemy oczywicie opcj All Records (nie mamy
wielu kategorii), co umoliwi wywietlenie wszystkich wprowadzonych kategorii w obszarze
menu. W ten sposb uytkownicy serwisu bd mogli atwo i szybko wybra waciw kategori,
by wyszuka odpowiedni recenzj ulubionej ksiki.
Dziki uyciu podgldu Live Data View menu widoczne w lewej kolumnie zawiera teraz list
wszystkich kategorii wprowadzonych do bazy danych. Nie byo to chyba trudne zadanie (rysunek 4.26).

Rysunek 4.26. Dziki uyciu polecenia Repeat Region dynamiczna lista kategorii na podstawie tabeli kategorie z
bazy danych znalaza si na naszej stronie

152

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

cza tymczasowe

Aby menu nawigacyjne kategorii ksiek umoliwiao przejcie do innej strony serwisu, konieczne jest dodanie mu odpowiednich czy (linkw). Na tym etapie budowy caego serwisu trudno
jest jeszcze planowa waciwe poczenia pomidzy stronami. W tej chwili nie mamy jeszcze
adnych stron, do ktrych miayby one prowadzi. Oczywicie moglibymy pozostawi menu
w biecej postaci, jednak wprowadzenie choby tymczasowych linkw znacznie uatwi nam
pniejsze dziaania, a i teraz wprowadzi nieco zmian w wygldzie biecej strony.
Menu kategorii ksiek generowane jest dynamicznie na podstawie treci pobranych z bazy
danych. W zwizku z tym na stronie index.php znajduje si jedynie dynamiczne odwoanie do
wybranego pola {listaKategorii.kategoria} tabeli. Dziki uyciu niezwykle wygodnej funkcji
Repeat Region, wywietlamy w tym miejscu pen list kategorii. Oznacza to, nie mamy moliwoci dodania czy rcznie do kadej pozycji menu. Jak atwo si domyli, musz by one take
dynamicznie generowane.
W tej chwili wprowadzimy jednak jedynie proste linki zastpcze. W tym celu moemy wykorzysta znacznik #. Wprowadzenie cza w takiej postaci oczywicie nie spowoduje poprawnego
dziaania strony, jednak w znaczcy sposb uatwi pniejsz modyfikacj.
Zaznaczamy na stronie dynamiczny tekst w postaci {listaKategorii.kategoria}, a nastpnie w polu Link wprowadzamy znacznik #. Potwierdzamy to za pomoc klawisza Enter (rysunek 4.27).

Rysunek 4.27.

element strony

Za pomoc selektora <li> na licie w dolnej czci strony moemy precyzyjnie zaznaczy wybrany

Dodawanie czy (linkw) naley zawsze potwierdza za pomoc klawisza Enter!

Niestety, dodanie zastpczego odnonika wprowadzio niekorzystn zmian na naszej stronie.

Do tej pory atrakcyjnie wygldajce (na podgldzie lub przy uyciu funkcji Live Data View)
menu stao si niebieskie i podkrelone. Nie jest to nic niezwykego. W ten sposb przegldarki
domylnie wywietlaj cza na kadej stronie. Dopki za pomoc definicji CSS nie zmienimy
wygldu odnonika, dopty przyjmuje on standardow posta niebieski podkrelony tekst.
Co ciekawe, wielko oraz styl odnonika pozostay bez zmian, zmieni si jedynie kolor i dodane
zostao podkrelenie (rysunek 4.28).

Rozdzia 4. i Dynamiczny serwis WWW

153

Rysunek 4.28. Po dodaniu cza wygld pozycji menu zmieni si. W tej chwili elementy listy przybray domylny
wygld odnonikw na stronie. S koloru niebieskiego i maj dodatkowe podkrelenie

Dodatkowe style CSS

By nada elementom menu wczeniej okrelony wygld, konieczne jest przygotowanie kolejnych definicji stylw kaskadowych CSS. Nie jest to szczeglnie trudne zadanie, jednak w tym
miejscu postaramy si doda licie menu kilka ciekawych moliwoci.
W dzisiejszych czasach, w dobie burzliwego rozwoju Internetu i nowoczesnych technologii,
trudno sobie wyobrazi, by przyciski ekranowe (np. menu z list kategorii) pozostaway statyczne
na stronie. Zazwyczaj nadajemy im typowy efekt RollOver, czyli zmian wygldu po najechaniu
i naciniciu kursorem myszki. Tego typu efekty czsto kojarzone s z budowaniem specjalnych
elementw graficznych, ktre nastpnie s podmieniane za pomoc skryptw jzyka Java Script
w chwili najechania na nie kursorem myszy. Na szczcie takie podejcie dzi ju moe odej
w niepami. Dziki uyciu stylw kaskadowych moemy przygotowa niemal identyczny wizualnie efekt bez koniecznoci uycia grafiki i Java Scriptu.
Zanim przejdziemy do budowy stylw, przypomnijmy sobie struktur menu kategorii. Cao
znajduje si w sekcji <div#sidebar1>, a nastpnie wewntrz sekcji listy nienumerowanej, czyli
<ul></ul>. Jedyna pozycja listy {listaKategorii.kategoria} zamknita jest wewntrz znacznika
<li></li>. W wyniku dodania odnonika w postaci # pole {listaKategorii.kategoria} zawiera
jeszcze dodatkowy tag jzyka HTML <a href="#">. Jest to znacznik cza (linku) tymczasowego (#), ktry w tej chwili nie powoduje adnych konkretnych dziaa na stronie.
Analizujc ca sekcj menu na stronie, nie znajdziemy w tej chwili zbyt wiele kodu. Mamy
jedynie pojedyncze dynamiczne pole {listaKategorii.kategoria} wraz z dodanym odnonikiem
<a>. Pena zawarto listy jest dynamicznie pobierana z bazy i za pomoc obszaru Repeat Region
wielokrotnie powielana na stronie. W tej sytuacji nasze dziaania zwizane z formatowaniem menu
dotycz jedynie dynamicznego pola {listaKategorii.kategoria} (rysunek 4.29).
Krokiem, ktry spowodowa utrat oryginalnego wygldu strony, byo dodanie cza do dynamicznego pola tekstowego. Wikszo przegldarek przedstawia odnoniki (linki), a wic elementy zawarte wewntrz znacznika <a>, w swj domylny sposb (niebieskie teksty z podkreleniem). Chcc zmieni ten stan, musimy pokusi si o modyfikacj wygldu znacznika <a>.
Niestety, nie moemy zrobi tego globalnie. Redefinicja wygldu cza na stronie spowoduje
zmian wygldu wszystkich linkw. O ile w przypadku menu kategorii pewien ustalony wygld
sprawdzi si doskonale, o tyle w gwnej sekcji dokumentu moe wyglda bardzo le. Oznacza
to, e musimy w jaki sposb odrni definicj wygldu znacznika <a> sekcji <div#sidebar1>
od pozostaych. W zasadzie rozwizanie widoczne jest ju w poprzednim zdaniu. Jeli wprowadzimy redefinicj znacznika jedynie w sekcji <div#sidebar1>, pozostae odnoniki pozostan bez
zmian, co byo naszym zaoeniem. Zatem do dziea.

154

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Rysunek 4.29.

fragmencie kodu

Dziki uyciu bazy danych caa lista kategorii wraz z czami zapisana jest w niewielkim

Klikamy gdziekolwiek dynamiczne pole {listaKategorii.kategoria} (w ten sposb moemy

szybko zaznaczy sekcj znacznika <a>), a nastpnie w dolnej czci strony wskazujemy ostatni
na licie hierarchii elementw strony znacznik <a> (rysunek 4.30). Otwieramy palet CSS Styles
(Shift F11) i dodajemy nowy styl.

Rysunek 4.30.

Za pomoc selektorw w dolnej czci strony zaznaczamy cae cze znacznik <a>

Adobe Dreamweaver CS3 automatycznie zaproponuje styl typu Advanced, nadajc mu nazw
selektora w postaci .twoColElsLthdr #container #sidebar1 a. Podobnie jak robilimy to wczeniej, moemy nieco j skrci, doprowadzajc ostatecznie do postaci #sidebar1 a. Zapis ten
oznacza: wszystkie odnoniki (znacznik <a>), ktre znajduj si w sekcji #sidebar1, bd sformatowane na podstawie definicji, jakie niebawem wprowadzimy.
W oknie CSS Rule Definition modyfikujemy jedynie dwie waciwoci stylu (rysunek 4.31):
Color doprowadzamy go do oryginalnej postaci widocznej przed dodaniem cza.
Decoration: none w ten sposb usuwamy (jeli potrzeba) zbyteczne podkrelenie
elementw menu kategorii.

Rozdzia 4. i Dynamiczny serwis WWW

155

Rysunek 4.31.

Okno CSS Rule

Definition zawiera
graficzny interfejs
budowy i edycji stylw
CSS. W tym miejscu
zmienimy jedynie kolor
odnonika oraz
usuniemy zbyteczne
podkrelenie

Za pomoc przycisku Apply moemy od razu sprawdzi dziaanie stylu na stronie. Jeli wszystko
wyglda zgodnie z naszymi oczekiwaniami, za pomoc przycisku OK koczymy budow stylu.
W tym momencie nie ma potrzeby dokonywa tu jeszcze wicej modyfikacji. Dodaniem innych
efektw zajmiemy si duo pniej.
Wykorzystanie obiektw Library

Adobe Dreamweaver CS3 posiada jeszcze jedno wspaniae narzdzie, ktre doskonale sprawdzi
si podczas naszej dalszej pracy. Obiekty Library, bo o nich mowa, to dowolne elementy strony,
fragmenty kodu czy wrcz cae funkcjonalne moduy zapisane w bibliotece (Library) naszego
sitea. Ogromn ich zalet jest moliwo wykorzystania w staej, niezmiennej i wrcz zablokowanej do edycji postaci na wielu rnych stronach naszego serwisu. Jednak najwicej korzyci
z obiektw Library mamy w chwili ich edycji. Zmieniajc obiekt zapisany w bibliotece (Library),
automatycznie aktualizujemy ten wanie fragment kodu na wszystkich stronach, ktre go wykorzystuj. W pewnym sensie przypomina to dziaanie szablonu, poniewa podobnie jak szablon,
on take jest zablokowany i niedostpny do edycji na kolejnych stronach. Podczas typowej pracy
wykorzystujemy jedynie stay, zapisany w bibliotece obiekt na wielu stronach serwisu. W odpowiednim momencie modyfikujemy jego zawarto, co spowoduje aktualizacj wszystkich wykorzystujcych go stron. Brzmi to fantastycznie i dokadnie tak dziaa.
W przypadku strony index.php zbudowalimy wanie menu nawigacyjne zawierajce list kategorii ksiek, ktrych recenzje mona znale w naszym serwisie. Nie jest to jednak w peni
funkcjonalne menu. Do jego penego dziaania potrzebujemy doda jeszcze cza (linki), ktre
umoliwi przegldanie ksiek wybranej kategorii. W chwili obecnej nie mamy jeszcze przygotowanych takich wanie stron docelowych. Znacznie utrudnia to przygotowanie waciwych
czy (linkw). W tej sytuacji doskonaym rozwizaniem okae si zastosowanie obiektu Library,
ktry w oryginalnej postaci wykorzystamy do budowy kolejnych stron serwisu. Gdy powstan
ju strony umoliwiajce przegldanie ksiek wybranej kategorii, dodamy odpowiednie cza
dla obiektu z biblioteki. Dziki temu wszystkie strony, ktre wykorzystuj taki obiekt, jednoczenie zostan zaktualizowane. To nie tylko bardzo wygodne rozwizanie. Pozwala znacznie
przyspieszy dalsz prac, skupiajc si na jej istotnych elementach. Drobne modyfikacje typu
ostatni szlif faktycznie mona wprowadzi nieco pniej.

156

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Obiekty Library dostpne s jedynie podczas pracy z ca witryn. Nie ma moliwoci ich
uycia w sytuacji, gdy budujemy jedynie pojedyncz stron i nie przygotowalimy penej definicji
sitea (katalogu). W celu uycia tych obiektw przechodzimy do palety Assets (F11) dostpnej
w menu grnym Window (rysunek 4.32).
Rysunek 4.32.

Paleta Assets
przechowuje cenne
zasoby naszego
serwisu. Aby skorzysta
z jej usug, naley
wczeniej zdefiniowa
site. Jedynie w tym
trybie mamy dostp
do palety Assets,
a w niej do szablonw,
obiektw biblioteki
czy kolorw

Podobnie jak podczas pracy z baz danych, wszystkie przydatne palety zgrupowane s w pojedynczym oknie i nie ma koniecznoci wywoywania ich z menu grnego Window. Klikajc
kolejne zakadki panelu Files (a take Application w przypadku pracy z dynamicznymi danymi),
moemy szybko przechodzi pomidzy odpowiednimi panelami. Panel Assets dostpny jest
w tej samej sekcji co podstawowe okno Files, standardowo widoczne po prawej stronie ekranu.
Paleta Assets zawiera szereg niezwykle przydatnych zasobw, ktre z powodzeniem moemy
wykorzystywa podczas pracy z serwisem. Dostpne w pionowej kolumnie po lewej stronie przyciski pozwalaj na szybkie przeczenie podgldu zasobw rnego typu.
Images zawiera list i podgldy wszystkich plikw graficznych dostpnych w katalogu
gwnym naszego sitea. Jeli nieco rozszerzymy podgld zasobw palety Assets,
widoczne stan si take dodatkowe, cakiem przydatne informacje. Pord nich
znajdziemy oczywicie nazw oraz: Dimensions, czyli rozmiary grafiki, Size jej wag,
Type typ pliku graficznego oraz Full Path pen ciek dostpu do wybranej
grafiki. Podgld oraz zestaw tych informacji okazuj si bardzo przydatne podczas pracy
z wikszymi serwisami, gdzie nie sposb zapamita wszelkich informacji o kadym
uytym pliku graficznym.
Colors to pena lista wszystkich kolorw wykorzystanych podczas budowy naszej
witryny. Oczywicie dotyczy ona przede wszystkim tych kolorw, jakie wykorzystalimy
do budowy stylw kaskadowych. Jeli pniej podczas budowy kolejnych elementw
strony czy stylw chcielibymy zachowa zgodno kolorystyczn na stronie, moemy
podczas ustalania ich barwy wykorzysta t wanie list i wskaza jeden z uytych ju
wczeniej kolorw. Na podgldzie w grnej czci okna widoczny jest zarwno zapis
koloru w kodzie szesnastkowym, jak i jego definicja na podstawie RGB. Moe to by
niezwykle przydatne szczeglnie podczas tworzenia dodatkowych elementw graficznych,
gdy potrzebujemy dopasowa ich kolor do elementw strony.

Rozdzia 4. i Dynamiczny serwis WWW

157

Links przedstawia pen list wszystkich zewntrznych adresw URL wykorzystanych

podczas budowy naszej strony. Jeli pewien odnonik do zewntrznej strony czy adresu
e-mail chcielibymy wykorzysta w wielu miejscach, wystarczy zaznaczy odpowiedni
tekst lub grafik i przecign waciwy link z palety Assets na zaznaczony element
na stronie.
Flash to naturalnie zestawienie wszystkich elementw Flash (SWF) dostpnych
w katalogu gwnym sitea.
Shockwave dzi ju mao popularna, lista wszystkich elementw Shockwave (DCR)
dostpnych do uycia na naszej stronie. Pliki typu Shockwave budowane s za pomoc
fantastycznego, cho nieco zapominanego programu Macromedia (Adobe) Director.
Movies to pena lista filmw wideo zapisanych w gwnym katalogu naszej witryny.
Scripts to lista wszystkich zewntrznych skryptw (np. Java Script) wykorzystanych
do budowy biecego serwisu.
Templates zawiera pen list wszystkich szablonw stron WWW aktywnego serwisu.
Library to biblioteka wsplnych elementw, jakie w staej postaci moemy
wykorzystywa na naszej stronie. Dowolna modyfikacja elementu z biblioteki
automatycznie aktualizuje wszystkie strony, jakie z niego korzystaj.

Nas oczywicie najbardziej interesuje moliwo praktycznego wykorzystania biblioteki (Library).

Jest to niezwykle proste. Musimy precyzyjnie zaznaczy fragment strony, jaki chcielibymy
zapisa w bibliotece, i przecign go do palety Assets. W niektrych sytuacjach trudno jest przecign zaznaczony element i w takiej chwili moemy wykorzysta take przycisk New Library
Item widoczny w dolnej czci palety Assets. W ten sposb unikamy kopotliwego niekiedy przecigania obiektw i precyzyjnie umieszczamy waciwy element w bibliotece.
W przypadku budowy menu z list kategorii musimy dokadnie zaznaczy obszar, jaki chcielibymy zamieci w bibliotece. W tym celu klikamy widoczn dynamiczn pozycj listy, a nastpnie
przechodzimy do widoku kodu. Wprawdzie moliwe jest zaznaczanie take w trybie Design,
jednak duo atwiej w ten sposb o pomyk. Pracujc w widoku kodu strony, precyzyjnie zaznaczamy jedynie te fragmenty, ktre s faktycznie konieczne.
Dziki zaznaczeniu fragment kodu z list kategorii jest wanie wyrniony na ekranie. Lokalizujemy sekcj znacznikw <ul></ul> i zaznaczamy cay fragment kodu tej listy. Naley zwrci
baczn uwag, by zaznaczony zosta zarwno pocztek listy <ul>, caa zawarto wraz z kodem
PHP, jak i znacznik kocowy listy </ul> (rysunek 4.33).
Teraz za pomoc polecenia New Library Item dostpnego w menu bocznym palety (rysunek
4.34) dodajemy ca list kategorii do biblioteki. W celu atwiejszego odnalezienia waciwego
obiektu w bibliotece wprowadzamy jej opisow nazw listaKategorii (rysunek 4.35). Po
zatwierdzeniu nazwy otrzymamy komunikat o aktualizacji czy, ktry naturalnie potwierdzamy.
W rezultacie tych dziaa menu z list kategorii zostao wyrnione kolorem oraz zablokowane
do bezporedniej edycji. W celu modyfikacji elementw menu konieczna jest teraz edycja oryginalnego fragmentu kodu z biblioteki.

158

Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty

Rysunek 4.33. Zaznaczony fragment listy zamknity wewntrz znacznikw <ul>. Moemy zaznacza elementy
bezporednio na stronie lub skorzysta z selektorw widocznych w jej dolnej czci
Rysunek 4.34.
Za pomoc przycisku

New Library Item

tworzymy nowy obiekt
w bibliotece. Obiekty
te moemy tworzy
take poprzez
przecignicie
aktywnej treci strony
w okno Library

Jeli teraz na podstawie strony index.php powstan nowe strony, kada z nich wykorzysta wprowadzony obiekt z biblioteki. Jego edycja uaktualni wszystkie strony naszego serwisu. A to wanie
byo naszym zaoeniem.

Dynamiczna zawarto strony startowej

Kolejne zmiany dotycz ju gwnej czci strony index.php <div#mainContent>. Tu w miejsce
widocznych wanie statycznych informacji tekstowych wprowadzimy tre zapisan w tabeli
informacje naszej bazy danych. Ponadto poniej dodamy kolejny modu serwisu Nowoci/

Rozdzia 4. i Dynamiczny serwis WWW

159

Rysunek 4.35.

Nowy obiekt
listaKategorii zosta
zapisany w bibliotece.
Od tej chwili moemy
wykorzystywa go
wielokrotnie w naszej
pracy. Aktualizacja
obiektu z biblioteki
automatycznie
modyfikuje wszystkie
strony serwisu, jakie
go wykorzystuj

Aktualnoci. Znajd si tu najnowsze informacje dotyczce dziaania serwisu, opisy, aktualnoci

oraz komunikaty administracyjne zapisane w bazie danych. Aby zanadto nie zamieca strony
gwnej nadmiarem rnorodnych danych i informacji, umiecimy tu jedynie 2 3 najnowsze
rekordy z bazy. Lista wszystkich aktualnoci dostpna bdzie na stronie Archiwum nowoci.
Do pobrania oglnych informacji o firmie z bazy danych konieczne jest utworzenie kolejnego

rda danych zwanego Recordset. W ten sposb moliwe bdzie nawizanie poczenia z zupenie inn tabel, wyszukanie waciwych informacji oraz umieszczenie ich w obszarze edytowal-

nym <div#mainContent> strony.

Nowy Recordset utworzymy tym razem za pomoc palety Bindings (Ctrl+F10) dostpnej w menu
grnym Window. Za pomoc niewielkiego przycisku z symbolem + dodajemy nowy Recordset
(rysunek 4.36) i przechodzimy w tryb edycji jego waciwoci. W polu Name wprowadzamy
nazw mainInfo, na licie Connection wybieramy utworzony wczeniej plik konfiguracyjny
localTest, tabel informacje, a nastpnie w sekcji Columns wybieramy opcj All, ktra umoliwi
nam dostp do wszystkich pl tabeli.
Podobnie jak w przypadku listy kategorii, w tym momencie nie zmieniamy domylnych ustawie
(None) w sekcji Filter oraz Sort (rysunek 4.37).
Nowy Recordset widoczny jest w panelu Bindings. Po rozwiniciu jego zawartoci widoczne
staj si wszystkie pola utworzonej wczeniej tabeli informacje. Dziki odpowiedniemu zaprojektowaniu pl tabeli, wprowadzenie dynamicznej treci na stron tytuow nie sprawi nam adnych problemw.
Przypomnijmy sobie biec struktur logiczn strony index.php. Jej tytu zawarty jest wewntrz
znacznikw <h1></h1>. Poniej znajduje si niewielki tekst wprowadzajcy nagwek zawarty
wewntrz znacznikw <h2></h2>. Waciwa tre tej strony zapisana jest w kolejnych akapitach
(znaczniki <p></p>) tekstu. Jeli podczas wprowadzania statycznej treci strony zdecydowalimy
si na uycie dodatkowej grafiki czy fotografii, widzimy j poniej nagwka, a jednoczenie
ponad waciwym tekstem strony.