Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00163 013867 11052122 na godz. na dobę w sumie
Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty - książka
Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty - książka
Autor: Liczba stron: 392
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-1133-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Zmień statyczne strony WWW w atrakcyjne i dynamiczne witryny!

Kto w dobie tętniących życiem, funkcjonalnych witryn chce dziś odwiedzać nudne, statyczne strony? Statyczne witryny WWW, nawet te najbardziej atrakcyjne pod względem treści i grafiki, mają także inną wielką wadę -- ich aktualizacja zajmuje sporo czasu i wymaga 'ręcznej' modyfikacji każdej ze stron. Wady tej pozbawione są witryny dynamiczne, w których treść przechowywana jest w bazie danych i pobierana przy każdym otwarciu przez odwiedzającego. Modyfikacja treści takiej witryny opiera się na wygodnym module administracyjnym, którego obsługa nie wymaga znajomości języka HTML.

Książka 'Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty' to podręcznik dla tych twórców witryn WWW, którzy chcą przekształcić statyczne strony WWW w dynamiczne, korzystając z doskonałych narzędzi firmy Adobe, takich jak Dreamweaver CS3 i Fireworks CS3, oraz technologii PHP i MySQL. Czytając ją, poznasz zasady przygotowywania grafiki sieciowej, projektowania struktury dynamicznej witryny WWW i nawiązywania połączeń z bazą danych. Dowiesz się, w jaki sposób umieszczać na stronie elementy dynamiczne z biblioteki Dreamweavera, tworzyć strony z nowościami, moduły wyszukiwawcze i moduły zarządzania treścią. Znajdziesz tu także informacje o dodawaniu do strony elementów zrealizowanych w technologiach Flash i Ajax oraz o publikowaniu witryny na serwerze.

Wykorzystaj możliwości Adobe Creative Studio 3
i pracuj jak profesjonalista.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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! (cid:149) Zaprojektuj grafikŒ i strukturŒ witryny (cid:149) Napisz kod dynamicznych stron i skorzystaj z gotowych element(cid:243)w (cid:149) Wzboga(cid:230) witrynŒ elementami wykonanymi w technologii Flash i Ajax Kto w dobie tŒtni„cych ¿yciem, funkcjonalnych witryn chce dzi(cid:156) odwiedza(cid:230) nudne, statyczne strony? Statyczne witryny WWW, nawet te najbardziej atrakcyjne pod wzglŒdem tre(cid:156)ci i grafiki, maj„ tak¿e inn„ wielk„ wadŒ (cid:150) ich aktualizacja zajmuje sporo czasu i wymaga (cid:132)rŒcznej(cid:148) modyfikacji ka¿dej ze stron. Wady tej pozbawione s„ witryny dynamiczne, w kt(cid:243)rych tre(cid:156)(cid:230) przechowywana jest w bazie danych i pobierana przy ka¿dym otwarciu przez odwiedzaj„cego. Modyfikacja tre(cid:156)ci takiej witryny opiera siŒ na wygodnym module administracyjnym, kt(cid:243)rego obs‡uga nie wymaga znajomo(cid:156)ci jŒzyka HTML. Ksi„¿ka (cid:132)Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty(cid:148) to podrŒcznik dla tych tw(cid:243)rc(cid:243)w witryn WWW, kt(cid:243)rzy chc„ przekszta‡ci(cid:230) statyczne strony WWW w dynamiczne, korzystaj„c z doskona‡ych narzŒdzi firmy Adobe, takich jak Dreamweaver CS3 i Fireworks CS3, oraz technologii PHP i MySQL. Czytaj„c j„, poznasz zasady przygotowywania grafiki sieciowej, projektowania struktury dynamicznej witryny WWW i nawi„zywania po‡„czeæ z baz„ danych. Dowiesz siŒ, w jaki spos(cid:243)b umieszcza(cid:230) na stronie elementy dynamiczne z biblioteki Dreamweavera, tworzy(cid:230) strony z nowo(cid:156)ciami, modu‡y wyszukiwawcze i modu‡y zarz„dzania tre(cid:156)ci„. Znajdziesz tu tak¿e informacje o dodawaniu do strony element(cid:243)w zrealizowanych w technologiach Flash i Ajax oraz o publikowaniu witryny na serwerze. (cid:149) Przygotowanie element(cid:243)w graficznych w Fireworks CS3 (cid:149) Projektowanie struktury witryny (cid:149) Instalacja (cid:156)rodowiska PHP i bazy danych MySQL (cid:149) Tworzenie strony startowej (cid:149) Korzystanie ze skrypt(cid:243)w znajduj„cych siŒ w bibliotece Dreamweavera (cid:149) Implementacja mechanizmu wyszukiwania informacji w serwisie (cid:149) Modu‡ administracyjny (cid:149) Dodawanie element(cid:243)w utworzonych za pomoc„ Flasha (cid:149) Przeniesienie witryny na serwer WWW Wykorzystaj mo¿liwo(cid:156)ci Adobe Creative Studio 3 i pracuj jak profesjonalista Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis tre(cid:264)ci Informacje o autorze ................................................................................... 5 Rozdzia(cid:228) 1. Grafika internetowa .................................................................................. 13 Rozdzia(cid:228) 2. Budowa podstawowej strony WWW .......................................................... 49 Rozdzia(cid:228) 3. Baza danych ............................................................................................ 89 Rozdzia(cid:228) 4. Dynamiczny serwis WWW ....................................................................... 133 Wst(cid:246)p ........................................................................................................ 7 Informacje o autorze ......................................................................................................................7 Do kogo adresowana jest ksi(cid:261)(cid:298)ka? ................................................................................................8 Co znajdziemy w tej ksi(cid:261)(cid:298)ce? ........................................................................................................8 Czego nie znajdziesz w tej ksi(cid:261)(cid:298)ce? ............................................................................................11 Planowanie ..................................................................................................................................13 Rola grafiki na stronie WWW ...............................................................................................13 Planowanie serwisuWWW ...................................................................................................13 Struktura serwisu WWW .............................................................................................................49 Opracowanie struktury katalogów i definicja Site’a ..............................................................49 Tworzymy statyczn(cid:261) stron(cid:266) WWW .......................................................................................55 (cid:285)rodowiskopracy ........................................................................................................................89 Baza danych MySQL i PHP ..................................................................................................89 Po(cid:225)(cid:261)czenie z baz(cid:261) danych ..........................................................................................................133 Tworzenie dynamicznej wersji serwisu ...............................................................................133 Dynamiczna stronaWWW ........................................................................................................141 Edycja strony startowej .......................................................................................................141 Przygotowanie (cid:296)ród(cid:225)a danych — Recordset ........................................................................143 Dynamiczne menu na stronie ..............................................................................................148 Dynamiczna zawarto(cid:286)(cid:252) strony startowej .............................................................................158 Wprowadzenie elementów graficznych ...............................................................................162 Aktualno(cid:286)ci na stronie index.php ........................................................................................164 Formatowanie sekcji nowo(cid:286)ci .............................................................................................168 Wy(cid:286)wietlenie pe(cid:225)nej sekcji nowo(cid:286)ci ....................................................................................175 Sortowanie nowo(cid:286)ci ............................................................................................................175 Warunkowe u(cid:298)ycie elementów graficznych ..............................................................................176 Instrukcje warunkowe .........................................................................................................177 4 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty Rozdzia(cid:228) 5. Dynamiczny serwis WWW ....................................................................... 181 Rozdzia(cid:228) 6. Wyszukiwanie danych ............................................................................. 235 Rozdzia(cid:228) 8. Flash i Ajax na stronie WWW .................................................................. 325 Rozdzia(cid:228) 7. Modu(cid:228) zarz(cid:241)dzania tre(cid:264)ci(cid:241) ....................................................................... 273 Budowa dynamicznych stron WWW .........................................................................................181 Tworzenie strony Archiwum nowo(cid:286)ci .................................................................................181 Budowa strony Informacje ..................................................................................................191 Wyszukiwarki na stronie WWW ...............................................................................................235 Tworzenie prostej wyszukiwarki .........................................................................................235 Aktualizacja serwisu ..................................................................................................................273 Tworzenie systemu zarz(cid:261)dzania tre(cid:286)ci(cid:261) ...............................................................................273 Logowanie i zabezpieczanie ................................................................................................317 Animacje, efekty i funkcjonalno(cid:286)(cid:252) ............................................................................................325 Wykorzystanie technologii Flash ........................................................................................325 Budowa elementów animowanych SWF .............................................................................326 Dynamiczny baner Flash .....................................................................................................349 Wykorzystanie technologii Ajax .........................................................................................358 Ostatnie poprawki.......................................................................................................................369 Testowanie...........................................................................................................................369 Eksport zawarto(cid:286)ci bazy danych..........................................................................................372 Co wi(cid:266)cej?..................................................................................................................................379 Rozdzia(cid:228) 9. Ostatni szlif, wspó(cid:228)praca z serwerem WWW, dodatki.................................. 369 Skorowidz .............................................................................................. 383 Rozdzia(cid:228) 4. Dynamiczny serwis WWW Po(cid:228)(cid:241)czenie z baz(cid:241) danych Tworzenie dynamicznej wersji serwisu W pierwszej cz(cid:266)(cid:286)ci niniejszego opracowania zaj(cid:266)li(cid:286)my si(cid:266) planowaniem, a nast(cid:266)pnie przygoto- waniem podstawowych elementów struktury naszej strony. W rezultacie przygotowane zosta(cid:225)y konieczne do jej budowy elementy graficzne, katalog i definicja site’a, strona g(cid:225)ówna naszego serwisu — index.html,a tak(cid:298)e konieczne do jej atrakcyjnej prezentacji style kaskadowe. Nieco pó(cid:296)niej przekszta(cid:225)cili(cid:286)my g(cid:225)ówn(cid:261) stron(cid:266) serwisu w szablon programu Adobe Dreamweaver CS3 i na tym zako(cid:276)czyli(cid:286)my dotychczasowe dzia(cid:225)ania. Najwy(cid:298)sza pora, by przej(cid:286)(cid:252) do najciekawszego etapu budowy dynamicznych serwisów — przekszta(cid:225)cenia jego statycznej wersji w now(cid:261) struktur(cid:266), opart(cid:261) na bazie danych i kodzie PHP. Przygotowanie (cid:264)rodowiska testowego w programie Adobe Dreamweaver CS3 Do budowy dynamicznej strony internetowej konieczne jest u(cid:298)ycie testowego serwera WWW oraz odpowiednio skonfigurowanych baz danych i tabel MySQL. Aby unikn(cid:261)(cid:252) konieczno(cid:286)ci sta(cid:225)ego u(cid:298)ycia serwera WWW w Internecie, obci(cid:261)(cid:298)enia (cid:225)(cid:261)cza internetowego, a tak(cid:298)e dla szybko(cid:286)ci dzia(cid:225)ania i testów, najwygodniejszym rozwi(cid:261)zaniem jest wykorzystanie poznanego w poprzednim rozdziale serwera Krasnal (lub oczywi(cid:286)cie dowolnego innego pakietu serwer/baza danych/parser j(cid:266)zyka PHP) umo(cid:298)liwiaj(cid:261)cego uruchamianie skryptów PHP lokalnie na dysku naszego komputera. Dzia(cid:225)ania zwi(cid:261)zane z instalacj(cid:261) serwera i konfiguracj(cid:261) baz danych za pomoc(cid:261) panelu phpMy- Admin, które podj(cid:266)li(cid:286)my ju(cid:298) w poprzednim rozdziale, pozwalaj(cid:261) nam (cid:286)mia(cid:225)o wkroczy(cid:252) na dalszy etap pracy. Uruchamiamy serwer testowy Krasnal. 134 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty Edycja site’a Do dalszego etapu budowy i testowania dynamicznej strony WWW nie wystarczy jedynie uru- chomienie lokalnego serwera testowego. Konieczne jest tak(cid:298)e odpowiednie skonfigurowanie programu tak, by nie tylko pozwala(cid:225) na prac(cid:266) z plikami PHP, ale tak(cid:298)e u(cid:225)atwia(cid:225) ich przygotowanie oraz pó(cid:296)niejsz(cid:261) edycj(cid:266). W tym celu musimy nieco zmodyfikowa(cid:252) definicj(cid:266) ca(cid:225)egosite’a oraz zmieni(cid:252) lokalizacj(cid:266) kata- logu g(cid:225)ównego strony. Dzia(cid:225)ania podj(cid:266)te w tej cz(cid:266)(cid:286)ci rozdzia(cid:225)u by(cid:252) mo(cid:298)e wywo(cid:225)aj(cid:261) pewne zdziwienie u Czytelników i zrodz(cid:261) kilka logicznych pyta(cid:276). W jakim celu budowali(cid:286)my statyczn(cid:261) wersj(cid:266) strony, któr(cid:261) teraz b(cid:266)dziemy musieli modyfikowa(cid:252)? Czemu podczas definiowania struktury site’a w panelu Site Definition nie wskazali(cid:286)my od razu w(cid:225)a(cid:286)ciwej lokalizacji? Odpowiedzi jest wiele. (cid:141) Zwykle, gdy budujemy prototyp strony, wygodniej jest skorzysta(cid:252) z j(cid:266)zyka HTML i bez konieczno(cid:286)ci u(cid:298)ycia serwera WWW testowa(cid:252) stron(cid:266) w ró(cid:298)nych przegl(cid:261)darkach za pomoc(cid:261) w(cid:225)asnego komputera. (cid:141) Cz(cid:266)sto trudno jest zacz(cid:261)(cid:252) budow(cid:266) bazy danych, gdy nie znamy jeszcze szczegó(cid:225)owych potrzeb klienta. By lepiej wykorzysta(cid:252) nasz czas, rozpoczynamy prac(cid:266) od budowy statycznej strony, która u(cid:225)atwia ocen(cid:266) projektu graficznego i logiki nawigacji. (cid:141) Na etapie planowania i budowy statycznej wersji strony nie mieli(cid:286)my jeszcze dost(cid:266)pu do serwera testowego i nie by(cid:225)o mo(cid:298)liwo(cid:286)ci wskazania od razu odpowiednich danych. W tym momencie, dysponuj(cid:261)c ju(cid:298) odpowiednim (cid:286)rodowiskiem pracy, mo(cid:298)emy dowolnie zmodyfikowa(cid:252) ustawienia i dostosowa(cid:252) je do naszych potrzeb. (cid:141) By(cid:252) mo(cid:298)e podczas rozpoczynania budowy serwisu nie planowali(cid:286)my jeszcze u(cid:298)ycia bazy danych oraz skryptów j(cid:266)zyka PHP. Pomys(cid:225) budowy dynamicznej strony zrodzi(cid:225) si(cid:266) nieco pó(cid:296)niej i wymaga teraz dostosowania naszej pracy do nowych za(cid:225)o(cid:298)e(cid:276). (cid:141) Mo(cid:298)e ju(cid:298) podczas tworzenia kolejnych stron statycznego serwisu doszli(cid:286)my do przekonania, (cid:298)e budowa nast(cid:266)pnych stron na bazie podobnego wzorca jest szalenie (cid:298)mudna, monotonna i nudna. Mog(cid:225)aby zosta(cid:252) w jaki(cid:286) sposób zautomatyzowana i przyspieszona. Tak(cid:298)e i w takim przypadku odpowiedzi(cid:261) na nowe potrzeby jest w(cid:225)a(cid:286)nie przekszta(cid:225)cenie bie(cid:298)(cid:261)cego (istniej(cid:261)cego ju(cid:298)) serwisu w dynamiczn(cid:261) posta(cid:252) przy u(cid:298)yciu bazy danych i skryptów PHP. (cid:141) Podczas (nawet zaawansowanej ju(cid:298)) pracy nad serwisem pojawi(cid:225)a si(cid:266) konieczno(cid:286)(cid:252) dodania dodatkowej funkcjonalno(cid:286)ci niemo(cid:298)liwej do wykonania bez bazy danych i skryptów dzia(cid:225)aj(cid:261)cych po stronie serwera. Dzi(cid:266)ki reedycji ustawie(cid:276) struktury site’a mo(cid:298)emy (cid:225)atwo przej(cid:286)(cid:252) do trybu budowy dynamicznej wersji strony, u(cid:298)ywaj(cid:261)c jako podstawy istniej(cid:261)cej ju(cid:298) struktury. (cid:141) By(cid:252) mo(cid:298)e nasz klient zamówi(cid:225) w(cid:225)a(cid:286)nie us(cid:225)ug(cid:266) przekszta(cid:225)cenia bie(cid:298)(cid:261)cej, statycznej wersji serwisu w nowoczesn(cid:261) dynamiczn(cid:261) stron(cid:266) WWW, bez modyfikacji g(cid:225)ównych elementów graficznych. W tej sytuacji umiej(cid:266)tno(cid:286)(cid:252) przekszta(cid:225)cenia stron HTML w dynamiczne PHP oka(cid:298)e si(cid:266) niezwykle cenn(cid:261) umiej(cid:266)tno(cid:286)ci(cid:261). Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 135 W ka(cid:298)dym wymienionym powy(cid:298)ej przypadku umiej(cid:266)tno(cid:286)(cid:252) przekszta(cid:225)cenia bie(cid:298)(cid:261)cej wersji strony w jej dynamiczn(cid:261) posta(cid:252) mo(cid:298)e okaza(cid:252) si(cid:266) doskona(cid:225)ym rozwi(cid:261)zaniem nie tylko dla przyspieszenia pracy nad stron(cid:261), ale tak(cid:298)e dla rozwini(cid:266)cia struktury serwisu i dodania jego dodatkowej funkcjo- nalno(cid:286)ci, czy po prostu rozwi(cid:261)zaniem umo(cid:298)liwiaj(cid:261)cym w ogóle wykonanie zlecenia. Takie w(cid:225)a(cid:286)nie rozumowanie sta(cid:225)o si(cid:266) przyczyn(cid:261) zastosowania przedstawionej kolejno(cid:286)ci wyko- nywania dzia(cid:225)a(cid:276) przyj(cid:266)tej na (cid:225)amach tej ksi(cid:261)(cid:298)ki. Przygotowanie struktury katalogów Aby w dalszej pracy skorzysta(cid:252) z mo(cid:298)liwo(cid:286)ci uruchamiania skryptów PHP, wszystkie pliki naszego serwisu musz(cid:261) znale(cid:296)(cid:252) si(cid:266) na testowym serwerze WWW. W tym celu przenosimy (lub kopiujemy) ca(cid:225)y katalog naszej witryny — siteRecenzje — w now(cid:261), docelow(cid:261) lokalizacj(cid:266) — katalog o (cid:286)cie(cid:298)ce:C:/usr/Apache/httpd/html . Aby mo(cid:276)liwe by(cid:228)o przeniesienie katalogu (w celu archiwizacji lub bezpiecze(cid:254)stwa mo(cid:276)emy przenie(cid:264)(cid:232) w miejsce docelowe jedynie kopi(cid:246) folderu siteRecenzje), konieczne jest wy(cid:228)(cid:241)czenie programu Adobe Dreamweaver CS3. Jak pami(cid:266)tamy, katalog o nazwie html jest g(cid:225)ównym folderem naszego serwera testowego — localhost. Tu w(cid:225)a(cid:286)nie zlokalizowane powinny by(cid:252) wszystkie nasze dynamiczne aplikacje oraz elementy wykorzystywane do ich budowy. Je(cid:286)li zdecydujemy si(cid:266) na przeniesienie (bez kopiowania) katalogu naszej strony, bezpo(cid:286)rednio po otwarciu programu Adobe Dreamweaver CS3 wy(cid:286)wietlony zostanie komunikat ostrzegawczy o braku folderu zawieraj(cid:261)cego struktur(cid:266) naszej witryny. Aby niezw(cid:225)ocznie przej(cid:286)(cid:252) do trybu edycji ustawie(cid:276)site’a, wybieramy opcj(cid:266)Manage Sites w wy(cid:286)wietlonym oknie dialogowym. Edycji usta- wie(cid:276)site’a mo(cid:298)emy dokona(cid:252) tak(cid:298)e pó(cid:296)niej, gdy zdecydujemy si(cid:266) na u(cid:298)ycie opcji Cancel. Edycja w(cid:228)a(cid:264)ciwo(cid:264)ci site’a Je(cid:286)li podczas otwierania Adobe Dreamweavera CS3 od razu zdecydujemy si(cid:266) na przej(cid:286)cie w tryb edycji site’a za pomoc(cid:261) opcji Manage Sites, wy(cid:286)wietlone zostanie okno dialogowe z list(cid:261) wszyst- kich serwisów budowanych na naszym komputerze. Aby przej(cid:286)(cid:252) w tryb edycji naszej witryny, lokalizujemy i zaznaczamy jej nazw(cid:266) w oknie po lewej stronie, a nast(cid:266)pnie za pomoc(cid:261) przycisku Edit wchodzimy tryb edycji site’a (rysunek 4.1). Rysunek 4.1. Okno Manage Sites przechowuje informacje o wszystkich serwisach, jakie budujemy za pomoc(cid:261) Dreamweavera. Aby(cid:225)atwiej identyfikowa(cid:252) ka(cid:298)d(cid:261) prac(cid:266), dobrze jest stosowa(cid:252) unikalne i opisowe nazwy serwisów 136 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty Je(cid:286)li zdecydowali(cid:286)my si(cid:266) na utworzenie kopii serwisu w nowej lokalizacji lub te(cid:298) podczas otwie- rania programu wybrali(cid:286)my opcj(cid:266)Cancel, Adobe Dreamweaver CS3 otwiera si(cid:266), nie wy(cid:286)wie- tlaj(cid:261)c (cid:298)adnych komunikatów. W celu przej(cid:286)cia do modyfikacji w(cid:225)a(cid:286)ciwo(cid:286)ci naszej strony wybieramy polecenie Manage Sites dost(cid:266)pne w menu górnym Site. W dost(cid:266)pnym oknie dialogowym wskazujemy nazw(cid:266) naszego serwisu i za pomoc(cid:261) przycisku Edit wchodzimy w tryb edycji jego w(cid:225)a(cid:286)ciwo(cid:286)ci — Site Defini- tion (rysunek 4.2). Za pomoc(cid:261) przycisku Edit w oknie Manage Sites przechodzimy w tryb edycji w(cid:225)a(cid:286)ciwo(cid:286)ci wybranego serwisu. W tym miejscu mamy mo(cid:298)liwo(cid:286)(cid:252) modyfikacji wszystkich jego parametrów Rysunek 4.2. Zak(cid:225)adka Basic widoczna w górnej cz(cid:266)(cid:286)ci okna Site Definition pozwala na edycj(cid:266) ustawie(cid:276) za pomoc(cid:261) kreatora. Jest on niezwykle wygodnym narz(cid:266)dziem do zarz(cid:261)dzania w(cid:225)a(cid:286)ciwo(cid:286)ciami witryny, szczególnie dla osób o mniejszym do(cid:286)wiadczeniu. Na pierwszym ekranie kreatora Site Definition — Editing Files widzimy wprowadzon(cid:261) wcze(cid:286)niej nazw(cid:266) serwisu i w tym momencie nie musimy wprowadza(cid:252) tu (cid:298)adnych zmian. Za pomoc(cid:261) przy- ciskuNext przechodzimy do ekranu Editing Files, Part 2. W tym miejscu musimy wprowadzi(cid:252) kilka istotnych zmian. Na pytanie Do you want to work with a server technology such as ColdFu sion, ASP.NET, ASP, JSP, or PHP? wskazujemy odpowied(cid:296) Yes, I want to use a server technology , a nast(cid:266)pnie wybieramy PHP MySQL z dost(cid:266)pnej poni(cid:298)ej listy — Which server technology? (rysunek 4.3). Za pomoc(cid:261) przycisku Next przechodzimy do trzeciego okna, Editing Files, Part 3. Pytanie How do you want to work with your files during developm ent? pozwala wybra(cid:252) sposób, w jaki b(cid:266)dziemy budowa(cid:252) i edytowa(cid:252) nasze strony w dalszej cz(cid:266)(cid:286)ci pracy. Dzi(cid:266)ki u(cid:298)yciu dost(cid:266)pnego na naszym dysku serwera testowego (Krasnal) mamy mo(cid:298)liwo(cid:286)(cid:252) wyboru pierwszej opcji Edit and test locally Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 137 Rysunek 4.3. Tym razem w oknie Editing File, Part 2 wskazujemy technologi(cid:266), jak(cid:261) wykorzystamy podczas budowy serwisu. Dreamweaver oferuje wsparcie i narz(cid:266)dzia do budowy dynamicznych aplikacji WWW dla wielu popularnych technologii — PHP+MySQL, ASP, JSP, Cold Fusion itp. (my testing server is on this computer) , która precyzyjnie okre(cid:286)la, (cid:298)e do budowy i testowania dynamicznych stron u(cid:298)yjemy serwera testowego zainstalowanego na naszym komputerze. Zazna- czamy pierwsz(cid:261) opcj(cid:266) (rysunek 4.4). Rysunek 4.4. Opcja Edit and test locally pozwala nam na tworzenie serwisu lokalnie na dysku naszego komputera. Po zako(cid:276)czeniu pracy i testów, gotow(cid:261) i dzia(cid:225)aj(cid:261)c(cid:261) stron(cid:266) przesy(cid:225)amy na serwer WWW 138 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty W polu poni(cid:298)ej, Where on your computer do you want to store your fi bie(cid:298)(cid:261)c(cid:261) lokalizacj(cid:266) g(cid:225)ównego folderu naszej witryny — C/usr/Apache/httpd/html/siteRecenzje (rysunek 4.5) i za pomoc(cid:261) przycisku Next przej(cid:286)(cid:252) do sekcji Testing Files. les?, nale(cid:298)y wskaza(cid:252) Rysunek 4.5. Widoczny w dolnej cz(cid:266)(cid:286)ci okna zapis Select:siteRecenzje wskazuje docelow(cid:261) lokalizacj(cid:266) testowej wersji naszej aplikacji na dysku lokalnego komputera Na pytanie dotycz(cid:261)ce adresu URL naszego serwisu — What URL would you use to browse to , w polu poni(cid:298)ej musimy na ko(cid:276)cu widocznej (cid:286)cie(cid:298)ki (http://localhost the root of your site? ) wprowadzi(cid:252) nazw(cid:266) — siteRecenzje (rysunek 4.6). To jest bowiem g(cid:225)ówny folder naszego site’a zapisany na lokalnym serwerze WWW. Jak pami(cid:266)tamy, g(cid:225)ówny katalog serwera to inaczej localhost. W tym folderze znajduje si(cid:266) mi(cid:266)dzy innymi tak(cid:298)e nasz folder — siteRecenzje. W tej sytuacji (cid:286)cie(cid:298)ka dost(cid:266)pu do witryny ma posta(cid:252) nast(cid:266)puj(cid:261)c(cid:261):http://localhost/siteRecenzje i w tej formie wprowadzamy j(cid:261) w polu What URL would you use to browse to the root of you r site?. Rysunek 4.6. Localhost to adres naszego serwera WWW. Dynamiczny serwis z recenzjami ksi(cid:261)(cid:298)ek zlokalizowany jest w katalogu siteRecenzje. Adres w postaci localhost/siteRecenzje wskazuje na stron(cid:266) g(cid:225)ówn(cid:261) — index.php naszej aplikacji Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 139 PrzyciskTest URL pozwala ju(cid:298) na etapie definiowania ustawie(cid:276)site’a sprawdzi(cid:252), czy katalog o wprowadzonej nazwie rzeczywi(cid:286)cie istnieje i jest poprawnie widziany przez program (rysu- nek 4.7). Rysunek 4.7. Testowanie pozwala na sprawdzenie poprawno (cid:286)ci wprowadzonych adresów i lokalizowanie potencjalnych problemów Za pomoc(cid:261) przycisku Next przechodzimy do sekcji Sharing Files, gdzie nie wprowadzamy ju(cid:298) (cid:298)adnych modyfikacji i od razu przechodzimy dalej (Next). Widoczna sekcja Summary przedstawia podsumowanie wszystkich wprowadzonych i zmodyfikowanych ustawie(cid:276) naszego site’a i nie wymaga (cid:298)adnych modyfikacji (rysunek 4.8). Za pomoc(cid:261) przycisku Done potwierdzamy zmiany i powracamy do okna edycji Manage Sites. Tak(cid:298)e w tym miejscu ponownie za pomoc(cid:261) przycisku Done zamykamy okno i jednocze(cid:286)nie potwierdzamy zmiany konfiguracyjne naszej strony. Rysunek 4.8. W oknie podsumowania znajdziemy wszystkie podstawowe w(cid:225)a(cid:286)ciwo(cid:286)ci edytowanego serwisu Zmiana typów plików Do budowy szablonu, a tak(cid:298)e pierwszej strony serwisu u(cid:298)ywali(cid:286)my do tej pory klasycznych dokumentów HTML. Nadszed(cid:225) czas, by przekszta(cid:225)ci(cid:252) je w dynamiczne pliki PHP, które umo(cid:298)- liwi(cid:261) interpretowanie kodu PHP bezpo(cid:286)rednio na serwerze WWW. Dzi(cid:266)ki u(cid:298)yciu parsera (inter- pretacji) kodu PHP na serwerze otrzymamy w rezultacie prosty, statyczny dokument HTML w postaci czytelnej dla przegl(cid:261)darki u(cid:298)ytkownika. 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 Rysunek 4.9. nazwa szablonu — normal.dwt.php — wygl(cid:261)da nieco dziwnie, jednak gotowy dokument b(cid:266)dzie dzia(cid:225)a(cid:225) poprawnie i jako wzorzec doskonale pos(cid:225)u(cid:298)y do budowy kolejnych stron PHP naszego serwisu. W g(cid:225)ównym katalogu siteRecenzje znajduje si(cid:266) ponadto pierwsza strona serwisu — index.html. Tak(cid:298)e j(cid:261) powinni(cid:286)my przekszta(cid:225)ci(cid:252) w dokument PHP. W tym celu w oknie Files wystarczy jedy- nie zmieni(cid:252) rozszerzenie pliku z html na php, nie wprowadzaj(cid:261)c ju(cid:298) wi(cid:266)cej dodatkowych zmian (rysunek 4.9). W celu przekszta(cid:225)cenia statycznej wersji serwisu WWW w dynamiczn(cid:261) aplikacj(cid:266) bazodanow(cid:261) konieczna jest zmiana rozszerze(cid:276) plików naszej strony. Mo(cid:298)emy wykona(cid:252) to zarówno w oknie Files w Adobe Dreamweaverze, jak te(cid:298) systemowo w katalogu siteRecenzje na naszym dysku Zmiany rozszerze(cid:254) plików szablonu — normal.dwt oraz strony g(cid:228)ównej — index.html mo(cid:276)emy dokona(cid:232) w panelu Files programu Adobe Dreamweaver, ale tak(cid:276)e systemowo, w widoku podgl(cid:241)du zawarto(cid:264)ci folderu na dysku. (cid:227)(cid:241)czenie strony z baz(cid:241) danych Przygotowana wcze(cid:286)niej strona index.php jest podstawowym dokumentem naszej pracy, pos(cid:225)u(cid:298)y ona bowiem do budowy kolejnych stron serwisu. Zbudowana na podstawie szablonu — normal. dwt.php — zawiera zestaw sta(cid:225)ych elementów (zablokowanych do edycji na stronach) oraz obszary edytowalne umo(cid:298)liwiaj(cid:261)ce wprowadzanie odpowiednich tre(cid:286)ci na kolejnych stronach serwisu. Co wa(cid:298)ne, edycja graficznej struktury szablonu — normal.dwt.php — poci(cid:261)gnie za sob(cid:261) nie tylko zmian(cid:266) startowej strony — index.php, ale tak(cid:298)e pozosta(cid:225)ych podstron serwisu, podobnie jak index.php opartych na tym samym szablonie. Analizuj(cid:261)c projekt strony index.php oraz zestaw przygotowanych wcze(cid:286)niej tabel MySQL, (cid:225)atwo zauwa(cid:298)y(cid:252), (cid:298)e boczne menu zawieraj(cid:261)ce list(cid:266) kategorii dost(cid:266)pnych ksi(cid:261)(cid:298)ek powinno by(cid:252) genero- wane dynamicznie na podstawie danych z bazy. W ten sposób, dzi(cid:266)ki u(cid:298)yciu dynamicznego menu na stronie szablonu, dodawanie kolejnych kategorii, ich edycja czy usuni(cid:266)cie b(cid:266)dzie od razu widoczne na wszystkich stronach serwisu. W przysz(cid:228)o(cid:264)ci dzi(cid:246)ki u(cid:276)yciu bazy danych i dynamicznej listy mo(cid:276)liwe b(cid:246)dzie tak(cid:276)e stosunkowo (cid:228)atwe i szybkie przygotowanie dodatkowych wersji j(cid:246)zykowych czy innych modu(cid:228)ów rozszerza- j(cid:241)cych funkcjonalno(cid:264)(cid:232) ca(cid:228)ego serwisu. Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 141 Dynamiczna strona WWW Edycja strony startowej Je(cid:286)li decydujemy si(cid:266) na wykorzystanie listy kategorii ksi(cid:261)(cid:298)ek na podstawie tre(cid:286)ci pobranych z bazy danych, statyczne, wprowadzone r(cid:266)cznie nazwy kategorii widoczne w chwili obecnej nie s(cid:261) ju(cid:298) potrzebne i w zasadzie mog(cid:261) by(cid:252) usuni(cid:266)te. Jednak nie spieszmy si(cid:266) zanadto, nie po to wprowadzali(cid:286)my je wcze(cid:286)niej, by teraz w jednej chwili usun(cid:261)(cid:252) je bezpowrotnie. Aby jednak u(cid:225)atwi(cid:252) sobie dalsze dzia(cid:225)ania, wykorzystamy jedn(cid:261), pierwsz(cid:261) pozycj(cid:266) listy do budowy nowej dynamicznej zawarto(cid:286)ci menu. W tym celu uwa(cid:298)nie, najlepiej w widoku kodu (widok Source lub Split), zaznaczamy kolejne nazwy kategorii, pozostawiaj(cid:261)c jedynie pierwsz(cid:261) pozycj(cid:266), a nast(cid:266)pnie po prostu usuwamy zazna- czone elementy ze strony. W rezultacie pozosta(cid:225)a nam jedynie nazwa jednej kategorii menu. Wykorzystamy j(cid:261) jako wzorzec do dalszej pracy (rysunek 4.10). Rysunek 4.10. W widoku kodu lokalizujemy i usuwamy nazwy ka wystarczy nam jedna pozycja na li (cid:286)cie tegorii. Do budowy dynamicznej wersji serwisu Recordset — (cid:274)ród(cid:228)o dynamicznych danych Do budowy dynamicznej strony WWW konieczne jest przygotowanie i dostarczenie jej odpo- wiednich danych. W programie Adobe Dreamweaver CS3 (cid:296)ród(cid:225)em dynamicznych danych jest Recordset. Sk(cid:225)ada si(cid:266) on z kilku istotnych modu(cid:225)ów przygotowanych za pomoc(cid:261) j(cid:266)zyka PHP i do(cid:225)(cid:261)czanych do kodu HTML naszej strony. Ka(cid:298)dy Recordset zawiera: (cid:141) Zestaw instrukcji umo(cid:298)liwiaj(cid:261)cych nawi(cid:261)zanie komunikacji z baz(cid:261) danych, (cid:141) Zestaw instrukcji umo(cid:298)liwiaj(cid:261)cych wykonanie konkretnego zapytania do bazy, 142 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty (cid:141) Zestaw instrukcji przetwarzaj(cid:261)cych dane uzyskane w wyniku zapytania do bazy, (cid:141) Zestaw instrukcji czyszcz(cid:261)cych. Co wa(cid:298)ne, do przygotowania podstawowej wersji Recordseta nie jest potrzebne nie tylko r(cid:266)czne wprowadzanie kodu PHP, ale nawet jego podgl(cid:261)d. Wszystkie operacje mo(cid:298)emy wykona(cid:252) w trybie graficznym za pomoc(cid:261) odpowiednich paneli dost(cid:266)pnych w programie Adobe Dream- weaver CS3. Panel Data — narz(cid:246)dzia budowy aplikacji Sercem dynamicznych narz(cid:266)dzi Adobe Dreamweaver CS3 jest panel Data dost(cid:266)pny w górnym pasku lub menu (w zale(cid:298)no(cid:286)ci od konfiguracji programu) Insert (rysunek 4.11). W tym miejscu mamy dost(cid:266)p do wszystkich istotnych elementów, potrzebnych do budowy dynamicznej aplikacji WWW. Przyjrzyjmy si(cid:266) tym narz(cid:266)dziom. Wst(cid:266)pnie wszystkie elementy panelu Data mo(cid:298)na podzieli(cid:252) na trzy fantastyczne kategorie: (cid:141) Narz(cid:266)dzia do pracy z zewn(cid:266)trznymi danymi XML oraz tworzenia dynamicznych efektów w technologii Ajax. (cid:141) Narz(cid:266)dzia do wspó(cid:225)pracy z baz(cid:261) danych. (cid:141) Import Tabular Data — osobne narz(cid:266)dzie do wprowadzania danych tabelarycznych, dost(cid:266)pne jako odr(cid:266)bna kategoria. Podczas importu plików zawieraj(cid:261)cych odpowiednio sformatowane dane (np. pliku tekstowego zawieraj(cid:261)cego dane oddzielane przecinkiem, tabulatorem itp.) mo(cid:298)emy (cid:225)atwo i szybko zamie(cid:286)ci(cid:252) je w tabeli na stronie bez konieczno(cid:286)ci r(cid:266)cznego wprowadzania danych. Rysunek 4.11. Panel Data (w poprzednich wersjach programu nosi u(cid:225)atwiaj(cid:261)cych budow(cid:266) strony WWW opartej na bazie danych lub plikach XML (cid:225) nazw(cid:266) Application) zawiera szereg narz (cid:266)dzi Narz(cid:266)dzia do pracy z zewn(cid:266)trznymi danymi XML oraz tworzenia dynamicznych efektów w technologii Ajax: (cid:141) Spry XML Data Set — narz(cid:266)dzie pozwalaj(cid:261)ce utworzy(cid:252) nowe (cid:296)ród(cid:225)o danych technologii Spry (Ajax) na stronie WWW. W tym celu wykorzystywane s(cid:261) zewn(cid:266)trzne pliki XML o odpowiedniej strukturze. (cid:141) Spry Region — narz(cid:266)dzie tworzenia obszaru dynamicznych danych budowanych na podstawie zewn(cid:266)trznego (cid:296)ród(cid:225)a XML. (cid:141) Spry Repeat — narz(cid:266)dzie umo(cid:298)liwiaj(cid:261)ce wy(cid:286)wietlanie kolejno wielu w(cid:266)z(cid:225)ów XML na pojedynczej stronie. (cid:141) Spry Repeat list — narz(cid:266)dzie umo(cid:298)liwiaj(cid:261)ce tworzenie dynamicznej listy, menu na podstawie danych zawartych w zewn(cid:266)trznym pliku XML. (cid:141) Spry Table — wygodne narz(cid:266)dzie do tworzenia tabeli danych na podstawie zewn(cid:266)trznego pliku XML. Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 143 Narz(cid:266)dzia do wspó(cid:225)pracy z baz(cid:261) danych: (cid:141) Recordset — narz(cid:266)dzie, które umo(cid:298)liwia po(cid:225)(cid:261)czenie strony z baz(cid:261), odczyt w(cid:225)a(cid:286)ciwych danych oraz ich prezentacj(cid:266) na stronie. (cid:141) Dynamic Data — narz(cid:266)dzie umo(cid:298)liwiaj(cid:261)ce wprowadzenie dynamicznego (pochodz(cid:261)cego z bazy danych) tekstu, listy lub pola w wybranym miejscu na stronie WWW. (cid:141) Repeat Region — narz(cid:266)dzie umo(cid:298)liwiaj(cid:261)ce wy(cid:286)wietlanie wielu rekordów z bazy jednocze(cid:286)nie. (cid:141) Show Region — zestaw narz(cid:266)dzi umo(cid:298)liwiaj(cid:261)cych wykonanie podstawowych instrukcji warunkowych na podstawie danych z bazy. Za pomoc(cid:261) narz(cid:266)dzi z tej sekcji mo(cid:298)emy wy(cid:286)wietla(cid:252) (lub nie) dane z bazy w zale(cid:298)no(cid:286)ci od ich dost(cid:266)pno(cid:286)ci. Instrukcja typu poka(cid:298) je(cid:286)li jest umo(cid:298)liwia dodanie najprostszej logiki do strony WWW. (cid:141) Recordset Paging — to zestaw narz(cid:266)dzi do zarz(cid:261)dzania du(cid:298)(cid:261) ilo(cid:286)ci(cid:261) danych. Umo(cid:298)liwia (cid:225)atwe dodanie elementów nawigacyjnych na kolejnych stronach zawieraj(cid:261)cych jednocze(cid:286)nie wiele rekordów. (cid:141) Display Record Count — to tak(cid:298)e zestaw narz(cid:266)dzi do zarz(cid:261)dzania du(cid:298)(cid:261) ilo(cid:286)ci(cid:261) danych. Umo(cid:298)liwia (cid:225)atwe dodanie elementów nawigacyjnych na kolejnych stronach zawieraj(cid:261)cych jednocze(cid:286)nie wiele rekordów. (cid:141) Master Detail Page Set — zestaw narz(cid:266)dzi do budowy stron typu kategoria iprodukt. Strona Master zawiera list(cid:266) wszystkich produktów danej kategorii, strona Detail — informacje o wybranym produkcie. (cid:141) Insert Record — fantastyczne narz(cid:266)dzia umo(cid:298)liwiaj(cid:261)ce dodawanie rekordów do bazy danych. (cid:141) Update Record — narz(cid:266)dzia umo(cid:298)liwiaj(cid:261)ce aktualizacj(cid:266) rekordów bazy. (cid:141) Delete Record — narz(cid:266)dzia umo(cid:298)liwiaj(cid:261)ce usuwanie wybranych rekordów z bazy. (cid:141) User Authentication — zestaw narz(cid:266)dzi u(cid:225)atwiaj(cid:261)cy budow(cid:266) systemu uwierzytelniania i logowania u(cid:298)ytkowników. (cid:141) XSL Transformation — zestaw narz(cid:266)dzi formatowania dokumentu XML lub danych RSS Z punktu widzenia twórcy dynamicznej aplikacji WWW budowanej przy u(cid:298)yciu bazy danych i skryptów PHP, zestaw ten udost(cid:266)pnia nie tylko doskona(cid:225)e narz(cid:266)dzia bazodanowe. Pozwala tak(cid:298)e na budow(cid:266) elementów strony na bazie niezwykle popularnej i funkcjonalnej technologii Ajax. Tym zagadnieniom przyjrzymy si(cid:266) nieco uwa(cid:298)niej w dalszej cz(cid:266)(cid:286)ci ksi(cid:261)(cid:298)ki. Dzi(cid:266)ki u(cid:298)yciu prostych narz(cid:266)dzi z kategorii Data, nauka programowania PHP oraz u(cid:298)ycia bazy danych czy plików XML staje si(cid:266) po prostu przyjemno(cid:286)ci(cid:261). Przygotowanie (cid:274)ród(cid:228)a danych — Recordset Do budowy dynamicznej listy kategorii na stronie index.php (strona g(cid:225)ówna serwisu) konieczne jest przygotowanie (cid:296)ród(cid:225)a danych — Recordset, które umo(cid:298)liwi po(cid:225)(cid:261)czenie strony z baz(cid:261), odczyt w(cid:225)a(cid:286)ciwych danych — wprowadzonych kategorii oraz ich prezentacj(cid:266) na stronie. W tym celu 144 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty przechodzimy do zak(cid:225)adki (lub menu) Data dost(cid:266)pnej w górnym panelu Insert, po czym z dost(cid:266)p- nych przycisków wybieramy polecenie (przycisk) Recordset (rysunek 4.12). Rysunek 4.12. Przycisk Recordset umo kilka Recordsetów. Ka (cid:298)dy z nich odpowiedzialny jest za inne dzia (cid:225)ania (cid:298)liwia budow(cid:266) nowego (cid:296)ród(cid:225)a danych. Na jednej stronie mo (cid:298)emy wykorzysta(cid:252) Nowy Recordset mo(cid:276)emy utworzy(cid:232) tak(cid:276)e dwiema innymi metodami. Za po(cid:264)rednictwem dost(cid:246)pnego w menu górnym Window panelu Bindings klikamy przycisk oznaczony symbolem +, a nast(cid:246)pnie z rozwijanej listy wybieramy polecenie Recordset (Query). Mo(cid:276)emy wykorzysta(cid:232) tak(cid:276)e menu górne Insert, a nast(cid:246)pnie przej(cid:264)(cid:232) do pozycji Data Objects i z dost(cid:246)pnej w tym miejscu listy wybra(cid:232) polecenie Recordset. Niezale(cid:298)nie od wybranej metody, du(cid:298)e okno dialogowe Recordset pozwoli na precyzyjne ustale- nie (cid:296)ród(cid:225)a danych dla naszej strony. Panel Recordset dost(cid:266)pny jest w dwóch odmianach: Basic (Podstawowy — domy(cid:286)lnie aktywny), doskona(cid:225)y dla wszystkich rozpoczynaj(cid:261)cych prac(cid:266) z baz(cid:261) danych, oraz Advanced (Zaawanso- wany), konieczny do wprowadzania bardziej zaawansowanych zapyta(cid:276) do bazy. W trybie Basic podstawowe elementy Recordseta dost(cid:266)pne s(cid:261) w postaci wizualnej i nie wymagaj(cid:261) w zasadzie (cid:298)adnej znajomo(cid:286)ci j(cid:266)zyka SQL. Podczas pracy w trybie Advanced niezb(cid:266)dne jest wprowadzanie kodu zapytania SQL r(cid:266)cznie. Daje nam to du(cid:298)e mo(cid:298)liwo(cid:286)ci dowolnego kszta(cid:225)towania samego zapytania, jak i relacji pomi(cid:266)dzy ró(cid:298)nymi tabelami. Do pierwszych prób po(cid:225)(cid:261)czenia szablonu z baz(cid:261) danych wykorzystamy Recordset w trybie Basic. Jego funkcjonalno(cid:286)(cid:252) okazuje si(cid:266) zupe(cid:225)nie wystarczaj(cid:261)ca podczas tworzenia listy kategorii ksi(cid:261)(cid:298)ek. W polu Name wprowadzamy opisow(cid:261) nazw(cid:266) zbioru danych. Warto pami(cid:266)ta(cid:252), by nie u(cid:298)ywa(cid:252) tu polskich znaków ani spacji. Nazwa powinna by(cid:252) dobrana tak, by nie kolidowa(cid:225)a z nazwami tabel, pól bazy danych ani innymi elementami (nazwami) strony. W tym przypadku do budowy listy kategorii ksi(cid:261)(cid:298)ek mo(cid:298)emy wykorzysta(cid:252) prost(cid:261), a jednocze(cid:286)nie opisow(cid:261) nazw(cid:266) typu — lista- Kategorii(rysunek 4.13). Rysunek 4.13. Okno Recordset umo(cid:298)liwia wprowadzenie na stron(cid:266) zapytania SQL w trybie graficznym. To wspania(cid:225)y sposób na poznanie i nauk(cid:266) pierwszych polece(cid:276) SQL dla u(cid:298)ytkowników o mniejszym do(cid:286)wiadczeniu Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 145 Pole Connection pozwala na wskazanie lub utworzenie w(cid:225)a(cid:286)ciwego pliku konfiguracyjnego umo(cid:298)liwiaj(cid:261)cego po(cid:225)(cid:261)czenie wszystkich stron serwisu z baz(cid:261) danych. Pliki konfiguracyjne zapisywane s(cid:261) automatycznie w folderze Connections i zawieraj(cid:261) wszystkie niezb(cid:266)dne dane dotycz(cid:261)ce serwera baz danych, samej bazy, jej tabel, a tak(cid:298)e nazw(cid:266) u(cid:298)ytkownika oraz has(cid:225)o. U(cid:298)ycie zewn(cid:266)trznych plików konfiguracyjnych z rozszerzeniem *.PHP w znacz(cid:261)cy sposób zabez- piecza nasz(cid:261) stron(cid:266) przed nieautoryzowanym dost(cid:266)pem do bazy. Dla jednego serwisu mo(cid:298)emy przygotowa(cid:252) kilka niezale(cid:298)nych sposobów (cid:225)(cid:261)czenia z baz(cid:261) (plików konfiguracyjnych), co pozwala ograniczy(cid:252) dost(cid:266)p do wybranych tabel bazy, podnosz(cid:261)c w ten sposób stopie(cid:276) ich zabezpieczenia. Cz(cid:266)sto podczas prac testowych wygodnie jest utworzy(cid:252) dwa niezale(cid:298)ne pliki konfiguracyjne. Jeden zawiera dane do serwera testowego localhost dost(cid:266)pnego na naszym dysku. Drugi zawiera dane niezb(cid:266)dne do wspó(cid:225)pracy z produkcyjn(cid:261) baz(cid:261) danych na fizycznym serwerze WWW. Podczas tworzenia pierwszego zbioru danych, Recordset, nie ma mo(cid:298)liwo(cid:286)ci wyboru sposobu po(cid:225)(cid:261)czenia strony z baz(cid:261).Po prostu do tej pory nie utworzyli(cid:286)my jeszcze (cid:298)adnego pliku konfi- guracyjnego. W polu Connection pozostawiamy pozycj(cid:266)None i za pomoc(cid:261) przycisku Define przechodzimy do okna Connections for Site siteRecenzje (rysunek 4.14). (cid:261) danych trzeba przygotowa (cid:225)ania strony w Internecie Rysunek 4.14. W celu nawi(cid:261)zania komunikacji z baz Dla wygody testowania naszej strony mo z naszego dysku oraz internetowe, niezb (cid:252) plik konfiguracyjny — Connection. (cid:298)emy przygotowa(cid:252) dwa po(cid:225)(cid:261)czenia, lokalne do testowania strony na serwerze (cid:266)dne do poprawnego dzia Je(cid:286)li wcze(cid:286)niej zdefiniowane by(cid:225)y metody po(cid:225)(cid:261)czenia z baz(cid:261), ich lista widoczna b(cid:266)dzie w wy(cid:286)wie- tlonym oknie. Aby zmieni(cid:252) ustawienia istniej(cid:261)cego pliku konfiguracyjnego, wybieramy go z listy, a nast(cid:266)pnie za pomoc(cid:261) przycisku Edit wchodzimy w tryb edycji jego w(cid:225)a(cid:286)ciwo(cid:286)ci. W przypadku, gdy tworzymy pierwszy plik konfiguracyjny, na li(cid:286)cie nie ma jeszcze widocznych (cid:298)adnych po(cid:225)(cid:261)cze(cid:276). Za pomoc(cid:261) przycisku New przechodzimy do kolejnego okna — MySQL Connection. W tym miejscu uwa(cid:298)nie wprowadzamy niezb(cid:266)dne dane konfiguracyjne. (cid:141) Connection name (Nazwa po(cid:225)(cid:261)czenia) — to opisowa nazwa po(cid:225)(cid:261)czenia, która powinna by(cid:252) krótka i zrozumia(cid:225)a. W przypadku u(cid:298)ycia serwera testowego localhost mo(cid:298)emy wprowadzi(cid:252) nazw(cid:266)localTest. Jest ona krótka, zrozumia(cid:225)a i jednoznacznie wskazuje na u(cid:298)ycie lokalnego serwera testowego. W przypadku pracy z serwerem internetowym nazwa w postaci remoteTest doskonale oddaje ten w(cid:225)a(cid:286)nie charakter po(cid:225)(cid:261)czenia. (cid:141) 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(cid:252)localhost. (cid:141) User name (Nazwa u(cid:298)ytkownika) — to nazwa u(cid:298)ytkownika, który ma dost(cid:266)p do bazy danych. W przypadku u(cid:298)ycia serwera Krasnal nazwa u(cid:298)ytkownika o prawach administracyjnych (Admin) to root. W przypadku u(cid:298)ycia innych serwerów konieczne jest sprawdzenie w(cid:225)a(cid:286)ciwej nazwy w ich dokumentacji. 146 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty (cid:141) Password (Has(cid:225)o) — to has(cid:225)o dost(cid:266)pu do bazy danych dla wybranego u(cid:298)ytkownika. W przypadku pracy z serwerem Krasnal has(cid:225)o domy(cid:286)lnego u(cid:298)ytkownika to krasnal. (cid:141) Database(Baza danych) — to w(cid:225)a(cid:286)ciwa baza danych wykorzystywana podczas budowy danego serwisu WWW. Mo(cid:298)emy oczywi(cid:286)cie wprowadzi(cid:252) nazw(cid:266) bazy r(cid:266)cznie, jednak du(cid:298)o wygodniej jest wskaza(cid:252) w(cid:225)a(cid:286)ciw(cid:261) baz(cid:266) z dost(cid:266)pnych dla wybranej lokalizacji (localhost) za pomoc(cid:261) przycisku Select. Do budowy strony z recenzjami ksi(cid:261)(cid:298)ek wybieramy utworzon(cid:261) wcze(cid:286)niej baz(cid:266) — siterecenzje. Przyk(cid:225)adowe dane okna MySQLConnection dla serwera Krasnal przedstawione s(cid:261) poni(cid:298)ej (rysunek 4.15). (cid:141) Connection name: localTest (cid:141) MySQL Server: localhost (cid:141) User Name: root (cid:141) Password: krasnal (cid:141) Database: siteRecenzje Rysunek 4.15. Podczas tworzenia lokalnego po(cid:225)(cid:261)czenia u(cid:298)yjemy danych dotycz(cid:261)cych bazy na naszym dysku. W przypadku po(cid:225)(cid:261)czenia internetowego w tym miejscu wprowadzamy dane umo(cid:298)liwiaj(cid:261)ce po(cid:225)(cid:261)czenie i wspó(cid:225)prac(cid:266) z baz(cid:261) internetow(cid:261) Za pomoc(cid:261) przycisku OK potwierdzamy wprowadzone w(cid:225)a(cid:286)ciwo(cid:286)ci po(cid:225)(cid:261)czenia i przechodzimy ponownie do okna Connections for Site siteRecenzje . Przycisk Done pozwala zachowa(cid:252) usta- wienia i przenosi nas z powrotem do okna edycji — Recordset. Co bardzo istotne, bezpo(cid:286)rednio po zdefiniowaniu w(cid:225)a(cid:286)ciwo(cid:286)ci ustawie(cid:276) po(cid:225)(cid:261)czenia nie b(cid:266)dzie ono automatycznie widoczne w polu Connection. Musimy r(cid:266)cznie wskaza(cid:252) wprowadzon(cid:261) nazw(cid:266) localTest, by przej(cid:286)(cid:252) do dalszej cz(cid:266)(cid:286)ci panelu. W polu Table wybieramy jedn(cid:261) z tabel w wybranej bazy danych. W przypadku bazy siterecenzje do budowy listy kategorii wybieramy tabel(cid:266) kategorie, a nast(cid:266)pnie w polu Columns poni(cid:298)ej okre(cid:286)lamy, które pola (kolumny) tabeli chcieliby(cid:286)my wykorzysta(cid:252). W tym przypadku konieczne jest u(cid:298)ycie wszystkich pól (All), jednak w wielu innych sytuacjach mo(cid:298)emy wybra(cid:252) opcj(cid:266)Selected i (z wci(cid:286)ni(cid:266)tym klawiszem Ctrl) wskaza(cid:252) wybrane pola konieczne do budowy naszej strony. Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 147 Widoczne poni(cid:298)ej sekcje Filter oraz Sort pozwalaj(cid:261) na wprowadzenie dodatkowych opcji dotycz(cid:261)cych budowanego zbioru danych. W tej chwili nie ma konieczno(cid:286)ci ich modyfikacji (jednak zrobimy to nieco pó(cid:296)niej), zatem w obu polach pozostawiamy domy(cid:286)lnie wybran(cid:261) opcj(cid:266) — None (rysunek 4.16) i za pomoc(cid:261) przycisku OK potwierdzamy wprowadzone dane. Rysunek 4.16. Podczas tworzenia Recordseta konieczne jest wskazanie odpowiedniego po(cid:225)(cid:261)czenia, tabeli z bazy oraz jej pól. W wielu przypadkach u(cid:298)yjemy wszystkich pól tabeli, jednak o ile jest to mo(cid:298)liwe, starajmy si(cid:266) ogranicza(cid:252) ilo(cid:286)(cid:252) przesy(cid:225)anych danych do minimum Ka(cid:298)dy Recordset ((cid:296)ród(cid:225)o danych) widoczny jest automatycznie w panelu Bindings (panel Bindings otwiera si(cid:266) w chwili utworzenia nowego Recordseta). Po rozwini(cid:266)ciu zawarto(cid:286)ci za pomoc(cid:261) przycisku z symbolem + (widoczny tu(cid:298) przed jego nazw(cid:261)) wy(cid:286)wietla on list(cid:266) wszystkich pól bazy danych do(cid:225)(cid:261)czonych do bie(cid:298)(cid:261)cegoRecordseta podczas definiowania jego w(cid:225)a(cid:286)ciwo(cid:286)ci. W chwili u(cid:298)ycia (cid:296)ród(cid:225)a danych generowanego na podstawie tabeli kategorie w panelu Bindings widoczne s(cid:261) dwie pozycje (rysunek 4.17): (cid:141) id_kategorii — zawiera numeryczny identyfikator kategorii w tabeli (cid:141) kategoria — nazwa w(cid:225)a(cid:286)ciwej kategorii Rysunek 4.17. W panelu Bindings widoczne s(cid:261) (w tym przypadku dwa) pola z wybranej tabeli bazy danych Do utworzenia dynamicznej listy menu wystarczy oczywi(cid:286)cie u(cid:298)ycie jedynie pola kategoria, które zawiera nazwy kategorii wprowadzone do bazy danych. Pole id_kategorii wykorzystamy w nieco innym celu w dalszej cz(cid:266)(cid:286)ci rozdzia(cid:225)u. Warto w tym momencie zwróci(cid:232) uwag(cid:246) na kod (przycisk Source widoczny w górnej cz(cid:246)(cid:264)ci okna bie(cid:276)(cid:241)cego dokumentu) HTML/PHP edytowanej strony. Dodanie dynamicznego (cid:274)ród(cid:228)a Recordset wprowadzi(cid:228)o wiele istotnych zmian. Wi(cid:246)kszo(cid:264)(cid:232) z nich widoczna jest w górnej cz(cid:246)(cid:264)ci strony. Pomi(cid:246)dzy znacznikami kodu PHP — ?php tu tre(cid:295)(cid:232) kodu PHP na naszej stronie ? wprowadzonych jest kilka funkcji PHP u(cid:228)atwiaj(cid:241)cych po(cid:228)(cid:241)czenie z wybran(cid:241) baz(cid:241), wyszukanie odpowiednich danych oraz wy(cid:264)wietlenie ich na stronie. 148 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty Podobnie jak w przypadku j(cid:266)zyka HTML, kod PHP zawarty jest w sekcji ograniczonej znacz- nikami. Zapis ?php oznacza pocz(cid:261)tek kodu PHP na stronie, za(cid:286) odpowiednio znacznik ? jest jego zako(cid:276)czeniem. Pomi(cid:266)dzy znacznikami zawarte s(cid:261) w(cid:225)a(cid:286)ciwe funkcje i dzia(cid:225)ania j(cid:266)zyka PHP/MySQL wykorzystane do wy(cid:286)wietlenia tre(cid:286)ci na podstawie utworzonego (cid:296)ród(cid:225)a danych. Adobe Dreamweaver CS3 generuje bardzo ciekawy kod strony. Jest on po(cid:225)(cid:261)czeniem tradycyj- nego HTML z elementami PHP umieszczonymi wewn(cid:261)trz znaczników ?php tu tre(cid:295)(cid:232) kodu PHP na naszej stronie ? . Co wa(cid:298)ne, dzi(cid:266)ki u(cid:298)yciu j(cid:266)zyka HTML mo(cid:298)emy budowa(cid:252) serwis w trybie graficznym, wprowadzaj(cid:261)c jedynie dynamiczne dane w wybranych sekcjach strony. Tego typu podej(cid:286)cie zdecydowanie u(cid:225)atwia prac(cid:266) nawet zaawansowanym u(cid:298)ytkownikom programu Adobe Dreamweaver CS3 o mniejszym do(cid:286)wiadczeniu w programowaniu. Dynamiczne menu na stronie Strona index.php po usuni(cid:266)ciu nazw pozosta(cid:225)ych kategorii w menu po lewej stronie zawiera teraz jedynie pojedyncz(cid:261) kategori(cid:266). Zaznaczamy j(cid:261), a nast(cid:266)pnie przechodzimy do palety Bindings. Tu wybieramy pole kategoria i za pomoc(cid:261) przycisku Insert widocznego w dolnej cz(cid:266)(cid:286)ci panelu wprowadzamy dynamiczn(cid:261) zawarto(cid:286)(cid:252) na stron(cid:266) (rysunek 4.18). Rysunek 4.18. Za pomoc(cid:261) przycisku Insert mo(cid:298)emy wprowadza(cid:252) dynamiczne teksty na stron(cid:266). (cid:224)atwiej i szybciej jest je przeci(cid:261)ga(cid:252) z panelu Bindings w wybrane po(cid:225)o(cid:298)enie w oknie aktywnego dokumentu Zaznaczona wcze(cid:286)niej statyczna pozycja menu zostaje w ten sposób automatycznie zast(cid:261)piona tre(cid:286)ci(cid:261) w postaci {listaKategorii.kategoria}. Zapis w tej w(cid:225)a(cid:286)nie postaci, a tak(cid:298)e inny kolor zaznaczenia informuje nas, (cid:298)e w tym miejscu wprowadzone zosta(cid:225)y dynamiczne dane (rysunek 4.19). Pierwszy segment nazwy {listaKategorii.kategoria} oznacza (cid:296)ród(cid:225)o danych — Record- set. W tym przypadku widoczna nazwa jednoznacznie wskazuje na RecordsetlistaKategorii. Druga cz(cid:266)(cid:286)(cid:252) nazwy widoczna bezpo(cid:286)rednio po kropce zawiera nazw(cid:266) pola (kategoria) wyko- rzystanego do budowy menu na stronie. Niezwykle wygodn(cid:261) funkcj(cid:261) Adobe Dreamweavera CS3 jest mo(cid:298)liwo(cid:286)(cid:252) podgl(cid:261)du dynamicznej zawarto(cid:286)ci z bazy danych na bie(cid:298)(cid:261)cej stronie bez konieczno(cid:286)ci uruchamiania przegl(cid:261)darki inter- netowej. W tym celu nale(cid:298)y zlokalizowa(cid:252) przycisk Live Data View widoczny w górnej cz(cid:266)(cid:286)ci okna aktywnego dokumentu. Po uruchomieniu podgl(cid:261)du na li(cid:286)cie kategorii powinna ukaza(cid:252) si(cid:266) jedynie pierwsza pozycja z bazy (rysunek 4.20). W niektórych sytuacjach u(cid:298)ycie podgl(cid:261)duLive Data View nie daje dobrych rezultatów. Dotyczy to szczególnie sytuacji, gdy domy(cid:286)lny kolor pod(cid:286)wietlenia dynamicznych danych pokrywa si(cid:266) z kolorystyk(cid:261) lub t(cid:225)em tekstu. Mo(cid:298)emy to (cid:225)atwo zmieni(cid:252) za pomoc(cid:261) odpowiedniej edycji prefe- rencji ogólnych programu. Za pomoc(cid:261) polecenia Preferences (Ctrl+U) dost(cid:266)pnego w menu Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 149 Rysunek 4.19. Dynamiczna nazwa kategorii na stronie. W domy jest w jasnoniebieskim pod (cid:286)wietleniu. W wielu przypadkach (cid:266). (cid:286)lnej postaci dynamiczne pole tekstowe widoczne skutecznie utrudnia to prac (cid:225)atwia to pó(cid:296)niejsze formatowanie i planowanie rozm (cid:298)emy podgl(cid:261)da(cid:252) dynamiczne tre(cid:286)ci bezpo(cid:286)rednio na Rysunek 4.20. Za pomoc(cid:261) przycisku Live Data View mo ieszczenia elementów na stronie stronie WWW. Znacznie u górnym Edit przechodzimy do sekcji Highlighting (rysunek 4.21). Je(cid:286)li w dolnej sekcji Live Data w obu przypadkach ustawimy brak koloru, Adobe Dreamweaver CS3 wy(cid:286)wietli dane w orygi- nalnej ostylowanej postaci. Tego typu podgl(cid:261)d bardzo u(cid:225)atwia dalsz(cid:261) prac(cid:266) (rysunek 4.22). Rysunek 4.21. W oknie Preferencji, w kategorii Highlighting mamy mo(cid:298)liwo(cid:286)(cid:252) modyfikacji koloru pod(cid:286)wietlenia dynamicznych danych na stronie. W wielu przypadkach usuni (cid:266)cie pod(cid:286)wietlenia jest bardzo wygodnym rozwi(cid:261)zaniem 150 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty (cid:286)wietlenia prezentuj Rysunek 4.22. Dynamiczne dane bez pod przydatny podczas edycji stylów C (cid:261) si(cid:266) du(cid:298)o lepiej. Taki tryb podgl SS i formatowania elementów strony (cid:261)du jest bardzo Prawdopodobnie dla wielu Czytelników widoczny podgl(cid:261)d jest pewnym zaskoczeniem. Skoro naszRecordset mia(cid:225) umo(cid:298)liwi(cid:252) wy(cid:286)wietlanie wszystkich kategorii ksi(cid:261)(cid:298)ek, czemu widoczny jest tylko pierwszy rekord bazy danych? Nie ma tu nic dziwnego. Do tej pory nie podj(cid:266)li(cid:286)my (cid:298)adnych dzia(cid:225)a(cid:276) umo(cid:298)liwiaj(cid:261)cych wy(cid:286)wietlenie wszystkich pozycji z pola kategoria. Spróbujmy to zmieni(cid:252). Automatycznie podczas u(cid:276)ycia dowolnego (cid:274)ród(cid:228)a danych (Recordset) mamy dost(cid:246)p jedy- nie do pierwszego rekordu bazy. Jego tre(cid:264)(cid:232) widoczna jest w trybie Live Data View, a tak(cid:276)e na podgl(cid:241)dzie strony w przegl(cid:241)darce internetowej — polecenie Preview In Browser (F12) dost(cid:246)pne w menu górnym File. W celu wy(cid:286)wietlenia wi(cid:266)kszej liczby rekordów na stronie trzeba wprowadzi(cid:252) dodatkowe funkcje j(cid:266)zyka PHP. Oczywi(cid:286)cie w pierwszej chwili brzmi to raczej ma(cid:225)o zach(cid:266)caj(cid:261)co, jednak nie jest to wcale trudne zadanie. Musimy jedynie precyzyjnie zaznaczy(cid:252) pierwsz(cid:261) pozycj(cid:266) menu w lewej kolumnie, zawart(cid:261) pomi(cid:266)dzy znacznikami li /li (rysunek 4.23), a nast(cid:266)pnie w górnej sekcji strony zlokalizowa(cid:252) i wykorzysta(cid:252) przycisk Repeat Region dost(cid:266)pny w zak(cid:225)adce (lub menu) Data (rysunek 4.24). Rysunek 4.23. W dolnej cz(cid:266)(cid:286)ci strony widoczna jest hierarchia znaczn na li(cid:286)cie przyporz(cid:261)dkowany jest do obiektu aktywnego na stronie. Widoc tak(cid:298)e do precyzyjnego zaznaczania wybranych elementów s ików HTML naszej st rony. Ostatni znacznik zne tu selektory mo(cid:298)emy wykorzystywa(cid:252) trony Rysunek 4.24. Za pomoc(cid:261) przycisku Repeat Region mo na podstawie tre(cid:286)ci pobranych z bazy danych. Obszar Repeat Region bu listy li pozwala na budow (cid:266) dynamicznego menu na stronie (cid:298)emy wprowadza(cid:252) cykliczne, powtarzalne elementy strony dowany na podstawie znaczników pozycji U(cid:276)ycie polecenia Repeat Region pozwala automatycznie utworzy(cid:232) funkcj(cid:246) j(cid:246)zyka PHP, która wy(cid:264)wietla dowoln(cid:241) liczb(cid:246) rekordów z bazy danych. Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 151 W oknie Repeat Region znajduj(cid:261) si(cid:266) trzy nieskomplikowane opcje. W polu Recordset upewniamy si(cid:266), (cid:298)e widoczna jest nazwa w(cid:225)a(cid:286)ciwego (cid:296)ród(cid:225)a danych — lista kategorii. Sekcja Show pozwala na wybór ilo(cid:286)ci rekordów jednorazowo prezentowanych na stronie (rysunek 4.25). ocelow(cid:261) liczb(cid:266) rekordów (elementów (cid:298)ycie opcji All daje dobre rezultaty (cid:286)my wy(cid:286)wietli(cid:252) na stronie. Nie zawsze u Rysunek 4.25. W oknie konfiguracyjnym Repeat Region wprowadzamy d z bazy danych), jakie chcieliby — to wybór dowolnej, sko(cid:276)czonej liczby rekordów (cid:141) Show ... Records at a Time widocznych na stronie (cid:141) Show All records wy(cid:286)wietla pe(cid:225)n(cid:261) list(cid:266) rekordów, niezale(cid:298)nie od jej ilo(cid:286)ci. W sytuacji, gdy lista rekordów jest bardzo d(cid:225)uga, u(cid:298)ycie tej opcji nie tylko spowalnia proces wy(cid:286)wietlania strony, ale tak(cid:298)e nie wygl(cid:261)da pó(cid:296)niej zbyt elegancko. W przypadku budowy listy kategorii ksi(cid:261)(cid:298)ek wybierzemy oczywi(cid:286)cie opcj(cid:266)All Records (nie mamy wielu kategorii), co umo(cid:298)liwi wy(cid:286)wietlenie wszystkich wprowadzonych kategorii w obszarze menu. W ten sposób u(cid:298)ytkownicy serwisu b(cid:266)d(cid:261) mogli (cid:225)atwo i szybko wybra(cid:252) w(cid:225)a(cid:286)ciw(cid:261) kategori(cid:266), by wyszuka(cid:252) odpowiedni(cid:261) recenzj(cid:266) ulubionej ksi(cid:261)(cid:298)ki. Dzi(cid:266)ki u(cid:298)yciu podgl(cid:261)duLive Data View menu widoczne w lewej kolumnie zawiera teraz list(cid:266) wszystkich kategorii wprowadzonych do bazy danych. Nie by(cid:225)o to chyba trudne zadanie (ry- sunek 4.26). Rysunek 4.26. Dzi(cid:266)ki u(cid:298)yciu polecenia Repeat Region dynamiczna lista kateg bazy danych znalaz (cid:225)a si(cid:266) na naszej stronie orii na podstawie tabeli kategorie z 152 Adobe Creative Suite 3 Web Standard. Tworzenie dynamicznych stron WWW. Warsztaty (cid:227)(cid:241)cza tymczasowe Aby menu nawigacyjne kategorii ksi(cid:261)(cid:298)ek umo(cid:298)liwia(cid:225)o przej(cid:286)cie do innej strony serwisu, koniecz- ne jest dodanie mu odpowiednich (cid:225)(cid:261)czy (linków). Na tym etapie budowy ca(cid:225)ego serwisu trudno jest jeszcze planowa(cid:252) w(cid:225)a(cid:286)ciwe po(cid:225)(cid:261)czenia pomi(cid:266)dzy stronami. W tej chwili nie mamy jeszcze (cid:298)adnych stron, do których mia(cid:225)yby one prowadzi(cid:252). Oczywi(cid:286)cie mogliby(cid:286)my pozostawi(cid:252) menu w bie(cid:298)(cid:261)cej postaci, jednak wprowadzenie cho(cid:252)by tymczasowych linków znacznie u(cid:225)atwi nam pó(cid:296)niejsze dzia(cid:225)ania, a i teraz wprowadzi nieco zmian w wygl(cid:261)dzie bie(cid:298)(cid:261)cej strony. Menu kategorii ksi(cid:261)(cid:298)ek generowane jest dynamicznie na podstawie tre(cid:286)ci pobranych z bazy danych. W zwi(cid:261)zku z tym na stronie index.php znajduje si(cid:266) jedynie dynamiczne odwo(cid:225)anie do wybranego pola {listaKategorii.kategoria} tabeli. Dzi(cid:266)ki u(cid:298)yciu niezwykle wygodnej funkcji Repeat Region, wy(cid:286)wietlamy w tym miejscu pe(cid:225)n(cid:261) list(cid:266) kategorii. Oznacza to, nie mamy mo(cid:298)li- wo(cid:286)ci dodania (cid:225)(cid:261)czy r(cid:266)cznie do ka(cid:298)dej pozycji menu. Jak (cid:225)atwo si(cid:266) domy(cid:286)li(cid:252), musz(cid:261) by(cid:252) one tak(cid:298)e dynamicznie generowane. W tej chwili wprowadzimy jednak jedynie proste linki zast(cid:266)pcze. W tym celu mo(cid:298)emy wykorzy- sta(cid:252) znacznik #. Wprowadzenie (cid:225)(cid:261)cza w takiej postaci oczywi(cid:286)cie nie spowoduje poprawnego dzia(cid:225)ania strony, jednak w znacz(cid:261)cy sposób u(cid:225)atwi pó(cid:296)niejsz(cid:261) modyfikacj(cid:266). Zaznaczamy na stronie dynamiczny tekst w postaci {listaKategorii.kategoria}, a nast(cid:266)p- nie w polu Link wprowadzamy znacznik #. Potwierdzamy to za pomoc(cid:261) klawisza Enter (ry- sunek 4.27). Rysunek 4.27. Za pomoc(cid:261) selektora li na li element strony (cid:286)cie w dolnej cz(cid:266)(cid:286)ci strony mo(cid:298)emy precyzyjnie zaznaczy (cid:252) wybrany Dodawanie (cid:228)(cid:241)czy (linków) nale(cid:276)y zawsze potwierdza(cid:232) za pomoc(cid:241) klawisza Enter! Niestety, dodanie zast(cid:266)pczego odno(cid:286)nika wprowadzi(cid:225)o niekorzystn(cid:261) zmian(cid:266) na naszej stronie. Do tej pory atrakcyjnie wygl(cid:261)daj(cid:261)ce (na podgl(cid:261)dzie lub przy u(cid:298)yciu funkcji Live Data View) menu sta(cid:225)o si(cid:266) niebieskie i podkre(cid:286)lone. Nie jest to nic niezwyk(cid:225)ego. W ten sposób przegl(cid:261)darki domy(cid:286)lnie wy(cid:286)wietlaj(cid:261) (cid:225)(cid:261)cza na ka(cid:298)dej stronie. Dopóki za pomoc(cid:261) definicji CSS nie zmienimy wygl(cid:261)du odno(cid:286)nika, dopóty przyjmuje on standardow(cid:261) posta(cid:252) — niebieski podkre(cid:286)lony tekst. Co ciekawe, wielko(cid:286)(cid:252) oraz styl odno(cid:286)nika pozosta(cid:225)y bez zmian, zmieni(cid:225) si(cid:266) jedynie kolor i dodane zosta(cid:225)o podkre(cid:286)lenie (rysunek 4.28). Rozdzia(cid:228) 4. (cid:105) Dynamiczny serwis WWW 153 Rysunek 4.28. Po dodaniu (cid:225)(cid:261)cza wygl(cid:261)d pozycji menu zmieni wygl(cid:261)d odno(cid:286)ników na stronie. S(cid:261) koloru niebieskiego i maj (cid:261) dodatkowe podkre(cid:286)lenie (cid:225) si(cid:266). W tej chwili elementy listy przybra (cid:225)y domy(cid:286)lny Dodatkowe style CSS By nada(cid:252) elementom menu wcze(cid:286)niej okre(cid:286)lony wygl(cid:261)d, konieczne jest przygotowanie kolej- nych definicji stylów kaskadowych CSS. Nie jest to szczególnie trudne zadanie, jednak w tym miejscu postaramy si(cid:266) doda(cid:252) li(cid:286)cie menu kilka ciekawych mo(cid:298)liwo(cid:286)ci. W dzisiejszych czasach, w dobie burzliwego rozwoju Internetu i nowoczesnych technologii, trudno sobie wyobrazi(cid:252), by przyciski ekranowe (np. menu z list(cid:261) kategorii) pozostawa(cid:225)y statyczne na stronie. Zazwyczaj nadajemy im typowy efekt RollOver, czyli zmian(cid:266) wygl(cid:261)du po najechaniu i naci(cid:286)ni(cid:266)ciu kursorem myszki. Tego typu efekty cz(cid:266)sto kojarzone s(cid:261) z budowaniem specjalnych elementów graficznych, które nast(cid:266)pnie s(cid:261) podmieniane za pomoc(cid:261) skryptów j(cid:266)zyka Java Script w chwili najechania na nie kursorem myszy. Na szcz(cid:266)(cid:286)cie takie podej(cid:286)cie dzi(cid:286) ju(cid:298) mo(cid:298)e odej(cid:286)(cid:252) w niepami(cid:266)(cid:252). Dzi(cid:266)ki u(cid:298)yciu stylów kaskadowych mo(cid:298)emy przygotowa(cid:252) niemal identyczny wizu- alnie efekt bez konieczno(cid:286)ci u(cid:298)ycia grafiki i Java Scriptu. Zanim przejdziemy do budowy stylów, przypomnijmy sobie struktur(cid:266) menu kategorii. Ca(cid:225)o(cid:286)(cid:252) znajduje si(cid:266) w sekcji div#sidebar1 , a nast(cid:266)pnie wewn(cid:261)trz sekcji listy nienumerowanej, czyli ul /ul . Jedyna pozycja listy {listaKategorii.kategoria} zamkni(cid:266)ta jest wewn(cid:261)trz znacznika li /li . W wyniku dodania odno(cid:286)nika w postaci # pole {listaKategorii.kategoria} zawiera jeszcze dodatkowy tag j(cid:266)zyka HTML — a href= # . Jest to znacznik (cid:225)(cid:261)cza (linku) tymcza- sowego (#), który w tej
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

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

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: