Professional Documents
Culture Documents
Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Spis treci
Wstp .................................................................................................................................................................................................11
Wymagania ..................................................................................................................................................................11
Lekcje ........................................................................................................................................................................... 12
Projekt witryny ........................................................................................................................................................... 13
Struktura ksiki ........................................................................................................................................................ 13
W razie problemw ................................................................................................................................................... 14
O tym wydaniu .......................................................................................................................................................... 15
Oficjalny podrcznik ................................................................................................................................................ 16
Autoryzowane szkolenia i certyfikaty ..................................................................................................................... 17
Czego si nauczysz? ................................................................................................................................................... 17
Minimalne wymagania systemowe Windows .................................................................................................. 18
Minimalne wymagania systemowe Macintosh ................................................................................................ 19
SPIS TRECI
SPIS TRECI
10
Skorowidz ...................................................................................................................................................................................449
Przewidywany czas
Lekcja zajmie okoo 60 minut.
Pliki lekcji
Pliki wyjciowe:
Lekcja03/Start/newland/about.html
Lekcja03/Start/newland/contact.html
Lekcja03/Start/newland/css/main.css
Lekcja03/Start/newland/generic_template.html
Lekcja03/Start/newland/index.html
Lekcja03/Start/newland/profiles.html
Lekcja03/Start/newland/tours.html
86
Pliki kocowe:
Lekcja03/Complete/newland-asp/about.asp
Lekcja03/Complete/newland-asp/contact.asp
Lekcja03/Complete/newland-asp/css/main.css
Lekcja03/Complete/newland-asp/generic_template.asp
Lekcja03/Complete/newland-asp/index.asp
Lekcja03/Complete/newland-asp/profiles.asp
Lekcja03/Complete/newland-asp/test_form.asp
Lekcja03/Complete/newland-asp/test_form_processor.asp
Lekcja03/Complete/newland-asp/tours.html
Jeli uywasz ColdFusion lub PHP i chcesz mie dostp do plikw kocowych, skorzystaj
z lustrzanego folderu (newland_cf lub newland_php) na zaczonej pycie CD. Wszystkie pliki
maj te same nazwy, zmieniono jedynie ich rozszerzenia (.cfm lub .php zamiast .asp).
LEKCJA 3.
Dynamiczne witryny WWW
Tworzenie dynamicznych stron WWW wie si czsto z czeniem zwykego tekstu z miejscami na zmienne
Aby zrozumie zachodzce tu interakcje oraz przygotowa si do czekajcych nas zada, powimy
chwil na przeanalizowanie wzajemnych relacji midzy trzema gwnymi rdami informacji, skadajcymi si na kad stron WWW, czyli zawartoci (tekst, rysunki itd.), warstw logiczn (hierarchia dokumentu, np. nagwki i zasadnicza tre dokumentu) oraz warstw prezentacyjn (kolory,
wielko czcionek, pooenie i inne efekty kosmetyczne).
We wczeniejszych wersjach jzyka HTML tekst, znacznikowanie i kod prezentacyjny wystpuj
razem w jednym miejscu w samym dokumencie HTML. Tym samym dokument znajdujcy si na
dysku twardym autora strony jest taki sam jak dokument wywietlany w przegldarce u osoby odwiedzajcej witryn. Ten prosty zwizek przedstawiony zosta na poniszym rysunku.
W wyniku zmian, jakie przeprowadzilimy w lekcji 2., zwizek ten uleg zmianie: oddzielilimy
wygld dokumentu od jego warstwy logicznej i zawartoci. Informacje o wygldzie strony przechowywane s teraz w arkuszu CSS. Zawarto dokumentu znajduje si wewntrz oznakowa XHTML,
ktre tworz rwnie warstw logiczn dokumentu. Prawdziwa strona powstaje dopiero po poczeniu dokumentw XHTML i CSS. Ten nowy zwizek przedstawiony zosta na poniszym rysunku.
87
88
W tej i kolejnych lekcjach uzupenimy ten schemat o nastpn warstw. Bdzie to zmiana jeszcze
bardziej zasadnicza ni przejcie od HTML do XHTML i CSS. Dokadniej mwic, oddzielimy
zawarto od warstwy logicznej przez dodanie do witryny zawartoci z bazy danych. Spowoduje to,
e wszystkie te trzy poziomy warstwa prezentacyjna, warstwa logiczna oraz zawarto stan si
w duym stopniu niezalene od siebie, co sprawi, e bdziemy mogli dokona radykalnych zmian
w kadej z tych warstw bez koniecznoci wprowadzania zmian w pozostaych. Taka relacja i oparta
na niej podstawowa strategia zastosowana w pozostaej czci ksiki przedstawiona zostaa na
poniszym rysunku.
HTML nie potrafi oddzieli zawartoci od warstwy logicznej dokumentu. Nawet w swojej 5. wersji
(XHTML 1.0) HTML jest w zasadzie przeznaczony do znacznikowania zwykego tekstu dokumentu.
Nie moe on przetwarza skryptw, oblicza wyrae, wykonywa dziaa matematycznych, wchodzi w interakcj z baz danych czy wysya informacji e-mailem do uytkownika. A oddzielenie warstwy logicznej od zawartoci wymaga czasem kadej z tych operacji (i nie tylko). Aby wykona te
zadania, musimy nieco wspomc HTML. I tu przychodz z pomoc technologie serwerowe, takie jak
Microsoft ASP, Adobe ColdFusion i PHP.
LEKCJA 3.
Dynamiczne witryny WWW
Jzyk arkuszy stylw (przypominajcy CSS na sterydach) XSLT (ang. eXtensible Stylesheet Language for Transformation) moe wykonywa ptle, przeprowadza konwersj
danych i wiele wicej. Jedn z jego najbardziej przydatnych cech jest zdolno do przekonwertowania dokumentu XML z jednego formatu (np. zastrzeonego jzyka XML do
uytku wewntrznego) na inny format dokumentu XML (np. standardowy dokument
XML, ktry mona dzieli z innymi) i odwrotnie. Pomimo swojej przydatnoci XSLT nie
jest tak silny i elastyczny, jak aplikacje po stronie serwera zbudowane przy uyciu ASP,
ColdFusion czy PHP.
Technologie serwerowe, takie jak ASP, ColdFusion czy PHP (s te inne, na przykad JSP i ASP.NET),
mog wykona takie zadania programistyczne, jak obliczanie wyrae, wykonywanie dziaa matematycznych i przetwarzanie danych pochodzcych z rnych rde, wcznie z bazami danych,
strukturalnymi plikami tekstowymi, a w niektrych przypadkach z danymi XML. Maj one rwnie
szczeglne funkcje, dotyczce wycznie WWW, takie jak zdolno do zbierania danych wysyanych
przez uytkownika oraz kontrolowanie wysyanych do niego informacji zwrotnych.
Ale tkwi w tym pewien haczyk. Przegldarki s ograniczone do obsugi HTML, CSS i JavaScript nie
rozumiej skryptw serwera (mwic skrypty serwera, mam tu na myli kod napisany w ASP,
ColdFusion, PHP itd.). Wszystko, co serwer przesya do przegldarki, musi by zapisane w standardowym formacie HTML. Przed wysaniem danych do przegldarki wszystkie skrypty serwera musz
zosta uruchomione na serwerze i da na wyjciu standardowy HTML.
Mwic prociej, aby zobaczy stron zawierajc zmieniajce si dane, musimy j uruchomi na
serwerze zdolnym do przetworzenia kodu. Rni si to od standardowych stron HTML, ktre mona
wywietli bezporednio w przegldarce, niezalenie od tego, czy s one wczytywane z serwera, czy te
np. z lokalnego dysku. Gdy w przegldarce Internet Explorer lub Netscape otworzymy dowoln
stron HTML z folderu Lekcja03/Start, zostanie ona wywietlona tak, jak tego oczekiwalimy. Jeli
jednak przejdziemy do stron z folderu Lekcja03/Complete, odkryjemy, e strony si nie otwieraj (lub
otwieraj si w programie Dreamweaver, zamiast w przegldarce). Przegldarka napotyka kod, ktrego
nie rozumie i nie moe otworzy pliku. Z tego powodu w lekcji 1. ogldalimy kocow wersj
witryny, znajdujc si pod adresem http://www.bobflynn.info, zamiast na pycie CD.
Witryny umieszczamy na serwerach internetowych. By jednak byy one dostpne, musi by na nich
uruchomione specjalne oprogramowanie: serwer WWW (czasem uywa si te nazwy serwer HTTP).
Najpopularniejsze serwery WWW to Apache, dziaajcy w systemach Unix (Linux), Mac OS X i Windows oraz stworzony przez Microsoft IIS (Internet Information Services), stosowany na serwerach internetowych dziaajcych pod kontrol systemu Windows.
Oprcz serwera WWW prawdopodobnie bdziemy te korzysta z innych serwerw dostarczajcych
dane. Moemy uy serwera baz danych, np. MySQL lub Microsoft SQL Server. Moemy rwnie
skorzysta z serwera aplikacji, ktry przetworzy skrypty serwera. Takim serwerem aplikacji jest ColdFusion. Serwer aplikacji przetwarzajcy skrypty ASP wbudowany jest w IIS, mona wic powiedzie,
e IIS stanowi poczenie serwera WWW i serwera aplikacji. PHP jest serwerem aplikacji uruchamianym jako modu serwera Apache.
89
90
LEKCJA 3.
Dynamiczne witryny WWW
W polskich realiach technologia PHP odniosa zdecydowanie najwikszy sukces. Znalezienie dostawcy
internetu, ktry umoliwia korzystanie z ASP, jest do trudne, cho moliwe. Natomiast ColdFusion
to w Polsce technologia egzotyczna, stosowana sporadycznie.
91
92
Ponisze trzy fragmenty kodu speniaj t sam funkcj: wysyaj (lub wywietlaj) warto o nazwie
"firstName" wpisan przez uytkownika w polu formularza XHTML.
w ASP:
<p>Dzikuj, <% Response.Write(Request.Form("firstName")) %>, za wypenienie
mojego formularza.</p>
w ColdFusion:
<p>Dzikuj, <cfoutput>#form.firstName#</cfoutput>, za wypenienie mojego
formularza.</p>
w PHP:
<p>Dzikuj, <?php echo $_POST['firstName']; ?>, za wypenienie mojego
formularza.</p>
LEKCJA 3.
Dynamiczne witryny WWW
Moemy podczy si do serwera na dwa rne sposoby: moemy uruchomi serwer na wasnym
komputerze i wszystko opracowywa wanie na nim, moemy wykorzysta w tym celu komputer
zdalny, zarwno dostpny w naszej wewntrznej sieci, jak i zlokalizowany u dostawcy internetu serwer
internetowy, dostpny przez FTP.
Jeli chcemy pracowa lokalnie, wwczas musimy powici troch czasu na skonfigurowanie swojego komputera (instrukcje poniej). Praca zdalna nie wymaga wprawdzie adnej konfiguracji naszego
komputera, ale bdziemy potrzebowali kilku informacji od administratora naszego serwera, aby
Dreamweaver mg wsppracowa z serwerem.
W zalenoci od dokonanego wyboru zapoznaj si z nastpujcymi podrozdziaami:
Jeli tworzysz lokalnie, przeczytaj nastpny podrozdzia, Praca na serwerze lokalnym.
Jeli tworzysz na komputerze zdalnym, przejd od razu dalej, do podrozdziau Praca
na serwerze zdalnym.
Po zakoczeniu lektury odpowiedniego podrozdziau, niezalenie od wybranej technologii
serwerowej i przeprowadzonej konfiguracji, naley skonfigurowa program Dreamweaver do
pracy z serwerem i wybran technologi serwerow; temat ten omwiony jest w podrozdziale
Definiowanie witryny dynamicznej w programie Dreamweaver (wszyscy uytkownicy).
93
94
Jeli zdecydujesz si tworzy witryn Newland Tours lokalnie, musisz wybra rodzaj serwera, z ktrego
bdziesz korzysta, oraz odpowiednio skonfigurowa swj system. Kierujc si poniszymi nagwkami wyrnionymi pogrubionym drukiem, wybierz instrukcje odpowiadajce Twoim potrzebom.
Po zakoczeniu przejd od razu do podrozdziau Definiowanie witryny dynamicznej w programie
Dreamweaver (wszyscy uytkownicy).
Uytkownicy systemu Mac OS X pracujcy lokalnie maj do wyboru tylko dwie opcje: PHP
z uyciem serwera Apache oraz ColdFusion. Uytkownicy Macintosh OS 9 oraz OS X,
ktrzy chc pracowa w ASP, mog to zrobi, ale nie lokalnie. Bd zmuszeni podczy
si do zdalnego serwera ASP.
LEKCJA 3.
Dynamiczne witryny WWW
W zalenoci od sposobu, w jaki zosta zainstalowany system Windows, by moe mamy ju zainstalowany i dziaajcy serwer IIS. Aby sprawdzi, czy IIS zosta zainstalowany, wejd w Panel sterowania/
Narzdzia administracyjne (aby zobaczy t opcj, uytkownicy Windows XP musz przeczy si do
widoku klasycznego). Jeli widoczna jest tam ikona o nazwie Internetowe usugi informacyjne, oznacza to,
e serwer IIS zosta ju zainstalowany. Aby sprawdzi, czy jest on uruchomiony, kliknij dwukrotnie
ikon i w lewej czci okna dialogowego wybierz pozycj Witryny sieci Web. W prawym panelu powinna
by widoczna pozycja Domylna witryna sieci Web, a przy niej sowo Uruchomione. Jeli napis brzmi Zatrzymane, wwczas kliknij przycisk Uruchom element, aby j uruchomi.
Ustawienia domylne powinny by odpowiednie dla naszych celw, wic nie jest tu konieczna
dodatkowa konfiguracja. Po klikniciu przycisku Dalej system Windows zainstaluje i uruchomi
serwer IIS.
95
96
administracyjne i sprawd w konsoli Internetowe usugi informacyjne, czy Domylna witryna sieci Web ma
stan Uruchomione.
go/coldfusion.
Po kilku chwilach rozpocznie si proces instalacji.
2. Przy wyborze jzyka przeczytaj wywietlon informacj, nacinij OK, a nastpnie kliknij przycisk
Next (dwukrotnie), aby przej przez wstp oraz zaakceptowa umow licencyjn.
Te dwa punkty zawieraj wane informacje, wic nie pomijajmy ich bez zapoznania si z nimi.
3. W oknie Install Type (Rodzaj instalacji) bdzie wymagane wpisanie numeru seryjnego. Jeli nie masz
LEKCJA 3.
Dynamiczne witryny WWW
4. W oknie Installer Configuration (Konfiguracja instalacji) zostaw warto domyln, Server configuration
przycisk Next.
W tym oknie moemy wskaza katalog, w ktrym zainstalowane zostan pliki programu
ColdFusion.
7. W oknie Web Server Selection (Wybr serwera WWW) wybierz Built-In web server (Wbudowany serwer
WWW), jeli nie masz uruchomionego serwera WWW (np. IIS lub Apache), lub (jeli masz ju
uruchomiony serwer WWW) wybierz Configure web server connector for ColdFusion (Skonfiguruj zcze
z serwerem WWW dla ColdFusion) i sprawd, czy Twj serwer jest wymieniony w polu Web Servers/Sites
(Serwery WWW/witryny).
ColdFusion jako serwer aplikacji nie jest przeznaczony do penienia roli serwera WWW.
W prawdziwych witrynach publikacyjnych tak rol peni zwykle inny serwer, np. IIS czy Apache.
W rodowisku produkcyjnym nie trzeba mie serwera WWW z prawdziwego zdarzenia.
Adobe dla celw produkcyjnych umoliwia wypenianie roli serwera WWW przez ColdFusion,
jeli tak sobie zayczymy. Aby aktywowa t funkcj, naley wybra Built-In web server.
97
98
Jeli masz ju zainstalowany jaki serwer WWW, np. IIS lub Apache, moesz pozwoli
ColdFusion na podczenie si do niego. Wwczas, gdy serwer WWW napotka kod ColdFusion,
ktrego nie rozumie, bdzie wiedzia, e naley go przesa do serwera aplikacji ColdFusion
w celu jego przetworzenia.
Dokonany tu wybr ma wpyw na adres URL uywany do wywietlenia stron ColdFusion,
co bdzie miao znaczenie dla konfiguracji programu Dreamweaver w dalszej czci lekcji.
8. Kontynuuj a do zakoczenia pracy kreatora. Od tego momentu dalsze postpowanie nie
wymaga wyjanie.
W czasie instalacji bdziesz musia wybra hasa administratora oraz hasa do usugi
RDS (Remote Development Service). Nie zapomnij ich! Bd one potrzebne do konfiguracji serwera ColdFusion oraz do dostpu do ColdFusion z programu Dreamweaver podczas tworzenia stron, wic nie wyczaj tej opcji i wprowad takie haso, ktre bdziesz
w stanie zapamita.
Proces instalacji moe zaj kilka minut, po czym uruchomiony zostanie serwer ColdFusion.
Po zakoczeniu instalacji otworzy si okno przegldarki, z ktrego uzyskamy dostp
do aplikacji administratora ColdFusion. Aplikacja ta sama dziaa na serwerze ColdFusion.
Musimy kilkakrotnie klikn Next i poczeka jeszcze par minut, a ColdFusion zakoczy
proces instalacji. Gdy znajdziemy si znw w aplikacji administratora, oznacza to, e proces
instalacji dobieg koca i moemy przystpi do pracy.
Instalacja w systemie Mac OS X jest podobna do instalacji w systemie Windows.
Przy programowaniu lokalnym zalecam korzystanie z serwera wbudowanego. Jeeli jednak
wybierzesz Apache jako serwer WWW, w internecie znajdziesz sporo zasobw zwizanych
z konfiguracj takiego zestawu, w tym midzy innymi ACME Guide (Apache/ColdFusion/
MySQL/Eclipse), znajdujcy si w witrynie https://acidlabs.org.
LEKCJA 3.
Dynamiczne witryny WWW
99
100
Wanie zainstalowae Apache, PHP i baz danych MySQL; moesz przystpi do pisania kodu.
LEKCJA 3.
Dynamiczne witryny WWW
1. Przejd do adresu http://www.mamp.info i pobierz najnowsz wersj MAMP. Dla celw niniejszej
101
102
Gdy zostanie wywietlony panel sterowania MAMP, po paru chwilach lampki stanu serwerw
Apache i MySQL zawiec si na zielono. Wwczas rodowisko programistyczne bdzie gotowe
do rozpoczcia pracy. W domylnej przegldarce powinna zosta otwarta strona startowa MAMP.
Folder Sharing suy do kontroli m.in.: udostpniania plikw, usug WWW, dostpu FTP,
udostpniania drukarek i zapory sieciowej (firewall).
LEKCJA 3.
Dynamiczne witryny WWW
5. Upewnij si, e w zakadce Services (Usugi) folderu Sharing opcja Personal Web Sharing nie jest
103
104
Musisz otrzyma informacje dotyczce dostpu do witryny przez FTP, wcznie z nazw
domenow (lub adresem IP) oraz nazw uytkownika i hasem dostpu do swojego konta
na tym serwerze.
Powysze informacje s wystarczajce do uzyskania dostpu do tych folderw w celu przesania tam
zawartoci. Ale bdziemy te potrzebowali jakiego sposobu na jej przegldanie. Przede wszystkim
musimy zna adres URL prowadzcy do treci umieszczonych przez nas na serwerze. Zwykle adres ten
ma posta: http://webdev.dua_firma.pl/twoja_witryna/ lub http://Nazwa_serwera/twoja_ witryna/. Gdy witryna
zostanie przeniesiona do publikacji, adres URL (w tym przykadzie) zmieni si na http://www.dua_
firma.pl/twoja_witryna/. Wana jest tu znajomo kompletnego adresu URL, cznie z http://. Tak
informacj moemy otrzyma wycznie od administratora serwera.
LEKCJA 3.
Dynamiczne witryny WWW
Sites. Upewnij si, e w oknie dialogowym Manage Sites wybrana jest pozycja Newland Tours,
i kliknij Edit (Edycja).
Pamitajmy, e witryna Newland Tours jest ju zdefiniowana. Nie musimy zaczyna od pocztku.
Wystarczy tylko doda zdalny serwer i sprawdzi informacje serwera dla istniejcej witryny.
2. W oknie dialogowym Site Definition for Newland Tours kliknij zakadk Advanced. Z listy Category
(Kategoria) w lewej czci okna wybierz pozycj Remote info (Informacje o serwerze zdalnym). Z menu
rozwijanego Access (Dostp) wybierz waciw pozycj i wprowad odpowiednie informacje w pola,
ktre si pojawi, korzystajc z poniszych wskazwek.
Jeeli pracujesz na komputerze z lokalnym serwerem IIS (ASP lub ColdFusion przez IIS), wybierz
z menu rozwijanego Access opcj Local/Network (Lokalny/Sie). Kliknij ikon folderu obok pola
Remote folder (Folder zdalny) i odszukaj folder C:\Inetpub\wwwroot\. Kliknij przycisk Utwrz nowy
105
106
folder i utwrz folder o nazwie newland. Kliknij go dwukrotnie i nacinij przycisk Zapisz,
aby wybra go jako folder zdalny.
Folder Inetpub/wwwroot jest gwnym folderem WWW lokalnego serwera IIS. Gdy bdziemy
przeglda swoj witryn (http://localhost/), wywietlane bd strony z tego folderu.
model (Model serwera) wybierz ASP VBScript, ColdFusion lub PHP MySQL, w zalenoci od tego,
z ktrego modelu serwera zdecydowae si korzysta. W menu Access (oraz we wszystkich opcjach,
jakie pojawi si poniej) wprowad te same informacje, ktre podae w poprzednim punkcie.
LEKCJA 3.
Dynamiczne witryny WWW
Nie wybieraj ASP JavaScript. Cho oglnie rzecz biorc, ten model serwera dziaa prawidowo, to jest on niezgodny z wikszoci kodu wystpujcego w niniejszej ksice.
Witryna zdalna Newland Tours jest w gruncie rzeczy taka sama jak witryna na serwerze testowym.
Rnica polega na tym, e witryna zdalna istnieje w celu umoliwienia programowi Dreamweaver
zapisu plikw we waciwym folderze, podczas gdy serwer testowy powoduje, e Dreamweaver
moe testowa pliki po ich przetworzeniu przez serwer, dziki czemu moemy sprawdzi
poprawno ich dziaania.
4. W polu URL prefix (Prefiks adresu URL), znajdujcym si w dolnej czci zakadki kategorii Testing
107
108
Jak wspomniano wczeniej, sowo localhost jest skrtem, ktry oznacza serwer WWW
na komputerze lokalnym, i nakazuje pokazanie stron z gwnego folderu serwera (jest to
folder wwwroot w przypadku serwera IIS oraz niezalenie uruchomionego serwera ColdFusion lub htdocs w przypadku serwera Apache w MacOS i www w Windows), w ktrym
to folderze utworzylimy (w poprzednim punkcie) folder newland.
Jeli korzystasz ze zdalnego serwera (czy to przez sie, czy to przez FTP), wpisz jego adres URL,
podany przez administratora serwera. Prawdopodobnie bdzie on mia posta: http://www.dua_
firma.pl/newland/.
Tak czy inaczej adres musi rozpoczyna si od http:// i nie moe zawiera oznacze dyskw
(np. h:\). Zwrmy te uwag, e w adresie tym uywa si zwykych ukonikw (/), a nie lewych (\).
Jeli na dalszym etapie lekcji witryna nie wywietli si poprawnie, pole URL prefix jest
pierwszym miejscem, w ktre powinnimy zajrze. Jeli informacja ta nie zostaa wpisana poprawnie, nie bdziemy w stanie wczyta witryny i zobaczy jej w dziaaniu, nawet
gdy skadnia jest poprawna, a serwer i model serwera zostay poprawnie skonfigurowane
i uruchomione.
5. Kliknij OK, aby zapisa dane i zamkn okno dialogowe, a nastpnie kliknij Done, aby
(Mac OS) kady z plikw HTML widocznych w palecie Files, wybierz z menu kontekstowego
opcj Edit/Rename (Edycja/Zmie nazw) i zmie odpowiednio rozszerzenia plikw z .html na .asp,
.cfm lub .php. Ilekro pojawi si okno dialogowe Update Files (Aktualizacja plikw), kliknij Update
(Aktualizuj).
Przy aktualizacji do witryny dynamicznej wymagana jest zmiana rozszerze, gdy za pomoc
rozszerze serwer okrela, czy strona zawiera jaki szczeglny kod, ktry naley przetworzy.
LEKCJA 3.
Dynamiczne witryny WWW
7. Kliknij folder najwyszego poziomu, a nastpnie kliknij przycisk Put File(s) (Dodaj pliki).
8. Przecz panel Files na widok zdalny (Remote view). Kliknij raz, aby wybra plik index.asp, index.cfm
lub index.php w palecie Files, i nacinij F12 (Windows) lub Option+F12 (Mac OS).
Nacinicie klawisza F12 lub Option+F12 testuje witryn na serwerze. Wynik testu moe przynie
albo dobre, albo ze wieci. Jeeli ujrzymy stron gwn witryny, oznacza to, e zostaa ona
poprawnie skonfigurowana i jestemy gotowi do dalszej pracy. Jeli natomiast otrzymamy
komunikat o bdzie lub strona nie wywietli si poprawnie, to znaczy, e co poszo nie tak.
Aby naprawi problem, zajrzyjmy ponownie w pole URL prefix. Sprawdmy te za pomoc
Eksploratora Windows lub Macintosh Finder, czy pliki rzeczywicie zostay przesane do zdalnej
witryny. Jeli problem wci wystpuje, skontaktuj si z administratorem witryny, ktry powinien
sobie z nim poradzi.
109
110
LEKCJA 3.
Dynamiczne witryny WWW
prost aplikacj dynamiczn, dziki ktrej zobaczymy, co nas dalej czeka, zarwno pod wzgldem
pojciowym (sposb dziaania witryn dynamicznych), jak i pod wzgldem dziaania (sekwencje krokw niezbdnych do utworzenia danej funkcji).
New Document (Nowy dokument), z listy Category po lewej stronie, wybierz pozycj Dynamic Page
(Strona dynamiczna), a nastpnie w prawej kolumnie wska ASP VBScript, ColdFusion lub PHP,
a na licie Layout (Ukad) wybierz opcj <none>. Upewnij si, e menu DocType (Rodzaj dokumentu)
ustawione jest na XHTML 1.0 Transitional. Kliknij przycisk Create (Utwrz).
W tym kroku tworzymy now stron dynamiczn. Okrelajc jej rodzaj, wskazujemy programowi
Dreamweaver, jakiego jzyka ma uy, gdy zastosujemy gotowe funkcje serwera, jakie rozszerzenie
ma nada przy zapisywaniu pliku i w niektrych przypadkach jaki dodatkowy kod ma
zosta dopisany do nagwkw dokumentu.
Uytkownicy ASP zobacz wiersz <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>. Ten wiersz
okrela, czy korzystamy z VBScript, czy te z JScript obu jzykw mona uy z ASP.
W wiczeniach w tej ksice bdziemy jednak pracowa z VBScript. ColdFusion i PHP
111
112
nie posiadaj kilku jzykw skryptowych, wic w kodzie PHP lub ColdFusion nie ma
odpowiednika tego wiersza.
2. Kliknij gdziekolwiek w oknie projektu, z palety Insert wybierz kategori Forms (Formularze)
Przerywana linia w kolorze czerwonym wskazuje granice formularza. Nie bdzie ona widoczna
w przegldarce, jej zadaniem jest pomoc w okreleniu pocztku i koca formularza na stronie.
3. Kliknij przycisk Text Field (Pole tekstowe). W oknie dialogowym Input Tag Accessibility Attributes
(Atrybuty dostpnoci znacznika input), w polu Label (Etykieta), wpisz Imi i kliknij OK. Kliknij przycisk
Button (Przycisk) i w oknie Insert Tag Accessibility Attributes nacinij Cancel (Anuluj). W oknie projektu
kliknij prawym przyciskiem myszy i z menu kontekstowego wybierz Label. Wpisz tu Wylij.
Kliknij OK.
Tak oto dodalimy dwa elementy formularza: pole tekstowe, do ktrego uytkownik moe wpisa
tekst, oraz przycisk Wylij.
LEKCJA 3.
Dynamiczne witryny WWW
4. Kliknij pole tekstowe i w palecie Properties nadaj mu nazw firstName, po czym wcinij klawisz
Zaraz uyjemy tej nazwy w celu pobrania wartoci w ASP, ColdFusion lub PHP. Zawsze
nadawaj wszystkim polom formularza znaczce nazwy. Kod jest ju i tak wystarczajco
trudny do wpisania nie pogarszajmy tego i nie zostawiajmy tam nazw typu Textfield1,
Textfield2 i Textfield3, jakie domylnie nadawane s przez program Dreamweaver.
Klawisz tabulacji lub Enter/Return uyty zosta w celu zastosowania wartoci wprowadzonej
do palety Properties.
5. Kliknij <form#form1> na pasku wyboru znacznikw, aby aktywowa palet Properties
dla formularza. Nadaj formularzowi nazw frm_name, a w pole Action (Dziaanie) wpisz
test_form_processor.asp (bd .cfm czy .php).
113
114
Pole Action wskazuje na stron (lub inny element) zawierajc skrypt, ktry moe przetworzy
dane formularza. Jest to zawsze adres URL. W tym przypadku pole wskazuje na nieistniejcy
adres, gdy nie utworzylimy jeszcze strony test_form_processor.asp (bd .cfm czy .php). Metoda
wysania powinna by ustawiona na warto POST. W dalszej czci ksiki wyjani,
co oznacza POST.
Odtd bd zakada, e sam dojdziesz do tego, jakie rozszerzenia s waciwe w Twoim
przypadku. Wymienianie za kadym razem, gdy odwouj si do pliku, sw bd .cfm
czy .php byoby marnowaniem miejsca i obraaoby Twoj inteligencj. Bd zawsze
uywa rozszerzenia .asp, tak wic jeli korzystasz z ColdFusion, po prostu podstaw w to
miejsce rozszerzenie .cfm, a jeli uywasz PHP, zamie rozszerzenie na .php.
Jest to plik jednorazowego uytku, ktry tworzymy tylko w celu przetestowania prostej cechy
witryny dynamicznej. Do stron uywanych dla celw testowych dodaj czsto przedrostek
test_, w ten sposb po zakoczeniu mog je atwo znale i usun.
Czsto stosuj przyrostek _processor dla stron istniejcych w celu przetwarzania pewnego
rodzaju danych. Ta strona przetworzy dane wpisane przez uytkownika do formularza.
3. W widoku projektu wpisz Dzikuj Ci, , za wypenienie mojego formularza. Z kursorem
umieszczonym gdziekolwiek wewntrz tego akapitu wybierz Paragraph z menu Format, w palecie
Properties.
Ostatecznie tekst ten bdzie brzmia: Dzikuj Ci, [imi wpisane przez uytkownika],
za wypenienie mojego formularza. Wikszo zdania stanowi statyczny tekst. Elementem
zmiennym bdzie rzeczywista warto oznaczajca imi, ktre zostanie pobrane z formularza.
Wybierajc Paragraph jako format akapitu, objlimy cig tekstu znacznikami <p></p>.
LEKCJA 3.
Dynamiczne witryny WWW
4. Umie kursor midzy przecinkami, w miejscu na imi. Otwrz palet Bindings (Wizania),
115
116
Variable (Zadaj zmiennej), a jeli uywasz ColdFusion lub PHP wybierz tu Form Variable
(Zmienna odpowiadajca polu formularza). W wywietlonym oknie dialogowym w przypadku ASP
z menu Type (Rodzaj) wybierz Request.Form, a w polu Name wpisz firstName; w przypadku
ColdFusion lub PHP wpisz tylko firstName w pole Name. Kliknij OK.
Zrzut ekranu po lewej stronie przedstawia okno dialogowe Request Variable, widoczne
u uytkownikw ASP, natomiast drugi rysunek przedstawia okno dialogowe Form Variable,
widoczne dla uytkownikw ColdFusion i PHP.
Paleta Bindings zostanie zaktualizowana i bdzie pokazywa zmienn firstName. Zrzut ekranu
przedstawia wygld palety Bindings w ASP. Rni si on nieznacznie od tego w ColdFusion
i PHP (sowo Request zastpione bdzie sowem Form, a zamiast wyraenia Form.firstName bdzie
tu firstName).
LEKCJA 3.
Dynamiczne witryny WWW
Cho {Form.firstName} wyglda jak kod, tak naprawd jest to pseudokod. Wyglda on
tak samo, niezalenie od rodzaju serwera. Moemy zaoy, e Adobe uywa pseudokodu do utworzenia oglnego, opisowego jzyka, sucego do przekazania, co w rzeczywistoci zawiera element ulegajcy zmianie. Zaoenie to jest suszne, jeeli tylko nie prbujemy zastosowa tej skadni w prawdziwym kodzie.
117
118
Jeli zerkniemy w rzeczywisty kod skryptu, jaki zosta umieszczony na serwerze, zobaczymy,
e zosta tam dodany cig <%= Request.Form("firstName") %> (ASP), <cfoutput>#form.
firstName#</cfoutput> (ColdFusion) lub <?php echo $_POST ['firstName']; ?> (PHP).
Jest to ten sam kod, ktry podaem wczeniej w tym rozdziale, z jednym maym wyjtkiem
w przypadku ASP.
Moemy nakaza IIS przesanie na wyjcie wyraenia przy uyciu obiektu Response.
Najpopularniejszym zastosowaniem obiektu Response jest Response.Write(). Polecenie
to nakazuje IIS wstawienie do dokumentu treci objtej nawiasami. Pomijajc kilka niuansw,
Response.Write() jest mniej wicej odpowiednikiem <cfoutput> lub echo. Response.Write()
i jest na tyle popularne, e doczekao si skrtu. Gdy zobaczymy blok kodu ASP rozpoczynajcy
si wyraeniem <%= zamiast zwykego <%, oznacza to <% Response.Write(). Innymi sowy,
ponisze dwa wiersze wyraaj dokadnie to samo:
<% Response.Write(Request.Form("firstName")) %>
<%= Request.Form("firstName") %>
Shift, zaznacz strony test_form.asp i test_form_processor.asp. Kliknij przycisk Put File(s) na pasku narzdzi
w grnej czci palety.
Nie moemy przetestowa witryny, dopki nie zostanie ona uruchomiona za porednictwem
serwera, a nasz serwer nie jest nasz witryn lokaln. eby przetestowa witryn, musimy przesa
pliki na serwer. Jeeli zostanie wywietlone pytanie, czy przesa pliki zalene, zaznacz pole opcji
ustawiajcej niewywietlanie tego okna dialogowego i kliknij przycisk No, poniewa nie mamy
plikw zalenych.
LEKCJA 3.
Dynamiczne witryny WWW
Jest to czynno, o ktrej stale zapominam. Jeli w czasie pracy pojawi si niespodziewany bd, Twoim pierwszym krokiem powinno by sprawdzenie, czy wszystkie wymagane
pliki zostay przesane na serwer.
8. Zaznacz w palecie Site stron test_form.asp i nacinij klawisz F12, aby przetestowa j
w przegldarce. Po wczytaniu strony wpisz swoje imi w pole formularza i kliknij Wylij.
Zostaniesz przekierowany na stron test_form_processor.asp. Mam nadziej, e (tak jak si
spodziewae) na ekranie pojawio si imi wpisane przez Ciebie do formularza.
9. We wci otwartym oknie przegldarki wybierz z menu Widok/rdo strony (lub odpowiadajce
temu polecenie w Twojej przegldarce). Spjrz na wiersz objty znacznikami <p>.
To interesujce. Kod dynamiczny zosta cakowicie usunity! Strona ta zawiera statyczny kod
XHTML. Nawet element zmienny (imi) wyglda tak, jakby by wpisany rcznie do kodu.
Ale oczywicie wiemy, e byo inaczej.
119
120
Przegldajc kod wyjciowy, dochodzimy do zasadniczej kwestii. Strona, ktr wpisujemy w programie Dreamweaver, rni si od strony widocznej w przegldarce uytkownika, mimo e obie nosz t
sam nazw (i wci oczywicie maj ze sob wiele wsplnego).
Rnica midzy dwiema wersjami tej strony wynika z tego, e oryginalny kod ASP (ColdFusion, PHP)
zosta przetworzony i usunity, a jego wartoci wyjciowe zostay doczone do kodu XHTML.
Midzy dwiema wersjami strony wystpuj rwnie pewne podobiestwa: cao standardowego kodu
XHTML znajdujcego si w oryginalnej wersji, wcznie ze znacznikami <body> i <p>, oraz wikszo
tekstu pozostay niezmienione w wersji wyjciowej.
Czego si nauczye?
W czasie tej lekcji:
poznae zwizki midzy warstw prezentacyjn, logiczn i zawartoci (strony 86 89),
poznae wady i zalety piciu gwnych technologii serwerowych (strony 90 92),
skonfigurowae lokalny serwer WWW i serwer aplikacyjny (strony 93 104),
zdefiniowae witryn dynamiczn w programie Dreamweaver (strony 105 110),
utworzye formularz WWW (strony 111 114),
utworzye stron zbierajc i wywietlajc dane z formularza WWW (strony 114 120).