Professional Documents
Culture Documents
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
Spis treci
Informacje o autorze ................................................................................... 5
Wstp ........................................................................................................ 7
Planowanie ..................................................................................................................................13
Rola grafiki na stronie WWW ...............................................................................................13
Planowanie serwisu WWW ...................................................................................................13
........................................................................................................................89
Baza danych MySQL i PHP ..................................................................................................89
Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty
Ostatnie poprawki.......................................................................................................................369
Testowanie ...........................................................................................................................369
Eksport zawartoci bazy danych ..........................................................................................372
Co wicej? ..................................................................................................................................379
Rozdzia 4.
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
135
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 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
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
137
Rysunek 4.3.
(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.
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
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
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.
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.
141
W widoku kodu lokalizujemy i usuwamy nazwy kategorii. Do budowy dynamicznej wersji serwisu
wystarczy nam jedna pozycja na licie
Rysunek 4.10.
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
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
143
wywietla (lub nie) dane z bazy w zalenoci od ich dostpnoci. Instrukcja typu
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
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
145
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
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
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 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
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.
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).
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
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
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
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.
155
Rysunek 4.31.
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.
157
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
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.
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
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-
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.